Node.js Express.js フレームワークチュートリアル

このチュートリアルでは、Expressフレームワークについて学習します。このフレームワークは、最小限かつ柔軟なNode.jsウェブアプリケーションフレームワークとして機能するように設計されており、シングルページ、マルチページ、ハイブリッドのウェブアプリケーションを構築するための豊富な機能を提供します。

Express.jsとは何ですか?

Express.jsは、Node.jsベースのWebアプリケーションサーバーフレームワークであり、シングルページ、マルチページ、およびハイブリッドWebアプリケーションの構築に特化して設計されています。

ExpressはNode.jsの標準的なサーバーフレームワークとなっています。Expressは、MEANスタックと呼ばれるフレームワークのバックエンド部分を担っています。

Express は、コア Node.js HTTP 上にルーティングとミドルウェアを重ねます。 ストリーム およびイベントAPI。

MEAN は無料のオープンソースです Javaスクリプト 動的な Web サイトおよび Web アプリケーションを構築するためのソフトウェア スタック。次のコンポーネントが含まれます。

1) MongoDB — 標準的なNoSQLデータベース

2) Express.js — デフォルトのWebアプリケーションフレームワーク

3) AngularJS - JavaWebアプリケーションに使用されるスクリプトMVCフレームワーク

4) Node.js — スケーラブルなサーバーサイドおよびネットワークアプリケーションに使用されるフレームワーク。

Express.js フレームワークを使用すると、GET、PUT、POST および DELETE リクエストなどの複数の種類のリクエストを処理するために使用できるアプリケーションの開発が非常に簡単になります。

Express のインストールと使用

ExpressはNode Package Manager経由でインストールされます。これはコマンドラインで次の行を実行することで実行できます。

npm インストール エクスプレス

上記のコマンドは、Node Package Managerに、必要なexpressをダウンロードするように要求します。 モジュール そして、それらを適切にインストールしてください。

バージョンノート： npm は現在 Express 5.2 をインストールしますが、多くのプロジェクトは依然として Express 4 に固定されています。どちらも以下の例を実行します。 サポートされているNode.jsリリース.

新しくインストールした Express フレームワークを使用して、単純な「Hello World」アプリケーションを作成してみましょう。

私たちのアプリケーションはシンプルな サーバーモジュール これはポート番号3000で待機します。この例では、ブラウザからこのポート番号にリクエストが送信されると、サーバーアプリケーションはクライアントに「Hello World」という応答を送信します。

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

Code 説明：

1. コードの最初の行では、require 関数を使用して「express モジュール」を組み込みます。
2. Express モジュールの使用を開始する前に、そのオブジェクトを作成する必要があります。
3. ここではコールバック関数を作成します。この関数は、誰かがウェブアプリケーションのルートアドレス（http://localhost:3000）にアクセスするたびに呼び出されます。コールバック関数は、ウェブページに「Hello World」という文字列を送信するために使用されます。
4. コールバック関数では、文字列「Hello World」をクライアントに送り返します。 「res」パラメータは、コンテンツを Web ページに送り返すために使用されます。 この「res」パラメータは、Web ページにコンテンツを送り返すことを可能にするために「request」モジュールによって提供されるものです。
5. 次に、listen関数を使用して、サーバーアプリケーションがポート番号3000でクライアントからのリクエストをリッスンするように設定しています。ここでは、使用可能な任意のポートを指定できます。

コマンドが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、

• ご覧のとおり、 URL localhostのポート3000にアクセスすると、ページに「Hello World」という文字列が表示されます。
• コード内でサーバーがポート番号3000でリッスンするように明示的に指定しているため、このポートにアクセスすると出力を確認できます。 URL.

ルートとは何ですか?

単一のルートルートは、あくまで出発点に過ぎません。

ルーティングとは、アプリケーションが特定のエンドポイントへのクライアントからのリクエストにどのように応答するかを決定するものです。

例えば、クライアントはさまざまな目的でGET、POST、PUT、またはDELETE HTTPリクエストを行うことができます。 URL 例えば、以下に示すようなもの。

http://localhost:3000/Books
http://localhost:3000/Students

上記の例では、

• 最初のGETリクエストが行われた場合 URLその場合、理想的には書籍のリストが回答として返されるべきです。
• 2回目のGETリクエストが行われた場合 URLその場合、理想的には学生のリストが返されるべきです。
• したがって、 URL アクセスされると、Webサーバー上の別の機能が呼び出され、それに応じて応答がクライアントに送信されます。これがルーティングの概念です。

各ルートには、ルートが一致したときに実行される XNUMX つ以上のハンドラー関数を含めることができます。

ルートの一般的な構文を以下に示します。

app.METHOD(PATH, HANDLER)

その中で、

1) アプリは Express モジュールのインスタンスです

2) METHOD は HTTP リクエスト メソッド (GET、POST、PUT、または DELETE) です。

3) PATH はサーバー上のパスです。

4) HANDLER はルートが一致したときに実行される関数です。

⚠️ エクスプレス5 注意事項： これらのシグネチャは変更されていませんが、app.del() は app.delete() に、res.sendfile() は res.sendFile() になり、ワイルドカードには /*splat のような名前が必要になりました。

Expressでルートを実装する方法の例を見てみましょう。この例では、3つのルートを作成します。

1. このルートにアクセスすると「Tutorial on Node」という文字列が表示される /Node ルート
2. このルートにアクセスすると「Tutorial on Angular」という文字列が表示される /Angular ルート
3. デフォルトルート / では「ようこそ Guru99のチュートリアル。

基本的なコードは前の例と同じままです。 以下のスニペットは、ルーティングがどのように実装されるかを示すアドオンです。

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
});

Code 説明：

1. ここでは、 URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URLこの関数には2つのパラメータがあります。
   • 使用する主なパラメータは「res」パラメータで、クライアントに情報を送り返すために使用できます。
   • 「req」パラメータには、行われたリクエストに関する情報が含まれます。 場合によっては、実行されるリクエストの一部として追加のパラメーターが送信される可能性があるため、送信される追加パラメーターを見つけるために「req」パラメーターを使用できます。
2. ノード ルートが選択されている場合は、send 関数を使用して文字列「Tutorial on Node」をクライアントに送り返します。
3. ここでは、 URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
4. Angular ルートが選択された場合、send 関数を使用して文字列「Tutorial on Angular」をクライアントに送り返します。
5. これは、アプリケーションのルート（http://localhost:3000）にアクセスしたときに選択されるデフォルトルートです。デフォルトルートが選択されると、「Welcome to Guru「99のチュートリアル」がクライアントに送信されます。

コマンドが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、

• ご覧のとおり、 URL localhostのポート3000にアクセスすると、「Welcome to Guruページには99件のチュートリアルが表示されています。
• コード内でデフォルトを指定したため URL このメッセージが表示されます。

次に、/Node にアクセスしてください。

出力から、

• ご覧のとおり、 URL が /Node に変更された場合、対応する Node ルートが選択され、「Node のチュートリアル」という文字列が表示されます。

次に、/Angular にアクセスしてください。

出力から、

• ご覧のとおり、 URL が /Angular に変更された場合、対応する Node ルートが選択され、「Angular のチュートリアル」という文字列が表示されます。

Express.js を使用したサンプル Web サーバー

上記の例から、ルーティングに基づいて表示する出力をどのように決定できるかを見てきました。このようなルーティングは、現代のほとんどのWebアプリケーションで使用されています。Webサーバーのもう1つの重要な要素は、Node.jsにおけるテンプレートの使用です。

Node.jsアプリケーションを迅速に作成する場合、テンプレートを使用するのが簡単で効率的な方法です。テンプレート作成のためのフレームワークは数多く存在します。ここでは、テンプレート作成フレームワークとしてJadeを例に挙げて説明します。

JadeはNodeパッケージマネージャー経由でインストールされます。これは、コマンドラインで次の行を実行することで実行できます。

npm インストール jade

上記のコマンドは、Nodeパッケージマネージャーに対し、必要なJadeモジュールをダウンロードして適切にインストールするよう要求します。

注: Node の最新バージョンでは、jade は非推奨になりました。 代わりにパグを使用してください。

⚠️ 現代版: install パグindex.jade を index.pug に名前変更し、app.set('view engine','pug') を設定します。jade パッケージは更新されません。以下の手順は引き続き実行されます。

新しくインストールしたJadeフレームワークを使って、基本的なテンプレートを作成してみましょう。

ステップ1） 最初のステップは、Jadeテンプレートを作成することです。index.jadeという名前のファイルを作成し、以下のコードを挿入してください。ファイルは必ず「views」フォルダ内に作成してください。

1. ここでは、このテンプレートが呼び出されたときにページのタイトルが渡される値に変更されるように指定しています。
2. また、ヘッダータグ内のテキストは、Jadeテンプレートで渡された内容に置き換えられることも指定しています。

それをレンダリングするアプリケーションコードは以下のとおりです。

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

Code 説明：

1. アプリケーションで最初に指定する必要があるのは、テンプレートのレンダリングに使用する「ビューエンジン」です。今回はJadeを使用してテンプレートをレンダリングするため、それに応じて指定します。
2. render 関数は、Web ページをレンダリングするために使用されます。 この例では、前に作成したテンプレート (index.jade) をレンダリングしています。
3. 私たちは「Guruパラメータ「title」と「message」には、それぞれ「99」と「Welcome」が設定されます。これらの値は、index.jadeテンプレートで宣言されている「title」と「message」パラメータに置き換えられます。

コマンドが正常に実行された場合、ブラウザでコードを実行すると次の出力が表示されます。

出力：

出力から、

• ページのタイトルが「Guru99」とすると、ページのヘッダーが「ようこそ」に設定されます。
• これは、Node.jsアプリケーション内で呼び出されるJadeテンプレートが原因です。

よくあるご質問