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

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 によるユーザー補助機能の監査