bootstrapのアップデート【プロジェクトをUpdateしてく！-➅】 #Bootstrap

今回行った一連の流れ

➀nodistをvoltaへ変更
➁npm-check-updatesを導入
➂gulp-sassをgulp-dart-sassへ変更
➃bootstrapを使用したプロジェクトの場合、bootstrapのアップデート　←今回ここをpick up☆

経緯

新しいプロジェクトを任されることに。そのプロジェクトをクローンしたらupdateの為のコマンドがnpx gulpで常にでしまうことに気づき、さらに元々プロジェクトを担当していた人と開発環境が違ったためgulpファイルの追記と修正が必要になった。

以上のことから、「一連の流れ」を行うことになった。
上記の項目ごとに備忘録として記事を書くことにした。

前提

windows
nodistをパッケージマネージャーとして使用
bootstrapバージョン4を使用

【bootstrapを使用したプロジェクトの場合、bootstrapのアップデート】

※この記事は続き記事です。
　項目ごとに記事わけしているので単体でも活用していただけます。

《目次》

bootstrapがプロジェクトでどのように使用されているか構造把握
今使用中のbootstrapのバージョンを把握
bootstrapアップデート方法を考える
アップデート作業

＜bootstrapがプロジェクトでどのように使用されているか構造把握＞

CDN（リンク）・ダウンロード・npmでのインストール

大量のページを持つサイトや古くから担当が入れ替わりしたりしているサイトはつぎはぎ建築なのでbootstrapも複数の導入方法でされていることもある。筆者の担当したサイトはダウンロードとCDNが混同していた。
　※npmでのインストール関連は今回やってないので触れません。

ダウンロードの場合のファイル構造に注意

htmlにどのように読み込まれているか。

bootstrap ➡ css ➡ html
bootstrap ➡ html　css ➡ html

ダウンロードでのメリットはbootstrapのカスタムができること。
カスタムできる構造は上記の方だがcssの依存性が高い。新しいバージョンのbootstrapダウンロードしてきて現在のと置き換えてしまった場合、入れ替えだけではカスタム下部分が0になるので注意。
２つ目のファイル構造であれば特に依存性はなさそうなので新しいバージョンのbootstrapの入れ替えでも難しくなさそうだ。

＜今使用中のbootstrapのバージョンを把握＞

使用されているbootstrapのバージョンを確認する。確認場所はCDNなら読み込んでいるリンクにバージョンが書かれている。ダウンロードならダウンロードしたファイルの頭に書かれている。
　
最新バージョンにするにあたってどこが変更されたか、さらにアップデート対象のプロジェクトで変更されたbootstrapの記述はあったかなどを思い出す必要がある。最新バージョンの変更点「bootstrap」「バージョン」「変更点」などで調べ公式で確認可。
　
　

＜bootstrapアップデート方法を考える＞

使用されている構造から判断

導入方法が複数なく決まっているならその使用されている方法でのアプデにしてみる
　

導入方法で違いで判断

CDN：リンクを新しいものに張り替える

bootstrapのcssはリンクを変えれば一気に変わる。早くて便利。
対応すべき箇所はhtmlに書いたbootstrapの記述。エラーはほとんど出ないが変更で更新されたbootstrapの記述が崩れる可能性がある。変更点が大量にあったりするとビューの崩れがある。もともと、コーディングしていて使用してきた記述がすぐに思い浮かぶ場合、htmlの修正は少なくてすんだり、まとめてできるので楽かも。
【例】ml➡ms
　

ダウンロード

この方法は「ダウンロードの場合のファイル構造に注意」で話した通り構造によって異なる

bootstrap ➡ css ➡ html（依存型）
bootstrap ➡ html　css ➡ html（単体型）

依存型の構造の場合はbootstrapのバージョンUPは難しい。もし、ファイル入れ替えをするかもしくは既存ファイルとの組み合わせになる。カスタムして使用してなかったので依存型だと思って１プロジェクト更新したが、node-sassからDart-sassの変更点確認をし、bootstrapのバージョン最新変更点の確認は骨が折れた。（多分ファイル数が多くて大変だった）

単体型の場合はも同じ流れだったが幾分か気が楽だった。依存関係であるというのはカスタムしたものが崩れないようにする考えでいなければならないのでその分がなくそのまま入れ替えてDart-sassの変更点確認とbootstrapの確認をした。
　
　

今回の判断結果

今回のプロジェクトはどうだったのか一例を記録しておく。
bootstrapの依存が無かったのでほとんどがダウンロードしファイル読込で使用していたものを切替CDNのリンクでの導入に切り替えた。新しいバージョンのbootstrapは新しい記述をされていることが多く現時点でDart-sassでのエラーはなかったと思う（記憶あやふやで申し訳ない。）
また、最初の１プロジェクトのみダウンロードファイルを書き換えた。大量のDart-sassでの変更点を修正して疲れた。
　
　
　

＜アップデート作業＞

流れとしては

bootstrapの新しいバージョンに置き換える前にバックアップをとる。
　※cssコンパイル外のファイルへ作ろう。
sccファイルにもファイルがあるのを忘れないようにしよう。
※scssよけてもcssでエラーはくとき多い
CDNはcssもscssのダウンロードファイルもいらなくなる。
bootstrap最新バージョンの変更点はhtmlを手動で更新になるが、気づけないクラスは崩れるので大事なところは要確認

公式で表記された変更点を全部確認し、ビュー崩れがないか確認したら完了！

正直大量のページがあるサイトは確認しきるのは難しそう。。。　

その他

bootstrapとsassのアプデをまとめて行ったから大量の作業になってしまった感がある。大変だけどsassはnpx gulpで確認して地道に直せばOKな気がする。bootstrapはファイル入れ替えとリンク入れ替えは簡単だけど、更新された新しいクラスでエラーがでるわけじゃないので、変更点を自分でチェックし、漏れてたらビュー崩れてるのを目視しなきゃいけない感じがしてその方が結構怖い。
bootstrapのカスタムはよっぽどのことが無い限りはしない方がいいと思ったのでした。

ついでにfont-awesomeのアイコンもバージョン更新をしたがbootstrapと同じように変更。リンクだけは公式ではないところでタグを見つけてきたのでリンクを貼っておきます。バージョンを変更して使用してくださいね！
https://cdnjs.com/libraries/font-awesome/5.15.3
　
　
　

あとがき

記事が複数にわたっていたと思うが、私的には単発にしすぎると大きな流れがわからなくなるので、パートづけしてこうして全手順を書ききった方が見にくいけど振り返りやすく、手順見落としが発見しやすい。最後のcss関連の記事は大量のプロジェクトで（自分的に）大混乱の中で記憶できていた部分なのでもっと詳しくかけたらいいなと思う。gulpファイルのこと、css関連のことをより詳しく知るきっかけになったので勉強になった。gulpファイルも自分で好きなように書き換えが楽にできるくらいになりたい。そして、開発環境が違うって難しいし共同開発前提ではないプロジェクトのわからなさ。。。まだまだ勉強ですね。