Bootstrap 3 から Bootstrap 4へのアップデートの影響範囲は？

Bootstrap、Coding、Responsive、Web Design / 2015年8月24日

現在「Bootstrap 3」で制作されているサイトは多いと考えられますが、果たして「Bootstrap 4」へのバージョンアップは可能なのでしょうか。簡単な検証をしてみたいと思います。
※2015年8月24日現在、Bootstrap 4 alphaが発表されたばかりであり、この検証の正確性は保証しておりません。

 

Bootstrap 3 から Bootstrap 4へのバージョンアップ検証方法

下記の方法で検証してみたいと思います。

  1. 「Bootstrap 3.35」のComponentsとJavascriptのページからHTMLソースをダウンロードし不要なソースを削除。
  2. Bootstrap 4 alphaのCSSとJSをそのページで読み込みます。CSSとJS読み込みはなるべく正確になるように、CDNから読み込みます

これで簡単な検証が可能ですね。

 

検証してみましょう

Bootstrap 3のComponentsのソースに対して、Bootstrap 4 alphaのCSS＆JSを読み込んだ状態 Components
Bootstrap 3のJavascriptのソースに対して、Bootstrap 4 alphaのCSS＆JSを読み込んだ状態 Javascript

上記リンクをクリックし表示をご覧ください。

 

結果

廃止されたコンポーネントは、もちろん表示が崩れているのですが、その他のコンポーネントもHTML構造が変更になっているものがあり、表示が崩れてしまう状況が見受けられました。
「CSSやJSを差し替えて利用できなくなるコンポーネントがある」という状況であれば、既存のBootstrapを利用しているWEBサイトをBootstrap 4にバージョンアップするといった方法も取れそうですが、雑感としてはなかなか厳しそうです。

 

今後のWEB制作においてBootstrapを利用する方針

完全にRiARiSE独自の見解ですが、Bootstrapを利用した上でWEB制作をする場合、早めにBootstrap 4を利用した方が良いと考えています。理由は下記のとおりです。

  • Bootstrap4ではIE8のサポートが打ち切られているが、BtoBサイトでない限りIE8のシェアはあまり多くなく※1、2016年1月にMicrosoftのサポートも打ち切られる。
  • <div class=”progress”></div>から<progress></progress>に変更されていたり、Bootstrap4の方がよりセマンティクスを意識したマークアップになっている。
  • Bootstrap 3.xで制作したサイトは、Bootstrap 4.xに乗り換えるには相応のコストがかかりそう。
  • Bootstrap 4ではBootstrap 3では利用できなかった、マージン＆パディング系のユーティリティクラスが用意されており、よりレイアウトを意識したサイト制作が可能そう。

※1参考にさせていただきました 2016年1月にサポート期限が切れるブラウザIE8。IE8ユーザーは現在何％なのか！

 

Google発のマテリアルデザインを実装したフレームワーク「Material Design Lite」でもIE8には対応していないですし、もうそろそろIE8を考慮しなくても良いのではないでしょうか。

関連投稿