その案件、本当にBootstrapが必要ですか？
TAK(@tak_dcxi)です。今回はTwitterでちょくちょく話題になるBootstrapについて。
Bootstrapは非常に便利なフレームワークで、使いようによっては極めて高いコストパフォーマンスを発揮できるツールなのですが、適材適所という言葉があるように明らかにBootstrap向きではない案件でBootstrapを使ってコストパフォーマンスを高めるどころか運用コストを高めているような現場を何度か見てきました。
今回はBootstrapが適する案件と適さない案件について、またBootstrapを利用する上で気をつけたいことなど、個人的に思うことを纏めていこうかと。
Bootstrapが向いている案件と向いていない案件
いきなり結論ですが、僕が思うBootstrapが向いている案件・向いていない案件は以下のとおりです。
Bootstrapが向いている案件
- 開発にかけられる時間が極めて少ない案件
- 管理画面のように見た目のオリジナリティが求められない案件
- 開発においてデザイナーがいないような案件
- マークアップに精通した人がいない案件(サーバーサイドの人がCSSを書くような案件)
納期などで開発に掛けられる時間が極端に少ない、工期短縮ファーストな案件ではデザインは整っていれば良いって場合も多く、初めから整ったデザインが用意されているBootstrapを利用するのは良い選択肢でしょう。
また、管理画面やBtoBのシステムのようにオリジナリティ溢れるデザイン性が求められにくい案件でもBootstrapの利用はベターだと思います。
具体的に言えば path/to/bootstrap/scss/_variables.scss で参照できる変数を弄ればデザイン面はOKだったり、コーディング規約をBootstrapのそれに寄せられるような場合はBootstrapの導入によるコストパフォーマンスは高いです。
そして、何かサービスを立ち上げる際にデザイナーがアサインされていない場合や、マークアップに精通していない人がCSSを書かざるを得ないような場合もデザインが整っていて、かつある程度のコーディング規約が担保されているBootstrapを利用したほうが賢明だと思います。
こういった事情からWebシステムの開発現場ではBootstrapは重宝されている印象ですし、とても理に適った利用方法だと思います。
Bootstrapが向いていない案件
- CSSフレームワークの範疇を超えた複雑なデザイン
- ページのデザインに一貫性がないような案件
- ピクセルパーフェクトが求められるような案件
- スマホ、タブレット、デスクトップでデザインが大きく異なるような案件
まとめると、Web制作のように独自のCSSをガンガン書かないといけないような案件ではBootstrapは向かないことが多いです。
こういったデザインを実装するとなったらBootstrapを導入したところで恩恵は少なく、むしろBootstrapの持つシステムや規約が足枷になってしまう可能性が高いためです。
Bootstrapの懸念点はここであり、どこで吹き込まれたのかは知りませんが「BootstrapはWebサイトを爆速で制作できる素晴らしいツールだ！」と意気込み、明らかにBootstrapが向いていないような案件にBootstrapを突っ込み、Bootstrapのルールとオレオレルールが混ざり合いカオス化して収集がつかないような状況に陥っているのを何度か目撃してきました。破綻の度合いで言えばフルスクラッチのそれよりも深刻な場合が多かったです。
Bootstrapを使う上で気をつけること
個人的主観ですが、Bootstrapを使う上で気をつけたほうがいいことのまとめです。
Bootstrapの利用を前提としたワイヤーフレームとデザインの制作を依頼する
ディレクターとデザイナーにBootstrapの画面設計について認識・共有させてBootstrapの利用を前提としたワイヤーフレームとデザインの制作を依頼しましょう。
ディレクターやデザイナーの方がBootstrapに対して深い知見を持っていることが理想ですが、現実は難しいので実装者の方はディレクターとデザイナーにBootstrapを用いた画面設計の仕様や制限についてすり合わせる必要があります。
Bootstrapの制約に沿ったデザインをしないと独自のCSSの量が多くなり、Bootstrapのメリットを享受できなくなります。当然、Bootstrapの利用を考慮していないワイヤーフレームやデザインカンプが上がってきた場合は差し戻しなどで工数が取られることもあるでしょう。
Bootstrapが持つ機能以上のことはなるべくやらない
できるだけ実装はBootstrapの機能で完結できることが理想です。
コンポーネントは用意されているものを使い、_variables.scssで参照できる変数を弄れば目的を達成できるならそれを弄ってそれ以上のことはやらない。marginやpaddingやtext-alignはBootstrap付属のユーティリティクラスを用いるなど。
独自の機能が増えれば増えるほど破綻のリスクは上がり、比例するように運用コストも上がり続けます。
Bootstrapの範疇を超えた実装についてはその規約を明確にしておく
「Bootstrapの機能以上のことはするな」と言われても現実は独自のカスタムが必要になることは多いです。むしろカスタムのいらないBootstrapのほうが少ない気がします。
独自の機能を追加する場合はBootstrapの規約の範疇では収まらないので、機能の仕様（追加方針など）や命名規則、どのディレクトリで管理するかといった規約をしっかり決めてチーム内で共有する必要があります。ここを怠ると運用や改修で実装者のオレオレ流が積み重なり、ルールが混沌化する恐れがあるからです。
つまり、コーディング規約をBootstrapのそれに丸投げするのは危険ということです。Bootstrapのコーディング規約に則った上で、Bootstrapの範疇を超えた実装が必要になった時にどうするか？をドキュメントとして纏めておく必要があります。
Bootstrapの効果的な使い方
実装において「Bootstrapのグリッドシステムだけ使いたい」とか「Bootstrapのヘッダーコンポーネントを使いたい」って場面はあると思います。
そういった場合はBootstrapを全部持ってくるのではなく、パーシャルで一部の機能だけ切り取って持ってくるようにしましょう。BootstrapのSassファイルはコンポーネント毎にしっかり分割されているので目的に応じたものだけを持ってくればOKです。
■参考記事：
Bootstrap 4を使うならSassを使って3倍幸せになろう - Qiita
Bootstrapを学ぼうとしている初学者の方へ
BootstrapはWeb初学者でも使えるみたいな風潮が強いですが、Bootstrapを効率的に使うための学習コストは高いです。
例えばHTMLとCSSとjQueryの基礎を学んだらBootstrapを学んで爆速でWeb制作！みたいなロードマップがありますが、Bootstrapをバリバリ使いこなすとなったらSassの知識とSassをコンパイルできる環境の準備は必要です。もちろん、Sassを知らなくてもBootstrapは使えますが、効率性で言ったらライターがあるのに木の板に摩擦で火を起こそうとしているのと同じレベルで違いはあります。
また、Bootstrapのコーディング規約やBootstrapのCSS設計法、コンポーネントの仕組みなど覚えることが盛りだくさんです。そして何より重要なことですが、もし志望がWebサービス開発ではなくWebサイトを作ることだった場合、Bootstrapの学習は徒労に終わることが多いです。Web制作ではBootstrapを使う現場のほうがマイノリティーです。それにCSSフレームワークはBulmaとか今は人気ですし、Bootstrapだけが選択肢ではない時代です。
HTMLとCSSを学んでBootstrapを学んで仕事を探そう！ではなく、仕事を見つけてそこでBootstrapを使うようだったらBootstrapを学習すればいいのです。時間は有限なのでBootstrapを学習する時間を他の知識を身につける時間に充てたほうが有意義ではないでしょうか。それに、フルスクラッチで書けるスキルを身に着けていればどんなCSSフレームワークも早く飲み込めるはずです。
おわりに
ここまでBootstrapのネガティブな面ばかりを挙げてきましたが、Bootstrapは理に適った使い方をすれば圧倒的に工数削減できたりコスパを高めることのできる素晴らしいツールです。問題なのはBootstrapが合わないような件でも無理やり使おうとする人間の方です…。これに関してはBootstrapだけではなく、他のJSのフレームワークなどにも言えることだと思います。
ちなみに、ここで挙げたことは最近流行りのNoCodeにも同じようなことが言えると思います。NoCodeも理に適った使い方をすれば圧倒的に実装を楽にできますが、明らかに不適切な案件でも流行りだからといって無理やり使おうとしている事案を目撃したりします。
職業病なのかは分かりませんが、Web業界ではよく目的と手段が逆転してしまいがちなので、目的が何なのかをしっかりと考えてそれにあった手段（フレームワークやライブラリ）を使ったほうがいいと思いますよ。（自戒）
Discussion