スタートガイド: Angular アプリケーションの最適化

Angular サイトをできるだけ高速でアクセスしやすいものにしたいですか?お問い合わせいただきありがとうございます。

Angular は、ユーザー インターフェースを構築するためのフレームワークです。メンテナンスが容易でスケーラブルなアプリケーションを迅速にセットアップするための構成要素が用意されています。Angular を使用すると、デベロッパーはウェブ、モバイル、デスクトップで動作するアプリケーションを作成できます。

このコレクションでは、Angular アプリケーションの最適化に関する 5 つの主要な領域に焦点を当てています。

  • アプリケーションのパフォーマンスを改善して、ユーザーのコンバージョンとエンゲージメントを高める
  • Angular Service Worker でアセットを事前キャッシュすることで、ネットワークが不安定な場合のアプリケーションの信頼性を向上させる
  • プリレンダリングとサーバーサイド レンダリングを使用して、検索エンジンとソーシャル メディアの bot がアプリケーションを検出できるようにする
  • アプリをインストール可能にして、iOS/Android アプリに似たユーザー エクスペリエンスを提供します。

このコレクションの各投稿では、独自のアプリケーションに直接適用できる手法について説明します。

このコレクションに含まれないもの

このコレクションは、Angular と TypeScript に精通していることを前提としています。まだ自信がない場合は、TypeScript のドキュメントangular.ioAngular スタートガイドをご覧ください。

プロジェクトを開始

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 を使用してウェブアプリ マニフェストを追加する