Angular のチュートリアル Tour of Heroes をやりました。
Angular は公式ドキュメントが豊富で、日本語のドキュメントも多く整備されています。
私にとって、フロントエンドフレームワークのチュートリアルといえば、よくわからないまま文法の一部を紹介されるイメージでした。
しかし、Tour of Heroes という名前の気楽さとは裏腹に、Angular アプリを一から作る方法をしっかりと学ぶことができました。
具体的には、Angular CLI を使ったプロジェクトの生成から始まり、コンポーネントの追加、データバインディング、サービスの作成、ルーティング、HTTP 通信などの基本的な事項を学びました。4時間ほどで修了しました。
これから Angular を使いたいという方には、まず初めに取り組んでもらえたらと思います。
Tour of Heroes の構成
Tour of Heroes はプロジェクトの作成を除き、6つの章から構成されます。
1. ヒーローエディタ
1章ではまず、ヒーローを表示するコンポーネントを作成します。
主に以下のことを学びます。
2. リストの表示
2章では、ヒーローの一覧をリスト表示し、選択したヒーローの詳細を表示するようにコンポーネントを修正します。
主に以下のことを学びます。
3. フィーチャーコンポーネントの作成
3章では、新たなコンポーネントを作成し、コンポーネント間のデータ送信と役割分担について学びます。
主に以下のことを学びます。
4. サービスの追加
4章では、サーバー通信などを用いてデータの取得や保存を行なうサービスを作成し、これを利用したデータの取得を行います。
主に以下のことを学びます。
- サービスについて
- サービスの作成方法
- @Injectable による依存性注入
- サービスを用いたデータの取得
- Observable の作り方
- Observable の subscribe
5. アプリ内ナビゲーションの追加
5章では、ルーティングを用いたアプリケーション内のページの移動について学びます。
主に以下のことを学びます。
- AppRoutingModule
- RouterModule.forRoot()
- routerLink を用いたナビゲーションのリンクの追加
- RouterOutlet を用いたテンプレートのページ遷移への反映
- ルーティングを用いた、ヒーロー一覧ページから詳細ページへの遷移
- ブラウザの戻る処理の実装
6. サーバーからデータの取得
6章では、HttpClientModule を用いて実際に Http 通信を行います。4章で作成したサービスは仮のデータを持っていましたが、6章ではサーバーにデータがあると仮定した上で、サーバーと通信しデータの取得と保存を行います。
主に以下のことを学びます。
- HttpClientModule の使い方
- 仮のデータサーバーの作成方法
- GET メソッドの送信
- POST メソッドの送信
- Http リクエスト時のオプションの設定
- Observable のエラーハンドリング
- tap オペレータ
- PUT メソッドの送信
- DELETE メソッドの送信
まとめ
以上の構成を持つ Tour of Hero に取り組むことによって、基本的な Angular アプリケーションを作れるようになりました。
需要があるかどうかはわかりませんが、Tour of Heroes のソースコードのリンクを貼っておきます。
その後の発展に関するドキュメントも「ガイド」として充実しており、勉強しやすいフレームワークだと感じています。
私自身 Angular は触り始めたばかりでよくわからない点が多いですが、一つ一つ勉強していきます！
