またブログを作った Next.js + Tailwind
n度目の正直
個人ブログをまたもや作った。 もう何度目になるか分からないが、以下にブログ遍歴と、今回Next.jsを使うに至った経緯を書き残しておく。
ブログ遍歴
以下に記したMarkdownテーブルが何故か崩壊しています。現在原因調査中です。
| year | platform | desc. |
|---|---|---|
| 2010年頃 | アメブロ | 小学生の頃。とりあえずブログを作ってみた。 |
| 2010年頃 | HTML4 | 厨二病の頃に初めてweb開発に触れた。開発といってもとほほのWWW入門を読みながら素朴なHTML4サイトを作っただけだった。この頃はHTMLが書ける==プログラミングができると勘違いしていた。 |
| 2014年頃 | WordPress + レンタルサーバ | 有名ブロガーがこぞってWordPressを勧めてたので真似した。ブログ執筆〜公開、デザインや機能の変更を一気通貫して全てCMSで行えるのは非常に便利だと感じた。既存のテンプレートを修正するためにPHPを1mmだけ勉強したが ? が沢山登場する文法を見ていると不安な気持ちになり挫折。 |
| 2015年 | はてなブログ | 自分でデザインしたダサい自作webサイトよりもSaaSを使ったほうが読者的には読みやすいだろうと気づく。アフィカスも始める。 |
| 2016年 | Medium | 余計な装飾が無いシンプルなデザインが気に入りMediumを使う。現在でもMediumはお気に入りのブログプラットフォームだが、日本人ユーザーが少ないのが辛い。 |
| 2017年 | WordPress + GCP | GCP無料枠の存在を知りWordPressを構築してみた。サーバーレスのことなんて知らなかったので、Compute Engine(EC2みたいなやつ)にLAMP環境を作ってWordPressをインストールし、リソースはStorage Service(S3みたいなやつ)に置いた。サーバの勉強にはなったかな。 |
| 2017年 | note.mu | 和製Medium的な立ち位置のnoteを使ってみた。ユーザー間の交流が盛んで楽しいが、ちょっと意識が高すぎ&エモいユーザーが多く自分には向いていないと感じた |
| 2018年 | Hugo + Netlify | WordPressはメンテナンス性の低く、PaaSは自分には向いていないと感じていたときにSSGが流行していると知りHugoを試してみた。どのSSGが良いか分からずgolang使ったこと無いのにHugoを選択してしまい苦労したが、SSGの扱いやすさに気づけた |
| 2019年 | Gatsby.js + Netlify | 流行りのReactを用いたSSGであるGatsby.jsを使ってみた。Gatsby.jsにはPluginがあり、WordPressのようにサードパーティ製の機能を簡単に組み込むことができて便利だった。テンプレートとプラグインを活用してモダンなwebページ素早く作成&デプロイするには、現状Gatsby.jsが最も適したフレームワークではないかと思う。反面、Pluginがどのような処理をしているのか理解するのが難しくメンテナンス性に問題を感じた。 |
| 2020年 | WordPress + Azure | 以前作ったWordPress on GCPのブログのアフィリエイトが若干安定してきたので、SSGブログと並行してWordPressも継続することに。GCP無料枠よりAzureの学生無料枠($100USD無料/year)の方が魅力的だったので引っ越した。 |
| 2021年 | Next.js + Tailwind + Vercel | Gatsby.jsよりもメンテナンス性が高く流行していそうなNext.jsでブログを作ってみる。 ← イマココ |
そんなこんなで Next.js に流れ着いた
上記のような変遷を経てNext.jsに辿り着き、いまご覧のwebサイトを作るに至ったのだ。 ブログサイトを作る場合、以前利用していたGatsby.jsならば公式サイトからブログTemplateをクローンして、デザインをちょといといじるだけで完成する。一方で、Next.jsの場合は、ブログを作るなら、Markdownファイルを読み込むライブラリをインストールして、Markdownファイルを元にページを静的生成する関数を定義し、CSSスタイリングをかける、といった具合に全て自分で実装することになる。お手軽さはGatsby.jsの方が勝るが、Next.jsはブラックボックスが少なく自分るwebサイトがどのような仕組みで動いているかを完全理解できる点が良い。機能はデザインを追加・調整しながらwebサイトを育ててゆくという観点ではNext.jsの方が利点が大きいと感じている。
トレンドを見ると、Next.js は Gatsby.jsよりも圧倒的に流行っているようなので将来性もありそうだ。
勉強にはならなかった
Reactを勉強する題材としてNext.jsを使ってみようという動機もあったが、SSGを用いると拍子抜けするほど簡単にwebサイトが立ち上がってしまい、勉強にはならなかったと思う。Reactを勉強するのが目的ならフレームワークを使わずに開発した方が良いだろう。
Tailwindいいね
Next.jsのCSSスタイリングにはTailwind CSSを利用した。TailwindはBootstrapのようにHTML側のClass名でスタイルを指定するライブラリだ。Tailwindは記法が独特で、例えば、margin-top: 0; を mt-0 と書く。エキセントリックな記法に見えるかもしれないが、mt は margin top の略であり法則性が分かれば想像以上に簡単に扱える。今回の開発で初めてTailwindに触れたが、1時間も触っていれば記法を覚えることができた。
Bootstrapのようにあらかじめコンポーネントが用意されている訳ではなく、Tailwind記法を用いながらCSSプロパティをカスタマイズできるので、手軽に、自由なスタイリングが可能だ。
デプロイはVercelだ
デプロイ先はNext.js開発元のVercel Inc.が提供するサーバレス環境を用いているが非常に使いやすい。Netlifyでは環境設定を適切に行わないとデプロイが詰まることがあったが、Vercelなら何も考えずに一瞬でデプロイできた。
ドメインの活用
新しくブログを立ち上げたもう一つの要因として、私が所有している toyota.im というドメインを活用したいというニーズもあった。せっかく新しいドメインを取得したが今まで利用目的が無かったため、新しく個人ブログを作ることで死蔵ドメインの有効利用を図ったのだ。
ドメイン取得に至る経緯は別の記事に記している。