おはようございます、まちゅです。
今日は朝投稿してみます。
概要
グリッドレイアウトはレスポンシブデザインにとって
強力な武器になります。
特にコンテンツ羅列型のページでは簡単に実装できるので重宝しますね
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_grid_layout
前回色々書きましたが、
自作しようかどうか迷ったので、
その際考えたことを書きます。
外部製のものを使うのかどうか
(8/11追記)Headless UIというものをコメントでご教示いただきました。
自作と外部ライブラリのハイブリッドな選択肢ですね！
私は、自分で書けるものは自作推奨派です。
自分は保守性を重視していますが、
個人によって重視するものが違うと思うので何がいいかは断定はできません。
例としてCSSフレームワークにスコープを絞って考えてみます。
自分で書く場合
- メリット
- 自分だけの表現ができる
- 0から設計するので壁にぶつかると勉強になる
- デメリット
- リリース初速が遅くなる
- 設計ミスをすると修正が面倒
- 各ブラウザ対応がやや手間
- 後からフレームワークを導入したいと思っても移行にコストがかかる
CSSフレームワークを使う場合
- メリット
- 初回リリース速度をブーストすることができる
- 設計レベルで構成が奇麗になる
- デメリット
- フレームワークの設計思想を理解しないとゴチャる
- 破壊的アップデートにプロジェクトが弱くなる
- 構成に理解が無くなる
- figmaなどからインポートしたCSSとの親和性が低い
あくまで個人的考えです。
過去にReact17を18にアップデートする際に
material-uiからmuiへ移行が必要で、
その際の破壊的変更の修正が必要だった時はかなり苦しんだので、そういうトラウマもありますね。
react-modalを利用していた時も、意図通りのデザインや挙動にならず結局自作モーダルに移行しました。
ライブラリ全般的にスコープを広げて考えてみると、
dayjsのような、自作できない/作成コストがかかる、
もしくは他モジュールへの依存が少ないような独立したライブラリを導入するのはいいかなと思います。
入れる場合は、プロジェクトに不要な機能も付いてくる場合が多いので
不用意なバンドルサイズ増加には気をつけたいです。
逆にReactのHooksのような、Reactの仕様に依存するようなものは
根幹ライブラリのようなアップデートがあった時に動かなくなる可能性があるので
自作で構造把握しておけば修正コストも少なそうだなと。
サードパーティの対応を待たなくてもいいですし、なにより不要な機能がついてこないのでスッキリします。
さいごに
ケースバイケースと一括りにするのは簡単ですが、
どういうケースではどういうメリットデメリットがあって、どうだから、
といった理由を考えていくと、後々自分の想定外の問題に直面する事も少なくなるのかなと思います。