TechStack を大幅リニューアル！技術追加・カテゴリ整理・アニメーション実装まで

技術スタック、もっと充実させたい！

プロフィールページの TechStack セクションを見ていたら、「あれ、最近使ってる技術が載ってないな」って気づいちゃったんです。

例えば、ブログの「いいね機能」で使ってる TURSO や Drizzle。あと、開発でよく使ってる npm、Lefthook、tsx、PM2、Sharp とか。これらがリストにないって、なんだか寂しいじゃないですか。

というわけで、使ってる技術を全部追加して、ついでにカテゴリも整理して、見た目も良くしてみることにしました！

追加した技術たち

今回追加した技術は以下の通りです：

データベース・クラウド系

• TURSO: エッジで動く SQLite データベース。いいね機能で使ってます（以前の記事で紹介しました）。
• LibSQL: TURSO のコア技術。
• SQLite: TURSO のベースになってるデータベース。

開発ツール系

• npm: パッケージマネージャー。毎日使ってます。
• Lefthook: Git フック管理ツール。コミット前のチェックに使ってます。
• tsx: TypeScript 実行ツール。スクリプト実行時に便利。
• Sharp: 画像処理ライブラリ。

インフラ系

• PM2: プロセス管理ツール。本番環境で使ってます。

ドキュメント系

• mdsvex: Svelte で Markdown を扱うライブラリ。このブログシステムの根幹です。

これで、実際に使ってる技術がちゃんと反映されるようになりました！

カテゴリを整理整頓

技術を追加したので、カテゴリの構成も見直しました。

1. 並び順を論理的に

以前はカテゴリの並び順が少しランダムだったんですが、今回は以下のような流れに整理しました：

1. Programming Languages（言語の基礎）
2. Web Technologies（フロントエンド・バックエンド）
3. Databases & Cloud（データベース・クラウド）
4. Game / Mobile / Desktop（応用分野）
5. Infrastructure（インフラ）
6. Tools / Quality / IDEs（開発ツール・品質管理・エディタ）

これで、見る人にとって「どこに何があるか」が分かりやすくなったはずです。

2. Development Tools & IDEs を分割

以前は「Development Tools & IDEs」という1つのカテゴリにまとまってたんですが、ツールとエディタは別物だなと思って、2つに分けました：

• 🔧 Development Tools: Git、GitHub、npm、Lefthook、tsx、Sharp など
• 🖥️ IDEs & Editors: Cursor、VS Code、Android Studio、Xcode など

これで、ツールとエディタが混ざらずにスッキリしました。

3. アイコンの重複も解消

さらに、カテゴリのアイコンが被ってたのも修正しました：

• Infrastructure & Servers: 🖥️ → ☁️（クラウド感）
• Web Servers & Proxies: 🌐 → 📡（通信感）
• IDEs & Editors: 🖥️ → ⌨️（入力デバイス感）

これで、アイコンを見ただけで「あ、これはインフラ周りだな」って直感的に分かるようになりました。

スクロールアニメーションを追加

技術を追加してカテゴリを整理しただけじゃ物足りないなと思って、スクロールアニメーションも追加しました！

各カテゴリが画面に入ってきたタイミングで、ふわっと浮き上がるように表示されるようになってます。Intersection Observer API を使って実装しました。要素が画面に入った瞬間を検知して、アニメーションをトリガーする仕組みです。（ほぼ全部 AI さんに書いてもらってますが。）

スクロールしながら見ていくと、カテゴリが順番に現れる感じが気持ちいいです。ぜひプロフィールページでスクロールしてみてください！（まぁ、よくある見慣れたアニメーションなんですけどね。それでも、こういう細かい演出があると、ページを見てる時間が楽しくなるんですよね。）

データ駆動型にリファクタリング

さらにさらに、コードもリファクタリングしました。以前は各カテゴリを HTML でハードコードしてたんですが、今回は TypeScript を使ってデータ構造化し、配列で管理するようにしました。

これで、今後新しい技術を追加したり、カテゴリを変更したりするのがめちゃくちゃ楽になりました。以前は IMG タグを直接編集する必要があったけど、今は配列に値を追加するだけ。編集しやすくて、メンテナンス性が向上！

悩み：広く浅くに見える？

というわけで、技術スタック一覧がかなり充実しました。使ってる技術がちゃんと反映されて、カテゴリも整理されて、見た目も良くなって、コードもスッキリ。

とはいえ、リストに載ってる技術の中には、今はほとんど使ってないものも含まれてるんですよね。例えば、昔作ったアプリで使ったけど、最近は触ってない技術とか。ただ、経験としては持ってるから、リストから消すのもなんだかもったいない。

一方で、全部載せてると「あれもこれも使ってる人」みたいに見えて、「広く浅く」って印象を与えちゃうかもしれない。これって、技術スタックを公開してる人なら誰でも一度は悩むことなんじゃないかな。

消しちゃおうか、それとも残しておこうか。まだ悩み中です。もし同じ悩みを持ってる人がいたら、どうしてるか教えてほしいな。一緒に考えましょう！