個人でブログを作り始めた。初めての記事ということで、立ち上げの背景や技術選定、今後やっていきたいことを簡単にまとめておこうと思う。

個人でブログを作り始めた背景

自分だけの情報発信の場

1つは、他人と比べる必要のない情報発信の場が欲しかったということ。自分で作らなくても世の中には Zenn や DEV みたいな成熟した情報発信サービスが沢山ある。多くの人の目に触れて、いいねとかコメントで評価をもらう機会を考えればそういうプラットフォームの上で書くのがいいんだろうけども、他人と同じ土俵に立つと必要以上に比較してしまって疲れる。なのでひとまず独りで好きなように書く場を用意してみようかなと思った。

フロントエンド技術のキャッチアップ

個人でも仕事でもフロントエンドの開発はほとんど経験がなかったので、学ぶきっかけを作りたかったというのがもう一つ。このサイトを作り始めるまで、Next.js や React も、CSS でのデザイン実装も、まして SEO やアナリティクス周りなんかは当然ほとんど意識したことがなくて、だから現状このサイトはメタデータが適当だったり、OGP や RSS フィードすらも用意できていなかったりする。ウェブ開発者として恥ずかしい限りだけど一つずつキャッチアップしていこうと思う。まぁとにかく、自分で作ることでそういう不足の自覚を得て学ぶきっかけを作れたのは良かった。

ウェブ上でのアイデンティティ

第123回 プログラマのweb上でのアイデンティティの死についての雑談 by プログラム雑談

この3つ目に関しては、今更そんなこと？と思わなくもないけど、ウェブ上のアイデンティティという話。karino2さんのプログラム雑談で「ウェブ上でのアイデンティティ」という言葉を聞いて以来ずっと頭に残り続けてた。自分はプログラマーとして、それもウェブ開発者として働いてるが、プログラマーになって以来SNSでもブログでもその他イベントでもほとんど情報発信をしてきてない。それは彼の言うところの「ウェブ上には存在しない」プログラマーということになる。だから何という訳ではないけれど、ウェブの技術を使って生きているからには何かしらウェブに貢献（情報を残すという意味で）をしたいという気持ちがあった。

色々と理由を連ねてみたが、要は何もアウトプットせずに足踏みしていてはいけないということで、とっつきやすいところから始めてみようということ。

使っている技術と選定理由

Next.js / Vercel

• ファイルシステムベースのルーティングに興味があった
• キャッシュの仕組みや SSR など色々な概念や機能を学ぶきっかけになりそう
• 標準で MDX をサポートしていて、ドキュメントも充実している

あたりが主な選定理由。少し使ってみた限りでは、ファイルベースルーティングはやっぱり分かりやすくていいし、メタデータの管理も今のところ便利に感じる。ただ、暗黙的で非自明な挙動が多いかも？という感覚がある。まだまだ使い慣れていない部分が大きいので徐々に学びながら評価していきたい。

Next.js だからとりあえず Vercel で OK という感じで決めたが、実際デプロイ作業の開始からドメイン設定も含めて画面が見れるようになるまで5分程度で行けたので今のところ大満足。

MDX

MDX についてはよく言われるように、JSX が使えて Markdown よりも自由度が高いので、独自の形式のブログに挑戦したくなったときに良さそうだなというくらいの理由で軽い気持ちで採用した。ただ、今のところ Markdown で書けない形式の記事をイメージできていないが。

また、現状は MDX で書いた記事はリポジトリ内のローカルファイルとして Git 管理しているが、最近よく聞く Headless CMS を使い始めるのも面白そうだと思っているので、今後検討していきたい。

Tailwind CSS

ブログを立ち上げるうえで一番良さを実感して楽しかったのが Tailwind CSS だった。

月並の感想だと思うけれども：

• 必要なプロパティの指定を、ユーティリティクラスの積み重ねで表現できる
• クラス指定のシンタックスはシンプルなので、コード補完が有効な環境であれば覚えることが非常に少ない
• 文字サイズや色などのトークンが絞られており自由度が低く、一貫性のあるデザインを素早く作りやすい

このあたりのメリットは、特に CSS とデザイン初心者だからこそありがたいものだった。個人的に意外にも、3つ目の特徴が一番良い点に思えた。初心者には1pxとか0.1remとかの差は細かくてどうしていいのか迷う時間が増えてしまう。指定の幅が狭いからこそ、ページ全体として一貫性がありバランスの取れた見た目を素早く作りやすいのだと思う。今までほぼほぼデザイン実装をしたことがない中で、1週間程度で画面のスタイリングとアニメーションやエフェクトの追加までできたのは Tailwind CSS のおかげなので、今後も積極的に使っていきたい。

ただし、やはりこれも多くの人が語っているように、クラス名が長くなりコードの可読性が下がる点は否めないので、コンポーネントの分割とコンポーネントごとの Variants によるスタイルの抽象化を身につけていきたいなとも思う。

shadcn/ui

このコンポーネントライブラリに関しては、仕事関連で少し調べて触れる機会があったことに加えて、

• Headless UI フレームワークの人気の高まっている
• アクセシビリティに強い Radix UI をベースにしている
• そのうえで Tailwind CSS でスタイリングを施してある

などを踏まえて使ってみることにした。まだほとんど使っていないので、今後ブログの機能を増やしていく中でキャッチアップしていきたい。

今後やっていきたいこと

• 量を出す
• 基本的な機能を揃える
• オーバーエンジニアリング

まずは質は度外視で、情報発信の量を出していきたい。暫くはしょうもない記事（試してみた系、備忘録、短い解説、etc.）が多くなると思うが、最低限月に2つ以上くらいのペースで何かしらのアウトプットを続けていければと。

また、このサイトの現状として、分類・検索の機能がなかったり、RSS や OGP すら未サポートなど、致命的と言える程に機能が不足している状態なので、それについては早めに対応を済ませる。そこで調べたことや経た知見もブログとして公開していけると走り出しとしてはいいのではないかと思う。

最後のは、そこまで意気込むこともないけれど、せっかく個人で作り始めたものなので好きな技術で遊んでいけたらということ。

まとめ

簡単にまとめようと思っただけなのに、想定よりもかなり長くなってしまっているところが、文章の書き手としてのスキルの低さを証明してる。

まぁ一本目の記事なんて誰も読まないので気にせず終えて、次の作業に移ろう。

近いうちに、偶然見つけてくれた人がとりあえず RSS リーダーに入れてみようかなと思う記事をポンポン出せるようになれると良いな、ということで終わり。