Angular サイトをできるだけ高速でアクセスしやすいものにするには、ここが一番いいところです！
Angular とは
Angular はユーザー インターフェースを構築するためのフレームワークです。メンテナンス可能でスケーラブルなアプリケーションを迅速にセットアップするための構成要素が提供されます。Angular を使用すると、デベロッパーはウェブ、モバイル、デスクトップで動作するアプリケーションを作成できます。
このコレクションの内容
このコレクションでは、Angular アプリケーションを最適化するための 5 つの主要領域に焦点を当てています。
- アプリケーションのパフォーマンスを改善して、ユーザーのコンバージョンとエンゲージメントを高める
- Angular Service Worker でアセットを事前キャッシュすることで、低品質のネットワーク上でのアプリケーションの信頼性を高める
- 事前レンダリングとサーバーサイド レンダリングを使用して、検索エンジンやソーシャル メディア bot から検出可能なアプリケーションを作成する
- アプリをインストール可能にして、iOS/Android アプリと同様のユーザー エクスペリエンスを提供できるようにする
- アプリケーションのユーザー補助機能を改善して、すべてのユーザーにとって使いやすく理解しやすいものにする
コレクションの各投稿では、独自のアプリケーションに直接適用できる手法について説明しています。
このコレクションに含まれていないものは何ですか？
このコレクションは、すでに Angular と TypeScript に精通していることを前提としています。まだよく理解できていない場合は、angular.io で TypeScript のドキュメントと Angular スタートガイドをご覧ください。
プロジェクトを開始する
Angular コマンドライン インターフェース（CLI）を使用すると、クライアント側のシンプルな Angular アプリケーションをすばやくセットアップできます。この投稿では CLI について簡単に紹介しています。また、サーバーサイド レンダリングやデプロイのサポートなど、より高度な機能を追加する方法を、コレクション内の他の投稿で紹介しています。
CLI を設定する
まず、CLI をグローバルにインストールし、次のコマンドを実行して最新バージョンであることを確認します。
npm i -g @angular/cli
ng --version
最後のコマンドでバージョン 8.0.3 以降が出力されることを確認します。
また、CLI をグローバルにインストールしない場合は、ローカルにインストールして npx コマンドで実行できます。
npm i @angular/cli
npx ng --version
プロジェクトを作成する
新しいプロジェクトを作成するには、次のコマンドを実行します。
ng new my-app
このコマンドにより、アプリケーションの初期ファイルとフォルダ構造が作成され、必要なノード モジュールがインストールされます。
設定プロセスが正常に完了したら、次のコマンドを実行してアプリケーションを開始します。
cd my-app
ng serve
これで http://localhost:4200 でアプリケーションにアクセスできるようになります。
次のステップ
このコレクションの残りの部分では、Angular アプリケーションのパフォーマンス、アクセシビリティ、SEO を改善する方法を学びます。内容は次のとおりです。
- Angular でのルートレベルのコード分割
- Angular CLI によるパフォーマンス バジェット
- Angular でのルート プリフェッチ戦略
- Angular での変更検出の最適化
- Angular CDK を使用して大規模なリストを仮想化する
- Angular Service Worker を使用した事前キャッシュ
- Angular CLI を使用した事前レンダリング ルート
- Angular Universal によるサーバーサイド レンダリング
- Angular CLI を使用してウェブアプリ マニフェストを追加する
- Codelyzer によるユーザー補助の監査