フロントエンドエンジニアのNode.js基礎学習〜 

# はじめに
近年、フロントエンドでもバックエンドの開発経験・知識が求められている時代になっているおり、フロントとして市場価値を高める上でも意識いたいっすよね。

今までは`JS`を中心に`Vue`,`React`などを学んでいたのですが、今回はサーバーサイドの`JS`実行環境である`Node.js`を入り口にバックエンドを少しづつ学習していこうと思い、妥当な流れで`Node.js`を技術選定しました。（phpとかrubyでもありかなと思いました。。）

- 今回は`Node.js`とは何か？
- `Node.js`でデファクトスタンダードの`Express`とは？

以上を初学者向けにアウトプット&備忘録として執筆しました。

ちなみに今年`2021年`の[stackoverflow survey 2021](https://insights.stackoverflow.com/survey/2021#technology)で人気のある言語技術で`Node.js`は第６位でした。
思ったより上位したね

#Node.jsとは

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924294/e03081be-98bb-67d9-b572-4b7292734f78.png" width=60% />

冒頭でもふれたように、サーバーサイドの`JavaScript`実行環境のこと。

また、大量の同時接続をさばけるネットワークアプリケーションの構築を目的として設計された`JavaScript`環境です。


## 特徴

- フロントからサーバー部分まで`JavaScript`の記述ができる。
- 軽量なWebサーバーの構築ができる複数人が利用してもCPUの負荷軽減。（重たくならない。）
- 非同期処理により、大量アクセスに耐え高速処理の実現。

- 共有レンタルサーバーがなく、VPSを使用をインストールする必要がある。
※VPS（仮想プライベートサーバー： Heroku, Google App Engine, ロリポップなど）

#基礎知識

まず使用する上で最低限の知っておきたい以下の三つからご説明します。

### nvm
`Node Version Manager`の略。Node.jsのバージョンを切り替える時に使用するツール。

[nvm-公式Github](https://github.com/nvm-sh/nvm)

- `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
![express-facebook-share.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/924294/d2c30f50-ab28-a89e-4f78-5465ff898679.png)


[Express-公式ドキュメント](http://expressjs.com/)

インストール方法

```
npm install express --save
```

## 特徴
独自のサーバー開発や簡単にGETやPOST通信などを実現することができます。

## 使い方

今回は簡単にルーティングとサーバーの立ち上げ方法についてやっていきます。

``` javascript:app.js
var express = require('express');
var app = express();

get('/', function(res, req) {
  res.send('最近驚いたのは、なまっていたこと。');
});

app.listen(3000);

```

- まず、一行目の`require()`はモジュールを読み込む時に使用する。今回は`Express`を使用するので、`require('express')`で読み込む。
- 二行目で読み込んだモジュールを初期化（インスタンス化）するため、変数`app`へ代入し、今回必要とするメソッド（GETやPOSTなど）を使えるようにします。

そして、以下が`Express`が活用されている場面です。

```javascript:app.js
get('/', function(res, req) {
  res.send('最近驚いたのは、なまっていたこと。');
});

app.listen(3000);
```
- ここの３〜５行目で、`get()`内の第一引数で指定した`/`にリクエスト処理をします。そして第二引数の関数内で`res.send()`によって、レスポンスに`send()`を使用することでブラウザ上にテキストを表示すると言った流れになります。
（今回は、ブラウザ上に「最近驚いたのは、なまっていたこと」が表示されます。）
言い方を変えれば、サーバー上の`/`パスに移動した時にテキストが表示されます。

- 最後に`listen()`で第一引数にポート番号を指定することでサーバーの起動ができます。今回は、ポート番号`3000`を指定しているのでコマンドを実行した時に、`http://localhost:3000/`へアクセスすれば、テキストが表示されます。

- コマンドについては下記を実行してWebサーバーを起動させます。

```
node app.js
```

このように、記述することで内容は薄いですがルーティングとサーバーの構築をすることができました。
今回は、`/`で表現していますが、下記のように

```javascript:app.js
get('/hogehoge', function(res, req) {
  res.send('hogehoge');
});
```
`/hogehoge`を指定しルーティングすることでブラウザ上に、`hogehoge`と表示されます。

## 参考記事
[https://expressjs.com/](https://expressjs.com/)
[https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm)

##感想
今回はNode.jsの特徴を中心にまとめました。まだまだ、API開発むけのプラグインやMVCに向いているフレームワークなど様々あるのでどんどん積極的に使用していいきたいところです。`Express`についてもまだまだ知見が浅いのでまた踏み込んだ内容をアウトプットしていきたいです！！