#6 「CSSフレームワークの動向を探る」

今回のポッドキャストではCSSフレームワークの概要や、Tailwind CSSやBootstrapなどの人気CSSフレームワークの特徴および動向についてお話しました。
CSSフレームワークを使ったことがない方や、そもそもCSSフレームワークを知らない方向けの内容となっておりますので、ぜひ気軽にお聴きください。

※ オフラインのため、音声ファイルを再生できません。ネットワーク状況をご確認の上、再度アクセスしてください。

板垣
こんにちは。
古川
こんにちは！
板垣
ミツエーテックラジオは株式会社ミツエーリンクスのスタッフが、Webデザイン、WebフロントエンドなどのWeb技術に関するニュースやツールなどをシェアしたりするためのポッドキャストです。
本日の司会は設計チームの板垣が務めさせていただきます。ゲストは少し前にシステム開発系の部門に異動した古川さんです。よろしくお願いします。
古川
はい、えー先日異動しました、旧設計チームの古川です。よろしくお願いします。
板垣
お願いします。
今回のポッドキャストはですね、昨今のCSSフレームワークの動向について、お話ししていけたらなと思っております。
古川
はい。
板垣
はい。で、まずはじめにですね、そもそもCSSフレームワークって何だっけと、まあそういった方に向けて軽く概要説明させていただけたらと思います。
CSSフレームワークというのはですね、一言で言ってしまうとCSSのテンプレート群ですね。事前に用意されてるスタイルを使用してWebサイトなどを構築していけるので、設計時に考慮しなくてはいけない対象が減ります。またですね、使用できるスタイルに制約があるので、複数人で作業しても一貫性のある構築ができるようになります。
で、CSSフレームワークは大きく分けて2種類のパターンがあると考えていまして、1つ目はBootstrapなどのコンポーネント型のものです。このタイプのフレームワークはですね、ボタンだとかグローバルナビゲーションみたいな、コンポーネント単位でスタイルが提供されるので、たとえば短納期だったり、プロジェクトにデザイナーがアサインされてない、要はデザインは出来合いのもので良いプロジェクトなどに有効とされてます。
またですね、CSSの知識がない方だとかコーディングに不慣れな方でも、こう手軽にリッチなサイトなどを構築できると、そういった利点があります。
古川
究極HTMLコピペでページが実装できるんで、コンポーネント型のCSSフレームワークはやっぱ考えなきゃいけない事っていうのがぐっと減るので魅力的ですよね。
板垣
そうですね。2つ目はですねTailwind CSSみたいなユーティリティ型のものですね。このユーティリティ型のフレームワークは、余白付けだとか色付け、まあそういった機能単位でスタイルが提供されてます。これによってですね、コンポーネント型とは違って自由度の高いコンポーネントスタイルを作ることができるようになっています。
またですね、クラスが与えられてる要素だけスタイルが適用される、まあそういったことが約束されるので、コードがより説明的になるといった利点があります。で、以上がCSSフレームワークの簡単な概要となっております。
この説明をですね、こう聞いて「Bootstrapとかそういった物ってフレームワークじゃなくてライブラリなんじゃないの？」と疑問に思ってる方もいらっしゃると思うんですけれども、今回のポッドキャストではですね、あの便宜上それら全てCSSフレームワークと定義してお話しさせていただきます。
ここまで概要をお話してきたんですけど、古川さんは実際CSSフレームワークって普段から使ってたりしますか？
古川
いやあ実際はやっぱ使う頻度っていうのは少ないですね。その何ていうかコンポーネント型のCSSフレームワークって主にそのデザイン面で縛りが多くて、結局自分で作っちゃうことが多いかもです。
まあただその今回のポッドキャストに合わせてたくさん調べてきました。
板垣
ありがとうございます。実を言うとですね自分もこう使用頻度っていうのは結構少なくて、正直この世のCSSフレームワークについてそれぞれどんな特徴があるのかみたいなところはあまり知らないんですよね。
あのただ今回古川さんがたくさん調べて来てくださったということなので、その点についてちょっと聞いていってもいいですか？
古川
はい。いやまあその、CSSフレームワークって言っても、Bootstrapみたいな、その再利用性の高いWebパーツっていうのをたくさん備えているものから、まあその軽量化っていうところに特化したものまで、いろんな特徴を持つものがあるみたいです。
板垣
そうですね。ただやっぱり人気なのはさっきから話に出てるBootstrapとかになるんですかね。
古川
まあそうですね。公式サイトにもその「世界で最も人気のあるフロントエンドのコンポーネントライブラリ」って書いてありますしね。
板垣
そうなんですね。
古川
そうなんですよ。でもそのGitHubのリポジトリの現在のスター数が確か145,000くらいを超えていますし、その「世界一」っていうのも嘘ではない人気っぷりかなと思います。で、このフレームワークっていうのは2011年頃にメジャーリリースされていて、今でもアップデートが続けられてるんですよ。
板垣
はい。
古川
で、やっぱ古くからあるだけあってそのテーマとかドキュメントもその豊富なのが人気の1つかもしれないですね。あとはまあ欲しい機能がひととおり揃っているので、プロトタイピングもサクッと作れるのが強みかなぁとも思います。
板垣
なるほど確かにBootstrapはこうWebサイトで使うような大体の機能ってこう揃ってる印象があるので、プロトタイプ制作にはうってつけかもしれないですね。
ちなみになんですけど、自分の調べた中だとMaterialize CSSとか、あとはSemantic UIとか、そういったものが気になりましたね。とくにこのSemantic UIに関してはクラス名が結構特徴的だなというのが印象的でしたね。
古川
あー、あれはその人が日常的に使っている言葉に近しくしてあって、読んでぱっとわかりやすいように作られてるんですよね。で、たとえばボタンが3つ並んでるコンポーネントっていうのは「ui three buttons」っていうクラスが外側のdivについていて、で、その中に「ui button」というクラスがついたbutton要素が3つはいってます。たとえばそのボタンの中にアクティブなスタイルをつけたいときは、「ui active button」っていうクラス名とかをつけたりするみたいです。
板垣
なるほどそういうことだったんですね。確かにパッと見でどんなパーツなのか想像できて分かりやすいですね。
古川
ね。耳で聞いても結構自然ですよね。
板垣
そうですね。
古川
ちなみにSemantic UIはそのリポジトリが2年以上動いてなくて、今はそのコミュニティがSemantic UIのリポジトリをフォークしてFomantic UIっていう名前でメンテナンスを行ってるみたいです。
やっぱりそのCSSフレームワークに限らず、こういうツールっていうのはメンテナの貢献あってこそで成り立ってる部分がありますよね。コミュニティっていう観点からいくと、さっき話したFomantic UIやBootstrapもOSSなんですけど、OSSがメンテナンスするCSSフレームワークっていうのはやっぱりそのユーザーがいる限りメンテナンスを継続するっていうことができるので、長期にわたる安定した利用を見込めるかなあと思います。
板垣
なるほど。あの、Fomantic UIになってたんですね。
古川
そうなんですよ。
板垣
なるほど。あの、調べ直します。笑
ちなみになんですけど、OSS関連で言うと最初の概要にも出てきたTailwind CSSとかをこうネットで結構見かけるようになって、個人的に気になってますけど古川さんこれについて何か知ってたりしますか？
古川
あーTailwind CSS、自分もすごく気になっているんですよね。まあ最初に板垣くんが説明してくれたユーティリティ型のフレームワークに該当するんですけど、このユーティリティ型のフレームワークっていうのは、CSSのスタイルごとにクラスが用意されてて、これらを組み合わせて使用するんですよ。
で、たとえばまあボックスを作りたいときは、マージンのクラスと、背景色のクラスと、ボーダーのクラスを使ってモジュールを作成します。ユーティリティ型のフレームワークの利点としては、たとえばそのテーマが決まっているコンポーネントはスタイルは上書きしたりとか、あとちょっとSassとかの中身を改変したりとかしなきゃいけないんですけど、Tailwind CSSはその必要がないので、とても拡張性が高いと言えるんじゃないかなと思います。で、あとはクラス名に依存しないので、再利用性が高いっていうのと同時に、モジュールに固有名を与えないので、クラス命名を考えなくても良くなります。
で、あとは再利用性が高いっていうところに紐付いてくるんですけど、Tailwind CSSをたとえばプロジェクトメンバー全員で覚えていれば、その1つのルールでどのようなプロジェクトでも使えるって言うことで、その命名とかに関して属人化をすることがないんですね。
板垣
んーなるほどそのクラス命名の部分はすごい便利ですよね。結構あのクラス命名でハマってしまうというか、時間を取られることが多いので、その点こうサポートしてもらえると、結構その時間的な余裕ができていいなぁと思いましたね。ただその、便利ではあるんですけど、話を聞いていて反面こうファイルサイズがちょっと心配だなぁと思いました。
端的に言ってしまうと、すべてのCSSのユーティリティクラスがあるわけですよね？
古川
まあそうなんですけど、そこはですね、その未使用のスタイルをCSSファイルから削除するためにPurgeCSSっていうツールがあるんですよ。
板垣
PurgeCSS…？
古川
はい。で、このツールなんですけど、CLIっていうのはもちろんのこと、そのwebpackとかgulpとかいくつかのバンドラーとかタスクランナーに組み込めるプラグインを公式が提供しているので、それをビルド時に利用すればその辺りは解決できそうです。
板垣
なるほど、そんな便利なものがあったんですね。
古川
あるんですよ。なんで、まあそのTailwindに限らないんですけど、CSSフレームワークを導入するってなった時に、結構その未使用のクラスとかモジュールっていうのとの戦いはあるので、その辺りはさっきのPurgeCSSを使ってカバーできるかなと思います。
板垣
なるほど。まあただ未使用CSSもそうなんですけど、聞いてる感じクラス名も沢山付けることになりそうなので、その点もちょっと気になりますね。
古川
まあ確かにそのぱっと見マルチクラス地獄になる感はあるんですけど、たとえばそのTailwind CSSは@applyディレクティブっていう機能を提供していて、まあそのTailwind CSSのユーティリティクラスを使って、ひとつのCSSコンポーネントを作ることっていうのもまあできるみたいです。
なのでマルチクラスがちょっと…っていう方は、まあその機能を利用してみるのもいいんじゃないかなって思うと、もしくはコンポーネント化しちゃえばその辺りは解決するかなと思います。
板垣
なるほど。ということはCSSフレームワーク単体で使うっていうよりは、何か他の技術と組み合わせて使うことが前提としてある感じなんですかね。
古川
そうみたいですね。
板垣
まあその点でいうと最近のJSフレームワークとかと結構似てますね。
古川
うーんそうですね。
板垣
ありがとうございます。と、ここまでいくつかCSSフレームワークについて話を聞かせてもらったんですけど、古川さんは現在の主流のCSSフレームワークを見回してみてどんな印象を持ってますか？
古川
うーん、まあそのCSSフレームワークって結構成熟してきてる印象を自分は持っていて、そのなんていうか数もそうなんですけど、Webサイトで使いたい機能はこのラインナップだよねみたいなそういうのも出揃ってるのかなって思います。で、そんなレッドオーシャンの中で、今生き残ってるフレームワークはやっぱり学ぶところが多いなと感じてます。
板垣
はい。
古川
で、たとえば、そのBootstrapは積み上げてきた実績と信頼っていうアドバンテージがあると思うんですけど。
板垣
そうですね。
古川
まあやっぱりその、そのままだと後発のフレームワークに負けてしまうので、進化っていうのは絶対必須ですよね。で、直近で言うとその最近アルファ版がリリースされたバージョン5からは、ダークモードの対応がされていたり、あとはjQueryの廃止、あとはIEのサポート終了、っていったその時流に合わせた進化をしているようです。
で、同時にサポートの範囲の取捨選択っていうのは、その長くメンテナンスを続けていくためにコストをかけるとこっていうのも見極めてるって言う感じかなと思います。
板垣
そのjQueryの廃止とかIEのサポート終了みたいなのって、結構大きな決断だなあと思いましたね。
そうやってBootstrapみたいな古株がこう進化していく中で、Tailwind CSSみたいな新興フレームワークっていうのは、命名だったり、コンセプトだったり、はたまたこう軽量みたいなところ、要はほかとは違った、特徴がないと生き残れないっていうことですよね。
古川
まあそうですね。あとはその今後生き残っていくにあたってやっぱりReactとかVueとかその辺りのフレームワークとの相性って必須だなと思っていて、まあさっきも話に出たんですけどTailwind CSSだったりとか、最近のその新興のフレームワークはまあそのあたりを意識した作りになってるのかなーと思います。
板垣
そうですね、それで言うとこうユーティリティ型はさっき出たクラス問題があると思うので、クラスに増減があった時とかそのコンポーネントが使用されているページすべてこう変更加えないといけないみたいな手間が発生しちゃうと思うので、とくにこのWebコンポーネント系のJSフレームワークを意識して作られてるし、作らないといけないんだろうなとは思いますね。
古川
そうですね。
板垣
ということでですね、ここまで古川さんとCSSフレームワークについて話してきたわけですけれども、古川さんいかがでしたか。
古川
はい。えーまあ飽和状態にあるかなと思えるフレームワークなんですけど、きっとまだ、その見つかっていないような新たなアプローチっていうのは、まだまだあるのかなと思ってます。で、それでいえば今後のCSSの動向を探りたい方は、「The State Of CSS」っていうサイトを見てみることをおススメします。で、このサイトでは去年からCSSの使用状況の調査を行っていて、その年に人気だったCSSフレームワークだったりとか、あとはデザインパターンだったりとか、色々なその調査結果を見ることができます。
で、現在その2020年の調査も受付中みたいなので、あわせて調査協力をするのもいいかなと思います。
板垣
なるほど。僕も投票しに行きます。
古川
はい。ぜひ行ってみてください。
板垣
わかりました。
ということでですね最後になりますけれども、ミツエーリンクスではですねスマートなコミュニケーションデザインしたいUIデザイナー、UI開発者を募集しております。採用サイトではオンライン説明会やオンライン面接なども行なっていますので、チェックしてみてください。また、このポッドキャストはApple Podcast、Google Podcast、Spotifyで配信していますのでお好みのプラットフォームでフォローいただけると最新のエピソードをすぐ視聴できます。こちらもぜひご活用ください。
それでは古川さん本日はありがとうございました。
古川
はい！ありがとうございました。