はじめに
過去数年に渡って GitHub に Bootstrap 関連のリポジトリを複数作成・保守してきたが、Bootstrap 自体をあまり使わなくなったので、その一部をアーカイブ化する。
Bootstrap 関連の GitHub リポジトリ一覧
- jamband/blissable (SvelteKit + Bootstrap)
- jamband/quietz (Nuxt + Bootstrap)
- jamband/suerte (Next.js + Bootstrap + Storybook)
- jamband/sunraz (Astro + Bootstrap)
上記の中で、アーカイブ化するのは以下:
- jamband/blissable (SvelteKit + Bootstrap)
- jamband/quietz (Nuxt + Bootstrap)
jamband/suerte は Next.js + Storybook の動くドキュメントとして残し、jamband/sunraz は唯一の Bootstrap 関連の動くドキュメントとして残す。また、この 2 つに関しては、今後も更新・保守していく。
アーカイブ化する理由について
元々 Bootstrap 5 がリリースされる前に、Bootstrap 4 に対応した React Bootstrap や BootstrapVue を使っていた。その後 Bootstrap 5 がリリースされ、Bootstrap 5 に対応した React Bootstrap や BootstrapVue がリリースされるのを待っていた。
ただ、BootstrapVue に関しては、Vue 3 のリリースとも重なり、一向に Bootstrap 5 に対応したバージョンがリリースされなかった。
少し困ったが、Bootstrap 5 は今まで依存してきた jQuery に依存しないバージョンであるため、React Bootstrap や BootstrapVue をあえて使わなくても問題ないのではないか？と考え、React や Vue 上で動作する Bootstrap 5 のデモサイトをいくつか作成した。
もちろん、動作はしたが、動的に Bootstrap の JavaScript モジュールを import したり、スタイルをカスタマイズするために大量の Sass ファイルを import したりで、あまり昨今のフロントエンドのフレームワークやライブラリとの相性は良くない。
そもそも Bootstrap は歴史が長く、jQuery の全盛期に登場したものであるため、昨今のフロントエンド向けに作られたものではない。
また、ここ数年の CSS の進化とともに、JavaScript を使わなくても実現できるコンポーネントも増えつつあるので、あえて Bootstrap を使う機会が減った。
あと、しっかりと最適化した上でのスタイルのカスタマイズがやややりずらく (Sass · Bootstrap や Optimize · Bootstrap)、それならもう Tailwind CSS や CSS Modules でいいのでは？と最近よくなっていた。
このような経緯から、いくつかの GitHub リポジトリをアーカイブ化することを決めた。
まとめ
Bootstrap からは UI パーツやコンポーネントの粒度などを教わった。またデザイントークンやアクセシビリティなどを意識するきっかけにもなった。これらは現在の個人的なフロントエンド開発にも大いに活かされているはずだし、今後の開発にも活かしていきたい。