![データバインディングの仕組み 1
? 登場人物 1 :
コンポーネント TS
? 1画面の「処理」を実装する
ファイル
? さきほどの ng generate
コマンドで自動生成
? メンバ変数 name は自分で実装したもの
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.scss']
})
export class ExampleComponent {
/** 名前データを保持する変数 */
public name = 'テスト';
}](https://image.slidesharecdn.com/angular-181120115857/85/Angular-21-320.jpg)
![データバインディングの仕組み 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
ココでファイルの
紐付け](https://image.slidesharecdn.com/angular-181120115857/85/Angular-23-320.jpg)
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 の略
- 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 上での自動テストも可
- 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
- 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) ? 独特な概念が多いので 初学者は要学習 ? 理解して使えばチーム開発がとってもやりやすくなる
- 40. TypeScript ありがたい ? JavaScript の型に関する難解な仕様から逃れられる ? クラス構文のおかげでオブジェクト指向で書きやすい ? TSLint と VSCode (IDE) の併用で コーディング中にエラーが分かる?自動修正してもらえる ※ 非同期処理など素の JavaScript でも出てくる概念は要学習 (ES2015 以降の仕様のキャッチアップは必要)
- 41. 明示的な規約?規則が多い ? 「誰が作っても同じような作り」にしやすい ? 平仄がとれるので保守性は高まる ? 他の有名な SPA フレームワークと比べて ファイル数?コーディング量は多くなりがち ? 初学者は覚えること?記述量が多くて大変かも ? 技術スタックやコーディングルールなどを 1 から考えて周知する手間は省ける ? 「先人の知恵」に従う方が結果的にはメリットが多い
- 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 界隈の歴史?入門文献まとめ