はじめに
近年、フロントエンドでもバックエンドの開発経験・知識が求められている時代になっているおり、フロントとして市場価値を高める上でも意識いたいっすよね。
今まではJSを中心にVue,Reactなどを学んでいたのですが、今回はサーバーサイドのJS実行環境であるNode.jsを入り口にバックエンドを少しづつ学習していこうと思い、妥当な流れでNode.jsを技術選定しました。（phpとかrubyでもありかなと思いました。。）
- 今回は
Node.jsとは何か？ -
Node.jsでデファクトスタンダードのExpressとは？
以上を初学者向けにアウトプット&備忘録として執筆しました。
ちなみに今年2021年のstackoverflow survey 2021で人気のある言語技術でNode.jsは第６位でした。
思ったより上位したね
Node.jsとは
冒頭でもふれたように、サーバーサイドのJavaScript実行環境のこと。
また、大量の同時接続をさばけるネットワークアプリケーションの構築を目的として設計されたJavaScript環境です。
特徴
-
フロントからサーバー部分まで
JavaScriptの記述ができる。 -
軽量なWebサーバーの構築ができる複数人が利用してもCPUの負荷軽減。（重たくならない。）
-
非同期処理により、大量アクセスに耐え高速処理の実現。
-
共有レンタルサーバーがなく、VPSを使用をインストールする必要がある。
※VPS（仮想プライベートサーバー： Heroku, Google App Engine, ロリポップなど）
基礎知識
まず使用する上で最低限の知っておきたい以下の三つからご説明します。
nvm
Node Version Managerの略。Node.jsのバージョンを切り替える時に使用するツール。
-
nvmコマンドを使用することで、インストール可能なNode.jsのバージョン確認、インストールや使うのNodeの切り替えを行うことができます。
node_module
様々なモジュールが集められたフォルダのこと。
- 複数のモジュールを一つにまとめたのが
パッケージ（package）です。また、ここで言うモジュール（module）はJSで記述されたファイルで、再利用できるようにしたファイルのことを指します。
npm
Node Package Managerの略。Node.jsのパッケージを管理するためのツール。
- 正確には
node_moduleを管理するためのツールです。npmコマンドを使用することで、パッケージのインストールやインストールしたものを確認することができます。インストール先はpackage.jsonファイルになり、インストールしたパッケージのバージョン管理をpackage-lock.jsonが担っています。
📌ここまで確認しておきたいところ
ここは僕がNode.jsを学習する上で思ったところですが、サーバー側のNode.jsと呼ぶくらいだから何か特別な書き方をするのではないかとちょっぴり警戒をしていましたがあくまでJavaScript言語になりますので基本的には変わりません。
ただ、サーバーサイドとして効率よく実装する時に必要なフレームワークやライブラリを使用するのであまり見慣れないメソッドがたびたび出てきます。ここはフロント部分でも同じことが言えますね。
（初めてのサーバーサイド学習なので謎の先入観がありました。💦）
様々なライプラりやプラグインが数多くありますが、今回は王道なNode.jsのフレームワーク Expressについてご説明します。
Express
インストール方法
npm install express --save
特徴
独自のサーバー開発や簡単にGETやPOST通信などを実現することができます。
使い方
今回は簡単にルーティングとサーバーの立ち上げ方法についてやっていきます。
var express = require('express');
var app = express();
get('/', function(res, req) {
res.send('最近驚いたのは、なまっていたこと。');
});
app.listen(3000);
- まず、一行目の
require()はモジュールを読み込む時に使用する。今回はExpressを使用するので、require('express')で読み込む。 - 二行目で読み込んだモジュールを初期化（インスタンス化）するため、変数
appへ代入し、今回必要とするメソッド（GETやPOSTなど）を使えるようにします。
そして、以下がExpressが活用されている場面です。
get('/', function(res, req) {
res.send('最近驚いたのは、なまっていたこと。');
});
app.listen(3000);
-
ここの３〜５行目で、
get()内の第一引数で指定した/にリクエスト処理をします。そして第二引数の関数内でres.send()によって、レスポンスにsend()を使用することでブラウザ上にテキストを表示すると言った流れになります。
（今回は、ブラウザ上に「最近驚いたのは、なまっていたこと」が表示されます。）
言い方を変えれば、サーバー上の/パスに移動した時にテキストが表示されます。 -
最後に
listen()で第一引数にポート番号を指定することでサーバーの起動ができます。今回は、ポート番号3000を指定しているのでコマンドを実行した時に、http://localhost:3000/へアクセスすれば、テキストが表示されます。 -
コマンドについては下記を実行してWebサーバーを起動させます。
node app.js
このように、記述することで内容は薄いですがルーティングとサーバーの構築をすることができました。
今回は、/で表現していますが、下記のように
get('/hogehoge', function(res, req) {
res.send('hogehoge');
});
/hogehogeを指定しルーティングすることでブラウザ上に、hogehogeと表示されます。
参考記事
https://expressjs.com/
https://github.com/nvm-sh/nvm
感想
今回はNode.jsの特徴を中心にまとめました。まだまだ、API開発むけのプラグインやMVCに向いているフレームワークなど様々あるのでどんどん積極的に使用していいきたいところです。Expressについてもまだまだ知見が浅いのでまた踏み込んだ内容をアウトプットしていきたいです！！