Angular の紹介

Angular を初めて使う人たち向けに作ったスライド。公開用にちょっと修正。

Transcript

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. 以上 ご清聴ありがとうございました