Bはブートストラップ

オープンソースソフトウェアの歴史と影響力を一文字ずつ紹介する「The ABCs of OSS」へようこそ。ホストのテイラーです。今日はB - Bootstrapに到着しました。

‍

ブートストラップの誕生

TwitterがBootstrapを世に送り出した2011年に話を戻そう。当時、見栄えのするレスポンシブなウェブサイトを構築するのは至難の業でした。デバイスをまたいでサイトを動作させたい場合、プロジェクトごとにCSSを一から手作業で作成する必要がありました。

Bootstrapはそれを一夜にして変えた。

‍

ブートストラップが革命的だった理由

Bootstrapは、開発者に2つの画期的なツールを与えた：

1. 強力なグリッドシステム- レイアウトを行と列に分割し、画面サイズに適応させることができるようになった。
   
2. ナバー、ボタン、モーダル、フォーム、ドロップダウンなど、あらかじめ用意されたスタイルのコンポーネントは、HTMLを数行書くだけですぐに利用できます。
   

プロジェクトごとに車輪を再発明する代わりに、開発者はBootstrapを導入すれば、レスポンシブでプロフェッショナルなサイトを、数週間ではなく数時間で完成させることができます。

覚えておいてほしいのは、ちょうどモバイルファーストデザインがスタンダードになりつつあった頃だということだ。Bootstrapは、CSSの専門家だけでなく、どんな開発者でもモバイル・アクセシビリティを実現できるようにしたのです。

‍

コンポーネント革命

Bootstrapは単に時間を節約しただけでなく、UI開発に対する考え方を再構築しました。そのコンポーネント・システムは、今日のデザイン・システムやモダンなコンポーネント・ライブラリの先駆けとなった。

カードやアラートから ツールチップやテーブルまで、Bootstrapは一般的な要素の見た目や動作を標準化しました。Bootstrapが生み出したウェブ全体の一貫性は、前例のないものでした。

現在、Tailwindや Material UI、カスタムデザインシステムで仕事をしている人でも、Bootstrapが普及させたパターンを使っていることはほぼ間違いないでしょう。

‍

マイナス面ブートストラップ疲れ

もちろん、Bootstrapは完璧ではありませんでした。特にデザイナーは、「Bootstrap疲れ」の日々を覚えています。みんなが同じデフォルトスタイルを使っていたため、どのサイトもほとんど同じに見えたのです。

また、Flexboxや CSS Gridのような最新のCSS機能により、Bootstrapのレイアウト・ユーティリティの一部は、かつてほど必要ではなくなりました。それでも、その影響力は否定できません。

‍

ブートストラップの永続的なインパクト

Bootstrapは、デザインシステムは見た目だけの問題ではなく、効率性、一貫性、生産性の問題であることを業界に教えました。ブラウザのバグやレイアウトのハック、IEとChromeでドロップダウンメニューを同じように動作させようとする無駄な時間を避けることができました。

その遺産は明らかだ：

• グリッドベースのレイアウトは今や当たり前。
  
• 再利用可能なコンポーネントは、ReactやVueのようなフレームワークの基盤だ。
  
• 設計システムは、ソフトウェア開発における標準的な慣行となっている。
  

Bootstrapは、もはやブロック上で最もホットなツールではないかもしれないが、そのDNAは現代のフロントエンド開発のいたるところにある。

‍

まとめ

以上、BはBootstrap、つまりウェブのレスポンシブ化、一貫性、そして美しさを実現したフレームワークについてでした。

次回は、Cの「コンプライアンス」を取り上げます。そう、SOC 2、GDPR、そしてエンジニアと法務チームを悩ませるあらゆる規制上の課題についてです。

それまでは、コードをきれいに保ち、依存関係を更新しておくこと。