七輪ライブラリー: Claude AI で作る Next.js アプリ

JAWS-UG浜松+Hamamatsu.js 勉強会202504 の発表資料です。
日時: 2025年4月19日(土) 13:30〜13:45
タイトル: 七輪ライブラリー: Claude AI で作る Next.js アプリ
サブタイトル: コピーバンドの20年を知ることができるアプリの開発

Transcript

1. 七輪ライブラリー: Claude AI で作る Next.js アプリ コピーバンドの20 年を知ることができるアプリの開発 JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 1
2. 自己紹介 藤森 咲紅（Fujimori Saku ） 「さく」と呼んでください 職業: 会社員( ソフトウェアエンジニア) 今の業務: ゲームエンジン向けオーディオ プラグイン開発(C++ > C#) 前の業務: Web サービス開発(AWS+Vue.js) 最近がんばってること: 自動車学校 MT ️ X: @suneo3476Web Zenn とか Qiita とか: suneo3476 JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 2
3. 七輪とは？ 2002 年に結成した静岡県西部の aiko コピーバンド 元メンバーの会社の先輩 「藤森さんって ピアノやってましたよね？」 2023 年2 月に加入、キーボード・シンセ サイザー担当 ライブ7 回、13 曲 左下で✌️してる黄色シャツが私↗ JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 3
4. 七輪ライブラリーとは？ 七輪の活動を調べられる Web アプリ 2003 年からの出演ライブ・セットリスト （演奏曲）を検索可能 統計情報・ヒートマップで活動を視覚化 できる PC ・モバイルに対応 JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 4
5. 開発の背景: ライブの 相談にて 20 年もやってると過去のことは 思い出せない 「あの曲ってやったことある？」 「いつやった？」 「どこで？」 ホームページ（テキストサイト） を見て調べるの、だるい ホームページよりほんの一部↗ JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 5
6. 開発の背景: 続き Google スプレッドシート上に手 動で整理したけど、まだ使いに くい モバイル版は操作がしにくい 要求： 今までのライブを簡単に振り 返って、これからのライブの相談を しやすくしたい JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 6
7. 着手のきっかけ JAWS-UG 浜松の Slack にて 私「おすすめのAWS の勉強法は？」 「なんか作って発表するのおすすめ」 私「ほな作ったろ！」 2 月に開発を決意 （#general チャンネルにやりとりがあります） JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 7
8. ほぼすべて Claude AI で開発 AWS 活用が本質なので、アプリ開発の労力を最小化 したい 要件定義・動作確認などは私が手動で行う コード・ドキュメント・スクリプト等をClaude に書 かせる Claude Pro プランを使用（2,000 円/ 月） 実働 4 〜5 日で作成（3 月中旬） Claude: Anthropic の生成AI サービス。コーディング に特化した機能が多い。 JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 8
9. デモ ライブ検索・セトリ詳細 統計情報 ヒートマップ（演奏曲 ✕ 活動年）← 一番好きな画面 JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 9
10. 技術選定 Claude に書かせたコードは、自分も理解 できる必要がある Vue.js に文法が類似・学習コストが高すぎ ないものをリストアップ・比較 SvetleKit がトップだったが、興味があっ た Next.js の順位も高かったのでそちらを 選んだ JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 10
11. 開発プロセス（機能単位） あらかじめプロジェクト全体の計画ドキュメントを作成させておく 1. 今回開発する機能を Claude に伝え、実装させる 2. Claude が指示するパスのファイルに Claude が書いたコードをコピペ 3. npm run dev （ローカルで動作確認） 4. エラーがあればコピペして Claude に報告　→ 　2. に戻る 5. エラーが無ければ動作確認し、 不具合があれば Claude に報告　→ 　2. に戻る 6. 機能が完成したら、全体の進捗状況を更新させ、次回の 1. で知らせる （感想：OJT の指導者やペアプロのナビゲーターってこんな感じなのかな？） JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 11
12. 生成 AI 使用上の工夫 生成AI がプロジェクト構造を分析しやすいようにプ ロジェクトのファイルツリー情報を教える Claude の Project 機能: ファイルを永続的にア ップロードして Claude が内容を参照可能 フォルダ管理はできず、同名のファイルの見分 けがつきにくい 例：画面ごとに作成する page.tsx そこで全ソースの先頭に相対パスをコメント tree コマンドの実行結果もアップ プロンプト実行時間が短縮・誤解が消える JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 12
13. データ管理 ライブの情報、セットリストの情報、シング ル・アルバムの収録情報 ボツ案: Google Spreadsheet + Apps Script GAS の機能が使いやすいが、書き方にク セがある（趣味で経験あり） 安定運用に時間が必要か 採用案: 静的データとしてアプリに内包 スプシ → TSV として取得 → YAML に変換 ライブは年2-3 回、更新の手間は許容範囲 JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 13
14. 作業者としての Claude 良い点: TSV を元にしたデータモデリングが適切 React コンポーネント設計、命名が適切 エラーはほぼ解決してくれる 外観のスタイリングのセンスがいい（使うメインカラーだけ指示した） 課題: ファイルサイズが大きくなりがち → モジュール分割指示が必要 何度か目にする同じタイプの警告を繰り返す 　→ 　つど修正を指示 ミスの傾向は生成AI の「クセ」としてフィードバックが必要か JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 14
15. AWS Amplify 活用…… のはずだった 「Amplify を使う」という手段自体が目的 理想: GitHub リポジトリの main ブランチに push するたびにビルド・デプロイ 現実: push 後の next build がコケる ローカルではコケないのでバージョン関係の問題？ 安全なデプロイ手順の検証をまずもってやるべきだった。 。 。 妥協: ローカルビルド(npm run build) → ZIP をアップ・デプロイ JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 15
16. 今後の展望 AWS: Amplify のリモートビルドに再挑戦 だめだったら Vercel にしよう。 。 。 アプリ開発: 細かいバグ修正、バンドメンバーにレビューを依頼 JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 16
17. まとめ Claude + Next.js + AWS Amplify で実用アプリ 開発 Next.js のプロジェクト、React + TypeScript を 「大体理解した」 リポジトリ（QR コード左）: https://github.com/suneo3476/nanawa 公開URL （QR コード右）: https://staging.d3taurdbn4ybcv.amplifyapp. com TODO: QR コード JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 17
18. ご清聴ありがとうございました！ ご質問をどうぞ JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 18