とりあえずリポジトリをご査収ください。

なんで今更？

デザイナさんとの協業自体はすげー楽しいんですけど、作ってもらったデザインをどうやって円滑にアプリケーションに組み入れるかという必要に迫られております。。。

大体考えている課題は以下のようなところですね。

要するに、今デザイナーさんが上げてくれてるHTMLの文書構造や基本的な作りを変えずにアプリケーション用の情報を入れ込みたい、デザイナーさんの仕事の邪魔もしたくない、とこういう感じです。

試したもの

ライブラリの依存関係とったりカスタムタグ作ったりして共有すればいいんじゃないかと思って、

を試してみました。

のライブラリです。

クライアントサイドのビューとロジックを分離するためのライブラリで、ビューへの埋め込みの記述をシンプルにするためにカスタムタグの形式にしています。

フロントエンドの動的になる部分だったりをカスタムタグに置き換える感じですね。実際に使うとなったら納品してもらったデザインに対してカスタムタグを設計して、リファレンスを作って、デザイン時から使ってもらう、という流れになりそうです。それをサーバサードでやるのか？という疑問はさておき。

カスタムタグは動的コンパイルもプリコンパイルもできます。ルーティングもできるのでURLを書き換えながらシングルページアプリケーションも可能です。

公式サイトに日本語ドキュメントがあるのはありがたいですね。

フロントエンドのモジュラーバンドラーです。大体ググって出てきたまんまのことをやっています。他のビルドツールを使ったことがないので比較はできませんが、様々な機能(カスタムタグやらCSSやらSASSやら)のローダーが提供されていて、使い方もシンプルに感じました。

webpackで構成する時用の開発サーバ(webpack-dev-server)も用意されています。npmでインストール可能で、私の環境だと開発サーバの起動は以下のコマンドでした。

~/node_modules/.bin/webpack-dev-server --inline --hotg

を参考にします。なんかそのまま導入するのはちょっと悔しいですが。ちなみに、Usageにbabel-coreのインストールが足りないので、追加しました。

Thymeleafでいいじゃん。以上。