nodejsはWeb側を実装します-フロントエンドQ&A-php.cn

nodejsはWeb側を実装します

WBOY

リリース： 2023-05-08 13:08:38

オリジナル

801 人が閲覧しました

nodejs は、サーバー側で実行される JavaScript ランタイム環境であり、開発者が JavaScript でサーバー側のコードを記述して、Web フロントエンドと対話できるようにします。

ここ数年、効率的でスケーラブルでデプロイが簡単な開発環境を提供するため、nodejs の人気が高まっています。 LinkedIn、Walmart、PayPal など、多くの企業や組織が Nodejs を採用しています。

この記事では、nodejs を使用して Web アプリケーション、ルーティング、ミドルウェアのデプロイメント、サーバー側データをレンダリングするためのテンプレートエンジンの使用などの Web 側開発を実装する方法を紹介します。

nodejs のインストール

まず、nodejs をインストールする必要があります。さまざまなオペレーティングシステムのダウンロードリンクは、nodejs 公式 Web サイトで見つけることができます。

インストールが完了したら、ターミナルに「node -v」と入力して、インストールが成功したかどうかを確認できます。成功すると、nodejs のバージョン番号が表示されます。

Web アプリケーションの作成

次に、nodejs を使用して簡単な Web アプリケーションを作成できます。ターミナルを開き、空のフォルダーに移動し、次のコマンドを入力します。

npm init -y

ログイン後にコピー

このコマンドは、プロジェクトのメタデータを含む新しい package.json ファイルを作成します。

次に、nodejs で最も人気のある Web アプリケーションフレームワークの 1 つである Express モジュールをインストールする必要があります。次のコマンドを使用してインストールできます。

npm install express

ログイン後にコピー

インストールが完了したら、nodejs コードを含むindex.js ファイルを作成できます。 Index.js で、express モジュールをインポートし、新しいインスタンスを作成します。

const express = require('express');  
const app = express();

ログイン後にコピー

これは、アプリケーションが Express によって提供されるメソッドとプロパティを使用できることを意味します。次に、http リクエストを受信するためにどのポートをリッスンするかをアプリケーションに指示する必要があります。

const port = 3000; 
app.listen(port, () => {  
  console.log(`Server started on port ${port}`);  
});

ログイン後にコピー

ここでは、アプリケーションにポート 3000 をリッスンするように指示します。そして、console.log() を使用してメッセージを出力し、サーバーが起動したことを確認します。

ルートの追加

アプリケーション用に基本的なフレームワークを設定したので、別のページに移動するためのルートの追加を開始する必要があります。 Express では、ルートはアプリケーションがクライアントの要求にどのように応答するかを定義します。

次のコードを使用して、単純な動的ルートを作成できます:

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

ログイン後にコピー

このルートは、ユーザーがルートパスをリクエストしたときに「Hello, World!」メッセージを返す GET リクエストを定義します。。

静的ルーティングを使用して、アプリケーションの静的ページとファイルを定義することもできます。

app.use(express.static('public'));

ログイン後にコピー

ここでは、「public」フォルダーで静的ファイルを探すようにサーバーに指示します。これには、HTML、CSS、JavaScript、画像、その他の静的リソースが含まれます。

ミドルウェア

ミドルウェアは、ルーティングの前後に実行されるコードです。これを使用して要求オブジェクトと応答オブジェクトを処理および変更することができるため、アプリケーションにより多くの機能が提供されます。

たとえば、次のコードを使用して、すべてのルートのロギングミドルウェアを追加できます。

app.use((req, res, next) => {  
  console.log(`${req.method} ${req.url}`);  
  next();  
});

ログイン後にコピー

ここでは、HTTP メソッドと URL を記録する「logger」というミドルウェア関数を定義し、リクエストとレスポンスのオブジェクトを次のミドルウェアに送信します。

テンプレートエンジン

ほとんどの Web アプリケーションでは、サーバー側で HTML ページを動的に生成する必要があります。この機能を実現するには、テンプレートエンジンを使用できます。

テンプレートエンジンを使用すると、クライアントからレンダリングするのではなく、サーバーから HTML をレンダリングできます。これは通常、読み込み時間が短縮され、検索エンジンの最適化 (SEO) が向上することを意味します。

nodejs では、Pug、Handlebars、EJS など、さまざまなテンプレートエンジンから選択できます。

次は、EJS テンプレートエンジンを使用して変数をレンダリングする例です。

app.set('view engine', 'ejs');  
app.get('/', (req, res) => {  
  const data = {  
    title: 'Hello, World!',  
    message: 'This is the home page.'  
  };  
  res.render('index', data);  
});

ログイン後にコピー

ここでは、まずテンプレートエンジンを EJS に設定します。次に、タイトルとメッセージを含むプロパティを持つデータオブジェクトを定義します。最後に、res.render() メソッドを使用して「index」という名前の EJS テンプレートをレンダリングし、データオブジェクトをテンプレートに渡します。

EJS テンプレートでは、次のコードを使用してこれらの変数にアクセスできます:

<h1><%= title %></h1>  
<p><%= message %></p>

ログイン後にコピー

ここでは、<%= %> の構文を使用して JavaScript 変数を出力します。テンプレートがレンダリングされると、これらの変数は実際のデータに置き換えられます。

アプリケーションのデプロイ

Web アプリケーションの開発が完了したら、誰でもアクセスできるように Web サーバーにデプロイできます。

一般的な方法の 1 つは、アマゾンウェブサービス (AWS) や Microsoft Azure などのクラウドコンピューティングサービスを使用することです。これらのサービスは、Web アプリケーションの展開とホストに使用できる仮想コンピューターインスタンス、コンテナー、およびアプリケーションプラットフォームを提供します。

Heraku などのプラットフォームをデプロイメントターゲットとして使用することもできます。これらのプラットフォームは、コードをリモートサーバーにデプロイするために使用できるシンプルなコマンドラインツールとデプロイメントプロセスを提供します。

概要

この記事では、nodejs を使用して Web サイド開発を実装する方法を紹介しました。基本的な Web アプリケーションを作成し、ルーティングとミドルウェアを追加し、テンプレートエンジンを使用してサーバー側データをレンダリングする方法を学びました。さらに、アプリケーションを広く使用できるように Web サーバーにアプリケーションを展開する方法についても説明しました。

以上がnodejsはWeb側を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。