The Web Developer Bootcamp 2023 セクション34/61

この章では、Node.js用のWebフレームワークであるExpressのコースについて説明しています。ここでは、特にEmbedded JavaScript（EJS）を使用したテンプレート作成に焦点を当てます。Expressアプリからテンプレートへの情報の渡し方、静的アセットの提供、パーシャルの作成について学習します。EJSの最も難しい点は、テンプレート言語においてJavaScriptとHTMLを組み合わせることであると講師は述べています。

講師は、Expressアプリがテンプレート・エンジンとしてEJSを使用するための設定方法として、npm経由でEJSパッケージをインストールし、app.setメソッドを使用してビュー・エンジンを設定し、テンプレートを格納するためのviewsディレクトリを作成することを説明しています。また、response.render メソッドを使用して、Express でテンプレートをレンダリングする方法についても説明します。また、Express に組み込まれた path モジュールを使用して、index.js ファイルの場所に基づいてビューディレクトリを変更し、デフォルトのビューディレクトリを処理する方法についても説明します。

EJS テンプレートに <%= タグを使用して JavaScript 値を埋め込む方法など、EJS 構文の基本について説明します。メインコードからテンプレートにキーと値のペアを渡す方法と、テンプレート内の値にアクセスする方法を実演します。また、Express.js を使用して JSON ファイルを使用して Web サイトにデータを表示する方法、および express.static ミドルウェアを使用して CSS や JavaScript などの静的ファイルを提供する方法も紹介します。

プロジェクトに Bootstrap を組み込み、subreddit ページにナビバーを追加する方法を紹介します。その後、テンプレートベースのシステムにおけるパーシャル（includeとしても知られる）の概念について説明します。パーシャルは、複数のテンプレートでコードやマークアップを再利用することを可能にし、重複を減らし、共有要素の更新を容易にします。講演者は、ヘッド、フッター、ナビバーのパーシャルを作成し、異なるテンプレートにインクルードする方法を紹介します。

最後に、Web 開発におけるテンプレートの重要性と、Express で EJS を使用することの利点を強調します。EJS を使用するための Express アプリのセットアップを案内し、EJS 構文の基本をカバーし、パーシャルを使用して重複を減らし、Web アプリケーションの共有要素の更新を容易にする方法を紹介します。

次のページへ

前のページへ

「超勇敢なウサギ」へ