BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース Bootstrap 4がリリース、しかしその必要性に疑問も

Bootstrap 4がリリース、しかしその必要性に疑問も

ブックマーク

原文(投稿日:2018/01/22)へのリンク

読者の皆様へ: あなたのリクエストに応じて、大切な情報を見逃すことなく、ノイズを減らす機能を開発しました。お気に入りのトピックを選択して、メールとウェブで通知をもらいましょう

3年の開発期間を経て、フロントエンドフレームワークのBootstrap 4がリリースされた。しかしながら、Mark Otto氏が最初にコミットしていた頃とはWebの世界がまったく変わっていることから、その必要性には疑問が持たれている。

バージョン4のおもな機能は次のようなものだ。

  • グリッドシステムの改良(デフォルトでFlexboxがオン)
  • Sassの使用(Lessに代えて)
  • IE8、IE9、iOS 6のサポート終了
  • JavaScriptプラグインの書き直し
  • pxに代えてremを使用

バージョン3からアップグレードする場合はテストと、場合によっては問題点の修正が必要になる。大部分は無変更で動作するが、互換性のない変更もあるため、異なる部分を一覧にした移行ガイドが用意されている。

Bootstrapの持つアドバンテージのひとつはグリッドシステムだ。このシステムでは、グリッドシステム内での宣言的な方法によるコンテントのレンダリングによって、デスクトップからモバイルへのコンテントへの移行が、不要なトリックなしで可能になる。Bootstrap 4のグリッドシステムの使用するflexboxは、現在のWebブラウザのほぼすべてでサポートされている。この機能を使用していることが、IE10以降およびiOS7以降のみがサポート対象となっている理由のひとつだ。プロジェクトでレガシブラウザのサポートが必要な場合には、Bootstrap 3を引き続き使用する必要があるが、Bootstrap 3のメンテナンスは2016年に終了している

2011年にTwitterのプロダクトとしてリリースされたBootstrapは、“世界で最も普及したHTML、CSS、JSライブラリ”を自認するが、その成長はすでに頂点を越えたようだ。Dan Tao氏を始めとする一部の人々は、結合性の高さとセマンティックの欠如についてBootstrapを批判している

当初は素晴らしいビルディングブロックのセットに思えたものが、今では技術的負債の山に変わり始めています。HTMLには、Bootstrap特有の属性で深くネストした構造が散乱しています。

最初のアルファ版は2015年8月にリリースされたが、ベータ版がリリースされたのはその2年後だ。しかしながらBootstrap 4は、もはや必要とされない時に完成したのではないだろうか?グリッドシステムは最大の特徴のひとつだが、主流のブラウザでCSS Grid採用されたことにより、Bootstrap 4の新しいflexboxベースにグリッドはもはや時代遅れになっている。

New York TimesのソフトウェアエンジニアであるNatalya Shelburne氏は、今後の主流はCSS Gridだと述べている

CSS Gridはハックではなく、Web用の正式なレイアウトツールです。何もインストールする必要はありませんし、プリプロセッサも必要ありません。動作方法を理解するために、あれこれと頭をひねる必要もないのです。

さらに加えて、ReactやVue.jsで多用されるようなコンポーネントベースのスタイリング技術を使用すれば、従来の“global CSS”テクニックは不要になる、とRyan Oglesby氏は言う。

ReactやVue.jsのようなUIライブラリの支援によって、最近のWebアプリケーションアーキテクチャは、高度に結束されたコンポーネントで疎結合に構成し、HTMLやCSS、JavaScriptと同じファイルに配置することが多くなっています。

そうではあっても、PopoverやFormコントロールといったJavaScriptプラグインのおかげで、手早く利用可能でまともな動作をするものを探す開発者にとって、Bootstrapが頼りになるフレームワークであることに間違いはない。

 
 

この記事を評価

採用ステージ
スタイル
 
 

この記事に星をつける

おすすめ度
スタイル

こんにちは

コメントするには InfoQアカウントの登録 または が必要です。InfoQ に登録するとさまざまなことができます。

アカウント登録をしてInfoQをお楽しみください。

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

コミュニティコメント

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

HTML: a,b,br,blockquote,i,li,pre,u,ul,p

BT