はじめましてyamada-yです。
少し時間がたってしまいましたが5月の社内勉強会、ALMレポートをお伝えいたします。

5月テーマは「JavaScript」です。
今回は2013年新卒がALM初参加で、新卒にも発表してもらいました。

水島『超絶変態技巧JavaScript』
1_水島さん_01
1.空配列リテラルがあれば全て書ける
constructorという文字列で無名関数が作れる、空配列リテラルの不思議な演算結果を使用して関数を記述した。
http://voqn.blogspot.jp/2011/05/wtf-javascript-empty-array-programming.html

2.デキる男はJITコンパイラの気持ちも汲む
Array.sortよりもJavaScriptで実装したソートの方が高速であることをネイティブ実装とユーザー実装を行き来するために最適化がかかりづらいと解説した。
MacciatoはJIT最適化を考慮したテクニックで高速化を行って実装されている。
http://voqn.github.io/macchiato/

3.JavaScriptでプリエンティブマルチタスク
ユーザースレッド下で重い処理が入ったらNon-Blocking I/Oとはいえども普通にブロックがかかってしまうと解説した。
pp.jsはライブラリAPIをすべて継続渡しスタイルのトランポリング関数で設計することにより、Major GCをさせなくしている。
http://voqn.github.io/pp.js/

JavaScriptエンジンの実装に踏み込んだ非常に高度な発表でした。

2013年新卒 上田『AngularJS  TypeScript  yeoman』
2_上田さん_01
過去の開発経験からAngularJS TypeScript yeomanの優位性を発表した。
CoffeeScript, SCSS + compass, RequreJS, KnockoutJS, Guardを使用した開発環境では以下のような問題があった。
問題1.CoffeeScriptは動的型のため、コンパイル時に型エラーに気づけない。
問題2.ライブラリの不足部分を自作フレームワークで補ってしまったため、自分自身しかメンテできなくなった。
問題3.ビュー部分のテストがしづらかった。
問題4.Guardだけで補えない部分を自作ツールで補いすぎたため、メンテナンスが難しくなった。

これらの点を踏まえて開発環境をTypeScript, AngularJS, Yeomanに変更したことでこれら問題点に対応した。
・TypeScriptは静的型なのでコンパイル時にエラーが検出できる。
・AngularJSを使用することで自作しなければならなかった部分をフレームワークに置き換えることができ、ビューがなくてもテストを行うことができた。
・Yeomanを使用することでビルド・テスト・デプロイの自動化を行うことができた。

実体験を踏まえたとても良い発表でした。

2013年新卒 澤『Haxeで安全なJavaScript開発』
3_澤さん_02

JavaScriptをはじめ、様々な言語を出力できる言語Haxeの発表。
HaxeはECMAScript4等に近い文法を持ったクラス思考のオブジェクト指向言語で、静的型付け+強力な型推論を持つ。
JavaScriptは==と=の違いや行末カンマなど、実行時には気づきづらいバグが潜みやすいので
Haxeはソースマップに対応しており、JavaScriptをほとんど意識することなく開発することが可能。
また、静的型やジェネリクスにより型エラーはコンパイル時に気づくことができる。
IDEが使用可能で標準ライブラリも強力なことからHaxeを使用すればJavaScriptよりも楽に開発することができる。
他にもAltJSは存在しますが、Haxeは他のAltJSと比較してファイル分割が行いやすいメリットがある。
JavaScriptの罠にはまりにくく、JavaScriptよりも学習コストは低いように感じ、初心者にはオススメの言語である。

多言語との比較を踏まえた良いHaxeのプレゼンテーションでした。

宇津『大規模JavaScript開発~ッ』
 4_宇津さん_01
TypeScriptが出力するソースコードは比較的きれいなため、JavaScriptを学ぶのに役立つ。
JavaScriptを書くときはなるべくDOMからはなれた設計をする。
マークアップとスクリプトを分離し、なるべくHTML上にJavaScriptを書かない。
ロジックやデータアクセスのコードがUIのコードと一体になっているSmart UIはグラフィカルなツールを最大限に利用する場合は採用することもありえるが、モデル駆動設計が一切機能しなくなるため、メンテナンス不能なコードに陥ってしまいがち。
対策としてはbootstrapを用意して必ずidやclassの文字列は引数として渡す。ちゃんとモデリングすること。
docコメントなくても内容がわかる命名、設計にすることが理想だがちゃんとjsdoc書くこと。

社内でもSmart UIに陥ってしまった経験があるという人も見られ、共感できることの多い発表でした。

佐藤『眠りっぱなしの獅子の目覚め』
 5_佐藤さん_01
ブラウザ上でカードのキラ画像の実装方法についての発表でした。
カードがキラキラしている様子を表現するにはブラウザでは描画速度が追い付かない。
描画が追い付かないのであれば処理をGPUに任せてしまえばよく、GPUにアクセスするインターフェースとしてWebGLを使用した。
GPUはベクトルデータや画像データを扱うことを得意としており、GPUに命令するピクセルシェーダを記述する必要がある。
面の傾き情報(X, Y, Z)を(R, G, B)と対応付けて画像として保存(法線マップ)。
面の傾きと光源の方向との内積をとり、影響度を計算。
さらに内積の強さによって色を変更するため、内積値を使用して画像からRGBを取得する。
RGBをプログラムが計算するよりも、簡単に望んだ結果を得ることが可能で計算コストも安定する。
今後はスマートフォンのジャイロセンサを使用してキラキラ感をアップさせたり、省電力化をはかっていきたいそうです。

WebGLに関しては今後スマートフォンの対応が気になるところです。

今回は『JavaScript』をテーマとしていながら、なんと純粋にJavaScriptについて発表は1人という面白い勉強会となりました。

次回のレポートもお楽しみに。