フロントエンド担当の 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
コマンドを使って、コードの修正をプレビューしながら開発できます。
今回は技術的に踏み込んだことは書けませんでしたが、今後の記事では開発手法やノウハウについて共有していきたいと思います。