AEM プロジェクトアーキタイプを使用したフロントエンド開発 front-end

AEM プロジェクトのアーキタイプには、Webpack ベースの専用フロントエンドビルドメカニズム（オプション）が含まれています。このように、ui.frontend モジュールは、JavaScript や CSS ファイルを含む、プロジェクトのすべてのフロントエンドリソースの中心となります。この便利で柔軟な機能を最大限に活用するには、AEM プロジェクトにフロントエンド開発がどのように適合するかを理解することが重要です。

このドキュメントでは、フロントエンドビルドモジュールの一般的な使用パターンおよびユーザーに与える影響について説明します。ビルドオプションと技術的な手順について詳しくは、アーキタイプの GitHub リポジトリにあるドキュメントを参照してください。

AEM フロントエンドおよびバックエンド開発 front-end-back-end

簡単に言えば、AEM プロジェクトは、2 つの異なる関連部分から成ると考えることができます。

これらの 2 つの開発プロセスはプロジェクトの異なる部分に焦点を当てているので、バックエンドとフロントエンドの開発が並行して行われる可能性があります。

ただし、作成されるプロジェクトでは、バックエンドとフロントエンドの両方の開発作業の出力を使用する必要があります。

マークアップの決定 determining-markup

プロジェクトに実装するフロントエンド開発ワークフローに関しては、まずバックエンド開発者とフロントエンド開発者がマークアップに同意する必要があります。通常、AEM はマークアップを定義し、これがコアコンポーネントで提供されます。ただし、必要に応じてカスタマイズできます。

可能なフロントエンド開発ワークフロー possible-workflows

フロントエンドビルドモジュールは、便利で柔軟なツールですが、どのように使用されるすべきかについてはユーザーに任されています。以下の 2 つは​ 可能な ​使用例ですが、個々のプロジェクトでは他の使用モデルが必要になる場合があります。

Webpack 静的開発サーバーの使用 using-webpack

Webpack を使用すると、ui.frontend モジュール内の AEM Web ページの静的出力に基づいてスタイルを設定し、開発することができます。

このフローでは、AEM 開発者が手順 1 と 2 を実行して、静的 HTML をフロントエンド開発者に渡し、フロントエンド開発者が AEM HTML 出力に基づいて開発をおこなうことができます。

Storybook の使用 using-storybook

Storybookを使用すると、よりアトミックなフロントエンド開発を実行できます。Storybook は AEM プロジェクトのアーキタイプには含まれていませんが、Storybook をインストールすると、ui.frontend モジュール内に Storybook アーティファクトを保存することができます。AEM 内でテストをおこなう準備が整ったら、npm run dev を実行して Storybook を clientlib としてデプロイできます。

ClientLibs の概要 clientlibs

フロントエンドモジュールは、AEM ClientLib を使用して利用可能になります。。NPM ビルドスクリプトを実行する場合、アプリケーションがビルドされ、aem-clientlib-generator パッケージがビルド出力結果を取得して、そのような ClientLib に変換します。

ClientLib は、次のファイルとディレクトリで構成されます。