だれも聞いていないと思って歌え

dance as if no one’s watching, sing as if no one’s listening, and live everyday as if it were your last.

jsdom を 10.0.0 に上げた際のメモ

Node.js JavaScript

Node.js と jsdom は勉強中ですが、 10.0.0 リリース直後にアップデートを行って対応した際のメモです。

ちなみに現在の最新バージョンは、 11.0.0 です。
9.xx から 10.0.0 に上げた時のように大きな変更はないようで、アップデート後も今回記事にした内容から変更していません。

変更内容

  • API の変更(古い API も一部提供しているようですが、理由のない限り新しい API を使用することを推奨)
  • Node.js v6以降でサポートしている新しいJavaScript機能の使用を開始、 Node.js v4およびv5のサポートを削除
  • 空の文字列にinnerHTMLを設定しないように修正
  • 引数が足りない場合に表示される xhr.open() のエラーメッセージを改善

詳しい内容はこちらを確認してください。

github.com

jsdom.fromURL

URL を参照して dom を取得するように jsdom.env を使用していましたが、バージョンアップにより使用できなくなっていたため jsdom.fromURL を使用するように変更しました。

jsdom.fromURL とは

  • URL が有効で DOM の生成に成功した場合、非同期処理で JSDOM オブジェクトを返す
  • url と contentType をオプションで指定できない
  • userAgent オプションは、 HTTP User-Agent Request Header として使用する

サンプル

JSDOM.fromURL("https://example.com/", options).then(dom => {
  console.log(dom.serialize());
});

書き換えてみた

before

import jsdom from 'jsdom';

jsdom.env({
  url: url,
  userAgent: xxxxx,
  done: (error, window) => {
    if (!error && typeof window !== 'undefined') {
      // DOM 取得後の処理を実行する
    } else {
      // エラー処理を行う
    }
  }
});

after

import { JSDOM } from 'jsdom';

JSDOM.fromURL(url, {
  userAgent: xxxxx
}).then(dom => {
  if (typeof dom.window !== 'undefined') {
    // DOM 取得後処理を実行する
  } else {
    // DOM が正しく取得されなかった場合のエラー処理を行う
  }
}).catch(error => {
  // リクエストが通らなかった場合のエラー処理を行う
});

躓いたところなど

  • これまで window.document で参照していたが、 dom.window.document を参照するように変わった
  • import 文が import { JSDOM } from 'jsdom' と変更した(別の解決策があったかも知れませんが、 README を参考にこのように解決しました)
  • JSDOM.fromURL に catch が必要か分からなかった(念のために Promise の書き方に倣って追加しましたが、不要であれば削除しようと思っています)
  • then の中で setTimeout() を実行していましたが、これが原因で警告が表示されていたので削除した
    • jsdom.env で使用していた名残でしたが、今回の API の変更によりそもそも不要だった可能性もありそうです

setTimeout() に関してはもう少し理解を深めたいと思います。

Botkit で Slackbot を作ってみた

JavaScript Node.js

以前 Go 言語の勉強も兼ねて、 Go 言語で Slackbot を作りました！
が、動くものはちゃんと出来たけれど、 Go 言語そのものの理解が足りなかったため、メンテナンスもできずエラーを放置。どうしたものかと悩んでいる時に Node.js 製のフレームワークである Botkit を知り、作り直してみることにしました。

先に結論を書いておくと、 JavaScript の方が書き慣れていることもあって Botkit の方がずっと作りやすかったです！

Botkit とは

github.com

手順

手順を書いた記事は溢れているので、簡単にまとめました。

  1. こちら から Slack の Bot User を作成して Bot Token を取得する
  2. npm プロジェクトを作成し、 Botkit を npm からインストールする( 参考 )
  3. サンプルコード を基にコードを書く
  4. Heroku に Push する

サンプルコードから少し改良してみた

1. ES2016 を使いたい

Babel を dependencies にインストールします。

$ npm install -S babel-cli
$ npm install -S babel-preset-es2015

ビルドの手間を省くために Webpack を使わない代わりに、 Babel を読み込み、 bot を実装したファイルを呼び出すようにします。

こんな感じに実装しました。

// file: start.js
require('babel-register');
var Bot = require('./app/bot.js').default;

const bot = new Bot();
bot.run();

// file: app/bot.js
'use strict';

import Botkit from 'botkit';

export default class Bot {

  constructor() {}

  run() {
    // ...
  }
}

Bot の機能追加するのをもっと楽したい

社内で動いている、先輩が作った Bot が確かそのような仕組みになっていると聞いた覚えがあったので真似しようと思いました。

Botkit を作成した方が作った Botkit Starter Kit for Slack Bots でそういったことが実現されていたので、参考にしました。このリポジトリ自体は、 Botkit Studio というツールを介して使うもののようです。

// file: app/bot.js
const path = require('path').join(__dirname, 'skills');
require('fs').readdirSync(path).forEach(file => {
  const skill = require(`./skills/${file}`).default;
  new skill().hears(this.controller);
});

もっと良い書き方があるのかも知れないですが、 Node.js 初心者の今の私にはこれが精一杯。

やってみての感想

冒頭にも書きましたが、本当に簡単でした。 Go 言語では、未熟ゆえに Heroku へ Push する手順を毎回調べていたように思います。ただし、 Go 言語の方が色々と悩んだ分、 Bot の動かし方などを理解することができた気もします。

それから、 Botkit を使うことで初めて Node.js に触れ、知らないことがまだまだ多いことを知ったので Node.js を今年は学んでいきたいです。

作った Bot はこちらで公開しています。

github.com

  • 今後やりたいこと。
    • 色々な機能追加(天気予報など、何番煎じだろうととりあえずやっていきたい)
    • README をもう少しちゃんと書きたい。
    • TypeScript に置き換えたりしてみたい。

がんばろう。

「Vue.js Tokyo v-meetup="#3"」に行ってきました

勉強会

勉強会の記事が続きますが、 3月16日にMicrosoftで開催された Vue.js Tokyo v-meetup=“#3” へ行ってきました。

vuejs-meetup.connpass.com

イベント概要

Vuejs 日本ユーザーグループ主催による、 Vue.js の Meetup イベントです。LT のテーマは、 Vue.js に関するものであれば何でも OK というもの。 イベント名から分かるように初心者向けではなかったです。

参加動機

  • Vue.js が最近話題なので、どんなフレームワークなのか知りたかった
  • 知人がこれから Vue.js に触れる予定だったので、一緒に参加した
  • 全体的に割とふわっとした参加動機です……
続きを読む

「RECRUIT Technologies NIGHT vol.5」に行ってきました

勉強会

3月8日にリクルートで開催された RECRUIT Technologies NIGHT vol.5 リクルート流フロントエンド開発 に行ってきました。

atnd.org

イベント概要

イベントページから引用しました。

大規模サービスを複数抱えるリクルート。そのフロントエンド開発はどのように行われ、改革されてきたのか。そしてどんな姿を目指しているのか。 現場のフロントエンドエンジニアが、リアルな開発秘話をお届けします。

参加動機

  • RECRUIT Technologies NIGHT にこれまで参加したことはなかったが、今回の講演に React Native に関する内容があったため
  • React や React Native はまだチュートリアルをやった程度で講演の内容的に多少場違いかなと思いつつ、今後のために知っておくべきキーワードを知りたかった
続きを読む

「Geek になりたい人のためのミニカンファ」に行ってきました

勉強会

3月5日にMicrosoftで開催された Geek Women Japan x Microsoft - Geek になりたい人のためのミニカンファ に行ってきました。

geekwomenjapan.github.io

Geek Women Japanとは

カンファレンスページから引用しました。

Geek Women Japan は女性エンジニアの集まるカンファレンスイベント団体です。
毎年イベントとしてAdvant Calendar、New Year Party、Conferenceの全3回を開催する予定です。

「女性エンジニア」の定義
* 「女性」とは … 「自分は女性である」と思っている全ての方
* 「エンジニア」とは … IT技術を楽しんでいる、勉強を始めようと思っている、技術に対して向上心のある、技術をたしなんでいるすべての方
* 「女性エンジニアとは」 … 技術をたしなんでいる、自分は女性であると思っているすべての方

参加の動機

  • 「Geek になりたい人のためのミニカンファ」というイベントタイトル自体に興味を持った
  • ○○女子部のように使用言語を問わない、女性向けの規模の大きいイベントに以前から興味があった
  • 客先でも女性技術者が少ないため、横の繋がりを増やしたかった
続きを読む

Hello World

Hatena Blog 始めました。

プログラマなので技術のことを中心に、月に数回くらい記事を書いていくのが今の目標です。
アウトプットしないのは知的な何とかと言いますし。

簡単に自己紹介をすると、
3年前にPHPを始めてWebプログラミングを始めました。学生の頃はプログラミングは勉強していて、前職では組み込みなど(主にテスター・デバッガーとして)をやっていました。
最近は以前から強く興味のあったJavaScript関連についてよく勉強してます。
フロントエンド見習い(自称)です。

最後に、タイトルにした だれも聞いていないと思って歌え はアイルランドのことわざから拝借しました。
自分に足りないものかなと思って、一つの目標として。

Dance as if no one’s watching, sing as if no one’s listening, and live everyday as if it were your last.
だれも見ていないと思って踊れ。だれも聞いていないと思って歌え。あなたが最後の人だと思って、生きろ。
http://rainbowkids.sakura.ne.jp/eigodemeigen.html

webpack を v1 から v2 へ更新してみた

JavaScript

webpack はまだ勉強できていないですが、
webpack 2 が正式リリースされ、更新する機会があったのでその時のメモです。

webpack とは

webpack は WebApp に必要なリソースの依存関係を解決し、アセット（配布物）を生成するビルドツール（要するにコンパイラ）です。
JavaScript だけでなく、CoffeeScript や TypeScript、CSS 系、画像ファイルなどを扱うことができます。
WebApp のビルドツールは Grunt や Gulp が有名です。これらは基本的に、ビルド手順をタスクという形で自ら定義する必要があり、フロントエンド開発に馴染みのない開発者にとっては敷居が高いものでした（少なくとも、自分はそうでした）。
webpack を使えば、Grunt も Gulp も必要ありません！覚えるべきことはほとんどありません。（必要なら）簡単な設定ファイルを書いて webpack コマンドを実行するだけです。
引用: webpack で始めるイマドキのフロントエンド開発 - Qiita

webpack.js.org

参考にしました

webpack-strem を使っていて、 webpack-stream が v2 に対応していないため、新機能の tree-shaking 周りはまだ全く触れていません。

webpack.js.org

stackoverflow.com

また、こちらの記事に変更点などが要約されています。

yosuke-furukawa.hatenablog.com

その他

DedupePlugin

参考サイトを元に修正後、 webpack を実行すると DedupePlugin でエラーが発生しました。 公式ページ内では特に明記されていなかったですが、 Qiita の記事で少し言及されていました。

また、 OccurenceOrderPluginの名前がv2からはOccurrenceOrderPluginに変更、 DedupePluginがなくなるなどがあります。 詳しくはwebpack/releasesのBreaking Changesを探すとわかると思います。

qiita.com

webpack/releases に書かれていることは確認できませんでしたが、 GitHub Issues に経緯などが書かれていました。

github.com

これらを参考に、 DedupePlugin の記述を削除したらエラーが無事取れました！

しかし、コンパイラ後のファイルサイズが大きくなっているものも多く、効果はまだあまり見えていません。。

DeprecationWarning

./node_modules のフォルダを消して、 npm install を実行し直したところ次のような警告が表示されました。

(node:34505) DeprecationWarning: loaderUtils.parseQuery() received a non-string value which can be problematic, see https://github.com/webpack/loader-utils/issues/56
parseQuery() will be replaced with getOptions() in the next major version of loader-utils.

こちらも GitHub Issues に記述がありました。

github.com

どうやら、これは ts-loader などの loader 開発者のための警告だそうです。 webpack2 への移行に伴い仕様が一部変更になり、非推奨となった部分に関して警告が表示されているようです。 (英語の読解力に自信が無いので、ふわっとだけ認識してもらえると助かります)

issue にも書かれていますが( この辺り )、 webpack.js に process.noDeprecation = true; を設定することで警告は除去できました。 ただし、確認するべき警告まで表示されなくなってしまうことを懸念して、業務ではこの設定を行うことはやめました。