Ubiregi Advent Calendar 2019 4日目はラズパイとMESHを使ったお手軽IoTを紹介します。

作るもの

MESHブロックの「ボタン」を押すと、Slackに決まったメッセージが投稿される、という非常に簡単なものを作ります。
応用としてはラズパイにモニタを付けてドアホンとして使う、見たいのはアリかなとか思っています。一人暮らしだと留守の間、人が訪問してきてるか分からない問題があり、代わりにMESHボタンを配置しておけば人が来たことをスマホに通知する、みたいなことができてよさそうです。

用意するもの（今回使ったもの）

• MESHのボタンブロック
• Raspberry Pi Zero WH（以下ラズパイ）
• スマホ

前提条件

• ラズパイでRaspbianが動くようになっていること
• MESHアプリがスマホにインストールされていること
• Slackのアカウントを持っていること

手順

ラズパイを「MESHハブ」にする

これに関しては公式が非常に手厚いので、そちらを参照した方がよいです。

Raspberry Piに「MESH ハブ」アプリをインストールする方法を教えてほしい – MESHサポート | 遊び心を形にできる、アプリとつなげるブロック形状の電子タグ

補足

今回使ったラズパイはZeroなので、ブラウザを立ち上げると大変重たいです。
ということで、上記手順のブラウザでアクセスする部分は通常のPCで行ない、
②Raspberry Piにログインしてダウンロード用のコマンドを実行する方法
のコマンドをコピーしてSSH経由でダウンロードするのが楽だと思います。

Incoming WebhookのURLを取得

事前に通知先のチャンネルを決める／作るなどしておきます。

次に、
SlackのIncoming Webhooksを使い倒す - Qiita
を参考にIncoming Webhookを追加してURLをコピーしましょう。
メモ帳でもなんでもいいのでURLを退避させておくことをおすすめします（次で使います）。

PythonでServerを書く

Pythonを使っているのは単純に僕がPythonをよく使うので使っている感じなので、同じことができれば言語は何でもいいです。
ちなみにRasbianはデフォルトでPythonがインストールされているため特にPythonそのものをインストールしたりする必要はありません。
なお、今回使用したPythonのバージョンはPython 2.7.13となります。

MESHからラズパイのプログラムを叩くための簡単なHTTP Serverを作ります。
今回はbottleという軽量マイクロWebフレームワークを使いました。

事前準備

ソースコード内で使用するライブラリをpipでインストールしておきます。
(requestsはSlackをたたきに行くときに使います）

$ pip install bottle requests

ソースコード

場所はどこでもいいので適当なところにファイルを作り、下記ソースコードを書きます。
名前は何でもいいですが今回はserver.pyとしました。
（「ラズパイ版MESHを使って、Apple Watchで操作するおしゃべりロボットを作る - Qiita」を参考にしました）

server.py

# -*- coding: utf-8 -*-

from bottle import route, run, template
import json
import requests

slack_settings = {
    # channel_nameは任意で変えましょう
    # こうしておくと他のチャンネルにも通知したくなったとき設定を増やしやすいのでこうしてあります
    'channel_name': {
        'url'    : '{「Incoming WebhookのURLを取得」の工程で取得したURL}',
        'botname': 'test',
        'icon'   : ':muscle:',
        'message': '<!here>\nMESHからの通知だよ'
    }
}

def push(setting):
    datas = {
        'username'   : setting['botname'],
        'icon_emoji' : setting['icon'],
        'text'       : setting['message'],
        'contentType': 'application/json'
    }
    payload = json.dumps(datas)
    result  = requests.post(setting['url'], payload)
    print(result)

@route('/post/slack/<command>')
def mesh_button(command):
    if command == 'channel_name':
        push(slack_settings['channel_name'])
    else:
        raise Error

サーバの起動

以下コマンドでサーバを起動します。特に難しいことは無いと思います。

$ python server.py

上手く起動すればこんな表示が出ます。

Bottle v0.12.17 server starting up (using WSGIRefServer())...
Listening on http://localhost:8080/
Hit Ctrl-C to quit.

試しにcurlで叩いて試してみましょう。python server.pyをしているコンソールを閉じてしまうとサーバが止まってしまうので、別コンソールを開きましょう（SSH接続してる場合も）。

$ curl http://localhost:8080/post/slack/channel_name

サーバを起動している側に

<Response [200]>
127.0.0.1 - - [04/Dec/2019 13:46:15] "GET /post/slack/channel_name HTTP/1.1" 200 0

というログが出ると思うので、出ていれば成功です。

MESH SDKからカスタムブロックを作成する

MESHではブロックと呼ばれる定型処理を線でつなぐことで処理を作っていきます。
（のちに設定します）
ということで、先ほど作成したserver.pyのURLを叩くブロックを作成しておく必要があるんですね。なので、まずはそれを先に作ります。

カスタムブロック作成ページへアクセス

SDK_TOP_JPにアクセスします。
「MESH SDKを使う」からカスタムブロックの管理画面に行けます。

カスタムブロックを作成する

Create New Blockをクリックすると、カスタムブロックの作成画面になるので設定していきます。
設定は下記の通りです。一通り設定できたら左上の「Save」をクリックして保存しましょう。

Codeに設定したソースコード

var localhost = 'http://localhost:8080' + properties.path;

ajax({
  url    : localhost,
  type   : 'get',
  timeout: 5000,
  success: function (data) {
    callbackSuccess({
      resultType : 'continue'
    });
  },
  error: function(request, errorMessage) {
    log('ERROR: ' + errorMessage);
    callbackSuccess({
      resultType: 'continue'
    });
  }
});

return {
  resultType: 'pause'
}

設定の簡単な説明

この辺の設定は「ラズパイ版MESHを使って、Apple Watchで操作するおしゃべりロボットを作る - Qiita」を参考にしました。

Connector

これはInput Connectorのみを設定しました。
あとでMESHアプリを触れば分かるんですが、MESHのブロックにはInputとOutputがあります。
今回はボタンを押したあとこのカスタムブロックの処理を起動して終わりという感じになるので、Output Connectorには設定なしという状態です。
もしもこのカスタムブロックが動いた後に何か他のことをしたいとなったら、Output Connectorの方にも設定が必要です。

Property

これはコード内で参照できるプロパティを作れるものになります。カスタムブロック配置時に、プロパティの値をいじれます。なので、例えば別のチャンネルに通知したくなったとかでも、ブロックを新しく作る必要はなく、配置するときにプロパティの値だけいじればOKみたいな風にできるということです。

Code

これはカスタムブロックがキックされたときに実行されるJavaScriptのコードになります。コードがキックされたら、Ajaxで先ほどPythonで書いたサーバを叩きに行ってます。

MESHアプリでレシピを作成する

MESHアプリの簡単な説明

MESHを使って処理を作るには必ずMESHアプリで「レシピ」を作る必要があります。このレシピはMESHアプリからでないと作れません。ラズパイで動作させるレシピもMESHアプリから作ることになります。

MESHハブの登録

事前準備として、スマホとラズパイのBluetoothはオンにしておきましょう。
スマホからMESHアプリを起動します。右上にスマホマークがありますが、これをタップすると以下の「他の端末に変更する」っていうのが出てくると思うのでこれをタップします。

すると「端末を選ぶ」画面になるので、サインインして「ハブの追加」をタップします。

「ハブの追加」をタップすると次の画面になります。「セットアップを始める」をタップして次へ行きましょう。

この画面も「次へ」で進みます。

スマホとラズパイの接続に成功すると以下の画面になります。もし何分待ってもつながらないということであれば、Bluetoothを確認するか、ラズパイがセットアップ可能な状態か確認しましょう（画面に表示されているリンクをタップすればやり方が書いてあると思います）。

この画面ですが、ラズパイのWi-Fi設定をするかしないかの画面です。有線で接続してしまっている場合は別ですが、基本的にはWi-Fiの接続も終わっているはずなのでスキップします。

適当にハブの名前を決めて次へ進めます。

上手くいくと最終的にこの画面になるので、先ほど追加したラズパイのMESHハブを選択して、画面下の「選択」をタップしましょう。

ブロック／カスタムブロックの追加・レシピの作成

※この工程を始める前にスマホのBluetoothを切っておくことをおすすめします。MESHブロックの電源を入れると、スマホの方とペアリングしようとしてきますが、ペアリングの相手はラズパイです。スマホのBluetoothを切っておかないと、MESHは永遠にスマホにペアリングしようとしてくるのでラズパイとペアリングしてくれません。

アプリトップの画面で「新しいレシピ」をタップするとこの画面になります。まずはMESHブロックを追加しましょう。MESHブロックの電源を入れ、左下の「ブロック 追加」のプラスマークをタップしましょう。
（電源はMESHブロックのシリコン素材部分を長押しで入ります、もし入らない場合は充電してください）

上手く追加できると左下のブロックのところに「ボタンブロック」が表示されるので、タップしてドラッグして配置しましょう。下記画面のようになるはずです。

次にカスタムブロックを追加します。先ほどWeb画面でJavaScriptのコードを登録したりしたものです。上画面に映っていますが「カスタム 追加」のプラスマークをタップすると追加画面へ行けます。そうすると以下のように先ほど登録したカスタムブロックが表示されるので、タップして、「追加」ボタンをタップします。

無事追加できたと思うので、先ほど「ボタンブロック」を配置したのと同じ要領でカスタムブロックを配置し、ボタンブロックの端とカスタムブロックの端を下記のようにつなげます。配置済みのボタンブロックからカスタムブロックまでをドラッグすれば線でつなぐことができます。

補足

配置したカスタムブロックをタップするとこのような画面になります。ここでプロパティの値をいじれるんですね。Pythonのサーバ側プログラムを変更すれば、同じカスタムブロックでここのPathを変えれば動作を変えられるというわけです。

動作確認

以上で設定は終わったので、MESHのボタンを押してみましょう。Slackに投稿がされれば成功です。

まとめ

以上でMESHのボタンを押したらSlackで通知する（ラズパイ経由で）が完成しました。
手順は結構多いですが、お気づきの通り書いたソースコードは僅かです。そもそもラズパイのインストールができないといけないみたいなハードルはありますが、それさえ超えてしまっていれば割とサクッとできてしまいます。
MESHはボタン以外にもLED、人感センサー、動きセンサー、温度湿度センサー、明るさセンサー、GPIOと様々なブロックがあります。強みとして、（GPIOを除いて）電子工作が全くできなくてもIoTの自作ができてしまうというところにあります。電子工作ってなるとどうしても多少電気電子の知識が必要になってくるので、普通にソフトウェアエンジニアをしてきた人からすると若干ハードルが高かったりするんですよね。しかしMESHタグなら電子工作の知識がほぼ不要で、ソフトウェアでほとんどのことがなぎ倒せるのでオススメです。
ちなみに物理的に何かしたいけど電子工作の知識がない…とかであれば、Ejectコマンドっていう大変便利なものがあるのでそれを使ってみるといいかもしれません（参考：EjectコマンドをRaspberry Piで遊ぼう ～CD-ROMドライブでかんたん工作～）。

はじめに

JavaScript Advent Calendar 2019の4日目です。
本日は@watsuyo_2が「2019年 よく使ったJavaScriptたちをまとめる」を記事にします！

フロントエンドエンジニア1年目を振り返りながら、これからJavaScriptを学ぶ人やよく使うメソッドを知りたい人がわかりやすいようにまとめます。
普段、 Nuxt.js(Vue.js) と Firestore を使用した開発をしているので例としてでてきますがご了承ください。

↓は1年前に転職するまでの流れを書いた記事にあります。
新年からWebエンジニアになる僕に2018年、起こったこと

Array.prototype.map()

配列の要素をひとつひとつ取り出し、第一引数の値(例で言うx)を元に処理を行い、その結果から新たな配列を作れる

実務的な例

よく使うパターンとして、オブジェクト配列をそれぞれ取り出して、Firestoreにデータ更新、取得するような時に使います。

const todos = [
  { id: 'H6BHBW7WS7H8DAT8HAK', content: '早起きする' },
  { id: 'HGX3DMZ9ZT8GN7KHYUY', content: '早く寝る' },
  { id: '4MT32NDNS6XFJUNGRPH', content: '牛乳を買う' },
  { id: 'PHCXSNTRVZHNAJYWJT6', content: 'Youtubeは1日2時間まで' }
]

todos.map(todo => (
  firebase.firestore().collection(`todos/${todo.id}`).update({ todo.content })
))

Array.prototype.filter()

配列の要素をひとつひとつ取り出し、第一引数の値(例で言うx)を元に比較を行い、trueだった結果から新たな配列を作れる

実務的な例

オブジェクト配列をそれぞれ取り出して、特定の要素を削除する場合などで使いました。

const todos = [
  { id: 'H6BHBW7WS7H8DAT8HAK', content: '早起きする' },
  { id: 'HGX3DMZ9ZT8GN7KHYUY', content: '早く寝る' },
  { id: '4MT32NDNS6XFJUNGRPH', content: '牛乳を買う' },
  { id: 'PHCXSNTRVZHNAJYWJT6', content: 'Youtubeは1日2時間まで' }
]

// 特定のtodo.idが'PHCXSNTRVZHNAJYWJT6'以外の配列を作成
const deleteOne = () => todos.filter(todo =>
  todo.id != 'PHCXSNTRVZHNAJYWJT6'
)

console.log(deleteOne())
// [
//   { id: 'H6BHBW7WS7H8DAT8HAK', content: '早起きする' },
//   { id: 'HGX3DMZ9ZT8GN7KHYUY', content: '早く寝る' },
//   { id: '4MT32NDNS6XFJUNGRPH', content: '牛乳を買う' }
// ]

Array.prototype.find()

配列の要素をひとつひとつ取り出し、第一引数の値(例で言うx)を元に比較を行い、trueだった結果を取得する

実務的な例

オブジェクト配列をそれぞれ取り出して、配列中の特定の要素を抽出する場合などで使いました。

const todos = [
  { id: 'H6BHBW7WS7H8DAT8HAK', content: '早起きする' },
  { id: 'HGX3DMZ9ZT8GN7KHYUY', content: '早く寝る' },
  { id: '4MT32NDNS6XFJUNGRPH', content: '牛乳を買う' },
  { id: 'PHCXSNTRVZHNAJYWJT6', content: 'Youtubeは1日2時間まで' }
]

const pickUpTodo = () => todos.find(todo =>
  todo.id === 'PHCXSNTRVZHNAJYWJT6'
)

console.log(pickUpTodo()) //{ id: 'PHCXSNTRVZHNAJYWJT6', content: 'Youtubeは1日2時間まで' }

Array.prototype.push()

配列に新しい要素を追加する

実務的な例

配列になにか新しい要素を追加する場面はよく遭遇しました。

const todos = [
  { id: 'H6BHBW7WS7H8DAT8HAK', content: '早起きする' },
  { id: 'HGX3DMZ9ZT8GN7KHYUY', content: '早く寝る' },
  { id: '4MT32NDNS6XFJUNGRPH', content: '牛乳を買う' },
  { id: 'PHCXSNTRVZHNAJYWJT6', content: 'Youtubeは1日2時間まで' }
]

todos.push({ id: 'WRABJ9IY4RJML7L4OB2', content: 'リーダブルコードを読む' })

console.log(todos)
// [
//  { id: 'H6BHBW7WS7H8DAT8HAK', content: '早起きする' },
//  { id: 'HGX3DMZ9ZT8GN7KHYUY', content: '早く寝る' },
//  { id: '4MT32NDNS6XFJUNGRPH', content: '牛乳を買う' },
//  { id: 'PHCXSNTRVZHNAJYWJT6', content: 'Youtubeは1日2時間まで' },
//  { id: 'WRABJ9IY4RJML7L4OB2', content: 'リーダブルコードを読む' }
// ]

String.prototype.match()

正規表現に対して文字列のマッチングし、マッチすればtrue、しなければfalseを返します。

実務的な例

入力されたデータに対し、バリデーションをかける時などでよく使いました。

const telA = '070-7374-0044'
const telB = '09024570411' 

console.log(telA.match(/^(0{1}\d{9,10})$/g)) // null
console.log(telB.match(/^(0{1}\d{9,10})$/g)) // true

三項演算子

if文の省略的な立ち位置になります。
以下がif文と三項演算子との対照表です。

パターンA: if文

const hoge = 0

if(hoge === 0) {
  return 'fuga'
} else {
  return 'hoge'
}

パターンB: 三項演算子

const hoge = 0

hoge === 0 ? 'fuga' : 'puge'

実務的な例

実務では上記の例のように全く対象のものとしては捉えておらず、可読性を重視します。
特にreturnで結果だけが欲しい場合では三項演算子を使うことが多いです。

例えばVue.js×TypeScriptに限る話になりますが、computed内で値がthisを使って参照する値が存在するかをチェックし、存在すればその値を返し、無ければnullを返す場合に使います。

computed: {
  todo (): Terms | null {
    return this.todo.titles ? todo.titles : null
  }
},

おわりに

今回、例としてあげた部分はほんの一部で、その他にもたくさんありますので奥は深いです。
振り返ってみても、JavaScriptフレームワークが様々な現場で普及している2019年ですが、基本的なメソッドや書き方は初心忘れるべからずということで押さえておきましょう。

メンションつきツイートをしていただけるとたいへん喜びます！

thanks-mentionsというQiitaの記事を作者に対してメンションを飛ばしながらツイートが出来るPWAを作りました?
ぜひ、メンションつきツイートをしていただけるとたいへんとてもとても喜びます！

JavaScript Advent Calendar 2019

JavaScript Advent Calendar 2019明日の担当は、
@okumurakengoさんです！

はじめに

いなたつアドカレの四日目の記事です。

今回はVue.jsで使えるちょっとかっこつけたおしゃんてぃなimport方法について書いてくぜ

じっそー

router.js

const loadView = view => () => import(`./views/${view}.vue`)

export default new Router({

  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: loadView('Home')
    },
    {
      path: '/about',
      name: 'about',
      component: loadView('About')
    }
  ]
})

こんなかんじですね、前提として、viewに関するファイルがviewsディレクトリにまとまっているとおもってください。

loadViewで引数viewを受けて無名関数を高階的にimportする関数を返却しています。
これで、import文を別に何度も書く必要がなく、importすることができ、すこしおしゃんてぃな感じが醸し出せます。

今日は基礎的な検索フォームについて
書こうと思います。

基本形

まず基本形として
HMTL要素を書き換えるコードを例として書きます。

①submitのidからクリックアクションが会ったらイベントが発火
②keywordのidから入力要素取得
③resultのidへtextを入力内容に変更(仮)

という手順です。

使用するHTMLは

html

<body>
    <div class="form-group">
      <input type='text' id="keyword" class="form-control" placeholder="好きなフルーツを入力してください">
      <button type="button" id="submit" class="btn">検索</button>
    </div>
    <p id="result"></p>
  </body>

このような形を使用します。

まずコードの雛形について説明していきます。

基本形

$(function() {
  $("#submit").on("click", function() { //①submitのidからクリックアクションが会ったらイベントが発火
    let input = $("#keyword").val(); //②keywordのidから入力要素取得
    $("#result").text(input); //③resultのidへtextを入力内容に変更(仮)
  });
});

入力内容と同一のものを検索

まずeach構文で配列の全ての要素を引っ張ってきます。

jQuery

$.each(fruits, function(i, fruit) {
    // 配列の要素fruitと入力した値が一致するかどうかの処理を書く
    // 一致したらループ抜ける
});

jQUery

var fruits = ['リンゴ', 'バナナ', 〜〜];

$(function() {
  $("#submit").on("click", function() {
    let input = $("#keyword").val();
    $.each(fruits, function(i, fruit) { //each構文を設定
      if (input === fruit) { //if構文で入力内容と同一のものを条件に
        $("#result").text(input); //text内容入力内容に変更
        return false; //一致するものを確認したらRubyで言うbreak文で終わります。
      } 
    });
  });
});

一致するものがなかった時

例外文の場合の記述はこうです。

jQUery

//(省略)
return false;
      } else {
        $("#result").text("一致する果物はありませんでした。");
      }
//(省略)

一部の言葉で検索

「パイ」と検索したら「パインとパイナップル」が一致するので
この2つのフルーツが表示されるようにしましょう。
このように単語の前方と一致する単語を検索することを前方一致といいます。
前方一致で検索をするには、正規表現を使う必要があります。

また複数の検索結果の出力になるので
下記のようなhmtlの設定もした方がいいです。

hmtl

<ul id="list"></ul>

基本的な構文はこちら

jQuery

// 正規表現オブジェクトに変換
let reg = new RegExp("前方一致");

// matchメソッドで一致したらtrueかfalseを戻す
match(reg);

例文を作ってみるとこうです。
三つのコードに分けて記述されています。
①変数listにidがlistを設定
②appendList関数を設定
③submitイベントを設定
という内容です。

jQuery

$(function() {
  let list = $("#list"); //①変数listにidがlistを設定

  function appendList(word) { //②appendList関数を設定
    let item = $('<li class="list">').append(word); //引数wordにlistクラスを追加
    list.append(item); //変数listにitemを追加
  }

  $("#submit").on("click", function() { //③submitイベントを設定
    let input = $("#keyword").val(); //input内容を取得
    let reg = new RegExp("^" + input); //正規表現での前方一致検索

    $(".list").remove(); //listクラスの削除

    $.each(fruits, function(i, fruit) { //each構文の設定
      if (fruit.match(reg)) { //fruitより一致内容検索
        appendList(fruit); //一致した内容を②に飛ばします。
      }
    });

    if ($(".list").length === 0) { //一致する内容がなかった場合
      appendList("一致する果物はありませんでした");
    }
  });
});

複数の言葉で検索

複数の言葉でも検索できるようにしましょう。
「パ リ」と検索された場合、「パイン, パイナップル, リンゴ, パリ」が一致するので
これら4つが表示されるようにします。

加えた記述主に
④各要素を正規表現で検索の仕様変更。
⑤複数の検索ワードを検索。

です。

完成形はこちら

jQuery

var fruits = ['リンゴ', 'バナナ', 〜〜];

$(function() {
  let list = $("#list");

  function appendList(word) {
    let item = $('<li class="list">').append(word);
    list.append(item);
  }

  function editElement(element) {
    let result = "^" + element;
    return result;
  }

  $("#submit").on("click", function() {
    let input = $("#keyword").val();
    let inputs = input.split(" "); 
    let newInputs = inputs.map(editElement); 
    let reg = RegExp(newInputs.join("|"));

    $(".list").remove();

    $.each(fruits, function(i, fruit) {
      if (fruit.match(reg)) {
        appendList(fruit);
      }
    });

    if ($(".list").length === 0) {
      appendList("一致する果物はありませんでした");
    }
  });
});

加えた内容だけ表示すると

jQuery

//(省略)

  function appendList(word) {
    let item = $('<li class="list">').append(word);
    list.append(item);
  }

  function editElement(element) { //④各要素を正規表現で検索の仕様にします。
    let result = "^" + element;
    return result;
  }

  $("#submit").on("click", function() { //⑤複数の検索ワードを検索します。
    let input = $("#keyword").val();
    let inputs = input.split(" "); //入力内容から配列を作成,引数に設定した空欄で分けます。
    let newInputs = inputs.map(editElement); //mapを使って要素を加工した新しい配列を作成します。
    let reg = RegExp(newInputs.join("|")); //joinを使って|で配列の要素をつないだ正規表現を作成します。

    $(".list").remove();

//(省略)

splitを使って文字列から配列を作成する

split()
split()は、文字列を複数の部分文字列に区切り、文字列の配列に分割します。引数には文字列を区切るための文字を指定します。

jQuery

let inputs = input.split(" ");

mapを使って要素を加工した新しい配列を作成する

map()
map()は、配列から要素を1つずつ取り出し、引数に与えられた関数の処理を行った結果から新しい配列を作ります。

jQuery

let newInputs = inputs.map(editElement);

joinを使って|で配列の要素をつないだ正規表現を作成する

join()
join()は、配列のすべての要素をつないだ文字列を作成します。
引数に文字列を渡すと、その文字列で文字と文字をつなげます。

jQuery

let reg = RegExp(newInputs.join("|"));

複数の言葉で正規表現を使用するには|を使って言葉を繋げます。
複数の言葉が要素の配列newInputsの要素を|でつなぐことで複数検索ができるようにします。

join()の引数に|を渡すことでnewInputsの要素を|でつないでいます。
その結果をRegExpの引数に渡すことで正規表現を作成しています。

はじめに

PHPからJavaScriptへの値の渡し方を、phtmlで書いてまとめます。
なるべく同じような型として解釈されるように変換しています。

PHP(string) → JS(string)

test.phtml

<?php
    $foo = 'abcde';
?>

<script>
    let bar = '<?php echo $foo; ?>';
    console.log('typeof: ' + typeof bar);
    console.log('value: ' + bar);
</script>

console.log

typeof: string
value: abcde

PHP(integer) → JS(number)

test.phtml

<?php
    $foo = 12345;
?>

<script>
    let bar = <?php echo $foo; ?>;
    console.log('typeof: ' + typeof bar);
    console.log('value: ' + bar);
</script>

console.log

typeof: number
value: 12345

PHP(boolean) → JS(boolean)

test.phtml

<?php
    $foo = true;
?>

<script>
    let bar = Boolean(<?php echo $foo; ?>);
    console.log('typeof: ' + typeof bar);
    console.log('value: ' + bar);
</script>

console.log

typeof: boolean
value: true

PHP(array) → JS(object)

test.phtml

<?php
    $foo = [1, 2, 3, 4, 5];
    $foo = json_encode($foo);
?>

<script>
    let bar = JSON.parse('<?php echo $foo; ?>');
    console.log('typeof: ' + typeof bar);
    for (let i = 0; i < bar.length; i++) {
        console.log('value: ' + bar[i]);
    }
</script>

console.log

typeof: object
value: 1
value: 2
value: 3
value: 4
value: 5

PHP(array) → JS(object) [連想配列]

test.phtml

<?php
    $foo = ['key' => 'value', 'aaa' => 'bbb'];
    $foo = json_encode($foo);
?>

<script>
    let bar = JSON.parse('<?php echo $foo; ?>');
    console.log('typeof: ' + typeof bar);
    for (let key in bar) {
        console.log(key + ': ' + bar[key]);
    }
</script>

console.log

typeof: object
key: value
aaa: bbb

まとめ

Bool or Array を渡すときは、ひと手間必要です。

2019/10/01。僕はTwitterを楽しんでいた。

#IT #正社員
twitterをちゃんと始めて1週間。
そろそろ自分のことを話そうと思う。

私は正社員でSEだ。
SESの現場を10は経験しただろうか。
一方で自社製品の開発にもPMとして携わった。
予算、要員、品質、ステークホルダ管理。
それなりの経験を持っていると自負している。

(続く)

— アナコンダ毒蝮 (@yameteyou) January 30, 2019

僕「ふう…Twitterは本当に勉強になるなあ」

僕「技術的な課題を呟いたら反応してくれるし」

僕「僕もみんなを喜ばせてあげたい」

僕「将来はTwitterの中の人になろう…」
　
　
　
僕「…ん？」

　

　
　
僕「………」

僕「どうしよう…変な人だ」

僕「こういうのはミュートに限るね」
　
　
　

　
　
僕「もしくはブロック…でも…」

僕「こんな人もTwitterにいるんだ…」
　
　
　
僕「さすがTwitter、懐が深いや」

ピカイア「ピカイア！」

僕「うわびっくりした！野生のピカイアか」※1
　
　
　
僕「………」

僕「…それにしても」
　
　
　

　
　
　
僕「なんだか楽しそう！」
僕「僕もやってみたい！」
僕「そうだ！　奇声のエヴァンジェリストになろう！」
　
　
　

作った

僕「自信のあるGASで作ろう」

奇声.gs

function tweetAnagram(){
  var word_list = 'ルイズ！ルイズ！ルイズ！ルイズぅぅうううわぁああああああああああああああああああああああん！あぁああああ…ああ…あっあっー！あぁああああああ！！！ルイズルイズルイズぅううぁわぁああああ！！！あぁクンカクンカ！クンカクンカ！スーハースーハー！'.split('');
  var ran_result = '';

  ran_result = word_list.sort(
    function(){
      return 0.5 - Math.random()
    }
  ).join('');

//  if (Math.floor(Math.random() * 10) < 3) {
//    ran_result = 'チンコ・フルパァン'
//  }

  var msg = ran_result;

  tweet(msg); 
}

僕「これを見たアナタ、色々ツッコみたいところがあるかもしれない」※2

僕「とりあえず無視するね！」

僕「ポイントはsort()のコールバックファンクション！」

奇声.gs

  ran_result = word_list.sort(
    function(){
      return 0.5 - Math.random()
    }
  ).join('');

僕「javascriptのsort()は引数となったファンクションでソート処理を行うんだ」

僕「上のコードを見ると、return 0.5 - Math.random()という書き方をしている」

僕「つまり、戻り値がTrueになるかFalseになるか分からないんだ」

僕「sort()は対象の文字列の全ての文字にこの処理を行うから、結果としてランダム文字列が出来上がるってワケ」

　
　
　
僕「でも、毎回手動で動かすのはダルいな」
　
僕「スケジューリングしよう」
　
　
　
　

　
　
　
僕「準備は出来た」
　
僕「僕も奇声をあげよう！！」

　
　
　

あ！ああルあんわぁあ！ああクー！あー…ぁああ！！クカうああ！あっ！ぁあズ！インぁあクスああぅあル！ああンズうズああカあスーっあ！ーあああぁあ…ぅぁあああカうああンイあ！ルズイ！ーあルぅあうあイカズイルズイ！！ズハンハあクあルあああイルわあう

— アナコンダ毒蝮 (@yameteyou) November 30, 2019

　
　
　
僕「………できた！！！」

僕「みんな喜んでくれるかな」

僕「国民総幸福量が1.5倍になったりして」

僕「国民栄誉賞ものだぞ」
　
僕「(スピーチの練習しなくちゃ)」
　
　
　
　

おしまい。
　
　
　
　
　

　

※1　ピカイアとは　リンク
※2　このsort()のテクニックは @ryuta69 が教えてくれました

検索フォームについて書こうと思いましたが
思いの他入力内容について量が多くなったので
別途書き記します。

.val()

「val()」は、HTMLタグ内に記述されている
value属性を取得したり変更することができるメソッドになります。

html

<form>
    <input type="text" value="入力">

    <input type="checkbox" value="sono1">：その1
    <input type="checkbox" value="sono2" checked>：その2
    <input type="checkbox" value="sono3">：その3
</form>

上記の入力ボックスやチェックボックスのように
value属性が記述されていれば「val()」メソッドで取得・変更することが可能です。

より基本的な流れを説明すると

html

<button id="btn" value="a">ボタン</button>
<!--これでhtmlでidがbtnとvalueを設定-->

jQuery

var btn = $('#btn').val(); //変数にidがbtnのvalueを代入

console.log( btn ); //変数btnを出力

コンソール

a　
# valueの値が出力されました。

上書き・設定

またはjQueryを下記のようにすると

jQuery

var btn = $('#btn').val('b'); //変数にidがbtnのvalueを代入

console.log( btn ); //変数btnを出力

bが出力されます。
これはhtmlにvalueが設定されてなくても一緒です。
コードの順番から行ってjQueryのval()の
引数の値にvalueが設定または上書きされると考えてください。

select要素

select要素というのがありますが
ほぼ仕様は一緒でselectと設定すれば値が入力されます。

select

<select multiple>
    <option value="1">a</option>
    <option value="2">b</option>
    <option value="3">c</option>
</select>
<button>ボタン</button>

jQuery

$('button').click(function() {
    var value = $('select').val(); //ここで設定します。

    console.log(value);
})

コンソール

1,2
# aとbを選択したら出力されます。

checkbox要素

checkbox要素の場合はthisで設定されます。
それを含めてポイントは三つ
①input:checked要素で設定
②each構文でtype="checkbox"でチェックされたのを設定
③thisで現在のチェック内容を拾ってきます。

html

<input type="checkbox" value="1">サンプル１
<input type="checkbox" value="2">サンプル２
<input type="checkbox" value="3">サンプル３
<button>ボタン</button>

jQuery

$('button').click(function() {

    $('input:checked').each(function() { //①input:checked要素で設定
                                         //②each構文でtype="checkbox"でチェックされたのを設定
        var r = $(this).val(); //③thisで現在のチェック内容を拾ってきます。

        console.log(r);
    })

})

radio要素

radio要素は「select / checkbox」と違い、ユーザーが選択できるのは1つだけでなのでシンプルです。
②each構文でtype="checkbox"でチェックされたのを設定がないので短くなります。

html

<input type="radio" name="sample" value="1">サンプル１
<input type="radio" name="sample" value="2">サンプル２
<input type="radio" name="sample" value="3">サンプル３
<button>ボタン</button>

jQuery

$('button').click(function() {
    // ②each構文でtype="checkbox"でチェックされたのを設定がありません。
    var result = $('input:checked').val();

    console.log(result);

})

textbox要素

textbox要素は、ユーザーが何らかの文字列を入力することができるボックスになります。
value値を設定することで、あらかじめボックス内に任意の文字列を入力した状態にできます。

html

<input type="text" value="サンプルテキスト">

jQuery

var value = $('input').val();

console.log(value);

コンソール

サンプルテキスト

Webサイトにアクセスしているユーザーのデバイスデータ（モバイル、タブレット、デスクトップ）を取得するコードのメモ

ウィンドウの大きさで判別する方法

function ...() {
  var width = window.innerWidth,
    screenType;
  if (width <= 520) {
    screenType = "mobile";
  } else if (width <= 820) {
    screenType = "tablet";
  } else {
    screenType = "desktop";
  }
  return screenType;
}

参照したサイト：
https://www.upbuild.io/blog/device-specific-gtm-tags/

ユーザーエージェントで判別する方法

//mobile-detect.js（https://github.com/hgoebl/mobile-detect.js/）を読み込み後

function ...() {
  var md = new MobileDetect(window.navigator.userAgent);
  var mobile = md.phone() ? "mobile" : undefined;
  var tablet = md.tablet() ? "tablet" : undefined;
  return mobile || tablet || "desktop";
}

参照したサイト：
https://github.com/hgoebl/mobile-detect.js/
https://support.google.com/tagmanager/forum/AAAAnP_FwdICvO-Fx7PeW8

背景

• 広告サービスCriteoのサーバーに送信するデータとしてデバイスタイプを取得しておく。
• このJavascriptコードはタグマネジメントツール（GoogleタグマネージャーのカスタムJavascript）に設置する。

電卓を作ってみよう。

・目的
　プログラミングを触ってみたい人、始めたばかりの人
・ゴール
　足し算、引き算、掛け算、割り算、クリア、バックができる電卓

HTML

<html>
<head>
</head>
<body>
    <div class="main">
        <form name="form">
            <input class="textview" name="textview">
        </form>
        <div>
            <div>
                <button class="button" type="button" value="C" onclick="clea()">C</button>
                <button class="button" type="button" value="<" onclick="back()"><</button> 
                <button class="button" type="button" value="/" onclick="insert('/')">/</button>
                <button class="button" type="button" value="X" onclick="insert('*')">*</button>
            </div>
            <div>
                <button class="button" type="button" value="7" onclick="insert(7)">7</button>
                <button class="button" type="button" value="8" onclick="insert(8)">8</button>
                <button class="button" type="button" value="9" onclick="insert(9)">9</button>
                <button class="button" type="button" value="-" onclick="insert('-')">-</button>
            </div>
            <div>
                <button class="button" type="button" value="4" onclick="insert(4)">4</button>
                <button class="button" type="button" value="5" onclick="insert(5)">5</button>
                <button class="button" type="button" value="6" onclick="insert(6)">6</button>
                <button class="button" type="button" value="+" onclick="insert('+')">+</button>
            </div>
            <div>
                <button class="button" type="button" value="1" onclick="insert(1)">1</button>
                <button class="button" type="button" value="2" onclick="insert(2)">2</button>
                <button class="button" type="button" value="3" onclick="insert(3)">3</button>
                <button class="button equal" type="button" value="=" onclick="equal()">=</button>
            </div>
            <div>
                <button class="button" style="width: 108;" type="button" value="0" onclick="insert(0)">0</button>
                <button class="button" type="button" value="." onclick="insert('.')">.</button>
            </div>
        </div>
    </div>
</body>
</html>

次はCSSを当ててみる

<head>
    <style>
        button {
            width: 50px;
            height: 50px;
        }

        * {
            margin: 0;
            padding: 0;
        }

        .button {
            width: 50px;
            height: 50px;
            font-size: 25px;
            margin: 2px;
            cursor: pointer;
            background: #303AF2;
            border: 1px solid #303AF2;
            border-radius: 5px;
            color: #fffff0;
        }

        .textview {
            width: 224;
            margin: 2;
            font-size: 25;
            padding: 5;
            background: #303AF2;
            border: 1px solid #303AF2;
            border-radius: 5px;
            color: #fffff0;
        }

        .equal {
            height: 105px;
            position: absolute;
            margin-left: 6px;
        }
    </style>

</head>

電卓の形は完成しました。次はスクリプトの処理を書いていきましょう。

<head>
    <script>
        function insert(num) {
            document.form.textview.value = document.form.textview.value + num;
        }
    </script>
    <style>
      中略
    </style>
</head>

ボタンから文字を読み取る処理

<head>
    <script>
        function insert(num) {
            document.form.textview.value = document.form.textview.value + num;
        }
        function equal() {
            var exp = document.form.textview.value;

            if (exp) {
                document.form.textview.value = eval(exp);
            }
        }
    </script>
    <style>
      中略
    </style>
</head>

equalが押された時に足算してくれる処理。くわしくはeval（）について

<head>
    <script>
        function insert(num) {
            document.form.textview.value = document.form.textview.value + num;
        }
        function equal() {
            var exp = document.form.textview.value;

            if (exp) {
                document.form.textview.value = eval(exp);
            }
        }
        function clea() {
            document.form.textview.value = "";
        }
        function back() {
            var exp = document.form.textview.value;
            document.form.textview.value = exp.substring(0, exp.length - 1);
        }
    </script>
    <style>
      中略
    </style>
</head>

入力したデータを消す処理と一文字戻す処理。

これで完成です！

これは bosyu Advent Calendar 2019 の 4日目の記事です。
よろしくね。

bosyuのフロントはVueを使っているのですが、最近 Composition API が上がってきているのでそれを使うようにしていこうぜ〜〜〜
という感じでやっております。

https://github.com/vuejs/composition-api
これね。

でこれがたまにアレなところがあるのですが、先日おもしろいところを見つけたので、それについて書いていくぞというアレです。
多分近々直ります。

なにがおきた

タイトル通りなんですが、型が不思議になりました。
具体的なコードを書くと以下のようなときに型が？？？？？となります。

nazo.vue

export default createComponent({
  setup () {
    const state = reactive({
      status: 'hoge',
      value: 'fuga'
    });
    const v = state.value;
  }
});

ここでは state は以下のようになるように期待していますが、

type State = {
  status: string;
  value: string;
}

VSCode等でみると state は string となってしまいます

なんでや

ということで、どんなかんじに型定義されているかみてみましょ。

https://github.com/vuejs/composition-api/blob/v0.3.4/src/reactivity/reactive.ts#L129

export function reactive<T = any>(obj: T): UnwrapRef<T> {
  if (process.env.NODE_ENV !== 'production' && !obj) {
    warn('"reactive()" is called without provide an "object".');
    // @ts-ignore
    return;
  }

  if (!isPlainObject(obj) || isReactive(obj) || isNonReactive(obj) || !Object.isExtensible(obj)) {
    return obj as any;
  }

  const observed = observe(obj);
  def(observed, ReactiveIdentifierKey, ReactiveIdentifier);
  setupAccessControl(observed);
  return observed as UnwrapRef<T>;
}

こんなかんじでした。
return のところの型が as になってて強さを感じる。

まあそれはさておきこの UnwrapRef<T> てのがきになりますね。
それを見てみましょう。

https://github.com/vuejs/composition-api/blob/v0.3.4/src/reactivity/ref.ts#L17

export type UnwrapRef<T> = T extends Ref<infer V>
  ? UnwrapRef2<V>
  : T extends BailTypes
      ? T // bail out on types that shouldn’t be unwrapped
      : T extends object ? { [K in keyof T]: UnwrapRef2<T[K]> } : T

// prettier-ignore
type UnwrapRef2<T> = T extends Ref<infer V>
  ? UnwrapRef3<V>
  : T extends BailTypes
      ? T
      : T extends object ? { [K in keyof T]: UnwrapRef3<T[K]> } : T

// ...

// prettier-ignore
type UnwrapRef10<T> = T extends Ref<infer V>
  ? V // stop recursion
  : T 

こんな感じになってます。
ConditionalTypes をつかって型を判定していますね。
http://www.typescriptlang.org/docs/handbook/advanced-types.html#conditional-types

でこの Ref の定義を見てみましょう。

https://github.com/vuejs/composition-api/blob/v0.3.4/src/reactivity/ref.ts#L9

export interface Ref<T> {
  value: T;
}

です。

つまり value をメンバーとして持っている場合は Ref を extends しているとみなされてしまい、
UnwrapRef2 UnwrapRef3 ．．． と流れていってしまいます。
最終的に UnwrapRef10 にたどり着き V となります。

結果的に最初に書いたように state が string のようになってしまうわけですね〜。

かいけつさく

https://github.com/vuejs/composition-api/pull/167
PRはでてますが、 Object の中に Object があったりすると、同様の問題が起きてしまうので困ったもんだなぁ〜という感じですね。

かんたんにはどうこうできるような感じではないので、できれば value というのはできる限りつかわないようにするのがとりあえずの対策かなぁ〜。

またVue-nextでは同様の問題が起きないような対処がされているようです。
https://github.com/vuejs/vue-next/blob/master/packages/reactivity/src/ref.ts

なのでこれと同様な実装を composition-api にPRでなげるかとかですかね。

まあそんな感じ。

あとは邪悪だけど

createComponent({
  setup () {
    const state = reactive({
      status: 'hoge',
      value: 'fuga'
    }) as unknown as { status: string, value: string };
    const v = state.value;
  }
});

unknown とか any とか一回型をぶっ壊して、むりやりやっちゃうとかね。
最高にダメな感じだけど。

まとめ

• かたはむずかしい。
• かたはたのしい。
• as unknow as Hoge は最凶(強)。

JSのfor-in文が思ったように動かない...

素直に配列の中身をfor-in文で取ろうとしたのだが、

sample.js

var a = ["hoge", "fuga", "piyo"];

for (var v in a) {
  console.log(v);
}

/* result
0
1
2
*/

なぜか、0, 1, 2と出る（泣）

JSでは、for-of を使う

sample.js

var a = ["hoge", "fuga", "piyo"];

for (var v of a) {
  console.log(v);
}

/* result
hoge
fuga
piyo
*/

何かと、20分くらい悩んでた...。
PythonやC#などforeach文に慣れているとちょっと違和感w

ちなみに、for-in文の使い方は？

JSでのfor-in文はオブジェクトのプロパティを取得するみたいです。

sample.js

var pen = {
  name: "hoge",
  color: "black",
  price: 100
}

for (var p in pen) {
  console.log(p);
}

/* result
name
color
price
*/

JSのfor-in文が思ったように動かない...

素直に配列の中身をfor-in文で取ろうとしたのだが、

sample.js

var a = ["hoge", "fuga", "piyo"];

for (var v in a) {
  console.log(v);
}

/* result
0
1
2
*/

なぜか、0, 1, 2と出る（泣）

JSでは、for-of を使う

sample.js

var a = ["hoge", "fuga", "piyo"];

for (var v of a) {
  console.log(v);
}

/* result
hoge
fuga
piyo
*/

何かと、20分くらい悩んでた...。
PythonやC#などforeach文に慣れているとちょっと違和感w

ちなみに、for-in文の使い方は？

JSでのfor-in文はオブジェクトのプロパティを取得するみたいです。

sample.js

var pen = {
  name: "hoge",
  color: "black",
  price: 100
}

for (var p in pen) {
  console.log(p);
}

/* result
name
color
price
*/

アドベントカレンダー何書こうかな〜と考えていたところ、フロントエンドエンジニア１年目はコードレビューでどんな指摘を受けるのかという投稿を読み、私も良い機会なので書いてみることにしました。

私のステータス

• 昨年11月にqnoteに入社
• コールセンターからエンジニアにジョブチェンジ
• 学生時代にプログラミング未学習
• Laravel + Vue.js を使ったプロジェクトに参画
• フロントエンド / バックエンド共に行い、機能別に issue を立てて、issue 毎に担当。

初歩的なこと

typo

私はこれがひどい。

• date と data を間違える
• 変数名が camelCase なのに snake_case で書いて値が取れないと騒ぐ
• delete を detele と書く

エディタでスペルチェックをしてもらうのが良い。
Sublime Text なら、 spell_check: true にするか F6 でスペルチェックをしてくれる。
VSCode でもプラグインを入れればスペルチェックしてくれる。

真偽値の統一

true、'1'、1 は全て true と判断できるが、コーディング規則に従い統一する

rand ではなく mt_rand

テストで乱数を生成するときに、rand を使用した。理由はググったら最初に出できたから。
しかし、rand の上位互換である mt_rand を使用するように教わった。
理由は mt_rand の公式ドキュメントにある。

古い libc の多くの乱数発生器は、怪しげであるか特性が不明であったりし、 また低速でした。 mt_rand() 関数は、古い rand() の代替品となるものです。 この関数は、その特性が既知の乱数生成器 » メルセンヌ・ツイスター を使用し、 平均的な libc の rand()よりも 4 倍以上高速に乱数を生成します。
PHP: mt_rand - Manual

命名規則に従う

変数名などの表記方法は一般的に以下の3つになる。

• camelCase キャメルケース
• PascalCase パスカルケース（キャメルケースの頭文字大文字版）
• snake_case スネークケース

参画したプロジェクトでは、変数名は camelCase、クラス名とファイル名は PascalCase にすることになっていた。
これはプロジェクト毎で規則があると思うが、変数やファイル名などの規則がバラバラにならないように気をつける。

エラーを読む

これ、よくやりがち。
エラーが出た
->怖くなって先輩に質問しに行く。
->先輩がエラー見る
->先輩『エラー文言読んだ？』
->私『読んでません。（汗』

エラーは、ちゃんと問題点を書いてくれていることが多い。
先輩に聞きに行く前に、翻訳してみたり、ググってみればわかることは多い。
5分調べて、10分試して解決しなければ聞きに行く。くらいで良いと思う。

公式ドキュメントを読もう（英語でも）

困った時、ググる。
すると Qiita とか はてブ とか teratail とか どっかのオンラインスクール とかが、検索上位に出てくる。
そういう記事は、タイトルが困ってる状態と似ていることが多いのだが、自分の環境と違ったり、間違っていたりすることもある。
で、結局解決せずに、先輩に聞きに行く
->先輩『公式ドキュメント読んだ？』
->私『読んでません(汗』

内容によるが、基本的な使い方は公式ドキュメントに書いてある。
公式ドキュメントが英語のみってこともある。lodash とかね。
けど、そんな難しい言い回しはしていない。
翻訳しつつ、頑張って読んでいれば、だんだん読めるようになってくる。

可読性向上

三項演算子やエルビス演算子で済むなら、if文は使わない。

最近の流行りというのもあるかもだけど、単純な条件分岐なら、if文を使わない方が読みやすい。

countによってメッセージを変える処理.js

msg() {
  if (this.count > 10) {
    return 'カウントが 10回 を超えました。'
  }
  return ''
},

// 三項演算子
msg() {
  return this.count > 10 ? 'カウントが 10回 を超えました。' : ''
},

一行を長くしすぎない（改行する）

一行の文字が多く、横に長すぎるとコードが読みにくい。

ESLintを導入していれば、エラーで教えてくれる。
max-len - Rules - ESLint - Pluggable JavaScript linter

DRY

Don't repeat yourself（繰り返すな）。
同じような処理を複数回書くことは、修正が必要な時に修正漏れなどのリスクが増す。
また、同じような処理なら、別functionとして切り離せばテストもしやすい。

テスト

DI を使う

以下のような機能のテストを書いているときに教わった。

DIを使用していない.php

class Sample
{
    public function execute(array $params)
    {
        if ($userCd = Arr::pull($value, 'user_cd')) {
            $userId = app(GetUser::class)
                ->getUserId($userCd);

            // 何かする
        }
    }
}

このテストを書く場合、GetUser::getUserId() が未実装だとテストが行えない。

そこで DI を使用する。

DIを使用した場合.php

class Sample
{
    private $getUser;

    public function __construct(GetUser $getUser)
    {
        $this->getUser = $getUser;
    }

    public function execute(array $params): string
    {
        if ($userCd = Arr::pull($value, 'user_cd')) {
            $userId = $this->getUser
                ->getUserId($userCd);

            // 何かする
        }
    }
}

このように DI を使用すると、この Sample クラスのテストをする際に、GetUser::getUserId() をモックすれば、テストが行える。

モックオブジェクトを使ったテスト.php

class SampleTest extends TestCase
{
    $getUser = $this
        ->getMockBuilder(GetUser::class)
        ->setMethods(['getUserId'])
        ->getMock();

    $getUser->expects($this->once())
        ->method('getUserId')
        ->willReturn(123);

    $sample = new Sample($getUser);

    $parames = [
        'user_cd' => 'hogehoge123'
    ];

    $res = $sample->execute($parames);
    $this->assertEquals($res, '期待値');
}

機能を細かく分ける

理想は、１クラスに１機能。
そうすることで、テストが容易になる。

SOLID原則

敬愛なるゆいもっぷ先輩の記事をご参照ください?‍♂️
SOLID原則について簡単に書く

猫

猫社員の見分け方

名前	特長
ふたば	クリーム色
みるく	茶虎、口元が白い、尻尾が少し鍵しっぽ
はな	茶虎、全体的にシュッとしてる
ちまき	錆色、尻尾が縞様、おでこハゲ
さくら	錆色、顔の桜色の部分多め
りぼん	錆色、小さい、かわいい
みぃ	白黒

猫社員たちをご覧になりたい方は、是非遊びにきてください！
株式会社qnote

猫は腰を叩かれると喜ぶが、叩きすぎは良くない

叩きすぎるとヘルニアになる可能性がある。

最後に

いつもコードレビューや質問に応えていただいている @adwin さんや @poipoisaurus さんをはじめとする qnote の皆さんに本当に感謝しています。
ありがとうございます。
そして、来年もよろしくお願いします?

はじめに

前回の記事でreact-firebase-hooksのAuth Hooksを使ってみたのですが、今回はFirestore Hooksに挑戦したいと思います。

react-firebase-hooks

リポジトリはこちらです。

https://github.com/CSFrequency/react-firebase-hooks

このライブラリは、4種類のAPIを提供しています。

• Auth Hooks
• Cloud Firestore Hooks
• Cloud Storage Hooks
• Realtime Database Hooks

今回対象とするのは2つ目のFirestore Hooksです。

テストデータの作成

最初に、Firestoreのコンソールでコレクションといくつかのドキュメントを作成します。コレクション名はtodosとしました。

コーディング

モジュールのimport

今回使うモジュールをimportします。

import React, { useState } from "react";
import ReactDOM from "react-dom";

import firebase from "firebase";
import { useCollectionData } from "react-firebase-hooks/firestore";

TodoListコンポーネント

todosコレクションを表示するコンポーネントを作ります。

const TodoList = () => {
  const [values, loading, error] = useCollectionData(
    firebase.firestore().collection("todos"),
    { idField: "id" }
  );
  if (loading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div>{`Error: ${error.message}`}</div>;
  }
  return (
    <ul>
      {values.map(value => (
        <li key={value.id}>{value.title}</li>
      ))}
    </ul>
  );
};

idFieldでidを取得するところがポイントです。

NewTodoコンポーネント

todosコレクションに新たなドキュメントを追加するためのコンポーネントを作ります。

const NewTodo = () => {
  const [title, setTitle] = useState("");
  const [pending, setPending] = useState(false);
  const add = async () => {
    setTitle("");
    setPending(true);
    try {
      await firebase
        .firestore()
        .collection("todos")
        .add({ title });
    } finally {
      setPending(false);
    }
  };
  return (
    <div>
      <input value={title} onChange={e => setTitle(e.target.value)} />
      <button type="button" onClick={add}>
        Add
      </button>
      {pending && "Pending..."}
    </div>
  );
};

エラー処理は省略しています。

Appコンポーネント

最後に、全体をつなげるAppコンポーネントとReactDOMのrenderです。

const App = () => {
  return (
    <div>
      <TodoList />
      <NewTodo />
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

CodeSandbox

https://codesandbox.io/s/wonderful-browser-zh0wc

完成したものがこちらです、実際に動作させるためにはforkしてfirebaseConfigを置き換える必要がありますのでご注意ください。

おわりに

Firestoreのリアルタイム更新とReact Hooksはとても相性がいいと感じました。ドキュメントを追加したら、すぐに更新されます。Firestoreのコンソールから追加しても同様です。

今回は、useCollectionDataを使いましたが、用意されているhooksはさらにあります。

• useCollection
• useCollectionOnce
• useCollectionData
• useCollectionDataOnce
• useDocument
• useDocumentOnce
• useDocumentData
• useDocumentDataOnce

Once系は一度だけの取得なのですが、その場合はhookがどれだけ役立つかは微妙です。callbackから使うことになることが多い気がします。また、Data系のhookはTypeScriptの型が付けられますが、ソースコード上は単にアサーションしているだけなので、予期せぬランタイムエラーが発生する可能性がありそうです。結局、独自の拡張をしようと思うとcustom hooksを作ることになりそうですが、その先に本ライブラリのhooksから合成できるかはやってみないと分からないといった感じになりそうです。

TL;DR

よいしょ……よいしょ……
useEffect便利ですよね。
stateの変化を監視し、そのstateの変化に伴うべき処理の流れを一元管理できます。

import React, { useState, useEffect } from 'react'
import ReactDOM from 'react-dom'

function Counter(props) {
  const [count, setCount] = useState(0)
  const [lastUpdatedAt, setLastUpdatedAt] = useState(null)

  useEffect(() => {// 『count』 が更新された際に、それに伴い必ず実行される
    setLastUpdatedAt(new Date().toString())
  }, [count]) 

  return (
    <div>
      <p>カウント {count} 回目</p>

      {/* 変な要件の機能だなぁ…? */}
      <p>?最終カウントアップ日時? {lastUpdatedAt || ''} </p>

      <p>
        <button onClick={() => setCount(count + 1)}>カウントアップ</button>
      </p>
    </div>
  )
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
)

かなしいところ

(上記例の様に)何も考えずそのまま使うと、対象のstateが変更されているか否かに関わらず、初回レンダー時『にも』必ず動いてしまう。

カウントまだ1回もしてないのに「最終カウントアップ日時」出てんのおかしいﾀﾞﾙﾙｫﾝ!?(うるさいですね・・・)

かいけつ

useRefを使う。

import React, { useState, useEffect, useRef } from 'react'
import ReactDOM from 'react-dom'

function Counter(props) {
  const [count, setCount] = useState(0)
  const [lastUpdatedAt, setLastUpdatedAt] = useState(null)

  const isFirstRender = useRef(false)

  useEffect(() => { // このeffectは初回レンダー時のみ呼ばれるeffect
    isFirstRender.current = true
  }, [])

  useEffect(() => {// 『count』 が更新された場合『と』初回レンダー時に動くeffect
    if(isFirstRender.current) { // 初回レンダー判定
      isFirstRender.current = false // もう初回レンダーじゃないよ代入
    } else {
      setLastUpdatedAt(new Date().toString())      
    }
  }, [count]) 

  return (
    <div>
      <p>カウント {count} 回目</p>

      <p>?最終カウントアップ日時? {lastUpdatedAt || ''} </p>

      <p>
        <button onClick={() => setCount(count + 1)}>カウントアップ</button>
      </p>
    </div>
  )
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
)

かつてのクラスコンポーネントで言う所の「componentDidMount」と似た働きが期待出来ます。

けつろん

結果オーライ！　終わりやっぱりReactはたのしい。以上。

User JavaScript and CSS とは

Chrome の拡張機能として提供されている，既存のウェブサイトに独自の Javascript や CSS を埋め込むライブラリです．
User JavaScript and CSS - Chrome ウェブストア

これを利用して，ダークモードがないウェブサイトにダークモードを実装してみたり， Yahoo! のサイトに自分の好きなキャラクターのイラストを表示させたり，いろいろなことができます．
今回は，社内のタスク管理に使用している Redmine で，チケットの説明に出てくるスニペットの内容をクリップボードにコピーする機能を Javascript で実装してみました．

画面設計

スニペットの枠外，右下部分にコピーのアイコンを配置し，

アイコンをクリックすると「コピーしました！」のダイアログを表示することにします．

実装

アイコンを読み込む

今回は Font Awesome のアイコンを使用します．
Font Awesome についてはこちら

流れは次の通りです．

• Font Awesome を読み込む link タグを作成する
• head タグを取得し，その子要素として先ほど作成した link タグを追加する

redmine.js

const link = document.createElement('link');
link.setAttribute('rel', 'stylesheet');
link.setAttribute('href', 'https://use.fontawesome.com/releases/v5.6.3/css/all.css');

document.getElementsByTagName('head')[0].appendChild(link);

スニペットの枠外，右下部分に要素を配置する

流れは次の通りです．

スニペット (pre タグ) を取得する -> 各スニペットが配列で取れます

各スニペットに対して，次の処理を行う

• コピーボタンを配置するための p タグを作成する (snippet)
• 後にコピーボタンとなる span タグを作成する (copyButton)
• (copyButton に title, innerHTML, className などの属性を設定する)
• copyButton にクリックのイベントリスナーを付与する (内容は下記)
  • コピー対象となる textarea タグを作成 (textarea タグでなくても行けるかもしれません)
  • スニペット内の文章を textarea タグに設定する
  • 作成した textarea タグを body タグの子要素として配置 -> 選択 -> コピー
  • textarea タグは不要になるので取り除く
  • コピーが完了した旨のメッセージを表示
• copyButton を snippet の直後に配置する

redmine.js

// スニペットのタグを選択
const snippets = document.getElementsByTagName('pre');
// console.log(snippets); // HTMLCollection
// console.log(typeof snippets); // object

// コピーボタンを配置
Object.keys(snippets).forEach(function (index) {
    let snippet = snippets[index];
    let p = document.createElement('p');
    p.className = 'copy-snippet';

    let copyButton = document.createElement('span');
    copyButton.title = 'Copy to Clipboard';
    copyButton.innerHTML = '<i class="far fa-copy"></i> Copy';
    copyButton.className = 'copy-button';

    copyButton.addEventListener('click', function () {
        let copyTarget = document.createElement('textarea');
        copyTarget.textContent = snippet.innerText.trim(); // 見た目に合わせて文末改行削る？
        let body = document.getElementsByTagName('body')[0];
        body.appendChild(copyTarget);
        copyTarget.select();
        document.execCommand("copy");
        body.removeChild(copyTarget);
        // 後処理まで終わったらおまけ
        (function () {
            alert('コピーしました！');
        })();
    });
    p.appendChild(copyButton);
    snippet.parentNode.insertBefore(p, snippet.nextSibling);
});

その他

画面右下にカエルのイラストを入れて，全体を CSS で整えます．

redmine.js

// カエルがペコペコおじぎする GIF
const imageUrl = 'https://sozai-good.com/download?id=2451&type=7&subnumber=0&extention=gif';

// 画像挿入処理
let img = document.createElement('img');
img.id = 'inserted-image';
img.height = 105;
img.src = imageUrl;
const wrapper = document.getElementById('wrapper');
wrapper.parentNode.insertBefore(img, wrapper.nextSibling);

redmine.css

#wrapper, #main {
    background-image: url("https://www.pakutaso.com/shared/img/thumb/mizuho1102dssd_TP_V.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    opacity: 0.96;
}

#top-menu {
    /*background-color: darkgreen;*/
    background-color: rgba(10, 106, 10, 0.9);
}

#header, #footer {
    /*background-color: forestgreen;*/
    background-color: rgba(0, 0, 0, 0.5);
}

#main-menu li a {
    /*background-color: darkgreen;*/
    background-color: rgba(10, 106, 10, 0.6);
}

#main-menu li .selected {
    color: lightgreen;
}

#content {
    margin-bottom: 20px;
}

#sidebar {
    background-color: white;
}

#footer {
    position: fixed;
    background-color: black;
    right: 0;
    bottom: 0;
}

pre, .CodeRay {
    font-family: Monaco, monospace;
}

#inserted-image {
    position: fixed;
    right: 25px;
    bottom: 45px;
}

.copy-snippet {
    text-align: right;
}

.copy-button {
    cursor: pointer;
    background: none;
    border: 0;

    /* settings when hovered */
    /*transition: color 0.1s linear;*/
}

.copy-button:hover {
    color: red;
}

Redmine の公式ページを表示してみる

Defect #32525: CSV related tests fail with Rails 5.2.4 - Redmine

やったー！

効用

• 「コマンドはコピペして貼り付ける」のが暗黙のルールとなっている本番環境へのリリース作業において，逐一スニペットの中身をマウスで選択する手間が省けます．
• 自分の画面だけに実装されるので，他の人に自慢できます．
• フロント周りがちょっとだけ楽しくなります．

ワガハイは非Javascriptエンジニアのアクマちゃんデモ！
この記事は非JavascriptエンジニアのためのJavascript入門　3日遅れのひとり Advent Calendar 2019の4日目の記事（3日遅れだから実質1日目）であると同時にワガハイのQiita初投稿記事デモ！

読みにくいところや間違いがあるかもしれないけどよろしくデモ。

はじめに

この記事はJavaScript 「再」入門をベースとして、非Javascriptエンジニア（非エンジニアではなくJavascript以外の言語をメインで使っているエンジニア）に向けて要点をまとめたり、ワガハイが理解できなかった箇所を掘り下げて調べていったりして構成していく予定デモ。
ワガハイはJavaエンジニアなので、他の言語のことはあんまりわからないけど、プログラムの基本がわかっている人が読んだら多分理解できるはずデモ。
わかりにくいところや追記してほしいところがあったら連絡くれるとうれしいデモ。
それじゃあスタートデモ。

Javascriptの型

Javascriptには以下の型があるデモ。

• Number
• Boolean
• Symbol
• Object
  • String
  • Function
  • Array
  • Date
  • RegExp
• null
• undefined

nullとundefinedはちょっと特殊な型で、String, Function, Array, Date, RegExpはObject型の一種デモね。Error型もあるけどこの記事では触れられていないみたいデモ。

それじゃあ一つづつ見ていくことにするデモ！

数値

浮動小数点数

Javascriptの数値はNumber型で扱えるデモ。Number型は「倍精度 64 ビットフォーマット IEEE 754 値 (double-precision 64-bit format IEEE 754 values)」と定義されているらしいデモ。Javascriptには整数は存在しないみたいだから注意デモ。
浮動小数点については今度またお勉強しようと思うデモ。

console.log(0.1 + 0.2) // 0.30000000000000004
console.log(0.1 + 0.2 == 0.30000000000000004) // true

parseInt()関数

文字列を吸い数に変換する組み込み関数として、parseInt()関数を紹介するデモ。

parseInt('123', 10); // 123

第2引数は変換の基数デモ。省略可能だけど指定推奨デモ。
なぜかというと古いブラウザでは先頭の0を8進数として認識してしまうからデモ！

// 2013年以降のブラウザでの処理結果
parseInt('010', 10); // 10
// 古いブラウザでの処理結果
parseInt('010', 10); // 8 ←デモッ！？

一方先頭が0xの文字列は現在でも16進数として認識されるデモ。

// 2013年以降のブラウザでの処理結果
parseInt('0x10');    // 16
// 古いブラウザでの処理結果
parseInt('0x10');    // 16

同じようにparseFloat()関数もあるデモ、こちらは基数は常に10が用いられるデモ。第2引数はないから注意デモ。

単項演算子+での変換

単項演算子+を使って値を数値に変換することもできるデモ。

+ '42';   // 42
+ '010';  // 10
+ '0x10'; // 16

便利デモね！

NaN

もしparseInt()や+で変換しようとした値が数ではない場合はNan(Not a Number)という特別な値が返ってくるデモ。
NaNを使って算術演算をしようとすると、その結果はすべてNaNになってしまうデモ。

NaN + 5 // NaN

組み込み関数isNaN`を使えば、Numberに入っている値がNaN``かどうか調べることができるデモ。

isNaN(NaN) // true
isNaN(1)   // false

Infinity, -Infinity

Infinityは名前の通り無限大を表す値デモ。

 1 / 0; //  Infinity
-1 / 0; // -Infinity

組み込み関数isFinite()は与えられた値が有限(Finite)の時にtrueを返すデモ。
有限ではないと判定されるのはNaN, Infinity, -Infinityだけデモ。

isFinite(1 / 0);     // false
isFinite(-Infinity); // false
isFinite(NaN);       // false
isFinite(1);         // true

文字列

JavascriptにはCharのような1文字を表す型はないデモ。すべてStringで表現するデモ。

文字列はオブジェクト

文字列はオブジェクトなのでプロパティを持っているデモ。

文字列の長さはlengthプロパティに入っているデモ。

'hello'.length; // 5

他にも文字列は、文字列の操作や文字列に関する情報へのアクセスを可能にするメソッドを持っているデモ。

'hello'.charAt(0); // "h"
'hello, world'.replace('hello', 'goodbye'); // "goodbye, world"
'hello'.toUpperCase(); // "HELLO"

nullとundefined

Javascriptにはnullとundifinedがあるデモ。Javaエンジニアのワガハイからするとなかなか理解が難しいところデモね。

とりあえずドキュメントを引用するデモ。
null

null 値は null というリテラルです。undefined のようなグローバルオブジェクトのプロパティではありません。代わりに、 null は識別の欠如を表し、変数がオブジェクトを指してないことを示します。API においては、通常はオブジェクトが返されるところで、関連したオブジェクトがない場合に null がよく渡されます。

undefined

undefined は、グローバルオブジェクトのプロパティであり、すなわちグローバルスコープ内の変数です。undefined の初期値はプリミティブ値である undefined です。
まだ値が代入されていない変数は undefined 型となります。評価しようとしている変数に値が代入されていない場合、メソッドや文も undefined を返します。値を return しない関数も undefined を返します。

な、なるほどデモ？
つまり、そもそもnullは型ではないがundefinedは型で、初期値にプリミティブ値のundefinedが入っているデモね？

基本的に、値を代入しないで変数を宣言するとその変数の型がundefinedになるみたいデモね。

最後にnullのドキュメントにnullとundefinedの判定の違いが書いてあるから引用するデモ。

typeof null          // "object" (歴史的の理由で "null" ではありません)
typeof undefined     // "undefined"
null === undefined   // false
null  == undefined   // true
null === null        // true
null == null         // true
!null                // true
isNaN(1 + null)      // false
isNaN(1 + undefined) // true

真偽値

Javascriptでは、どんな値でも真偽値に変換することができるデモ。
つまり、if文の条件式に渡すとtrue, falseのどちらかに変換されるデモね。
変換のルールは以下デモ。

1. false, 0, "", NaN, null, undefinedはfalseになる
2. その他のすべての値はtrueになる。

この変換はBoolean()関数で明示的に行えるが、特に意味はないみたいデモ。

シンボル

シンボルはちょっと難しいので、またの機会にするデモ。
とりあえず知らなくても平気デモ。

あとがき

はじめてのQiita、大変だったデモ。
もっと掘り下げて各項目を書きたかったんだけど、ほとんど元の文書の焼き直しになってしまったデモ。
でも自分自身の理解は深まりそうだし、文章を書くのに慣れてくればもっと内容も濃くできるはずなので続けていこうと思うデモ。

それじゃあまた明日デモ！

参考

JavaScript 「再」入門

はじめに

この記事はAteam Brides Inc. Advent Calendar 2019　5日目の記事です。

はじめまして、エイチームブライズ新卒1年目の@oekazumaです。最近僕がハマっているSvelteに関して書きたいと思います！

Svelteとは？

SvelteはRich Harris氏によって開発されたコンパイラーでVueやReactのようにブラウザー上でコンポーネント化をするフレームワークではなく*.svelteファイルをhtml, js, cssに変換します。
「すらりとした」という意味を持つ名の通り軽量で高速。
ベンチマークでReactの35倍、Vueの50倍速いです。

Svelteの３つの魅力

公式にも書かれている下記の3つを中心に説明していきます！
1. Write less code (より少ないコードを書く)
2. No Virtual DOM (仮想DOMがない)
3. Truly reactive (本当に反応的)

Write less code(記述量が少ない)

入力フォームで変数aとbに値を入力し、足して表示するプログラムを例にしてみると

React 442文字

import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }

  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>

      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

Vue 263文字

<template>
  <div>
    <input type="number" v-model.number="a">
    <input type="number" v-model.number="b">

    <p>{{a}} + {{b}} = {{a + b}}</p>
  </div>
</template>

<script>
  export default {
    data: function() {
      return {
        a: 1,
        b: 2
      };
    }
  };
</script>

Svelte 145文字

<script>
    let a = 1;
    let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

すごく記述量が少ないことがわかると思います。
書き方自体はVueに似ている部分もあるので既にVueを書いている方だとそんなに違和感なく開発できそうです。

No Virtual DOM(仮想DOMがない)

仮想DOMはオーバーヘッドであると言っています。大きな理由としては「実DOMとの差分を計算するのって無料じゃないしオーバーヘッドだよね」というところにあります。
Svelteは仮想DOMを使用せずに同様のプログラミングモデルで十分なパフォーマンスで、状態遷移を考慮することなくアプリを構築できます。
以下の流れでいうとSvelteは1と4だけで済むということです。

仮想DOMでHTMLが書き換わるまでの流れ
1. 現在の状態(state)が変わる
2.再レンダリング(仮想DOMの再構成)を実行する
3.実DOMとの差分を計算する
4.実際にHTML(=実DOM)を書き換える

Truly reactive(本当に反応的)

ReactおよびVueは、状態変数が変更されたときに更新する場所を追跡できず、その結果、状態変数が存在するコンポーネント全体とそのすべての子を更新します。
一方、Svelteはアプリケーションを介してデータを追跡し、更新された変数に依存する変数のみを更新できます。

さいごに

日本では正直全然話題になっていませんが、海外のフロントエンド界隈では盛り上がっているようでこれから日本でも流行っていくのではないかなと勝手に思っています。
数年後にはVue,Reactと肩を並べて語られている気がする...（＾ω＾）
今は日本語文献がかなり少ないので盛り上げていってもっと身近にSvelteを感じられるようになれば嬉しいなと思います！
この記事では実践的な部分がなかったのですが、明日に@mkinがsvelte3でToDoリストをチュートリアルと照らし合わせて作るぞ！ 【入門編】を書いてくれるので楽しみにしていてください！

私たちのチームで働きませんか？

エイチームは、インターネットを使った多様な技術を駆使し、幅広いビジネスの領域に挑戦し続ける名古屋の総合IT企業です。
そのグループ会社である株式会社エイチームブライズでは、一緒に働く仲間を募集しています！

• ハナユメ サイト開発グループ
• HIMARI開発チーム
• 技術開発部

上記求人をご覧いただき、少しでも興味を持っていただけた方は、まずはチャットでざっくばらんに話をしましょう。
技術的な話だけでなく、私たちが大切にしていることや、お任せしたいお仕事についてなどを詳しくお伝えいたします！

Qiita Jobsよりメッセージお待ちしております！

イントロダクション

JavaScript における Promise は失敗か成功のどちらかを表し、どちらの場合も何らかの値を持つことができる。さらにメソッドチェーンによりパイプラインのようなものを作ることができ、失敗すると short-circuit する。この点において Promise は Either monad の async 版のような感じがする。ここでは JavaScript の Promise と Scala の Either の対応関係を示す。

Note: 筆者は関数型プログラミングに詳しくない。

constructor

Promise の constructor である Promise.resolve と Promise.reject はそれぞれ Scala の Right と Left に対応している。

JavaScript

const r = Promise.resolve(1)  // Resolve(1) と表記する
const l = Promise.reject(0)   // Reject(0)  と表記する

Scala

val r: Either[Int, Int] = Right(1)
val l: Either[Int, Int] = Left(0)

promise.then(f)(1) = either.map(f)

Promise の then メソッドに非 Promise を返す関数を渡したときの動作は Either の map と同じである。

JavaScript

r.then(x => x + 10)  // Resolve(11)
l.then(x => x + 10)  // Reject(0)

Scala

r.map(_ + 10)  // Right(11)
l.map(_ + 10)  // Left(0)

promise.then(f)(2) = either.flatMap(f)

Promise の then メソッドに Promise (一重)を返す関数を渡したときの動作は Either の flatMap と同じである。

JavaScript

r.then(x => Promise.resolve(3))  // Resolve(3)
r.then(x => Promise.reject(3))   // Reject(3)
l.then(x => Promise.resolve(3))  // Reject(0)
l.then(x => Promise.reject(3))   // Reject(0)

Scala

r.flatMap((x: Int) => Right[Int, Int](3))  // Right(3)
r.flatMap((x: Int) => Left[Int, Int](3))   // Left(3)
l.flatMap((x: Int) => Right[Int, Int](3))  // Left(0)
l.flatMap((x: Int) => Left[Int, Int](3))   // Left(0)

promise.catch(f)(1) = either.left.flatMap(f andThen Right)

Promise の catch メソッドに非 Promise を返す関数を渡したときの動作は Either の Left に対してその関数を実行し、さらにその結果を Right で包んで flatten するのと同じである。

JavaScript

r.catch(x => x + 10)  // Resolve(1)
l.catch(x => x + 10)  // Resolve(10)

Scala

r.left.flatMap(((x: Int) => x + 10) andThen Right[Int, Int])  // Right(1)
l.left.flatMap(((x: Int) => x + 10) andThen Right[Int, Int])  // Right(10)

promise.catch(f)(2) = either.left.flatMap(f)

Promise の catch メソッドに Promise (一重)を返す関数を渡したときの動作は Either の Left に対して flatMap を実行するのと同じである。

JavaScript

r.catch(x => Promise.resolve(x + 10))  // Resolve(1)
r.catch(x => Promise.reject(x + 10))   // Resolve(1)
l.catch(x => Promise.resolve(x + 10))  // Resolve(10)
l.catch(x => Promise.reject(x + 10))   // Reject(10)

Scala

r.left.flatMap(x => Right[Int, Int](x + 10))  // Right(1)
r.left.flatMap(x => Left[Int, Int](x + 10))   // Right(1)
l.left.flatMap(x => Right[Int, Int](x + 10))  // Right(10)
l.left.flatMap(x => Left[Int, Int](x + 10))   // Left(10)

まとめ

以上の比較から、Promise の then メソッドは map と flatMap のオーバーロードのようなものであるということがわかる(ちなみに関数の返り値が何重もの Promise になっていたとしても、一気に flatten するという性質がある)。

catch メソッドについてはキレイに Scala コードで表現できなかったが、Left から Right に戻すという操作は関数型言語ではあまりしないのだろうか、と感じた。

IDEには、好みがあると思いますが一つの選択肢としてVisual Studio選びました。

Visual studio 2019には、node.jsを開発するためのテンプレートが用意されています。

基本のNode.js Express アプリケーションを選択します。

プロジェクト名を決定します。

C:.
│  app.js
│  ExpressApp5.njsproj
│  package-lock.json
│  package.json
│  README.md
│  
├─public
│  └─stylesheets
│          main.css
│          
├─routes
│      index.js
│      users.js
│      
└─views
        error.pug
        index.pug
        layout.pug

上記のようなフォルダとファイルが作成されます。

app.js

'use strict';
var debug = require('debug');
var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// uncomment after placing your favicon in /public
//app.use(favicon(__dirname + '/public/favicon.ico'));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', routes);
app.use('/users', users);

// catch 404 and forward to error handler
app.use(function (req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function (err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function (err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});

app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function () {
    debug('Express server listening on port ' + server.address().port);
});

必要なモジュールをrequireで読み込んでいる。

viewsにある....pugは、pugをHTML化している。

Pugとは. HTMLを書くためのテンプレートエンジンです。
app.set('view engine', 'pug');

実行すると

layout.pug

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/main.css')
  body
    block content

index.pug

extends layout

block content
  h1= title
  p Welcome to #{title}

実行時には、下記のようなHTMLが生成される。

index.html

!DOCTYPE html>
<html>
    <head>
    <title>Express</title>
        <link rel="stylesheet" href="/stylesheets/main.css">
    </head>
<body>
    <h1>Express</h1>
    <p>Welcome to Express</p>
</body>
</html>

index.pubを描画するためのindex.jsを見てみましょう。

index.js

'use strict';
var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function (req, res) {
    res.render('index', { title: 'Express' });
});

module.exports = router;

res.render('index', { title: 'Express' });は、index.pubにタイトルを渡し描画とています。

Pugの中にjsをコーディングすると

index.pug

extends layout
block content
  h1= title
  p Welcome to #{title}
  - for(var i=1;i<=6;i++)
   - var t="H"+i
    #{t} #{t} の文字の大きさ

{t}は、変数を描画するときに使います。

次にlayout.pugを変更しbootstrap4を使えるようにします。

layout.pug

doctype html
html(lang="ja")
  head
    title= title
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css",integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" ,crossorigin="anonymous")
    script(src="https://code.jquery.com/jquery-3.3.1.slim.min.js", integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo", crossorigin="anonymous")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js", integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1",crossorigin="anonymous")
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js", integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM",crossorigin="anonymous") 
  body
    block content

bootstrap4に必要なものは、CDNから取得します。

index.pugをbootstrap4に変更します。

index.pug

extends layout
block content
  .container.m-1
   .jumbotron
      h1= title
      p Welcome to #{title}
   - for(var i=1;i<=6;i++)
    - var t="H"+i
     #{t} #{t} の文字の大きさ

実行すると

コンテナとジャンボトロンが実装できました。

次にボタンを描画します。

index.pug

extends layout
block content
  style.
      .bsz {
          width: 137px;
          height: 70px;
          font-size: small;
          margin: 2px !important;
      }
  .container.m-1
   .jumbotron
      h1= title
      p Welcome to #{title}
   - for(var i=1;i<=6;i++)
    - var t="H"+i
     #{t} #{t} の文字の大きさ
   .container.mt-4.body-content        
     each c,i in 'primary,secondary,success,danger,warning,info,light,dark'.split(',')
        - var cx="bsz btn m-2 btn-"+c;
        button(class=cx,id='sw'+i) SW#{i}
  script.
        $(function(){
            $('.btn').click(function(){
            var id=$(this).attr('id');
            alert(id);        
          });
        });

上記のようにstyleやscriptも追加できます。
生成されるhtmlは、

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Express</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
    <style>
        .bsz {
            width: 137px;
            height: 70px;
            font-size: small;
            margin: 2px !important;
        }
    </style><div class="container m-1"><div class="jumbotron"><h1>Express</h1><p>Welcome to Express</p></div><H1>H1 の文字の大きさ</H1><H2>H2 の文字の大きさ</H2><H3>H3 の文字の大きさ</H3><H4>H4 の文字の大きさ</H4><H5>H5 の文字の大きさ</H5><H6>H6 の文字の大きさ</H6><div class="container mt-4 body-content">       <button class="bsz btn m-2 btn-primary" id="sw0">SW0</button><button class="bsz btn m-2 btn-secondary" id="sw1">SW1</button><button class="bsz btn m-2 btn-success" id="sw2">SW2</button><button class="bsz btn m-2 btn-danger" id="sw3">SW3</button><button class="bsz btn m-2 btn-warning" id="sw4">SW4</button><button class="bsz btn m-2 btn-info" id="sw5">SW5</button><button class="bsz btn m-2 btn-light" id="sw6">SW6</button><button class="bsz btn m-2 btn-dark" id="sw7">SW7</button></div></div>
    <script>
$(function(){
    $('.btn').click(function(){
    var id=$(this).attr('id');
    alert(id);
  });
});</script>
</body>
</html>