Bootstrapとは
BootstrapはTwitter社が開発したフロントエンド開発で利用するCSSフレームワークです。標準でレスポンシブ対応し、豊富な機能やデザインを提供しており、Webサイト・Webアプリを簡単かつ効率的に実装できます。Bootstrapは2010年頃に開発されてから今現在までアップデートされ続けています。OSS（オープンソースソフトウェア）として公開されており、世界中で利用されています。
フロントエンド開発とは
HTML・CSS・JavaScriptを用いたUI（ユーザインタフェース）部分の開発。
Bootstrapが生まれた背景
モバイルファースト
昨今、スマートフォンが広く普及したことで、ブラウザもスマホからの利用も多くなったため、スマホ向けのWebページ開発が主流になりました。
高速開発
WebサイトやWebアプリもリリース・改善のスピードが求められるようになり、開発側は素早い改善が求められるようになりました。その問題を解決するのに「Bootstrap」などのフレームワークが生まれました。フレームワークを使うことで開発者もクリエイティブな部分に時間を割けるようになり、クオリティを追求できるようになりました。
Bootstrapの特徴
用途の幅が広い
Bootstrapは個人ブログ用の小規模な開発から企業のWebサイトやWebアプリといったや大規模な開発まで幅広く対応しています。
レスポンシブWebデザイン対応
PC・スマートフォン・タブレットなど、閲覧する端末ごとに画面幅やレイアウトを自動で調整する方法をレスポンシブデザインといいます。以前はPC用、スマホ用…といったようにデバイスごとの開発が必要でしたが、標準でレスポンシブ対応するBootstrapの登場によって、表示を最適化されるので、デバイスの種類ごとに開発したり調整したりする手間が省けて開発を効率的に進められるようになりました。また、UI/UXデザインも工夫されているのでユーザにとっても見やすく使いやすいものになります。
グリッドシステム
Bootstrapには画面レイアウトを作るのに便利な「グリッドシステム」というシステムがあります。横幅を12分割した数字を入れてHTML要素を配置することで簡単にレスポンシブ対応デザインのWebサイトを構築できます。
デザイン性が高い
Bootstrapには、有料のものから無料のものまで、豊富なテーマやテンプレートが用意されています。Webページでよく用いられるフォームやボタン、メニューなどデザイン部品が豊富に用意されており、これを利用すればスタイルの調整も最低限で済みます。用意されたもののからサイトイメージに合うものを選べば、Web開発初心者でも簡単にデザイン性の高いWebサイトを構築できます。
簡単に扱える
BootstrapはHTML・CSS初心者やデザインの知識がない人でも簡単に扱えて一定のクオリティになるよう設計されています。使い方や操作方法も公式サイトでも解説があるのでそれをコピペして使うことができます。それを利用し、テンプレートで大枠を作ってから、CSSでオリジナリティを出すといったこともできます。
Bootstrapの注意点
カスタマイズには知識が必要である
Bootstrapでは多くのテンプレートやテーマが提供されており、プログラミングやデザインの知識がない人でも一定のクオリティが担保されたWebサイトを制作できます。しかし、独自性を持たせるにはカスタマイズが不可欠で、それにはCSSやJavaScriptなどの一定の知識が必要になります。
機能を多く詰め込む開発には不向き
Bootstrapはシンプルな機能やデザインで効率的に開発されために生まれたフレームワークです。多くの機能や凝ったデザインのアプリ開発などには適さないので他の開発ツールを検討する必要があります。
Bootstrapの種類
Bootstrapは機能が拡張されていくつかの種類が存在します。なかでも有名なものを4つ紹介します。
Twitter Bootstrap
Twitter BootstrapはTwitter社が初期に開発したBootstrapです。その後、オープンソース化したことで「Twitter Bootstrap」から「Bootstrap」に名称が変更されました。通常、「Bootstrap」はTwitter Bootstrapを指すことが多く、これをベースに多くの派生バージョンが開発されています。
Angular directives for Bootstrap
Angular directives for Bootstrapは、JavaScriptフレームワーク「AngularJS」と連携できるBootstrapです。AngularJSは大規模なアプリ開発向きのフレームワークで通常、ほかのフレームワークと干渉を起こしやすいですが、Angular directive for Bootstrapとは干渉することなく併用できます。
Bootstrap Themes
Bootstrap Themesは、デザイン性の高いテンプレートが販売されているBootstrapの公式テーマです。カスタマイズして独自性の高いWebサイトを構築できます。有名なものでは「Now UI Kit」や「Material Design for Bootstrap 4」などがあります。
BootstrapWP
BootstrapWPは、ブログ作成ツールとして世界的にシェアの高いWordPress用にカスタマイズされたBootstrapです。WordPressと併用することで、デザイン性の優れたWebサイトを作成できます。
