※この記事はNoodl2.0を使用しています

NoodlでWeb Speech API Speech Recognitionを使う方法です。
音声認識を使うとなると、バックエンド側の開発が必要となり大変ですよね。
Chromeのブラウザのみ対応になりますが、Web Speech API Speech Recognitionを使うと
数行のJavascriptで簡単にマイクから拾った音声をテキストにすることができます！

参考にした記事

Web Speech API Speech Recognitionについて、詳細はこちら
Webページでブラウザの音声認識機能を使おう - Web Speech API Speech Recognition

あけおめmicrobit！！
無音だけど音声認識してる#Noodl #microbit #年越しNoodl pic.twitter.com/nhiWXMCcbp

— 年越しはりねずみ麺 (@hedgehog_noodl) December 31, 2019

サンプルページはコチラ
※micro:bitは抜いてます。

サンプルの使い方

1. Noodlのプロジェクトをクローンする

ここからクローンし、Noodl2.0で読み込んでください。

2. chromeをブラウザから開く

右上のブラウザアイコン→URLをクリックします。

URLの「192.168.xxx.xxx」を「localhost」に変更する。
※ブラウザの制限で、マイク機能はlocalhostかhttpsでないと動かないためです。サーバーにデプロイすることでも解消されます。

3. ラーメン画像をクリックし、マイクを許可

ラーメンタップで音声認識が開始します。

NoodlのJavascriptノードの解説

Noodl1.3のJavascriptノードと少し使用が変わっているようです。
基本的な使い方の説明と、NoodlでJavascriptノードで非同期通信するときのコツを記述します。

inputsとoutputs

inputs: 任意の入力ポートを作ることができる。
outputs: 任意の出力ポートを作ることができる。

書き方
inputの名前:'データ型'
利用可能な型：'number', 'string', 'boolean', 'color', 'signal', 'collection'

mySignal:function

特定のシグナルが来た場合に実行したいときに使用します。
例えば、タップしたら実行するなど。

【任意のinput名その1（boolean）】:function{
//実行したい処理
},
【任意のinput名その2（boolean）】:function{
//実行したい処理
}

このように、複数追加もできるようです。
Noodl1.3ではこのような処理はif文で書いていました。2.0のほうがスッキリかけそうですね。

change:function

inputの値のどれかが変更されたときに実行される。

このプロジェクトのJavascriptノードの中身

サンプルでは、ラーメンをタップしたときにmySignalにtrueのシグナルを送り、音声認識を実行させています。

define({
    // The input ports of the Javascript node, name of input and type
    inputs:{
        // ExampleInput:'number',
        // Available types are 'number', 'string', 'boolean', 'color' and 'signal',
        mySignal:'signal'
    },

    // The output ports of the Javascript node, name of output and type
    outputs:{
        // ExampleOutput:'string',
        text: "string",
        received: "boolean",
        finalTextReceived:"boolean"
    },

    // All signal inputs need their own function with the corresponding name that
    // will be run when a signal is received on the input.
    mySignal:function(inputs,outputs) {
        // ...
        outputs.received = false;
        outputs.finalTextReceived = false;

        outputs.received = false;
        SpeechRecognition = webkitSpeechRecognition || SpeechRecognition;
          const recognition = new SpeechRecognition();

          recognition.interimResults = true;

          recognition.onresult = (event) => {
            outputs.text = event.results[0][0].transcript;
            this.flagOutputDirty("text");
            this.sendSignalOnOutput("received");
            console.log(event.results[0].isFinal);
            outputs.finalTextReceived = (event.results[0].isFinal) ? true:false;
            this.flagOutputDirty("finalTextReceived");
          }

          recognition.start();
    },

    // This function will be called when any of the inputs have changed
    change:function(inputs,outputs) {
        // ...
    }
})


})

Javascriptノードで非同期通信をするときのコツ

Javascriptノード内で非同期通信をすると、
レスポンスが返ってきているのにoutputsが変更されない！という問題に遭遇します。

基本的にNoodlはinputsに変更があったときに中の関数を実行するため、
実行後にレスポンスが返ってきても、きちんとトリガーを作らない限りoutputsに反映されません。

こうした問題を解決するため、JavascriptノードにはいくつかのAPIが用意されています。

this.flagOutputDirty("変更を反映させたいoutputの名前")
inputsの変更以外をトリガーに、outputsを変更させるときに使用します。
このサンプルでは、音声認識のレスポンスが返ってきたときに、認識結果の文字列を"text"の出力に反映させています。

this.sendSignalOnOutput("任意のoutputの名前（boolean）")
素早くfalseからtrueへの往復を繰り返すブーリアンの信号を発信します。
このサンプルでは、音声認識のレスポンスが返ってきたときに信号を送信し、
音声認識中のアニメーション（ラーメンの拡縮）を止めるトリガーにしています。

まとめ

Javascript数行で音声認識ができました！すごい！
対応ブラウザがchromeのみなのが不便ですが、今後、他のブラウザにも実装されることを祈ります...！

JavaScriptの勉強に必要な事前知識です。追求すると底がありませんが、最低限必要な内容をまとめました。

• Webページが表示されるまでの流れ
• ブラウザの役割
• JavaScriptの役割

Webサイトが表示されるまで

アドレスバーにURLを入力し、画面上にWebページが表示されるまでの流れです。通信でどのようなデータがやり取りされているか、確認しておきます。

図解

ブラウザ

上図のクライアントに該当するアプリケーションがブラウザです。動作の結果は「Webページを表示する」ですが、内部では様々なことが行われています。

ブラウザの構成については、意外とネット上の情報が少なかったです。
自分は下記サイトを参考にしました。

ブラウザの仕組み: 最新ウェブブラウザの内部構造
ウェブサイトが表示されるまでにブラウザはどういった仕事を行っているのか？

明確に構造が分かれているかは分かりませんが、少なくとも理解しやすくなるかと思います。

構成

ユーザーインターフェイス (UI)

アドレスバーや戻る/進むボタン、ブックマークメニューなど、ブラウザ画面のうち要求したページが表示されるメインウィンドウを除くすべての部分です。

ブラウザエンジン

ユーザーインターフェイスとレンダリングエンジン間で、情報の受け渡しをします。

レンダリングエンジン

レスポンスのボディ(本文)からリソース(HTMLファイルやCSSファイル、画像データなど)を受け取った後、構文を解析し画面にテキストと画像を描画します。

ネットワーキング

主としてHTTPによりサーバと通信し、コンテンツを取得します。

JavaScriptエンジン

JavaScriptコードの解析と実行を行います。

UIバックエンド

チェックボックスやウィンドウなどのコアウィジェット(クライアントがWebページ上で操作を行うための部品)を描画します。

データストレージ

Cookieなど、Webページで扱うデータを保存します。

HTML5でブラウザ内の軽量なデータベースであるウェブストレージ(Web Storage)が定義されました。ウェブストレージはセッションストレージ(Window.sessionStorage)とローカルストレージ(Window.localStorage)の二種類があります。

これらのストレージはAPI(Storageインターフェイス)が提供されています。

代表的なブラウザ

ブラウザ	レンダリングエンジン	JavaScriptエンジン
Google Chrome	Blink	V8
Opera	Blink	V8
Safari	WebKit	Nitro
Firefox	Gecko	SpiderMonkey
Microsoft Edge	EdgeHTML	Chakra
Internet Explorer	Trident	Chakra

参考リンク

• HTTPのメッセージ
• 「HTTPリクエスト」と「HTTPレスポンス」
• Webブラウザ、レンダリングエンジン、JavaScriptエンジンを整理して図視化してみた

レンダリング

レスポンスを受け取った後、ブラウザで画面表示されるまでの流れです。

1. Download
2. Perse
3. Scripting
4. Style
5. Layout
6. Paint
7. Rasterize
8. Composite Layers

図解

工程

ブラウザのレンダリングエンジンとJavaScriptエンジンが実行します。

Download

サーバからリソースをダウンロードします。

Parse

HTMLとCSSの構文解析を行い、それぞれのオブジェクトモデルを構築します。

オブジェクトモデルは以下の段階を経て作成されます。

1. バイト
2. 文字
3. トークン
4. ノード
5. オブジェクトモデル

レンダリングの結果、Webページを構成する要素がAPI(Application Programming Interface)として利用できるようになります。そしてAPIは、JavaScriptから利用することができます。

オブジェクトモデルはAPIの集合体です。オブジェクトモデルに変換されることで、JavaScriptコードから操作が可能になります。

HTML

HTMLを解析して作られるオブジェクトモデルがDOM(Document Object Model)です。最終的にHTMLのタグがツリー構造の集合体になりますが、これをDOMツリーと呼びます。

ドキュメントオブジェクトモデル (DOM)
DOM ツリー

CSS

CSSから変換されるオブジェクトモデルはCSSOM(CSS Object Model)です。ツリー構造はCSSOMツリーと呼ばれます。

CSS Object Model

Scripting

必要があればJavaScriptを解析し、コードを実行します。

この工程はJavaScriptエンジンが担当します。

1. 字句解析 → トークン
2. 構文解析 → 構文木
3. コンパイル → 実行ファイル
4. 実行

Style (Calculate Style)

DOMツリーとCSSOMツリーを組み合わせます。
マッチングの完成形はレンダーツリー(Render Tree)と呼ばれます。

JavaScriptによるDOM操作が行われた時などは、再度実行されます。

Layout (Reflow)

それぞれの要素の位置と大きさの計算を行い、レイアウトツリー(Layout Tree)が構築されます。

JavaScriptによる変更が行われた時などは、再度実行されます。

Paint

画面へ対する描写命令(Paint Records)を作成します。

Rasterize

ピクセル(画素)を描画したレイヤー(階層構造)を作成します。集合体はレイヤーツリー(Layer Tree)と呼ばれます。

レイヤーで分離することにより、内容変更時に再計算による負荷が減ります。

Composite Layers

レイヤーを合成し、ブラウザに表示する画面を出力します。

Google Chromeにおける表記

Google Chromeのデベロッパーツールでは、以下の表記でまとめられています。Performanceタブから確認することができます。

Chrome DevToolsを使用してサイトのパフォーマンス改善をしてみた

項目	工程
Loading	Download, Perse
Scripting	Scripting
Rendering	Style, Layout
Painting	Paint, Rasterize, Composite Layers

参考リンク

• オブジェクトモデルの構築
• ブラウザはどのようにコンテンツをレンダリングしているのか？
• フロントエンジニアなら知っておきたいブラウザレンダリングの仕組みをわかりやすく解説！
• ブラウザレンダリングの仕組みを覚えておきたい 2019.04.15Googleサーバーの理解
• ブラウザレンダリングを理解するため簡単にまとめてみた

仮想DOMについて

2020年1月2日追記。
@hiro_matsuno2 さん、ご指摘ありがとうございました。

ReactやVue.jsなどのフレームワークでは仮想DOM(Virtual DOM)という概念が使われています。

仮想DOMと内部処理

こちらの記事で、仮想DOMの概要が分かりやすく説明されています。

VirtualDOMの仕事ってなに？(Reactの表示速度がはやい理由)

• 最初に仮想DOMを構築し、それを元にリアルDOMを構築する。
• ツリー構造に変化があれば、新しく仮想DOMが構築される。
• その後、旧仮想DOMと新仮想DOMの差分を割り出し、その差分だけリアルDOMが再構築される。

仮想DOMの構築はリアルDOMほど時間がかからないそうです。リアルDOMも一から構築し直す必要がなくなり、それゆえに早いとのこと。

参考リンク

• いまさら聞けないReact、Virtual DOM、JSX超入門 (1/3)
• 自作フレームワークをつくって学ぶ 仮想DOM実践入門
• なぜ仮想DOMという概念が俺達の魂を震えさせるのか
• 仮想DOMの内部の動き

始めに

明けましておめでとうございます．(執筆時:2020/1/1)
年末年始は一緒にゆっくりする友達もいないのでやったことない技術分野にチャレンジしています．
前回までの記事は

• vue cli4でプロジェクトを作ってgithub pagesに公開する + travisでCI/CD
• フロントエンド素人大学院生が爆速でVue.jsでポートフォリオを作った話
• フロントエンド素人大学院生が爆速でVue.jsでポートフォリオを作った話【Cardデザイン】

です．

最終的に作ったもの（再掲）

実際に作ったポートフォリオはこちら

github pagesで公開しています．
また，ソースコードはこちら

今回のゴール

前回までで，【表示させたいコンテンツ】を【cardコンポーネント】に表示することが出来るようになりました．
しかし，【表示させたいコンテンツ】はソースコードにハードコーディングしてしまっていて，美しくありません．
このままでは，【表示させたいコンテンツ】をちょっとだけ編集したいときに，ソースコードを編集して，masterブランチにマージして，本番環境でbuildして．．．ってめんどくさいです．

そこで，【表示させたいコンテンツ】はどこかから動的に取ってくるような仕組みにしようと思います．
そのような仕組みを作るのに便利なのが，FirebaseというgoogleのBaasです．
(本当はただただFirebaseを使ってみたいだけ)

Firebaseには枚挙に暇がないくらい便利なものがたくさんあるのですが，
今回はその中でも，Cloud Firestoreを使います．
Cloud FirestoreはいわゆるNoSQLデータベースというものを提供してくれます．
Cloud Firestoreに【表示させたいコンテンツ】を保存させておき，Vue.jsで取得して表示させる仕組みを作っていきましょう．

ちなみに，本記事の環境は，
- vue cli4でプロジェクトを作ってgithub pagesに公開する + travisでCI/CD
- フロントエンド素人大学院生が爆速でVue.jsでポートフォリオを作った話
- フロントエンド素人大学院生が爆速でVue.jsでポートフォリオを作った話【Cardデザイン】
で作った環境を前提としています．

参考

Cloud FireStoreとVue.jsでデーターベース通信を行う

事前準備

Firebaseにアプリを作成

Firebaseを使うにあたって，まずはFirebaseにアプリを登録する必要があります．

Firebaseへアクセスし，[使ってみる]
ボタンを押してください．
（Firebase自体を初めて使う人は，登録作業が必要になるかもしれません．）

遷移した先のページで，[プロジェクトの追加]ボタンを押してください．
そして，画面の誘導にしたがってプロジェクトの作成を行ってください．

無事プロジェクトが作成できたら，次のような画面になると思います，

次は，上記画面の，</>を押してWebアプリを追加していきます．
このとき，アプリのニックネームは適当に好きな名前を登録し，Firebase Hostingにはチェックを入れないでください
手順2で，何やらコードが現れますが後でも見れるので一旦無視して登録を完了してください．

すると，先ほど作ったアプリケーションがコンソールのTopページに現れるはずです．

そこで，そのアプリケーションをクリックし，歯車マークをおし設定画面を開いてください．
設定画面の下の方に，Firebase SDK snippetというセクションがあり，なにやらコードのようなものが書いてあると思います．
これをソースコードのしかるべき部分に書く必要があるのですが，それは後で書くとして，今はこのFirebase SDK snippetがこの手順で見れることだけ知っておいてください．

Firestoreの作成

次に，先に【表示させたいコンテンツ】をFirestoreに登録しておきましょう．
ちなみに，Firestoreでのデータの構造は，

コレクション > ドキュメント > フィールド

になっています．

• フィールドはキーと値のセット
• ドキュメントは複数のフィールドを持つ
• コレクションは複数のドキュメントを持つ

という感じです．
一応，ドキュメントの中にサブコレクションという物を入れ子にすることもできますが，今回は出てきません．

では，左側のサイドバーから，Databaseというところをクリックしてください．

すると，オレンジ色のヘッダーに[データベースの作成]というボタンがあるので，そこをクリックしてください．

このようなポップアップが出てきますが，下のテストモードで開始をチェックし，次へを押してください．
次のポップアップのリージョンはデフォルトのままでOKです．
しばらく待つと，このような画面になります．（一部黒抜きしてます．）

この画面の，[コレクションを開始]ボタンを押してください．
コレクションIDは，プロジェクト内で一意であればなんでも良いです．
今回は，profileItemsとします．
次の画面では，コレクションを追加するためのフォームが出てきます．
ここのドキュメントIDもユニークである必要がありますが，ここは自動IDで構わないでしょう．

画像のように，適当にtitle, description, commentフィールドを作ってください．
同様に数回ドキュメントを追加してみてください．
このようにドキュメントが複数あればOKです．

これで読み取る用のデータの作成は終わりました，

プロジェクトにfirebaseを追加．

次に，Vue.jsでFirebaseを操作できるように，プロジェクトにfirebaseを追加します．
プロジェクトの直下で，

npm install firebase

をしてインストールしてください．

次に，Firebaseの設定用ファイルを作成します．

touch src/firebase.js

でsrc/firebase.jsを作り，以下の内容を書き込んでください．
（//ここにFirebase SDK snippetを入れる．はまだ無視して大丈夫です．）

// Your web app's Firebase configuration

import firebase from 'firebase/app'
import 'firebase/firestore'

var firebaseConfig = {
 //ここにFirebase SDK snippetを入れる．
}
// Initialize Firebase
firebase.initializeApp(firebaseConfig)

export default firebase

さて，次は実際に

var firebaseConfig = {
 //ここにFirebase SDK snippetを入れる．
}

の部分を書き込む必要があります．
これは，Firebaseでアプリを作成の最後の部分で見たFirebase SDK snippetを使います．
先ほどFirebase SDK snippetを見たページに移動してください．
今回は，この[構成]と書かれた方にチェックして出てくるコードを使います．

このページの

var firebaseConfig = {
 apiKey: /*
いろいろな項目
*/
measurementID:xxxxxxx
}

をコピペして，そのまま

var firebaseConfig = {
 //ここにFirebase SDK snippetを入れる．
}

と置換してください．

Firestoreからデータを取得する．

とりあえず，下準備が整ったので，実際にFirestoreからデータを取得してみようと思います．
前回までで作成した，src/views/page1.vueを持ちます．

<template>
  <div class="page1 container" id="page1">
    <h1>This is Page1</h1>
    <div class="card-deck row">
      <div
        v-for="(item, key) in profileItems"
        v-bind:key="key"
        class="col-xs-12 col-md-4"
      >
        <profile-item v-bind="item" />
      </div>
    </div>
  </div>
</template>

<script>
  import ProfileItem from '../components/ProfileItem.vue'
  export default {
    components: {
      ProfileItem
    },
    data() {
      return {
        profileItems: [
          { title: 'title1', description: 'description1', comment: 'comment1' },
          { title: 'title2', description: 'description2', comment: 'comment2' },
          { title: 'title3', description: 'description3', comment: 'comment3' },
          { title: 'title4', description: 'description4', comment: 'comment4' },
          { title: 'title5', description: 'description5', comment: 'comment5' },
          { title: 'title6', description: 'description6', comment: 'comment6' }
        ]
      }
    }
  }
</script>

<style scoped>
  .page1 {
    height: 1000px;
    background-color: aqua;
  }
</style>

この，profileItemsに格納されているデータを，ソースコードに直書きするのではなく．Firestoreから取得するようにします．
まずは，<script>部で，先ほど作成したfirebase.jsを読み込みます．
ついでに，profileItemsを空にしておきましょう．

<script>
  import ProfileItem from '../components/ProfileItem.vue'
  import firebase from '../firebase.js'
  export default {
    components: {
      ProfileItem
    },
    data() {
      return {
        profileItems: []
      }
    }
  }
</script>

では，実際にデータの取得処理を書いていきますがその前に公式のドキュメントへのリンクを貼っておきます．
Cloud Firestore を使ってみる
Cloud Firestore でデータを取得する

まず，操作したいコレクションを指定してコレクション操作のためのインスタンスを作る必要があります．

firebase.firestore().collection('<コレクション名>')

今回は，profileitemsという名前でコレクションを作っているので次のように書きます．

firebase.firestore().collection('profileitems')

これを，<script>部に書いて，methodsから利用できるようにしましょう．

<script>
  import ProfileItem from '../components/ProfileItem.vue'
  import firebase from '../firebase.js'
  export default {
    components: {
      ProfileItem
    },
    data() {
      return {
        profileItems: []
      }
    },
    computed: {
      tableDatabase: () => firebase.firestore().collection('profileitems')
    }
   }
</script>

これで，methodsからthis.tableDatabaseとすることでprofileitemsのデータベースにアクセスできるようになりました．

次に，profileitemsコレクションには，複数のドキュメントがあるので，それらを全て取得する方法を見てみましょう．

コレクションのすべてのドキュメントを取得する

let citiesRef = db.collection('cities');
let allCities = citiesRef.get()
  .then(snapshot => {
    snapshot.forEach(doc => {
      console.log(doc.id, '=>', doc.data());
    });
  })
  .catch(err => {
    console.log('Error getting documents', err);
  });

このように書いてますね．
ちなみに，公式ドキュメントでは既にdbが定義されていますが，これはここでいうfirebase.firestore()だと思って大丈夫です．

どうやら，

this.tableDatabase.get()

で全てのコレクションが取得でき，それらに対してforEachを回してあげれば良さそうです．

ところで，公式のドキュメントには，snapshotとかいうのが使われていますね．これは，その関数を実行した時点でのデータが格納されているようです．
さらに．docにはそれぞれのドキュメントのデータが格納され，doc.data()でそのドキュメントに格納されているフィールドが取得できそうです．

というわけで，このようなmethodがかけそうです．

methods: {
      listenData: function() {
        return new Promise(resolve => {
          resolve(
            this.tableDatabase.get().then(snapshot => {
              snapshot.forEach(doc => {
                this.profileItems.push(doc.data())
              })
            })
          )
        })
      }
    }

これで，listenData()を実行するとそれぞれのドキュメントがprofileItemsに格納されます．
listenData()は，ページの読み込み時に一回だけ実行されて欲しいので，

created() {
      this.listenData()
}

としましょう．

従って，<script>部は，以下のようになります．

<script>
  import ProfileItem from '../components/ProfileItem.vue'
  import firebase from '../firebase.js'
  export default {
    components: {
      ProfileItem
    },
    data() {
      return {
        profileItems: []
      }
    },
    computed: {
      tableDatabase: () => firebase.firestore().collection('profileitems')
    },
    methods: {
      listenData: function() {
        return new Promise(resolve => {
          resolve(
            this.tableDatabase.get().then(snapshot => {
              snapshot.forEach(doc => {
                this.profileItems.push(doc.data())
              })
            })
          )
        })
      }
    },
    created() {
      this.listenData()
    }
  }
</script>

これで，

npm run serve

をしてhttp://localhost:8080/にアクセスすると，先ほどFirestoreに登録したデータが表示されるはずです．

これで今回の作業はほとんど完成ですが，あとは先ほどのfirebase.jsをリファクタリングします．

firebase.jsって公開されてもいいの？

最初はfirebase.jsってapiKeyとか含んでるのにパブリックなrepositoryで管理するのはまずいと思い，travisCIに環境変数として登録しておいて，デプロイ時に展開されるようにしてました．

でもよく考えるとどうせgithub pagesにアクセスするときに晒されるじゃんって思ったり．そもそも公式ではhtmlにべたがきするように指示してあったり．．．

どうすべきか悩んでいたら
Firebase apiKey ってさらしていいの? ほんとに?
を見つけました．

一応問題ないみたいですね．

終わりに

今回の最終的なソースコードはこちら

フロントエンドプロジェクトでのJavaScriptコードデザインの課題

アプリケーション開発でフロントエンドの主役はJavaScriptのはずなのに、フロントエンドエンジニア達のコーディング認識が一番合わない部分でもあります

CSSではOOCSS、BEM、SMACSS、FLOCSS...など様々なコードデザインのアプローチがあるのにも関わらず、JavaScriptにはそういったものがないですね

なので私がよく行うJavaScriptのコードデザイン方法（OCOO）を発信してみようと思いました

OCOO（オクー）とは

• JavaScriptのコードデザイン方法です（私が勝手に考えて名付けました）
• One Component One Object略してOCOO（オクー）です
• 概念を一言でいうと一つのコンポーネントは一つのオブジェクトを有しているだけで良いという思考です
• JavaScriptフレームワークやライブラリのコードを書く時に意識してもらえるとコンポーネントのコードを追いかけやすくなります

実装のポイント

例えばですが、フォームをVueのSFC（*.vueファイル)で作る場合はこんな感じになります
動作はこちらで確認できます

app.vue

<template>
  <form @submit.prevent="sendForm">
    <div>
      <label>
        <input
          v-model="postDataAlias.name"
          type="text"
          :placeholder="placeholderAlias.name"
        />
      </label>
      <p v-if="validationAlias.name.flag">
        <span
          v-for="(message, messageIndex) in validationAlias.name.errors"
          :key="messageIndex"
        >
          {{ message }}
        </span>
      </p>
    </div>
    <div>
      <label>
        <input
          v-model="postDataAlias.age"
          type="number"
          :placeholder="placeholderAlias.age"
        />
      </label>
      歳
      <p v-if="validationAlias.age.flag">
        <span
          v-for="(message, messageIndex) in validationAlias.age.errors"
          :key="messageIndex"
        >
          {{ message }}
        </span>
      </p>
    </div>
    <div>
      <select name="prefecture" v-model="postDataAlias.prefectureId">
        <option
          v-for="(prefecture, index) in prefectureAlias"
          :value="prefecture.id"
          :key="index"
        >
          {{ prefecture.name }}
        </option>
      </select>
    </div>
    <div>
      <button @click.prevent="sendForm">送信</button>
    </div>
    <div>
      <pre>postJSON: {{ postDataAlias }}</pre>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formObj: {}
    };
  },
  created() {
    this.formObj = this.initFormObj();
  },
  watch: {
    postDataAlias: {
      handler(formObj) {
        const formObjKeys = Object.keys(formObj);
        const checkString = /\d/;
        const checkNumber = /\d{4,}/;
        const checkAlphabet = /[a-zA-Z]/;

        formObjKeys.forEach(keyName => {
          switch (keyName) {
            case "name":
              this.validationAlias.name.flag = false;
              this.validationAlias.name.errors = [];

              if (checkString.test(formObj.name)) {
                this.validationAlias.name.flag = true;
                this.validationAlias.name.errors.push(
                  this.validationAlias.name.messageList.message_01
                );
              }

              if (checkAlphabet.test(formObj.name)) {
                this.validationAlias.name.flag = true;
                this.validationAlias.name.errors.push(
                  this.validationAlias.name.messageList.message_02
                );
              }

              break;
            case "age":
              this.validationAlias.age.flag = false;
              this.validationAlias.age.errors = [];

              if (checkNumber.test(formObj.age)) {
                this.validationAlias.age.flag = true;
                this.validationAlias.age.errors.push(
                  this.validationAlias.age.messageList.message_01
                );
              }
              break;
          }
        });
      },
      deep: true
    }
  },
  computed: {
    prefectureAlias: {
      get() {
        return this.formObj.prefecture;
      }
    },
    placeholderAlias: {
      get() {
        return this.formObj.placeholder;
      }
    },
    validationAlias: {
      get() {
        return this.formObj.validation;
      }
    },
    postDataAlias: {
      get() {
        return this.formObj.postData;
      }
    }
  },
  methods: {
    initFormObj() {
      return {
        prefecture: [
          { id: 0, name: "" },
          { id: 1, name: "北海道" },
          { id: 2, name: "青森" },
          { id: 3, name: "岩手" },
          { id: 4, name: "宮城" },
          { id: 5, name: "..." }
        ],
        placeholder: {
          name: "山田 太郎",
          age: 30
        },
        validation: {
          name: {
            flag: false,
            errors: [],
            messageList: {
              message_01: "数字を含まない文字列でご入力ください",
              message_02: "アルファベット以外でご入力ください"
            }
          },
          age: {
            flag: false,
            errors: [],
            messageList: {
              message_01: "4桁以下の数値にしてください"
            }
          }
        },
        postData: {
          name: "",
          age: "",
          prefectureId: ""
        }
      };
    },
    sendForm() {
      // POSTの処理
      alert("postJSONが送信されるデータです");
    }
  }
};
</script>

<style>
p {
  margin-top: 0;
}
p > span {
  color: red;
  font-size: 10px;
  display: block;
}
</style>

ポイント①

コンポーネント内にオブジェクトを一つ定義する（配列でもOK）

data() {
  return {
    formObj: {}
  };
}

ポイント②

オブジェクトを関数で初期化する

オブジェクトの初期化は変数にそのまま定義してしまっても良いですが、関数で初期化した方がオブジェクトの整形や拡張などを容易にできるため関数で行うのが良いと思います

initFormObj() {
  return {
    prefecture: [
      { id: 0, name: "" },
      { id: 1, name: "北海道" },
      { id: 2, name: "青森" },
      { id: 3, name: "岩手" },
      { id: 4, name: "宮城" },
      { id: 5, name: "..." }
    ],
    placeholder: {
      name: "山田 太郎",
      age: 30
    },
    validation: {
      name: {
        flag: false,
        messages: [],
        messageList: {
          error_01: "数字を含まない文字列でご入力ください",
          error_02: "アルファベット以外でご入力ください"
        }
      },
      age: {
        flag: false,
        messages: [],
        messageList: {
          error_01: "4桁以下の数値にしてください"
        }
      }
    },
    postData: {
      name: "",
      age: "",
      prefectureId: ""
    }
  };
}

ポイント③

オブジェクトのエイリアスを作る（無くても良い）

オブジェクトのパスが長くなってしまう場合は必要に応じてエイリアスを作っても良いと思います

computed: {
  prefectureAlias: {
    get() {
      return this.formObj.prefecture;
    }
  },
  placeholderAlias: {
    get() {
      return this.formObj.placeholder;
    }
  },
  validationAlias: {
    get() {
      return this.formObj.validation;
    }
  },
  postDataAlias: {
    get() {
      return this.formObj.postData;
    }
  }
}

ポイント④

テンプレート側はオブジェクトのプロパティのみ参照する

上記のサンプルコードのテンプレートではエイリアス経由でオブジェクトのプロパティを参照しています

上記の例ではwatchやv-modelで各プロパティの変更を検知してよしなに画面の表示を変更しています

基本的にはオブジェクトの値が更新されれば画面の表示も変化するようにコードを書いていきます

まとめ

One Component One Object略してOCOO（オクー）いかがでしょうか？
要はオブジェクトを一つ定義してテンプレート側はそのオブジェクトしか参照しないという考えでコードを書いていきます

上記ではvueのコードで解説を行ったため、reactだとどうなるのかみたいなところはまた時間のある時に追記していきたいと思います（Angularはvueと同じ双方向型ですので大体同じようになるかと思います）

フロントエンドプロジェクトでのJavaScriptコードデザインの課題

アプリケーション開発でフロントエンドの主役はJavaScriptのはずなのに、フロントエンドエンジニア達のコーディング認識が一番合わない部分でもあります

CSSではOOCSS、BEM、SMACSS、FLOCSS...など様々なコードデザインのアプローチがあるのにも関わらず、JavaScriptにはそういったものがないですね

なので私がよく行うJavaScriptのコードデザイン方法（OCOO）を発信してみようと思いました

OCOO（オクー）とは

• JavaScriptのコードデザイン方法です（私が勝手に考えて名付けました）
• One Component One Object略してOCOO（オクー）です
• 概念を一言でいうと一つのコンポーネントは一つのオブジェクトを有しているだけで良いという思考です
• JavaScriptフレームワークやライブラリのコードを書く時に意識してもらえるとコンポーネントのコードを追いかけやすくなります

実装のポイント

例えばですが、フォームをVueのSFC（*.vueファイル)で作る場合はこんな感じになります
動作はこちらで確認できます

app.vue

<template>
  <form @submit.prevent="sendForm">
    <div>
      <label>
        <input
          v-model="postDataAlias.name"
          type="text"
          :placeholder="placeholderAlias.name"
        />
      </label>
      <p v-if="validationAlias.name.flag">
        <span
          v-for="(message, messageIndex) in validationAlias.name.errors"
          :key="messageIndex"
        >
          {{ message }}
        </span>
      </p>
    </div>
    <div>
      <label>
        <input
          v-model="postDataAlias.age"
          type="number"
          :placeholder="placeholderAlias.age"
        />
      </label>
      歳
      <p v-if="validationAlias.age.flag">
        <span
          v-for="(message, messageIndex) in validationAlias.age.errors"
          :key="messageIndex"
        >
          {{ message }}
        </span>
      </p>
    </div>
    <div>
      <select name="prefecture" v-model="postDataAlias.prefectureId">
        <option
          v-for="(prefecture, index) in prefectureAlias"
          :value="prefecture.id"
          :key="index"
        >
          {{ prefecture.name }}
        </option>
      </select>
    </div>
    <div>
      <button @click.prevent="sendForm">送信</button>
    </div>
    <div>
      <pre>postJSON: {{ postDataAlias }}</pre>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formObj: {}
    };
  },
  created() {
    this.formObj = this.initFormObj();
  },
  watch: {
    postDataAlias: {
      handler(formObj) {
        const formObjKeys = Object.keys(formObj);
        const checkString = /\d/;
        const checkNumber = /\d{4,}/;
        const checkAlphabet = /[a-zA-Z]/;

        formObjKeys.forEach(keyName => {
          switch (keyName) {
            case "name":
              this.validationAlias.name.flag = false;
              this.validationAlias.name.errors = [];

              if (checkString.test(formObj.name)) {
                this.validationAlias.name.flag = true;
                this.validationAlias.name.errors.push(
                  this.validationAlias.name.messageList.message_01
                );
              }

              if (checkAlphabet.test(formObj.name)) {
                this.validationAlias.name.flag = true;
                this.validationAlias.name.errors.push(
                  this.validationAlias.name.messageList.message_02
                );
              }

              break;
            case "age":
              this.validationAlias.age.flag = false;
              this.validationAlias.age.errors = [];

              if (checkNumber.test(formObj.age)) {
                this.validationAlias.age.flag = true;
                this.validationAlias.age.errors.push(
                  this.validationAlias.age.messageList.message_01
                );
              }
              break;
          }
        });
      },
      deep: true
    }
  },
  computed: {
    prefectureAlias: {
      get() {
        return this.formObj.prefecture;
      }
    },
    placeholderAlias: {
      get() {
        return this.formObj.placeholder;
      }
    },
    validationAlias: {
      get() {
        return this.formObj.validation;
      }
    },
    postDataAlias: {
      get() {
        return this.formObj.postData;
      }
    }
  },
  methods: {
    initFormObj() {
      return {
        prefecture: [
          { id: 0, name: "" },
          { id: 1, name: "北海道" },
          { id: 2, name: "青森" },
          { id: 3, name: "岩手" },
          { id: 4, name: "宮城" },
          { id: 5, name: "..." }
        ],
        placeholder: {
          name: "山田 太郎",
          age: 30
        },
        validation: {
          name: {
            flag: false,
            errors: [],
            messageList: {
              message_01: "数字を含まない文字列でご入力ください",
              message_02: "アルファベット以外でご入力ください"
            }
          },
          age: {
            flag: false,
            errors: [],
            messageList: {
              message_01: "4桁以下の数値にしてください"
            }
          }
        },
        postData: {
          name: "",
          age: "",
          prefectureId: ""
        }
      };
    },
    sendForm() {
      // POSTの処理
      alert("postJSONが送信されるデータです");
    }
  }
};
</script>

<style>
p {
  margin-top: 0;
}
p > span {
  color: red;
  font-size: 10px;
  display: block;
}
</style>

ポイント①

コンポーネント内にオブジェクトを一つ定義する（配列でもOK）

data() {
  return {
    formObj: {}
  };
}

ポイント②

オブジェクトを関数で初期化する

オブジェクトの初期化は変数にそのまま定義してしまっても良いですが、関数で初期化した方がオブジェクトの整形や拡張などを容易にできるため関数で行うのが良いと思います

initFormObj() {
  return {
    prefecture: [
      { id: 0, name: "" },
      { id: 1, name: "北海道" },
      { id: 2, name: "青森" },
      { id: 3, name: "岩手" },
      { id: 4, name: "宮城" },
      { id: 5, name: "..." }
    ],
    placeholder: {
      name: "山田 太郎",
      age: 30
    },
    validation: {
      name: {
        flag: false,
        messages: [],
        messageList: {
          error_01: "数字を含まない文字列でご入力ください",
          error_02: "アルファベット以外でご入力ください"
        }
      },
      age: {
        flag: false,
        messages: [],
        messageList: {
          error_01: "4桁以下の数値にしてください"
        }
      }
    },
    postData: {
      name: "",
      age: "",
      prefectureId: ""
    }
  };
}

ポイント③

オブジェクトのエイリアスを作る（無くても良い）

オブジェクトのパスが長くなってしまう場合は必要に応じてエイリアスを作っても良いと思います

computed: {
  prefectureAlias: {
    get() {
      return this.formObj.prefecture;
    }
  },
  placeholderAlias: {
    get() {
      return this.formObj.placeholder;
    }
  },
  validationAlias: {
    get() {
      return this.formObj.validation;
    }
  },
  postDataAlias: {
    get() {
      return this.formObj.postData;
    }
  }
}

ポイント④

テンプレート側はオブジェクトのプロパティのみ参照する

上記のサンプルコードのテンプレートではエイリアス経由でオブジェクトのプロパティを参照しています

上記の例ではwatchやv-modelで各プロパティの変更を検知してよしなに画面の表示を変更しています

基本的にはオブジェクトの値が更新されれば画面の表示も変化するようにコードを書いていきます

まとめ

One Component One Object略してOCOO（オクー）いかがでしょうか？
要はオブジェクトを一つ定義してテンプレート側はそのオブジェクトしか参照しないという考えでコードを書いていきます

上記ではvueのコードで解説を行ったため、reactだとどうなるのかみたいなところはまた時間のある時に追記していきたいと思います（Angularはvueと同じ双方向型ですので大体同じようになるかと思います）

フロントエンドプロジェクトでのJavaScriptコードデザインの課題

アプリケーション開発でフロントエンドの主役はJavaScriptのはずなのに、フロントエンドエンジニア達のコーディング認識が一番合わない部分でもあります

CSSではOOCSS、BEM、SMACSS、FLOCSS...など様々なコードデザインのアプローチがあるのにも関わらず、JavaScriptにはそういったものがないですね

なので私がよく利用しているJavaScriptのコードデザイン方法（OCOO）を発信してみようと思いました

OCOO（オクー）とは

• JavaScriptのコードデザイン方法です（私が勝手に考えて名付けました）
• One Component One Object略してOCOO（オクー）です
• 概念を一言でいうと一つのコンポーネント（又はモジュール）は一つのオブジェクトだけを参照するという規約です
• JavaScriptフレームワークやライブラリのコードを書く時に意識してもらえるとコンポーネントのコードを追いかけやすくなります

メリット

• 変数宣言が散らばらない
• 誰が書いても構成が同じになりやすいため、コードを追っかけている時に迷子になりにくい
• 厳格過ぎないため、難しそうなアーキテクチャを取り入れるよりも気軽に使える
• チーム内に最低限のお作法が生まれる

デメリット

• オブジェクト操作や配列操作のメソッドを利用する場面が多くなるため、慣れが必要かもしれない
• 既存プロジェクトへ導入しようとするとリファクタが結構大変かもしれない

実装のポイント

例えばですが、フォームをVueのSFC（*.vueファイル)で作る場合はこんな感じになります
動作はこちらで確認できます（vueのdevtoolが使えます）

フォームの機能としましては、入力された値のバリデーションチェックとサーバーへ送信するデータの作成を行うコードを書きました（説明するための完成度はあるかと）

app.vue

<template>
  <form @submit.prevent="sendForm">
    <div>
      <label>
        <input
          v-model="postDataAlias.name"
          type="text"
          :placeholder="placeholderAlias.name"
        />
      </label>
      <p v-if="validationAlias.name.flag">
        <span
          v-for="(message, messageIndex) in validationAlias.name.errors"
          :key="messageIndex"
        >
          {{ message }}
        </span>
      </p>
    </div>
    <div>
      <label>
        <input
          v-model="postDataAlias.age"
          type="number"
          :placeholder="placeholderAlias.age"
        />
      </label>
      歳
      <p v-if="validationAlias.age.flag">
        <span
          v-for="(message, messageIndex) in validationAlias.age.errors"
          :key="messageIndex"
        >
          {{ message }}
        </span>
      </p>
    </div>
    <div>
      <select name="prefecture" v-model="postDataAlias.prefectureId">
        <option
          v-for="(prefecture, index) in prefectureAlias"
          :value="prefecture.id"
          :key="index"
        >
          {{ prefecture.name }}
        </option>
      </select>
    </div>
    <div>
      <button @click.prevent="sendForm">送信</button>
    </div>
    <div>
      <pre>postJSON: {{ postDataAlias }}</pre>
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formObj: {}
    };
  },
  created() {
    this.formObj = this.initFormObj();
  },
  watch: {
    postDataAlias: {
      handler(formObj) {
        const formObjKeys = Object.keys(formObj);
        const checkString = /\d/;
        const checkNumber = /\d{4,}/;
        const checkAlphabet = /[a-zA-Z]/;

        formObjKeys.forEach(keyName => {
          switch (keyName) {
            case "name":
              this.validationAlias.name.flag = false;
              this.validationAlias.name.errors = [];

              if (checkString.test(formObj.name)) {
                this.validationAlias.name.flag = true;
                this.validationAlias.name.errors.push(
                  this.validationAlias.name.messageList.message_01
                );
              }

              if (checkAlphabet.test(formObj.name)) {
                this.validationAlias.name.flag = true;
                this.validationAlias.name.errors.push(
                  this.validationAlias.name.messageList.message_02
                );
              }

              break;
            case "age":
              this.validationAlias.age.flag = false;
              this.validationAlias.age.errors = [];

              if (checkNumber.test(formObj.age)) {
                this.validationAlias.age.flag = true;
                this.validationAlias.age.errors.push(
                  this.validationAlias.age.messageList.message_01
                );
              }
              break;
          }
        });
      },
      deep: true
    }
  },
  computed: {
    prefectureAlias: {
      get() {
        return this.formObj.prefecture;
      }
    },
    placeholderAlias: {
      get() {
        return this.formObj.placeholder;
      }
    },
    validationAlias: {
      get() {
        return this.formObj.validation;
      }
    },
    postDataAlias: {
      get() {
        return this.formObj.postData;
      }
    }
  },
  methods: {
    initFormObj() {
      return {
        prefecture: [
          { id: 0, name: "" },
          { id: 1, name: "北海道" },
          { id: 2, name: "青森" },
          { id: 3, name: "岩手" },
          { id: 4, name: "宮城" },
          { id: 5, name: "..." }
        ],
        placeholder: {
          name: "山田 太郎",
          age: 30
        },
        validation: {
          name: {
            flag: false,
            errors: [],
            messageList: {
              message_01: "数字を含まない文字列でご入力ください",
              message_02: "アルファベット以外でご入力ください"
            }
          },
          age: {
            flag: false,
            errors: [],
            messageList: {
              message_01: "4桁以下の数値にしてください"
            }
          }
        },
        postData: {
          name: "",
          age: "",
          prefectureId: ""
        }
      };
    },
    sendForm() {
      // POSTの処理
      alert("postJSONが送信されるデータです");
    }
  }
};
</script>

<style>
p {
  margin-top: 0;
}
p > span {
  color: red;
  font-size: 10px;
  display: block;
}
</style>

ポイント①

コンポーネント内にオブジェクトを一つ定義する（配列でもOK）

OCOOの核心部です

data() {
  return {
    formObj: {}
  };
}

ポイント②

オブジェクトを関数で初期化する

オブジェクトの初期化は変数にそのまま定義してしまっても良いですが、関数で初期化した方がオブジェクトの整形や拡張などを容易にできるため関数で行うのが良いと思います

initFormObj() {
  return {
    prefecture: [
      { id: 0, name: "" },
      { id: 1, name: "北海道" },
      { id: 2, name: "青森" },
      { id: 3, name: "岩手" },
      { id: 4, name: "宮城" },
      { id: 5, name: "..." }
    ],
    placeholder: {
      name: "山田 太郎",
      age: 30
    },
    validation: {
      name: {
        flag: false,
        messages: [],
        messageList: {
          error_01: "数字を含まない文字列でご入力ください",
          error_02: "アルファベット以外でご入力ください"
        }
      },
      age: {
        flag: false,
        messages: [],
        messageList: {
          error_01: "4桁以下の数値にしてください"
        }
      }
    },
    postData: {
      name: "",
      age: "",
      prefectureId: ""
    }
  };
}

ポイント③

オブジェクトのエイリアスを作る（無くても良い）

オブジェクトのパスが長くなってしまう場合は必要に応じてエイリアスを作っても良いと思います

上記のテンプレートではエイリアス経由でオブジェクトのプロパティを参照しています

computed: {
  prefectureAlias: {
    get() {
      return this.formObj.prefecture;
    }
  },
  placeholderAlias: {
    get() {
      return this.formObj.placeholder;
    }
  },
  validationAlias: {
    get() {
      return this.formObj.validation;
    }
  },
  postDataAlias: {
    get() {
      return this.formObj.postData;
    }
  }
}

ポイント④

テンプレート側はオブジェクトのプロパティのみ参照する

上記の例ではwatchやv-modelで各プロパティの変更を検知してよしなに画面の表示を変更しています

<div>
  <label>
    <input
      v-model="postDataAlias.name"
      type="text"
      :placeholder="placeholderAlias.name"
    />
  </label>
  <p v-if="validationAlias.name.flag">
    <span
      v-for="(message, messageIndex) in validationAlias.name.errors"
      :key="messageIndex"
    >
      {{ message }}
    </span>
  </p>
</div>

まとめ

One Component One Object略してOCOO（オクー）いかがでしょうか？
要はオブジェクトを一つ定義してテンプレート側はそのオブジェクトしか参照しないという考えでコードを書いていきます

サンプルコードはフォーム一つを一つのコンポーネントとして実装しましたが、フォームの項目単位でコンポーネントを細分化する事ができます

そうするとコンポーネントの動作がもっと分かりやすくなりますね

上記ではvueのコードで解説を行ったため、reactだとどうなるのかみたいなところはまた時間のある時に追記していきたいと思います（Angularはvueと同じ双方向型ですので大体同じようになるかと思いますreactが終わったら追記してみたいと思います）

流行るといいな〜

本記事は Riot.js Advent Calendar 2019 の第22日目です.

以下, 注意事項です.

• Riot.js を riot と呼ぶ
• @riotjs/route を route と呼ぶ
• 本記事の route は v5.2.0(執筆時点の最新) とする ※v5 については別途記事を書き中

onBeforeRoute イベントハンドラの生成

route のソースコードを見ていくと, 2つ riot コンポーネントが見つかりますが, その中の route-hoc.riot を見てみますと,

router-hoc.riotの抜粋

onBeforeRoute(path, pathToRegexp) {
  if (!match(path, this.state.pathToRegexp)) {
    this.update({
      route: null
    })
  }
},

何やら嬉しい名前のメソッドが定義されていますw また, index.js の中を見てみますと,

index.js

// 省略
import Route from './components/route-hoc.riot'
import Router from './components/router-hoc.riot'
// 省略
export {
  // 〜
  Router,
  Route
}

ふむふむ?よくわからないが, 使われているのは確かですね. では上手いことこの onBeforeRoute を使ってみましょう.

差し込み処理の追加

今回は公式のデモの一つ standalone-history.html をお借りします. <router>, <route> などのタグベースではなく, JS ベースでのルーティングの実装ですね.

standalone-history.html(変更前)

<nav>
  <a href="/hello">Hello</a>
  <a href="/user">User</a>
  <a href="/user/gianluca">Username</a>
  <a href="/goodbye">goodbye</a>
</nav>
<div id="root"></div>
<script type="module">
  const { initDomListeners, setBase } = route

  const loc = window.location

  setBase(`${loc.protocol}//${loc.host}`)

  const onRoute = (url) => root.innerHTML = `${url} and params=${JSON.stringify(url.params)}`

  route.route('/hello').on.value(onRoute)
  route.route('/user').on.value(onRoute)
  route.route('/user/:username').on.value(onRoute)
  route.route('/goodbye').on.value(onRoute)

  initDomListeners()
</script>

nav にリンクが並んでいるだけの簡単な SPA で, クリックすると対応したテキストが下の div タグに表示されます.

ではこちらに onBeforeRoute メソッドを追加していきます.

standalone-history.html(変更後)

  <nav>
    <a href="/hello">Hello</a>
    <a href="/user">User</a>
    <a href="/user/gianluca">Username</a>
    <a href="/goodbye">goodbye</a>
  </nav>
  <div id="root"></div>
  <script type="module">
    const { initDomListeners, setBase } = route

    const loc = window.location

    setBase(`${loc.protocol}//${loc.host}`)

    const onRoute = (url) => root.innerHTML = `${url} and params=${JSON.stringify(url.params)}`
+   const onBeforeRoute = () => {
+     // 現在のルーティングパスを取得し表示
+     alert(route.getCurrentRoute())
+   }

+   route.route('/hello').on.value(onBeforeRoute)
    route.route('/hello').on.value(onRoute)
    route.route('/user').on.value(onRoute)
    route.route('/user/:username').on.value(onRoute)
    route.route('/goodbye').on.value(onRoute)

    initDomListeners()
  </script>

では実行してみましょう.

先に Username リンクをクリックしており, div タグには /user/gianluca のテキストが表示されています. ここで Hello リンクをクリックしたものが↑のキャプチャになります.

alert で表示されるテキストは /hello となっており, Hello のルーティングそのものは実行されていますが, まだテキストは書き換わっていないため, レンダリングはブロックされています.

おわりに

あくまでこれは簡易的な方法で, 実際にはこれではダメだと思っています…というのも, 先程の処理を以下のように書き換えると, 先に onRoute!! のアラートが表示されます.

抜粋

-    const onRoute = (url) => root.innerHTML = `${url} and params=${JSON.stringify(url.params)}`
+    const onRoute = (url) => {
+      root.innerHTML = `${url} and params=${JSON.stringify(url.params)}`
+      alert("onRoute!!")
+    }
   const onBeforeRoute = () => {
     // 現在のルーティングパスを取得し表示
     alert(route.getCurrentRoute())
   }

-   route.route('/hello').on.value(onBeforeRoute)
    route.route('/hello').on.value(onRoute)
+   route.route('/hello').on.value(onBeforeRoute)

これはちょっと細かい話をすると, route は内部的には rawth というライブラリを使っており((厳密には route のコア機能はほぼ全てこの子の機能)), さらに rawth は内部的には erre というライブラリに依存しています.

で, この子は .on で検知するルーティングを配列で管理しており, 順番に実行されるため, 先に onRoute!! が表示される形となります. ですので, route.route('/hello') でセットする順番を先に書く必要があります.

本当は正しい使い方があると思いますが, 一旦これで動いているのでまた何か分かったら更新したいと思います.

ではでは(=ﾟωﾟ)ﾉ

参考

• Riot.js v4対応 Router
• Riot.js v4対応 Router その２
• Riot.js v4 自分でRouterを作る

See the Pen MovableElement by Yoshiharu (@yoshiharu2580) on CodePen.

interface ElementPosition {
  top: number;
  left: number;
}

interface PointerPosition {
  x: number | null;
  y: number | null;
}

class MovableElement {
  // Elementオブジェクト
  private element: HTMLElement;
  // 要素の初期位置
  private elementInitialPosition: ElementPosition;
  // 要素の動き始めの位置
  private elementStartPosition: ElementPosition;
  // ポインタ-の動き始めの位置
  private pointerStartPosition: PointerPosition = {
    x: null,
    y: null
  };

  constructor(id: string) {
    this.element = document.getElementById(id);
    this.elementInitialPosition = this.getCurrentPosition();

    this.element.addEventListener("mousedown", (event: MouseEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.clientX;
      this.pointerStartPosition.y = event.clientY;
    });

    this.element.addEventListener("mousemove", (event: MouseEvent) => {
      if (
        this.pointerStartPosition.x === null ||
        this.pointerStartPosition.y === null
      ) {
        return;
      }

      const pointerMovingDistanceX = event.clientX - this.pointerStartPosition.x;
      const pointerMovingDistanceY = event.clientY - this.pointerStartPosition.y;
      this.changeTranslate(pointerMovingDistanceX, pointerMovingDistanceY);
    });

    window.addEventListener("mouseup", () => {
      this.resetPointerStartPosition();
    });

    this.element.addEventListener("mouseleave", () => {
      this.resetPointerStartPosition();
    });
  }

  // 要素の位置を取得する
  getCurrentPosition(): ElementPosition {
    const { top, left } = this.element.getBoundingClientRect();
    return { top, left };
  }

  // 要素の位置を移動する
  changeTranslate(movingDistanceX: number, movingDistanceY: number) {
    const x =
      this.elementStartPosition.left -
      this.elementInitialPosition.left +
      movingDistanceX;
    const y =
      this.elementStartPosition.top -
      this.elementInitialPosition.top +
      movingDistanceY;

    this.element.style.transform = `translate(${x}px, ${y}px)`;
  }

  // ポインターの動き始めの位置をリセット
  resetPointerStartPosition() {
    if (
      this.pointerStartPosition.x === null ||
      this.pointerStartPosition.y === null
    ) {
      return;
    }

    this.pointerStartPosition.x = null;
    this.pointerStartPosition.y = null;
  }
}

const movableElement = new MovableElement("element");

See the Pen MovableElement by Yoshiharu (@yoshiharu2580) on CodePen.

interface ElementPosition {
  top: number;
  left: number;
}

interface PointerPosition {
  x: number | null;
  y: number | null;
}

class MovableElement {
  // Elementオブジェクト
  private element: HTMLElement;
  // 要素の初期位置
  private elementInitialPosition: ElementPosition;
  // 要素の動き始めの位置
  private elementStartPosition: ElementPosition;
  // ポインタ-の動き始めの位置
  private pointerStartPosition: PointerPosition = {
    x: null,
    y: null
  };

  constructor(id: string) {
    this.element = document.getElementById(id);
    this.elementInitialPosition = this.getCurrentPosition();

    this.element.addEventListener("mousedown", (event: MouseEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.clientX;
      this.pointerStartPosition.y = event.clientY;
    });

    this.element.addEventListener("mousemove", (event: MouseEvent) => {
      if (
        this.pointerStartPosition.x === null ||
        this.pointerStartPosition.y === null
      ) {
        return;
      }

      const pointerMovingDistanceX = event.clientX - this.pointerStartPosition.x;
      const pointerMovingDistanceY = event.clientY - this.pointerStartPosition.y;
      this.changeTranslate(pointerMovingDistanceX, pointerMovingDistanceY);
    });

    window.addEventListener("mouseup", () => {
      this.resetPointerStartPosition();
    });

    this.element.addEventListener("mouseleave", () => {
      this.resetPointerStartPosition();
    });
  }

  // 要素の位置を取得する
  getCurrentPosition(): ElementPosition {
    const { top, left } = this.element.getBoundingClientRect();
    return { top, left };
  }

  // 要素の位置を移動する
  changeTranslate(movingDistanceX: number, movingDistanceY: number) {
    const x =
      this.elementStartPosition.left -
      this.elementInitialPosition.left +
      movingDistanceX;
    const y =
      this.elementStartPosition.top -
      this.elementInitialPosition.top +
      movingDistanceY;

    this.element.style.transform = `translate(${x}px, ${y}px)`;
  }

  // ポインターの動き始めの位置をリセット
  resetPointerStartPosition() {
    if (
      this.pointerStartPosition.x === null ||
      this.pointerStartPosition.y === null
    ) {
      return;
    }

    this.pointerStartPosition.x = null;
    this.pointerStartPosition.y = null;
  }
}

new MovableElement("element");

See the Pen MovableElement by Yoshiharu (@yoshiharu2580) on CodePen.

interface ElementPosition {
  top: number;
  left: number;
}

interface PointerPosition {
  x: number | null;
  y: number | null;
}

class MovableElement {
  // Elementオブジェクト
  private element?: HTMLElement;
  // 要素の初期位置
  private elementInitialPosition?: ElementPosition;
  // 要素の動き始めの位置
  private elementStartPosition?: ElementPosition;
  // ポインタの動き始めの位置
  private pointerStartPosition: PointerPosition = {
    x: null,
    y: null
  };

  constructor(id: string) {
    this.element = document.getElementById(id);
    this.elementInitialPosition = this.getCurrentPosition();

    this.element.addEventListener("mousedown", (event: MouseEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.clientX;
      this.pointerStartPosition.y = event.clientY;
    });

    this.element.addEventListener("mousemove", (event: MouseEvent) => {
      if (
        this.pointerStartPosition.x === null ||
        this.pointerStartPosition.y === null
      ) {
        return;
      }

      const pointerMovedDistanceX =
        event.clientX - this.pointerStartPosition.x;
      const pointerMovedDistanceY =
        event.clientY - this.pointerStartPosition.y;
      this.changeTranslate(pointerMovedDistanceX, pointerMovedDistanceY);
    });

    window.addEventListener("mouseup", () => {
      this.resetPointerStartPosition();
    });

    this.element.addEventListener("mouseleave", () => {
      this.resetPointerStartPosition();
    });
  }

  // 要素の位置を取得する
  getCurrentPosition(): ElementPosition {
    const { top, left } = this.element.getBoundingClientRect();
    return { top, left };
  }

  // 要素の位置を移動する
  changeTranslate(movingDistanceX: number, movingDistanceY: number) {
    const x =
      this.elementStartPosition.left -
      this.elementInitialPosition.left +
      movingDistanceX;
    const y =
      this.elementStartPosition.top -
      this.elementInitialPosition.top +
      movingDistanceY;

    this.element.style.transform = `translate(${x}px, ${y}px)`;
  }

  // ポインタの動き始めの位置をリセット
  resetPointerStartPosition() {
    if (
      this.pointerStartPosition.x === null ||
      this.pointerStartPosition.y === null
    ) {
      return;
    }

    this.pointerStartPosition.x = null;
    this.pointerStartPosition.y = null;
  }
}

new MovableElement("element");

See the Pen MovableElement by Yoshiharu (@yoshiharu2580) on CodePen.

interface ElementPosition {
  top: number;
  left: number;
}

interface PointerPosition {
  x: number | null;
  y: number | null;
}

class MovableElement {
  // Elementオブジェクト
  private element?: HTMLElement;
  // 要素の初期位置
  private elementInitialPosition?: ElementPosition;
  // 要素の動き始めの位置
  private elementStartPosition?: ElementPosition;
  // ポインタの動き始めの位置
  private pointerStartPosition: PointerPosition = {
    x: null,
    y: null
  };

  constructor(id: string) {
    this.element = document.getElementById(id);
    this.elementInitialPosition = this.getCurrentPosition();

    this.element.addEventListener("mousedown", (event: MouseEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.clientX;
      this.pointerStartPosition.y = event.clientY;
    });
    this.element.addEventListener("touchstart", (event: TouchEvent) => {
      this.elementStartPosition = this.getCurrentPosition();

      this.pointerStartPosition.x = event.changedTouches[0].clientX;
      this.pointerStartPosition.y = event.changedTouches[0].clientY;
    });

    window.addEventListener("mousemove", (event: MouseEvent) => {
      if (
        this.pointerStartPosition.x == null ||
        this.pointerStartPosition.y == null
      )
        return;

      const pointerMovedDistanceX = event.clientX - this.pointerStartPosition.x;
      const pointerMovedDistanceY = event.clientY - this.pointerStartPosition.y;
      this.changeTranslate(pointerMovedDistanceX, pointerMovedDistanceY);
    });
    window.addEventListener("touchmove", (event: TouchEvent) => {
      if (
        this.pointerStartPosition.x == null ||
        this.pointerStartPosition.y == null
      )
        return;

      const pointerMovedDistanceX =
        event.changedTouches[0].clientX - this.pointerStartPosition.x;
      const pointerMovedDistanceY =
        event.changedTouches[0].clientY - this.pointerStartPosition.y;
      this.changeTranslate(pointerMovedDistanceX, pointerMovedDistanceY);
    });

    window.addEventListener("mouseup", () => {
      this.resetPointerStartPosition();
    });
    window.addEventListener("touchend", () => {
      this.resetPointerStartPosition();
    });
  }

  // 要素の位置を取得する
  getCurrentPosition(): ElementPosition {
    const { top, left } = this.element.getBoundingClientRect();
    return { top, left };
  }

  // 要素の位置を移動する
  changeTranslate(movedDistanceX: number, movedDistanceY: number) {
    const x =
      this.elementStartPosition.left -
      this.elementInitialPosition.left +
      movedDistanceX;
    const y =
      this.elementStartPosition.top -
      this.elementInitialPosition.top +
      movedDistanceY;

    this.element.style.transform = `translate(${x}px, ${y}px)`;
  }

  // 要素の動き始めの位置をリセット
  resetPointerStartPosition() {
    if (
      this.pointerStartPosition.x == null ||
      this.pointerStartPosition.y == null
    )
      return;

    this.pointerStartPosition.x = null;
    this.pointerStartPosition.y = null;
  }
}

new MovableElement('element');

ここから色々応用できそう。

前置き

前回の続きです。
全てにおいて
https://note.com/aliz/n/nf7cfce1bb6ca
心構え
が大事になるので、ご確認を。

3-2.SEO内部対策

使いやすいサイトを作ること
ページ内の質をあげることです。
知りたい情報で検索をし、
たどり着いた先で
良質な情報が得られることが求められます！

なぜこれが重要なのかは
基礎編をご覧ください。
クローラー、インデクサ、インデックスなど

具体的な対策方法は2つ
・インデクサビリティの最適化
・クローラビリティの最適化

インデクサビリティの最適化

クローラーに適切に情報を
インデックスしてもらうために
分かりやすいサイト構造に
どのページにどの情報があるかを判別させる
具体的なポイントを下記で説明します。

大枠の構造が…
・パンくずリストの設置
・title要素の最適化
・meta要素の最適化
など
細かいpタグなどは別記事にて。

ページネーションは
サポート終了したため触れません。
複数のページ情報を
1連のまとまりのあるものと判別するために
rel=”next”とrel=”prev”を使用していました。
それを判別しなくなったということですね。
https://webmaster-ja.googleblog.com/2011/12/relnext-relprev.html

3-2-1.パンくずリストの設置?

ページ上部によくあるこれ、
クローラーが今どこにいて
どんな情報が得られるのか
判別しやすくなります?
多くても3階層くらいが良さそうです。

3-2-2.title要素の最適化

そのページの情報を簡潔に表す言葉のため非常に重要です！
・見出しタグにキーワードを入れる
　h1〜h6の中でも
　h1にはしっかりと
　検索されるキーワードを入れましょう！
　でもいくつも盛り込めないので、
　ターゲットを絞って選定?
　尚且つ、タイトルだけで内容が想定でき、
　想定通りの情報が書かれていることが◎✨
　前回の記事
　3-1-1.検索キーワードを選定
　で選定したキーワードを入れましょう。

・h1はページに1つ！
　それ以外はいくつ使用してもOKです！
　section内にh1を1つずつの場合、
　ペナルティはないけど
　原則ページに対して1つが良さそうです。

・h1〜h6の構造を守る
　h1の下にh3がきたりとかダメ

・文字数は30文字程度に
　検索表示結果で表示される字数がこれくらいだから

3-2-3.meta descriptionの最適化

ページの説明文にあたる部分です。
検索した時にタイトルの下に出るあれです。
要約文をスペニットして表示させています。
検索順位には、
あまり影響がないと言われていますが、
クリック率に影響があります。

・選定したキーワードを盛り込む
・文字数はスマホ50文字程度、PC120文字程度
ただし、
設定した文通りに
スペニットされるわけではない
というのが難しいところですね。
こちらのサイトが参考になります！
https://digital-marketing.jp/seo/what-is-a-description/#i

3-2-4.meta content="noindex"の最適化

基礎編でやった
2-2.インデックス
これをインデックスさせないことです。
これを活用して、
現在低品質なページをnoindexにし、
良質なページの割合を増やして
評価をあげることができます?
インデックスされているかどうかは
GoogleSearchConsoleで確認ができます?
https://search.google.com/search-console/welcome

noindexについては
ここが参考になります！
https://seolaboratory.jp/91446/

このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています??
これからも発信していくので、
ぜひフォローしてください♪
https://twitter.com/aLizlab

FizzBuzz問題とは

問題

1から100までの数をプリントするプログラムを書け。
ただし3の倍数のときは数の代わりに｢Fizz｣、5の倍数のときは｢Buzz｣とプリントし、
3と5の両方の倍数のときには｢FizzBuzz｣とプリントすること。

上記問題をFizzBuzz問題と言い、エンジニアの中では有名な問題らしいです。（恥ずかしながらつい最近まで知りませんでした..）
問題自体は、if文を使って一つずつ条件を書き、for文を使って1から100までループさせることで比較的簡単に解くことができます。

FizzBuzzコードゴルフ

しかし、これを可能な限り少ないコードで書こうとすると、とたんに難しくなります。
（問題の条件を満たすプログラムをできるだけ短い文字数で実現する競技をCode Golfと呼びます。）

長いこと考えた末、、

JS

for(i=1;i<101;i++){console.log(i%15?i%3?i%5?i:'Buzz':'Fizz':'FizzBuzz')}

条件演算子を駆使して、なんとか72文字の解までたどり着きました。

が、

ネットの海に潜ってJavaScriptの最短コードを探したところ、なんと62文字の最強の解が見つかりました。
それがこれ↓

JS

for(i=0;++i<101;console.log(i%5?x||i:x+'Buzz'))x=i%3?'':'Fizz'

「なんだこれ？、意味わからん..」と思い、コードの中身を調べていたところ
そのあまりに綺麗なロジックに感動してしまいました。。

以下その感動を伝えたい解説記事です。

※最短解引用元
ES2015時代のFizzBuzzに挑戦する - Qiita
FizzBuzz JavaScript solution · GitHub

コード解説

ポイントは3点。
（1）for文の{ }を省略
（2）基礎を踏まえた繰り返しの定義
（3）神の条件分岐ロジック

（1）for文の{ }を省略

通常for文を書くとき、

for () {
//処理の文
}

のように書きますが、「処理の文」が1つのときは文を囲む{ }を省略することができます。
つまり、

for ()//処理の文

のように書くことができ、
FizzBuzz最短解ではこのショートハンドを使用しています。

// 最短解
for(i=0;++i<101;console.log(i%5?x||i:x+'Buzz'))x=i%3?'':'Fizz'


// for文の{}を省略せずに書いた場合
for(i=0;++i<101;console.log(i%5?x||i:x+'Buzz')) {
  x = i%3 ? '' : 'Fizz';
}

でも正直まだ全然わかんない..

（2）基礎を踏まえた繰り返しの定義

最短解をよく見てみると、for文の( )の中にconsole.log()が記述されていることが分かります。

FizzBuzz解のfor文条件式

for(i=0; ++i<101; console.log(i%5?x||i:x+'Buzz'))

ここでJavaScriptのfor文の定義を振り返ってみましょう。

for文の定義

for ([initialization]; [condition]; [final-expression]) statement

第1引数のinitializationは変数宣言であり、たいていはカウンタ変数を初期化するために使われます。
FizzBuzz解でもi = 0;とループの初期値を定義しています。

第2引数のconditionはループの各反復の前に評価される式です。
この式がtrueに評価された場合のみ、その後のstatementが実行されます。
FizzBuzz解では++i<101;という定義になっていますが、
これはi=i+1が101より小さいときに、式がtrueとなりループが実行されるということです。

第3引数のfinal-expressionはループの各反復の終わりに評価される式です。
FizzBuzz解ではそこにconsole.log()を記述しているため、for文の各反復における処理の文が実行された後（反復の終わり）に、テキストが表示されるようになっています。

ここまでの内容を要約すると、

• 各反復の初めにi=i+1が実行され（iの初期値は0）、その数が101より小さい時にfor文の処理が実行される。
• 各反復でfor文の処理が実行された後に、console.log()が実行される。

となり、
さらにコード形式でまとめると、

// for文の定義
for ('①変数定義';
     '②ループの各反復の前に評価される式';
     '③ループの各反復の終わりに評価される式')
    {'②がtrueの時に実行される処理'}

// FizzBuzz最短解にあてはめる
for (i=0;
     ++i<101; // i=i+1が101より小さい時、つまりi+1が1〜100の時にループが実行される
     console.log(i%5?x||i:x+'Buzz')) // よってconsole.log()が100回実行される
    { x = i%3 ? '' : 'Fizz'; }

ということになります。
だいぶ見えてきたけど、まだ表示されるテキスト部分が分からんぞ？

（3）神の条件分岐ロジック

(3)-1 反復処理の内容

次にFizzBuzz最短解において、for文で反復実行される処理の内容を見ていきます。

FizzBuzz解の反復処理の内容

x = i%3 ? '' : 'Fizz';

この文はif文のショートハンドである条件演算子を使用しており、

条件演算子を使った条件分岐

'条件式' ？ 'trueの場合の処理' : 'falseの場合の処理';

i%3がtrueの時はx=''、falseの時はx='Fizz'となるよう変数xを定義しています。

補足1：%演算子
割り算の余りを求めることができる。i%3はiを3で割った余り。
ある整数を3で割って余りが0ならその数は3の倍数であると言える。

補足2：JavaScriptのtrue/false
0はboolean型でfalseの初期値を持つ。他にもnullやundefined、 ''（空文字）などもfalseとなる。
逆にその値がundefinedやnullでないオブジェクトは、条件文に通されると全てtrueに評価される。

今回の条件分岐をif文で書くと、

if文による条件分岐の書き換え

if ( i%3 ) {
  x = '';     // iが3の倍数ではないとき
} else {
  x = 'Fizz'  // iが3の倍数のとき
}

こうなり、
また表にまとめると、

こうなります。

(3)-2 console.log()で表示するテキスト

いよいよ最後！
実際にconsole.log()で表示されるテキストを見てみます。

FizzBuzz解において各反復後に実行される処理

console.log(i%5?x||i:x+'Buzz')

これを半角スペースを入れて少し分かりやすく書くと、

console.log( i%5 ? x||i : x+'Buzz')

条件演算子を使った(3)-1と同様の条件分岐であることが分かり、
i%5がtrueの時はx||iを、falseの時はx+'Buzz'を表示するよう定義されていることが理解できます。

これを表でまとめると、

こうなり、
さらに(3)-1で解説したxの値と合わせてまとめたものが以下の表になります。

注目すべきは、x||iの部分。
論理演算子である||は、xがtrueの場合はxの値をそのまま返し、falseの場合はiを返します。
これによって、iが3の倍数の時は'Fizz'を表示し、そうでない時は1から100の数字であるiをそのまま表示できるようになっています。

4つの場合分けパターンに合わせた、神がかった条件定義はまさに感動モノ..

まとめ

解説は以上です！
ここまでの内容を理解できていれば、FizzBuzz最短解のコードロジックも読み取れるはず！

FizzBuzz最短解

for(i=0;++i<101;console.log(i%5?x||i:x+'Buzz'))x=i%3?'':'Fizz'

改めて見ても.. これ考えた人天才だ....

参考にしたサイト

for - JavaScript | MDN
条件 (三項) 演算子 - JavaScript | MDN
代入演算子 - JavaScript | MDN
論理演算子 - JavaScript | MDN
Boolean - JavaScript | MDN
JavaScript ショートコードテクニック集（ES6含む） - Qiita

基本的な実装の仕方と、実装した場合 / しなかった場合、で実際にどういう動作をするか〜、について書きます。

Linux, Node.js 12.13.0, での話だけをします。

Graceful shutdown ?

Express (Node.js) に限りませんが、Web サーバーを停止する際、クライアントから接続中のリクエスト (リクエスト受付してまだレスポンスしていない接続) はどうなるでしょうか？

Graceful shutdown とは一般的に以下の停止を指します。

• 停止指示後に、新しい接続を受付しない
• 残った処理中の接続が完了するのを待ってから、プロセスを安全に停止する

SIGNALs

そもそも Web サーバープロセスはどうやって停止するかというと、 SIGNAL を用いて停止します。

具体的には下表の通り、コマンド等によって SIGNAL を送信できます。

SIGNAL	kill command	Linux Terminal	Kubernetes	実装依存	説明
SIGHUP	kill -SIGHUP {pid}	--	--	Yes	プロセスが端末から切断された際のシグナル
SIGINT	kill -SIGINT {pid}	CTRL + C	--	Yes	割り込み
SIGKILL	kill -SIGKILL {pid}	--	SIGTERM 送信から30秒後に送信	NO	プロセスの実装に依存しないOSからの強制終了
SIGTERM	kill {pid}	--	最初に送信	Yes	プロセスの終了

最近では、プロセスを Docker コンテナ化して、 Kubernetes 等のプラットフォーム上で動かす事が多いと思います。

例えば Kubernetes では、プロセス (Docker コンテナ) を終了する際は、まず SIGTERM が送信され、30秒待ってもプロセスが終了しない場合、最終的に SIGKILL が送信されます。

実装例

URL /sleep と、 SIGNAL SIGTERM での Graceful shutdown を Express で実装しました。

index.js

const express = require('express');

const SLEEP_MSEC = 30 * 1000;
const app = express();

app.get('/sleep', (req, res) => {
  setTimeout(() => res.send('OK'), SLEEP_MSEC);
});

const server = app.listen(3000, () => console.log('Example app listening on port 3000!'));

process.on('SIGTERM', () => {
  server.close(() => {
    console.log('Process terminated.')
  })
});

実行します。

$ node index.js

Example app listening on port 3000!

ブラウザで以下の URL にアクセスすると、30秒待たされた後 OK と表示されます。

• http://localhost:3000/sleep

[未実装で] 実際に停止してみる

まずは 未実装の状態で どう動作するか検証します。

Express サーバーを起動した後、ブラウザで http://localhost:3000/sleep にアクセスします。
まだリクエストの処理中に SIGNAL を送信します。

(1) SIGHUP

シグナルを送信でプロセスが即座に停止。

kill -SIGHUP {pid}

Hangup: 1

(2) SIGINT

シグナルを送信でプロセスが即座に停止。

kill -SIGINT {pid}

(terminal 上の出力はなし)

(3) SIGKILL

シグナルを送信でプロセスが即座に停止。

kill -SIGKILL {pid}

Killed: 9

(4) SIGTERM

シグナルを送信でプロセスが即座に停止。

kill {pid}

Terminated: 15

[SIGTERM 実装で] 実際に停止してみる

実装していない SIGTERM 以外のシグナルは省略。

(5) SIGTERM

ブラウザで http://localhost:3000/sleep にアクセスする。

応答がすぐには帰ってこず、ローディング状態になります。

シグナルを送信します。

kill {pid}

プロセスは実行されたまま、無反応。

(terminal 上の出力はなし)

ブラウザから新しいタブを開いて http://localhost:3000/sleep に追加でアクセスする。

TCP 接続が拒否され、ブラウザ上に「正常に接続できませんでした」と表示される。

1度目のブラウザからのリクエストが 30 秒後に正常に応答が返り、プロセスが終了する。

Process terminated.

基本的な実装の仕方と、実装した場合 / しなかった場合、で実際にどういう動作をするか〜、について書きます。

Linux, Node.js 12.13.0, での話だけをします。

Graceful shutdown ?

Express (Node.js) に限りませんが、Web サーバーを停止する際、クライアントから接続中のリクエスト (リクエスト受付してまだレスポンスしていない接続) はどうなるでしょうか？

Graceful shutdown とは一般的に以下の停止を指します。

• 停止指示後に、新しい接続を受付しない
• 残った処理中の接続が完了するのを待ってから、プロセスを安全に停止する

SIGNALs

そもそも Web サーバープロセスはどうやって停止するかというと、 SIGNAL を用いて停止します。

具体的には下表の通り、コマンド等によって SIGNAL を送信できます。

SIGNAL	kill command	Linux Terminal	Kubernetes	実装依存	説明
SIGHUP	kill -SIGHUP {pid}	--	--	Yes	プロセスが端末から切断された際のシグナル
SIGINT	kill -SIGINT {pid}	CTRL + C	--	Yes	割り込み
SIGKILL	kill -SIGKILL {pid}	--	SIGTERM 送信から30秒後に送信	NO	プロセスの実装に依存しないOSからの強制終了
SIGTERM	kill {pid}	--	最初に送信	Yes	プロセスの終了

最近では、プロセスを Docker コンテナ化して、 Kubernetes 等のプラットフォーム上で動かす事が多いと思います。

例えば Kubernetes では、プロセス (Docker コンテナ) を終了する際は、まず SIGTERM が送信され、30秒待ってもプロセスが終了しない場合、最終的に SIGKILL が送信されます。

Kubernetes - Pods - Termination of Pods

実装例

URL /sleep と、 SIGNAL SIGTERM での Graceful shutdown を Express で実装しました。

index.js

const express = require('express');

const SLEEP_MSEC = 30 * 1000;
const app = express();

app.get('/sleep', (req, res) => {
  setTimeout(() => res.send('OK'), SLEEP_MSEC);
});

const server = app.listen(3000, () => console.log('Example app listening on port 3000!'));

process.on('SIGTERM', () => {
  server.close(() => {
    console.log('Process terminated.')
  })
});

実行します。

$ node index.js

Example app listening on port 3000!

ブラウザで以下の URL にアクセスすると、30秒待たされた後 OK と表示されます。

• http://localhost:3000/sleep

[未実装で] 実際に停止してみる

まずは 未実装の状態で どう動作するか検証します。

Express サーバーを起動した後、ブラウザで http://localhost:3000/sleep にアクセスします。
まだリクエストの処理中に SIGNAL を送信します。

(1) SIGHUP

シグナルを送信でプロセスが即座に停止。

kill -SIGHUP {pid}

Hangup: 1

(2) SIGINT

シグナルを送信でプロセスが即座に停止。

kill -SIGINT {pid}

(terminal 上の出力はなし)

(3) SIGKILL

シグナルを送信でプロセスが即座に停止。

kill -SIGKILL {pid}

Killed: 9

(4) SIGTERM

シグナルを送信でプロセスが即座に停止。

kill {pid}

Terminated: 15

[SIGTERM 実装で] 実際に停止してみる

実装していない SIGTERM 以外のシグナルは省略。

(5) SIGTERM

ブラウザで http://localhost:3000/sleep にアクセスする。

応答がすぐには帰ってこず、ローディング状態になります。

シグナルを送信します。

kill {pid}

プロセスは実行されたまま、無反応。

(terminal 上の出力はなし)

ブラウザから新しいタブを開いて http://localhost:3000/sleep に追加でアクセスする。

TCP 接続が拒否され、ブラウザ上に「正常に接続できませんでした」と表示される。

1度目のブラウザからのリクエストが 30 秒後に正常に応答が返り、プロセスが終了する。

Process terminated.