皆さんおはようございます。池ちゃんです。朝早く最近は起きていますが、いかがお過ごしでしょうか。朝は少しだけ涼しく感じるような気がしています。

さて、今回はTailwind CSSを採用しなかった話として、お話をしていきたいと思います。最初にお断りしておきますが、Tailwind CSSが嫌いという訳ではありません。過去、WEB制作で何度も使ってきましたし、綺麗なUIを作る事ができるという事でとても評価はしています。ですが、今回のこの「IKECHAN」では採用しなかったという話です。それではお話していきます。

## Tailwind CSSはとても便利なフレームワークである
まず、大前提としてTailwind CSSは大変便利なCSSフレームワークだと思います。marginやpaddingといったスタイリングには欠かせないプロパティの値が事前に決められていて、統一感のあるスタイリングをする事が簡単にできます。

marginやpaddingの値って適当にコーディングしていくと、サイトのレイアウトがおかしな事になりやすいんですよね。綺麗に統一感を持たせるという意味ではTailwind CSSは適切な選択肢だと思っています。指定の方法も「mt-2」みたいな感じでしやすいです。

## Tailwind CSSが用意してくれているカラーセットが綺麗
Tailwind CSSは色のライブラリも事前に用意してくれています。WEBサイトを構築する時に無視できないのが配色です。配色をミスってしまうととても見栄えが悪いWEBサイトを量産してしまう事になりがちです。そのような事故を防いでくれるのがTailwind CSSが事前に用意してくれているカラーライブラリという訳です。

昔Nuxt.jsで開発をしていた時にTailwind CSSを導入しました。するとその時にローカルホスト3000番でTailwind CSSのチートシートページが表示され、そこから色や濃さなどを選べた記憶があります。今もあるかは分かりませんが、そういう取説も結構充実していた記憶があります。WEBサイトで検索してもチートシートは豊富にありますよね。

## class属性が長くなる場合がある
Tailwind CSSの特徴とも言えるのが、cssを書かずに全てをhtml上でclass属性にプロパティを記述していきます。簡単な指定であれば問題ないですが、例えばボタンを作って結構複雑なボタンデザインを施そうと思うと、とてつもなく長いclass属性が生成されてしまいます。

これが結構厄介だったりします。コードの中にclass属性が溢れかえり、コードの可読性が低下する事が懸念されるからです。もちろん軽減する事はできます。Next.jsを使った場合であればボタンならそれだけをコンポーネント化し、コンポーネント元でスタイリングを行う。呼び出すtsxファイルではimportとしたコンポーネントを呼び出せば、class属性の氾濫を防ぐ事はできます。

## 改行を適切に入れて管理する
可読性を上げるために必要なのは、**コードを横に並べるのではなく縦で管理する**という事です。class属性を横に並べていくとどんどん横に広がって読みづらくなるかと思います。それをプロパティを表すクラスごとに改行する事で可読性を担保しようという事です。

しかしながら、この手法も限度があります。何でもかんでも縦に書いていたらHTMLのインデント構造が分からなくなっていきます。これはこれで問題ですよね。このdivタグの閉じはどこだっけのようになっていく訳です。

## 悩んだ末、本ブログでは採用しなかった
非常に悩みました。このブログサイトはNext.jsで構築されていますが、npmでインストールする時にTailwind CSSを使うかどうか聞かれます。そこでYesにするかNoにするか悩みましたが、今回はNoにする事にしました。

理由としては前述していた通りのものプラス、長年CSSを手打ちしていた身としてはCSSを書く事自体がそこまで苦ではないからです。やはり、慣れ親しんだcssをグローバルcssで書いて、Next.jsに適用させる事は私の中では安心感があります。複雑なCSSを書くのであれば、Tailwind CSSは不要ではないかなというのが私の中での今の所の結論になります。

## まとめ
賛否両論があるTailwind CSSですが、今回は要不要論について深堀りをしていきました。サクッとモダンなWEBサイトを作るのであれば、Tailwind CSSは即戦力のある候補になるかと思います。ですが、小規模なサイトやデザイン要件がかなり詰まっているWEBサイトではTailwind CSSは不向きかなと思います。それと、開発体験が微妙になる可能性があるので、その辺りを考慮して利用するといいかもしれません。皆さんも良き開発を楽しみましょう。

皆さんおはようございます。昨日弊サイトをローンチしました、池ちゃんと申します。いかがお過ごしでしょうか。私が住んでいるところはまだ暗く、太陽が昇っておりません。最近早起きする事にハマっていて、今日は午前4時に起床しました。

さて、今回はこのWEBサイトを支えている技術スタックについて紹介していきたいと思います。このサイトのコンセプトは「速い」です。とにかくスピードを追求したWEBサイトとなっておりますので、どのような構造でWEBサイトが動いているか説明したいと思います。

## ワードプレスじゃない方法でCMS的なものを作る
私は今までブログを作るとなったらワードプレス一択でした。ワードプレスはPHPで動くCMS（コンテンツ・マネジメント・システム）で世界でもトップシェアを誇るシステムです。

ワードプレスはとても使いやすく、オリジナルテーマも作りやすいので私も過去何度もワードプレスでブログを作っていました。PHPも初学者向けの言語で、ソースコードも読みやすく、ある意味では私はワードプレスに依存する形になっていました。

## ワードプレスの個人的惜しいところ
ワードプレスは非常に便利な反面、残念なところもあります。個人的にクリティカルに惜しいところは表示速度です。表示速度に少しラグがあります。これは私のセッティングが悪いのかもしれないですが、サーバをLiteSpeedにしてもあまり速度改善が見られませんでした。もちろん、Apacheよりかは早く、ある程度のスピード向上は見られましたがそれでもローディングの時間が若干長いかなと思う瞬間があります。

## モダンなフレームワークに触れてみたい
個人的に一番開発のモチベーションになったのは、これです。ワードプレスは昔ながらのシステムで開発は楽しさもあるのですが、少し飽きてきてしまったのが正直な感想です。フロントエンド周りでReactやVueといったJavaScript製のフレームワークが流行り始めていて、React系のフレームワークを使いたいと思いました。

![NextJSのロゴ](/img/blog/article/20250911-nextjs-logotype-light-background-01.png)

## そしてNext.jsに出会う
速くて学習し易いフレームワークどれかを考えた時にNext.jsが頭に浮かんできました。一昔前まではNext.jsとNuxt.jsが同じぐらいの勢力を持っていましたが、近年はNext.jsが勢いがありインターネット上にも沢山のドキュメント・ノウハウがあるため、Next.jsを選びました。

使ってみての感想ですが、とにかく分かりやすいです。.tsxという拡張子でファイルを作成し、そのファイル名がそのままURLになる。とても分かりやすかったです。npmで色んなライブラリを入れる事も出来るので「こんな機能が欲しいな」と思えばnpmからインストールする事で大抵の機能は実装できてしまうのも強いです。

## せっかくならマークダウンで記事管理したいよね
これに尽きます。エンジニアであればマークダウンはとても馴染みがあると思います。個人的には記事をマークダウンで管理したいという想いも強くあり、Next.jsを使ってマークダウン管理ができるようにしました。ワードプレスでは中々マークダウンで記事を管理する事はできないので、ここはオリジナルで開発する必要がありました。

## 静的ホスティングであればお金もかからない
このサイトはCloudflare pagesで公開しています。無料枠がとても大きく事実上無料でWEBサイトを公開する事ができています。お財布にも優しく、個人的にはこの点もNext.jsでWEBサイトを作るメリットだと思います。ワードプレスだとどうしてもサーバを借りて、レンタルサーバ代がかかってしまいますので、大きなメリットです。

## 結論：Next.jsは正義
ワードプレスを長い間使ってきた身としては、Next.jsの表示速度の速さは素晴らしいものです。公式ドキュメントやノウハウもインターネット上に沢山あり、新規参入のハードルも低いんじゃないかなと思います。一度作ってしまえば、後はマークダウンを量産していくだけでブログを増やす事ができるので、運用もとても楽です。

今回は表示速度が早く、運用もし易いNext.jsベースのCMSもどきの作り方をご紹介しました。これからもブログを運用していきますので、よろしくお願いいたします。

IKECHAN

タグ：テック

最新記事鋭意制作中

Tailwind CSSを採用しなかった話──辻本恭介のテック日記

このWEBサイトを支えている技術たち