こんにちは！人事広報部 カルチャーコミュニケーションチームの石井です。
以前、「開発経験ゼロの一般クリエイター兼人事が”AIの力だけで”Slackからアイコン画像一覧を取得した話」という記事を書かせていただきましたが、読んでいただけましたでしょうか？
【Python】開発経験ゼロの一般クリエイター兼人事が”AIの力だけで”Slackからアイコン画像一覧を取得した話【SlackAPI】
「コード？HDMIの話？」状態だった僕が、AIの力を借りてPythonを動かせたあの体験ですが、
正直、味を占めましたｗ
「もっとすごいものを作りたい」 「黒い画面（ターミナル）だけじゃなくて、スマホアプリみたいな画面があるやつを作ってみたい」
そんな野望を抱いた僕が、今回挑戦したのは「カーライフ管理アプリ」です。
しかも今回は、流行り（らしい）のReactという技術を使ったWebアプリ開発。
非エンジニアがAIとペアプログラミングをして、未知の領域に挑んだ奮闘記をお届けします！
なぜ「カーライフ管理アプリ」なのか？
僕は普段、車のメンテナンス記録や給油記録、走行履歴などを管理するために、複数のアプリを使い分けています。 「給油はこのアプリ、整備記録はこっちのアプリ、ドライブログは保険で契約している外部アプリ」
まぁ……めんどくさい！！！
全部まとめて管理できる「オールインワン」なアプリがないなら、作ってしまえばいいじゃない。 そんなDIY精神（とAIへの過度な期待）で、プロジェクトをスタートさせることに。
ターゲットは「僕」。 自分が欲しい機能を詰め込んだ、最強の俺得アプリを目指します！と言いつつも、公開できたら「車好きなユーザー」にも刺さればいいなと。
開発スタート
1. まずはAIに相談（要件定義）
まずは頼れる相談相手、ChatGPT先生（今回はGPT-5を使用）に「こんなアプリ作りたいんだけど」と相談します。
漠然としたアイデアを投げると機能一覧や要件定義をまとめてくれる。優秀だよなぁー。
AIは瞬時に要件を整理し、.md形式（マークダウン）で機能一覧を出力してくれました。 これをもとにVS Codeを開き、開発をスタートします。
AIにはJavaやPython、.mdが理解しやすいからオススメっておばあちゃんが言ってた。
2. HTMLでの挫折と、エンジニアの助言
言わずもがな、一切エンジニアリングには精通してない俺氏。お恥ずかしながら「Webサイト＝HTMLとCSS」という知識しかなかったので、AIに言われるがままHTMLファイルの作成を依頼しました。
HTMLでの試作。突っ込みどころは色々ありますが、ここまで1時間くらいでできました。
..最初は順調に見えました。しかし、機能を詰め込み画面遷移先のデザインを追加していくうちにコードはとんでもない長さに。 そしてある時、画面は真っ白になったと同時に僕の頭も真っ白になりましたｗ
困り果てて会社のエンジニアに相談したところ、こんなアドバイスをもらいました。
「それくらいの規模なら、ViteプロジェクトでReact使った方がいいよ」
What？……Vite？ React？ またしても知らない単語の登場。
3. Vite + React への転生
エンジニアのアドバイス通り、開発環境を一新することに。 ここからはVS Code内のAIアシスタント（Gemini 3 ProやClaudeなど）をフル活用して進めます。
「Viteプロジェクトを作って」とAIに頼むと、大量のファイルが生成されました。 App.jsx、main.jsx、package.json……。 HTMLファイル1つで戦っていた頃とは桁違いの複雑さです。
AIとの共闘（ペアプログラミング）
ここからは、まさにAIとの「ペアプログラミング」。 僕がやりたいことを日本語で伝え、AIがコードを書く。エラーが出たらAIに投げる。その繰り返しです。
呪文のオンパレード
npm installimport React from 'react'export default function...
画面に出てくるのは謎の呪文ばかり。 「コンポーネント？」「JSX？」 意味はなーーんも分かりませんが、AIが「これを書いてください」と言うなら、その通りにするだけです。というより、そうすることしかできないんです。ｗ
苦労したポイント
一番大変だったのは、「AIの指示通りにやっても動かない時」です。 例えば、サーバーを起動しようとしてもエラーが出る。 原因を調べてみると、指定していたフォルダのパスが間違っていただけ……なんていう初歩的なミスで1時間溶かすこともありました。
それでも、前回のPython開発の時よりはスムーズでした。
AIが進化していて、コードの修正案を適当な指示一つで適用できたり、エラーの原因を詳しく教えてくれたり。 「もしかしてプログラミングできてる？」 と錯覚するほどです（もちろんできてません）。
アプリ完成！？機能紹介
着想から約12時間。 AIと格闘の末、なんとか形になったのがこちらです！
ホーム画面（お知らせや簡易ログなどが見れる）
資産価値画面（各データベースから類似車両の市場価値を参照してAIが価格を推定したり、買取店での査定額をメモできる）
設定画面（車両登録や各データのエクスポートなどこまごました設定をいじれる）
整備メモ画面（車の駆動方式（FF/FRなど）を自動で判別し、適切なローテーション位置を教えてくれます。車に詳しくない初心者でも安心して整備ができる優しい設計を目指します）
故障診断画面（細かい仕様は詰めないとですが、パーツの交換時期や必要なメンテナンスをAIが提案。常に高スコアをキープすることで将来手放す際のリセールバリュー（資産価値）を最大化する狙い）
ドライブ記録画面（GPSを用いてルートの記録ができる（予定）。燃費も一緒に計算したいけど、実装難易度は高めかも）
こだわりの機能（予定含む）
- 車両管理: 愛車の情報を登録・編集できます。
- メンテナンス記録: オイル交換やタイヤ交換の履歴を残せます。
- 給油記録: 燃費計算も自動で（やる予定）。
- GPS走行ルート記録: ドライブの思い出を地図上に！（実装難易度高そうだけどAIならいけるはず）
まだデザインは簡素ですが、ブラウザ上でボタンを押して画面が切り替わるだけで感動です。 これ、全部AIが書いたコードなんですよ。すごくないですか？
まとめと今後の展望
今回の開発を通じて感じたのは、「AIがいれば、非エンジニアでもWebアプリは作れる（かもしれない）」ということです。
もちろん、裏側の仕組みを理解しているわけではないので、トラブルが起きた時の対応には限界があります。 そこは素直に、知見のあるエンジニアに協力をお願いしようと思っています（バックエンド処理とか、セキュリティとか）。
また、データベースを含め未完成な部分が多いのでこれからより詳細に詰めていく必要があるなと…。
大変ではありますが、一人でできるところまで楽しんで開発していきたいと思います！
今後の野望
- スマホアプリ化してリリースする
- サブスク機能をつけてマネタイズする（！）
- 実際に車好きのユーザーに使ってもらえるレベルまでブラッシュアップする
夢は大きく！ これからもAIという最強の相棒と共に、エンジニアへのリスペクトを忘れず、ものづくりを楽しんでいきたいと思います。
それでは、また次回の開発日記でお会いしましょう！
株式会社エイプリルナイツは、ゲームが好きという共通の価値観をベースに、楽しく働きやすい企業を作っていこうとしています。
ゲームが好きなエンジニアはぜひ弊社にご注目ください！
