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

Develop and Design Note

フロントエンドなデザイナーの覚書

フレームワークの共存

CSSフレームワーク MVCフレームワーク

前回、フレームワークについていろいろ調べたのですが(フレームワーク導入に辺り、いろいろ調べてみた - Web Design Note)、CSSフレームワークMVCフレームワーク共存は可能なのでしょうか。

同じ種類のフレームワーク(例えば、AngularJSとBackbone.js)の共存は無理だとしても、CSSフレームワークMVCフレームワーク共存であれば、共存させる方法があるようです。

Bootstrap + Backbone.js

フレームワークの組み合わせでいろいろググってみたのですが、「Bootstrap + Backbone.js」の組み合わせに関しては、特になんの工夫もせず、HTMLにそれぞれのファイルを読み込む記述を書くことで共存できるようです。
そんなことできるのか?と心配なのですが(自分が仕組みをよくわかっていないだけですが)、普通にできるようですね。。

ただ、この普通の方法で事例を見つけたのは、この組み合わせだけで、他の組み合わせについては、英語の記事ではそこそこあったのですが、これといったものが見つかりませんでした。

Bootstrap + AngularJS

この組み合わせに関しては、AngularJSの拡張機能として提供されている「UI Bootstrap」を使うことで可能なようです。上記の強引な方法ではないので、何となく安心して使えそう。

Yeomanを使った方法

この「Yeoman」を使えば、様々なフレームワークの下準備を、なんだか良い感じに自動でやってくれるようなのですが、一体「Yeoman」とは何でしょうか?


引用しますと、

Yeomanは、WebページやWebアプリケーションなどの制作を迅速にはじめることができ、制作中のいろいろな作業をサポートしてくれるツールセットです。

とのこと。
いろいろ調べてみると、Generatorという仕組みを使ってフレームワークの雛形を作成してくれるのですが、各フレームワークに対応したGeneratorが存在し、それらをインストールすることで、フレームワークを構築できるようです。
どんなGeneratorが存在するのか、公式サイトから検索できます。

例えば、検索フォームに「AngularJS」と打ち込むとAngularJSのGeneratorがヒットします。
「AngularJS」「Backboe.js」「Bootstrap」はAutherが「The Yeoman Team」であるのに対し、「zf5(Foundation)」はサードパーティ製のGeneratorのようです。
公式配布とサードパーティでどんな違いがあるのかわかりませんが、フレームワークの構築から雛形作成までは、これらのGeneratorをインストールすればできるようです。

ただ、「各種フレームワークを良い感じに共存させる」ものではなさそうなので、正常に機能するかどうかは、実際にやってみてみないとわからなそうです。。