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

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

「Node学園 24時限目」に行ってきました

まとめるのが遅くなってしまいましたが、 3月31日に株式会社FiNCで開催された 「Node学園 24時限目」 へ行ってきました。

nodejs.connpass.com

イベント概要

Node.js 日本ユーザーグループ主催による、 Node.js の勉強会です。 月に一度のペースで開催され、24回目の今日のテーマは 「 Node x WebAssembly 」 でした。

参加動機

  • Slack Bot を作ることで Node.js を初めて触り楽しかったため、今年は Node.js を頑張っていきたいと思っている。
  • Node学園という勉強会は知っていたが、今まで参加したことがなく参加して見たかった。
  • 先輩からこんな人がいると教えてもらっていた、こさまりさんのLTを聞ける貴重な機会だと思った。
  • WebAssembly 自体も最近よく耳にするため、どんなものなのか知りたいと思った。
  • Node.js 初心者のため、参加動機はふわっとしています……。
続きを読む

jsdom を 10.0.0 に上げた際のメモ

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 を作ってみた

以前 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