読者です 読者をやめる 読者になる 読者になる

冥冥乃志

ソフトウェア開発会社でチームマネージャをしているエンジニアの雑記。アウトプットは少なめです。

follow us in feedly

フロントエンド周りについて少し検証してみた

Programming

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

github.com

なんで今更?

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

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

  • デザイナから上がってくるhtmlに極力手を入れたくない
  • テンプレート用情報を埋め込んでも静的に表示可能でないとレビューしづらい

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

試したもの

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

  • Riot.js
  • webpack

を試してみました。

Riot.js

  • jsでカスタムタグを作る
  • 作ったタグをHTMLに埋め込んで使う
  • カスタムタグのシンタックスもHTMLの中の埋め込みっぽい感じ

のライブラリです。

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

qiita.com

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

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

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

webpack

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

qiita.com

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

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

webpackとの連携

github.com

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

で、結局どうなった?

Thymeleafでいいじゃん。以上。