EJS とは何ですか? なぜ必要ですか? - TECHCODEVIEW.COM

Web 開発では、開発者が選択できるツールが多数あります。適切なツールとテクノロジーを選択すると、プロジェクトの効率と機能に大きな影響を与える可能性があります。 Web 開発で人気のあるツールの 1 つは EJS (Embedded の略) です。 JavaScript 。 EJS は、以下を生成する単純な JavaScript テンプレート言語です。 HTML プレーンな JavaScript を使用します。この記事では、EJS とは何か、EJS が必要な理由、その機能、インストール方法について説明し、出力例を示します。

EJSとは

EJS または Embedded JavaScript は、Web 開発に使用される JavaScript のテンプレートエンジンで、ユーザーは HTML テンプレート内の JavaScript コードを使用して動的な HTML マークアップを生成できます。これは、Web アプリケーションで動的コンテンツをレンダリングするプロセスを簡素化するように設計されています。これには HTML と JavaScript が混合して含まれており、アプリケーションからのデータに基づいて動的コンテンツを簡単に生成できます。

EJSの特徴

単純な構文: EJS は、HTML と JavaScript を組み合わせた単純な構文を提供するため、学習と使用が簡単になります。
動的コンテンツ: EJS を使用すると、HTML タグ内で HTML および JavaScript コンテンツを動的に生成できるようになり、コンテンツ作成の柔軟性が向上します。
レイアウトと部分: EJS はレイアウトとパーシャルをサポートしているため、ユーザーはテンプレートを再利用可能なコンポーネントに分割して、コードの重複を減らし、保守性を高めることができます。
エラー処理： EJS は、開発者のデバッグを支援するエラーメッセージを提供し、全体的な開発エクスペリエンスを向上させます。

なぜ EJS が必要なのでしょうか?

動的HTMLの生成: EJS を使用すると、変数、条件、ループ、およびその他の JavaScript ロジックに基づいて動的な HTML コンテンツを生成できます。これは、データベースまたは API から取得した動的データをレンダリングする場合に特に便利です。
コードの再利用性: EJS テンプレートを使用すると、複数のページに含めることができる再利用可能なコンポーネントまたは部分を作成できます。これにより、コードのモジュール化が促進され、Web アプリケーションの重複が削減されます。
サーバー側のレンダリング: EJS を使用すると、Web ページのサーバー側レンダリング (SSR) を実行できます。 SSR は、React や Angular などのフレームワークによって実行されるクライアント側レンダリング (CSR) と比較して、検索エンジンがコンテンツをより効率的にクロールしてインデックス付けできるため、SEO (検索エンジン最適化) にとって有益です。
Node.js および Express.js との簡単な統合: EJS は Node.js および Express.js とシームレスに統合されるため、サーバーサイド JavaScript アプリケーションに取り組む開発者にとって人気の選択肢となっています。 Express.js プロジェクト内でのセットアップと使用は簡単です。
よく知られた構文: HTML と JavaScript にすでに慣れている場合は、EJS を学習して使用するのは簡単です。構文は HTML に似ており、JavaScript コードが埋め込まれています。>タグを使用すると、さまざまなスキルレベルの開発者がアクセスできるようになります。
テンプレートの継承とレイアウト: EJS はテンプレートの継承とレイアウトをサポートしているため、Web ページに一貫したレイアウトを作成できます。基本レイアウトを定義して他のテンプレートに拡張できるため、アプリケーション全体で一貫したルックアンドフィールを維持しやすくなります。

EJSの使い方は？

ステップ1： EJS を依存関係としてプロジェクトにインストールする

 npm install ejs>

ステップ2： プロジェクトディレクトリに「views」フォルダーが存在しない場合は作成します。 views フォルダー内に、拡張子が .ejs の新しいファイル (たとえば、index.ejs) を作成します。

ステップ 3: Express.js アプリケーションで EJS を Express と統合するには、Express アプリ構成で EJS をビューエンジンとして設定します。この構成により、Express はビューのレンダリングに EJS を使用できるようになります。

app.set('view engine', 'ejs');>

ステップ 4: EJS テンプレートをレンダリングします。Express ルートハンドラーでは、次を使用して EJS テンプレートをレンダリングします。 「res.render()」 テンプレートに渡す必要なデータを提供します。

Javaは文字を文字列にキャストします

res.render('hello', { name: 'Geeks' });>

プロジェクトの構造:

プロジェクトディレクトリ

更新された依存関係 パッケージ.json ファイルは次のようになります:

'dependencies': {  'ejs': '^3.1.9',  'express': '^4.18.2'  }>

例： ejs の使用法を例とともに紹介する実装。

HTML

      EJS の例title> head> <body> <h1>こんにちは、<%= name %>!h1> 本文> html>>></pre> </code>JavaScript<code class='hljs'> <pre class='hljs'>// index.js  const express = require('express'); const app = express(); const port = 3000; app.set('view engine', 'ejs'); app.get('/', (req, res) =>{ res.render('hello', { 名前: 'Geeks' }); }); app.listen(port, () => { console.log(`サーバーは http://localhost:${port}` で実行されています); });>></pre> </code> <p dir='ltr'>  <b>  <strong>アプリケーションを実行する手順:</strong>  </b>  <span>プロジェクトのルート ディレクトリから次のコマンドを使用してアプリケーションを実行します。</span></p> <pre class='hljs'>node index.js></pre><p dir='ltr'>  <b>  <strong>出力：</strong>  </b>  <span>プロジェクトは URL http://localhost:3000/ に表示されます。</span></p> <p dir='ltr'> <img src='//techcodeview.com/img/ejs-templating-language/39/what-is-ejs-why-do-i-need-it-2.webp' alt="出力"></p>  <br>  <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
                         
                        </div><!--//content-->
                    </div><!--//section-inner-->                 
                </section><!--//section-->
    
            </div><!--//primary-->
            <div class="secondary col-md-4 col-sm-12 col-xs-12">
                  <aside class="info aside section">
                    <div class="section-inner">
                        <h2 class="">カテゴリ</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li> <a href="/bash-tutorial/">バッシュのチュートリアル</a> </li><li> <a href="/binary-search/">二分探索</a> </li><li> <a href="/c-conversion-programs/">C 変換プログラム</a> </li><li> <a href="/java-mail-tutorial/">Java メールのチュートリアル</a> </li><li> <a href="/hibernate-tutorial/">休止状態のチュートリアル</a> </li><li> <a href="/dot-net/">ドットネット</a> </li><li> <a href="/spotlight/">スポットライト</a> </li><li> <a href="/bash-script/">Bash スクリプト</a> </li><li> <a href="/blogs/">ブログ</a> </li><li> <a href="/microservices/">マイクロサービス</a> </li>
                                
                            </ul>
                        </div><!--//content-->  
                    </div><!--//section-inner-->                 
                </aside><!--//aside-->
                
                 <aside class="testimonials aside section">
                	 <div class="section-inner">
                        <div class="content">
                            <div class="item">
  								<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//brunetteerdeplete.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>                                                   
                            </div>
                        </div>
                    </div>
                   <div class="section-inner">
                        <h2 class="heading">Java のオーバーロード</h2>
                        <div class="content">
                            <div class="item">
                                 <blockquote class="quote">                                  
                                    <span> <i class="fa fa-quote-left"></i> Java のオーバーロード</span>
                                </blockquote>                
                                                                                             
                            </div><!--//item-->
                            
                            <p> <a class="more-link" href="/java-overloading/"> <i class="fa fa-external-link"></i> 続きを読みます</a> </p> 
                            
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
               
                            
                 <aside class="languages aside section">
                    <div class="section-inner">
                        <h2 class="heading">興味深い記事</h2>
                        <div class="content">
                            <ul class="list-unstyled">
                                <li class="item">
                                    <span class="title"> <strong> <a href="/dynamic-host-configuration-protocol">動的ホスト構成プロトコル (DHCP)</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/python-tuple/">Pythonタプル</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/python-check-if-list-is-empty">Python – リストが空かどうかを確認する</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/what-is-125-fraction">125% は分数で表すと何ですか?</a> </strong> </span>
                                    
                                </li><!--//item--><li class="item">
                                    <span class="title"> <strong> <a href="/range-lcm-queries">範囲 LCM クエリ</a> </strong> </span>
                                    
                                </li><!--//item-->
                               
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
                
              
                 <aside class="list music aside section">
                    <div class="section-inner">
                        <h2 class="heading">人気の投稿</h2>
                        <div class="content">
                            <ul class="list"> <li><a href="/convert-java-object-json">JavaオブジェクトをJSONに変換する</a>
</li><li><a href="/linux-which-command">Linux コマンド</a>
</li><li><a href="/sql-select-from-multiple-tables">SQL複数テーブル選択</a>
</li><li><a href="/ram-pothineni">ポシネニ・ラム</a>
</li><li><a href="/java-switch-statement">Javaのスイッチを入れる</a>
</li> 
                                
                                
                            </ul>
                        </div><!--//content-->
                    </div><!--//section-inner-->
                </aside><!--//section-->
              
            </div><!--//secondary-->    
        </div><!--//row-->
    </div><!--//masonry-->
    
	    <footer class="footer">
        <div class="container text-center">
                <span>
Copyright ©2025 全著作権所有 |  <a href="//ko.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">免責事項</a>  |  <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">私たちについて</a>  |  <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">プライバシーポリシー</a>  </span>
        </div>
    </footer>
 
         
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
    <script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>    
    

    <script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>     
	
	<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
	<script>
!function(){"use strict";let t=document.createElement("button");t.id="toTopBtn",t.innerHTML="↑";let e=`
        #toTopBtn {
            position: fixed;
            bottom: 25px;
            right: 25px;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            background-color: #213141;
            color: white;
            border: none;
            border-radius: 8px;
            width: 50px;
            height: 50px;
            font-size: 24px;
            cursor: pointer;
            transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
        }
        #toTopBtn:hover {
            background-color: #555;
        }
    `,i=document.createElement("style");i.type="text/css",i.innerText=e,document.head.appendChild(i),document.body.appendChild(t),window.addEventListener("scroll",()=>{let e=window.scrollY||document.documentElement.scrollTop;e>300?(t.style.opacity="1",t.style.visibility="visible"):(t.style.opacity="0",t.style.visibility="hidden")}),t.addEventListener("click",()=>{window.scrollTo({top:0,behavior:"smooth"})})}();
</script>
</body>
</html>