さて、Expressとは一体何でしょうか？
調べてみました。

Expressとは

Expressの公式サイトを見てみると以下のように紹介されています。

Express は、Web アプリケーションとモバイル・アプリケーション向けの一連の堅固な機能を提供する最小限で柔軟な Node.js Web アプリケーション・フレームワークです。

Express公式サイトより

Node.jsのフレームワークなのですね。
Webアプリケーションとモバイル・アプリケーションで色々できちゃう凄いやつらしいです。

ミドルウェアの積み重ね

Expressの基本はミドルウェアの積み重ねであり、各ミドルウェアは原則的に3つの引数を持ちます。

• リクエストの情報が入ったオブジェクト
• レスポンスを返すためのオブジェクト
• ミドルウェアの処理を中断して次のミドルウェアに処理を渡すための処理

クライアント（ブラウザやスマホアプリ等）からのリクエストをExpressのサーバーで受け取った時、Expressの各ミドルウェアはその内容を解析して決まった形式のオブジェクトに展開します。

デフォルトのExpressサーバーはリクエストを受け取ってレスポンスを返すだけの最低限機能しか付いていません。
別途Express用に開発されたミドルウェアを追加することで、フォームの解析・バイナリファイルの受け取り・セッションやクッキーの処理等の機能を追加することができます。

つまり、Expressで何かの処理を行いたいときはミドルウェアを追加すれば良いのです。
ミドルウェアの処理はコードの上から下へ順番に行われるのでコードの順番を間違えると期待通りに動いてくれないので注意が必要です。

Expressのコードを見てみよう

前回、Expressを使ってサーバーを起動しました。
そのときの app.js は以下の通りです。

// app.js
var http = require('http');
var express = require('express');

var app = express();
 
app.get("/", function(req, res){
  return res.send("HelloWorld");
});
 
var server = http.createServer(app);
server.listen(3000); 

2行増えたのですが、Node.jsだけのときと比べて変わった部分は以下でしょう。

 var express = require('express');
 var app = express();
 
 app.get("/", function(req, res){
   return res.send("HelloWorld");
 }); 

Expressを使用できるようにする

まずはこちらの1行です。

 var express = require('express');

Node.jsでは require という構文を指定してパッケージ名を指定することで外部のパッケージを使用できるようになると前回学びました。

‘express’ を指定して外部のパッケージであるExpressを使用できるようにしています。

Expressアプリケーションを作成

var app = express();

実はこれをみたとき「require(‘express’); をそのまま app に入れているだけだじゃね？なんなら var app = require(‘express’); でも良いじゃね？」と勘違いしました。
当然 var app = require(‘express’); ではエラーが吐き出されて動いてくれません。

この1行は express() を実行することでExpressアプリケーションを作成し、アプリケーションオブジェクトをapp変数に格納しています。
こうすることでGETメソッドやPOSTメソッドを使えるようになります。

受送信をする

app.get("/", function(req, res){
   return res.send("HelloWorld");
 }); 

Appの後に続く get() はミドルウェア関数が適用されるHTTPメソッドです。

指定されたパス（1つ目の引数 “/“)にHTTP GET要求があったときに2つ目の引数で指定されたコールバック関数を実行します。
今回は res.send(“HelloWorld”); でHTTPレスポンスを送信します。

つまり、ブラウザにURLを入力してアクセスした（HTTP GET要求があった）ら「HelloWorld」がHTTPレスポンスで返されてブラウザに「HelloWorld」と表示されるというわけです。

あとがき

Expressの公式サイトにExpressについての説明やメソッドの使い方が詳しく書かれていました。
もっと詳しく学びたいときはこちらをご覧になると良いでしょう。

ソースコードって英字でパーっと書かれていて難しく複雑に見えますよね。（英語が苦手な人は特に！）
膨大なソースコードに出会うと吐き気を催して拒否反応を起こしてしまいますよね。

ですが、1行ずつきちんと読んでそれぞれのコードの意味がわかってくると今まで知らずにいたこと自体が勿体ないことだったと気付かされました。
食わず嫌いみたいなものですね。

勇気を持って「えいや！」と一歩踏み込むと新たな世界が開てくる。
新しいプログラミング技術を習うことはそんな感覚に近いと思いました。

関連ページ

パッケージの導入

Expressパッケージを導入します。

$ npm install express --save

成功するとこのように表示されます。

 npm notice created a lockfile as package-lock.json. You should commit this file.
 npm WARN express-app@1.0.0 No description
 npm WARN express-app@1.0.0 No repository field.
 
 + express@4.17.1
 added 50 packages from 37 contributors and audited 126 packages in 1.606s
 found 0 vulnerabilities 

WARNと出ているのはpacket.jsonに情報を入れていないからなので今回は無視します。
次はpackage.jsonにExpressが追加されたか確認してみましょう。

 {
   "name": "express-app",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
     "express": "4.17.1" //<— 追加されている
   }
 } 

このように dependencies という項目が追加され、express がそのバージョンとともに記録されます。

ExpressでWebサーバーを作成

ここでExpressを使用したWebサーバーを作成してみます。
Expressの公式サイトにも app.js のサンプルがありましたのでそのままコピペします。

 // app.js
 var express = require('express')
 var app = express()
 
 app.get('/', function (req, res) {
   res.send('Hello World!')
 })
 app.listen(3000) 

ES6で書くとこんな感じです。
こちらのほうがスッキリしています。

 // app.js
 const express = require('express')
 const app = express()
 
 app.get('/', (req, res) => res.send('HelloWorld'))
 app.listen(3000) 

サーバーを起動します。

 $ node app.js

ブラウザに http://localhost:3000/ を入力してアクセスすると以下のように表示されました！

あとがき

Expressを使うときは http パッケージを指定しなくてもHTTP通信ができちゃうのですね。
これってExpressの中にいろいろ入っているからなんでしょうね。

また、get や send で書いているので直感的にわかりやすそうです。
次は1行ずつコードを見ていきたいと思います。

関連記事

 var http=require('http');
 var server = http.createServer(function(req, res) {
   res.writeHead(200, {'ContentType': 'text/plain'});
   res.end('HelloWorld');
 });
 server.listen(3000); 

パッケージを指定して使えるようにする

まずは最初のの1行。
Node.jsでは require という構文を指定してパッケージ名を指定することで外部のパッケージを使用できるようになります。

 var http=require('http');

Node.jsで使用するパッケージには主に2種類あり、Node.js本体の機能として利用できるモジュールと外部のモジュールです。

前者はHTTPやファイルへのアクセスなどのOSの機能を使用するものがメインで、後者はExpress等の高度な機能を利用するためのものです。
Node.jsに依存しているものもあれば、ブラウザと共通で利用できるものもあります。

ここで使用している http は前者のNode.js本体の機能であり、OSのHTTP通信を使うための機能にNode.jsからアクセスするためのものでした。
これを使用してHTTPを使用するサーバーを立ち上げたり、外部のサーバーにHTTPリクエストを送信するHTTPクライアントとしての機能を構築することもできます。

簡単にいうと、 http を使うことで自分のWebサイトをネット上に更新したり、フォームなどからデータを送受信したりすることができるのです。

“http” を使ってサーバーを作成する

指定したパッケージを “http” を実際に利用してサーバーを作成しているのが以下のコードです。

var server = http.createServer( サーバー側の処理 );

httpのメソッドである .createServer()を使ってHTTPリクエストを待機するWebサーバーを構築していきます。

.createServer()でWebサーバーのインスタンスを作成し、引数にはヘッダー情報や表示するコンテンツを設定する等様々な処理を記述することになります。
一般的に引数には、 req と res という2つの引数を持つ無名関数を渡して処理を記述しています。

 var server = http.createServer(function(req, res) {
   // ここに処理を記述する
 }); 

createServer() 関数は、HTTPリクエストを受信するたびにカッコ内の関数が呼び出され、そのアクセスの内容に応じて処理の中身を変えることができます。
リクエストに関する情報は req に入っているので、必要に応じて適宜中身を参照します。

   res.writeHead(200, {'ContentType’: 'text/plain'});
   res.end('HelloWorld');

res の各メソッドに情報を渡すことで、Webサーバーを構築することが可能です。
この例では res.writeHead() でヘッダを記述して、 res.end() で具体的なレスポンスを指定しています。

つまり、正常にレスポンスが返されたことを示すステータスコードの200を指定して、コンテンツタイプには単純なテキストファイルであることを示す ‘text/plain’ を指定しています。

このように作成したサーバーのインスタンスを server という変数に確保しました。

特定のポートを指定してサーバーを起動する

実際にPCの特定のポートでサーバーとして起動するには .listen() というメソッドを呼び出します。
このメソッドではサーバーが利用するポート番号を指定する必要があります。
今回は3000番コードを指定しています。

server.listen(3000);

まとめ

Node.jsでWebサーバーを作成する時は以下のようになります。

1. http（SSLを使用するときはhttps）を読み込む
2. サーバーのインスタンスを作成
3. 特定のポートでサーバーを起動してリクエストを受け待つ

あとがき

レスポンスヘッドを任意に設定できるというのはすごいですね。
仕事でバックエンドエンジニアがレスポンスヘッドの設定をどうのこうのって言っていましたが、きっとこんな感じで設定しているのでしょう（きっとNode.jsではない）

ステータスコードも設定できるのでエラーコードが返ってきたときの動作をテストしたい時にすごく便利だと思いました。

まだ完全に理解しておらず、漠然としかイメージできていませんが、これから学習していくうちに理解が深まるだろうと期待しています。

関連記事

初期化

まず、空のディレクトリを用意してその中に入ります。

$ mkdir express-app
$ cd express-app/

以下のコマンドを打ちます。

$ 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.
 
 See `npm help json` for definitive documentation on these fields
 and exactly what they do.
 
 Use `npm install <pkg>` afterwards to install a package and
 save it as a dependency in the package.json file. 

続いていくつかプロジェクトの情報について入力します。
ここでは練習なので特に何も入力せずリターンキーを押しておきます。

 package name: (express-app) 
 version: (1.0.0) 
 description: 
 entry point: (index.js) 
 test command: 
 git repository: 
 keywords: 
 author: 
 license: (ISC)  

入力し終えたら最後に作成される package.json の内容を確認します。

  {
   "name": "express-app",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "",
   "license": "ISC"
 }  
 
 Is this OK? (yes)  

最期にOKかどうか問われるので問題がなければリターンキーを押して終了です。

Webサーバーの本体となるJavaScriptファイルを作成する

package.json を基にしてJavaScriptのWebサーバーを作成します。
まず作成するのがWebサーバーのエントリポイント（最初に起動するプログラム）となる app.js です。

$ touch app.js

テキストエディタを使用して app.js を編集します。

以下の6行を入力してください。

var http=require('http');
var server = http.createServer(function(req, res) {
   res.writeHead(200, {'ContentType’: 'text/plain'});
   res.end('HelloWorld');
});
server.listen(3000); 

わずか6行のコードですが、これでWebサーバーとして機能します。
何だか不思議ですね！

ここでコマンドを打ってみます。

$ node app.js 

サーバーが起動されて新しくコマンドを入力できない状態になりました。
これはNode.jsのプロセスが新しく起動して、HTTPリクエストを待ち受ける状態になっているのです。
Webブラウザで http://localhost:3000/ にアクセスしてみると、以下のように表示されました。

これでローカルで動作しているWebサーバーにアクセスできました！

次回は app.js に入れた6行のコードについて1つずつ見ていきたいと思います。

// component.stories.js
 storiesOf('Store', module)
   .add('The Component, () => ({
     components: { TheComponent },
     template: '<the-component />'
   })) 

そこでStorybookでもVuexが使えるようにしました。

設定

// .storyobook/config.js
 import Vue from 'vue'
 import Vuex from 'vuex' // <— 追加
 
 import { configure } from '@storybook/vue'
 import { action } from '@storybook/addon-actions'
 
 Vue.use(Vuex) // <— 追加
 
 // 以下略 

//  component.stories.js
 storiesOf('Store', module)
   .add('The Component, () => ({
     components: { TheComponent },
     template: '<the-component />',
     store: new Vuex.Store({ // <— Store モックを追記
       modules: {
         myData: {
           namespaced: true,
           state: {
             data: {
               message: 'ストアのデータだよ！'
             }
           },
           getters: {
             data: state => state.data
           }
         }
       }
     })
   })) 

以上です。

Storeモックを作ってあげることでStorybookでも正常に使えるようになりました。

あとがき

Nuxt.js を使った Storybook の事例や参考ページが少なくて非常に苦労しています。
ググるたびにReactの参考ページがたくさん表示されて「Reactにすべきだったか…」と心が折れそうになりました。

しかし、できなかったことができるようになると快感ですね。

• Node.jsのプロジェクトを新規作成する
• Node.jsのプロジェクトに外部のパッケージを追加する
• npmのサブコマンドとして様々な操作をワンライナーで実行する

Node.jsのプロジェクトを新規作成する

$npm init

とコマンドを入力すると package.json が作られます。
Node.jsのプロジェクトが依存するライブラリの情報がこの package.json に集約されます。

Node.jsのプロジェクトでは node_module というフォルダにインストールした外部ライブラリがまとめてインストールされます。
これは数十MB以上の容量になることがあります。

特に他の人が作成したプロジェクトをコピーして手元で動かすときに、直接この中身をコピーするのはとても大変です。
そのため、Node.jsでは package.json にまとめて依存する外部のパッケージとそのバージョンを記述しておき、実際にアプリケーションを動かす段階になってから npm install とコマンドを入力して、 package.json に書かれた外部ラリをまとめてインストールするやり方が一般的です。

GitHubには node_module を省いたプロジェクトをホスティングするのが一般的です。

他の人がこのプロジェクトデータをぷるしたときに、 npm install とコマンドを打つだけで全く同じ環境を作ることができます。

$npm install

Node.jsのプロジェクトに外部のパッケージを追加する

$npm install [package]

のように、パッケージ名を指定してコマンドを打つことで 導入できます。

Expressを導入したいときは

$npm install express

と打つだけです。

さらにバージョンを指定することもできます。
@をパッケージ名の次に追加し、続けてバージョンを追記するだけです。

$npm install express@4.17.1

導入の際、 –save オプションをつけることで、package.json の dependencies に導入したパッケージとそのバージョンが追加されます。
そうすることであとで package.json から必要なモジュールをチェックしたり、再導入することが容易になります。

あとがき

この辺は仕事でよく使っています。

または

と入力して必要なパッケージを追加しています。

また、他の人が作ったプロジェクトを編集したい時も

で全く同じ環境をすぐに作れるのでとても便利で楽チンです。

関連記事

nodeコマンド

コマンドラインで node を使うことでNode.jsのコードを実行できます。
Nodeコマンドは対話型実行環境（REPL）であり、初心者がNode.jsの操作に慣れるのに便利です。

$ node

するとJavascriptのコードを入力して1行ずつ実行することができます。

  > 1+1
 2 

もちろん変数を使うこともできます。

 > var a=2
 > a
 2
 > a*2
 4 

実際にNode.jsをWebサーバーとして使うときはすべての処理を1つか複数のテキストファイルに分けて、そのファイルをnodeコマンドの後に続けて指定することで実行します。
app.jpを用意して下記の方に保存してください。

 var a,b,c;
 a=1;
 b=2;
 c=3;
 
 console.log(a*b);
 console.log(b+c);
 console.log(c-a); 

これを実行します。

node app.js

すると、このように計算結果が出力されました。

2
5
2 

Node.jsはファイルから実行すること、1行ずつコードを入力して実行すること、どちらも可能になっています。

初心者の段階では1行ずつコンソールから実行してNode.jsに慣れていき、ある程度習熟したらファイルから実行するという流れが良いでしょう。

あとがき

nodeコマンドが使えることを今まで知りませんでした…。
npmコマンドしか使っていなかったので軽い衝撃を覚えました。

Nodeコマンドを使ってどんなすごいことができるのかまだわかりませんが、単純な計算や処理を行うのにnodeが使えて便利だと思いました。

• PC表示なら普通にページ遷移する
• SP表示ならページ遷移しないで何らかの処理を行う

…をやりたいと思いました。

しかも幅のサイズによってCSSでデザインを使い分けているため、できれば1つの nuxt-link でPCとSPで違う処理ができるようにしたかったのです。

問題点

nuxt-link で event.preventDefault() が使えない。

愕然としましたね。

解決策

 <template>
     <nut-link
       to=“/hoge”
       @click.native.prevent="trigger"
       event=""
       >リンク</nuxt-link
     >
 </template>
 
 <script>
 export default {
   name: ‘Hoge’,
   methods: {
     trigger(event) {
       if (window.matchMedia('(max-width: 599px)').matches) {
         // 何らかの処理
       } else {
         // 遷移
         this.$router.push({ path: event.target.pathname })
       }
     }
   }
 }
 </script> 

解説

nuxt-linkに event=“” を入れることでリンクを無効にすることができます。
そしてメソッドに trigger をつくり、スマホかPCかジャッジしてそれぞれの処理をするようにしています。

@click=”trigger” と入れるだけではクリックしてもメソッドが呼ばれません。
@click.native と “.native” をつけることでクリックした時にメソッドが呼ばれるようになります。

あとがき

数時間調べて答えが見つからず、諦めて力技で解決しました。
もっとクールな方法があれば教えてください…

今回はNode.jsをパソコンに導入するところまで学習しました。
わたしが使っているパソコンはMacOSであるため、MacOSを使う前提でまとめています。

ndenvのインストール

プロジェクトによって使用するNode.jsのバージョンが違うので、バージョン管理ができるように ndenv を使います。
まずはそれをインストールします。

ここの INSTALL に書いてあるコマンドを4つ実行すればインストール完了です。

 $ git clone https://github.com/riywo/ndenv ~/.ndenv $ echo 'export PATH="$HOME/.ndenv/bin:$PATH"' >> ~/.bash_profile $ echo 'eval "$(ndenv init -)"' >> ~/.bash_profile $ exec $SHELL -l 

また、denv install が使えるようにプラグインである node-build をインストールします。

$ git clone https://github.com/riywo/node-build.git ~/.ndenv/plugins/node-build/

Node.jsをインストール

続いてNode.jsをインストールします。

 # 適当なディレクトリを作成してその中に移動します。
 $ mkdir hogeta
 $ cd hogeta
   
 # インストールできるバージョンを確認します。
 $ ndenv install -l
   
 # nodejs の特定のバージョンをinstall します。 ここでは現時点で最新の v10.16.3をインストールしてみましょう。
 $ ndenv install v10.16.3
   
 # つかうnodejsのバージョンを指定します。
 $ ndenv local v10.16.3
   
 # 上のコマンドを実行すると、このディレクトリでは node v5.9.0 が使われるようになります。
 # 該当ディレクトリ内に `.node-version` と言うファイルが作成されて、その中にバージョンが記載されます。
 # 確かめます
 $ node
 > process.version
 'v10.16.3'
 > Ctrl+D
   
 # 使いたいローカル環境で使いたいバージョンを設定します。（使いたいバージョンが違う時）
 $ ndenv local v6.11.3 

今までにインストールしたNode.jsバージョンの一覧を確認する

 $ ndenv versions 

Node.jsバージョンをアンインストール

 $ ndenv uninstall v8.4.0 

node  コマンドが使えない時の対処法

Node.js v10.16.3 がインストールされていますが、このままではnode コマンドは使用できないはずです。

 $ node -v ndenv: node: command not found   The `node' command exists in these Node versions:   v10.16.3 

これを解消するにはグローバル環境にセットする必要があります。

 $ ndenv global v10.16.3 

これで、node コマンドが使用できるようになります。

 $ node -v v10.16.3 

npmも同時に利用できるようになります。

$npm -v

あとがき

ここまでは仕事で使っているので難なくクリアしました。
初めてNode.jsをインストールしたとき、nodeコマンドが使えなくて焦った記憶があります。
今となっては笑い話です。ははは

当たり前のようにNode.jsを使ってコーディングしたりしていましたが、ある日ふと「Node.jsの正体をわたしは知らない」と気づきました。

というわけで、Node.jsについて調べて憧れの先輩のように使いこなせるようになろう！！と思い立った次第です。
わたしなりに調べてまとめたものを備忘録に残します。

Node.jsとは

Node.jsは簡単に言うと「C++で記述された高速なJavaScriptインタプリタ」です。
JavaScriptで動作するサーバ環境を用意することができます。

つまり、JavaScriptの知識だけでWebサーバーを立ち上げたりすることが出来ちゃうのです！

少し前まではWebサーバを立ち上げるためにPHPやPerlといったサーバサイドスクリプト言語の知識が必要でした。
ところが、Node.jsの登場でサーバサイドスクリプト言語の知識がなくてもJavaScriptのみで立ち上げられるようになったのです。

改めてNode.jsのすごさがわかりました。

Node.jsの主な特徴

• JavaScriptでサーバサイドの処理を実装する
• 非同期I/O、ノンブロッキングI/Oモデルを採用
• イベント駆動型である
• シングルスレッドである
• Googleの「V8」という優秀なJSエンジンで動作する

これらの特徴から、チャットアプリのようなリアルタイムで大量のデータを扱うようなサービスに向いています。

逆に向いていないことは、CPUリリースを大量に必要とするような処理を頻繁に行うようなプログラム、あるいは、あまりイベントが発生しない静的なサイトです。

イベント駆動型とは

イベント駆動型とは、コンピュータプログラムが起動するとともに、イベントを待機して発生したイベントに従って受動的に処理を行うプログラミングパラダイムのことです。

プログラムを立ち上げた瞬間に処理を行うのではなく、いわゆる「クリックイベント」のようなユーザーが何らかの動作をしたときに処理を行うようなタイプですね。

シングルスレッドとは

シングルスレッドとは、プログラムの処理が単一に行われることを指します。
その反語は「マルチスレッド」です。
スレッドは英語でthread であり、意味は「最小の処理単位」です。

Node.jsはシングルスレッドなので、どんなに接続数が増えてもスレッドがメモリを食い潰すことがありません。

しかし、シングルスレッドは1つのイベントの処理が重たい場合、大量のリクエストを待たせてしまうことがあります。
システムがエラーを起こせばサーバダウンへとつながる可能性があります。

この問題を解決したのがノンブロッキングI/Oモデルです。

非同期I/O、ノンブロッキングI/Oモデルとは

非同期I/O、ノンブロッキングI/Oモデルでシングルスレッド問題いわゆる「C10K問題」を解決しました。
ノンブロッキングI/Oモデルでイベントループ上で多くのアクセスを並行的に処理します。
これによって大量のアクセスを効率的に処理することができるようになったのです。

つまり、大量のスレッドが実行の終了を待たずに次から次へと並行して処理ができるようになりました。

C10K問題：一度に大量のユーザーがサーバーにアクセスすると、それに従って待ち時間が発生し、CPUやメモリを十分に積んでいてもアプリの動作が重くなってしまう問題

あとがき

非同期I/O、ノンブロッキングI/Oモデルが一番難しいです。
とりあえず「スレッドが待たずに並行的に処理されるようになるすごいやつ」と認識しました。

すこしだけなんとなくNode.jsが何かわかりました。
実際にウェブサーバとして立ち上げてみたいです。

フレームワークを使うことが一般的らしいので、Node.jsでつかうフレームワークについて調べようと思います。