Nodejs Express EJSのインストール-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

Nodejs Express EJSのインストール

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 11, 2023 pm 06:35 PM

Node.js は、開発者が JavaScript 言語を使用して高性能のバックエンドアプリケーションを開発できるようにする、人気のある JavaScript ランタイム環境です。 Node.js には、シンプルで柔軟な Web アプリケーションフレームワークである Express.js が付属しており、開発者が美しく保守しやすい Web アプリケーションを作成するのに役立つ強力なテンプレートエンジン EJS も提供します。

この記事では、Node.js、Express.js、および EJS をインストールする方法と、それらを組み合わせて使用して単純な Web アプリケーションを作成する方法について説明します。

Node.js のインストール

始める前に、コンピューターに Node.js ランタイム環境がインストールされていることを確認してください。まだインストールしていない場合は、以下の手順に従ってインストールしてください。

[Node.js 公式 Web サイト](https://nodejs.org/) を開き、「ダウンロード」をクリックします。」ボタンをクリックし、ダウンロードするシステムバージョンに合った操作を選択してください。
ダウンロードが完了したら、インストールパッケージをダブルクリックしてインストールします。インストールウィザードの手順に従うだけです。
インストールが完了したら、ターミナル (またはコマンドラインウィンドウ) を開き、次のコマンドを入力して Node.js が正しくインストールされているかどうかを確認します:
```
node -v
```
If Node.js正常にインストールされると「Node.jsのバージョン情報を表示します」と表示されます。

Express.js のインストール

Node.js をインストールした後、npm コマンド (Node.js に付属のパッケージマネージャー) を使用して Express.js をインストールできます。。インストールするには、以下の手順に従ってください。

ターミナル (またはコマンドラインウィンドウ) を開き、次のコマンドを入力します。
```
npm init
```
このコマンドは、新しい Node.js プロジェクト。プロンプトに従って段階的に入力してください。
初期化が完了したら、次のコマンドを入力して Express.js をインストールします。
```
npm install express --save
```
このコマンドは、npm リポジトリから最新バージョンの Express.js をインストールします。それを依存関係としてプロジェクトに追加します。
インストールが成功したら、プロジェクトのルートディレクトリに app.js という名前の新しいファイルを作成します。これは、Express.js アプリケーションへの主要なエントリポイントです。
app.js ファイルに次のコードを入力して、単純な Express.js アプリケーションを作成します。
```
const express = require('express');
const app = express();

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(3000, () => {
  console.log('Server listening on port 3000!');
});
```
このアプリケーションは、すべてからのリクエストに応答します。クライアントブラウザからの HTTP GET リクエストは、「Hello World!」を含む文字列を返します。
app.js ファイルを保存した後、ターミナル (またはコマンドラインウィンドウ) に切り替え、作業ディレクトリを app.js# に切り替えます。 ## ファイルディレクトリに移動し、次のコマンドを実行します。
```
node app.js
```
すべてがうまくいけば、ターミナル出力「サーバーはポート 3000 をリッスンしています!」が表示されるはずです。これは、Express.js アプリケーションが実行中であり、http://localhost:3000/ にアクセスすることでアクセスできることを示しています。

EJS のインストール

EJS は、Express.js アプリケーションで動的コンテンツを含む Web ページを作成するのに役立つ、シンプルで使いやすいテンプレートエンジンです。以下の手順に従ってインストールしてください:

ターミナル (またはコマンドラインウィンドウ) を開き、次のコマンドを入力します:
```
npm install ejs --save
```
このコマンドは、次の最新バージョンをインストールします。 npm リポジトリ EJS を作成し、それを依存関係としてプロジェクトに追加します。
views という新しいフォルダーを作成します。これは、Express.js アプリケーションが EJS テンプレートファイルを保存する場所になります。
views フォルダーに、index.ejs という名前の新しいファイルを作成します。これは、Web ページのメインのテンプレートファイルになります。
index.ejs ファイルに次のコードを入力して、簡単な Web ページを作成します。
```
<!DOCTYPE html>
<html>
<head>
  <title>EJS Example</title>
</head>
<body>
  <h1 id="Welcome-to-the-EJS-Example">Welcome to the EJS Example!</h1>
  <p>The current date and time is <%= new Date().toString() %>.</p>
</body>
</html>
```
このテンプレートには、「ようこそ」というタイトルが表示されます。 EJS の例!」、および現在の日付と時刻を含む段落。
app.js ファイルに戻り、ヘッダーに次のコードを追加して、Express.js アプリケーションに EJS テンプレートファイルの場所を指示します。
```
app.set('views', './views');
app.set('view engine', 'ejs');
```
app.js ファイルで、app.get メソッドを次のコードに置き換えます:
```
app.get('/', (req, res) => {
  res.render('index');
});
```
This メソッドEJS を介して渡されます。テンプレートエンジンは
views/index.ejs ファイルをレンダリングし、クライアントブラウザに送り返します。
app.js および index.ejs ファイルを保存した後、ターミナル (またはコマンドラインウィンドウ) に切り替えて、作業内容を切り替えます。ディレクトリを app.js ファイルのあるディレクトリに変更し、次のコマンドを実行します:
```
node app.js
```
すべてがうまくいけば、ターミナル出力「サーバーはポート 3000 をリッスンしています!」が表示されるはずです。」。これは、Express.js アプリケーションが実行中であり、http://localhost:3000/ にアクセスすることでアクセスできることを示しています。
リンクをクリックすると、現在の日付と時刻が記載された Web ページが表示されます。