MENU

Node.jsとExpressでサーバサイドアプリを開発してみよう！環境構築〜雛形アプリ作成編！

広告
REST API 開発
Node.jsとExpreesの環境構築をしよう
  • URLをコピーしました！

JavaScriptは、本来クライアントサイドでよく使われています。
しかし、「node.js」というサーバサイドで動くJavaScriptが存在します！！

今回は、node.jsを使ってRestAPIを開発するための、準備としてサーバサイドの雛形アプリを作成していこうと思います！

学習に使った本はこちら！

入門Node.jsプログラミング
¥3,740 （2024/04/19 13:11時点 | Amazon調べ）
口コミを見る
Amazon
楽天市場
Yahooショッピング
Node.js超入門[第3版]
著:掌田津耶乃
¥2,851 （2024/04/23 15:19時点 | Amazon調べ）
口コミを見る
Amazon
楽天市場
Yahooショッピング
クマじい

Amazon Kindle Unlimited でもNode.jsの本はいっぱいあるんじゃ！！

  • 技術書をたくさん読みたい！
  • 色々な技術を学びたい！
必見Amazon Kindle Unlimited
初回30日間無料体験があるので、どのような参考書があるか確認してみよう！

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ！
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります！

Fire 7 タブレット 16GB
口コミを見る
Amazon
楽天市場
Yahooショッピング
Fire HD 8 タブレット 32GB
口コミを見る
Amazon
楽天市場
Yahooショッピング
Fire HD 10 タブレット 32GB
口コミを見る
Amazon
楽天市場
Yahooショッピング

簡単ですので、ぜひ参考にしてみてください！！

こんな方に見て欲しい内容です！！
  • node.jsに初めて触ってみる！
  • node.jsを勉強したいが何から始めればいいかわからない！
  • node.jsで簡単にサーバサイドアプリを開発したい！
node.jsでサーバサイドを実装するメリットは、あるんですか？

本来Webアプリを開発する場合、クライアントサイドとサーバサイドが別々の言語になるのが、一般的です。
どちらともJavaScriptで実装ができれば、JavaScriptを知っているエンジニアがいれば大丈夫！！
これが、最大のメリットです！

目次

開発環境を構築しよう！！

まずは、開発環境を構築していきましょう！！

クマじい

開発環境の構築が一番大変なんじゃよな。。。

・・・
node.jsの開発環境構築は、難しい作業ではないので安心してください！！

node.jsをインストール

まずは、「node.jsの公式」からnode.jsのインストーラーをダウンロードします！！

Windowsなら「Windows Installer」、Macなら「mocOS Installer」を選択してください！

NODE.JS I 55>0— Y: 14.15.4 (161418 npm 6.14.10) Node.js (DV—ÄZI— FE9D>C]— LTS Windows Installer nodeN14.IS.4-x64.msi Windows Installer (.msi) Windows Binary (zip) macOS Installer (.pkg) macOS Binary (.tar.gz) Linux Binaries (x64) Linux Binaries (ARM) ntde macOS Installer node-v14.IS.4.pkg 32-bit 32-bit ARMvr 64-bit 64.bit 64-bit CERTIFICATION Source Code node-v14.15,4.tar.gz 64-bit 64-bit ARMv8
ワンポイント
  • LTS版：Long Term Supportの略で、サポート期間が長い安定バージョン。
  • 最新版：その名の通り最新バージョン。最新機能を使えたりする。

基本的には、LTS版をダウンロードしよう！！

では、インストーラーを起動して説明に従ってインストールしていきましょう！！

Node.js Setup node Welcome to the Node.js Setup Wizard The Setup Wizard will install Node.js on your computer.

基本的には「Next」で進めていけば問題ありません！

Node.js Setup End-user License Agreement Please read the following license agreement carefully node MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 1 accept the terms in the Licenæ Agreement

Licenseに同意できるなら、チェックを入れてもらって「Next」を選択してください！

Node.js Setup Destination Folder Choc* a Custom location or click Next to in*an. Inqall Node.Js to: C:VProgram Files* node

こちらに関しても、特に変更したいとかがなければ、このまま「Next」を選択しましょう！

Node.js Setup Custom Setup Select the way you want features to be installed. node Click the icons in the tree below to change the way features will be inqalled. rpm package manager Online documentation shortcuts Add to PATH the Core Node.js runtime (node. exe). This feature requires 26Mg on your herd drive. It has I of I subfeatures The require 00 on your hard drive.

ここも基本的にはこのまま「Next」で問題ありません！！

g Node.js Setup Tools for Native Modules Optionally install the tools to compile native modules. node Some npm modules need to be compiled from C/C++ when in<alling. If you want to be able to such modules, Some tools and Visual Build Tools) need to be Automatically the Note that this win also The Script Will pop-up in new Window after the completes. Alternatively, follmv the instructions at in<all the dependencies yourself.

ここも基本的には、「Next」で問題ありません。
C＋＋で拡張機能を作りたい！！という方は、チェックをつけてください。（今回は、使用しませんし、おそらく今後これを使用することはないです。）

Node.js Setup Ready to install Node.js node Click Install to begin the Click Back to review or any Of your settings. Click Cancel to exit the wizard.

ここまで問題なければ、「Install」を選択しましょう！！

Node.js Setup node Completed the Node.js Setup Wizard Clid the Finish button to exit Setup Wizard. Node.js has been succesfully

上の画面になればOKです！！

最後に、ちゃんとインストールできたか確認してみましょう！！

コマンドプロンプトで「node –version」or「node -v」を実行してください！

C:¥Users¥****>node --version
v14.15.4

C:¥Users¥****>node -v
v14.15.4

このように、nodeのバージョンが表示されたらインストールは完了です！

expressをインストール

次に、expressをインストールしていきましょう！！

expressとは、node.jsのWebフレームワークです。
簡単に開発できるようにしてくれます！

もう少し詳しく

expressとは、node.jsのwebフレームワークのことです。
Webアプリケーションを開発する上で必要な機能が備わっているので、簡単に開発することを可能にしてくれます！

詳しくは、公式ページをご確認ください！！

では、実際にインストールしていきましょう！！

インストールは、npmを使用します。npmは、node.jsをインストールしていれば同胞されているので、別途インストールする必要はありません。

コマンドプロンプトで、「npm install -g express」を実行しましょう！

C:¥Users¥*****>npm install -g express
ワンポイント

「-g」は、システム全体にインストールすることを意味します。
もし、現在のフォルダ以下のみにインストールする場合は、「-g」を外しましょう。

上記の実行が完了したら、インストールできたか確認しましょう！！

コマンドプロンプトで、「express –version」を実行しましょう！

C:¥Users¥*****>express --version
4.16.1

expressのバージョンが確認できれば、インストールOKです！

express-generatorをインストール

次に「express-generator」をインストールしていきましょう！！
express-generatorは、アプリケーションの雛形を作るツールと捉えてもらえればいいと思います！

これにより、１からアプリを作る必要がなくなり、手間が大幅に削減できます！

express-generatorもnpmを使ってインストールしていきます！
コマンドプロンプトで「npm install -g express-generator」を実行してください！

C:¥Users¥*****>npm install -g express-generator

WARNが出る可能性もありますが、基本的には問題ありません。
そのまま、進めていけばいいと思います。

雛形アプリケーションを生成

では、実際に雛形アプリケーションを生成しようと思います！

こちらも、コマンドプロンプトから「express sample」を実行します！

sampleは、アプリケーション名なので好きなアプリ名にしてください！
実行する場合は、任意のディレクトリに移動して実行してくださいね。。

C:\Users\*****>cd Documents

C:\Users\*****\Documents>express sample

  warning: the default view engine will not be jade in future releases
  warning: use `--view=jade' or `--help' for additional options


   create : sample\
   create : sample\public\
   create : sample\public\javascripts\
   create : sample\public\images\
   create : sample\public\stylesheets\
   create : sample\public\stylesheets\style.css
   create : sample\routes\
   create : sample\routes\index.js
   create : sample\routes\users.js
   create : sample\views\
   create : sample\views\error.jade
   create : sample\views\index.jade
   create : sample\views\layout.jade
   create : sample\app.js
   create : sample\package.json
   create : sample\bin\
   create : sample\bin\www

   change directory:
     > cd sample

   install dependencies:
     > npm install

   run the app:
     > SET DEBUG=sample:* & npm start
ワンポイント

「cd」は、カレントディレクトリを変更するコマンドです。
今回であれば、Documentsディレクトリをカレントディレクトリに変更していることになります！

アプリを作成したいディレクトリに、 cdコマンドで移動してから雛形を作成しましょう！

これを実行すると、「sample」というフォルダがDocument直下に作成されたと思います！

public 叩 p 訂 packageJson 202V01 / 22 0:27 2021 / 01 / 22 0 : 27 2021 / 01 / 22 仕 27 2021 / 01 々 2 [Y-27 2021 / 01 / 22 027 2021 / 01 / 22 0:27 フ ァ イ ル フ ォ ル ダ ー フ ァ イ ル フ ォ ル タ - フ ァ イ ル フ し タ - ) ァ イ ル 丿 オ ル タ ー 第 記 5 朝 フ ァ イ ル ON File 2 KB

sampleフォルダ内が、上の写真のようになっていればOKです！！

しかし、これだとまだ動かないので、次にアプリに必要なパッケージをインストールしていきます！

パッケージをインストール

パッケージをインストールするには、まず先ほど作成したアプリの雛形フォルダにカレントディレクトリを変更する必要があります！

「cd sample」を実行しましょう！

C:\Users\*****\Documents>cd sample

次に、パッケージをインストールしましょう！

「npm install」を実行してください！

C:\Users\*****\Documents\sample>npm install
npm WARN deprecated jade@1.11.0: Jade has been renamed to pug, please install the latest version of pug instead of jade
npm WARN deprecated constantinople@3.0.2: Please update to at least constantinople 3.1.1
npm WARN deprecated transformers@2.1.0: Deprecated, use jstransformer
npm notice created a lockfile as package-lock.json. You should commit this file.
added 100 packages from 139 contributors and audited 101 packages in 3.651s
found 4 vulnerabilities (3 low, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

多少メッセージは、異なる可能性がありますがこんな感じになれば、OKです！

npmについて

ここまでにも、何度か出てきておりますが、、、
npm(node package manager)とは、node.jsのパッケージを管理するツールです。
パッケージの一元管理をすることが可能です！！

npm install：package.jsonに記載されたパッケージを一括でインストール
npm install [package]：パッケージをインストール

他にも、色々ありますので調べてみることをおすすめします！！

ここまでできたら、実際に動かしてみましょう！！

アプリを起動する

アプリを起動する場合は、コマンドプロンプトから「npm start」を実行します！

C:\Users\*****\Documents\sample>npm start

> sample@0.0.0 start C:\Users\*****\Documents\sample
> node ./bin/www

ここまできたら、「http://localhost:3000」にアクセスしてみましょう！！

Express Welcome to Express

このような画面が出れば完了です！！

クマじい

おお！！簡単じゃな！

【おまけ】VSCodeを使ってみよう！！

開発環境は、上記で完了ですが毎回コマンドプロンプトを使っていては、面倒なのでVSCodeからTerminalを使ってみましょう！！

VS Code（Visual Studio Code）とは、Microsoftが開発しているソースコードエディタのことです！！

今回は、VSCode(Visual Studio Code)を使用します。
インストールされている方も多いと思いますが、まだの方は、「Microsoft Azure」からダウンロードしてください！

インストールできたら、VSCodeを開いてください！！

File Edit Selection EXPLORER > OPEN EDITORS v NO FOLDER View Go Run Terminal Welcome X Help Welcome - Visual Studio Code o x O You have not yet opened a folder. You can also clone a repository from a URL. To learn more about how to use git and source control in VS Code read our docs. Clone Repository Visual Studio Code Editing evolved Start New file Open folder... or clone repository„. Recent sample C:\Users\ymph6\Documents terakoya_app ph6\Docu ments vue node C:Wsers\ymph6\Documents terakoya_node More... (Ctrl+R) Help Printable keyboard cheatsheet Introductory videos Tips and Tricks Product documentation GitHub repository Stack Overflow Join our Newsletter Show welcome page on startup Customize Tools and languages Install support for JavaScript. Python, Java, PHP, Azure, Docker and more Settings and keybindings Install the settings and keyboard shortcuts of Vim, Sublime, Atom and others Color theme Make the editor and your code look the way you love Learn Find and run all commands Rapidly access and search commands from the Command Palette (Ctrl+Shift.P) Interface overview Get a visual Overlay highlighting the major components Of the UI Interactive playground Try out essential editor features in a short walkthrough > OUTLINE > NPM SCRIPTS @oAo

初期画面はこのようになっていると思います！！

ここに、先ほど作成した「sample」フォルダをドラッグ&ドロップするか、「Open Folder」から選択してください！

File Edit Selection Welcome - sample - Visual Studio Code View Go Run Terminal Welcome X Help o x EXPLORER > OPEN EDITORS v SAMPLE > bin > node_modules > public > routes views JS appjs package-lock.json package; son > OUTLINE > NPM SCRIPTS @oAo Visual Studio Code Editing evolved Start New file Open folder... or clone repository„. Recent terakoya_app C:\Users\ymph6\Documents vue node terakoya_node C:\Users\ymph6\Documents\node react More... (Ctrl+R) Help Printable keyboard cheatsheet Introductory videos Tips and Tricks Product documentation GitHub repository Stack Overflow Join our Newsletter Show welcome page on startup Customize Tools and languages Install support for JavaScript. Python, Java, PHP, Azure, Docker and more Settings and keybindings Install the settings and keyboard shortcuts of Vim, Sublime, Atom and others Color theme Make the editor and your code look the way you love Learn Find and run all commands Rapidly access and search commands from the Command Palette (Ctrl+Shift.P) Interface overview Get a visual Overlay highlighting the major components Of the UI Interactive playground Try out essential editor features in a short walkthrough

すると、sampleフォルダーの内容が表示されると思います！
今後は、この画面でソースコードを修正するので覚えておいてください！

では、VSCodeでコマンドプロンプトを開いてみようと思います！
メニューバー＞Terminal＞New Terminalを選択してください！！

これだけで表示されたと思います！！
ここから実行をすれば、毎回コマンドプロンプトを使う必要がなくなります！！

クマじい

最初からこのやり方を説明せい！！

まとめ

今回は、node.js + expressでRestAPIを開発するための、準備としてインストール〜雛形アプリの生成まで実施しました。
コマンド数個で雛形ができるので、ぜひ活用してみてください！！

学習に使った本はこちら！

入門Node.jsプログラミング
¥3,740 （2024/04/19 13:11時点 | Amazon調べ）
口コミを見る
Amazon
楽天市場
Yahooショッピング
Node.js超入門[第3版]
著:掌田津耶乃
¥2,851 （2024/04/23 15:19時点 | Amazon調べ）
口コミを見る
Amazon
楽天市場
Yahooショッピング
クマじい

Amazon Kindle Unlimited でもNode.jsの本はいっぱいあるんじゃ！！

  • 技術書をたくさん読みたい！
  • 色々な技術を学びたい！
必見Amazon Kindle Unlimited
初回30日間無料体験があるので、どのような参考書があるか確認してみよう！

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ！
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります！

Fire 7 タブレット 16GB
口コミを見る
Amazon
楽天市場
Yahooショッピング
Fire HD 8 タブレット 32GB
口コミを見る
Amazon
楽天市場
Yahooショッピング
Fire HD 10 タブレット 32GB
口コミを見る
Amazon
楽天市場
Yahooショッピング

次回は、実際にWebAPIを作成していきますので、ぜひ参考にしてみてください！

あわせて読みたい
Node.jsとExpressでJSON形式でリクエスト・レスポンスできるWebAPIを開発してみよう！ 今回は、JavaScriptをサーバサイドで動かす事ができるフレームワーク「node.js」を使って、JSON形式でリクエスト・レスポンスができるAPIを作っていこうと思います！ も…
REST API 開発
Node.jsとExpreesの環境構築をしよう

この記事が気に入ったら
フォローしてね！

よかったらシェアしてね！
  • URLをコピーしました！

この記事を書いた人

tukuのアバター tuku

東京在住で20代のエンジニアです。
特に特技があるわけではありませんが、誰もが楽しくプログラミングができたらいいと思い、「teech lab.」を開設いたしました。

Enjoy Diaryという、ガジェットや雑貨を紹介しているブログもあります！
ぜひ、みてください！！

この著者の記事一覧へ

関連記事

目次