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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

自己紹介藤森咲紅（Fujimori Saku ）「さく」と呼んでください職業: 会社員( ソフトウェアエンジニア) 今の業務: ゲームエンジン向けオーディオプラグイン開発(C++ > C#) 前の業務: Web サービス開発(AWS+Vue.js) 最近がんばってること: 自動車学校 MT ️ X: @suneo3476Web Zenn とか Qiita とか: suneo3476 JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 2

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

ほぼすべて Claude AI で開発 AWS 活用が本質なので、アプリ開発の労力を最小化したい要件定義・動作確認などは私が手動で行うコード・ドキュメント・スクリプト等をClaude に書かせる Claude Pro プランを使用（2,000 円/ 月）実働 4 〜5 日で作成（3 月中旬） Claude: Anthropic の生成AI サービス。コーディングに特化した機能が多い。 JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 8

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

開発プロセス（機能単位）あらかじめプロジェクト全体の計画ドキュメントを作成させておく 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

Slide 12

Slide 12 text

生成 AI 使用上の工夫生成AI がプロジェクト構造を分析しやすいようにプロジェクトのファイルツリー情報を教える Claude の Project 機能: ファイルを永続的にアップロードして Claude が内容を参照可能フォルダ管理はできず、同名のファイルの見分けがつきにくい例：画面ごとに作成する page.tsx そこで全ソースの先頭に相対パスをコメント tree コマンドの実行結果もアッププロンプト実行時間が短縮・誤解が消える JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 12

Slide 13

Slide 13 text

データ管理ライブの情報、セットリストの情報、シングル・アルバムの収録情報ボツ案: Google Spreadsheet + Apps Script GAS の機能が使いやすいが、書き方にクセがある（趣味で経験あり）安定運用に時間が必要か採用案: 静的データとしてアプリに内包スプシ → TSV として取得 → YAML に変換ライブは年2-3 回、更新の手間は許容範囲 JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 13

Slide 14

Slide 14 text

作業者としての Claude 良い点: TSV を元にしたデータモデリングが適切 React コンポーネント設計、命名が適切エラーはほぼ解決してくれる外観のスタイリングのセンスがいい（使うメインカラーだけ指示した）課題: ファイルサイズが大きくなりがち → モジュール分割指示が必要何度か目にする同じタイプの警告を繰り返す　→ 　つど修正を指示ミスの傾向は生成AI の「クセ」としてフィードバックが必要か JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 14

Slide 15

Slide 15 text

AWS Amplify 活用…… のはずだった「Amplify を使う」という手段自体が目的理想: GitHub リポジトリの main ブランチに push するたびにビルド・デプロイ現実: push 後の next build がコケるローカルではコケないのでバージョン関係の問題？安全なデプロイ手順の検証をまずもってやるべきだった。。。妥協: ローカルビルド(npm run build) → ZIP をアップ・デプロイ JAWS-UG 浜松+Hamamatsu.js 勉強会202504 発表枠2 © 2025 suneo3476 15

Slide 16

Slide 16 text

Slide 17

Slide 17 text

まとめ 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

Slide 18

Slide 18 text