Next.jsに最適なcssライブラリの選び方[Tailwind css, Scss]

こんにちは。FEチームのMapleです。新しいアーキテクチャ移行において、Next.jsを使用しようと思っています。今回はその中でもcssライブラリの選定について、お話ししていきたいと思います。

はじめに

• Next.jsはReactベースのフレームワークです。
• サーバーサイドレンダリングや静的サイト生成が簡単に行えます。cssライブラリを使用することで、スタイリングが効率化され、メンテナンスが容易になります。

cssライブラリの選定基準

• プロジェクトの規模と要件: 小規模プロジェクトではシンプルなライブラリ、大規模プロジェクトでは高度な機能を持つライブラリが適しています。
• 開発者のスキルレベル: チームのスキルセットに合わせて選ぶことが重要です。
• パフォーマンス: ライブラリのサイズやロード時間、パフォーマンスに与える影響を考慮します。

各ライブラリのメリットとデメリット

• Tailwind CSS:
  • メリット: カスタマイズ性、再利用性が高い。デザインシステムの構築が容易。
  • デメリット: 初期学習コストが高く、プロジェクトから剥がす際の工数が大きい。
• Chakra UI:
  • メリット: アクセシビリティ、使いやすいAPI、テーマのカスタマイズが容易。
  • デメリット: デザインの柔軟性がやや制限されることがある。
• Styled Components:
  • メリット: 動的スタイルが簡単に実装可能。コンポーネントごとにスタイルを分離できる。
  • デメリット: 大規模プロジェクトではパフォーマンスの問題が発生する可能性。
• Scss:
  • メリット: 既存のCSS知識を活用できる。モジュール化によりスタイルの競合が防げる。Scssの機能を活用できる。
  • デメリット: CSS-in-JSほどの動的スタイルは実現しづらい。

※今回はChakra UI,Styled Components所謂CSS-in-JSはパフォーマンスの観点で抜きにさせていただきました。

Maple的思想

• 自分としては、Scssを推したいです。学習コストが低い点ライブラリにほぼ依存していない点が自分としては評価しています。
• Tailwind CSS はユーティリティクラスを覚える必要があります。再利用性が高くなるのはわかりますが、プロジェクトから剥がす際の工数が大きい点がメリットより大きいデメリットと感じてしまいました。

CSSModules＋Scssの推奨理由

• 学習コストの低さ: 既存のcssやScssの知識をそのまま活用できます。
• メンテナンスと拡張性: CSSModulesとScssの組み合わせは、スタイルのメンテナンスが容易で、プロジェクトの規模が大きくなっても対応可能です。

Next.jsとの統合方法

• CSSModules＋Sassのセットアップ:

  npm install sass
  
  

まとめ

• 各ライブラリの特徴をまとめました。 自分としてはCSSModules＋Sassを推しています！という共有です。 実際にcssライブラリの選定はメンバー皆さんで考えるので、何を選定したかはまたどこかで話します。