CSSのフロントエンドフレームワークは百花繚乱です。しかし本当に優れたものだけに絞り込むことは可能です。
この記事では、私が考える「現在のフレームワークのベスト5」を比較します。強みと弱み、向いている分野があるので、プロジェクトで求めるものに応じて使い分けてください。プロジェクトが単純なら、複雑なフレームワークは不要です。また大半はモジュールベースですから、必要なコンポーネントを選んで使うか、別々のフレームワークのコンポーネントを併用することもできます。
紹介するフレームワークはGitHubの評価を基にしているので、最初に紹介するのは、もちろん一番人気のBootstrapです。
注：紹介する情報の一部は翌週ないし翌月には古くなっています。例：GitHubスターの数やバージョンなど。時間がたっている場合は最新の情報を参照してください。またフレームワークのサイズは必要なCSSとJavaScriptを含む最小限のサイズです。
1．Bootstrap
Bootstrapは昨今のフレームワークのなかでは文句なく一番人気です。増え続ける人気を見ると、選んでおけば、優れたWebサイトを作成できるし、作成途中に途方に暮れることもないでしょう。
- 開発者：Mark Otto、Jacob Thornton
- リリース：2011年
- 現行バージョン：3.3.7
- 人気度：GitHubスター111,000個
- 説明：「BootstrapはレスポンシブかつモバイルファーストなWebプロジェクトのための、一番人気のHTML、CSS、JavaScriptフレームワークです」
- コンセプト・原則：レスポンシブWebデザイン（以下RWD）、モバイルファースト
- サイズ：154KB
- プリプロセッサー：Less、Sass
- レスポンシブデザイン：あり
- モジュール化：あり
- 初期テンプレート：あり
- アイコンセット：Glyphicons Halfling
- 拡張・アドオン：バンドルされていないものの多数のサードパーティ製プラグインあり
- 特徴的なコンポーネント：Jumbotron
- ドキュメント類：良好
- カスタマイズ：基本的GUIカスタムあり。残念ながらカラーピッカーは無く、自分で色の値入力が必要
- ブラウザー対応：Firefox、Chrome、Safari、IE8以上（IE8にはRespond.jsが必要）
- ライセンス形態：MIT
Bootstrapについて
Bootstrapの最大の強みはその幅広い人気でしょう。紹介するほかのフレームワークと比べて必ずしも優れているわけではありませんが、リソース（記事、チュートリアル、プラグイン、拡張機能、テーマなど）に関してはほかの4つを足し合わせたもの以上に充実しています。Bootstrapはそこら中で使われています。これこそが、選ばれ続ける理由なのです。
注：ここで言う「特徴的なコンポーネント」とは、本リストのなかのフレームワーク特有のものを指しています。
2．Foundation （by ZURB）
今回の比較では、Foundationを2番手に挙げました。ZURBという、しっかりした会社が後ろ盾となっているため、その名のとおり強固な基礎があります。結果、FoundationはFacebook、Mozilla、Ebay、Yahoo!、National Geographicなど、多くの大型プロジェクトで使用されています。
- 開発者：ZURB
- リリース：2011年
- 現行バージョン：6.3.1
- 人気度：GitHubスター254,000個
- 説明：「世界でもっとも進んだフロントエンドのレスポンシブフレームワーク」
- コンセプト・原則：RWD、モバイルファースト、セマンティック
- サイズ：197.5KB
- プリプロセッサー：Sass
- レスポンシブデザイン：あり
- モジュール化：あり
- 初期テンプレート：あり
- アイコンセット：Foundation Icon Fonts
- 拡張・アドオン：あり
- 特徴的なコンポーネント：Icon Bar、Clearing Lightbox、Flex Video、Keystrokes、Joyride、Pricing Tables
- ドキュメント類：良好。公式以外の参考リソースも多数あり
- カスタマイズ：Bootstrapのものに似た基本的なGUIカスタムツール
- ブラウザー対応：Chrome、Firefox、Safari、IE9以上、iOS、Android、 Windows Phone 7以上
- ライセンス形態：MIT
Foundationについて
Foundationはビジネス向けへの対応、トレーニング、コンサルティングを提供しています。まさにプロご用達のフレームワークです。迅速かつ容易に学んで使用できるように、多くの資料を提供しています。
3．Semantic UI
Semantic UIは、Webサイトをもっとセマンティック（主にコンピュータが意味を解釈できるようにすることを指す）に作成するための、現在進行中のプロジェクトです。自然言語の法則を利用することで、コードはより読みやすく分かりやすいものになります。
- 開発者：Jack Lukic
- リリース：2013年
- 現行バージョン：2.2
- 人気度：GitHubスター34,762個
- 説明：「自然言語の法則にもとづいたUIコンポーネントフレームワーク」
- コンセプト・原則：セマンティック、使用するHTMLタグの自由さ、レスポンシブ
- サイズ：806KB
- プリプロセッサー：Less
- レスポンシブデザイン：あり
- モジュール化：あり
- 初期テンプレート：あり、基本的なものは提供
- アイコンセット：Font Awesome
- 拡張・アドオン：なし
- 特徴的なコンポーネント：Divider、Flag、Rail、Reveal、Step、Advertisement、Card、Feed、Item、Statistic、Dimmer、Rating, Shape
- ドキュメント類：非常に良い。整理された公式ドキュメントに加え、専用Webサイトで開始の手引き、カスタマイズ、テーマの作成を解説している
- カスタマイズ：GUIカスタムツールなし、自力で変更するのみ
- ブラウザー対応：Firefox、Chrome、Safari、IE10以上（IE9はプレフィックスが必要）、Android 4以上、Blackberry 10
- ライセンス形態：MIT
Semantic UIについて
Semanticは今回取り挙げた中では、革新的で機能が豊富なフレームワークです。全体の構成や名称の規則は、クラスのロジックや意味付けからも、ほかのフレームワークに勝っています。
4．Pure （by Yahoo!）
Pureは純粋なCSSで書かれた、軽量なモジュールベースのフレームワークです。単独と組み合わせを必要に応じて使用できるコンポーネント群を提供しています。
- 開発者：Yahoo
- リリース：2013年
- 現行バージョン：0.6.2
- 人気度：GitHubスター16,637個
- 説明：「どんなWebプロジェクトでも使える軽量でレスポンシブなCSSモジュール」
- コンセプト・原則：SMACSS、ミニマリズム
- サイズ：16KB
- プリプロセッサー：なし
- レスポンシブデザイン：あり
- モジュール化：あり
- 初期テンプレート：あり
- アイコンセット：なし。代わりにFont Awesomeを使用可
- 拡張・アドオン：なし
- 特徴的なコンポーネント：なし
- ドキュメント類：良好
- カスタマイズ：基本的なGUIスキン作成ツール
- ブラウザー対応：最新版のFirefox、Chrome、Safari、IE7以上、iOS 6[c].x・7.x、Android 4.x
- ライセンス形態：Yahoo! Inc. BSD
Pureについて
Pureはプロジェクトを開始するための基本的なスタイルを提供します。機能満載のフレームワークは不要で、特定の限られたコンポーネントを求める開発者には理想的でしょう。
5．UIkit （by YOOtheme）
UIkitは使いやすくてカスタマイズしやすい、気の利いたコンポーネントを集めたフレームワークです。人気は劣りますが、機能と品質はライバルと引けをとりません。
- 開発者：YOOtheme
- リリース：2013年
- 現行バージョン：3.0.0
- 人気度：GitHubスター9,422個
- 説明：速くてパワフルなWebインターフェイス作成のための、軽量かつモジュール化されたフロントエンドフレームワーク
- コンセプト・原則：RWD、モバイルファースト
- サイズ：326.9KB（SVGアイコン関連機能のuikit-icons.min.jsを含めた場合384.4KB）
- プリプロセッサー：Less、Sass
- レスポンシブデザイン：あり
- モジュール化：あり
- 初期テンプレート：あり
- アイコンセット：独自のSVGアイコンシステムと、現在数を増やしつつあるアイコンライブラリー
- 拡張・アドオン：あり
- 特徴的なコンポーネント：Article、Flex、Cover、HTMLエディター
- ドキュメント類：良好
- カスタマイズ：GUIカスタムツールは旧バージョンの2.x用のみ
- ブラウザー対応：Chrome、Firefox、Safari、IE9以上
- ライセンス形態：MIT
UIkitについて
UIkitは多くのWordPressテーマで採用されています。柔軟でパワフルなカスタマイズができます（旧バージョンにはさらに進んだGUIカスタムツールがありました）。
最適なフレームワーク
最適なフレームワークを選ぶ際のガイドラインです。
- フレームワークは普及しているか。人気があれば、それだけ多くの人が採用していて、コミュニティのチュートリアルや記事、実例、採用サイト、サードパーティ製拡張ツールが多い上に、ほかのWeb制作関連ツールとの相性も良い。大きなコミュニティがあるフレームワークは放棄される可能性が低いメリットもある
- フレームワークは活発に開発されているか。良いフレームワークには、最新のWeb技術（特にモバイル関連）による進化が欠かせない
- フレームワークは成熟しているか。フレームワークがまだ実戦で使用されて試練をくぐっていない場合に、自由にそれを試してみるのは良いことだが、本番の仕事でそれに頼ることは賢い選択とは言えない
- フレームワークにドキュメント類がそろっているか。習得を早めるために、良いドキュメントがあることが望ましい
- フレームワークに専門性があるか。ポイントは、汎用的なフレームワークのほうが、用途に特化したフレームワークよりも扱いやすいということ。多くの場合、スタイルの適用が最小限のフレームワークを選ぶほうが、カスタマイズ性が高くなるので得策といえる。新しくCSSのルールを追加するほうが、既存のものを上書きしたりオーバーライドするよりもずっと便利で効率的。既存のルールの上から新しいものを追加すると使えないルールが出てくるためCSSサイズは無駄に大きくなる
もしまだ決めかねているのなら、「ミックス・アンド・マッチ」（組み合わせる）という考え方があります。特定のフレームワークで満足しないなら、2つ以上のプロジェクトのコンポーネントを混ぜて使います。
あるフレームワークから、軽量なCSSベースのスタイルを、別のフレームワークからは優れたグリッド枠の機能を、3つ目のフレームワークからは複雑なコンポーネントを、といった具合に、モジュール化もすばらしいのでお試しください。
最後に、昨今はFlexboxとGrid Layoutが最新の主要ブラウザーに広く対応しており、複雑なレイアウトが簡単に作れます。今後多くの開発者がフロントエンドフレームワークの助けを借りるのをやめて、レイアウトを1から作り始める誘因になるかもしれません。
本記事は、紹介したフレームワークの最新機能を反映するため2017年5月17日に改訂しました。
（原文：The 5 Most Popular Frontend Frameworks of 2017 Compared）
［翻訳：西尾 健史／編集：Livit］
