フロントエンド担当の shuji-koike です。
マーベリックに2015年1月にjoinして最初に任されたお仕事は、DSP広告システム Sphereの管理画面のリニューアルでした。
今回の記事では、管理画面のリニューアルにあたって採用したスタック（技術セット）について紹介させていただきます。
Slim
htmlのテンプレートエンジンとして、haml,slim,jadeなどがありますが、個人的に使い慣れているという理由でslimを採用しました。
インデントレベルだけでhtmlの構造を記述できるので非常に生産性が高く、可読性も良好です。
CoffeeScript
altJSの定番ということで迷わず採用。
Bootstrap
htmlのマークアップやデザイン面のフレームワークとしてBootstrapを採用しました。
Bootstrapのフレームワークに乗っかることで開発・改修工数を低く抑えつつ、
先々デザインを改善することになった場合は、Bootstrapのスキンを置き換えることで比較的簡単に改修できるという想定です。
AngularJS
Reactなど仮想DOM系のフレームワークも検討しましたが、まだ開発手法やノウハウの蓄積が十分でないと判断し、十分に枯れてきているAngularJSを採用しました。
AngularJSはとっつきにくい面もありますが、中〜大規模なWebアプリのフレームワークとしては良い選択肢だと思います。
Middleman
フロントエンドのビルドツールとしては、gruntやgulpが一般的ですが、弊社ではmiddlemanをビルドツールとして採用しました。 middlemanはRuby on Railsのエコシステムから派生した静的サイトジェネレータです。
本来MiddlemanはコーポレートサイトやブログのようなWebサイトを構築するためのツールですが、 Ruby on Railsのアセットパイプラインのような機能 (sprockets)を利用するために使っています。
slim,coffee,sassのソースコードをhtml,js,cssに変換・難読化(Uglify)して、さらにgzip圧縮するところまで、middleman buildコマンド一発で実行できます。
また、開発時はmiddleman serverコマンドを使って、コードの修正をプレビューしながら開発できます。
今回は技術的に踏み込んだことは書けませんでしたが、今後の記事では開発手法やノウハウについて共有していきたいと思います。
