エンジニア達の「完全に理解した」Talk #52
1.7K Views
April 30, 24
スライド概要
https://easy2.connpass.com/event/312501/
フリーランスプログラマです。 Angular, CHIRIMEN Open Hardware, MDN Web Doc 推しの人です。
関連スライド
各ページのテキスト
Angular を 完全に理解した エンジニア達の「完全に理解した」Talk #42
自己紹介 akihiko.KIgure a.k.a グレさん 恵比寿とグンマー帝国の２拠点でフロントエンド開発をしています。
個人的推しOSS ※アルファベット順 Angular CHIRIMEN Open Hardware MDN Web Docs
今日お話する事 ● Angular の簡単な歴史 ● Angular でよく言われる事 ● Angular の推しポイント ● Angular の簡単ハンズオン？
質問 SPA のフレームワークといえば？ ※Single Page Application
そうだね！ Angular だね！（パッション屋良風
● Angular の簡単な歴史 2012年6月 〜AngularJS v1.8.x 開発言語：JavaScript 2016年9月 Angular v2.x 〜 開発言語：TypeScript
本家 Angular のロゴの変遷 〜AngularJS v1.8.x Angular v2.x〜Angular v16.x Angular v17.x〜
Angular Japan コミュニティのロゴの変遷 〜AngularJS v1.8.x Angular v2.x〜Angular v16.x Angular v17.x〜
余談 NgRx のロゴの変遷
●Angular でよく言われる事 Q：学習コストが高くないですか？
●Angular でよく言われる事 A：学習コストは高いです（真顔
だが、ちょっと待って！！！ What is 学習コスト
ng-japan 代表の laco さんが言及 Angularの学習コストは本当に高いのか？
要約すると 学習コストを資産と費用に分類し、将来の利益に つながるかどうかを考える必要性を指摘されています。 そして、Angularの学習コストを入門から中級まで段階的に 検討し、HTML/CSS や TypeScript などの技術は 資産となり、Component や Routing などの Angular 固有の要素は費用となると解説してます。 結論として、Angularの学習コストは高いと述べますが それに見合うリターンがあるとの見解を示されています。
個人的見解 Java, C#, C++ などのオブジェクト指向の言語を経験している人が TypeScript を始めるのはキャッチアップが早い？様に思います。 バックエンド育ちの人は、キャッチアップが早い？様に思います。 テスト（ユニット・E2E）を書いた事が無い人は キャッチアップが辛い（経験談 Angular Way に従っていれば、物凄く納得且つ効率的な 開発が実感出来る（ハズ
What is Angular Way
Angular Way とは Angular フレームワークを使ってアプリケーションを構築する際の 一般的なアプローチや原則のことを指します。 Angular Way は、Angular の特性や機能を最大限に活用し、効率的で メンテナンス性の高いコードを書くためのベストプラクティスやパターンの集合です。 1. コンポーネント志向 2. 単一責任の原則 3. データの双方向バインディング 4. 依存性注入(Dependency Injection) 5. ルーティングとナビゲーション 6. RxJS と Observables の活用 7. Angular CLI
●Angular の推しポイント：コンポーネント志向 Angular では、画面そのものや再利用可能な画面の部品の単位を コンポーネント(component)と呼びます。 ※TypeScript, HTML, CSS等で構成される ※CSS等：SASS,SCSS も利用可能 Angular CLI コマンド(ng コマンド)で、画面(・画面用部品)の 生成されるファイルは下記の通りです。 ・app.component.html ・app.component.css ・app.component.spec.ts ・app.component.ts
ファイル別解説 ◆ app.component.html ・app.component.html は、画面や画面の部品を表示するファイルになります。 ・html で、書かれた xxxx コンポーネントのテンプレートです。 ・コンポーネント用の html をテンプレートと表現します。 CSS Scss Sass Karma Jasmine Jest ◆ app.component.css ・app.component.css は、画面や画面の部品を装飾（スタイル）するファイルになります。 ・xxxx コンポーネント専用の CSS です。 ・Angular では、以下のスタイルが使用可能です。 ・CSS , Sass (SCSS) , Sass (Indented) , Less ◆ app.component.spec.ts ・app.component.spec.ts は、画面や画面の部品を（ユニット）テストするファイルになります。 ・デフォルトで作成されるテストは、下記ライブラリで実行されます。 ・Karma：テストを実行するプログラム（テストランナー）の事です。 ・Jasmine：JavaScript 用のテスティングフレームワークです。 ・Angular は、テストのファイルの拡張子に通常、spec.ts を付けます。 ・最近のプロダクトでは、JavaScript 用のテスティングフレームワークに jest を使うことがトレンドになっています。 ◆ app.component.ts ・app.component.ts は、画面や画面の部品を制御するファイルになります。 ・TypeScript で書かれたプログラムを実装します。 ・app.component.spec.ts になります。 Less
●Angular の推しポイント：単一責任の原則 Angularにおける単一責任の原則（Single Responsibility Principle）は 以下のようになります。 単一責任の原則は、1つのクラスやコンポーネントが1つの責任だけを持つべ きだという考え方です。 この原則を守ることで、コードがより理解しやすくなり、 変更や保守が容易になります。また、再利用性も高まります。 テストも同様に単一責任で、テストを実装できます。 UI のが変更あった場合、対象のコンポーネントの テストを修正すれば、OK になります。
詳しくは…… Angularコーディングスタイルガイドを参照
●Angular の推しポイント：データの双方向バインディング Angularにおける双方向バインディング（Two Way Binding）は 以下のようになります。 Angularの双方向バインディング構文は、[()]の構文を組みわせています。 ・プロパティバインディングの[] ・イベントバインディングの() 例 <app-sizer [(size)]="fontSizePx"></app-sizer> fontSizePx は、下記のことが可能です。 コンポーネント（ app-sizer ）へ値をセット[]します。 コンポーネント（ app-sizer ）から値・イベントを取得()出来ます。
●Angular の推しポイント：依存性注入(DI) Angularにおける依存性注入(DI)は以下のようになります。 DI：Dependency Injection 例えで「オムライス」を調理するとします。 オムライスを作るには、下記の材料が必要です。 材料を、すべて自分で用意しようとすると大変です。 そこで、便利な仕組みが必要になります。 ● まるで料理のような、便利な仕組み ・アプリ開発 = 料理（オムライス） ・必要な部品 = 材料（卵、玉ねぎ、ケチャップ、ごはん） ・依存性の注入 = 材料の下ごしらえ（溶く、切る、炊飯、調理）
●Angular の推しポイント：依存性注入(DI) Angularにおける依存性注入(DI)は以下のようになります。 DI：Dependency Injection ● メリット ・コードスッキリ & 読みやすい ・テスト簡単 ・部品使い回しで効率アップ ・変更もラクラク ● 2つの方法で利用 ・コンストラクターインジェクション: 材料を自動で用意 ・プロバイダ: 材料を事前に登録して用意
余談 DI の本が出るらしい
●Angular の推しポイント：ルーティングとナビゲーション ◆ 冒険ゲームで例えるルーティングとナビゲーション 冒険ゲームを想像してみてください。 勇者である貴方は広大な世界を舞台に様々な場所を訪れ クエストをこなしていきます。 ・マップ ゲームの世界全体を表す地図がルーティングです。 ・道 マップ上の道を進むことで、別の場所へ移動するのがナビゲーションです。 ・目的地 特定の場所へたどり着くことが、ナビゲーションの目的です。
●Angular の推しポイント：ルーティングとナビゲーション ◆ Angular に置き換えると、以下のようになります。 ・マップ: アプリ全体を構成するコンポーネントの配置関係がルーティングです。 ・道 コンポーネント間を繋ぐパスがナビゲーションです。 ・目的地 特定のコンポーネントへ移動することが、ナビゲーションの目的です。
●Angular の推しポイント：ルーティングとナビゲーション ◆ ルーティングの種類 Angularには、主に以下の2種類のルーティングがあります。 ・Path-based routing URL に基づいてコンポーネントを表示します。 これが最も一般的な方法です。 ・Component-based routing コンポーネントをネストさせて階層構造を作り、 その構造に基づいてコンポーネントを表示します。
●Angular の推しポイント：ルーティングとナビゲーション ◆ Angularのルーティング機能には、次のような利点があります： 1. 完全な一体化（ルーティング機能は、Angularフレームワークの一部） 2. 型安全性 3. ネストされたルーティング（をサポート） 4. ライフサイクルフック 5. 強力なプリローディング 6. URLセグメントのサポート Angularのルーティング機能は、Angularの生産性、保守性 および柔軟性を高めるために設計されています。 特に大規模な企業アプリケーションのUIの開発に適しています。
●Angular の推しポイント：RxJS と Observables の活用 ◆ Angular では、非同期処理やイベントのハンドリングに Observables を使用します。 これにより、コードがより柔軟で反応性が高くなります。 Angular では、基本的に RxJS を直接利用します。 状態管理では、下記ライブラリを使います。 NgRx NGXS Akita
個人的見解 RxJS の理解が大変だった・・・・・。 あるあるミス：多重購読地獄 しかし、理解すると超便利！（経験談 実装が超簡素に出来る！ RxJS を理解しないで、状態管理に 手を出すと地獄を見ます（経験談 JavaScript 大好きな人は、Obeservable を Promise にしがち（苦笑
●Angular の推しポイント：Angular CLI の活用 Angular Way に従うための効率的な方法として、 Angular CLI（Command Line Interface）が提供されています。 CLI を使用することで、プロジェクトのセットアップや コンポーネントの生成などが簡単に行えます。 ローカル起動、ユニットテスト、E2E テストのコマンドも 用意されています
Angular プロジェクト・コンポーネントの作成例
Angular プロジェクト構造例：angular-tetris
●ちょっと小話 昔 React のプロダクトを Angular にリプレイスを試みた方がいました。 結論から言うと、断念しました。 原因 Angular Way を理解しないで、 Angular プロジェクトのディレクトリ構造に 既存の React のプロダクトのディレクトリ構造を当てはめた結果 予期せぬトラブルに見舞われたそうです。 教訓 Angular Way を理解した上で、開発（守破離）をしましょう。
●参考資料 ◆ Angular Way を理解した上で、守破離 ・Angular初心者からのネクストステップ
●参考資料 ◆ ディレクトリ構造について ・中規模AngularアプリにおけるNgModule構成とディレクトリ構造 ・大規模Angular SPA開発に立ち向かうためにアプリとUIを切り分けた話 ・500日のトライエラーから生まれた大規模設計ノウハウ
●参考資料 ◆ リファクタリングとともに生きるラジオ
●最新機能について： Signals Angular の Signals は、Angular v17 で導入された新しい機能です。 1. signal 値と変更通知機能を持つ変数。 Angular が変更を自動追跡し、依存コンポーネントに通知。 2. computed 他の signals に基づいて値を計算。 常に最新状態を保持し、必要な計算のみ実行。 3. effect 副作用のある操作（非同期処理、API 呼び出し、DOM 操作等）を実行。 副作用をカプセル化し、コードを明確に。
●最新機能について： Signals Signals の利点 ・パフォーマンスの向上: 変更検出をより効率的に行うことで、アプリケーションの パフォーマンスを向上させます。 ・コードの簡潔化: 複雑なデータフローをより簡潔に記述できるようにします。 ・保守性の向上 コードをよりモジュール化し、テストしやすくします。 ・再利用性の向上 コードをより再利用しやすくします。
●最新機能について： Signals Signals について詳しく知りたい場合は、以下の資料を参照してください。 ・Angular Signals 公式ドキュメント ・Angular Signals 入門チュートリアル
●最新機能について： Signals Signals は、以下のプロジェクトから影響を受けて開発されました。 ReactiveX(RxJS) MobX SolidJS Signals は、これらのプロジェクトの優れた点を組み合わせ、 Angular に特化した反応型プログラミング機能を提供しています。
●最新機能について： Control Flow（組み込み制御フロー） Angular の Control Flow（組み込み制御フロー）は、 Angular v17 で導入された新機能です。 テンプレート内で条件分岐やループ処理をより直感的に記述できる機能です。 従来の ngIf や ngFor などの構造ディレクティブよりも簡潔で読みやすく、 コードの保守性も向上します。 組み込み制御フローは、@記号で始まるブロック構文を採用しています。 主な構文は以下の通りです。
●最新機能について： Control Flow（組み込み制御フロー） 主な構文は以下の通りです。 ・@ifブロック: 条件分岐 ・@forブロック: ループ処理 ・@switchブロック: 場合分け これらのブロック構文は、HTML内に直接記述することができます。 また、条件式やループ変数などの変数も、ブロック構文内で直接使用するこ とができます。
●最新機能について： Control Flow（組み込み制御フロー） 組み込み制御フローには、以下のような利点があります。 ・コードの簡潔化 従来の構造ディレクティブよりも簡潔で読みやすいコードを 書くことができます。 ・保守性の向上 コードが読みやすいため、保守性も向上します。 ・バンドルサイズの削減 構造ディレクティブよりも軽量なため、バンドルサイズを 削減することができます。
●最新機能について： Control Flow（組み込み制御フロー） ・テストの容易化 テストが容易になります。 ・Zoneless Angular の実現 Zone.js に依存することなく制御フローを実現できるため、 Zoneless Angular の実現に貢献します。 ・Zone.js は、Angular アプリケーションのパフォーマンスと 安定性を向上させるために使用される JavaScript ライブラリです。 非同期処理の管理や変更検出の管理を担うライブラリです。
●最新機能について： Control Flow（組み込み制御フロー） 組み込み制御フローの開発には、主に以下のものが影響を与えました。 ・React の JSX 構文 React の JSX 構文は、HTML に似た構文でコンポーネントの テンプレートを記述することができます。 組み込み制御フローの構文は、JSX の条件分岐やループ処理の構文を 参考にしています。
●最新機能について： Control Flow（組み込み制御フロー） 組み込み制御フローの開発には、主に以下のものが影響を与えました。 ・Vue.js のテンプレート構文 Vue.js のテンプレート構文は、HTML、CSS、JavaScriptを 組み合わせたテンプレート構文を使用しており、Declarative な方法で UIを記述することができます。 組み込み制御フローのテンプレート構文は、Vue.js の テンプレート構文を参考にしています。
●最新機能について： Control Flow（組み込み制御フロー） 組み込み制御フローの開発には、主に以下のものが影響を与えました。 ・Svelte のコンパイル処理 Svelte は、コンポーネントをコンパイルして、実行時に ネイティブな DOM に変換します。 このため、Svelte アプリケーションは非常にパフォーマンスが向上します。 組み込み制御フローのコンパイル処理は、Svelte のコンパイル処理を 参考にしています。
●最新機能について：まとめ このようにその昔、PHP、Ruby、Perl が各言語の長所を 自らの言語に取り入れたように（インターネット老人会的発言 例 Ruby on RailsのActive Record => PHPのLaravel Rubyの正規表現 => Perlの正規表現 Perl => PHPの正規表現エンジン 各 SPA（Single Page Application）フレームワークにも同様に 他の長所を参考し、取り入れる現象が起きています。 ※だから色々面白い
●Angular の簡単ハンズオン？ お品書き 1. プロジェクト作成 2. ローカル起動 3. テスト実行 4. E2Eテスト実行
●Angular の簡単ハンズオン？ 手順を見たい方 リポジトリをクローンしたい方
●Angular の簡単ハンズオン？ ハンズオン実演又は解説
Angular twitter Angular Discord Angular Youtube ng-japan twitter ng-japan Discord ng-japan Youtube
告 知 明日05/01(水) 20:00~21:00 放送 Angularの最新情報がわかる！Monthly Angular 4月号【OnAir #78】 connpass Youtube
まとめ Angular できるよ、にんげんだもの ぐれを
ご静聴ありがとうございました！