主夫ときどきプログラマ

データベース、Webエンジニアリング、コミュニティ、etc

2016年の目標

去年やったことをめずらしく書きだしたのでせっかくだから今年の目標も書いておく

masayuki14.hatenablog.com

今年の目標

Swift2

swift2を試す。iOsネイティブのアプリを作れるようになろう。年内にクソゲーがリリースできたらバンザイ\(^o^)/

Redux

Reactで作ったアプリにReduxを導入する。

Hubot

なんかつくる。くだらないものからやっていこう。みさわの画像出すとか。すでにありそうだけど。

Mackerel

サーバーにMackerel入れてみる。APIコールして独自のメトリクスとりたい。

ブログ

月に1回はブログを書く。ちゃんとアウトプットしよう。

IPA試験

IPAの試験を受けてなんか合格したい。DBとネットワークあたりか。春の試験は受付中。

OSSコミッタ

になろう。規模の大小は問わずGitHubでPullRequestを送ってみる。

コミュニティ活動

勉強会とか参加してみよう。

2015年にやったこと

今年は意外といろいろ新しいことやったので覚えてる範囲でかきだし。

今年やったこと

zsh

勉強して設定ファイル作った。いろんな小さな問題が解消して嬉しい。pecoとhistory連携がすこぶる便利。

Chef, Vagrant

開発・本番環境のセットアップを自動化。一部手動が残ってしまったけど悪くなかった。 これを始めてからちょっとしたものもすべてVMを使うようになった。レシピも再利用できてよい。 今後も継続利用するだろう。

Redis

PHPのWEBアプリケーションから利用。環境も簡単にセットアップできるし利用も簡単であった。SortedSetやLuaスクリプトなど特徴的な機能を使ってないのでRedis知ってるよレベルとさほど変わらない。今後使う予定がないので残念。

React, Material-UI, ECMAScript6

いちばんしんどかったやつ。フロントエンド開発についていろいろ知ることができた。gulp, babelなど周辺にはnodeの闇が広がっていてReactでアプリケーションを作るという目的を見失いそうだった。 結果fluxは使わずにフロントのSPA(single page application)をReact-Router,Material-UIで開発してリリースし運用してる状態。ES6スタイルでコーティングしてgulpでbuildする感じ。 思想やアーキテクチャは文句なく素晴らしいが、変化が速いのでバージョンアップしたら動かなかったり、ブラウザも選ぶのでその辺は考慮が必要だろう。

Sinatra, ActiveRecord

ReactAppのサーバーサイドで利用。APIとして実装しすべてをJSONで通信するようにした。フロントとサーバーで責任の範囲を分割でき、コードの可読性はかなり高くなった印象。 数年ぶりに使ったActiveRecordも相変わらず便利。DB設計やネーミングがそのままコードに出てくるから1つのカラム(xxx_statusとか)で状態を管理するのは良くなさそう。

Perl

年間通して使った言語。いまだにリファレンスまわりがよく分からないけど grep, sort, map はわりと使いこなしている。 なぜかしっかり学ぼうというモチベーションが上がらない言語。そろそろ飽きてきた。

Hubot

ごく最近動く環境をいれたのでHelloWorldレベル。slackで動く環境はすでにあるから何をつくろーか、と思うものの何も思い浮かばない。

朝型生活 再入門

毎朝5時起きの朝型生活を再開して2カ月が経とうとしているのでそれについて書きます。
"早起きは三文の得" と言うように、朝型生活をとりいれると様々な良いことがあります。
さあ、あなたも朝型生活を始めましょう。

朝型生活の始め方

1.冬は避ける

冬は動物の活動が低下します。人間も例外ではありません。
朝は寒さのあまり布団から出られません。おまけに外も真っ暗です。
朝型生活を始めるなら冬は避けましょう。
今は夏です。チャンスです。

2.早く寝る

早寝早起きが基本です。21時には寝床に着きましょう。小さいお子さんがいる方は一緒にねましょう。
早く起きる為には十分な睡眠が必要です。

3.起床後の予定を決めておく

起きてからやることが決まっていないと、起きてもまた寝てしまいます。
寝る前にやることを決めておきましょう。
私の場合はすぐ仕事を始めます。

3つ達成できれば成功したも同然


上記の3つが達成できれば、朝型生活に成功したも同然です。
それでもまだ起きられない人はもう少し頑張ってみましょう。

4.目覚まし時計を変える

巷では10万円の目覚まし時計の評判が良いので試してみる価値はありそうです。
http://r25.yahoo.co.jp/fushigi/report/?id=20130327-00028960-r25
そんなお金出せないよ、という方は "Sleep Cycle" というアプリを試してみましょう。
眠りの状態を解析し、設定時刻の30分前から間で最適なタイミングにアラームを鳴らせてくれます。
http://www.sleepcycle.com/
私も使っています。

5.朝日を浴びる

起きたら朝日を浴びましょう。外へ出ると少し肌寒いですが気持ちいです。
これができれば成功している証拠です。

朝型生活はいいことがいっぱい


朝型生活とは1日の開始時刻を早めることです。
活動時間はかわりません。
つまり活動する時間帯をずらだけです。
たったそれだけでたくさんのメリットを享受することができます。

健康になりストレスが減る

毎日規則正しく早く寝て早く起きることで健康になります。
睡眠をしっかり取ることで疲れがとれ、朝日を浴びることで体内時計もリセットされます。
肌ツヤも良くなり見た目にも若さがみなぎってきます。

生産性があがる

脳の働きは午前中にピークに達し午後には低下していことが実証されています。
雑念のないクリアな思考ができ、よいアイディアも浮かびます。
誠実さも午後になると欠如していく傾向にあるという研究結果もでています。

邪魔が入らない

日中はチャット、メール、インスタントメッセージ、SNSなどからの
様々な通知が集中を阻害しがちですが、
早朝はそういった邪魔が入りません。
物事に集中しやすい時間帯です。

やりたいことができる

早朝に「やりたいこと」をすることもできますし、
仕事を早くから始めることで夕方に「やりたいこと」をすることもできます。
「やりたいこと」をやるための、まとまった時間を作ること出来るのです。

家族と一緒に過ごせる

子どもと一緒に遊んだり絵本を読んだり、家族と一緒に食事をすることができます。
家族と過ごす幸せを感じてください。

朝を味方に


人生に迷っているあなた、朝型生活をはじめて朝を味方につけましょう!

YUITest を使ってJavascriptの単体テストを自動化するまで (後編)

前編 YUITest を使ってJavascriptの単体テストを自動化するまで (前編) - masayuki14’s diary


Git Repository への登録

これまでに使ったファイルをリポジトリに登録しよう。今回はGitをバージョン管理に利用する。実際のプロジェクトでテストを自動化して継続させるのにバージョン管理は必須要素だ。

$ git init
$ git add .
$ git commit -m ‘First commit’

これでGit Repository への登録は完了。

JenkinsのInstall

テストを自動実行するには何らかのツールを使う必要がある。そこで登場するのがJenkinsだ。とにかくインストールして動かしてみよう。大事なのは「射撃しつつ前進」なのだから。

$ brew install jenkins

インストールが終わったらJenkinsを起動してブラウザでアクセスしよう。Jenkinsはデフォルトでポート8080で起動する。

$ java -jar  -Dfile.encoding=utf-8 /usr/local/opt/jenkins/libexec/jenkins.war
# 文字コードをUTF8にするオプションを指定している

ブラウザを開いて http://localhost:8080/ にアクセスするとJenkinsが表示されるはずだ。
task.shを実行するようなジョブを登録すれば、自動的にJenkinsが継続して実行してくれる。
ジョブを登録していこう。

ジョブの登録

メニューから「新規ジョブ作成」を選んで必要な情報を入力しよう。
ジョブ名は好きに登録してOK。今回は「Run YUI Test」とし「フリースタイル・プロジェクトのビルド」を選んで「OK」だ。
次に各種設定を行っていく。

ソースコード管理

「Git」選び Repository URL を入力する。
今回はローカルのファイルシステムリポジトリを用意したので、Repository URL にリポジトリへのパスを入力する。これでGitの設定は完了。

ビルド・トリガ

「SCMをポーリング」にチェックをいれてスケジュールを設定する。定期的にリポジトリを確認し、変更があればビルドをする、という意味だ。スケジュールの書式はcronとほとんど同じ。
15分毎にポーリングさせるため「H/15 * * * * 」と入力する。

ビルド

ビルドの方法を設定する。task.sh の実行がビルドだ。
ビルド手順の追加から「シェルの実行」を選んでシェルスクリプトを記述する。
$ sh task.sh
これで設定は完了。「保存」ボタンで終了しよう。
リポジトリのルートディレクトリでシェルが実行される

これでJenkinsが自動でビルドを実行してくれるようになった。
リポジトリを15分毎に監視して、差分が発生していればビルドを実行してくれる。


テスト結果の収集

これまでの設定だけではJenkinsはビルドの成功・失敗しか結果を教えてくれない。しかしgroverからはテストの結果が出力されている。それをJenkinsに教えてあげれば、Jenkinsで集計をとり表示してくれるようになる。
その方法を見ていこう

テスト結果の出力

テスト結果をJenkinsに取り込ませるにはjUnit形式のXMLファイルに出力しなければならない。
幸いにも grover はこの出力に対応している

$ grover testRunner.html —junit -o result.junit.xml

これで result.junit.xml にテスト結果が出力される。
これをJenkinsに読み込むように設定する。

ビルドの設定

プロジェクトの設定を開き「ビルド後の処理」に設定を追加する。
ビルド後の処理の追加から「JUnitテスト結果の集計」を選び、テスト結果XMLに「result.junit.xml」を入力して保存。これで設定完了だ。


task.sh の grover コマンドを上記のように編集してgit repositoryにコミットしよう

# task.sh を編集
$ vim task.sh
     #!/bin/sh
     java -jar yuitest-coverage.jar -o target-coveraged.js target.js
     grover --coverage testRunner.html --junit -o result.junit.xml

# 変更内容をコミット
$ git add task.sh
$ git commit -m ‘テスト結果を result.juni.xml に出力’

これでJenkinsのビルド実行を待つ。ビルドに成功すればJenkinsがテスト結果を取り込み表示される。


カバレッジ結果の収集

Pluginのインストール

テスト結果と同様にカバレッジをJenkinsに取り込むにはCobertura Pluginプラグインをインストールする。
「Jenkinsの管理」> 「プラグインの管理」と進み「利用可能」タブを選択。フィルターに「Cobertura Plugin」を入力しすれば簡単に見つけることが出来る。
「インストール」にチェックを入れてインストールしよう。

カバレッジの出力

grover はテスト結果と同様にカバレッジ結果をLcov形式のファイルに出力することが出来る。

$ grover --coverage testRunner.html -co coverage.lcov

これでcoverage.lcov にカバレッジが出力される。

カバレッジ結果の変換

coverage.lcov をそのままJenkinsに取り込めると良いが、残念ながらJenkinsはLCOV形式には対応していない。
Coberturaで対応しているXML形式にcoverage.lcovを変換する必要がある。
変換には https://github.com/eriwen/lcov-to-cobertura-xml で公開されているPythonスクリプトを使う。ここから lcov_cobertura.py をダウンロードしよう。

$ python lcov_cobertura.py coverage.lcov -o coverage.xml

これで変換が完了

ビルドの設定

プロジェクトの設定を開き「ビルド後の処理」に設定を追加する。
ビルド後の処理の追加から「Coberturaカバレッジ・レポートの集計」を選び、Cobertura XMLレポート パターンに「result.junit.xml」を入力して保存する。
これで準備は整った。


task.sh を編集してコミットすれば全ての設定が完了。

$ vim task.sh

     #!/bin/sh
     java -jar yuitest-coverage.jar -o target-coveraged.js target.js
     grover --coverage testRunner.html --junit -o result.junit.xml -co coverage.lcov
     python lcov_cobertura.py coverage.lcov -o coverage.xml

$ git add task.sh lcov_cobertura.py
$ git commit -m ‘Coverageをcoverage.xmlに出力'

CIを回す

あとはJenkinsが自動でテストを実行し結果を集計してくれる。CIを回していこう!
おしまい。

YUITest を使ってJavascriptの単体テストを自動化するまで (前編)

Javascriptのテストフレームワークにはいくつも種類があるが、そのなかでYUIのTestライブラリの使い方を紹介する。YUITestでテストを書くことで、それの実行から自動化までを用意に実現することができる。その一連の方法を紹介する。

テストを書く

まず大事なのはテストを書くこと。今回はサンプルとしてとてもシンプルな関数を用意する。シンプルすぎる。


target.js

/**
 * 引数を足しあわせて結果を返す
 *
 * @param {Number} operand1
 * @param {Number} operand2
 * @return {Number} sum of args
 */
var sum = function(op1, op2) {
     return op1 + op2;
}


この関数をテストしていこう。テストファーストという言葉もあるが、それは空の彼方へ置いておけばいい。いまのところは。
テストはこんなかんじになるだろう。


test.js

YUI({ loadInclude: {TestRunner: true}}).use('test', function (Y) {

     var testCase = new Y.Test.Case({

          name : 'sum() のテスト',

          setUp : function() {
          },

          tearDown : function() {
          },

          'test normal' : function() {
               Y.Assert.areSame(10, sum(2, 8), '合計は10');
          },

          testNull : function() {
               Y.Assert.isNull(sum(null, 1), '不正な引数の場合はNullが返る');
          }
     });

     // load TestCase
     Y.Test.Runner.add(testCase);
});

いきなりよくわからないキーワードが出てきてしまった。YUI? なんだそれは。まだそれはわからなくていい。大事なのは

  • testXXX という名前のメソッドを用意すれば、それがテストとして実行されること
  • ’空白を含む 名前' というメソッドもテストとして実行されること
  • Y.Assert.XXXX というAssertionsがあること
  • setUp, tearDown はよくあるはなし

だろう。

テストを実行する

さぁ、さっそくテストを実行しよう。実行するためのHTMLを用意してブラウザで読みこめばテストが実行される。

testRunner.html

<html>
    <head>
         <meta http-equiv="content-type" content="text/html; charset=utf-8">
    </head>
    <body>
        <div id='log' class='yui3-skin-sam'></div>
        <script src="http://yui.yahooapis.com/3.16.0/build/yui/yui-min.js"></script>
        <script type='text/javascript'>

            // コンソール表示の設定を先にロードする
            YUI({ loadInclude: {TestRunner: true}}).use('test', 'test-console', function (Y) {
                // out puts Console
                (new Y.Test.Console({
                    newestOnTop : false,
                    filters : { pass : true, fail : true, info : true, status : true }
                })).render('#log');

                Y.Test.Runner.setName('単体テスト');
            });
        </script>

        <!-- テスト対象をロード -->
        <script src="target.js"></script>

        <!-- テストをロード -->
        <script src="test.js"></script>

        <script type='text/javascript'>
            YUI({ loadInclude: {TestRunner: true}}).use('test', 'test-console', function (Y) {
                // テスト実行
                Y.Test.Runner.run();
            });
        </script>
    </body>
</html>

YUIのライブラリをサイトから直接ロードして実行する。テスト結果を表示するコンソールは<div id=‘log’></div>に出力されるので必ず用意しよう。コンソール、テスト対象、テスト、の順にロードして最後にテストを実行だ。これをブラウザでロードしよう。


Very Good!!

見事に結果が表示されている。たった3行のコードにだってエラーがあるんだから、君が書いているコードにだってかならずエラーが潜んでいる。テストをどんどん書いてバグをどんどん潰していくんだ!まず手始めに testNull のエラーを取り除いてみよう。


より詳しい使い方は下記を参照しよう。
YUITest
http://yuilibrary.com/yui/docs/test/
コンソール
http://yuilibrary.com/yui/docs/test-console/
Assertion
http://yuilibrary.com/yui/docs/api/ Assertを検索

コマンドラインからのテスト実行

ブラウザからテストを実行することはできたが、これは少々面倒な作業だ。なにより自動化することがとても困難だ。テストを迅速に実行しそれを自動化するにはコマンドラインからテストを実行する必要があるのだ。

PhantomJS + grover


PhantomJSはコマンドから利用できるブラウザで、これを使うことでテストを実行することができる。合わせて grover というYUITest専用のPhantomJSラッパーツールを組み合わせることで簡単にコマンドラインからテストを実行出来るようなる。
それぞれは簡単にインストールすることができる

$ brew install phantomjs
$ npm install -g grover


OSがMacじゃない君は自力でインストール方法を調べてくれ。もしくはここで立ち去っても構わない。Macだけど実行できない君はHomebrew をインストールして出直して来い。
さぁPhantomJSとgroverのインストールが終わったらテストを実行しよう

$ grover testRunner.html



Fantastic!!

これでいつでも迅速にテストを実行出来るようになった。


カバレッジの測定

次はカバレッジを測定しよう。カバレッジを測定するにはテスト対象のtarget.jsを変換する必要がある。変換にはYUITestで提供されているjarを使う。https://github.com/yui/yuitest ここから java/build/yuitest-coverage.jar をダウンロードして早速変換だ。

$ java -jar yuitest-coverage.jar -o target-coveraged.js target.js


testRunner.html のテスト対象を target-coveraged.js に変えて実行すればカバレッジを測定できる。テストにエラーがあるとカバレッジを測定できないから先のエラーは直しておこう。

$ grover ―coverage testRunner.html


Terrific!!

いちいちファイルを変換するのは面倒だから一連の処理を1つのタスクとしてまとめてしまおう。


task.sh

#!/bin/sh
java -jar yuitest-coverage.jar -o target-coveraged.js target.js
grover --coverage testRunner.html


さぁこれで準備は整った。あとはこれを自動化していこう。



後編へ続く YUITest を使ってJavascriptの単体テストを自動化するまで (後編) - masayuki14 note