このページではExpress.jsを利用した簡単なローカル開発環境構築を紹介します。

目次

1. このページのゴールについて
2. 対象の方
3. 私の環境について
4. 構築手順（Node.jsのインストール、VisualStudioのインストール、プロジェクトの作成、サーバーの起動、疎通確認）

このページのゴールについて

Express.jsを利用した簡単なローカルwebサーバーをVisualStudioで構築し、疎通まで確認する。

対象の方

言語はちょっと触ったことはあるが、これからExpressjsで開発をしてみたい方向け

私の環境について

OS：Windows10
VisualStudio：VisualStudio2022
Node.js：v16.13.2

構築手順

1.　Node.jsのインストール

はじめにNode.jsをインストールしましょう。（Node.jsとはPC内にJavaScript実行環境を構築するソフトウェアです。実行環境がないとJavaScriptが動きません。）
下記からNode.jsをDLしインストール
一緒にnpm（Node.jsのバージョン管理システムソフト）についても、インストール、パスを通しておきましょう。

https://nodejs.org/ja/

2.　VisualStudioのインストール

次にVisualStudioをインストールしましょう。（VisualStudioとは開発に便利な機能が詰まった統合開発環境です。プロジェクトの作成もこのソフトの機能を利用します。）
下記からVisualStudioをDLしインストール
https://visualstudio.microsoft.com/ja/

3.　プロジェクトの作成

VisualStudioのインストールが完了したら、プロジェクトを作成していきましょう。

新しいプロジェクトの作成を押下

基本のNode.js Express 4 アプリケーションを押下
（JavaScriptとTypeScriptの2種類ありますが、今回はJSを選択します。）

変更せずデフォルトのまま作成ボタンを押下

プロジェクトが作成されていることを確認します。

4.　サーバーの起動

プロジェクトの作成が完了したら、サーバーを起動しましょう。

コマンドプロンプトを起動

package.jsonが格納されているフォルダに移動

※windowsであれば、パス欄にcmdと打ち、エンターキーを押下すればそのフォルダでコマンドプロンプトが開きます。

サーバー起動コマンドを実行

ポートは3000なので、起動を確認

5.　疎通確認

環境が構築できたか確認してみましょう。

下記URLにアクセス

http://localhost:3000/

下記画像が表示されたら完了です。

ご覧いただきありがとうございます。