初めに
今回の記事は、『RUNTEQ Advent Calendar 2023』の9日目に参加しております。
皆さん、お疲れさマッチョです💪
現在、プログラミングスクールにて学習をしている “のぞみ” です。
私は現在、未経験からのエンジニア転職に向けて今年の4月から本格的に学習をスタートし、現在8ヶ月目に突入しております。
今回、Webアプリケーションの個人開発を進めている際に、気になった点があり深掘りする機会がありましたので、技術記事を書かせていただきました。
概要
私は先日、アプリの技術選定を行っている際に「CSSフレームワークって色々あるけど、一体何が違うんやろうか？」と、ふと疑問に思いました。
皆さんの中にも、技術選定を行う際にどのフレームワークを使用するのが良いのか悩んだ事があるのでは無いでしょうか？
今回は、そのようにふと疑問に感じた内容について自分なりに深掘りを行い、各CSSフレームワークについて纏めてみました。
もしこれからアプリ開発を行うにあたって技術選定に取り掛かっていく方、普段使用しているフレームワークにどのような特徴があるか知りたい方は、是非こちらの記事を参考にしてみていただければと思います！
注意点
今回の記事は、プログラミング初学者が作成した記事となっています。
その為、一部内容に誤りがある場合がございますのでご了承下さい。
もし誤りに気づかれた際は、コメント等でご教授いただけると助かります🙇♂️
CSSフレームワークとは？
ではまず、『CSSフレームワーク』が何なのかについて、簡単に説明を行いたいと思います。
『CSSフレームワーク』とは、簡単に言うと「Webページ上で使用する部品のツールボックス」と思っていただければ大丈夫です。
Web上で動作するサイト・アプリケーションを作成する際は、本来なら考えているデザイン案に沿ってCSSで見た目を指定して、使用する部品を一つづつ組み立ていくようにしなければいけません。
ですが、フレームワークを使うことによって既に用意済みのパーツを使用する事が出来るので、その作業を省略する事が出来ます。
既に容姿されている部品の中から、自分の使いたいものを選んで直ぐに使用する事が出来るのは凄く便利ですよね😎
メリット・デメリットについて
では、『CSSフレームワーク』についてざっくり理解出来たところで、次はCSSフレームワークを使用するメリットについて説明していきたいと思います。
メリット
１. コーディング時間の短縮
例えば下記画像のようばボタンを作成したいとしましょう。
上記のようなボタンを作成する場合、CSSフレームワークを使用する場合と使用しない場合だとそれぞれ以下の方法があります。
※ CSSフレームワークは『Bootstrap』を導入しているものとして説明します。
《Bootstrapを使用する場合》
<button type="button" class="btn btn-primary">Banana ボタン</button>
上記だと、class="btn btn-primary"の部分でbtn btn-primaryというクラスを指定している事になります。
Bootstrapでは、クラスに既にスタイルや色などが定義されているので、viewでこのクラスを呼び出す事で簡単にボタンを作成する事が出来る、という仕組みになっています。
簡単に言いますと『btn btn-primary = 青色のボタン』というように既に決められている、という事です。
《CSSフレームワークを使用しない場合》
.btn-custom {
background-color: #007bff; /* Bootstrapのプライマリカラー */
color: white;
border: 1px solid #007bff;
padding: 0.375rem 0.75rem;
border-radius: 0.25rem;
font-size: 1rem;
line-height: 1.5;
transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
text-align: center;
vertical-align: middle;
user-select: none;
touch-action: manipulation;
cursor: pointer;
}
.btn-custom:hover {
background-color: #0069d9; /* ホバー時の暗い青 */
border-color: #0062cc;
}
<button type="button" class="btn-custom">Banana ボタン</button>
上記だと、まずCSSファイルに使用したいボタンの『スタイル・色・ボタンの大きさ・カーソルホバー時の色…..etc』などについて全て定義しなければいけません。
そして、定義したクラス（上記だと.btn-custom・.btn-custom:hover）をviewで呼び出す事でボタンを作成する事が出来ます。
このように、CSSフレームワークを使用しない場合は、自分で部品のスタイルや色などをクラスで定義しておかないといけないので、コーディングする時間が掛かってしまいます….。
CSSフレームワークを使用すれば、自分が使用したい部品のクラスをViewで呼び出すだけなのでコーディングの時間短縮に繋がります！
２. デザインの一貫性
先ほども説明したように、CSSフレームワークでは既に部品のスタイルや色が定義されています。
そのため、Webアプリのデザインに一貫性を持たせるのがかなり楽になります。
自分でCSSファイルにクラスを定義するとなるとかなり時間が掛かりますし、少しのコーディングの違いで見た目も変わりますのでデザインの一貫性が難しくなってしまいますね....😅
デメリット
１. デザインが似たり寄ったりになる可能性
先ほども説明したように、CSSフレームワークでは既に部品のスタイルや色が定義されているので、簡単に求めている部品を使用する事が出来ます。
ただ、逆を返せば誰でも簡単に使用できるので、Webアプリがそのフレームワーク特有のデザインになってしまい、他のウェブアプリと似たようなデザインになってしまう可能性があります....。
ですが、CSSフレームワークの殆どは既に定義済みのクラスを自分でカスタマイズする事が出来るので、このデメリットに関しては個人的に気にする必要は無いかと思います☺️
２. カスタマイズの難しさ
先ほどのカスタマイズの話と付随するのですが....。
フレームワークの部品を自分でカスタマイズする際に、基本的なスタイルから大きく逸脱するカスタマイズを試みると、予期せぬ問題や複雑さに直面することがあります….。
なので、新しくフレームワークを使用したりカスタマイズを試みる時はそ、のフレームワーク特有のクラス名、コンポーネント、コンベンションなどを学ぶ必要があるので、少々難易度が上がります。
代表的なCSSフレームワークの説明
ではここからは、一般的によく使われているCSSフレームワークについて、それぞれ説明したいと思います。
１. Bootstrap
CSSフレームワークで言うと、一番よく聞くのはこの『Bootstrap』では無いでしょうか？
私も、学習中に一番触っているのはこの『Bootstrap』です。笑
この『Bootstrap』の特徴として一番強いのは「レスポンシブ対応が簡単」だという部分です。
レスポンシブ対応とは、ウェブサイトやウェブアプリが様々なデバイスや画面サイズに合わせて、きちんと表示されるようにする事です。
例えば、『スマートフォン・タブレット・デスクトップ』これらのデバイスはそれぞれ画面の大きさが違いますよね？
レスポンシブ対応をしていないと、例えば「デスクトップだと綺麗にレイアウトが表示されるのに、スマートフォンだと崩れて表示される….。」といった問題が起きちゃうんです….。
しかし、レスポンシブ対応をしておくと、それぞれのデバイスで見やすいようにwebページのレイアウトが自動的に調整されるようになります。
Bootstrapはこの、『レスポンシブ対応』の設定を簡単に行う事が出来るんです！
正確には、レスポンシブ対応を行うための『レスポンシブグリッドシステム』や『メディアクエリ』が既に組み込まれているので、扱うデバイスによって自動的に対応してくれる、という仕組みになっています。
普通であれば、閲覧する端末に合わせて Web ページをそれぞれ開発する必要があったのですが、Bootstrap を使用すれば1つのページで全ての端末に対応できるので、作業を大幅に効率化する事が出来ます。
↓ Bootstrapのドキュメントはこちら
２. Tailwind CSS
『Tailwind CSS』は、ユーティリティファーストのCSSフレームワークになっています。
「ユーティリティファーストって何や？？」と思われた方も多いと思いますので、少し説明したいと思います。
ユーティリティファーストとは、多数の用途特化なユーティリティクラスを組み合わせてスタイリングする方式の事です。
と言っても少々難しいですよね。笑<
簡単に言うならば、「事細かく定義されているクラスを、view側で複数組み合わせる。」と解釈してもらって大丈夫です！
ユーティリティクラスというのが、『margin・pudding・フォントサイズ・色…etc』これら個々のスタイル要素に対して特化した小さなクラスの事です。
これらのクラスをHTML内で組み合わせて、必要なデザインを自分で作成するのがユーティリティファーストです。
例えば、先ほど説明した《Bootstrapを使用する場合》のボタンを『Tailwind CSS』で実装するなら下記のコードになります。
<button type="button" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Banana ボタン
</button>
Bootstrapを使用する場合と比べると、「えっ、なんか複雑そう…。」って思われるかもしれませんが、慣れると全く難しくありませんのでご心配なく。笑
上記のクラスを紐解くと以下の通りになります。
-
bg-blue-500: ボタンの背景色を青色系の特定の色に設定。 -
hover:bg-blue-700: ホバー時に背景色をより暗い青色に変更。 -
text-white: ボタンのテキストを白色に設定。 -
font-bold: フォントを太字に設定。 -
py-2: 縦方向（Y軸）のパディングを設定。 -
px-4: 横方向（X軸）のパディングを設定。 -
rounded: ボタンの角を丸くする。
このように、Bootstrapに比べるとかなり細かくクラスが分かれていて、それらを複数組み合わせる事でボタンを実装していることが分かります。
つまり、『Tailwind CSS』の強みとしては、クラスの組み合わせ方が他のフレームワークに比べ多数存在するので、カスタマイズ性に長けているというところです。
また、CSSファイルに定義するのではなくHTML内で組み合わせをするので、CSSファイルを行ったり来たりする必要が無くなります。なので、コーディング時間の削減やコードの管理がしやすくなると言った利点が存在します。
↓ Tailwind CSSのドキュメントはこちら
３. Foundation
『Foundation』は、ZURBによって開発された高度にカスタマイズ可能なフロントエンドフレームワークです。主にプロフェッショナルなウェブデザインとアプリケーションの開発に使われています。
『Foundation』は、CSSフレームワークの中でも高い人気を集めており『Bootstrap』に次ぐほどと言われているそうです。
人気の理由として調べてみたところ、カスタマイズ性が高くデザインを大幅に高速化できるという点が出てきています。また、どのデバイスでも見栄えする応答性の高いWebサイト・アプリ・電子メールなどを簡単に設計出来るという点も人気の一つのようです。
ちなみに、信頼できる実績として「Facebook」「Yahoo!」などの世界的な有名企業もFoundationを利用しているそうなので、そこも人気の一つなのでは無いかと思います🤔
↓ Foundationのドキュメントはこちら
４. Bulma
『Bulma』は、Flexboxに基づいたモダンなCSSフレームワークで、シンプルで読みやすい構文が特徴です。
『Bulma』は、CSSのみで構成されているのでJavaScriptを必要としません。その為、動作が早いという特徴があります。
基本的にBootstrapやTailwindCSSなどのCSSフレームワークは、JavaScriptの読み込みが必要になってくるのですが、BulmaはCSSファイルをWebページに組み込むだけで手軽に使用する事が出来ます。
また、JavaScriptを使用しないので、React・Vue.js等と組み合わせやすいというのもかなりメリットな要素だと思います。
JavaScriptに依存しないので、Reactやその他のJavaScriptフレームワークやライブラリとの競合がありません。その為、ReactのコンポーネントとBulmaのスタイルをスムーズに統合することが出来ます。
確かに、JavaScriptに依存しているとJavaScriptフレームワーク・ライブラリとの競合性を考慮しないといけないので、そういう意味では『Bulma』を使用すれば開発時間の短縮に繋がりそうです....！🤔
↓ Bulmaのドキュメントはこちら
まとめ
今回は、CSSフレームワークについて深掘りしてみました。
私自身、学習を進めている際にCSSフレームワークは『Bootstrap』に触れる事が多かったのですが、そもそもCSSフレームワークでどのような事が出来て、どういった種類のものがあるのかちゃんと調べた事が無かったです....💦
一通り調べてみた私個人としては、やはり….
- 『Bootstrap』
- 『Tailwind CSS』
上記2点がよく使用されているのかな、と感じました。
ただ、先ほど説明したフレームワークの他にも便利なフレームワークは多数存在するので、自分の開発するwebアプリと相談して決めるような流れで良いと思います！
ちなみに私は現在開発予定のアプリでは、『Tailwind CSS』を使用する予定です🤭