Angular サイトをできるだけ高速でアクセスしやすくしたいとお考えですか？これから、
Angular とは
Angular は、ユーザー インターフェースを構築するためのフレームワークです。Angular には、スケーラブルでメンテナンスが容易なアプリケーションを迅速にセットアップするための構成要素が用意されています。Angular を使用すると、デベロッパーはウェブ、モバイル、デスクトップで動作するアプリケーションを作成できます。
このコレクションの内容
このコレクションでは、Angular アプリケーションを最適化するための 5 つの主要な領域に焦点を当てています。
- アプリケーションのパフォーマンスを改善して、ユーザーのコンバージョンとエンゲージメントを向上させる
- Angular サービス ワーカーでアセットをプリキャッシュして、ネットワーク環境が悪い場合のアプリケーションの信頼性を向上させる
- プリレンダリングとサーバーサイド レンダリングを使用して、検索エンジンとソーシャル メディアの bot がアプリケーションを検出できるようにする
- アプリケーションをインストール可能にして、iOS / Android アプリと同様のユーザー エクスペリエンスを提供する
このコレクションの各投稿では、独自のアプリケーションに直接適用できる手法について説明します。
このコレクションに含まれないもの
このコレクションは、Angular と TypeScript に精通していることを前提としています。まだ自信がない場合は、TypeScript のドキュメントと、angular.io の 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 でウェブアプリ マニフェストを追加する