【Node.js入門】Node.jsアプリ 開発環境の構築方法をまとめ

[記事内には広告が含まれています]

こんにちは、現役エンジニアの inno_tech です。

Ubuntu上でNode.js Webアプリケーションの開発方法をお探しでしょうか?

本記事を見れば、Ubuntu上でNode.jsを使ったアプリケーションの開発環境が構築でき、Webアプリケーション開発をするためのプロジェクトが完成します。

本記事では、Ubuntu 20.04LTS上で動作確認しています。

もくじ

Ubuntu環境の準備

Ubuntu環境の作り方は、すでに別の記事でまとめているのでそれぞれ参照してください。

①Ubuntu マシンを用意する方法②WindowsのWSL2でUbuntuを利用する2パターンあります。

①Ubuntu マシンを用意する場合はこちら.

あわせて読みたい
【初心者はこれを見ればOK】Ubuntu 20.04 LTSのインストール手順を解説 Ubuntuのインストール方法を今回は、Ubuntu20.04LTS のインストール手順を解説していきます。 この記事を見ながら作業するだけで初心者でもUbuntu 20.04LTSを簡単にイン...

② WSL2上でUbuntu を利用する場合はこちら.

あわせて読みたい
【初心者向け】WSL2のインストール ~ 基本操作をまとめて解説 WSL2を使って、Windows上でUbuntuを使用する方法をお探しでしょうか? 本記事を読めば、Windows10上にWSL2をインストールし、Ubuntuを使用できるようになります。 WSL2...

Node.jsのインストール

Ubuntu上でNode.jsアプリを開発するためにはNode.jsのインストールが必要です。

Ubuntu上にNode.jsをインストールする方法は、こちらの記事でまとめているので参照してください。

あわせて読みたい
【Ubuntu版】Node.js インストール方法をまとめ UbuntuでNode.jsのインストール方法をお探しでしょうか? 本記事を読めば、UbuntuでNode.jsのバージョンを指定してインストールできるようになります。 本記事はUbuntu ...

プロジェクトディレクトリの作成

Node.jsがインストール出来たら、次はプロジェクトを開発するディレクトリを作成します。

今回は「sample-app」というプロジェクトを例に説明します。ターミナルを起動し、ディレクトリを作成します。

# ディレクトリを移動
cd [作成したいディレクトリ]

# ディレクトリ作成(プロジェクト名のフォルダーを作成)
mkdir sample-app

npm管理プロジェクトとして初期化

Node.jsアプリは npm でパッケージ管理をする

Node.jsアプリでは、npm(node package manager) と呼ばれるパッケージ管理の仕組みを使います。

この仕組みを使うことで、外部ライブラリ(パッケージ)の管理を簡潔にし、他の開発者への開発環境の共有も簡単になります。

Node.jsをインストールすれば npmコマンドも使えるようになってるよ

npmコマンドによる初期化

npm initというコマンドで package.jsonというファイルを生成し、npm管理プロジェクトとして初期化します。

# プロジェクトディレクトリ
cd [プロジェクトディレクトリ]

# 現在のディレクトリを npm管理プロジェクト として初期化
npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

(中略)

# node.jsプロジェクトの設定 をしていく
package name: (sample-app) sample-app  ## アプリケーション名 を入力
version: (1.0.0) 
description: xxxx.  ## アプリケーションの説明を記述
entry point: (index.js) server.js  ## アプリケーションの開始点となるファイル(プロジェクトの方針に合わせて設定)
test command:             ## 単体テスト用のコマンドを記述. (空白でOK)
git repository:           ## git repository URL (空白でOK)
keywords:                 ## キーワード (空白でOK)
author: inno-tech-life.   ## 作成者
license: (ISC)            ## ライセンス(プロジェクトの方針に合わせて設定)
About to write to /[your project directory]/package.json:

# package.json の中身が表示される(確認用)
{
  "name": "sample-app",
  "version": "1.0.0",
  "description": "xxxx.",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "inno-tech-life.",
  "license": "ISC"
}

# 問題なければ yes と入力.
Is this OK? (yes) yes

# この時点のディレクトリ構造
[Project Dir]
└── package.json

ここまでで開発環境の準備が整いました。次は javascriptファイル を作成し、動作確認を行います。

エントリーポイントとなるJSファイルを作成

npm init時に指定したエントリーポイント(プログラムの開始点)となるJavaScriptファイル server.jsを作成します。

プロジェクトディレクトリ直下server.jsという名前でファイルを作成し、以下のコードを記述します。

// ログを出力
console.log("初めてのnode.jsプロジェクト");

このファイルを実行するには、ターミナルから下記のように実行します。

# ディレクトリを移動
cd [Project Dir]

# server.js を実行
node ./server.js

# 実行結果
初めてのnode.jsプロジェクト

VSCodeを使用している場合、以下のように表示されます。

VSCode | server.jsの実行結果
VSCode | server.jsの実行結果

プログラムも準備できました。最後に、npm scripts を使いやすいようにカスタマイズする方法を説明します。

npmスクリプトのカスタマイズ

npm initの実行後に生成されるpackage.json内にはscriptsというキーがあります。このscriptsキーにコマンドを定義すると、npm run [コマンド名]という形でスクリプトを実行することができます。

node ./server.jsという処理をstart-app コマンドとして登録してみましょう。

{
  "name": "sample-app",
  "version": "1.0.0",
  "description": "xxxx.",
  "main": "server.js",
  "scripts": {
    "start-app": "node ./server.js"   // ここを変更
  },
  "author": "inno-tech-life.",
  "license": "ISC"
}

ターミナルからnpm run start-appと実行すると、node ./server.jsを実行した結果と同じ結果が得られます

cd [Project Dir]

# npm run [コマンド名]
npm run start-app

# 実行結果
> sample-app@1.0.0 start-app
> node ./server.js

初めてのnode.jsプロジェクト

これって何のために必要?

npmスクリプトの応用例

先ほどの例ではシンプルな内容でしたが、この npmスクリプトは 複数の処理を続けて記述したり、カンマで区切で複数個定義することも可能です。

したがって、実際のアプリ開発の場面では、環境変数を定義してからプログラムを実行する, 開発(デバッグ)時 と 本番時で実行コマンドを切り替える というように使われます。

{
  "name": "sample-app",
  "version": "1.0.0",
  "description": "xxxx.",
  "main": "server.js",
  "scripts": {
    // 環境変数を宣言してからプログラムを実行
    // 開発用
    "start-dev": "export NODE_ENV=development && node ./server.js",

    // 本番用
    "start-prod": "export NODE_ENV=production && node ./server.js",   
  },
  "author": "inno-tech-life.",
  "license": "ISC"
}

複雑な処理でもnpmスクリプトのコマンドだけ実行すればいいんだね、便利だなぁ。

以上で Node.jsアプリの開発環境 と 基本的なプログラムが完成しました。ここからReact や expressといったWebアプリケーションに必要な各種のフレームワークの使い方を学習していきましょう。

まとめ

今回のまとめです。

  • Ubuntuの準備方法 Node.jsのインストール方法, プロジェクトの作成方法を解説。
  • npmスクリプトでは開発で使用する便利なコマンドを自分でカスタマイズ可能。
  • 今回作成した開発環境を元に、各種フレームワークの学習を進めよう

2021年全国の本屋さんで最も売れた年間ベストセラー本が気になる方はこちら

参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!

この記事がイイねと思ったら、Twitterフォロー か  にほんブログ村のどちらかしてくれたら嬉しいよ!

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

よかったらシェアしてね!

コメント / ご要望

コメントする

goto
もくじ
閉じる