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

Develop and Design Note

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

フレームワーク導入に辺り、いろいろ調べてみた

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

Web制作の一連の作業ってありますよね。だいたいこんな感じでしょうか↓

  • ワイヤー書く→ビジュアル描く→HTML・CSS書く→JS・PHP書く

しかし、ある程度慣れてくるとと、毎回毎回この一連の作業をするのが正直飽きてきます。個人的には、さっさと「JS・PHP書く」まで行きたいわけです。

そこで今回は、昨今溢れんばかりの「フレームワーク」に挑戦すべく、いろいろと調べてみました。

様々なフレームワーク

世の中には、一体どれだけのフレームワークがあるのでしょう。

まずは、CSSフレームワークですが、数自体はたくさんあるようです。有名な「Bootstrap」や「Foundation」は、そのメリデメからも利用価値が高そうです。

JavaScriptフレームワークについては、ライブラリとツールという観点で調査した面白い記事がありました。実に多くのフレームワークが存在し、どれが人気なのか一目瞭然です。
MVCフレームワークでは、「AngularJS」がダントツの人気で、次いで「Backbone.js」のようですね。

ということで、利用価値や有名どころでフレームワークをピックアップしてみました。

それぞれを詳しく見てみましょう。

CSSフレームワーク「Bootstrap」「Foundation」

「Bootstrap」と「Foundation」ですが、いずれもレスポンシブWebデザインに対応したフレームワークです。

Bootstrap


Foundation

懸念としては、デザインパターンが決められてしまう点ですが、どちらもある程度のカスタマイズ性はあるようで、若干、Foundationの方が優れているようです。
フレームワークを選定する際は、「カスタマイズがどこまで可能なのか」を理解しておく必要がありそうですね。単純に、高いカスマイズ性を求めるなら、「Gumby」というフレームワークが良さそうです。

いろいろ調べてみた個人的な所感はこちら。

  • Bootstrap・・・デザインを多少妥協して、手っ取り早くサイトを作りたい場合に向いている。ネット上に知見が豊富に存在している。
  • Foundation・・・Bootstrapよりも多少カスタマイズ性に優れているが、あまり知見がない。

「ネット上に知見が多い」という点も、作業を効率化する上で大きなメリットです。そういう意味で、やはり「Bootstrap」が良さそうですね。

MVCフレームワーク「AngularJS」「Backbone.js」

そもそもMVCとは?

正確には、クライアントサイドMVCと呼ぶようです。従来のWebサービスのように、サーバーサイドが担当していた一連の処理を、クライアントサイドでできるようにしたもので、開発効率や高速なUIという点で、Webアプリケーションの開発に向いています。

それぞれ具体的に何ができて、どんな記述になるのか、下記の動画または記事が参考になりました。

AngularJS

Backbone.js

AngularJSとBackbone.js、どっちがが良いの?

世の中には、AngularJSとBackbone.jsだけでなく、Knockout.js、Ember.jsなどなど多くのMVCフレームワークが存在します。これらを比較して、メリデメについて考察された記事がありました。

どちらも同じプロダクトを作ることはできるけれど、その規模や特徴によって、どのフレームワークを使うのかが変わってきそうですね。
しかし、どっちが良いのかは、正直悩ましいです。「知見の多さ」という点で「AngularJS」かな。


一旦、各フレームワークの調査はこの辺りにして(とはいえ、予備知識なかったので2日を要した・・・)、次は、今回調べたCSSMVCフレームワーク共存について調査したいと思います。