このページについて
最終更新: 2026-10-07
自分の困りごとから作った Web アプリの、制作記録をまとめるページです。
作品ごとに「何をどう決めたか」を起きた順に残しています。新しい作品が上です。
Claude Code を取り入れながら、設計から実装まで一人で進めています。
2作目: Hubpin（2026年8月〜9月・公開済み）
Zenn・ブログ・X・GitHub に散らばった自分の発信を、1か所に集めて見せるハブサイトです。
2026年8月17日に v0.5（カードの登録・編集・並び替えと、公開ページ）を公開し、
9月8日に外部サービスから記事を自動で取り込む v1.0 を公開しました。
- 📖 制作記録: Hubpin 開発記録
- 🔗 アプリ: hub.mt-tk.com/matsutake
- 🔗 ソースコード: GitHub
- 技術構成: Next.js 16（App Router）／ TypeScript ／ Supabase（PostgreSQL・認証・RLS）／ Tailwind CSS ／ Vercel
1作目: Plate Calculator（2026年7月・公開済み）
バーベルの片側に着けるプレートの組み合わせを計算するアプリです。
ジムの設備に合わせて、使えるプレートの種類を切り替えられるようにしています。
1作目は練習と位置づけて、認証もデータベースも使わないフロントエンド完結の構成にしました。
そのぶん、テスト・CI・アクセシビリティ・パフォーマンスのように「作ったあとに効いてくる部分」へ時間を使っています。
- 🔗 アプリ: plate-calculator-zeta.vercel.app
- 🔗 ソースコード: GitHub
- 🔗 紹介ページ: Plate Calculator
- 技術構成: React 19 ／ TypeScript ／ Vite ／ Tailwind CSS v4 ／ Vitest ／ GitHub Actions ／ Vercel
| 項目 | 結果 |
|---|---|
| 制作期間 | 7日間（2026-07-22 〜 07-28） |
| テストケース | 32件 |
| Lighthouse | 4項目とも100点 |
制作中の判断は Zenn に書いています。
作品に共通して決めていること
- 仕様書を先に書き、工程ごとに見積と実績を記録する
- GitHub Flow で進め、1人でも PR を切ってレビューを通す
- CI を入れて、わざと壊して赤になることを確かめる
- 作りながら、つまずきと判断をブログと Zenn に出す
転向までの流れ全体は フロントエンドエンジニアになるまでの記録 に、
計画は フロントエンドエンジニア転向ロードマップ にあります。