知識

  • React または Angular フレームワークを使用した SPA の開発経験
  • AEM の基本的なスキル - コンテンツフラグメントの作成とエディターの使用
  • 考えらえる SPA 統合の様々なレベルを理解するには、AEM におけるヘッドフルとヘッドレスのドキュメントを必ず確認してください。

ツール

  • プロジェクトの導入をテストするためのサンドボックスへのアクセス
  • ローカル開発モデリングとテスト用のデータインスタンス
  • 既存の外部 SPA(オプション、選択した統合モデルによる)
  • AEM プロジェクトアーキタイプ

SPA について?

単一ページアプリケーション(SPA)は、クライアントサイドでレンダリングされ、主に JavaScript 主導であり、Ajax 呼び出しに依存してデータを読み込み、ページを動的に更新する点で、従来のページとは異なります。ほぼすべてのコンテンツは、1 回のページ読み込みで 1 回取得され、ユーザーによるページとのやり取りに基づいて、必要に応じて追加のリソースが非同期に読み込まれます。

これにより、ページを更新する必要が減り、シームレスで高速な、ネイティブアプリのエクスペリエンスに近いものをユーザーに提供できます。

AEM SPA エディターを使用すると、フロントエンド開発者は AEM のサイトに統合できる SPA を作成でき、コンテンツ作成者は SPA コンテンツを他の AEM コンテンツと同様に簡単に編集できます。

SPA が注目される理由

より速く、流動的で、よりネイティブアプリケーションに近い SPA は、SPA の動作の性質上、web ページの訪問者だけでなく、マーケターや開発者にとっても魅力的なエクスペリエンスとなります。

SPA とその使用理由について詳しくは、その他のリソースの節を参照して、詳細なドキュメントへのリンクをクリックしてください。

AEM での SPA の処理方法

AEM で単一ページアプリケーションを開発する場合、フロントエンド開発者は SPA を作成する際に標準的なベストプラクティスを順守するものと想定します。フロントエンド開発者は、次の一般的なベストプラクティスと AEM 固有の原則に従うことで、SPA を AEM とそのコンテンツオーサリング機能で利用できるようになります。

  • 移動可能 - その他のあらゆるコンポーネントと同様に、SPA コンポーネントは可能な限り移動可能な状態で構築する必要があります。SPA は、移動可能で再利用可能なコンポーネントを使用して構築する必要があります。
  • AEM を主軸にしたサイト構築 - フロントエンド開発者はコンポーネントを作成し、内部構造を所有しますが、AEM に依存してサイトのコンテンツ構造を定義します。
  • 動的レンダリング - すべてのレンダリングは動的である必要があります。
  • 動的ルーティング - SPA がルーティングを担当し、AEM がリッスンしてそれに基づいて取得します。どのルーティングも動的である必要があります。

AEM での SPA の処理方法について詳しくは、その他のリソースの節を参照して、詳細なドキュメントへのリンクをクリックしてください。