【1日で作れる?】プログラミング初心者がAIとWebアプリを作ってみた

AI

皆さんこんにちは。かたすけです!
いつもはHTMLやCSSのまとめを発信していますが、今日は一味違った試みをしてみたいと思います。それは……

Webアプリを作ってみた!!

です。
アプリなんて素人が作れるわけない…それはもはや過去の話です。
今日は、僕がどのようにしてアプリを1日で作ったのかを書いていきます!

完成したWebアプリ【サクメシ!】はこちらです↓

サクメシ! – もう迷わない。今日のランチをランダムで決めるアプリ今日のランチ選びに迷っていませんか?サクメシは現在地からぴったりの飲食店をランダムに自動提案。最短30秒で決定!sakumeshi.com

きっかけ

ある日のお昼、大学の友達とお昼ご飯を食べようということになり、何を食べるか相談していました。ですがそこで問題が。

「何食べる?」
「んーそうだね…なんでもいいよ」
「おれも…」
「…..…」

決まらん!!!!!

皆さんもこんな経験ありますよね。
そんな人々の役に立つようなアプリ、それが【サクメシ!】です。

準備

準備として、情報系の学科に通っていることもあり、VScodeというエディタのインストール、Node.js(サーバーがどうたらで使うやつ)のインストールは済ませていました。これもGeminiに聞くと丁寧に教えてくれます。

いざ開発!

HTMLとCSSを今まさにかじっていた僕は、サイトには「HTMLファイル」「CSSファイル」が必要なことは知っていたので、Geminiにこう投げてみました。

かたすけ
今日のランチを自動で決めるアプリを作りたい。

Gemini
いいですね!~などの機能があると良いですね!

かたすけ
具体的な開発手順を教えて。ちなみに、僕は、HTML、CSS、Javascript、node.jsなら存在を知っています

Gemini
了解しました。あなたが知っている技術に合わせて、具体的な開発手順をステップごとに説明します。
1.開発環境の準備

かたすけ
じゃあ、それに沿って進めることにします。
まずはHTMLを書いて。

Gemini
コードずらずら

かたすけ
CSSも書いて。

以下略

こんな感じで、必要となるファイルを聞きながらそれ自体を書いてもらうことを繰り返します。実際のWebサイトの様子も見ながら、ここはこうしたい、という要望も突き付けました(偉そうなやつ…)。

画像
実際の画面はこんな感じ


そんなこんなで、コードをいくつか用意できました。

ここまで来たら、次にやることは、明確ですね。


そうです。Geminiに聞きます。笑

どうやら、GitHubというものにアップしたり、デプロイというものをしなければならないようです。
ここからもGeminiに聞きながら進めていきます。

気が付けば完成!

そうして出来上がったのが、【サクメシ!】です。
徒歩圏内の飲食店の中から、ランダムに選んでくれるアプリです!
思わぬ名店に出会えるかも…!?

たくさん要求した僕のわがままにも、よく答えてくれています。
皆さんもぜひ、ブックマークして使ってみてくださいね!

サクメシ! – もう迷わない。今日のランチをランダムで決めるアプリ今日のランチ選びに迷っていませんか?サクメシは現在地からぴったりの飲食店をランダムに自動提案。最短30秒で決定!sakumeshi.com

改善案、要望等あればXのDMまでお願いします。

まとめ

今回の経験を通して感じたことは3つあります。

一つ目は、素直にAIすごい!ということです。AIの発達は、新しいことに踏み出すハードルを低くするということを痛感しました!

二つ目は、AIをうまく使うことの有意義さです。AIがなければ、アプリを完成までこぎつけることは不可能でした。AIを使えることは、今後の重要スキルになっていく気がします!

三つ目は、AIに頼りすぎてはいけないということです。二つ目と矛盾する気もしますが、AIが発達しているからこそ、その情報を見極める力の重要度が高まっていると思います。僕は、今回の経験を通して、「AIができることを、自分の力でやってみたい!」という、今後の学習のモチベーションになりました!

皆さんの、AIとの新しい一歩を応援しています!!

最後まで読んでいただき、ありがとうございました!

タイトルとURLをコピーしました