はじめに

ゆうちょPayのQRコードを払込取扱票に印刷するWebアプリを作りました。
払込取扱票とはこういうものです。

ゆうちょPay対応の払込取扱票印刷アプリ
https://yuucho-pay.com/

Chromeでの実行を推奨します。

GW中に作ったせいか、ついテンションが上がってドメインまで取得してしまいました。

ゆうちょPayが始まります

2019年5月8日(水)からゆうちょPayが使えるようになります。
弊社でもゆうちょPayのQRコード決済を導入を検討しているので、先日ゆうちょ銀行の方に説明に来てもらいました。
以下はその時伺った話の抜粋です。（注意：サービス開始前に聞いた話ですので仕様が変わる可能性もあります）

• ゆうちょPayと紐付けできるのは個人の総合口座のみ（法人の口座ではアカウントを作れない）
• 請求書払いでQRコード決済ができるのは今のところゆうちょPayだけ
• インターフェースはCSVファイル（金額などを記載したCSVファイルをアップロードして、QRコード情報を記載したCSVをダウンロードする）
• 払込取扱票にQRコードを印刷して決済した場合は108円の手数料がかかる
• その他の紙にQRコードを印刷して決済した場合は３%の手数料がかかる
• メールにアプリ起動リンクを載せて顧客に送信して決済した場合は108円の手数料がかかる
• 電算システムのバーコードとゆうちょPayのQRコードは併用できない（将来的に電算システムのバーコードのみでゆうちょPayの決済ができるようになる）
• QRコードを印刷するのが難しくて導入のネックになっているという加盟店候補が多いらしい

弊社では毎月かなりの枚数の払込取扱票を発行しています。そのため、ゆうちょPayには期待していたのですが、弊社の顧客は大部分が法人なので、そもそもゆうちょPayアカウントを作れないことがわかりました。
それでも個人の口座を使って立て替え払いするシチュエーションはあるかもしれないので、一応利用はするつもりです。
決済あたりの手数料は、基本料金も考慮すると電算システムより安くなるので、法人顧客が利用できないのは本当に残念ですが仕方ありません。

インターフェースがCSVファイルのアップロードとダウンロードのみというのは使い勝手が悪いので、システムを作ったGMOさんには頑張ってAPIを作っていただきたいところです。

それから同じQRコードでも、印刷する紙によって手数料の体系が異なるという仕様は、まともに運用できるとは思えないので、実際にサービスが始まったらなかったことになるのではないかと勝手に予想しています。

QRコードの印刷が難しい・・・？

さて、ここからが本題ですが、説明を伺っているときに「QRコードの印刷が難しい」という話が何度も出てきました。
「別に難しくないですよね？」といったら驚かれましたが、実際Qiitaの読者層だったらQRコードを印刷する仕組みを実装するのは難しくないですよね？
でも社内にITエンジニアのいない会社では本当に難しいらしく、「じゃあ、誰でも簡単にQRコードを払込取扱票に印刷できる仕組みを作ったら需要があるんじゃないか」と思ったのが今回のアプリを作ったきっかけです。
「広告を載せればいい小遣い稼ぎになるかも」とも思いましたが・・・。

実装

現時点のキャプチャです。かなり荒削りです。

QRコードの表示

QRコードの表示はGoogle Chart APIを使用しています。
使い方はとても簡単で、例えば「1RkT7UiAjn04oxxZIP9gzsr4QOBOuJ9J」というデータをQRコードに変換したい場合は、以下のように指定するだけでQRコードが生成されます。

https://chart.googleapis.com/chart?cht=qr&chs=80x80&chl=1RkT7UiAjn04oxxZIP9gzsr4QOBOuJ9J

印刷位置の調整

こちらの記事を参考にさせていただきました。

paper.cssを使ってブラウザだけで名刺を印刷する

当初はPDFを生成するつもりでしたが、HTMLとCSSだけで精密な印刷位置調整ができることがわかり、よりシンプルに実装することができました。

ホスティング

Netlifyでホスティングしています。
今のところは複雑なことは何もしていません。
完全な静的サイトです。

ソースコードを見ていただければ分かる通り、入力されたデータは保持していないので顧客情報が漏洩する心配もありません。

今後の展望

記事執筆時点ではサービスが始まっていないので、ゆうちょPayが今後発展するかどうかは分かりません。
QRコード決済が乱立する状況を踏まえると、成功する確率は低いと思っています。

それでも今回のアプリには、もう少し手を入れて改良して行くつもりです。
現在構想しているのは以下のような内容です。

• フレームワークの見直し(JQueryとBootstrap → Vue.jsとBulma）
• デフォルト値の記憶
• 外部システムとの連携

現在のシンプルさを損なわない範囲で実装していきたいと考えています。

おはようございます。かけるです。
今回は、vue.jsとhtmlでinput type="file"で選択した画像をプレビューをだす方法を紹介したいと思います。

こんな感じのドラッグアンドドロップもできるものを作ります。

コード全体

        <div class="imgContent">
          <div class="imagePreview">  
          <img :src="uploadedImage" style="width:100%;" />
             <input type="file" class="file_input" name="photo" @change="onFileChange"  accept="image/*" />
          </div>
        </div>

.imgContent {
   width: 90%;
    max-width: 700px;
    margin:auto;
     margin-bottom:40px;
} 
.imagePreview {
    height:30vh;
    background: rgb(240, 240, 240);
    overflow:hidden;
    border-radius: 10px;
    background-position: center center;
    background-size: cover;
     margin-bottom:30px;
     position: relative;
 }
 .fileUpload {
  text-align: center;
  position: absolute;
  height: 25px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  color:rgb(134, 134, 134);
  padding: 20px;
}

input自体をopacity:0;にすることで、あたかもイメージボックスを押して起動しているように見せることができます。これをベースにデザインなど変えてみたら面白いと思います。

    onFileChange(e) {
      let files = e.target.files || e.dataTransfer.files;
      this.createImage(files[0]);
    },
    // アップロードした画像を表示
    createImage(file) {
      let reader = new FileReader();
      reader.onload = (e) => {
        this.uploadedImage = e.target.result;
      };
      reader.readAsDataURL(file);
    }

createImageのFileReader()で画像が読み込まれて、それがonFileChange()で表示される仕組みになっています。

こんな感じで表示されます!!

まとめ

僕は、吉岡里帆が大好きです。
twitterやっているのでよかったら見てください！
読んでいただきありがとうございました。

axiosを使ってAPIリクエストを送る際に、前処理を行いたいケースがありました。
リクエストを送る前に毎回処理を記載する方法もあるのですが、interceptorsを使用することで綺麗に書けそうだったので調べてみました。

interceptorsとは

interceptは途中で捕まえるといった意味のようです。

You can intercept requests or responses before they are handled by then or catch.

リクエストを送る前にログを出してみる

interceptorsを使用して、毎回リクエストとレスポンスの前にログを出力させてみます。

import axios from 'axios';

axios.interceptors.request.use(request => {
  console.log(request.url)
  return request
})

axios.interceptors.response.use(response => {
  console.log(response.url)
  return response
})


axios.post('/path')
.then(() => {
  console.log('ok')
})
.catch(() => {
  console.log('ng')
})

// /path
// 200
// ok

下記の順番で出力されていることがわかりました。
1. interceptors.requestのログ
2. interceptors.responseのログ
3. then()のログ

実際にはパラメータやパスなどに処理を加える

実際に使う場合には、このようにリクエストを送る前処理を共通化させる場合などに使えると思います。

axios.interceptors.request.use(request => {
  JSON.stringify(request.data)
  return request
})

ReactでAbsolute Pathを設定するときに以前と変わっていたので共有も含めて更新！

過去

.env ファイルを作って以下のように定義していた

.env

NODE_PATH=src

現在

jsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

これまで通り開発しようとしたらすぐに分からず1~2時間ほどハマっていた（汗）

しっかりと公式ドキュメント見ていくべきだった。。

参照先: https://facebook.github.io/create-react-app/docs/importing-a-component#absolute-imports

タイムラインを「ばぶ」らせてみた

Chrome 拡張機能を公開した。アイコンをクリックすることで、タイムライン上のツイートの本文、ユーザー名、日時を「赤ちゃん言葉」に置き換えることができる¹ 。

実際の動作は以下のツイートの動画から確認できる（リリース版とは見た目が多少異なる点に注意）。

タイムラインを幼児化する chrome 拡張機能「ばぶったー」を作りました pic.twitter.com/syEnvUjCw7

— みやったー?️修行中 (@38tter_miya) 2019年4月26日

5/8追記

github へのリンクはこちらです。

なぜこのような拡張機能を作ったのか

世界平和のため。私見だが、他人のツイートに反感を感じるとき、文章の内容と同じくらい文章の書き方にもイラつくことが多いような気がする。そこで、タイムライン上の全員のツイートを赤ちゃんレベルの見た目にまで戻してしまえば、少なくとも文章から受ける印象は均質化されるのではないか、と考えた。我ながらムチャクチャな理屈である。

（読みにくいことはこの上ないが）全員が赤ちゃん言葉で喋っているタイムラインであれば、文書の印象から受ける単なる「感想」ではなく、文章の内容についての「意見」を持つことができるのではないか？ということである。 「みんな赤ちゃんみたいだなー」と思って終わるかもしれないけど。

もちろん、赤ちゃん化とまでいかなくとも、漢字をひらがな化するだけでもよさそうではあるが、そこは学習のためにもう一手間かけたくなった。単に自然言語処理の一種である形態素解析を用いて遊んでみたかったというのもある。

対象とする読者

• これから Chrome 拡張機能を開発したい人
• すでに拡張機能を開発しているが、外部 API との通信で困っている人
• 手を動かしながら JS の勉強をしたい人
• 自分

筆者について

非情報系理系院生。研究の関係（数値解析、統計処理）で C/C++/bash を 3 年ほど。C はリファレンスがなくてもおおよそ書けるが、ファイル入出力周辺は怪しい。C++ は研究関連の解析フレームワークを使用するために使っている。それ以外には、python, perl を多少齧った程度。

JavaScript に興味を持ったきっかけ

そもそものきっかけは、機械学習による自然言語処理に興味を持ったこと²。それに関連して学習データを用意するため、Web スクレイピングを勉強し始める。だがスクレピング技術の習得には Web ページの HTML 周りの基礎的な知識が不足していることを感じ、ぼちぼち勉強を始める。

JS もついでに勉強し始めたところ、コーディングの柔軟性や応用範囲の広さに魅力を感じた。また、以前から iOS アプリ開発にも関心があったのだが、敷居の高さを感じ手をつけていなかった。だが、最近は JS でもアプリ開発が可能である³ことを知り、本腰を入れて JS を勉強することに決める。

そこで実際に手を動かしながら学習を進めるため、比較的お手軽そうな Chrome 拡張機能の開発に挑戦することに。この記事にはリリース版から抜き出したコードの一部も掲載した。我ながら読みづらいコードだと思うが、ご容赦ください...。

Chrome 拡張機能とは

Chrome 上で実行できるアプリケーションのようなもの。ブラウザ上でのアクション（ボタンをクリック、ページ上で右クリックなど）に連動してなんらかの処理を実行するようなものが多い。

拡張機能の本体は、機能の説明をまとめた JSON 形式のファイルと、実際の挙動を書いた JS ファイルから構成されている。

• Manifest File

  • 拡張機能に関する情報を書くファイル。 JSON 形式で書く。

• Content Script

  • 任意のページで実行できるスクリプト。
  • chrome.*API が一部のものしか用いることができない。
  • ページ内で定義されている変数や関数にアクセスできない。
  • DOM の取得・操作はできる。

• Background Page

  • バックグラウンドで動くページであり、そこで様々な処理を行うことができる。
  • 常にメモリを占有してしまう。

• Event Page

  • やはりバックグラウンドで動作するが、必要なときだけ立ち上がって動作が完了すると閉じる。

• Browser Action / Page Action

  • chrome のツールバーに追加できるボタン。
  • 特定の web ページを対象としないような拡張機能は Browser Action が吉。常にurlバーの右に表示されている
  • ボタンがクリックされたときに用意した html ファイルをポップアップで表示させることができる

manifest file

まずは拡張機能に関する情報をまとめて記述する manifest file の書き方について。manifest file の記述に必要な JSON 形式についてはこちらの記事が参考になった。

manifest.json

{
  "manifest_version": 2,
  "name": "ばぶったー",
  "version": "0.0.4",
  "description": "ワンクリックで Twitter タイムラインを「赤ちゃん言葉」にします。",
  "short_name": "BBT",
  "content_scripts": [
    {
      "matches": [
        "https://twitter.com/*"
      ],
      "js": [ "js/content.js" ],
      "all_frames": true,
      "run_at": "document_end"
    }
  ],
  "icons": {
    "16": "akachan.jpg",
    "48": "akachan.jpg",
    "128": "akachan.jpg"
  },
  "browser_action": {
    "default_icon": {
      "19": "akachan.jpg"
    },
    "default_title": "Bubtter"
  },
  "background": {
    "scripts": [ "js/background.js" ],
    "persistent": false
  },
  "permissions": [
    "tabs",
    "activeTab",
    "background",
    "https://jlp.yahooapis.jp/MAService/V1/*"
  ]
}

• name, version, description
  • chrome ストアに表示される内容を記述する。
• content_scripts
  • 実行するスクリプトのパスや、スクリプトが実行されるページの URL などを記述する。
• icons
  • ストア上や、ブラウザ上の管理画面に表示されるアイコン画像のパスを指定できる。
• browser_action
  • アドレスバー横のアイコンの画像の指定や、アイコンクリック時にポップアップされるページの html ファイルなどを記述できる（今回は未使用）。
• background
  • background で実行されるスクリプトを指定する。
• permissions
  • ユーザーにパーミッションを要求する内容を記述する。今回はブラウザで表示中の tab に対して操作をするので "tabs" を記述している。外部API を使用する場合など、表示しているページと別の URL と通信する場合はここに記述する必要がある。

おおまかな実行内容のイメージ

1. アイコンのクリックを検知する
2. タイムライン上のテキスト（ツイート本文、ユーザー名、日時など）を取得する
3. 形態素解析API に fetch 経由でテキスト内容を送信する
4. xml 形式で結果（読みがな、品詞など）を読みこむ
5. 品詞に応じて文字列を操作する
6. ページ内のテキスト要素に、変更後の文字列を書き込む

以下、順を追って解説していく。

アイコンのクリックを検知する

"background" として指定された js ファイルは、常にバックグラウンドで実行されている。
ここでブラウザ上でボタンがクリックされたことを検知し、メッセージを送信する。

background.js

chrome.browserAction.onClicked.addListener(function(tab){
  chrome.tabs.sendMessage(tab.id, "myClick"); /* 第2引数の中味はなんでもよい */
});

contents_script 側では送信されたメッセージに反応して実行する処理を記述する。

content.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
  if( request == "myClick") {
    makeInfa();
  }
});

具体的な実行内容を書いた関数 makeInfa() の内容は以下の通り。

content.js

function makeInfa() {
  /* クリック時にページタイトルを変更。再度クリックで、ページタイトルの変更を検出してページ再読み込み。 */
  const bubTitle = "ばぶったー";
  let pageTitle = document.title;
  if (pageTitle === bubTitle) {
    document.title = "Twitter";
    chrome.runtime.sendMessage(
      {
        message: "fix it",
      },
      function(resp){
        return;
      }
    );
  } else {
    document.title = bubTitle;
  }

  /* ページ内要素の変更 */
  let darekaTweet = document.getElementsByClassName("TweetTextSize");
  for(let darekaTweetCnt=0;darekaTweetCnt<darekaTweet.length;darekaTweetCnt++){
    doConvert(darekaTweet[darekaTweetCnt]);
  }
  //...
}

content script では表示しているページ内の要素の取得、削除、改変などが可能だ。
Chrome の「要素を検証」（mac では opt + command + I）を使えば、ページ内で操作したい要素の Class 名や Tag 名が確認できる。

ブラウザ操作からの DOM の操作についてはこちら が参考になった。

タイムライン上のテキスト（ツイート本文、ユーザー名、日時など）を取得する

contetnt.js

function doConvert(obj) {
  let set = "";
  /* 一行にまとめてから送信 */
  for (let i=0;i<obj.length;i++){
    if (i===obj.length-1){
      for(let k=0;k<obj[i].innerText.length;k++){
        if(obj[i].innerText[k].match(regMatchExp)){
          set += obj[i].innerText[k];
        }
      }
    } else {
      for(let k=0;k<obj[i].innerText.length;k++){
        if(obj[i].innerText[k].match(regMatchExp)){
          set += obj[i].innerText[k];
        }
      }
      set += separateChar; /* 区切り文字を挟んでおき、あとで分割する */
    }
  }

  /* API との通信のためのメッセージ送信 */
  chrome.runtime.sendMessage(
    {
      message: "do it",
      text: set
    },
    function(response){
      let arr = response.split(separateChar);
      for(let j=0;j<obj.length;j++){
        for (let regCnt=0;regCnt<regExp.length;regCnt++){
          arr[j] = arr[j].replace(regExp[regCnt], resTex[regCnt]);
        }
      }
    }
  );
};

なぜ content script 側で直接 API との通信を行わないのかというと、後述するCORB(クロスオリジン)の問題があるからである。

形態素解析API に fetch 経由でテキスト内容を送信する => xml 形式で結果（読みがな、品詞など）を読みこむ => 品詞に応じて文字列を操作する

background.js

chrome.extension.onMessage.addListener(
  function(request, sender, sendResponse) {
    if (request.message == "do it") {
      const sentence = request.text; /* content script 側で送った text */

      let lastURL = URL + `?appid=` + APIKEY + `&sentence=` + encodeURI(sentence);
      const method = 'POST';
      const headers = {
        'Accept': 'application/json',
        'Content-Type': `application/x-www-form-urlencoded; charset=utf-8`
      };
      const obj = JSON.stringify({
        appid: APIKEY,
        sentence: sentence,
        results: "ma"
      });
      const body = Object.keys(obj).map((key)=>key+"="+encodeURIComponent(obj[key])).join("&");
      fetch(lastURL,
        {
          method,
          headers,
          body
        }
      ).then(
        function(res){
          if(res.ok){
            return res;
          } else {
            sendResponse("しっぱいでちゅ");
            throw "error";
          }
        }
      ).then(res => res.text()) /* Yahoo! の API の場合は xml 形式で返ってくる */
      .then(function(text){
        let dom = new DOMParser().parseFromString(text, 'text/xml');
        return dom;
      })
      .then(function(dom){
        let responseSent = "";
        let text = dom.querySelectorAll("reading");
        let kind = dom.querySelectorAll("pos");
        let surf = dom.querySelectorAll("surface");

        for(let cnt=0;cnt<text.length;cnt++){
          if(kind[cnt].innerHTML === "助動詞" && cnt === text.length-1){
            responseSent += text[cnt].innerHTML + 'でちゅ。';
          } else if (kind[cnt].innerHTML === "名詞") {
            let matchFlg = 0;
            for(let nameCnt in Object.keys(youjiTxt)){
              if(surf[cnt].innerHTML === Object.keys(youjiTxt)[nameCnt]){
                responseSent += "" + youjiTxt[Object.keys(youjiTxt)[nameCnt]] + "";
                ++matchFlg;
                break;
              }
            }
            if (!matchFlg) responseSent += "" + text[cnt].innerHTML + "";
            if (cnt === text.length-1) responseSent += "でしゅ";
          } else if (kind[cnt].innerHTML === "助詞") {
            responseSent += text[cnt].innerHTML + '、';
          } else if (kind[cnt].innerHTML === "動詞" && cnt === text.length-1) {
            responseSent += text[cnt].innerHTML + 'だっちゃ。';
          } else if (kind[cnt].innerHTML === "形容詞") {
            let bufEnd = text[cnt].innerHTML.slice(-1,0);
            responseSent += text[cnt].innerHTML.slice(0,-1) + 'ー' + bufEnd;
          } else if (kind[cnt].innerHTML === "形容動詞") {
            responseSent += text[cnt].innerHTML + 'でちゅ';
          } else if (kind[cnt].innerHTML === "感動詞") {
            responseSent += text[cnt].innerHTML + '！';
          } else {
            responseSent += text[cnt].innerHTML;
          }
        }
        sendResponse(responseSent);
      });
    } else {
      chrome.tabs.getSelected(null, function(tab){
        let newURL = tab.url
        chrome.tabs.update(tab.id, {url: newURL});
      });
      sendResponse("hoge");
    }
    return true;
  });

Web 上のリソースに JavaScript からアクセスする方法は

• XHR
• jQuery.ajax
• fetch

と変化してきているという。昔の方法もまだ使えるが、現在は fetch の使用が推奨されているらしい。そこで素直に fetch を使用。記述に関してはこちら が参考になった。
fetch で POST する際の記述の仕方でつまづいていたのだが、こちら を読んで解決。

具体的なテキスト処理では Yahoo! JAPAN の日本語形態素解析 API を使用した。詳細はこちら から。今回は使用しなかったが、単語ごとの出現頻度なども使用できるらしい。

結果は xml 形式で受け取るので、うまく必要な情報（読みがな、品詞名）を取り出すのに少々苦労した。JSON 形式にも対応しているのかは不明（すみません...）。

ページ内のテキスト要素に、変更後の文字列を書き込む

content.js 内で background からのレスポンスを受け取ってからの処理である。
舌足らずな文章に見えるよう、文字列に対して置換操作を行う。その後、要素を変更するオブジェクトにテキスト内容を代入した。

幼児語についてはこちら を参考にした。つかれたでしゅ。

content.js

let regMatchExp = /^[-:\/a-zA-Z0-9\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u30e0-\u9fcf、。「」【】]+$/;

let regExp = [ /でちゅ/g, /つ/g, /す/g, /ま/g, /ふ/g, /る/g, /おう/g, /いう/g,  /、{2,}/g, /、。/g ];
let resTex = [ "", "ちゅ", "しゅ", "みゃ", "ひゅ", "ゆ", "おー", "ゆー",  "、", "。" ];

chrome.runtime.sendMessage(
    {
      message: "do it",
      text: set
    },
    function(response){
      let arr = response.split(separateChar);
      for(let j=0;j<obj.length;j++){
        for (let regCnt=0;regCnt<regExp.length;regCnt++){
          arr[j] = arr[j].replace(regExp[regCnt], resTex[regCnt]); /* 愚直にテキスト置換 */
        }
      }
    }
  );

クロスオリジン（CORB; Cross-Origin Read Blocking）問題

クロスオリジン問題とは、ある種の攻撃を防ぐために、画像デコーダやJavaScriptエンジンがクロスオリジンのリソースを読み込む前にブロックする仕組みだという。
content script 内にそのまま fetch の内容を書いたところ、この問題にぶつかった。

どうやら fetch で異なるドメインのリソースを使用するには、本来はクライアント側、サーバー側双方で設定する必要があるらしい。今回のように外部APIを使用する場合は如何ともしがたいのではないか...（と思っているのだが、間違っていたらすみません）。

その後も

• jQuery.ajax() ならクライアント側をいじるだけでなんとかなりそう？
• XHR なら permissions をいじるだけで API を使っても cross domain 問題で怒られないらしい。参考記事はこちら 。

など他の方法も検討したが、最終的には

• fetch でも、contents 側ではなく background 側に記述すれば CORB は起こらない ということを知った。参考記事はこちら 。

その他の苦労した点

contents script に対応する js ファイルが読み込まれるタイミング

当初はブラウザアクションではなく、ページを読み込むタイミングで content script の内容を実行することを考えていた。
ページの読み込みがすべて終わってからでないと、実行時にツイート本文の取得がうまくいかない（manifest.json では "run_at" で実行タイミングを指定できそうな雰囲気があるが、ここに "document_end" を記述しただけではうまくいかなかった）。

ページ読みこみ時の実行では、以下のようなエラーが表示され Mutation Observer を機能させることができなかった。

Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node’.

対処法としては、こちら を参考にした。

結局、ブラウザアクション（ボタンをクリック）からスクリプトを実行するよう変更したので、上記の内容は実装されていないのだが。

背景画像の変更

「ばぶったー」の名前にふさわしく、「幼児」「赤ちゃん」などでググると表示されるフリー素材画像を背景画像に設定しようと考えていたのだが、2015年7月から twitter の背景画像の変更機能は廃止されたそうだ。残念。

ページ要素の変更を検出して実行

公開したバージョンでは通信量を減らすため実装されていないが、

• タイムラインを書き換えた後の、新たなツイートの読み込みを検出し、再度書き換えを実行すること
• 実行中に twitter.com 内の他のページに移動した際にページ上の書き換えた内容を保持すること

も可能である。こちら が参考になった。

リリースについて

全ファイルを圧縮して、chrome デベロッパーダッシュボード にアップロードするだけ。初回だけ $ 5.0 支払う必要がある。

今後の展望

改良したい点、できたらいいなと思う点など。

• 形態素解析を内部で処理する。現状使用している外部APIは通信量に制約があるので、mecab などを使うとか？
• ツイート内の画像を「ばぶ」感のあるテイストにして置き換える（手書き風とか）。画像認識系の機械学習ライブラリ案件か？道のりは長い。
• 何かアイデアがありましたらコメントいただけると幸いです。

---

1. ラブリーなアイコンは人に描いてもらいました。スペシャルサンクスです。ただ、画像サイズの指定をミスったので、細かすぎたかも。 ↩

2. @youwht さんの記事（https://qiita.com/youwht/items/0b204c3575c94fc786b8 ）を参考に、Word2Vec を使って新元号を予想したりして遊んでいた。これについてはそのうち記事にまとめたい。 ↩

3. Facebook や Instagram なども使っている React Native なるものを使えばいけるらしい。次はこれを勉強しようと考えている。 ↩

今日やったこと

• ドットインストール「JavaScript基礎文法編」復習
• ドットインストール「詳解JavaScriptオブジェクト編」復習
• ドットインストール「詳解JavaScript DOM編」

3倍速で復習しました。
ほとんど理解している状態での復習なので、３倍速でも特に問題なく進められました。

オブジェクト編も２周してみて、ようやく大体理解できるようになりました。

１周目は＃２３の例外処理の意味がよくわからなかったのですが、２周目で「これは便利だ！」と思いました。

例外処理を行うと、エラーが出ても処理が止まらずに最後まで実行できるようになります。

コードが複雑になればなるほど、途中で実行が止まることがよくあるので、そういった意味でこれは便利だなと思いました。

あと、DOM編を動画視聴のみですが、一通り見てみました。

以前、ドットインストールのタイピングゲームを作ったときにちょっと理解できていなかったところが理解できるようになりました。

やはり最低限の基礎は身につけておくべきですね。

ただ、これでドットインストールのJavaScriptのカリキュラムになるアプリ、ゲームは理解できるようになると思うので、明日からまた１つずつ作っていきたいと思います。

それでは、明日も引き続き頑張ります。

おわり

非同期IOであるJavaScriptの非同期処理を扱いやすくするためにPromiseやasync/awaitが使われることが標準となってきました。

非同期処理を複数同時に実行する場合、Promise.allを利用することで同時並行で進め、全てが完了したタイミングで処理が終了してくれます。

多くの場合はPromise.allで事足りるのですが、これが数百・数千といった単位になった場合、一気に外部サイトにリクエストを送ろうものなら大きな問題となりうるので、並列の実行数を規定したい時の対応を紹介します。

外部ライブラリを使わなくても簡単に実装できる

Promise.allの並列数を設定したいニーズは一定数あるようで、有力なPromiseライブラリであるbluebirdにもPromise.mapという機能が用意されているので、そちらを利用すると指定した並列数で処理を実行してくれます。

とはいえ並列数を指定するためだけに比較的大きなライブラリであるbluebirdをインストールするのも気が引けるので、どうせならもっと簡単に実現できるのではないかと考えて実装したところ、TypeScriptでわずか15行で実現できました。

const concurrentPromise = async <T>(promises: (() => Promise<T>)[], concurrency: number): Promise<T[]> => {
  const results: T[] = [];
  let currentIndex = 0;

  while (true) {
    const chunks = promises.slice(currentIndex, currentIndex + concurrency);
    if (chunks.length === 0) {
      break;
    }
    Array.prototype.push.apply(results, await Promise.all(chunks.map(c => c())));
    currentIndex += concurrency;
  }
  return results;
};

処理の内容としては並列数分だけ先頭から要素を取り出し、要素の末尾までループで実行し続け、最後まで完了した時点で実行結果を返します。

実行結果の確認

それでは上の関数を使って実際に動かしてみましょう。setTimeoutするだけの関数を配列に入れて実行します。

const timeoutExecution = (time: number): Promise<number> => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(time);
      resolve(time);
    }, time);
  });
};

(async () => {
  const promises = [...Array(10).fill(null)].map((_, i) => timeoutExecution.bind(null, i * 100));
  await concurrentPromise(promises, 5);
})();

実行結果は以下の通りです。

0
100
200
300
400
500
600
700
800
900
1000

文字だけを見ると伝わりませんが、確かに並列処理がされており、一つの並列セットの処理が完了してから次のセットが実行されていました?

引数を取る関数を渡す場合

型定義を見ると引数を取らないPromise型の関数のみ渡せるように見えが、引数を取ることも可能です。

const sum = (x: number, y: number): number => {
  return x + y;
};

const executor = sum.bind(null, 10, 20);
console.log(executor());

このようにbindを通じて引数を設定した変数に代入すれば、引数なしのFunction型に変換できます。

かつてはbindを使うとTypeScriptの型情報を失ってしまっていたのですが、Version 3.2からbindの厳密な型チェックが可能となり、tsconfig.jsonに"strictBindCallApply": trueを追加すれば安全に実行することが可能です。

何よりコード量が少なく、かつある程度汎用的に利用できるので、同様のユースケースの際にぜひ参考にしてみてください。

非同期IOであるJavaScriptの非同期処理を扱いやすくするためにPromiseやasync/awaitが使われることが標準となってきました。

非同期処理を複数同時に実行する場合、Promise.allを利用することで同時並行で進め、全てが完了したタイミングで処理が終了してくれます。

多くの場合はPromise.allで事足りるのですが、これが数百・数千といった単位になった場合、一気に外部サイトにリクエストを送ろうものなら大きな問題となりうるので、並列の実行数を規定したい時の対応を紹介します。

外部ライブラリを使わなくても簡単に実装できる

Promise.allの並列数を設定したいニーズは一定数あるようで、有力なPromiseライブラリであるbluebirdにもPromise.mapという機能が用意されているので、そちらを利用すると指定した並列数で処理を実行してくれます。

とはいえ並列数を指定するためだけに比較的大きなライブラリであるbluebirdをインストールするのも気が引けるので、どうせならもっと簡単に実現できるのではないかと考えて実装したところ、TypeScriptでわずか15行で実現できました。

const concurrentPromise = async <T>(promises: (() => Promise<T>)[], concurrency: number): Promise<T[]> => {
  const results: T[] = [];
  let currentIndex = 0;

  while (true) {
    const chunks = promises.slice(currentIndex, currentIndex + concurrency);
    if (chunks.length === 0) {
      break;
    }
    Array.prototype.push.apply(results, await Promise.all(chunks.map(c => c())));
    currentIndex += concurrency;
  }
  return results;
};

処理の内容としては並列数分だけ先頭から要素を取り出し、要素の末尾までループで実行し続け、最後まで完了した時点で実行結果を返します。

実行結果の確認

それでは上の関数を使って実際に動かしてみましょう。setTimeoutするだけの関数を配列に入れて実行します。

const timeoutExecution = (time: number): Promise<number> => {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(time);
      resolve(time);
    }, time);
  });
};

(async () => {
  const promises = [...Array(10).fill(null)].map((_, i) => timeoutExecution.bind(null, i * 100));
  await concurrentPromise(promises, 5);
})();

実行結果は以下の通りです。

0
100
200
300
400
500
600
700
800
900

文字だけを見ると伝わりませんが、確かに並列処理がされており、一つの並列セットの処理が完了してから次のセットが実行されていました?

引数を取る関数を渡す場合

型定義を見ると引数を取らないPromise型の関数のみ渡せるように見えが、引数を取ることも可能です。

const sum = (x: number, y: number): number => {
  return x + y;
};

const executor = sum.bind(null, 10, 20);
console.log(executor()); // --> 30

このようにbindを通じて引数を設定した変数に代入すれば、引数なしのFunction型に変換できます。

かつてはbindを使うとTypeScriptの型情報を失ってしまっていたのですが、Version 3.2からbindの型チェックが可能となり、tsconfig.jsonに"strictBindCallApply": trueを追加すれば型チェックを行ってくれます。(ただしnullableのチェックはまだ対応していないようです)

何よりコード量が少なく、かつある程度汎用的に利用できるので、同様のユースケースの際にぜひ参考にしてみてください。

目的

• Typeormを使って、環境ごとに接続するDBを切り分けます。
• もっといい方法があると思っているので、もしあれば教えていただきたいです。

環境

• Node: v10.15.2
  • nodeenvを利用し、プロジェクトごとにバージョンを指定することがおすすめです。

利用するパッケージ

typeorm

使用方法

1. packageをinstall

今回はyarnでinstallします。

$ yarn add --dev typeorm

2. 設定ファイルを作成(任意)

環境ごとに orconfig.{環境名}.json を作成します。

• orconfig.develop.json

{
  "type": "mysql",
  "host": "YOUR_DB_HOST",
  "port": 3306,
  "username": "YOUR_DB_USERNAME",
  "password": "YOUR_DB_PASSWORD",
  "database":"YOUR_DB_PASSWORD",
    // migrationfileで世代管理するためには、ここをfalseにする必要があります。
    "synchronize": false,
    "logging": false,
    "entities": [
      "src/entities/*.ts"
    ],
    "migrations": [
      "src/migrations/*.ts"
    ],
    "subscribers": [
      "src/subscribers/*.ts"
    ],
    "cli": {
      "entitiesDir": "src/entities",
      "migrationsDir": "src/migrations",
      "subscribersDir": "src/subscribers"
    }
}

• orconfig.production.json

{
  "type": "mysql",
  "host": "YOUR_DB_HOST",
  "port": 3306,
  "username": "YOUR_DB_USERNAME",
  "password": "YOUR_DB_PASSWORD",
  "database":"YOUR_DB_PASSWORD",
    // migrationfileで世代管理するためには、ここをfalseにする必要があります。
    "synchronize": false,
    "logging": false,
    "entities": [
      "src/entities/*.ts"
    ],
    "migrations": [
      "src/migrations/*.ts"
    ],
    "subscribers": [
      "src/subscribers/*.ts"
    ],
    "cli": {
      "entitiesDir": "src/entities",
      "migrationsDir": "src/migrations",
      "subscribersDir": "src/subscribers"
    }
}

3. package.jsonの修正(script追記)

環境ごとのyarnスクリプトを実行し、ExpressプロジェクトにENV_SETTINGS環境変数を渡します。

{
  "scripts": {
    "dev": "tsc && ts-node-dev src/index.ts",
    "start:local": "yarn migration:run && tsc && ts-node src/index.ts",
    "start:develop": "yarn migration:run:develop &&tsc && ENV_SETTINGS=\"develop\" ts-node src/index.ts",
    "start:production": "yarn migration:run:production && tsc && ENV_SETTINGS=\"production\" ts-node src/index.ts",
    "//": "use -n option. it defines migration file name. example: yarn migration -n createTableUser",
    "migration": "ts-node ./node_modules/.bin/typeorm migration:generate -f ormconfig.local.json",
    "migration:run": "ts-node ./node_modules/.bin/typeorm  migration:run -f ormconfig.local.json",
    "migration:run:develop": "ts-node ./node_modules/.bin/typeorm  migration:run -f ormconfig.develop.json",
    "migration:run:production": "ts-node ./node_modules/.bin/typeorm  migration:run -f ormconfig.production.json",
    "migration:revert": "ts-node ./node_modules/.bin/typeorm migration:revert -f ormconfig.local.json",
    "migration:revert:develop": "ts-node ./node_modules/.bin/typeorm migration:revert -f ormconfig.develop.json",
    "migration:revert:production": "ts-node ./node_modules/.bin/typeorm migration:revert -f ormconfig.production.json"
  }
}

4. 環境変数によって読み込むconfigファイルを切り分ける

• index.ts

import {createConnection} from "typeorm";
import App from './app';

// 環境変数にセットされているENV_SETTINGSを格納する
var env: string = (process.env.ENV_SETTINGS) ? process.env.ENV_SETTINGS : "local";
// 環境ごとにconfigファイルを読み込む
export const connectOption = require(`../ormconfig.${env}.json`);

createConnection(connectOption)
  .then(async connection => {
    const app = new App();
    app.start();
  })
  .catch(error => console.log(error));

(補足)やりたかったこと

• ormconfigの設定ファイルはormconfig.tsのみにして、各値をconfig/{環境}.tsにまとめ、export/importで行いたかったのですが、migration:runの時にエラーが発生し、断念しております。 (https://typeorm.io/#/using-ormconfig)

before

├── config
│   ├── develop.ts
│   ├── production.ts
│   └── undefined.ts
├── ormconfig.develop.json
├── ormconfig.local.json
├── ormconfig.production.json
├── package.json
├── src
│   ├── app.ts
│   ├── index.ts

after

├── config
│   ├── develop.ts
│   ├── production.ts
│   └── undefined.ts
├── ormconfig.ts
├── package.json
├── src
│   ├── app.ts
│   ├── index.ts

目的

• Typeormを使って、環境ごとに接続するDBを切り分けます。
• 補足のところに書きましたが、もっといい方法があると思っているので、もしあれば教えていただきたいです。

環境

• Node: v10.15.2
  • nodeenvを利用し、プロジェクトごとにバージョンを指定することがおすすめです。

利用するパッケージ

typeorm

使用方法

1. packageをinstall

今回はyarnでinstallします。

$ yarn add --dev typeorm

2. 設定ファイルを作成(任意)

環境ごとに orconfig.{環境名}.json を作成します。

• orconfig.develop.json

{
  "type": "mysql",
  "host": "YOUR_DB_HOST",
  "port": 3306,
  "username": "YOUR_DB_USERNAME",
  "password": "YOUR_DB_PASSWORD",
  "database":"YOUR_DB_PASSWORD",
    // migrationfileで世代管理するためには、ここをfalseにする必要があります。
    "synchronize": false,
    "logging": false,
    "entities": [
      "src/entities/*.ts"
    ],
    "migrations": [
      "src/migrations/*.ts"
    ],
    "subscribers": [
      "src/subscribers/*.ts"
    ],
    "cli": {
      "entitiesDir": "src/entities",
      "migrationsDir": "src/migrations",
      "subscribersDir": "src/subscribers"
    }
}

• orconfig.production.json

{
  "type": "mysql",
  "host": "YOUR_DB_HOST",
  "port": 3306,
  "username": "YOUR_DB_USERNAME",
  "password": "YOUR_DB_PASSWORD",
  "database":"YOUR_DB_PASSWORD",
    // migrationfileで世代管理するためには、ここをfalseにする必要があります。
    "synchronize": false,
    "logging": false,
    "entities": [
      "src/entities/*.ts"
    ],
    "migrations": [
      "src/migrations/*.ts"
    ],
    "subscribers": [
      "src/subscribers/*.ts"
    ],
    "cli": {
      "entitiesDir": "src/entities",
      "migrationsDir": "src/migrations",
      "subscribersDir": "src/subscribers"
    }
}

3. package.jsonの修正(script追記)

環境ごとのyarnスクリプトを実行し、ExpressプロジェクトにENV_SETTINGS環境変数を渡します。

{
  "scripts": {
    "dev": "tsc && ts-node-dev src/index.ts",
    "start:local": "yarn migration:run && tsc && ts-node src/index.ts",
    "start:develop": "yarn migration:run:develop &&tsc && ENV_SETTINGS=\"develop\" ts-node src/index.ts",
    "start:production": "yarn migration:run:production && tsc && ENV_SETTINGS=\"production\" ts-node src/index.ts",
    "//": "use -n option. it defines migration file name. example: yarn migration -n createTableUser",
    "migration": "ts-node ./node_modules/.bin/typeorm migration:generate -f ormconfig.local.json",
    "migration:run": "ts-node ./node_modules/.bin/typeorm  migration:run -f ormconfig.local.json",
    "migration:run:develop": "ts-node ./node_modules/.bin/typeorm  migration:run -f ormconfig.develop.json",
    "migration:run:production": "ts-node ./node_modules/.bin/typeorm  migration:run -f ormconfig.production.json",
    "migration:revert": "ts-node ./node_modules/.bin/typeorm migration:revert -f ormconfig.local.json",
    "migration:revert:develop": "ts-node ./node_modules/.bin/typeorm migration:revert -f ormconfig.develop.json",
    "migration:revert:production": "ts-node ./node_modules/.bin/typeorm migration:revert -f ormconfig.production.json"
  }
}

4. 環境変数によって読み込むconfigファイルを切り分ける

• index.ts

import {createConnection} from "typeorm";
import App from './app';

// 環境変数にセットされているENV_SETTINGSを格納する
var env: string = (process.env.ENV_SETTINGS) ? process.env.ENV_SETTINGS : "local";
// 環境ごとにconfigファイルを読み込む
export const connectOption = require(`../ormconfig.${env}.json`);

createConnection(connectOption)
  .then(async connection => {
    const app = new App();
    app.start();
  })
  .catch(error => console.log(error));

(補足)やりたかったこと

• ormconfigの設定ファイルはormconfig.tsのみにして、各値をconfig/{環境}.tsにまとめ、export/importで行いたかったのですが、migration:runの時にエラーが発生し、断念しております。 (https://typeorm.io/#/using-ormconfig)

before

├── config
│   ├── develop.ts
│   ├── production.ts
│   └── undefined.ts
├── ormconfig.develop.json
├── ormconfig.local.json
├── ormconfig.production.json
├── package.json
├── src
│   ├── app.ts
│   ├── index.ts

after

├── config
│   ├── develop.ts
│   ├── production.ts
│   └── undefined.ts
├── ormconfig.ts
├── package.json
├── src
│   ├── app.ts
│   ├── index.ts

wp-adminからWP APIをJSからコールする方法を試したので覚書。

WP APIをコールする際の注意点

認証が必要なAPIは、X-WP-Nonceをヘッダーで送る必要がある。

wp-api.jsのimport

nonceの生成などをよしなにしてくれるのでimportしておく。
ついでにPOSTリクエストにjqueryを使うのでこちらもいれておく。

add_action('wp_enqueue_scripts', 'add_scripts' );
add_action('admin_enqueue_scripts', 'add_scripts' );

function add_scripts() {
  if ( is_user_logged_in() ) {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'wp-api' );
    wp_enqueue_script( "custom_js", plugins_url( 'libs/scripts.js', __FILE__ ), array( 'jquery', 'wp-api' ) );
  }
}

libs/scripts.js

リクエスト処理部分。
wp-api.jsを入れていると、window.wpApiSettingsという値がwp-adminでは定義されている様子。
これにWP APIのパスとnonceが入っているので使う。

const settings = window.wpApiSettings
const requestObj = {
    url: settings.root + 'wp/v2/posts',
    method: 'POST',
    beforeSend: function ( xhr ) {
      xhr.setRequestHeader( 'X-WP-Nonce', settings.nonce );
    },
    body: { /* post params */}
}
jQuery.ajax( requestObj )
  .then( result => console.log( result ) )

wp-api.jsをちゃんと使えばjQueryもいらない気はする。
ただ、Backbone.js触ったことがないのでそれはまた時間ができたときにでも。

分割代入(Destructuring assignment)

配列の要素/プロパティを個々の変数に代入するために使用します。
ES2015の前と後で比較してみます。

従来の分割代入(ES2015以前)

配列の各値を取得するために、各要素にアクセスして代入する必要がありました。

let data = [1, 2, 4, 8, 16]
let x0 = data[0] //1
let x1 = data[1] //2
let x2 = data[2] //4
let x3 = data[3] //8
let x4 = data[4] //16

分割代入(ES2015)

以下は、従来の分割代入と同じ結果になります。

let data = [1, 2, 4, 8, 16]
let [x0, x1, x2, x3, x4, x5] = data
//各変数の値は上記と同値のため、省略します。

x0にdata[0]の値をいれて、それ以外を1つの変数に配列としていれる方法もあります。

let data = [1, 2, 4, 8, 16]
let [x0, ...others] = data
console.log(x0)     //1
console.log(others) //[2, 4, 8, 16]

---

このような代入の仕方もあります。

let data = [1, 2, 4, 8, 16]
let [...data2] = data //data2 = [1, 2, 4, 8, 16]

一見、data2にdataの各要素をいれているだけに見えるため
data2 = dataと何が違うのか分かりづらいです。
配列は参照型であるため、data2 = dataとすると、以下のようになります。

let data = [1, 2, 4, 8, 16]
let data2 = data
data[0] = 100
console.log(data2) //[100, 2, 4, 8, 16]

先程の記載で代入すると、dataの要素が変更されてもdata2に影響はありません。

let data = [1, 2, 4, 8, 16]
let [...data2] = data //data2 = [1, 2, 4, 8, 16]
data[0] = 100
console.log(data2) //[1, 2, 4, 8, 16]

分割代入(オブジェクト)

オブジェクトのプロパティを変数にいれることができます。

let profile = {name: "Thomas", age: 23, sex: "man"}
let {name, sex, like = "JavaScript"} = profile

console.log(name) //Thomas
console.log(sex)  //man
console.log(like) //JavaScript

はじめに

タイトルの通り、Popoverのcontentの背景色がなぜか真っ白になったり・ツラついたりする現象に遭遇したので、対処方法を共有します。

原因

IE11とPopoverが展開するcontainerのスタイルの指定が相性が悪いため。
デフォルトでは、containerには transform: translate3d(xxx, xxx, xxx) なスタイルが適用されています。

対処方法

Popoverコンポーネントのmodifiers propsに以下のようなオブジェクトを渡すことにより、この問題を回避できます。
※IE11の場合のみ、falseにするという条件分岐を入れてもいいかと思います

const hoge = {
  computeStyle: {
   gpuAcceleration: false 
  }
}

参考

https://popper.js.org/popper-documentation.html#modifiers..computeStyle.gpuAcceleration

はじめに

・トランザクション処理をストアドプロシージャにまとめることでソースをすっきりさせたい衝動にかられ、ストアドプロシージャを呼び出してみた。
・いままでクライアント側にSQLをベタ打ちしていてセキュリティーの問題がやばいみたいなので...

開発環境

・サーバー構成
　WindowsServr2012R2
　Apache + SQLServer2012 + PHP
　
・クライアント構成
　JavaScript + jQuery

実装コード

・クライアントからのAPIの呼び出し

classDatabase.js

//=========================================
// Database クラス
// データベースに関する命令をまとめる
//=========================================
const DatabaseAsyncOn = true;
const DatabaseAsyncOff = false;

function Database(accountName, userName, async) {
    this.accountName = "dev"; // accountName;
    this.userName = "dev"; // userName;
    this.async = false; // async;
}
Database.prototype = {
    //=========================================
    // SELECT メソッド（prepareを使用したもの）
    // DBからSQLを使ってデータをGETする
    //=========================================
    getProcedures: function(mappingName, prepare) {
        var returnData = null;
        $.ajax({
            type: "POST",
            url: "../../common/php/getProcedures.php",
            data: {
                "accountName": this.accountName,
                "userName": this.userName,
                "mappingName": mappingName,
                "prepare[]": prepare
            },
            dataType: "json",
            async: this.async,
            // 成功したときの処理
            success: function(data) {
                returnData = data;
                console.log('\n\nmappingName: ' + mappingName);
                console.log('parametter: ' + prepare);
                console.log('data: ' + data);
            },
            // エラー処理
            error: function(data) {
                returnData = false;
                console.log('\n\nmappingName: ' + mappingName);
                console.log('parametter: ' + prepare);
                console.log('data: ' + data);
            }
        });
        return returnData;
    }
};

main.js

    // APIの呼び出し
    // マッピング：200402
    self.midokuMember = self.database.getProcedures(
            'mapping200402',[
                self.companyID,
                eventNo,
                today
            ]
    );

サーバー側
　ストアドプロシージャ呼び出し用のAPI

setProcedures.php

<?php
  $accountName = $_POST["accountName"];
  $userName    = $_POST["userName"];
  $mappingName = $_POST["mappingName"];
  $prepare     = $_POST["prepare"];
  $org_timezone = date_default_timezone_get();
  date_default_timezone_set('Asia/Tokyo');
  $dsn = 'sqlsrv:server=【IPアドレス】;database=' . $accountName;
  $password = '【DB接続パスワード】';
  try {
    $dbh = new PDO($dsn, $userName, $password);
    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $dbh->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE , PDO::FETCH_ASSOC);
    //////////////////////////////////////////////
    // セット処理
    //////////////////////////////////////////////
    // ステートメント準備
    $stringPrepare = "{CALL ".$mappingName."(";
    foreach ($prepare as $key => $value) {
      # code...
      $stringPrepare = $stringPrepare."?,";
    }
    if (count($prepare) != 0) {
      $stringPrepare = substr($stringPrepare, 0, -1);   // 最後尾の文字を削除する
    }
    $stringPrepare = $stringPrepare.")}";
    error_log($stringPrepare);
    $stmt = $dbh->prepare($stringPrepare);
    for ($i=0; $i < count($prepare); $i++) {
      # code...
      $stmt->bindParam($i+1, $prepare[$i], PDO::PARAM_STR);
    }
    $stmt -> execute();
    echo "\nPDO::errorInfo():\n";
    print_r($dbh->errorInfo());
    $dbh = null;
    date_default_timezone_set($org_timezone);
  }
  catch (PDOException $e) {
    echo 'Error : ',  $e->getMessage(), "\n";
    die('MSSQL Serer Connect Error');
  }
?>

呼び出し元のストアドプロシージャ

mapping200409.sql

USE [dev]
GO
/****** Object:  StoredProcedure [dbo].[mapping200402]    Script Date: 2018/12/26 12:10:09 ******/
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
ALTER PROCEDURE [dbo].[mapping200402]
  @companyID nvarchar(4),
  @eventNo int,
  @today nvarchar(10)
AS
BEGIN TRY
    BEGIN TRANSACTION        --トランザクションの開始
        BEGIN
            -- マッピング2：未読者の取得
            SELECT MK_smartPhone.companyID,
                   MK_smartPhone.staffID,
                   MK_staff.name
            FROM   MK_smartPhone INNER JOIN MK_staff ON 
                   MK_smartPhone.companyID = MK_staff.companyID AND 
                   MK_smartPhone.staffID = MK_staff.staffID LEFT OUTER JOIN
                   MK_history ON 
                   MK_smartPhone.companyID = MK_history.companyID AND 
                   MK_smartPhone.staffID = dbo.MK_history.staffID
            WHERE  (MK_smartPhone.name <> N'card') AND 
                   ((MK_history.category = 2) AND 
                   (MK_history.flag = 0) AND 
                   (MK_history.companyID = @companyID) AND 
                   (MK_history.externNo = @eventNo) AND 
                   (MK_staff.retireDate > @today OR
                    MK_staff.retireDate IS NULL OR
                    MK_staff.retireDate = '') OR
                   (MK_history.flag IS NULL))
            GROUP BY MK_smartPhone.companyID,
                     MK_smartPhone.staffID, 
                     MK_staff.name, 
                     MK_history.externNo
            ORDER BY MK_smartPhone.staffID          
        END
    COMMIT TRANSACTION       --トランザクションを確定
END TRY


--例外処理
BEGIN CATCH
    ROLLBACK TRANSACTION     --トランザクションを取り消し
    PRINT ERROR_MESSAGE()    --エラー内容を戻す
    PRINT 'ROLLBACK TRANSACTION'
END CATCH

RETURN

まとめ

・SQLを別ファイルに分離してソースの読みやすさ管理のしやすさの向上が図れた。
・言語ごとに得意分野があるのでそれぞれ適材適所で使用していきたい。※違う言語が紛れているとソースが読みづらくなる

　下記の様な使い分けがよいと改めて思った。
①JavaScript・・・画面周り、APIの呼び出し（ビジネスロジックは書かない）
②PHP・・・ビジネスロジックだけを書く
③ストアドプロシージャ・・・トランザクションの処理（ビジネスロジックは書かない）

概要

Jestを実行するとテストファイルが全部実行されたりして辿るのが大変ですよね。

そう思って公式ドキュメントを見ていた所いい感じのオプションがあったのでご紹介します。

ざっくり２種類あります。

--watch

Jest CLI Options · Jest

--watch
Watch files for changes and rerun tests related to changed files. If you want to re-run all tests when a file has changed, use the --watchAll option instead.

(Google翻訳)
ファイルの変更を監視し、変更されたファイルに関連するテストを再実行します。ファイルが変更されたときにすべてのテストを再実行したい場合は、代わりに--watchAllオプションを使用してください。

これをつけるとJestが監視状態で待機してくれます。この状態のままテストファイル、またはテスト対象ファイルを弄ると関連するものだけ実行してくれます。

何回も試したい場合はこっちがいいかもですね。

--onlyChanged

Jest CLI Options · Jest

--onlyChanged
別名: -o。 現在のリポジトリでそのファイルに変更があったかに基づいて、どのテストを実行するのかを識別しようとします。 git/hgのリポジトリでテストを実行した場合のみ動作し、静的な依存グラフが必要です （言い換えると動的な依存グラフは必要ありません）。

これをつけるといい感じに直前にいじったやつだけ出力してくれます。いいですね。

ちょっとだけ確認したいときはこっちのほうが早いです。

console.logも見たい場合

jest --silent=false --verbose false --onlyChanged

jestは標準ではconsole.logが出力されないようになってしまっているので、必要であれば--silent=false --verbose falseも付けるのがおすすめです。

もちろん、--watchにこの引数を付けてもOKです。

はじめに

この記事では、Reactの開発環境構築手順について、説明していきたいと思います。
構築の流れとして

1. Node.jsのインストール
2. パッケージマネージャーYarnのインストール
3. creat-react-appのインストール
4. 構築した環境でHello Worldを表示させてみる

1. Node.jsのインストール

まずは、下記のURLをクリックします。
https://nodejs.org/ja/

URLを開くとLTS版と最新版とあります。
簡単に説明すると、LTS版（Long Time Supportの略）は長期的サポートが受けれるもの
一方、最新版はサポート期間が短いが、最新の物を利用できるものです。

この記事ではLTS版をダウンロードして進めていきます。

nodeをダウンロードして、インストールできたら、ターミナルで下記のコマンドを入力して、Nodeがインストールしているかを確認します。Nodeのバージョンが表示されていれば大丈夫です。

$ node -v
v10.15.3

2. Yarnをインストール

nodeのパッケージマネージャであるYarnをインストールしていきます。
npmというパッケージマネージャがNodeをインストールした時点でありますが、npmよりもYarnの方がより高速で信頼度の高いものになっているので、Yarnをインストールしていきます。
Yarnをインストールする場合は、ターミナルで下記のコマンドを実行してください。

$npm install --global yarn
/usr/local/bin/yarn -> /usr/local/lib/node_modules/yarn/bin/yarn.js
/usr/local/bin/yarnpkg -> /usr/local/lib/node_modules/yarn/bin/yarn.js
+ yarn@1.15.2
updated 1 package in 1.698s

Yarnがインストールされているかは下記のコマンドを実行して、バージョンが表示されていれば大丈夫です。

$yarn --version
1.15.2

3. creat-react-appのインストール

従来のreactを用いた開発では、Babelやwebpackなど様々なパッケージをマニュアルでインストールする必要がったため、ものすごく手間がかかっていました。ですが、creat-react-appをインストールすることで、これらの問題が解消でき、簡単に必要なパッケージをインストールすることができます。
下記のコマンドを実行することでインストールできます。

$yarn global add creat-react-app

4. 構築した環境でHello Worldを表示させてみる

ターミナルから下記のコマンドを実行して、アプリケーションを作成します。
作成する場所は任意で構いません。

$create-react-app helloworld

下記のようなメッセージが表示されていればOKです。

Initialized a git repository.

Success! Created helloworld at /Users/******/helloworld

作成したプロジェクト配下に移動し、下記のstartコマンドを実行します。

$cd helloworld
$yarn start

実行後、ブラウザが起動し、以下の画面が表示されていればOKです。

ここまでできたら、helloworld/src配下にあるApp.jsを開きましょう。
App.jsを開くと以下のようなコードが書かれていると思います。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

App.jsの内容を全て消して、以下のようにソースを書いてみましょう。

import React from 'react';

class App extends React.Component{
  render()
  {
    return (
    <div>
      <h1>Hello World</h1>
    </div>
    );
  }
}

export default App;

修正してブラウザに以下のように表示されていればOKです。

概要

入力を正規化する必要があったので、ローマ字からカタカナに変換する関数を作成しました。
IMEと似た感じで変換されます（表にないものはそのまま出ます）。

aiueo → アイウエオ
hankachi → ハンカチ
tonari no kyaku ha yoku kakikuu kyakuda → トナリ ノ キャク ハ ヨク カキクウ キャクダ
toukyou tokkyo kyokakyoku → トウキョウ トッキョ キョカキョク
qawsedrftgyhujikolp → qアwセdrftgyフジコlp
高輪Gateway → 高輪ガテワy

コード

TSで書いているので、JSで使う場合型情報を落としてください。
促音やンへの対応は行っています。
抜けや不具合があったらご報告ください。

※ Google IMEで調べたところ、wが連続したときだけ他と違う挙動を示しましたが、面倒だったので他と同じようにただの促音になります。

interface ITree {
  [key: string]: ITree | string;
}

const tree: ITree = {
  a: 'ア', i: 'イ', u: 'ウ', e: 'エ', o: 'オ',
  k: {
    a: 'カ', i: 'キ', u: 'ク', e: 'ケ', o: 'コ',
    y: { a: 'キャ', i: 'キィ', u: 'キュ', e: 'キェ', o: 'キョ' },
  },
  s: {
    a: 'サ', i: 'シ', u: 'ス', e: 'セ', o: 'ソ',
    h: { a: 'シャ', i: 'シ', u: 'シュ', e: 'シェ', o: 'ショ' },
    y: { a: 'キャ', i: 'キィ', u: 'キュ', e: 'キェ', o: 'キョ' },
  },
  t: {
    a: 'タ', i: 'チ', u: 'ツ', e: 'テ', o: 'ト',
    h: { a: 'テャ', i: 'ティ', u: 'テュ', e: 'テェ', o: 'テョ' },
    y: { a: 'チャ', i: 'チィ', u: 'チュ', e: 'チェ', o: 'チョ' },
    s: { a: 'ツァ', i: 'ツィ', u: 'ツ', e: 'ツェ', o: 'ツォ' },
  },
  c: {
    a: 'カ', i: 'シ', u: 'ク', e: 'セ', o: 'コ',
    h: { a: 'チャ', i: 'チ', u: 'チュ', e: 'チェ', o: 'チョ' },
    y: { a: 'チャ', i: 'チィ', u: 'チュ', e: 'チェ', o: 'チョ' },
  },
  n: {
    a: 'ナ', i: 'ニ', u: 'ヌ', e: 'ネ', o: 'ノ', n: 'ン',
    y: { a: 'ニャ', i: 'ニィ', u: 'ニュ', e: 'ニェ', o: 'ニョ' },
  },
  h: {
    a: 'ハ', i: 'ヒ', u: 'フ', e: 'ヘ', o: 'ホ',
    y: { a: 'ヒャ', i: 'ヒィ', u: 'ヒュ', e: 'ヒェ', o: 'ヒョ' },
  },
  f: {
    a: 'ファ', i: 'フィ', u: 'フ', e: 'フェ', o: 'フォ',
    y: { a: 'フャ', u: 'フュ', o: 'フョ' },
  },
  m: {
    a: 'マ', i: 'ミ', u: 'ム', e: 'メ', o: 'モ',
    y: { a: 'ミャ', i: 'ミィ', u: 'ミュ', e: 'ミェ', o: 'ミョ' },
  },
  y: { a: 'ヤ', i: 'イ', u: 'ユ', e: 'イェ', o: 'ヨ' },
  r: {
    a: 'ラ', i: 'リ', u: 'ル', e: 'レ', o: 'ロ',
    y: { a: 'リャ', i: 'リィ', u: 'リュ', e: 'リェ', o: 'リョ' },
  },
  w: { a: 'ワ', i: 'ウィ', u: 'ウ', e: 'ウェ', o: 'ヲ' },
  g: {
    a: 'ガ', i: 'ギ', u: 'グ', e: 'ゲ', o: 'ゴ',
    y: { a: 'ギャ', i: 'ギィ', u: 'ギュ', e: 'ギェ', o: 'ギョ' },
  },
  z: {
    a: 'ザ', i: 'ジ', u: 'ズ', e: 'ゼ', o: 'ゾ',
    y: { a: 'ジャ', i: 'ジィ', u: 'ジュ', e: 'ジェ', o: 'ジョ' },
  },
  j: {
    a: 'ジャ', i: 'ジ', u: 'ジュ', e: 'ジェ', o: 'ジョ',
    y: { a: 'ジャ', i: 'ジィ', u: 'ジュ', e: 'ジェ', o: 'ジョ' },
  },
  d: {
    a: 'ダ', i: 'ヂ', u: 'ヅ', e: 'デ', o: 'ド',
    h: { a: 'デャ', i: 'ディ', u: 'デュ', e: 'デェ', o: 'デョ' },
    y: { a: 'ヂャ', i: 'ヂィ', u: 'ヂュ', e: 'ヂェ', o: 'ヂョ' },
  },
  b: {
    a: 'バ', i: 'ビ', u: 'ブ', e: 'ベ', o: 'ボ',
    y: { a: 'ビャ', i: 'ビィ', u: 'ビュ', e: 'ビェ', o: 'ビョ' },
  },
  v: {
    a: 'ヴァ', i: 'ヴィ', u: 'ヴ', e: 'ヴェ', o: 'ヴォ',
    y: { a: 'ヴャ', i: 'ヴィ', u: 'ヴュ', e: 'ヴェ', o: 'ヴョ' },
  },
  p: {
    a: 'パ', i: 'ピ', u: 'プ', e: 'ペ', o: 'ポ',
    y: { a: 'ピャ', i: 'ピィ', u: 'ピュ', e: 'ピェ', o: 'ピョ' },
  },
  x: {
    a: 'ァ', i: 'ィ', u: 'ゥ', e: 'ェ', o: 'ォ',
    y: {
      a: 'ャ', i: 'ィ', u: 'ュ', e: 'ェ', o: 'ョ',
    },
    t: {
      u: 'ッ',
      s: {
        u: 'ッ',
      },
    },
  },
  l: {
    a: 'ァ', i: 'ィ', u: 'ゥ', e: 'ェ', o: 'ォ',
    y: {
      a: 'ャ', i: 'ィ', u: 'ュ', e: 'ェ', o: 'ョ',
    },
    t: {
      u: 'ッ',
      s: {
        u: 'ッ',
      },
    },
  },
};

export function convertRomanToKana(original: string) {
  const str = original.replace(/[Ａ-Ｚａ-ｚ]/, s => String.fromCharCode(s.charCodeAt(0) - 65248)).toLowerCase(); // 全角→半角→小文字
  let result = '';
  let tmp = '';
  let index = 0;
  const len = str.length;
  let node = tree;
  const push = (char: string, toRoot = true) => {
    result += char;
    tmp = '';
    node = toRoot ? tree : node;
  };
  while (index < len) {
    const char = str.charAt(index);
    if (char.match(/[a-z]/)) { // 英数字以外は考慮しない
      if (char in node) {
        const next = node[char];
        if (typeof next === 'string') {
          push(next);
        } else {
          tmp += original.charAt(index);
          node = next;
        }
        index++;
        continue;
      }
      const prev = str.charAt(index - 1);
      if (prev && (prev === 'n' || prev === char)) { // 促音やnへの対応
        push(prev === 'n' ? 'ン' : 'ッ', false);
      }
      if (node !== tree && char in tree) { // 今のノードがルート以外だった場合、仕切り直してチェックする
        push(tmp);
        continue;
      }
    }
    push(tmp + char);
    index++;
  }
  tmp = tmp.replace(/n$/, 'ン'); // 末尾のnは変換する
  push(tmp);
  return result;
}

参考

変換表はこちらの記事を元に叩き台を作成しました。
https://qiita.com/le_panda_noir/items/5be2639f77905879432a
書かれている通り、表を作成するのは地味に面倒でした…（IMEのカナ変換に生まれて初めて感謝しました）。

全角→半角変換はこちらの記事を参考にしました。
https://qiita.com/yamikoo@github/items/5dbcc77b267a549bdbae

htmlからreact componentに変換したほうがよい気がするがよいものが見つからなく急ぎだったのでとりあえず下記の方法で対応した。

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  componentDidMount() {
    window.handleClick = this.handleClick;
  }

  handleClick() {
    console.log("clicked");
  }

  componentWillUnmount() {
    window.handleClick = null;
  }

  render() {
    let inputhtml = "<a onclick=window.handleClick()>HelloWorld</a>";
    return (
      <div>
        <div dangerouslySetInnerHTML={{ __html: inputhtml }} />
      </div>
    );
  }
}

参考

How to parse a String containing HTML to React Components

JWT 脆弱性 で検索すると 【翻訳】JSON Web Tokenライブラリの危機的な脆弱性 って記事(4年ぐらい前の記事)が出てきて読んでいたのですが、よくわからなかったので手を動かしながら調べてみました。
※ 翻訳の元記事はこちら

node-jsonwebtoken, pyjwt, namshi/jose, php-jwt, jsjwtを非対称の鍵(RS256, RS384, RS512, ES256, ES384, ES512)で使っている場合、最新のバージョンに更新してください。

とのことなので、バージョン更新で直ったようなので修正を読んでいきます。
また、 js を利用して開発する機会が多いので node-jsonwebtoken の修正を確認してみます。

確認したコードは下記にあります。
https://github.com/OshiroSeiya/jsonwebtoken-audit-check

脆弱性の概要を知る

none アルゴリズムの話は飛ばします。元記事の内容を見たほうが良いです。

RS256 アルゴリズムを利用して JWT を発行している場合に攻撃者が HS256 アルゴリズムを利用して発行した JWT のチェックが通ってしまう問題があります。
RS256 は JWT を発行するのは秘密鍵を用いて発行し、チェックには公開鍵を利用します。
一報 HS256 は JWT を発行する時とチェックに利用する鍵が同じになります。

認証側のチェックが下記のようになっていた場合
※ TOKEN: 発行されたJWT
※ KEY: はチェックの際に利用する鍵です

jwt.verify(TOKEN, KEY)

利用するアルゴリズムが TOKEN の方に入っているためチェックの際に RS256 で検証するべきなのか HS256 で検証するべきなのか判断します。
RS256 でTOKENを発行する仕組みになっている場合、攻撃者が HS256 のアルゴリズムで公開鍵(利用用途的に公開されているので誰でも取得可能)を用いて TOKEN を発行するとチェックする際に HS256 を用いてチェックされ KEY は同じ公開鍵を利用するためチェックが通ってしまうことになり、改ざんが可能になるということみたいです。

対応されたライブラリのPRなどを見る

修正は下記のようです。
https://github.com/auth0/node-jsonwebtoken/pull/69
https://github.com/auth0/node-jsonwebtoken/commit/7017e74db9b194448ff488b3e16468ada60c4ee5
https://github.com/auth0/node-jsonwebtoken/pull/71

この修正が入る以前と以後のライブラリを利用して挙動の確認とどういう対策が行われたのかを確認してきます。

修正前: 4.1.0 (https://github.com/auth0/node-jsonwebtoken/tree/b69d441c6e5e4b2efaafde682b4b9670ac3bcb51)
修正後: 4.2.2 (https://github.com/auth0/node-jsonwebtoken/tree/e46ca6634447cf6a5b7f08298aa2f2450b8df704)

修正前のバージョンで問題が起きることを確認する

4.2.0で追加されたコードは下記でした。
https://github.com/auth0/node-jsonwebtoken/pull/69/files

  if (!options.algorithms) {
    options.algorithms = ~secretOrPublicKey.toString().indexOf('BEGIN CERTIFICATE') ?
                        [ 'RS256','RS384','RS512','ES256','ES384','ES512' ] :
                        [ 'HS256','HS384','HS512' ];
  }

  var header = jws.decode(jwtString).header;
  if (!~options.algorithms.indexOf(header.alg)) {
    return done(new JsonWebTokenError('invalid signature'));
  }

要するに jwt.verify メソッドを利用する時の secretOrPublicKey の値に BEGIN CERTIFICATE が含まれる場合は [ 'RS256','RS384','RS512','ES256','ES384','ES512' ] のみ利用できるようになるということですね。
※ 4.2.1で BEGIN PUBLIC KEY が含まれる場合の処理も追加されていますがやりたいことは同じなので飛ばします。
※ 4.2.2で BEGIN RSA PUBLIC KEY が含まれる場合の処理が追加されていますがやりたいことは同じなので飛ばします。

4.2.0で追加されたテストを見ます。
https://github.com/auth0/node-jsonwebtoken/pull/69/files#diff-f676fb748f383a87d0f55bec4f266023

テストコードを書きながらためしたほうが僕は理解しやすいので下記のようにコードを書きました。
※ 公開鍵と秘密鍵はテストで利用されていたものと同じものを利用しています。
https://github.com/OshiroSeiya/jsonwebtoken-audit-check/blob/master/src/4.1.0/index.test.js

const fs = require('fs');
const path = require('path');
const jwt = require('jsonwebtoken');

// 公開鍵
const PUB = fs.readFileSync(path.join(__dirname, 'pub.pem'), 'utf8');
// 秘密鍵
const PRIV = fs.readFileSync(path.join(__dirname, 'priv.pem'), 'utf8');
// payload
const payload = {
  foo: "bar"
};

test('サーバー側で署名した TOKEN がチェックを通過し payload が取得できる', () => {
  // サーバー側で秘密鍵を利用し、アルゴリズムを RS256 で署名した TOKEN
  const RS256_TOKEN = jwt.sign(payload, PRIV, {algorithm: 'RS256'});

  expect(jwt.verify(RS256_TOKEN, PUB)).toEqual(payload);
});

test('攻撃者が署名した TOKEN がチェックを通過し payload が取得できる', () => {
  // 攻撃者がRS256の公開鍵を利用し、アルゴリズムを HS256 で署名したTOKEN
  // ※HS256はdefaultのアルゴリズムですがわかりやすいように設定
  const HS256_TOKEN = jwt.sign(payload, PUB, {algorithm: 'HS256'});

  expect(jwt.verify(HS256_TOKEN, PUB)).toEqual(payload);
});

PASS  ./index.test.js
  √ サーバー側で署名した TOKEN がチェックを通過し payload が取得できる (9ms)
  √ 攻撃者が署名した TOKEN がチェックを通過し payload が取得できる (1ms)

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        4.022s
Ran all test suites.

しっかりと攻撃者が署名した TOKEN がチェックを通過し payload が取得することができています。

修正後のバージョンで問題が起きないことを確認する

先程作ったテストを 4.2.2 に node-jsonwebtoken をアップデートしてテストを実行してみます。

 FAIL  ./index.test.js
  √ サーバー側で署名した TOKEN がチェックを通過し payload が取得できる (9ms)
  × 攻撃者が署名した TOKEN がチェックを通過し payload が取得できる (4ms)

  ● 攻撃者が署名した TOKEN がチェックを通過し payload が取得できる

    JsonWebTokenError: invalid signature

      24 |   const HS256_TOKEN = jwt.sign(payload, PUB, {algorithm: 'HS256'});
      25 | 
    > 26 |   expect(jwt.verify(HS256_TOKEN, PUB)).toEqual(payload);
         |              ^
      27 | });
      28 | 

      at Object.<anonymous>.module.exports.verify (node_modules/jsonwebtoken/index.js:141:17)
      at Object.verify (index.test.js:26:14)

Test Suites: 1 failed, 1 total
Tests:       1 failed, 1 passed, 2 total
Snapshots:   0 total
Time:        3.199s
Ran all test suites.
npm ERR! Test failed.  See above for more details.

結果、攻撃者が署名した TOKEN はしっかりとエラーになっていることが確認できました。

まとめ

記載されていた通り、 node-jsonwebtoken の新しいバージョンであれば問題は起きなくなっていました。
ライブラリで対応(利用できるアルゴリズムを絞る)されてはいますが、仕様的には今後も起きる可能性はなくはないと思われます。
ライブラリを利用するときは対策されているか確認してみると良さそうです。

先に結論だけ

私のポートフォリオサイトのメンテナンスを行い、タスクランナーをgulp4へ更新しました。その結果、gulpfileが8行になりました。

/gulpfile.js/index.js

"use strict";

const revision = require("gulptask-revision")("./dist/");
exports.revision = revision;

const { s3_deploy, s3_staging } = require("./awsPublish");
exports.s3_deploy = s3_deploy;
exports.s3_staging = s3_staging;

gulp4は以前のバージョンと比べ、gulpfileの管理工数を減らすことができます。

はじめに

2018年12月にgulp4が正式リリースされました。

Version 4.0 Now Default

gulp4をしばらく使ってみた結果、gulpfileの管理が簡略化できました。この記事はその手法を共有するためのものです。

この記事が想定する読者

この記事はgulp3以前を利用しているユーザーを想定しています。
そのため、gulpのインストールやタスクの構築などは記事の対象としません。

マイグレーションガイド

gulp3を利用している方は、まずgulp4への移行を行います。
公式ドキュメント Quick Start

こちらの記事でgulp3から4へのマイグレーションの方法が詳しく解説されています。
Gulp4がリリースされたのでgulpfile.js をアップデートした

gulp4の利点

gulp3以前には、

• gulpfileの肥大化問題
• gulpプラグインの更新問題

という2つの問題があり、これがgulpfileの管理を困難にしていました。

gulp4へ移行することによって、この2つの問題を解消できます。

前提 : gulp4におけるタスクとは

上記2つの問題を解決するための前提として、gulp4におけるタスクの構造を理解しておく必要があります。この構造が、2つの問題を解くことに繋がります。

もっとも単純な形のgulpタスクを、公式ドキュメントから引用します。

function simpleTask(cb) {
  ...
  cb();
}

gulp4におけるタスクは関数です。処理後に、第一引数に渡されたコールバック関数を実行して処理完了を通知することでタスクとなります。

gulpのタスクは非同期処理を行うことを前提としています。そのため、タスクには処理が完了したことを通知する方法を備えている必要があります。

• streamをreturnする。
• Promiseをreturnする。
• async関数にする。
• 処理の完了後にコールバック関数を実行する。

などの形にすることで、関数はタスクとして機能します。

gulp.task()について

gulp3までで使われていたgulp.task()関数は非推奨になりました。この関数はgulpfileの互換性維持のために用意されたもので、新規での利用は推奨されません。

gulpfileの肥大化問題

gulp3以前では、gulpfile.jsは巨大な単一ファイルとして扱われてきました。数百行から時には千行を超えるファイルの管理は難しいものでした。

gulp4ではこのgulpfileの肥大化を抑制できます。

パブリックタスク / プライベートタスク

公式ドキュメントから、タスクの作成のサンプルを引用します。

gulpfile.js

const { series } = require('gulp');

function clean(cb) {
  ...
  cb();
}

function build(cb) {
  ...
  cb();
}

exports.build = build;
exports.default = series(clean, build);

exportされていない関数がプライベートタスク、exportされている関数がパブリックタスクになります。

これらのタスクをターミナルから実行してみます。

$ gulp clean
Task never defined: clean

$ gulp build
Starting 'build'...

$ gulp
Starting 'default'...

exportしていないcleanタスクは実行できませんでした。プライベートタスクは定義されたjsファイルの外からは呼び出すことができません。

プライベートタスクを利用することで、タスク製作者は外部から呼び出すべきタスクを明示できます。gulp3では、すべてのタスクが外部から呼び出し可能でした。そのため、タスクを細分化してメンテナンスを簡単にしようとすると、利用者がどのタスクを使っていいのかわからなくなるという問題がありました。プライベートタスクはこうした問題を解決します。

exportsとは

exportsはnode.jsにおけるmodule.exportsへのショートカットです。named exportをより短く記述するための機能です。

node.js Modules

node.js modules exports

つまりgulp4におけるパブリックタスクとは「module.exportsされ、非同期処理の完了を通知する関数」と言えます。

タスクファイルの分割

gulp4におけるパブリックタスクは exportされた関数です。そのため、gulpfile.jsの外部に記述された関数もrequireで読み込めばタスクとして利用できます。つまりgulpfile.jsが分割できます。

例としてtaskA.jsとgulpfile.jsの2つのファイルがあるとします。いずれのファイルもpackage.jsonと同じディレクトリにあるとします。

taskA.js

const { series } = require('gulp');

function taskA1(cb) {
  ...
  cb();
}
function taskA2(cb) {
  ...
  cb();
}

exports.taskA = series(taskA1, taskA2);

gulpfile.js

const { taskA } = require("./taskA");
exports.taskA = taskA;

gulpfile.jsはtaskA.jsからタスクを読み込み、再度exportしてパブリックタスクにしています。この状態でターミナルから$ gulp taskAとタスクを実行できます。
また、gulpfile.jsとターミナルの両方からプライベートタスクtaskA1およびtaskA2は呼び出せません。

分割ファイルの配置方法

gulpでは、コード分割の際のファイルの配置方法に関する仕組みを提供しています。
公式ドキュメント

package.json
/ gulpfile.js
  ┠ index.js
  ┗ taskA.js

直感的に理解しにくいのですが、gulpfile.jsという名前のディレクトリを配置し、その中にindex.jsを配置します。するとgulpは./gulpfile.js/index.jsを従来のgulpfile.jsと同様にルートファイルとして認識します。

このルールに従わないファイルのrequireも現状では問題なく機能します。しかし、関連するファイルが分散してしまうのを避けるため、こうしたルールにしたがってファイルを配置することをオススメします。

ファイル分割の恩恵

gulpfile.jsは肥大化しやすいファイルです。これを分割することでメンテナンス性が向上します。また、プライベートタスクをファイル分割と併用することで、親ファイルからアクセス可能なタスクを制限できます。

タスクのモジュール化

タスクを記述したjsファイルをnodeモジュール化し、そのモジュールをgulpfileに読み込むことも可能です。

例として、このようなパッケージを作成してGitHubにpushします。名前はsample-taskとします。

package.json

{
  "name": "sample-task",
  "main": "./index.js",
  ...
  "dependencies": {
    "gulp": "^4.0.1",
    "gulp-rev": "^9.0.0", // <- タスク内で利用するgulpプラグインをdependenciesに追加
    ...
  },
}

index.js

"use strict";

const { series, src, dest } = require("gulp");
const rev = require("gulp-rev");
const path = require("path");
const distPath = path.resolve("./dist/");

function taskA(){
  return src(...)
    .pipe(...)
    .pipe(dest(...);
};

function taskB(){
  return src(...)
    .pipe(...)
    .pipe(dest(...);
};

exports.sampleTask = series(taskA, taskB);

別のプロジェクトから、sample-taskモジュールをnpmでインストールします。

$ npm install https://github.com/[GitHubのユーザーID]/sample-task.git

sample-taskモジュールはgulpfile.jsから読み込めます。

gulpfile.js

const { sampleTask } = require("sample-task");
exports.sampleTask = sampleTask;

requireで読み込んだタスクは以下のように利用します。

• 再度exportすることでバプリックタスクとして利用する。
• seriesやparallelに組み込み、プライベートタスクとして利用する。

モジュール化されたタスクは、自身のpackage.jsonで依存するプラグインを管理できます。タスクを読み込む側では、依存プラグインの管理の必要はありません。

タスクモジュールに引数を与える

ファイル分割 / モジュール化したタスクに、タスク実行時に変数を与えることはできません。子タスクに変数を与えたい場合「変数を受け取りタスクを返す関数」を使います。

index.js

"use strict";

const { series, src, dest } = require("gulp");

module.exports = (arg1, arg2, arg3) => {
  function taskA(){
    return src(arg1)
      .pipe(...)
      .pipe(dest(arg2);
  };

  function taskB(){
    return src(arg1)
      .pipe(...)
      .pipe(dest(arg3);
  };

  return series(taskA, taskB);
}

このモジュールをgulpfile.jsから読み込みます。

gulpfile.js

const sampleTask = require("./index")("./path/to/src", "./path/to/dist1", "./path/to/dist2");
exports.sampleTask = sampleTask;

require(モジュールのパスかID)(引数)の形で変数を渡すことができます。

タスクモジュールの例

Webサイト用のgulpfileでよく利用するタスクを切り出し、モジュール化してみました。皆様がモジュール化を行う場合の参考資料としてご利用ください。

gulptask-revision

GitHub リポジトリ

gulp-revを利用して、出力されたファイルにリビジョンを振る一連のタスクをモジュール化したものです。

$ npm install https://github.com/MasatoMakino/gulptask-revision.git -D

でインストールして

gulpfile.js

const rev = require("gulptask-revision")("変換するディレクトリのパス");

と読み込んで利用します。

gulptask-imagemin

GitHub リポジトリ

gulp-imageminを利用して、画像ファイルの最適化を行います。
gulp-image-resizeが別途imagemagickのインストールを必要とします。macOSの場合、Homebrew経由でインストールが可能です。

brew install imagemagick

参考記事

macにImageMagickをインストールし、convertコマンドで画像を縮小する。

モジュールの利用方法は

$ npm install https://github.com/MasatoMakino/gulptask-imagemin.git -D

でインストールして

gulpfile.js

const images = require("gulptask-imagemin")("画像ソースのディレクトリ", "出力先ディレクトリ");

と読み込んで利用します。
watchのタスクとしても動作します。

gulpプラグインの更新問題

gulpの維持管理を難しくするもうひとつの要因として、gulpプラグインの更新問題があります。依存するプラグインの更新が途絶えた場合、プラグインをフォークして自力でメンテナンスするか、そのタスクをgulpから切り離すかの選択を迫られます。

gulpというレイヤーが増える分、依存するモジュールは増え、更新停止のリスクは増加します。ならば最初からnodeモジュールを直接実行したほうがメンテナンスのリスクは少なくなります。

nodeモジュールがそのまま走る

gulp4のタスクは前述の通りただの関数です。そのためタスク内でnodeモジュールがそのまま走ります。

公式ドキュメントからサンプルを引用します。

gulpfile.js

const { rollup } = require('rollup');

// Rollup's promise API works great in an `async` task
exports.default = async function() {
  const bundle = await rollup.rollup({
    input: 'src/index.js'
  });

  return bundle.write({
    file: 'output/bundle.js',
    format: 'iife'
  });
}

rollup.jsのバンドル処理はasync/awaitに対応しています。そのため、タスクの関数をasyncにすることで簡単に取り込めます。

const del = require('delete');

exports.default = function(cb) {
  // Use the `delete` module directly, instead of using gulp-rimraf
  del(['output/*.js'], cb);
}

async/awaitに対応せず、非同期処理の完了後にコールバックを呼ぶタイプのモジュールもあります。その場合タスクの引数のコールバックをそのままモジュール側の関数に渡してしまうことで取り込めます。

公式ドキュメントでも、ファイル変換を伴わない処理ではgulpプラグインよりもnodeモジュールの使用を推奨しています。

Plugins should always transform files. Use a (non-plugin) Node module or library for any other operations.

依存するモジュールの量と層を減らすことで、プラグインの更新停止リスクは減少します。

個人的な感想

破壊的変更

gulp4は3以前と比べるとまったくの別物です。これだけ大規模かつ破壊的な変更をしながらgulpプラグインの互換性がほぼ維持されていることに驚きました。

gulp4のオススメ度

個人的なgulp4への移行のオススメ度を、状況別にまとめると

• gulp3を利用している : 文句なしにオススメです。
• すでに他のツールでワークフローができ上がっている : 既存のプロジェクトに導入する必要はありません。
• 新規のプロジェクトに導入する : 部分的な導入も可能なので検討の価値ありです。

となります。

タスクモジュールの粒度

タスクをモジュール化した場合、対象とする作業はプラグインよりも巨大になり、その分汎用性は低くなります。タスクをどの程度の粒度で切り出すべきなのかは今後の課題です。

タスクモジュールの副作用

モジュール化されたタスクは、以前のgulpプラグイン同様に依存レイヤーを増やすことになります。更新停止のリスクや、破壊的更新による影響の増大がモジュール化の副作用として考えられます。

参考記事

JavaScriptのモジュールシステムの歴史と現状

exports / requireとそのほかのモジュールシステムの歴史がまとめられています。gulpタスクの構造を理解することができました。

JavaScriptをやっていると npm/yarn/gulp/grunt/webpack など、たくさんのツールがあって混乱したので、それぞれの役割と違いをざっくりとまとめた

現状のgulpの立ち位置を、そのほかのツールと比較して再確認できる素晴らしい記事です。

以上、ありがとうございました。