【インターンレポートvol.6】 プログラミング初心者でもできた！ChatGPTを使ってWebアプリを作る方法
こんにちは！
バスキュールでインターンをしている、多摩美術大学の松尾です。
私はインターンの期間中、生成AIを使用して作品を作ることを目標に生成AIの学習をしています。
今回は、プログラミング初心者の私がChatGPTを活用して、Webアプリを作ってみた過程をレポートします。プログラミングの経験がないけれど、何かを作ってみたいという方にぜひ読んでいただきたいレポートです！
なにから始めたらいいの？
これまで生成AI（主にChatGPT）を学んできた私は、学んだことを活かしてWebアプリを作ってみたい！と思っていました。ですが、プログラミングの知識が全くなかった私は、何を準備すればよいのかさえ分からず、悩んでいました。そこで、ChatGPTに「Webアプリを作りたい」と伝えたところ、何を準備すべきかを教えてくれました。
用意するもの
ChatGPTのアドバイスに従って、開発環境を整えるために必要なツールを用意しました。ここで重要なのは、Node.jsとGitという2つのツールです。
Node.js: JavaScriptというプログラミング言語をローカル環境で実行できるようにするツールです。これを使って書いたプログラムを実行します。
Git: プロジェクトのファイルを管理し、変更履歴を記録するためのツールです。特に複数人で作業を進める際に役立ちます。
これらのツールのインストール方法も、質問するとChatGPTが丁寧に教えてくれます。
アイデアを出してみる
次に、どんなアプリを作りたいか考えました。私は以前から「天気に合わせて着る服をアドバイスしてくれるアプリ」がほしいと思っていたので、この機会に作ってみようと思いました。具体的な機能を書き出して、さっそくChatGPTに土台を作ってもらいます！
ChatGPTに叩き台を作ってもらう
アイデアが固まったら、次は実際にアプリの基礎となる部分をChatGPTに作ってもらいました。ここでは「叩き台」として、初歩的なコードを書いてもらいました。例えば、「天気情報を取得して、それに基づいて服装のアドバイスを表示する」という機能です。コードの意味が分からない部分も多かったのですが、ChatGPTに質問すると、すぐに分かりやすい説明をしてくれました。
APIってなに？
次に、天気情報を取得するために「API」を使う必要があることが分かりました。APIとは、「アプリケーション・プログラミング・インターフェース（Application Programming Interface）」の略称で、インターフェースとある通り、アプリケーションとアプリケーションのやり取りをする窓口になります。今回使用したのは、OpenWeatherMapというサービスのAPIです。ChatGPTに「どうやってやるの？」と聞くと、具体的な使い方を教えてくれたので、無事に天気情報を取得することができました。
動かしてみる
基本的なコードが完成したところで、実際にアプリを動かしてみました。最初はエラーが出たり、思ったように動かなかったりしましたが、ChatGPTに何が原因かを聞きながら、少しずつ修正を加えていきました。エラーメッセージに慣れていなかったのですが、ここでもChatGPTが適切なアドバイスをくれたので、問題を解決しながら進めることができました。
イラストを入れてみる
アプリが動くようになった後は、見た目にもこだわってみました。各気温に対応した服装のイラストをアプリに入れたいと考え、ChatGPTにイラストを生成してもらいました。その日の気温ごとに、適切な服装のイラストが表示されるようになりました！
動いた！！
最終的に、すべての要素が組み合わさり、アプリが完成しました。まだまだ改善点は多いですが、初心者の私でも、ChatGPTの助けを借りればWebアプリを作ることができました。作成したアプリは、Netlifyというサービスを使ってインターネット上に公開しました。
今日の服装に迷っている方、よければクリックしてみてください↓
まとめ
今回は、プログラミング初心者がChatGPTを活用してWebアプリを作る過程をレポートしました。ぜひ、みなさんもこの機会に、ChatGPTを使って自分だけのアプリを作ってみてください！読んでいただきありがとうございました！
この記事が気に入ったらサポートをしてみませんか？