こんにちは。そしてみなさん初めまして、サービスデザイン部の奥野です。
Twitterなどでは@armorik83として活動しており、Qiitaにて『AngularJSモダンプラクティス』を掲載したところ、とてもご好評頂きました。また、京都市出身でng-kyotoというAngularJSユーザグループの代表も務めています。
そんな私ですが、この度弊社の@kyo_agoと知り合った縁がきっかけで9月より入社と決まり、すぐさま京都から引っ越しWeb開発部に配属となりました。そこから10月1日の社内組織改編によってJavaScriptエンジニアはサービスデザイン部フロントエンドチームへと異動となり、現在に至ります。
第60回HTML5とか勉強会 －ECMAScript 2015 & 2016－にて登壇
入社して間もないころ、突然「HTML5とか勉強会」への登壇オファーが舞い込んできました。HTML5とか勉強会とは、HTML5を中心に取り扱うコミュニティhtml5jが定期的に開催する勉強会で、今回のテーマはJavaScriptの標準仕様であるECMAScript 2015、そして次期仕様提案（ES7, ES.nextとも呼ばれる）の二本です。これは9月29日に日本マイクロソフト品川本社にて開催されました。
弊社ではフロントエンドにTypeScript, BabelといったJavaScriptの新構文・新仕様を積極的に採り入れており、私も早速業務でBabelをフル活用していたものですから、すぐにこのオファーを引き受けました。今回取り扱ったのはES2015ですらなく、その先、"ES7 Decorators"です。
Decorators構文の詳細については、当日の資料や映像、または資料内で紹介している記事をご覧ください。
ChatWork初のnpmパッケージ “wrasse”
今回の登壇ではひとつ隠し玉を用意。それがこのライブラリ、"wrasse“です。
社内でも早速「わっせー」と呼ばれ親しまれているこれは「ラース」と発音し、日本語では魚の「ベラ」を指します。たまたまフロントエンドのプロダクト・コードネームに魚のものがあったので、じゃあこれも魚にしようという思いで名付けたんですが、九州では「クサビ」とも呼ばれる魚で、クサビのようにclassにコンポーネントを注入するDependency Injection風のライブラリとなっています。
使い方
なにはともあれインストール。
npm i -S wrasse
wrasseは事前にインスタンスを生成し、そこにあらかじめ注入したいコンポーネントとそれを実装中で呼び出すためのキーをペアで登録する必要があります。
import Wrasse from 'wrasse';
wrasseのimportはこの一箇所のみで、今後は生成したインスタンスを使っていきます。
こうやって登録したコンポーネントは、使用したいclassに対してDecorators構文で記述することによって、使うときにはすでに注入済み、という夢の様なことができます！
テストではbeforeEach()やit()内などでインスタンスに対してモックをセットすればOKです。
Decorators構文を用いているので、BabelやTypeScriptではオプション指定が必要です。
$ babel --optional es7.decorators
$ tsc --experimentalDecorators
DIが必要となった背景
私はJavaScriptフレームワーク"AngularJS"を2年以上使っていますが、このフレームワークの特徴として挙げられるDIは、モックテスト、テストダブルを行う上でとても有用な機構でした。この機構を用いないとコンポーネントは密結合となり、テストのたびにモックが使えず、すべてのインスタンスを用意する必要があります。
wrasseではそこを解決し、さらに記述しやすい、学習コストが低い、をモットーに設計しています。みなさんのテストの助けになれば幸いです。
なお、このwrasseの開発にあたりng-kyotoオーガナイザであり友人でもある@_likr氏と、テスト駆動開発の第一人者である@t_wada氏からたくさんの助言を頂けましたので、この場を借りてお礼申し上げます。
弊社案件で早くも活躍しているwrasseですが、OSSとして公開していますので広くお使いいただけますし、フィードバック、PRも大歓迎です。ぜひ、ES7とともにお試しください。
JavaScriptの先、さらにその先に行きませんか？
弊社ではES2015, Babel, TypeScriptだけでなく、フロントエンドにScala.jsも採用し積極的に最先端のJavaScriptに挑み続けています。より新鮮な開発環境で新しいものに挑戦してみたいエンジニアの方！ぜひ下記のリンクからどうぞ。
採用情報