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

Node.jsとExpreesの環境構築をしよう
  • URLをコピーしました!

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

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

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

¥3,740 (2022/06/25 12:21時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥1,584 (2022/06/25 12:21時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
クマじい

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

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

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

¥9,980 (2022/06/23 23:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥15,980 (2022/06/24 09:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場

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

こんな方に見て欲しい内容です!!
  • 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は、アプリケーションの雛形を作るツールと捉えてもらえればいいと思います!

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

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を開発するための、準備としてインストール〜雛形アプリの生成まで実施しました。
コマンド数個で雛形ができるので、ぜひ活用してみてください!!

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

¥3,740 (2022/06/25 12:21時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥1,584 (2022/06/25 12:21時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
クマじい

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

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

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

¥9,980 (2022/06/23 23:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥15,980 (2022/06/24 09:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場

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

Node.jsとExpreesの環境構築をしよう

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

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

この記事を書いた人

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

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

目次
閉じる