はじめに
みなさん、こんにちは！今日は私がプログラミング知識ほぼゼロの状態から、ギャルAIの力を借りてウェブアプリを作ったのでちょろっと記事にしておこうと思います。「デプロイ」という言葉すら知らなかった私が、画像変換アプリを作れるようになるまでの道のりを紹介します。
きっかけ
「自分だけの画像変換アプリがあったらいいのに」
そんな単純な思いつきから始まりました。でも問題が一つ。私、大学のプログラミングの授業でウェブサイト作ったりとか、エクセルのマクロを弄ったりはしたことあるけど、ウェブアプリなんて未経験。そんな時、Xで見かけた「Windsurf」というAI搭載のコードエディタが気になって、試してみることにしました。
最初の一歩：ギャルエンジニアとの出会い
Windsurfを導入してみたけど、AIの返事って無機質で、とっつきづらい。そこで、これもXで見かけた「ギャルエンジニア」という単語にインスパイアされちゃいました。要するに設定に「ギャルとして振る舞ってくれ、ギャルってこういう言葉遣いだよ」云々、と書いておけばいいんだな！
AI：まじナイス！💖 どんなアプリ作る？超楽しみ！まずは何から始めたい？✨ 私：JPEGとPNGの変換ができるアプリが欲しいんだけど... AI：さりげいいアイデア！💕 画像フォーマット変換アプリなら簡単に作れるよ！まずプロジェクトの構成から考えてみよ！
とにかく軽いノリでタスクをサクサクこなしてくれます。まじ天才。専門用語をカジュアルに説明してくれるので、初心者の私でも理解できました。「コンポーネント」「レンダリング」「ステート管理」など、普通なら拒否反応が出そうな言葉も、ギャル言葉で説明されると不思議と頭に入ってきます。
驚きの開発体験
これはギャルだから、というわけでなく、Windsurfにびっくりしたって話ですが、こんな感じです。
- コードが自動生成される：「ドラッグ＆ドロップで画像をアップロードする機能が欲しい」と言うだけで、AIが必要なコードを全部書いてくれました。未来を感じる。
- エラーも自動修正：途中でエラーが出ても、AIが「まじヤバい！💦 これ修正しなきゃ！」と言いながら問題を解決してくれました。ほんとにまじヤバい。
- デザインまで提案してくれる：「もうちょっとオシャレにしたい」という漠然とした要望にも、CSSの調整やカラーテーマの提案までしてくれました。
特に印象的だったのは、「ビルド」や「デプロイ」という言葉の意味を知らなかった私に、AIが丁寧に説明しながら実際の作業をサポートしてくれたことです。
私：ビルドって何？
AI：ビルドはさりげアプリを実際に動かせる形にまとめる作業だよ！💖 コードをブラウザが理解できる形に変換するイメージ！やってみよっか？
npm run build
まじナイス！💖 ビルドできたよ！次はデプロイするね！✨
苦労したポイントとAIの助け
もちろん、全てが順調だったわけではありません。特に苦労したのは：
1. CSS調整の細かい部分：ダークモードでチェックボックスが黒くなって見えなくなる問題が発生。
私：幅とか高さとか最大サイズを入力する欄がダークモードで黒くなっちゃう！
AI：まじヤバい！💦 それは修正しなきゃ！入力欄のダークモード対応もやるね！✨
/* 数値入力欄のスタイル修正 */
input[type="number"] {
color-scheme: light;
background-color: white !important;
color: #333 !important;
}
2. そもそもFirebaseってなんやねん：何かウェブサイト作れるっぽいという認識しか無かったので、ここら辺は何をどうすれば良いのか、手探りの状態が続きました。
でも、AIが「さりげ難しいとこだけど、こうすれば解決するよ！」と前向きに提案してくれるので、挫折せずに進められました。
完成の瞬間
そして、ついに完成の瞬間が訪れました。Firebaseを使ってデプロイし、自分のアプリがインターネット上で公開された時の感動は忘れられません。
AI：まじ最高！！！🎉✨ デプロイ完了！これでみんなが使えるようになったよ！💖 + Deploy complete! Hosting URL: https://image-converter-manatsu.web.app
自分のアプリにURLが付いて、スマホからもアクセスできる。この感動は、プログラミング経験者には分からないかもしれません。「デプロイ」という言葉すら知らなかった私が、自分のアプリを世界中に公開できたんです！
学んだこと
この体験から学んだことは数えきれませんが、特に大きかったのは：
- プログラミングの敷居は下がっている：適切なツールとAIの助けがあれば、初心者でも本格的なアプリが作れる時代になっています。
- 楽しさが継続の鍵：ギャルAIのフレンドリーな対応のおかげで、難しい概念も楽しく学べました。
- 小さな成功体験の積み重ね：「コードが動いた！」「デザインが良くなった！」という小さな成功体験の積み重ねが、大きな自信につながりました。
最後に
「プログラミングは難しそう」「自分には無理」と思っていた方へ。今の時代、AIの力を借りれば、あなたもウェブアプリを作れます。私のように「デプロイって何？」という状態からでも、自分のアイデアを形にできるんです。
ギャルAIとの開発は、まさに「まじ最高！」の一言に尽きます。これからも、AIの力を借りながら、新しいアプリ開発に挑戦していきたいと思います。
皆さんも、ぜひチャレンジしてみてください！✨
ちなみにこの原稿もギャルAIに考えてもらってます。まじ卍。
Windsurfを始めてみたい人は下記リンクから始めることができます。
