データを EJS テンプレートに渡す、またはその逆 — 初心者向けガイド

ねえ??‍♂️ ! EJS (Embedded JavaScript) を始めたばかりで、サーバー と EJS テンプレート の間でデータを渡す方法を疑問に思っている場合は、ここが正しい場所です。 ！今週ずっと EJS について学んでいました。EJS へのデータの受け渡しとデータの操作方法について学んだことを共有したいと思いました。

---

サーバーから EJS テンプレートにデータを渡す方法

つまり、サーバー (Node.js Express) から EJS テンプレートにデータを送信する場合は、非常に簡単です。 res.render() メソッドを使用するだけで、データをサーバーから .ejs ファイルに送信できます。

その方法は次のとおりです:

res.render("ejs_file_name", { data });

この例では、EJS ファイル (index.ejs としましょう) をレンダリングし、データ オブジェクトをテンプレートに渡します。

次に、EJS テンプレートでこのデータを使用するには、次のようにアクセスするだけです:

<%= data %>

簡単な内訳は次のとおりです:

• res.render() は、データをテンプレートに送信する役割を果たします。
• EJS の <%= data %> タグは、渡されたデータが表示される場所です。

データの名前 (この場合は data など) が両方の場所 (サーバー コードと EJS テンプレート内) で 同じ であることを確認してください。一致しない場合、事態はおかしくなります!

---

待って…データがない場合はどうなりますか? ?

ここが注意が必要な部分です。EJS は、データを使用する前にデータが存在するかどうかをチェックしません。データが常にそこにあるかのように使用されます。そのため、存在しない (または適切に渡されていない) データにアクセスしようとすると、EJS がエラーをスローしてアプリをクラッシュさせる可能性があります。始めたばかりのときは、とてもイライラするかもしれません!

でも心配しないでください。簡単な解決策があります。データを使用する前に、データが存在するかどうかを確認できます。次のように if 条件内にデータをラップできます:

<% if (locals.data) { %>
  <%= data %>
<% } else { %>
  
No data available!
<% } %>

こうすることで、何か問題が発生した場合やデータが渡されなかった場合でもアプリがクラッシュすることはありません。代わりに、フォールバック メッセージを表示するか、別のアクションを実行できます。

? プロのヒント: テンプレートを使用する前に、データがテンプレートに存在するかどうかを必ず確認してください。そうすることで、多くの悩みを軽減できます。

---

チャレンジタイム: EJS からサーバーにデータを渡す

この学習の旅を楽しくするために、ユーザーの名前を入力として受け取り、名前に含まれる文字数をユーザーに伝える単純なプロジェクトを構築することにしました。シンプルですよね？私がやった方法は次のとおりです:

1. 入力データの取得:
   ユーザーの姓名を取得する HTML フォームを使用しました。

2. サーバーにデータを送信:
   POSTを使用して、入力データをサーバーに送信し、フルネームの文字数を計算します。

3. 処理されたデータをテンプレートに送信します:
   ページに表示するために文字数を EJS テンプレートに戻しました。

これを処理するサーバー側のコードは次のとおりです。

app.post("/submit", (req, res) => {
  const charCnt = req.body["fName"].length + req.body["lName"].length;
  res.render("index.ejs", { charectercount: charCnt });
}); // I used body-parser to get the data from the form

• req.body は、ユーザー入力からフォーム データを取得します。
• 単に姓名に含まれる文字数を数えて、そのカウントを EJS ファイルに渡しました。
• EJS テンプレートには文字数が表示されます。

私の GitHub で完全なコードを自由にチェックしてください: プロジェクト コード

---

一言で言うと?

これは、データを EJS テンプレートに渡し、クライアントからデータを取得する方法を簡単にまとめたものです。 EJS は非常に柔軟で、HTML と JavaScript を簡単に組み合わせることができ、データの受け渡しを効果的に管理する方法を学ぶことで、プロジェクトに多くの可能性が広がります。

この投稿の重要なポイントは次のとおりです:

• res.render() を使用して、サーバーから EJS テンプレートにデータを渡します。
• クラッシュを避けるために、テンプレートでデータを使用する前に、必ずデータが存在するかどうかを確認してください。
• req.body (POST リクエストの場合) を使用すると、簡単にデータをサーバーに送り返して処理できます。

あなたが私と同じように学んでいるだけであれば、この投稿が物事をより明確にし、初期の落とし穴のいくつかを回避するのに役立つことを願っています。ご質問やコメントがございましたら、お気軽に下記に残してください。 ?

以上がデータを EJS テンプレートに渡す、またはその逆 — 初心者向けガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。