Aphinya Dechalertによる画像。タイトル:レッドモンスターラーニングアングル

効果的なAngular開発者になるために学ぶ必要がある19のこと

Angularでプロになる方法に関する包括的なガイド

Todoアプリは、フロントエンド開発用の「Hello world」アプリケーションに相当します。アプリを作成するCRUDの側面については説明しますが、多くの場合、フレームワークまたはライブラリが実行できることのほんの一部にすぎません。

Angularは常に変更および更新されているように見えますが、実際には、同じものがいくつかあります。 JavaScriptフレームワークを適切に活用するために、Angularについて学習する必要があるコアコンセプトの概要を以下に示します。

Angularに関しては多くのことを学ぶ必要があり、多くの人はどこに行くべきか、何を検索するべきかわからないという理由だけで初心者のサークルにとらわれています。これは包括的なガイド(およびAngular自体の簡単な要約)で、Angular 2+を初めて使用したときに望んでいました。

1.モジュラー角度アーキテクチャ

理論的には、Angularのすべてのコードを1ページにまとめて1つの巨大な機能にまとめることができますが、推奨されません。

Angularは、フレームワークのアーキテクチャの一部としてモジュールの概念を多用しています。これは、既存の単一の理由があるコードのコレクションを参照しています。 Angularアプリは基本的にモジュールで構成されています。一部はスタンドアロンで、一部は共有です。

アプリケーション内でモジュールを構成する方法は複数あり、さまざまなアーキテクチャ構造を掘り下げることで、アプリの成長に合わせてアプリをどのようにスケーリングするかを決定することもできます。また、コードを分離し、コードカップリングの発生を防ぐことができます。

Googleに何を:

  • 角度アーキテクチャパターン
  • スケーラブルな角度アプリケーションアーキテクチャ

トピックに関する私の見解:

  • AngularのModular Architectureとはどういう意味ですか?

2.一方向のデータフローと不変性

Angular 1に戻って、双方向バインディングは多くのフロントエンド開発者の心を捉えました。それは本質的にAngularの元々のセールスポイントの1つでした。ただし、時間が経つにつれて、アプリケーションがより複雑になり始めると、パフォーマンスの点で問題が発生し始めました。

実際には、どこでも双方向バインディングが必要ないことがわかります。

Angular 2+では双方向バインディングが引き続き可能ですが、開発者から明示的に要求された場合にのみ、コードの背後にいる人にデータの方向とフローについて考えるよう強制します。また、データの流れ方を決定することで、アプリケーションがデータをより柔軟に使用できるようになります。

Googleに何を:

  • 角度データフローのベストプラクティス、
  • Angularの単方向フロー、
  • 一方向バインディングの利点

トピックに関する私の見解:

  • Angularでの単方向データフローの物語

3.属性および構造ディレクティブ

ディレクティブは、カスタム要素を介したHTMLの拡張です。属性ディレクティブを使用すると、要素のプロパティを変更できます。構造ディレクティブは、DOMに要素を追加または削除してレイアウトを変更します。

たとえば、ngSwitchとngIfはパラメーターを評価し、DOMの一部が存在するかどうかを判断するため、構造的なディレクティブです。

属性ディレクティブは、要素、コンポーネント、またはその他のディレクティブに付加されたカスタム動作です。

これらの2つのディレクティブの使用方法を学習すると、アプリの機能を拡張し、プロジェクト内の重複コードの量を減らすことができます。属性ディレクティブは、アプリのさまざまな部分で使用される特定の動作を集中化するのにも役立ちます。

Googleに何を:

  • 角度属性ディレクティブ、
  • 角度構造ディレクティブ
  • 角度構造指示パターン

4.コンポーネントのライフサイクルフック

すべてのソフトウェアには独自のライフサイクルがあり、ライフサイクルによって何かの作成、レンダリング、および削除の方法が決まります。 Angularには、次のようなコンポーネントライフサイクルがあります。

作成→レンダリング→子をレンダリング→データバインドプロパティが変更されたときにチェック→破棄→DOMから削除

このサイクル内の重要な瞬間にフックして、時間またはイベントの特定の瞬間をターゲットにすることができます。これにより、適切な応答を作成し、コンポーネントの存在のさまざまなフェーズに従って動作を構成できます。

たとえば、ページがレンダリングされる前にデータをロードする必要がある場合があります。これはngOnInit()を使用して実行できます。または、おそらくデータベースから切断する必要があります。これは、ngOnDestroy()を使用して実行できます。

Googleに何を:

  • 角度のあるライフサイクルフック
  • コンポーネントのライフサイクル

5. HttpおよびObservableサービス

これは実際にはAngular固有の機能ではなく、ES7の機能です。 Angularは、たまたまフレームワークのサポート機能の一部としてそれを実装しましたが、これはReact、Vue、およびJavaScript関連のライブラリまたはフレームワークにも変換されることを理解しています。

監視可能なサービスは、データを効果的に処理できるようにするパターンであり、イベントベースのシステムでデータを解析、変更、および維持できます。すべてがデータであるため、HttpとObservablesを実際にエスケープすることはできません。

Googleに何を:

  • JavaScriptの観測可能なパターン
  • Angular HTTPとObservable
  • ES7の観測可能な機能

6.スマート/ダムコンポーネントアーキテクチャ

Angularアプリを作成するとき、すべてをコンポーネントに入れる傾向があります。ただし、それはまさにベストプラクティスではありません。 Angularのスマート/ダムコンポーネントの考え方は、特に初心者のサークルでは、さらに詳しく説明する必要があるものです。

コンポーネントがスマートかダムかによって、アプリケーションの大規模なスキームでの役割が決まります。ダムコンポーネントは、多くの場合、予測と理解が容易な動作でステートレスです。可能な限りコンポーネントをダムにします。

スマートコンポーネントは、入力と出力が関係するため、把握が困難です。 Angularの機能を適切に活用するには、スマート/ダムコンポーネントアーキテクチャを検討してください。それは、あなたのコードにアプローチする方法と相互の関係についてのパターンと考え方を提供します。

Googleに何を:

  • スマート/ダムAngularコンポーネント
  • ステートレスダムコンポーネント
  • プレゼンテーションコンポーネント
  • Angularのスマートコンポーネント

7.アプリケーション構造とベストプラクティス

CLIは、構造とベストプラクティスに関しては、これまでのところあなたを連れて行くことができます。 Angularアプリ(または一般的なアプリケーション)を構築することは、家を建てるようなものです。コミュニティによって長年にわたって最適化された一連のプロセスがあり、その結果、最も効果的かつ効率的なアプリケーションが実現します。

角度も例外ではありません。

それを学ぼうとする人々によるAngularに対するほとんどの不満は、しばしば構造的知識の不足によるものです。構文は簡単に理解でき、明確で明確です。ただし、アプリケーションの構造知識には、コンテキスト、要件、および概念レベルと実用レベルでのすべての適合性を理解する必要があります。 Angularのさまざまな潜在的なアプリケーション構造とそれらのベストプラクティスを学習することで、アプリケーションを構築する方法を理解できます。

Googleに何を:

  • 単一リポジトリのAngularアプリ
  • 角度ライブラリ、角度パッケージ
  • 角バンドル
  • 角度マイクロアプリ
  • モノレポ

8.テンプレートバインディング構文

バインディングは、JavaScriptフレームワークのアイシングです。また、そもそも存在する理由の1つでもあります。テンプレートバインディングは、静的なHTMLとJavaScriptの間のスペースを埋めます。 Angularのテンプレートバインディング構文は、これらの2つのテクノロジー間のファシリテーターとして機能します。

それらをいつどのように使用するかを学習すると、一度静的なページをインタラクティブなものに変えることがはるかに簡単になり、煩わしさがなくなります。プロパティバインディング、イベント、補間、双方向バインディングなど、バインディングのさまざまなシナリオを調べます。

Googleに何を:

  • 角度プロパティバインディング
  • 角度イベントバインディング
  • 角度双方向バインディング、角度補間
  • 角度通過定数

9.機能モジュールとルーティング

角度に関しては、機能モジュールは過小評価されています。実際には、ビジネス要件のセットを整理してリングフェンスするのに本当に素晴らしい方法です。責任を制限し、長期的にはコード汚染を防ぐのに役立ちます。

5つのタイプの機能モジュール(ドメイン、ルーティング、ルーティング、サービス、およびウィジェット)があり、それぞれが特定のタイプの機能を処理します。機能モジュールをルーティングと組み合わせて使用​​することを学習することで、個別の機能セットを作成し、アプリケーションの懸念を明確かつ明確に分離することができます。

Googleに何を:

  • 角度機能モジュール
  • Angularの共有フィーチャ構造
  • 機能モジュールプロバイダー
  • ルーティングおよび機能モジュールを使用した遅延読み込み

10.フォームと検証(リアクティブフォームと検証ツール)

フォームは、フロントエンド開発の避けられない部分です。

そして、フォームには検証が付属しています。

Angularに関しては、スマートでデータ駆動型のフォームを構築するさまざまな方法があります。フォームの最も一般的な反復は、リアクティブフォームです。ただし、そこには他のオプション、つまりテンプレート駆動のバリデーターとカスタムのバリデーターがあります。

バリデーターがCSSと連携してどのように機能するかを学ぶことは、ワークフローを高速化し、アプリケーションをエラー処理の準備が整ったスペースに変えるのに役立ちます。

Googleに何を:

  • 角形の検証
  • テンプレート駆動検証
  • リアクティブフォームの検証
  • Angularの同期および非同期バリデーター
  • 組み込みのバリデーター
  • 角度カスタムバリデーター
  • クロスフィールド検証

11.コンテンツの投影

Angularには、コンテンツ投影と呼ばれるものがあります。これは、親コンポーネントから子コンポーネントにデータを効率的に渡す機能です。これは複雑に聞こえるかもしれませんが、実際にはビュー内にビューを配置してマスタービューを生成する行為です。

子ビューを親ビュー内にネストすると、サーフェスレベルでのコンテンツの投影がよく理解されます。ただし、理解を深めるには、異なるビュー間でデータがどのように渡されるかを理解する必要もあります。これは、コンテンツの投影を理解するのに役立ちます。

コンテンツのプロジェクションを理解すると、アプリケーションのデータのフローとその可変性が発生する場所を判断するのに役立ちます。

Googleに何を:

  • 角度コンテンツ投影
  • 角度の親子ビューの関係
  • 角度表示データの関係

12. onPush変更検出

デフォルトでは、Angularはデフォルトの変更検出戦略を使用します。これは、コンポーネントが常にチェックされることを意味します。デフォルトを使用しても何も問題はありませんが、変更を検出するには非効率的な方法です。

小規模なアプリケーションの場合、速度とパフォーマンスは問題ありません。ただし、アプリケーションが特定のサイズに達すると、特に古いブラウザーでは実行が非常に面倒になる場合があります。

onPush変更検出戦略は、何かが発生したかどうかを常にチェックするのではなく、発生する特定のトリガーに依存するため、アプリケーションを大幅に高速化します。

Googleに何を:

  • 角度のonPush変更検出

13.ルートガード、プリロード、レイジーロード

何らかのログインがある場合は、ルートガードが必要になります。特定のビューを不正なビューから保護できるという考え方は、多くのアプリケーションで必須の要件です。ルートガードは、ルーターと要求されたルートの間のインターフェイスとして機能します。特定のルートにアクセスを許可するかどうかを決定するのは、意思決定者です。探索すべきルートガードの世界にはたくさんあります。つまり、トークンの有効期限、ユーザーロール認証、ルートセキュリティなどに基づいたルーティングの決定です。

プリロードと遅延ロードは、アプリケーションのロード時間を短縮することにより、ユーザーエクスペリエンスを向上させることもできます。また、プリロードと遅延ロードは、特定の画像セットをロードするかどうかを決定するだけではありません。また、バンドルされたアーキテクチャを強化し、異なるスコープとドメインに存在する可能性のあるアプリケーションのさまざまな部分をロードすることもできます。

Googleに何を:

  • 角度ルートガード、
  • 角度認証パターン
  • 角度プリロードおよび遅延読み込みモジュール
  • 角度付きの安全なルートパターン

14.カスタムパイプ

Angularパイプを使用すると、データのフォーマットがこれまでになく簡単になります。事前設定されたすぐに使えるパイプの多くは、日付、通貨、割合、文字の大文字小文字などの多くをカバーしていますが、必要なものはすべてカバーしていません。

そこでカスタムパイプが役立ちます。独自のフィルターを簡単に作成し、データ形式を好みに変換できます。簡単に作れるので、ぜひチェックしてみてください。

Googleに何を:

  • 角度付きカスタムパイプ

15. @viewChildおよび@ContentChildデコレータ

viewChildとcontentChildは、コンポーネントが相互に通信できる方法です。 Angularのポイントは、ジグソーパズルのように一緒にコンパイルされた複数のコンポーネントを持っていることですが、ピースが互いに分離されている場合、そのパズルは実際にはあまり効果がありません。

そこで、viewChildとcontentChildが登場します。これら2つのデコレータの使用方法を学習すると、関連するコンポーネントにアクセスできるようになります。これにより、データ共有のタスクが簡単になり、関連コンポーネントによってトリガーされたデータとイベントを転送できます。

Googleに何を:

  • 角度デコレータ
  • Angularのviewchildとcontentchild
  • 角度コンポーネントのデータ共有

16.動的コンポーネントとng-template

コンポーネントはAngularの構成要素です。ただし、すべてのコンポーネントが固定されているわけではなく、事前にプリコンパイルするのではなく、オンザフライで作成する必要があります。

動的コンポーネントにより、アプリは特定のコンポーネントをその場で作成できます。静的コンポーネントは、物事が変わらないことを前提としています。予想される入力と出力で予測可能です。

ただし、動的コンポーネントは必要に応じてレンダリングされます。外部ソースとその更新をリッスンしている可能性のあるアプリを作成するとき、またはページで発生したアクションへの反応である可能性があります。

Googleに何を:

  • Angularの動的コンポーネント
  • 動的コンポーネントとngテンプレート

17. @Host @HostbindingおよびexportAs

@ Host、@ Hostbinding、exportAsは、接続されているパラメーターを拡張するAngularディレクティブデコレーターです。また、簡潔なテンプレートを作成して、アプリケーション内で使用するためにエクスポートすることもできます。

上記がわかりにくい場合は、Angularディレクティブとその存在目的を調べることから始めてください。 @ Host、@ Hostbinding、exportAsは、それをそのままにするのに役立つディレクティブの機能です。

Googleに何を:

  • 角度指令パターン、
  • Angularの@ Host、@ Hostbinding、exportAs

18. RxJを使用した状態管理

アプリケーションの状態によって、最終的にユーザーに表示されるデータが決まります。状態がスパゲッティの混乱である場合、データ構造全体が不安定になり、変更に対して崩れる可能性があります。

Angularで状態がどのように機能するかを理解し始めると、データがそのように動作する方法と理由を理解できます。

Angularには独自の状態管理システムがありますが、RxJsは状態とその関連データを集中化するための素晴らしい方法です。親子関係のチェーンでデータが失われる可能性があります。 RxJsは、中央ストアを作成することでこれを分離します。

Googleに何を:

  • 角度RxJ
  • フラックス/リデュースの原理
  • 角度状態管理の原則

19.依存性注入とゾーン

依存性注入は一般に大規模な概念であるため、アイデアにあまり精通していない場合、これは本当に調べる必要があるものの1つです。 Angular内に依存性注入をきれいに作成する方法は複数ありますが、ほとんどはコンストラクターによって実現されます。これは、必要なものだけをインポートする方法であり、すべてを太陽の下でロードするのではなく、アプリケーションの効率を向上させます。

依存性注入と同様に、ゾーンもAngular専用のアイデアではありません。これは、アプリケーションが非同期タスクを最初から最後まで検出する方法です。これらの非同期タスクには、アプリケーションの内部状態、したがってビューを変更する力があるため、これは重要です。ゾーンは、変更検出プロセスを容易にします。

Googleに何を:

  • 角度ゾーン
  • 依存性注入
  • 角度DI

最後の言葉

角度は大規模なトピックです。 Angularアプリの構築は学習プロセスに役立つかもしれませんが、わからないことがあるだけです。開始時に未知を知ることは困難であり、願わくば、この短いガイドが、通常のAngularチュートリアルを超えたいくつかの啓発と、Angular全般のより包括的で包括的な見方を提供してくれることを願っています。

接続を維持して、すばらしいWebダイジェストニュースレターリストに参加しましょう。読んでくれてありがとう。❤

アフィニア