-
コンポーネントの作成: まず、再利用可能なコンポーネントを作成します。例えば、ヘッダーコンポーネントを作成する場合、
header.ejsというファイルを作成します。このファイルには、ヘッダーのHTMLマークアップとロジックが含まれます。 -
コンポーネントのインクルード: コンポーネントを使用したいEJSファイルで、
<%- include('header.ejs') %>というコードを使用して、ヘッダーコンポーネントをインクルードします。このコードは、指定したファイルのコンテンツをその位置に挿入します。 -
コンポーネントにデータを渡す: コンポーネントにデータを渡す必要がある場合は、インクルード時にオプションのデータオブジェクトを指定します。例えば、
<%- include('header.ejs', { title: 'My Website' }) %>というように、titleというプロパティを持つオブジェクトを渡すことができます。コンポーネント内でこのデータを使用するには、<%= title %>のようにして参照します。 -
コンポーネントの再利用: 作成したコンポーネントは、他のEJSファイルでも再利用することができます。必要な箇所でインクルードするだけです。
このようにして、EJSを使用してコンポーネントベースのアプローチを実現することができます。これにより、コードの再利用性と保守性が向上し、効率的なフロントエンド開発が可能となります。
以上が、EJSでコンポーネントを使用する方法の概要です。詳細な実装やさまざまなコード例については、EJSの公式ドキュメントを参照してください。