Node.js

【画像で解説】Node.jsの新規プロジェクトを作成する方法

この記事では、Node.jsの新規プロジェクトを開始するための手順をわかりやすく解説します。

なお、Node.jsのプロジェクトを作成するためには、ご自身のローカル環境にNode.jsとnpmをインストールする必要があります。
まだ、インストールされていない場合は、下記記事を参考にしてください。

【画像で解説】Node.jsの環境設定を初心者にもやさしく説明この記事では、Node.jsをローカル環境で使えるようにする方法について、画像を使ってわかりやすく解説しています。 Node.jsがロ...

Node.jsの新規プロジェクト作成手順

それではNode.jsの新規プロジェクトを作成していきます。

まずは、プロジェクトのファイルを作成します。

例では、デスクトップに「node-project」というファイルを作成しました。
空のファイルです。ファイルの場所やファイル名はご自身でお好きに設定してください。

Node.jsの新規プロジェクト作成手順

次にコマンドプロンプトを開き、作成したファイルに移動します。

移動は、「cd ディレクトリ」で移動できます。

Node.jsの新規プロジェクト作成手順

移動すると下記の様に、移動した現在の場所が表示されます。

Node.jsの新規プロジェクト作成手順

移動したらそのディレクトリで、以下のコマンドを実行し、package.jsonを生成します。

npm init --yes

下記のようになれば成功です。

Node.jsの新規プロジェクト作成手順

次に、以下のコマンドを実行して、Node.jsのフレームワークであるexpressをインストールします。
※expressは別途下記記事で解説しておりますが、ここではいったんインストール出来ればOKです。

Node.jsのフレームワークExpressのインストール方法と使用方法を解説Expressは、Node.jsの最も有名なフレームワークで、Node.jsを使う際にほぼほぼ必須で使うフレームワークです。 この...
npm install express

下記のようになれば成功です。

Node.jsの新規プロジェクト作成手順

次に、ejsモジュールをインストールします。
※ejsは別途下記記事で解説しておりますが、ここではいったんインストール出来ればOKです。

Node.jsのパッケージEJSのインストール方法と使用方法を解説この記事では、EJSのインストール方法と使用方法について初心者向けに解説していきます。 まず、EJS(Embedded JavaS...
npm install ejs

下記のようになれば成功です。

Node.jsの新規プロジェクト作成手順

ここまで出来たら、VSCodeで作成したファイルを開きます。

ファイル構成はこんな感じになっているはずです。

Node.jsの新規プロジェクト作成手順

ここまで出来れば、Node.jsの新規プロジェクトが完成となります。

Node.jsをローカルサーバー上でページを表示

それでは、ローカルサーバーでページを表示させます。

まず、下記のように「app.js」と「views/index.ejs」ファイルを作成します。

※「app.js」はpackage.jsonと同じ階層

Node.jsをローカルサーバー上でページを表示

ファイルを作ったら、以下のコードをそれぞれのファイルに張り付けます。
※ここではページを表示するためだけなのでコード自体は理解はしなくて大丈夫です。

【app.js】

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

app.get('/', (req, res) => {
  res.render('index.ejs');
});

app.listen(3000);

 

【index.ejs】

<h1>Hello World</h1>

ここまでできたら、ターミナルを開らき、下記コマンドを実行します。

Node.jsをローカルサーバー上でページを表示
node app.js

コマンドを実行しても特に変化がないですが、その状態でブラウザを開いて「localhost:3000」にアクセスします。 このように ”Hello World” と表示されれば成功です!

Node.jsをローカルサーバー上でページを表示

「localhost:3000」にアクセルして下記のように表示されれば成功!!

Node.jsをローカルサーバー上でページを表示

Node.jsの新規プロジェクト作成手順のまとめ

いかがでしたか?

ファイルがインストールされページが表示されれば、Node.jsの新規プロジェクトをローカル上に作成出来ていますので、開発を始めることが可能です。

なお、上記の方法で表示させる場合、コードを修正するたびに「node app.js」とコマンドを打つ必要で出てしまいます。

それを回避するために、コードが修正されると自動でサーバーを再起動させる方法があるので、下記記事を参考にしてみてください。

【画像で解説】Node.jsのnodemonで自動でサーバーを再起動する方法Node.jsでは、「node app.js」とコマンドを実行することでローカルサーバーでの起動をさせることが可能です。 ※詳細は下記...