Node.jsとは
Node.jsとは、JavaScriptの実行環境の一つです。
本来、JavaScriptはフロントエンド言語です。Webページ上の要素にアクセスし、ユーザの操作をトリガーとしたHTML要素の動きを実現できます。「このボタンをホバーしたら、クリックしやすいようにボタンが大きくなる」等の動きがこれに当たります。
更にNode.js環境を用意することで、JavaScriptにバックエンドの処理も行わせることができます。例えば、サーバに配置されたファイルの読み書きやDBとのアクセスがJavaScriptで出来るようになります。
【参考】:公式-Node.jsとは
本記事は、
「JavaScriptは書いたことあるけど、Node.jsで何が出来るのか分からない」
「チーム開発でNode.jsを使うことになったけど、何からやればいいか分からない」
「Node.jsを自走して学習していきたいが、どうやればいいか分からない」
といった方向けの記事です。
Node.jsで実現出来ることをお話した後に、実際にNode.jsを使うための手順、自走して学習していく方法を解説します。
Node.jsで出来ること
ここでは、Node.jsを使うと我々エンジニアは何を実現出来るのかについて解説します。
・単体でWebアプリケーションを作ることができる
Node.jsはWEBサーバとしての役割も担います。つまり、nginxのような通常WEBサーバとして用いられるソフトウェアを使うことなく、Node.jsだけでサーバを起動しHTTP通信を行うことができます。
また、Node.jsを用いることでブラウザ上でのHTML操作だけでなく、DBとのデータ連携が可能になることをすでに述べました。このことから、Node.js環境でWEBアプリケーションを作成することができます。
・モバイルアプリケーションが作れる
Node.jsを導入することで、スマホアプリ開発用フレームワークであるReact Nativeを動作させることができます。React Nativeの開発言語はJavaScriptであるため、動作させるにはJavaScriptの実行環境であるNode.jsが必要です。
・新仕様のJavaScriptを古いブラウザでも動作させられる
JavaScriptはアップデートが年々行われている言語であり、そのためバージョンによってはコードの記述方法が一部異なる場合があります。特に、JavaScriptのバージョン「ES2015」以降はオブジェクト指向での記述が可能になったりと、大幅な仕様変更がありました。
バージョンアップによって、古いブラウザ(Internet Explorer11など)がその仕様に適応できない場合があります。
これを防ぎ、バージョンアップしたJavaScriptと古いブラウザの互換性を保証するためにJavaScriptコードの変換を行う必要があります。これを実現するツールのうち代表的なものに「Babel」があり、その動作環境としてNode.jsがよく選択されています。
・最新のフロントエンド技術を導入できる
フロントエンドの技術として、TypeScriptやReact、Vue.jsといった言葉を聞いたことはあるでしょうか。これらを導入する際の実行環境としてNode.jsはよく選択されています。
選択されている理由として、上記で挙げた技術では、ブラウザ上でのDOM操作だけではなく、ソースコードのコンパイルやファイルインストールといったサーバサイド処理が必要になってくることが挙げられます。そのため、JavaScriptをサーバサイドでも扱えるNode.jsが実行環境として適しているのです。
Node.jsのインストール方法
MacOS環境でのNode.jsインストール方法をこちらで解説します。以下ではHomebrewを用いてインストールを進めていきます。
nodenvのインストール
nodenvとは、Node.jsのパッケージ管理ツールです。複数プロジェクトで異なるバージョンのNode.jsを利用したい場合に重宝します。
ターミナルを開いて、下記3つのコマンドを順番に実行して下さい。
brew install nodenv
eval "$(nodenv init -)"
curl -fsSL https://github.com/nodenv/nodenv-installer/raw/master/bin/nodenv-doctor | bash
それぞれ、「nodenvをインストールする」「パスを通す」「nodenvがインストールできているか確認する」を意味するコマンドです。
3つめのコマンドに対して下記の表示があれば、正しくnodenvがインストールできています。
Checking for nodenv shims in PATH: OK
Node.jsのインストール
下記の2コマンドを順に実行します。{バージョン番号}には、インストールしたいNode.jsのバージョンを記載します。
nodenv install {バージョン番号}
nodenv versions
インストールしたnodeのバージョンが2つめのコマンドで表示されれば、無事にNode.jsがインストールできています。
さらにnodenvでは、ディレクトリごとに使うNode.jsのバージョンを指定できます。プロジェクトで利用したいディレクトリ配下に移動して、下記の2コマンドを実行してください。
nodenv local {バージョン番号}
node -v
インストールしたいバージョンが表示されれば、インストール完了です。
ローカルでWebアプリを立ち上げるまで
ここまでで、ローカルPCにNode.jsをインストールすることができました。では、実際に簡単なWEBアプリを作成してみましょう。
以下の作業は、プロジェクト用に作成したディレクトリ配下で行ってください。
必要なパッケージをインストール
Node.jsと組み合わせてよく使われるフレームワークである「Express」と、テンプレートエンジンである「ejs」を導入します。下記コマンドを実行してください。
npm install express ejs
ファイル作成
アプリケーションの起動に必要なファイルを作成していきます。
プロジェクトフォルダ直下に「app.js」ファイルを作成してください。ファイルには下記のコードを記載しましょう。
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.render('hello.ejs');
});
app.listen(8080);
このコードは「起動ポートが8080であること」「リンク『/』へのリクエストが来た際にhello.ejsを出力すること」を表します。
次に「views」というフォルダを作り、その中に「hello.ejs」という名前のファイルを作成して下さい。ファイルには下記のコードを記載しましょう。
<p>Hello World</p>
動作確認
ここまで準備出来たら、ターミナルから下記コマンドを実行してください。
node app.js
ブラウザから「http://localhost:8080 」にアクセスし、画面にHello Worldが表示されることを確認してください。表示されていたら、起動が確認できたことになります。
Node.js学習用のWEBサイト
本記事ではNode.jsを用いて、固定の文字をHTMLで表示するだけの簡易アプリを作成する方法を紹介してきました。実際のアプリケーションではこれに加えDBとの連携、セッションの管理といった機能を実装することが多いです。
これらの処理を含め、実務レベルのWEBアプリケーションを作るためには、皆さんがご自身で学習し続けることが重要です。ここではそういった方のために、学習の助けになるWEBサイトをご紹介します。
Node.js公式サイト
Node.jsの公式サイトには、各種メソッドの使用方法が掲載されています。
全て英語で提供されているのが難点ですが、既にJavaScriptに慣れている方にとっては使い方をイメージしやすく、実装に行き詰まった時に参考になるサイトかと思います。
【参考】ドキュメント | Node.js
Progate
プログラミング学習サイトであるProgateでは、Node.jsを用いたアプリケーションを作る学習コースが存在します。
本記事で紹介した簡単なHTML表示だけでなく、データベースと連携することを前提としたアプリケーションを作成する手順が記載されています。
ある程度Node.jsの概要が分かった方で、手を動かしてアプリを作ってみたい方にはとてもオススメの学習サイトです。
【参考】:Progate
Udemy
Udemyでは、数多くのNode.jsに関する動画教材が提供されています。Progateではローカル環境での動作確認までしか手順を提供していませんが、Udemyの一部の教材では実際にアプリをデプロイする手順も提供してくれています。
高額な教材が一部あるのが難点ですが、Udemyは定期的に90%オフのタイムセールが開催されています。次のセール時期を確認してお得に教材を入手してみてください。
【参考】:Udemy Node.jsコース
Node.jsを使う現場は今後ますます増える
本記事ではNode.jsを使ってできることを解説した後、インストールして簡易アプリを使うまでの手順を紹介しました。追加学習で使える学習サイトも記載しています。
Node.jsはプロジェクトにTypeScriptやReactといったフロントエンド技術を導入する際によく選択される実行環境であることから、将来性は高いと考えられます。JavaScriptを習得済みのエンジニアの方は、是非今のうちにNode.jsを習得してみてください。今後の活躍の場が広がるでしょう。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから