フロントエンド開発環境の紹介

フロントエンド担当の shuji-koike です。

マーベリックに2015年1月にjoinして最初に任されたお仕事は、DSP広告システム Sphereの管理画面のリニューアルでした。

今回の記事では、管理画面のリニューアルにあたって採用したスタック(技術セット)について紹介させていただきます。

Slim

http://slim-lang.com/

htmlのテンプレートエンジンとして、haml,slim,jadeなどがありますが、個人的に使い慣れているという理由でslimを採用しました。 インデントレベルだけでhtmlの構造を記述できるので非常に生産性が高く、可読性も良好です。

CoffeeScript

http://coffeescript.org/

altJSの定番ということで迷わず採用。

Bootstrap

http://getbootstrap.com/

htmlのマークアップやデザイン面のフレームワークとしてBootstrapを採用しました。

Bootstrapのフレームワークに乗っかることで開発・改修工数を低く抑えつつ、 先々デザインを改善することになった場合は、Bootstrapのスキンを置き換えることで比較的簡単に改修できるという想定です。

AngularJS

https://angularjs.org/

Reactなど仮想DOM系のフレームワークも検討しましたが、まだ開発手法やノウハウの蓄積が十分でないと判断し、十分に枯れてきているAngularJSを採用しました。 AngularJSはとっつきにくい面もありますが、中〜大規模なWebアプリのフレームワークとしては良い選択肢だと思います。

Middleman

https://middlemanapp.com/jp/

フロントエンドのビルドツールとしては、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コマンドを使って、コードの修正をプレビューしながら開発できます。


今回は技術的に踏み込んだことは書けませんでしたが、今後の記事では開発手法やノウハウについて共有していきたいと思います。