Vibe Coding でモバイルアプリ開発
517 Views
May 30, 25
スライド概要
2025年5月30日(金) 開催の『Webナイト宮崎 Vol.21 〜てげWeb学びたい〜』で登壇した内容です。
https://yuruyakana-org.connpass.com/event/345340/
宣伝していたコミュニティ『鹿児島.mk』
https://kagoshima-mk.connpass.com/
関連スライド
Meta XR SDK(V66-74)でQuestアプリを開発
あうぜん
1M
各ページのテキスト
Vibe Coding でモバイルアプリ開発 Webナイト宮崎 Vol.21 〜てげWeb学びたい〜 2025-05-30 タスク(くすたん)
目次 1. 自己紹介 2. Vibe Coding について 3. Flutter での Vibe Coding 4. デモ(時間あれば) 5. 今後の展望
鹿屋・鹿児島でアプリ開発やってます ● タスク・くすたん(@qst_exe) ● 1991年生まれ ● 鹿屋市在住(実質都城) ● ヘッジホッグ.exe合同会社 代表 ● 株式会社ユニマル ロックスター ● 鹿児島.mk 運営 ● Laravel, Flutter, Rails etc.
Webナイト宮崎の鹿児島版コミュニティ 1. 令和元年にGMOペパボの鹿児島メンバーと開始(今年7年目) 2. もくもく会、ハンズオン、LT会、ハッカソン、企画会議などいろいろ 3. 技術も、HTML/CSS、JS、 Flutter など多種多様 4. コミュニティきっかけで転職や起業した人も
Vibe Coding
Vibe Coding とは 1. 開発者は実際のコードはかかず、AI に指示を出すことでコードを生成する 2. コードの設計や仕様には気を遣わず、雰囲気で開発を進めていく 3. 原義主義の方はこちらを参照 a. https://x.com/karpathy/status/1886192184808149383
Vibe Coding ハッカソンのルール ● ● ● ● ● ● 制限時間は1時間でツールの制約はなし ブラウザだけで完結するToDoアプリ ○ タスクの進捗ステータスは少なくとも3段階を用意 ○ ドラッグ&ドロップのソートに対応 ○ ラベル機能 ○ フィルタリング表示 (進捗ステータス・ラベルによる) ダークテーマに対応する 魅力的なアニメーションを少なくとも5箇所には導入する 必ずIndexedDBを使用する モバイルファーストでレスポンシブデザインに対応する
いい感じのアプリができた
Vibe Coding ハッカソンの成果物
Flutter での Vibe Coding
モバイルアプリと AIの相性
古い情報を参照して しまわないか
JetBrains おじさん
懸念していたこと 1. モバイルアプリは AI と相性悪いのではないか 2. OS やライブラリのアップデートにちゃんと追従できるか 3. JetBrains の手癖がついてしまっているが使いこなせるか 4. 人間が AI に負けるはずがない
Vibe Coding で試したこと 1. 最低限の設計や利用するパッケージを指定 a. 状態管理や画面遷移など b. 命名規則やDB、ディレクトリ構成もざっくり 2. 合格条件を明示する a. Linter の通過、ビルドできる、テストの通過 3. ジュニアエンジニアに語りかけるように指示を出す 4. お茶をする
デモ(時間あれば )
所感 1. 自動的にコードが書き上げられていくところはすごい 2. 書かれたコードの保守性がどうなのかが気になってしまう 3. 詳細を気にすると Vibe Coding ではなくなってしまう 4. 個人開発やライブラリ、テストコードなどに導入するのはありか
今後の展望 1. 既存プロジェクトのライブラリアップデート・テストを導入する 2. visionOS アプリ開発でも Vide Coding をできないか検証 3. JetBrains の Junie や Claude Code プラグインを試す
おまけ
6/27(金): 霧島市 7月上旬: 鹿児島市 https://kagoshima-mk.connpass.com/