Enviar búsqueda
Cargar
Angular の紹介
•
0 recomendaciones
•
1,125 vistas
Neo Xrea
Seguir
Angular を初めて使う人たち向けに作ったスライド。公開用にちょっと修正。
Leer menos
Leer más
Software
Denunciar
Compartir
Denunciar
Compartir
1 de 48
Descargar ahora
Descargar para leer sin conexión
Recomendados
Azure ADとIdentity管理
Azure ADとIdentity管理
Naohiro Fujie
Appium 2.0 ではじめるモバイルアプリテスト
Appium 2.0 ではじめるモバイルアプリテスト
Masayuki Wakizaka
GraalVMのJavaネイティブビルド機能でどの程度起動が速くなるのか?~サーバレス基盤上での評価~ / How fast does GraalVM's...
GraalVMのJavaネイティブビルド機能でどの程度起動が速くなるのか?~サーバレス基盤上での評価~ / How fast does GraalVM's...
Shinji Takao
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
NTT DATA Technology & Innovation
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
日本マイクロソフト株式会社
Keycloak拡張入門
Keycloak拡張入門
Hiroyuki Wada
Keycloak & midPoint の紹介
Keycloak & midPoint の紹介
Hiroyuki Wada
Azure load testingを利用したパフォーマンステスト
Azure load testingを利用したパフォーマンステスト
Kuniteru Asami
Recomendados
Azure ADとIdentity管理
Azure ADとIdentity管理
Naohiro Fujie
Appium 2.0 ではじめるモバイルアプリテスト
Appium 2.0 ではじめるモバイルアプリテスト
Masayuki Wakizaka
GraalVMのJavaネイティブビルド機能でどの程度起動が速くなるのか?~サーバレス基盤上での評価~ / How fast does GraalVM's...
GraalVMのJavaネイティブビルド機能でどの程度起動が速くなるのか?~サーバレス基盤上での評価~ / How fast does GraalVM's...
Shinji Takao
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
今から始めるWebClient(JSUG勉強会 2020年その6 LT大会)
NTT DATA Technology & Innovation
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
【BS14】Blazor WebAssemblyとJavaScriptのインターオペラビリティ
日本マイクロソフト株式会社
Keycloak拡張入門
Keycloak拡張入門
Hiroyuki Wada
Keycloak & midPoint の紹介
Keycloak & midPoint の紹介
Hiroyuki Wada
Azure load testingを利用したパフォーマンステスト
Azure load testingを利用したパフォーマンステスト
Kuniteru Asami
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
JustSystems Corporation
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
Yusuke Naka
監視 Overview
監視 Overview
IIJ
動的コンテンツをオリジンとしたCloudFrontを構築してみた
動的コンテンツをオリジンとしたCloudFrontを構築してみた
Taiki Kawamura
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Ryosuke Uchitate
PHPのセッション管理にDynamoDBを使う
PHPのセッション管理にDynamoDBを使う
Taiji INOUE
Argo Workflows 3.0, a detailed look at what’s new from the Argo Team
Argo Workflows 3.0, a detailed look at what’s new from the Argo Team
LibbySchulze
[JJUG CCC 2021 Spring]Eclipse ユーザのための VSCode のススメ
[JJUG CCC 2021 Spring]Eclipse ユーザのための VSCode のススメ
Satoshi Takami
20190821 AWS Black Belt Online Seminar AWS AppSync
20190821 AWS Black Belt Online Seminar AWS AppSync
Amazon Web Services Japan
Harbor RegistryのReplication機能
Harbor RegistryのReplication機能
Masanori Nara
Spring Boot + Netflix Eureka
Spring Boot + Netflix Eureka
心 谷本
root権限無しでKubernetesを動かす
root権限無しでKubernetesを動かす
Akihiro Suda
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
toshi_pp
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
AWSでアプリ開発するなら 知っておくべこと
AWSでアプリ開発するなら 知っておくべこと
Keisuke Nishitani
PDSを実現するにあたっての技術動向の紹介 (OAuth, OpenID Connect, UMAなど)
PDSを実現するにあたっての技術動向の紹介 (OAuth, OpenID Connect, UMAなど)
Tatsuo Kudo
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
gree_tech
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
OCIランタイムの筆頭「runc」を俯瞰する
OCIランタイムの筆頭「runc」を俯瞰する
Kohei Tokunaga
Jfrog artifactory artifact management c tamilmaran presentation - copy
Jfrog artifactory artifact management c tamilmaran presentation - copy
TAMILMARAN C
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
20060419
20060419
小野 修司
Más contenido relacionado
La actualidad más candente
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
JustSystems Corporation
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
Yusuke Naka
監視 Overview
監視 Overview
IIJ
動的コンテンツをオリジンとしたCloudFrontを構築してみた
動的コンテンツをオリジンとしたCloudFrontを構築してみた
Taiki Kawamura
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Ryosuke Uchitate
PHPのセッション管理にDynamoDBを使う
PHPのセッション管理にDynamoDBを使う
Taiji INOUE
Argo Workflows 3.0, a detailed look at what’s new from the Argo Team
Argo Workflows 3.0, a detailed look at what’s new from the Argo Team
LibbySchulze
[JJUG CCC 2021 Spring]Eclipse ユーザのための VSCode のススメ
[JJUG CCC 2021 Spring]Eclipse ユーザのための VSCode のススメ
Satoshi Takami
20190821 AWS Black Belt Online Seminar AWS AppSync
20190821 AWS Black Belt Online Seminar AWS AppSync
Amazon Web Services Japan
Harbor RegistryのReplication機能
Harbor RegistryのReplication機能
Masanori Nara
Spring Boot + Netflix Eureka
Spring Boot + Netflix Eureka
心 谷本
root権限無しでKubernetesを動かす
root権限無しでKubernetesを動かす
Akihiro Suda
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
toshi_pp
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
土岐 孝平
AWSでアプリ開発するなら 知っておくべこと
AWSでアプリ開発するなら 知っておくべこと
Keisuke Nishitani
PDSを実現するにあたっての技術動向の紹介 (OAuth, OpenID Connect, UMAなど)
PDSを実現するにあたっての技術動向の紹介 (OAuth, OpenID Connect, UMAなど)
Tatsuo Kudo
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
gree_tech
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
Yoshinori Matsunobu
OCIランタイムの筆頭「runc」を俯瞰する
OCIランタイムの筆頭「runc」を俯瞰する
Kohei Tokunaga
Jfrog artifactory artifact management c tamilmaran presentation - copy
Jfrog artifactory artifact management c tamilmaran presentation - copy
TAMILMARAN C
La actualidad más candente
(20)
Selenium WebDriver + python で E2Eテスト自動化
Selenium WebDriver + python で E2Eテスト自動化
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
実践 WebRTC 〜最新事例と開発ノウハウの紹介〜
監視 Overview
監視 Overview
動的コンテンツをオリジンとしたCloudFrontを構築してみた
動的コンテンツをオリジンとしたCloudFrontを構築してみた
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
Amazon Cognito使って認証したい?それならSpring Security使いましょう!
PHPのセッション管理にDynamoDBを使う
PHPのセッション管理にDynamoDBを使う
Argo Workflows 3.0, a detailed look at what’s new from the Argo Team
Argo Workflows 3.0, a detailed look at what’s new from the Argo Team
[JJUG CCC 2021 Spring]Eclipse ユーザのための VSCode のススメ
[JJUG CCC 2021 Spring]Eclipse ユーザのための VSCode のススメ
20190821 AWS Black Belt Online Seminar AWS AppSync
20190821 AWS Black Belt Online Seminar AWS AppSync
Harbor RegistryのReplication機能
Harbor RegistryのReplication機能
Spring Boot + Netflix Eureka
Spring Boot + Netflix Eureka
root権限無しでKubernetesを動かす
root権限無しでKubernetesを動かす
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
NginxとLuaを用いた動的なリバースプロキシでデプロイを 100 倍速くした
怖くないSpring Bootのオートコンフィグレーション
怖くないSpring Bootのオートコンフィグレーション
AWSでアプリ開発するなら 知っておくべこと
AWSでアプリ開発するなら 知っておくべこと
PDSを実現するにあたっての技術動向の紹介 (OAuth, OpenID Connect, UMAなど)
PDSを実現するにあたっての技術動向の紹介 (OAuth, OpenID Connect, UMAなど)
比較サイトの検索改善(SPA から SSR に変換)
比較サイトの検索改善(SPA から SSR に変換)
ソーシャルゲームのためのデータベース設計
ソーシャルゲームのためのデータベース設計
OCIランタイムの筆頭「runc」を俯瞰する
OCIランタイムの筆頭「runc」を俯瞰する
Jfrog artifactory artifact management c tamilmaran presentation - copy
Jfrog artifactory artifact management c tamilmaran presentation - copy
Similar a Angular の紹介
Mvc conf session_5_isami
Mvc conf session_5_isami
Hiroshi Okunushi
20060419
20060419
小野 修司
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
shigeya
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
OCHI Shuji
HTML5&API総まくり
HTML5&API総まくり
Shumpei Shiraishi
20050903
20050903
小野 修司
HTML5最新動向
HTML5最新動向
Shumpei Shiraishi
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
david9142
メトロスタイルアプリ開発最初の一歩
メトロスタイルアプリ開発最初の一歩
ShinichiAoyagi
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
Akira Inoue
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
normalian
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
Daizen Ikehara
C#の書き方
C#の書き方
信之 岩永
C#の書き方
C#の書き方
信之 岩永
Chrome DevTools.next
Chrome DevTools.next
yoshikawa_t
Intalio japan special cloud workshop
Intalio japan special cloud workshop
Daisuke Sugai
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Takayoshi Tanaka
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Shumpei Shiraishi
ASP. NET Core 汎用ホスト概要
ASP. NET Core 汎用ホスト概要
TomomitsuKusaba
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Akira Inoue
Similar a Angular の紹介
(20)
Mvc conf session_5_isami
Mvc conf session_5_isami
20060419
20060419
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
Internet Explorer 9 の新機能「固定サイト」 (Pinned sites)
2012 05-19第44回cocoa勉強会発表資料
2012 05-19第44回cocoa勉強会発表資料
HTML5&API総まくり
HTML5&API総まくり
20050903
20050903
HTML5最新動向
HTML5最新動向
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
[公開用]Netラボ2012年2月勉強会 asp.netmvc4 beta新機能の紹介
メトロスタイルアプリ開発最初の一歩
メトロスタイルアプリ開発最初の一歩
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
TypeScript ファースト ステップ (v.0.9 対応版) ~ Any browser. Any host. Any OS. Open Sourc...
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
わんくま同盟名古屋勉強会18回目 ASP.NET MVC3を利用したHTML5な画面開発~クラウドも有るよ!~
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
jQuery/Html5/ASP.NET MVC 対応コンポーネントを用いたデバイス対応業務アプリケーション開発
C#の書き方
C#の書き方
C#の書き方
C#の書き方
Chrome DevTools.next
Chrome DevTools.next
Intalio japan special cloud workshop
Intalio japan special cloud workshop
13016 n分で作るtype scriptでnodejs
13016 n分で作るtype scriptでnodejs
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
Webフロントエンド開発の最新トレンド - HTML5, モバイル, オフライン
ASP. NET Core 汎用ホスト概要
ASP. NET Core 汎用ホスト概要
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Visual Studio 2012 で実現する HTML5 & マルチ デバイス時代の Web 開発
Angular の紹介
1.
Angular の紹介
2.
目次 1. このスライドの目的 2. Angular
とは 3. Angular の特徴 1. TypeScript・Angular CLI 2. データバインディングの仕組み解説 3. コーディング環境の動作デモ 4. 実行環境・関連ツール 1. Node.js・npm・Git 5. Angular を利用した開発における注意点
3.
このスライドの目的 • Angular とは何かを知る •
Angular を使った Web アプリ開発の流れがイメージ できるようになる
4.
Angular とは • Google
が開発 • SPA を実現するフレームワーク
5.
SPA とは Single Page
Application の略
6.
JavaScript と Web アプリケーションの 関係の歴史をおさらい
7.
1. 昔ながらの Web
アプリケーション クライアント・サーバ型 • 画面遷移ごとにサーバが動的に生成した HTML を返す • JavaScript は画面上の処理の補助程度
8.
2. AJAX・jQuery の登場 •
AJAX の登場により 非同期通信でデータを取得し 画面遷移することなく HTML を書き換えて表示 • JavaScript で HTML を書き換える DOM 操作は自力で実装 • jQuery の登場で DOM 操作はマシになったものの 大規模開発になると破綻しやすい • ブラウザごとの挙動の違いも自分たちで考慮する必要…
9.
SPA の登場 • DOM
操作をフレームワークに任せる データバインディング (ブラウザ差異もフレームワークが吸収) • クライアントサイドは非同期通信とデータバインディングを駆 使して1つの HTML ファイル上で複数の画面切替を実現する だから「Single Page」Application • サーバサイドはデータの返却と永続化だけ担当 クライアントアプリとは疎結合な作りにできる RESTful WebAPI サーバが主流に
10.
Angular の特徴
11.
Angular の特徴 • 開発言語に
TypeScript を使用 • Angular CLI が開発環境・ツールを一式提供 • フォーム開発・非同期通信などを実現する 各種ライブラリも組み込み済み • フルスタック • 大規模開発に向いている • 規則・規約は多いが 平仄は揃えやすい • 新たに決めないといけないことが少ない
12.
TypeScript • Microsoft が開発した言語 •
JavaScript に型定義を持ち込み より Java っぽく使えるようにした拡張言語 • ベースは ES2015 (ECMAScript) という JavaScript の新しめの仕様に準拠 • JavaScript は「クラス」ごとに ファイルを分けて開発する時代 • これ以前の古い JS の仕様は もはや誤りなので参考にしない
13.
Angular CLI • 開発フローやコーディング規約などを整備した Angular
公式のコマンドラインツール • プロジェクトや雛形ファイルが コマンド一発で生成できる • ライブリロード開発 • コーディングスタイルをチェック・自動整形 • ユニットテストツール • E2E テストツール
14.
Angular CLI で
できること ほんの少しだけ紹介
15.
Angular CLI でプロジェクト雛形を生成 •
Angular CLI の「ng」コマンドを使用する $ ng new example-app
16.
Angular CLI でプロジェクト雛形を生成 example-app/ ├
package.json ├ angular.json ├ tsconfig.json ├ tslint.json ├ src/ │ ├ index.html │ ├ main.ts │ ├ app/ │ │ ├ app.component.ts │ │ ├ app.component.html │ │ ├ app.component.css │ │ └ app.component.spec.ts │ └ environments/ └ e2e/ … ディレクトリが生成される … 依存モジュール・スクリプト定義ファイル … プロジェクト設定ファイル … TypeScript コンパイル設定ファイル … TypeScript スタイルチェック用ファイル … ブラウザで表示する唯一の HTML ファイル … Angular アプリの起動に必要な処理 … トップ画面の「処理」 … トップ画面の「構造」 … トップ画面の「見栄」 … トップ画面のユニットテストコード … 開発環境・本番環境の切替用設定ファイル … E2E テストコード
17.
各クラスのファイル雛形も一発生成 • 「ユーザ情報一覧」画面を構成するクラスを作ってみる : ファイル生成と同時に
import の追記もしてくれる $ ng generate component users CREATE src/app/users/users.component.scss (0 bytes) CREATE src/app/users/users.component.html (28 bytes) CREATE src/app/users/users.component.spec.ts (643 bytes) CREATE src/app/users/users.component.ts (280 bytes) UPDATE src/app/app.module.ts (406 bytes) # ←
18.
ライブリロード開発 • 専用のコマンドで開発用の簡易サーバが起動する • ソースファイルの変更を検知して自動的に再ビルド •
ブラウザも連動して自動的に F5 更新してくれる $ ng serve
19.
豊富な同梱ツール群 • TSLint • TypeScript
のスタイルチェッカ • 型定義忘れや変数名の良くない記述を指摘してくれる • インデントなどはファイル保存時に自動修正 • Jasmine・Karma • ユニットテストツール • コードカバレッジも分かる • Protractor • Selenium 的な E2E テストツール • 複数ブラウザに対応・設定次第で iPhone 上での自動テストも可
20.
Angular の基礎 データバインディングの仕組みを知る
21.
データバインディングの仕組み 1 • 登場人物
1 : コンポーネント TS • 1画面の「処理」を実装する ファイル • さきほどの ng generate コマンドで自動生成 • メンバ変数 name は自分で実装したもの @Component({ selector: 'app-example', templateUrl: './example.component.html', styleUrls: ['./example.component.scss'] }) export class ExampleComponent { /** 名前データを保持する変数 */ public name = 'テスト'; }
22.
データバインディングの仕組み 2 • 登場人物
2 : コンポーネント HTML • コンポーネント TS に対応する「画面」を実装するファイル • HTML 中に Angular 独自の記法を混ぜ込める <p>ようこそ {{ name }} さん!</p> Angular 独自記法
23.
データバインディングの仕組み 3 • 登場人物
1 : コンポーネント TS • 1画面の「処理」を実装する ファイル • さきほどの ng generate コマンドで自動生成 • メンバ変数 name は自分で実装したもの @Component({ selector: 'app-example', templateUrl: './example.component.html', styleUrls: ['./example.component.scss'] }) export class ExampleComponent { /** 名前データを保持する変数 */ public name = 'テスト'; } コンポーネント HTML ココでファイルの 紐付け
24.
データバインディングの仕組み 4 • HTML
上の {{ name }} と TS 上の name メンバ変数 が リンクしている <p>ようこそ {{ name }} さん!</p> @Component({ /* 省略 */ }) export class ExampleComponent { /** 名前データを保持する変数 */ public name = 'テスト'; } 最終的な画面表示: ようこそ テスト さん! コンポーネント TS: コンポーネント HTML:
25.
データバインディングの仕組み 5 • TS
上の name メンバ変数を書き換えれば 連動して画面表示も変わる <p>ようこそ {{ name }} さん!</p> @Component({ /* 省略 */ }) export class ExampleComponent { /** 名前データを保持する変数 */ public name = 'なまえ'; } 最終的な画面表示: ようこそ なまえ さん! コンポーネント TS: コンポーネント HTML: 「テスト」から 変更
26.
データバインディングの仕組み 6 • ココまでは
TypeScript → HTML の 単方向データバインディング • Web アプリケーションは ユーザの操作に基づいて 処理したいことも多々ある • 画面 (HTML) で発生したイベントを起因に データを書き換えるには • HTML から コンポーネント TS にイベント発生を知らせる • → イベントバインディング
27.
データバインディングの仕組み 7 • コンポーネント
HTML にボタンを設置する • ボタンにクリックイベントのバインディングを設定する <p>ようこそ {{ name }} さん!</p> <button (click)="setName()">名前を設定する</button> Angular 独自記法 (onclick と同等) 呼び出したい関数名を 記述する
28.
データバインディングの仕組み 8 • コンポーネント
TS に 対応する setName() メソッドを作る @Component({ /* 省略 */ }) export class ExampleComponent { /** 名前データを保持する変数 */ public name = 'テスト'; /** 名前データを設定する処理 */ public setName(): void { this.name = 'おなまえ'; } } • メンバ変数 name に 文字列「おなまえ」を 代入するメソッド • 実行されれば メンバ変数 name の値は 「テスト」から 「おなまえ」に書き換わる
29.
データバインディングの仕組み 9 <p>ようこそ {{
name }} さん!</p> <button (click)="setName()">名前を設定する</button> クリック @Component({ /* 省略 */ }) export class ExampleComponent { /** 名前データを保持する変数 */ public name = 'テスト'; /** 名前データを設定する処理 */ public setName(): void { this.name = 'おなまえ'; } } 関数実行 画面描画が 変わる イベント伝達
30.
データバインディングの仕組み 10 • 双方向データバインディング
は • TS → HTML の「データバインディング」と • HTML → TS の「イベントバインディング」を • 組み合わせて • 相互にデータをやりとりする仕組み
31.
デモ お見せします
32.
デモアプリの仕様 と やること ログイン画面
トップ画面 ユーザ一覧 画面 設定画面 ログアウト 1. データバインディング の実演 2. 新規画面として実装 表にデータをバインドする 3. (作成済) デザインサンプル
33.
コーディング環境の動作デモ IDE (エディタ) に
Visual Studio Code を使います • ライブリロード開発の様子 • Angular CLI による雛形ファイル生成 • コーディングスタイルチェック • ファイル保存時の自動コード整形 • データバインディングを活用した実装手順 • https://stackblitz.com/edit/angular-example-20181030
34.
デモ おわり 実行環境・関連ツールの話に 移ります
35.
実行環境・関連ツール • Angular アプリ開発には
Node.js・npm が必要 • Git でのバージョン管理がデファクト・スタンダード
36.
Node.js • JavaScript の実行環境 •
通常の JS の実行環境は「ブラウザ」 • 「画面」を持たず JS を実行する • JavaScript コードをサーバサイドで実行 するために作られた • Angular アプリのビルド処理、 簡易サーバなどの実行基盤となる
37.
npm (Node Package
Manager) • Node.js 同梱の パッケージ管理ツール • Maven・RubyGems 的な • 依存ライブラリを DL・インストールしてくれる • 定義ファイルに利用ライブラリなどを書く • package.json • 同ファイルに開発用サーバ起動やテスト実行などのコ マンドも定義できる
38.
Git • バージョン管理ツール • CVS・SVN
的な • Angular CLI でプロジェクト雛形を作ると勝手に構築される • バージョン管理ツールのデファクト・スタンダード • Windows 向けには Bash ターミナル環境も提供 (GitBash) • 独特な概念が多いので 初学者は要学習 • 理解して使えばチーム開発がとってもやりやすくなる
39.
実際に使って感じた Angular の特徴
40.
TypeScript ありがたい • JavaScript
の型に関する難解な仕様から逃れられる • クラス構文のおかげでオブジェクト指向で書きやすい • TSLint と VSCode (IDE) の併用で コーディング中にエラーが分かる・自動修正してもらえる ※ 非同期処理など素の JavaScript でも出てくる概念は要学習 (ES2015 以降の仕様のキャッチアップは必要)
41.
明示的な規約・規則が多い • 「誰が作っても同じような作り」にしやすい • 平仄がとれるので保守性は高まる •
他の有名な SPA フレームワークと比べて ファイル数・コーディング量は多くなりがち • 初学者は覚えること・記述量が多くて大変かも • 技術スタックやコーディングルールなどを 1 から考えて周知する手間は省ける • 「先人の知恵」に従う方が結果的にはメリットが多い
42.
Angular アプリ開発時の注意
43.
開発者が自分で DOM 操作してはいけない •
Angular に jQuery は併用できない • Angular の「データバインディング」に任せる • (これまで JS で画面を操作してきた概念とは全く違う) • 強引に DOM 操作してしまうと Angular がその変更を検知できず アプリが壊れる Angular の思想・流儀を知り、従う
44.
ググる時は「情報の鮮度」に注意 • Angular の最新バージョンは
7.0.0 (2018年11月時点) • v7 は10月にリリースされたばかり • v6 系が LTS (長期サポート) 対象 • v4 系以前は既にサポート終了 • Angular は半年ごとにメジャーバージョンアップする • 「数年前の情報」は記法や API が異なり参考にならなくなる 使用するバージョンに適した情報を参照すること
45.
これまでの Angular のバージョン •
Angular1 : 正式名称「AngularJS」 • フレームワークとして別物・互換性がないので参考にならない • Angular2 : 構文がかなり異なり参考にならない • Angular3 : 存在しない • Angular4 : 仕様は最新版に通ずるが非推奨になった機能も • Angular5 : 設定ファイルやコマンドオプションに違い • Angular6 : つい最近までは主流だったので情報も多め • Angular7 : これからはこのバージョンの情報が増えてくる
46.
覚えることは多い • Node.js・npm・Git (多少は
Bash も) • TypeScript・ES2015 • 非同期処理 : Promise・RxJS • HTML5 (文書の「構造」を示すスキルが必要) • CSS (コンポーネント指向での設計) • SASS / SCSS (CSS の拡張言語) • CSS フレームワーク (Bootstrap・Material Design) 開発しながら覚えていく・知識を更新し続ける
47.
どこから手を付けるか (学習パス) • Angular
公式 • https://angular.jp/ • 日本語版のチュートリアルあり・Angular はまずココから • JavaScript Promise の本 • http://azu.github.io/promises-book/ • 非同期処理の実装で必要になる Promise の知識 • TypeScript 入門以前ガイド • https://mizchi.hatenablog.com/entry/2018/10/03/195854 • JS・TS 界隈の歴史・入門文献まとめ
48.
以上 ご清聴ありがとうございました
Descargar ahora