しがないSE 成長日記

とあるエンジニアによる記録・記憶のための情報記録用ブログです

【Angular】Tutorialから見えたAngularの概要をTutorialの振り返りから見る

あまりに更新せず、90日以上放置時に表示される広告が出始めました。

2023は仕事に忙殺された年で、特に年後半はAngularを用いたフロントエンドアプリケーションに大変してやられておりました。

案件も一段落したため、ここでひとつ復習を、ということでAngularの理解促進を兼ねてAngularのTutorialを半日実施してみました。この記事はその記録として残しており、基本的には自分用です。あしからず。

 

初心者目線でこの感じで理解すればいいのね！という理解の手助けになればと思います。（この類の理解方法のマッチングは人によって違うので、合わないと思ったら是非、他の記事も参考にしてください）

angular.jp

目次

まとめてみると...

  • 基本的なツールはNode.js, Angular CLI, IDE
  • ng new, ng generate component/service/interface, serve あたりが利用頻度高
  • Componentで画面要素、Serviceで処理要素、Interfaceでデータ型(MVCのModel部)を作って、組み合わせていく感じ
    • Componentで分解・実装することでよりスリム・明瞭な実装になる
  • Routingはapp.routes.tsと各コンポーネントの双方で実装が必要
  • プロパティバインディングや頻出のライブラリ(formsやCommon Module)を覚えておけば、基本的なアプリは作れる

Introduction

  • 最低限の環境を整えるための章
  • Node.js, Angular, IDEをいれました（自分はVSCode)
  • サンプルのコードが置いてあって、StackBlitzという手軽にIDE+検証環境を用意するサイトもあって、ローカル環境を汚したくない人がいたらそれを使うのもいいかもしれません

Hello world

  • Angular CLIを利用し、`ng new`で生成されるアプリを動かすところまでをやりました
  • 基本的なプロジェクト構成についての説明がありました
    • src直下には、アプリケーショントップレベルの各種ファイル（html, css, ts, favicon.ico)がありました。アプリ全体に関わる内容がここで決まるが、デフォルトでも問題なくTutorialではあまり触りませんでした
    • src/app配下には、ベースとなるコンポーネントがあり、これがアプリケーションのトップレベルのコンポーネント（ルートコンポーネント）となる。今後作るコンポーネントはこのappコンポーネントの下にぶら下がる感じ
    • /assetsに画像とかの資源が配置され、各ファイルからはそのフォルダを参照する形となる
    • package.json, tsconfig,jsonは設定ファイル。Angularのみの話ではないためここでは割愛

Create home component

  • Angularコンポーネントの設定や作成方法を、ホームコンポーネントの作成を例に学んだ
  • Tutorialとの違いで、＠Component内のプロパティ: templateに直接記載するのではなくhtmlファイルとして外だしするようにした
    • この場合、templateUrlをtemplateの代わりに指定するようにした
    • ここの設定は--inline-template オプションをng generate componentコマンド発行時に指定することで埋め込みが可能だが、上述の通りにするためチュートリアルで提示されたコマンドからは外した
    • 個人的な感想としても、複数言語を単一ファイルに混ぜ込むのは強い違和感があるなぁ。。。

Create housing location

Create an interface

  • カスタムデータ型であるInterfaceの実装について理解
  • ng generate interfaceで作成可能
  • 内部では 項目と対応する型を定義し、各Component内で使用
  • ここで型定義をすることで、同様の型の重複定義を抑止できる

Add inputs to components

  • Componentの入力を定義することができた
  • この章ではあくまで@Input()デコレーターの使い方だけを理解した

Add property bionding to components

Add dynamic values to templates

  • テンプレートHTML内でcomponent.tsにある変数/プロパティとHTMLをバインディングする(プロパティバインディング)方法を学習
  • 日本語では"補間"という文字が使われていたが、正直違和感が強い。どちらかというとバインディング = 紐づけ のほうがしっくりくる印象
  • {{ }}で囲む or [<プロパティ名>]=<変数名> みたいな形で

Use *ngFor in templates

  • *ngForによるコンポーネントの繰り返し生成の方法を学ぶ
  • HTML内で宣言し、値部には変数定義を記載する形で完了した(let A of B)

Angular services

  • Serviceの実装方法を学習
  • 複数のコンポーネントで利用される関数やデータを分ける方法とのこと
  • ng generate serviceで生成可能
  • 共通化可能な処理・メソッドを外だしする

Add routing 

  • Routing機能について学習
  • デフォルトで用意されているapp.routes.tsにpathや対象コンポーネント, タイトルを含めた情報を記載するだけでルーティングを容易に設定できる優れものだった

Customize the details page

  • 詳細ページに具体化が主なタスク
  • routerLinkが肝となるコンテンツの模様だったが、ルーティングの制御方法という理解しか得られず

Integrate Angular forms

  • AngularにおけるFormの作成方法を学習
  • 既存で便利なフォーム作成ライブラリが用意されており、パズルのようにはめるだけで簡単に作成できた

Add search functionality

  • 検索機能を作成
  • submitボタン発火でフィルタリングする機能を実装

Add HTTP communication

  • json-serverを利用したモックサーバーへのリクエストと、AngularにおけるHTTPの簡単なリクエスト実装方法について学習
  • 簡易なリクエスト手順だったため、本番ではHttpClientを利用するようにとの記載もあった。個人利用目的ならいいかも