簡単にHTMLが構築できるBootstrap。
CSSが苦手でも、サイトの構築ができるし、テンプレートも多いことからHTMLの雛形として利用しているシステムエンジニアも多いようです。
今回は、同じWEBサイトを構築した場合のBootstrapとフルスクラッチHTMLのメリットとデメリットを比較してみました。
目次
Bootstrapのメリットは何と言っても、WEBサイトを作る上で必要になるjQueryやCSSなどのスタイルがひとまとまりになっていること。
HTML,CSS, jQuery などをそれぞれ準備しなければならなかったものが、Bootstrapのパッケージをダウンロードするだけでひとまとまりにダウンロードが可能。あとは、index.html というファイルを追加してページを作るだけです。
他にも、レスポンシブ対応、ブラウザのリセットやノーマライズなども入っているので、CSSのコードを追加しない限りは、ブラウザごとのレイアウト調整もほとんど必要ありません。
また、利用している人も多いことから、Bootstrapと合わせて使えるテンプレートも数多くリリースされています。
そのため、デザインがわからない、デザインが苦手、あるいはCSSの細かい部分が煩わしいというエンジニアにも広く支持を受けてるようです。
管理画面の設計時にモックアップとして利用する際に重宝した、という話も聞いた事があります。
その一方で、CSSなど、パッケージ内のファイルには、使用しない不要コードも多く含まれるため、必然的にサイトの読み込み速度が遅くなってしまう可能性があります。不要なコードは削ってしまえばOKという方もいるかもしれませんが、どれが必要でどれが不要なのかの選別は、なかなか難しいため、軽量化を目指す場合には、Bootstrapはあまりおすすめできません。
さらに、BootstrapはあらかじめレイアウトのテンプレートがCSSに含まれているので便利なのですが、ある程度の慣れがないと、どのコード(classなど）がどういった適用のされ方をするのか、確認をしながら作業を進める必要があるため、初めて利用をする場合にはさほど便利さを感じない方もいるようです。
まっさらの状態から作り上げるため、何よりも、自由度がダントツに高いという事が一番のメリットです。
また、必要なコードだけを書いていくため、余計なコードが追加されるということもなく、ファイルの軽量化が期待できます。
最近、Google PageSpeed Insights でも読み込みの速いページを上位に表示にするという噂があり、今後読み込み速度はより重要視させるようになってくることも想定されます。
jQueryはJavaScriptの知識がなくとも比較的利用がしやすく、とにかく便利なライブラリなのですが、読み込みがやや重くなりがちなのが難点です。jQueryなしで自分でJavaScriptを追加できるという場合にも、ソースの読み込みを最小限に抑えられるため、速度を重視する場合にはやはりフルスクラッチまたはより軽量化されたバッケージを利用する方が良いでしょう。
ちなみに、BootstrapでjQueryを削除してしまうと、テンプレートに含まれている一部の機能（モバイル表示した際のハンバーガーメニュー表示など）が表示・利用できなくなってしまいます。
ただ、HTMLとCSSの知識が必要である事が構築の最低条件となるため、そこをクリアできない限りはフルスクラッチで構築する方法は難しいでしょう。なお、HTMLやCSSも日進月歩で変更があることなどから、最近ではデザイナーではなく、フロントエンドエンジニアまたはコーダーと呼ばれる専門の技術者が対応することが多くなっています。
上述の点を比較して表にまとめてみました。
| Bootstrap | フルスクラッチ | |
|---|---|---|
| 構築の速さ | ◎ | △ |
| カスタマイズのしやすさ | ○ | ◎ |
| 表示の速さ | △ | ◎ |
ただし、フルスクラッチでもjQuery、Webフォントなどをごっそりと入れてしまうと表示が遅くなるのでご注意ください！
