1年間真剣にJavaScriptに取り組んだ話

まえがき

JavaScriptアドベントカレンダーの最終日をやらせて頂いて光栄です。
http://qiita.com/advent-calendar/2015/javascript
※元々は2の最終日を担当するつもりでしたが、本家が空いておりましたので失礼させていただいております。

2015年、自分の中で一番何に夢中だったかといいますと、モンハンかJavaScript(Node.js)だったなぁと思います。
そんなで今回は1年間どんな感じにJavaScriptとじゃれてきたのかをモクモクと書いてみようと思います。
たまにJavaScriptではなくて、PHPの話とかもするかもしれませんが、あしからず。

1年前のJavaScriptのスキル

JavaScriptを使ったWEBアプリ(SPA)を一様書くことはできる。
Backbone.js/Marionette.jsを使ったサービスをすごい先輩に寄生して作っていた。
Node.jsに関しては2,3年前によく名前を聞いた時があったので、簡単なchatアプリみたいなのをサンプルコードを見ながら書いてみたことがある。
Titanium Mobile(JavaScript)を使って、iPhoneアプリなんかも作っていたこともある。

そんな感じです。
多分初心者~中級者ぐらいでしょうか。

1年間まとめ

(1月-8月): 多分、サーバーサイドのエンジニア(PHP)
(4月-7月): Node.jsの勉強会の運用・Node.js/React.jsを使ったリアルタイムクエリ評価システムの開発
(8月): Node.jsでちょっとした通知ツールを作る
(9月): HTML5の神になる
(9月): ES6に衝撃を受ける
(10-12月): ES6/TDDをフルに利用した、JavaScript/Node.jsによる共通システム基盤の設計・リードエンジニア
(11月): Backbone.jsの蓋を開ける
(12月): 社内JavaScript/WEB技術向上活動開始。2015年JavaScript期末試験の開催
(12月): Visual Studio Codeに出会う

多分こんな感じで1年間JavaScript漬けにやってきました。
今日はこれらの活動を一斉に振り返ります。

Node.jsの勉強会の運用・Node.js/React.jsを使ったリアルタイムクエリ評価システムの開発

もともとは社内の開発支援ツールみたいなのを作ろう。
という話から始まったはず、その時はGolangやScalaとか色々声が上がっていたが、クライアント・WEBAPI・WEBSocket・デーモン全部JavaScriptで作ったら面白いんじゃない？という流れでJavaScript/Node.jsで固めることになった。
その後に、そもそもNode.jsに関して詳しく俺たちわかってないよね？ということになり、社内で勉強会を企画・運用しました。
その時は開発に関わるエンジニアと、Node.jsに興味があったエンジニアとで、社内勉強会を運用しました。みんなが講師役になってピザやカレーを食べながらモクモク勉強会を運用できてとても楽しかった。

勉強会のカリキュラムは以下のようなもの。

JavaScript復習(オブジェクト指向・スコープ・クロージャーなど癖のあるところを中心に)
Node.jsの特徴(イベントループ・例外の補足など)
Module(主にCommonJSにおけるモジュール管理の特徴と、NPM)
MongoDB(Node.jsでMongoDBを操作してみる。mongooseによるODM)
HTTPサーバー(httpモジュールを使ってWEBサーバー(静的・動的)を作ってみる)
Express(HTTPサーバー編のものをExpressを使って楽をする)
ライブラリ(ポピュラーなライブラリを調べて、使ってみた報告をする)
WEBSocket(wsモジュール・socket.ioを使って遊んでみる)
ES6(ES6のFeatureを全部触ってみる)
React.js(React.js/jsxになれるために簡単なアプリを作る)

どれもだいたい、2,3時間ぐらい時間を使って完走しました。
ピザが食べれるというのが効果があったのか、5人とかで勉強会をしていましたが毎回メンバー全員集まっており、2ヶ月ぐらいで完走出来た記憶があります。
今も、他の社内の勉強会に参加しておりますが、この時の勉強会ほど充実していないです。(断言)

勉強会を運用するにあたってのメンバー構成は以下の様な感じでした。

参加者 2名
講師兼、参加者 3名

講師は担当の講義用の資料を作らなければいけません。しかし講師といってもNode.jsの初心者なので自分で調べて、理解して、整理して伝えないといけないです。
自分も講師を担当しました、JavaScript復習・MongoDB・ES6・React.jsとかだったと思います。
その時は以下の資料を参考にしました。

JavaScript復習

特に『オブジェクト指向JavaScriptの原則』を読めたことでJavaScriptの理解を深めることができました。

MongoDB(mongoose)

公式のドキュメントで十分に理解できると思います。

ES6

ES6に関してはいろいろな記事が今となってはありますが、軽く知るには、babelのoverviewを眺めるのが一番いいかと思います。
http://babeljs.io/docs/learn-es2015/

React.js

@koba04さんの『一人React.js Advent Calendar 2014』
http://qiita.com/advent-calendar/2014/reactjs

すごいいいです。
無理ないペースで1記事毎にまとまっているのでがんばれます。

と、がむしゃらにやった感があります。
はやり、新しく技術を吸収するには何かしら踏ん張らないといけませんが、1人だと辛いので勉強会としてみんなで頑張るのは効果的だと感じました。
勉強会として運用するにあたっても大事なのが1点あると感じます。

少人数

全員のモチベーションが揃わないと、継続的な運用は不可能です。『人が揃わない』が一番の悪です。少人数だとモチベーションのコントロールもしやすく、結果として、出席率を上げやすいです。
あと、詳しくない人でも講師役を担当することを出来れば、おすすめしたいです。理解度が半端無く上がります。

Node.jsでちょっとした通知ツールを作る

何かしらのWEBのフックを受け取って社内チャットに通知するような小さいツールを作りました。
今思うと、Hubotのプラグインでも良かったかなと思える内容のものなのであれですが。
Expressで、ほいほいできてしまったので特に何も思い出はありませんが、さくっとWEBAPIつくるならこれからはExpressがいいかなとなりました。

HTML5の神になる

ある程度JavaScriptも本を読んで慣れてきたし、腕試しをしたくなったので『HTML5 Professional Certification』の試験を受けてみたくなりました。
現在、LEVEL1, LEVEL2と試験があります。LEVEL1はHTML,CSSに関しての試験で、LEVEL2はHTML5API、JavaScriptの試験です。

セミナーなども頻繁に実施されているらしく、セミナーに出向いてinputするのが効果的なようです。
また、セミナーのレポートも公開されており、レポートの眺めて問題の傾向をつかみ、勉強すると効果的かと思います。自分はそんなやり方で合格することができました。
http://html5exam.jp/news/event/

LEVEL1, LEVEL2共に合格することができましたが、個人的にはLEVEL1の方が難しく感じました。CSS難しいですね。
こういった試験は合格したからといって、どうということはありませんが、知識の整理ができますし、新しく知ったことがあればそれを使ったコードを書いてみたくなるのでモチベーションが上がるので好きです。
是非、上級JSer向けのLEVEL3試験を公開して欲しいです。

ES6に衝撃を受ける

はやり1年間の中で一番の衝撃はES6でしょう。

class構文
Promise
generator
template strings
const/let

特にここらへんが個人的にはいいアップデートだなぁと感じます。
今まで苦しかったところがすっきり晴れて、よし、JavaScriptはこれからだぞ。って気分になれます。特にPromise/generatorにより非同期処理の制御は興味深いです。
この辺に関しては先日社内のアドベントカレンダーでちょっとだけ、話をしております。

そんなこんなで我、今後はES6しか書かない・書きたくない。と決意をしました。

ES6/TDDをフルに利用した、JavaScript/Node.jsによる共通システム基盤の設計・リードエンジニア

さて、そんなこんなでお仕事の話ですが、複数コンテンツに関わる共通システムで開発することになりました。
共通システムを開発するにあたって、以下の様な特徴がありました。

抽象度の高い、データ・バッチ・アルゴリズム
バッチ・WEBAPI・ブラウザアプリと、フルスタックなアプリケーション

これはもう、全部JavaScriptで書いてやろうと最初に決意しました。
今現在、開発の最後のフェーズですが、とても良い物ができていると思います。

以下の様な点が良かったです。

ES6を採用したPJはこれが初めてでしたが、class構文の導入によりオブジェクト指向プログラミングがしやすくなった。
全部JavaScriptで書けるのでクライアント担当・API担当・バッチ担当みたいな変な役割はなく、開発者みんながどこにでもコミットできるので、無駄なコミュニケーションコストがかからない
非同期処理をPromiseですべて抽象化し、実行制御をco, generatorに任せることで可読性を保てた。
Mocha/power-assertで全部テストが書ける

今や、JavaScriptはサーバーアプリケーションもかけるし、リッチなクライアントのも動かすことができます。syntaxの進化により、単純に開発者が楽することもできるようになりました。
テクノロジーの進化はチーム・人間の問題解決につながります。モダンなJavaScriptを追う価値はそこにあります。
↑この記事で言いたいのはこれです。

しかし、単純にモダンなJavaScriptでやってこうぜ！と言っても全員が全員前向きにやってくれるわけでもなく、そもそも知らないことばかりで困ってしまいます。
元々はPHPとかのエンジニアの方が多かったので、JavaScriptというだけでハードルがありました。
そんなぽかーん状態を解決するために自分がやったのはこれらです。

javascripting
learnyounode
tower-of-babel
how-to-npm

https://github.com/sethvincent/javascripting
https://github.com/workshopper/learnyounode
https://github.com/yosuke-furukawa/tower-of-babel
https://github.com/npm/how-to-npm

JavaScriptとはじめ、Node.js, ES6, NPMの勉強をすることができるツールです。
実際に課題を解いていきながらスキルを身につけるタイプのものですが、丁寧に作られており、印象いいです。

そんなこんなで課題にあげていた学習コストに関しても1週間ほどみっちり周りの方の協力あり、何とかクリア!!全く問題ないわけではないですが、今もコードレビューなどでメリメリチームのJavaScript力をアップできています。

このへんの話は以前にとある勉強会で話をした資料もあるのでリンクを貼っていきます。

『覚醒JavaScript -ES6で作るIsomophicアプリケーション- 』

Backbone.jsの蓋を開ける

開けました。
何をしたかといいますと単純に全部ソースコードを読みながらコメント付けたり、オプションつけたときの振る舞いをデバッグしてニヤニヤする。というものです。

http://qiita.com/keitarou/items/2a7ee7c3a2e14e9b16dd
http://qiita.com/keitarou/items/eef56cccec87a11c378b
http://qiita.com/keitarou/items/db50a352a37535816b71

大体80~90%程カバーできる所まで来ました。
GUIのアプリケーションに関しては、とあるプロパティを書き換えただけで思わぬレンダリングコストが発生したりとかするものなので中の仕組みを知ることは非常に大切だなぁと感じます。
実際に普段Backbone.js/Marionette.jsでコードレビューする際もだいたいその辺にツッコミを入れたり入れられたりです。

社内JavaScript/WEB技術向上活動開始。2015年JavaScript期末試験の開催

いつの頃からか、社内でもJavaScriptが注目されるようになってきて、周りはWebGLだ！それReactだ！........みたいな感じにもなってきました。
自分はそれの一環でJavaScriptのライブラリのソースコードリーディング・勉強会などを進めてきているのですが。
で、そもそもJavaScriptの基礎、特に言語仕様ってどれぐらいわかってる？運用中のサービスで利用されているJavaScriptの技術ってちゃんと理解している？
という疑問が結構出てきました。そこでJavaScriptの実力試験(期末試験)を行うことにしました。
勉強会を開催するにあたっても、周りのレベル感を把握してカリキュラムや講義の際のコンテキストを適したものにしないと染み込みませんよね。
ということでチームの技術力の棚卸しです。
『HTML5 Professional Certification』のLEVEL2の問題を見ていたこともあり、問題作成はすらすら出来ました。
実際に作った問題の範囲は以下の様なもの

【1】JavaScript言語仕様(基礎・オブジェクト指向・プロトタイプ指向オブジェクト指向)
【2】Backbone.js Marionette.js
【3】Underscore.js
【4】モジュール管理・開発ツール
【5】その他(WEB技術・HTML5・デバッグ)

Underscore.jsでクールなコードを書く問題から、hoistingのような言語仕様レベルの問題までぎっしりです。(『HTML5 Professional Certification』より圧倒的に難しい)
実際に問題を解いていただいて、採点してみても思いましたが、みんな同じ所を正解して、同じ所を間違えます。同じチームでやっているとやっぱりそうなるんだろうな。と感じました。なのでみんなが間違えていた所を補強すればいい。それだけです。しかし、実力テスト抜きにしてそれをどう調べるか。難しいですね。
あと、もう1点、JavaScriptに関しては20代のエンジニアの方が強かったです。しかし、ベテランエンジニア陣の感は鋭く、感で結構当てられてしまいました。

Visual Studio Codeに出会う

自分は今も昔もVimが好きだ。
Vimは最強だ、ES6だってプラグインを入れているのでsyntaxも問題にならない。
ただ、世のVimmerよ、Vimを使わない人だって多いんです。現実は。
そういう人はES6でJavaScriptを書く際に、まずsyntaxで困るのだ。
とりあえず、そんなことで周りの人が困ってそうに見えたのでお節介をしていくつかエディタを調べました。
結論、Visual Studio Code(VSCode)とやらが良いらしかった。
https://code.visualstudio.com/

彼はとてもクールだ、JavaScript/Node.jsのデバッグツールとしても優秀で、今はVimとVSCode
の両刀に私までなってしまった。
もしかしたら、これが今年一年の中での一番のインパクトかもしれない。
チームの人も多くが今はVSCodeだ。

JavaScript/Node.jsを書きたい
デバッグツールとしても使いたい
動作が軽いは譲れない
FREEのものを使いたい
Vimは嫌だ

上記がいくつか当てはまる人には是非おすすめしたいです。

まとめ

以上JavaScriptとの1年間でした。
大体戦闘力的には中級者にはなれたんじゃないかなと思います。

今や、JavaScriptはサーバーアプリケーションもかけるし、リッチなクライアントのも動かすことができます。syntaxの進化により、単純に開発者が楽することもできるようになりました。
テクノロジーの進化はチーム・人間の問題解決につながります。モダンなJavaScriptを追う価値はそこにあります。

と↑の方で表現をしておりますが、テクノロジーの進化はチーム・人間の課題解決になります。
JavaScriptはその中でも、最も進化の早いキーワードではないでしょうか。1年間JavaScriptと真面目に戦ってそう思いました。
なのでこれを読んでくれている人も、そうでない人も前向きにどんどんJavaScriptで遊びましょう。

以上です。メリークリスマス。来年もよろしくお願いします。

あと最後にJavaScriptで世界征服したいエンジニアさん一緒に働きましょう。
何かしらで私にアポ下さい。