CSSのフレームワークについて書いてみる

 本記事は、TUT(愛知とか中国とかフィンランドにない方)の田胡研究室で行っているアドベントカレンダー10日目の記事になります。

adventar.org

 実質的に人生初の記事です。

 家庭の事情により土曜日がつぶれたため、予定よりも記事の規模を縮小してお送りします。予定を聞いていた方々、ごめんなさい。

 所詮、tg研技術力ランキングワースト1を全速力で突っ走っている私の記事なので、あまり期待しないでください。

前置き:CSSフレームワークって?

 ご存知の方は、飛ばしてください

 正直な話、この記事を見ているであろうtg研の方々は、cssフレームワークって何なのかなんて話は必要としていないと思います。ですが、某デスソースの申し子の方がbootstrapの存在を知らなかったので、念のため説明しようかと思います。(あれ、なんでrailsチュートリアル終わってるのにBootstrapを知らなかったんだろう?)

 

 cssフレームワークとは、その名の通りCSSフレームワークです。以上。

 

 ……冗談です。いや、これ以上の説明は必要ないと思いますが、これじゃ説明不足なのでもう少し書きます。

 ここでのフレームワークとは、ソフトウェアフレームワークのことを指します。ソフトウェアの骨組みという名前の通り、ソフトウェアの一般的な機能を用意した……ちょっと違いますが、イメージ的にはお手軽なAPIみたいなものです。

 例を挙げてみましょう。
 例えば、私がとあるページのnavbarを作りたいと考えたとします。例なので機能は最低限、タイトルが出て、適当な背景色がついているだけのものを書くとしましょう
 そうなった場合、最初に書き始める部分はおそらくhtmlでしょう。

<nav>
  <a class="background-black" href="/">Navbar</a>
</nav>

こんな感じかな? 最低限だけのって考えると、たぶんこんな感じです。
そして、このあとcssの方に背景色と、テキストの大きさやら字体やら何やらの設定を書いてそれで完成ってところになると思います。

 では、次にcssフレームワークを導入した状態で書く場合どうなるでしょうか。
この例では、bootstrapというフレームワークを使用しているとして記述します。
 では、まずhtmlを記述します。

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="/">Navbar</a>
</nav>

 次に……いえ、次はありません。これで終わりです。

 特にこだわりがなければ、cssも何も書く必要がありません。これで終わりです。

 ん? そんなに労力変わってなくない?

 そう思う人もいるかもしれません。実際、この三行程度だとそこまで大きく変化はないと思います。せいぜい、ページを移動しなくて楽かな? 程度でしょう。

 ですが、これが何百行ものコードになるとどうなるでしょうか。CSSに膨大な記述をするのは見にくく醜くなりますし、非常に非効率です。

 ですが、フレームワークを使用すれば、そんなコードから解放されます。比較的見やすくてきれいなコードで、効率も上がります。

 まあ、何を言いたいのかと言えば、フレームワークは凄いよってことです。

 

Bootstrapに代わるCSSフレームワークを探してみる。

 ここからが、本題になります。

 CSSフレームワークって何使う?

 そう聞けば、tg研の人場合は最低でも50%位の人がBootstrapを使うと答えるでしょう*1。Bootstrapは、それくらい有名で便利なCSSフレームワークです。

 しかし、時にはBootstrap以外を書きたいということもあるでしょう。その場合の選択肢についてここでは書きたいと思います。

 というか、Bootstrapが重いからとか具体的な理由がない限り、つまり気分で変えたい時って、実質的にほぼ二択ですよね。

 Foundation

 まずは、Foundation. ZURBの提供しているフレームワークです。

f:id:MiyaFubu:20171210182935p:plain

 The most advanced responsive front-end framework in the world. | Foundation

 最新のバージョンは6.4.2 gemも存在するのでrailsでも手軽に使えます。

 おそらく、Bootstrap以外を考えた時に真っ先に上がる候補はこれではないでしょうか。

 Bootstrap並みに豊富な機能と、書きやすさ。デザインもBootstrapぽくないので、Bootstrap臭がするページはもう嫌だ! という人にはいいかもしれません。

 ただし、普通に使う分には特に問題ありませんが、tg研で流行っているruby on railsにてこれを使いたい場合、少し問題があります。詳しくは後で。

 Semantic UI

 次に提案するのは、Semantic UIです。

f:id:MiyaFubu:20171210184355p:plain

 Semantic UI

 最新は2.2.13 これにもgemがもあります。

 semanticの名前通り、非常にわかりやすいです。

 機能はBootstrapやFoundationには劣りますが、十分に揃えられています。公式docが複数言語にある程度対応しているので、元々の機能が明瞭なのにのも相まって慣れていない人にもわかりやすいです。

で、結局どっちがいいの?

 Bootstrapを使いこなしている方には、Foundationがいいのではないかと思います。

 逆に、フレームワークってなんぞ? という人には、Semantic-UIを推します。Bootstrapよりも推します。機能面だけではなく検索しやすさでも、わかりやすさはSemantic UIが一番ではないでしょうか*2

 

 また、わかりやすさ以外にもSemantic UIを推すのには理由があります。正確には、【Foundationを推さない理由】ですが。

 実は、Foundationのgem 'foundation-rails'は、使用するにあたって致命的な欠陥を抱えています。なんとこのgem、JSがどっかで干渉を起こしているらしく、単純にインストールしただけだと一部機能(ドロップダウンなど)が正常に動作しないという不具合を抱えています。

 一応、色々弄れば何とかなりますが、何とかするのは大変です。

 tg研3年生のrails使用率を考えると、foundationを使用する際の環境はかなりの確率でrailsでしょう。その場合、多数の死傷者が出ると予想されます。

 というわけで、素直にBootstrapかSemantic UIを使いましょう。

 

終わりに

 以上で、本記事を閉めさせていただきます。かなりグダグダでごめんなさい。自分の技術力と文章構成能力のなさに、穴に入りたいばかりです。

 明日のアドベントカレンダーは、偉大なるlu_iskunさんです。なんでも、幣研で楽をする方法だとか。とても楽しみです。

 

*1:偏見です。実際に調査したわけではありません

*2:意見には個人差があります