「プログラミングの知識がなくても、AIを使ってアプリを作れるって本当？」
そんな疑問を持っている方に向けて、今回はChatGPTを使った初めてのWebアプリ作りを、準備から完成までわかりやすく解説します。
「バイブコーディング超入門講座」第2回では、AIへの指示文（プロンプト）の書き方から、HTML・CSS・JavaScriptの基本、コードの保存方法、アプリの動かし方まで、初心者向けに一つずつ紹介します。
実際に作るのは、毎日の予定や作業を管理できる「ToDoリスト」アプリです。
さらに、AIへの追加指示による機能の改良や、エラーが発生したときの解決方法も学びます。
難しいプログラミングの知識がなくても大丈夫です。
AIと会話しながら、自分だけのアプリを作る楽しさを体験してみましょう！
はじめに
こんにちは！
「バイブコーディング超入門講座」第2回へようこそ。
前回は、バイブコーディングとは何か、そしてAIを活用すればプログラミングの経験がなくてもアプリ作りに挑戦できることを紹介しました。
今回は、いよいよ実践編です。
AIにお願いして、自分だけのアプリを実際に作ってみましょう！
「プログラミングの知識がないけれど大丈夫？」
「特別なソフトをインストールする必要があるの？」
「AIが作ったプログラムは、どうやって動かすの？」
そんな疑問を一つずつ解決していきます。
今回作るのは、毎日の予定や作業を管理できる「ToDoリスト」アプリです。
難しいコードを一から書く必要はありません。AIに日本語でお願いして、完成したコードを保存し、ブラウザで動かすところまで体験します。
それでは、始めましょう！
① AIと一緒に初めてのアプリを作ろう！
今回の講座の目標は、とてもシンプルです。
「AIと会話しながら、自分のアプリを一つ完成させること」
アプリ開発というと、専門的な知識や長期間の勉強が必要だと思うかもしれません。
しかし、AIを使えば、プログラミング初心者でも比較的簡単なアプリを作れるようになりました。
例えば、次のようなものです。
- 買い物リストを管理するアプリ
- 毎日の予定を記録するアプリ
- 簡単な計算機
- メモ帳
- やることリスト
今回は、この中から「やることリスト」を選びます。
完成したアプリを自分で操作できたら、最初の目標は達成です。
最初から完璧なものを目指す必要はありません。
小さく作って、実際に動かすことが大切です。
【スライド①：AIと一緒に初めてのアプリを作ろう！】
② バイブコーディングとは？AIと会話してアプリを作る新しい方法
バイブコーディングは、英語で「Vibe Coding」と表記します。
「Vibe」は雰囲気や感覚、「Coding」はプログラムを書くことを意味します。
バイブコーディングとは、AIに自然な言葉で指示を出しながら、プログラムを作成・修正していく開発スタイルです。
例えば、AIに次のようにお願いできます。
買い物リストを管理するアプリを作ってください。商品を追加したり、買い終わった商品にチェックを付けたりできるようにしてください。
すると、AIが必要なコードを生成してくれます。
コードとは、コンピューターに処理を実行させるための命令を、プログラミング言語で記述したものです。
従来は、このコードを人間が一つずつ書く必要がありました。
バイブコーディングでは、AIに作成を手伝ってもらいながら、利用者が完成したものを確認して改善します。
基本的な流れは、次のとおりです。
- 作りたいものをAIに伝える
- AIがコードを生成する
- 実際に動かしてみる
- 改善したい点をAIに伝える
- 修正したコードを再び試す
つまり、「作る → 試す → 直す」を繰り返すことが基本です。
ただし、AIが生成したコードが必ず正しいとは限りません。自分で動作を確認することも重要です。
【スライド②：バイブコーディングとは？AIと会話してアプリを作る新しい方法】
③ 始めるために必要なものは、たった3つ！
今回のアプリ作りに必要なものは、基本的に3つです。
1．パソコン
WindowsでもMacでも構いません。
一般的なノートパソコンで十分です。
今回は、ブラウザで動く簡単なアプリを作るため、特別な開発用パソコンは必要ありません。
2．インターネット環境
AIサービスを利用するために、インターネット接続が必要です。
ただし、今回作るアプリは、外部サービスに依存しないコードで作成すれば、保存後はインターネットに接続しなくても動作します。
3．ChatGPT
今回利用するAIサービスは「ChatGPT（チャットジーピーティー）」です。
ChatGPTは、OpenAIが提供する対話型AIサービスです。
公式サイト：
利用にはアカウントが必要になる場合があります。
無料で利用できる機能もありますが、利用回数や使用できる機能には制限があります。
今回のような基本的なコード作成は、利用可能な範囲で試せます。
【スライド③：始めるために必要なものは、たった3つ！】
④ ChatGPTとは？AIとGPTの意味をやさしく解説
ここで、よく登場する専門用語を確認しましょう。
AIとは？
AIは「Artificial Intelligence（アーティフィシャル・インテリジェンス）」の略です。
日本語では「人工知能」と呼ばれます。
人間の言葉を処理したり、画像を認識したり、文章やプログラムを生成したりする技術の総称です。
GPTとは？
GPTは「Generative Pre-trained Transformer（ジェネレーティブ・プリトレインド・トランスフォーマー）」の略です。
それぞれの単語には、次のような意味があります。
- Generative：生成する
- Pre-trained：事前に学習した
- Transformer：言葉などの情報の関係を処理するAIモデルの仕組み
簡単に言えば、大量のデータから学習し、文章やコードなどを生成できるAIモデルの一種です。
ChatGPTでできること
ChatGPTでは、例えば次のようなことができます。
- 質問に答えてもらう
- 文章を作成・修正する
- アイデアを考えてもらう
- プログラムを作成する
- エラーの原因を調べる
- コードを改良する
今回の講座では、特に「プログラムの作成」と「修正」の機能を利用します。
【スライド④：ChatGPTとは？AIとGPTの意味をやさしく解説】
⑤ ChatGPTを始めよう！基本操作4ステップ
それでは、実際にChatGPTを開いてみましょう。
ステップ1：ブラウザを開く
Google Chrome、Microsoft Edge、Safariなど、普段利用しているブラウザを開きます。
ブラウザとは、インターネット上のWebページを表示するためのソフトウェアです。
ステップ2：公式サイトにアクセスする
アドレス欄に次のURLを入力します。
URLは「Uniform Resource Locator（ユニフォーム・リソース・ロケーター）」の略です。
インターネット上にあるページやファイルの場所を示す、住所のようなものです。
ステップ3：ログインする
必要に応じてアカウントを作成し、ログインします。
ステップ4：メッセージを入力する
画面に表示されるメッセージ入力欄に、日本語で質問や指示を入力します。
例えば、次のように入力してみましょう。
こんにちは。これから初めてWebアプリを作ります。初心者にもわかるように、やさしく教えてください。
送信すると、ChatGPTから回答が返ってきます。
これで基本操作は完了です。
【スライド⑤：ChatGPTを始めよう！基本操作4ステップ】
⑥ 最初に作るのは「ToDoリスト」アプリ！
今回作るのは「ToDoリスト」です。
ToDoは英語の「To Do（するべきこと）」から来た表現です。
仕事や日常生活で、これから行う作業を一覧にして管理するために使います。
例えば、次のような項目です。
- 英語の勉強をする
- 買い物に行く
- 部屋を掃除する
- ブログを書く
今回のアプリには、4つの基本機能を用意します。
1．やることを入力する
文字を入力する欄を用意します。
2．リストに追加する
「追加」ボタンを押すと、入力した内容が一覧に表示されます。
3．完了した項目にチェックを付ける
終わった作業にはチェックを付けられるようにします。
4．不要な項目を削除する
削除ボタンを押すと、その項目を一覧から取り除けます。
これだけでも、日常生活に役立つアプリになります。
【スライド⑥：最初に作るのは「ToDoリスト」アプリ！】
⑦ プロンプトとは？AIに上手にお願いする方法
AIに入力する質問や指示の文章を「プロンプト（Prompt）」と呼びます。
プロンプトは、AIに何をしてほしいのかを伝えるためのものです。
例えば、次の2つを比較してみましょう。
曖昧なプロンプト
便利なアプリを作ってください。
これだけでは、どんなアプリを作ればよいのか、AIが判断しにくくなります。
具体的なプロンプト
毎日のやることを管理するToDoリストアプリを作ってください。項目の追加・完了チェック・削除ができるようにしてください。初心者でも使いやすいデザインにしてください。
こちらの方が、必要な機能やデザインが明確です。
良いプロンプトを作るポイントは、次の4つです。
- 何を作りたいのか
- どんな機能が必要なのか
- どんなデザインにしたいのか
- どのような形式で出力してほしいのか
これらを具体的に伝えることで、希望に近い結果を得やすくなります。
【スライド⑦：プロンプトとは？AIに上手にお願いする方法】
⑧ HTML・CSS・JavaScriptの役割を理解しよう！
Webアプリを作るときによく登場するのが、HTML・CSS・JavaScriptです。
それぞれの役割を、家づくりに例えて説明します。
HTML：家の骨組み
HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略です。
Webページの文章、見出し、入力欄、ボタンなどの構造を作ります。
家づくりに例えると、柱や壁などの骨組みに当たります。
CSS：家の内装
CSSは「Cascading Style Sheets（カスケーディング・スタイル・シート）」の略です。
文字の色、大きさ、背景色、ボタンの形など、Webページの見た目を整えます。
家づくりに例えると、壁紙や家具のデザインに当たります。
JavaScript：家の設備
JavaScript（ジャバスクリプト）は、略語ではなくプログラミング言語の名前です。
ボタンを押したときの処理や、入力内容の表示など、Webページに動きを付けます。
家づくりに例えると、照明のスイッチや自動ドアの仕組みに当たります。
今回は1つのHTMLファイルにまとめる
通常は、HTML・CSS・JavaScriptを別々のファイルにする方法もあります。
しかし、今回は初心者向けなので、3つのコードを1つのHTMLファイルにまとめる方法を使います。
これなら、保存するファイルは1つだけです。
【スライド⑧：HTML・CSS・JavaScriptの役割を理解しよう！】
⑨ 実践！ChatGPTにアプリを作ってもらおう
いよいよ、ChatGPTにアプリを作ってもらいます。
次のプロンプトをコピーして、ChatGPTに入力してください。
実際に使うプロンプト
あなたは初心者にわかりやすく教えるWebアプリ開発の先生です。
「今日のやることリスト」というシンプルなToDoアプリを作ってください。
必要な機能は以下の4つです。
- やることを入力できる
- 追加ボタンを押すとリストに表示される
- 完了した項目にチェックを付けられる
- 不要な項目を削除できる
デザインは明るく、初心者にも使いやすいものにしてください。
HTML・CSS・JavaScriptを使用してください。
ただし、すべてのコードを1つのHTMLファイルにまとめてください。
外部ライブラリやインターネット接続を必要としない構成にしてください。
完成したコードを省略せず、最初から最後まで表示してください。
ファイル名は「index.html」にします。
最後に、初心者向けの使い方も説明してください。
送信すると、ChatGPTがプログラムを生成します。
画面に<!DOCTYPE html>という文字から始まるコードが表示されることがあります。
これは、HTML文書であることをブラウザに知らせるための宣言です。
コードが長くても、心配する必要はありません。
今回は、AIが作ったコードをそのまま利用します。
もしコードが途中で省略されていたら、次のようにお願いしましょう。
コードが途中で省略されています。1つのHTMLファイルとして使える完全なコードを、最初から最後まで表示してください。
【スライド⑨：実践！ChatGPTにアプリを作ってもらおう】
⑩ AIが作ったコードを保存しよう！5つの手順
次は、ChatGPTが作成したコードをパソコンに保存します。
今回は「index.html」という名前のファイルを作ります。
ステップ1：コードをコピーする
ChatGPTが生成したコードをコピーします。
コードの右上などに「コピーする」ボタンが表示されている場合は、それを利用すると便利です。
コピーするのはHTMLコード全体です。説明文やコードブロックの囲み記号は含めません。
ステップ2：テキスト編集ソフトを開く
Windowsの場合は「メモ帳」を開きます。
Macの場合は「テキストエディット」を開きます。
Macでは、「フォーマット」メニューから「標準テキストにする」を選んでください。
ステップ3：コードを貼り付ける
コピーしたコードを、テキスト編集ソフトに貼り付けます。
Windowsなら「Ctrl + V」、Macなら「Command + V」で貼り付けられます。
ステップ4：名前を付けて保存する
ファイル名を次のように指定します。
index.html
ファイル名の最後にある「.html」は拡張子と呼ばれ、HTML形式のファイルであることを示します。
ステップ5：保存場所を選んで保存する
デスクトップなど、わかりやすい場所に保存しましょう。
Windowsのメモ帳では、ファイルの種類を「すべてのファイル」にして保存すると、余計な「.txt」が付くのを防げます。
文字コードを選択できる場合は「UTF-8」にします。
UTF-8は「Unicode Transformation Format – 8-bit」の略で、日本語を含むさまざまな文字を扱うための文字コード方式です。
Macでは、ファイル名が意図せず「index.html.txt」になっていないか確認してください。
これで保存は完了です。
【スライド⑩：AIが作ったコードを保存しよう！5つの手順】
⑪ 初めてのアプリ完成！実際に動かしてみよう
いよいよ、完成したアプリを動かします。
ステップ1：ファイルを開く
保存した「index.html」をダブルクリックします。
通常は、パソコンの標準ブラウザが起動します。
ブラウザが開かない場合は、ファイルを右クリックして、ブラウザを指定して開いてみてください。
ステップ2：アプリが表示されるか確認する
ブラウザに「今日のやることリスト」などの画面が表示されれば、最初の一歩は成功です。
ステップ3：やることを追加する
入力欄に、例えば次のように入力します。
「英語の勉強をする」
そして「追加」ボタンを押します。
リストに項目が表示されるか確認してください。
ステップ4：完了チェックを付ける
追加した項目のチェックボックスをクリックします。
チェック状態が変われば成功です。
ステップ5：項目を削除する
削除ボタンを押して、項目が消えるか確認します。
ここまで問題なく動けば、初めてのToDoアプリが完成です！
ただし、今回のプロンプトではデータ保存機能を指定していません。
そのため、画面を再読み込みすると、追加した項目が消える場合があります。
これは不具合とは限りません。データ保存機能を追加すれば改善できます。
【スライド⑪：初めてのアプリ完成！実際に動かしてみよう】
⑫ AIへの追加指示でアプリをもっと便利にしよう！
アプリが完成したら、次は自分好みに改良してみましょう。
バイブコーディングの魅力は、AIとの会話でアプリを進化させられることです。
改良例1：背景色を変更する
アプリの背景を淡い水色にしてください。ボタンは丸みのあるデザインに変更してください。
改良例2：文字を大きくする
スマートフォンでも見やすいように、文字とボタンを大きくしてください。
改良例3：期限を設定する
ToDoリストの各項目に期限を設定できる機能を追加してください。期限が近い順に並べ替えられるようにしてください。
改良例4：データを保存する
ブラウザを閉じたり再読み込みしたりしても、ToDoリストの内容が消えないようにしてください。localStorageを使って保存してください。
localStorage（ローカルストレージ）は、ブラウザ内にデータを保存するための仕組みです。
同じブラウザで再びアプリを開いたときに、保存した内容を読み込めるようにできます。
ただし、ブラウザのデータを削除した場合や、別のパソコンを使った場合には、保存した内容を利用できないことがあります。
修正したコードを反映する方法
AIが新しいコードを生成したら、次の順番で操作します。
- 修正前の「index.html」を別名でコピーして保管する
- 新しいコードをコピーする
- 「index.html」の内容を新しいコードに置き換える
- ファイルを保存する
- ブラウザを再読み込みする
- 追加した機能が動くか確認する
小さく作り、少しずつ改良することが成功のコツです。
【スライド⑫：AIへの追加指示でアプリをもっと便利にしよう！】
⑬ エラーが出ても大丈夫！AIと一緒に解決しよう
AIが作ったコードでも、エラーが発生することがあります。
例えば、次のような問題です。
- 追加ボタンを押しても反応しない
- 画面のレイアウトが崩れている
- チェックを付けても表示が変わらない
- 保存したファイルを開いても正しく表示されない
こうした場合も、AIに相談できます。
エラー解決の基本手順
1．何が起きているか確認する
どのボタンを押したときに、どんな問題が発生するのか整理します。
2．エラーメッセージを確認する
エラーメッセージが表示されている場合は、その内容をコピーします。
表示されない場合もあるので、無理に探す必要はありません。
3．AIに状況を伝える
例えば、次のように質問します。
ToDoリストの追加ボタンを押しても、項目が表示されません。
原因を調べて、初心者にもわかるように説明してください。
修正したコードを、1つのHTMLファイルとして最初から最後まで表示してください。
必要に応じて、現在のコードも一緒に送ります。
4．修正したコードを試す
AIが提示した修正内容を確認し、新しいコードを保存して動作を確かめます。
5．解決しない場合は追加で質問する
修正しても同じ問題が発生します。別の原因を考えて、解決方法を教えてください。
このように、状況を具体的に伝えることが大切です。
なお、エラーが出た画面のスクリーンショットを送る方法もあります。ただし、個人情報やパスワードが写っていないか確認してください。
エラーは失敗ではなく、アプリを改善するための手がかりです。
【スライド⑬：エラーが出ても大丈夫！AIと一緒に解決しよう】
⑭ 初心者が覚えておきたい成功のコツ3選！
ここまでアプリを作ってきました。
最後に、バイブコーディングを続けるための3つのコツを紹介します。
コツ1：やりたいことを具体的に伝える
AIへの指示が具体的なほど、希望に近い結果を得やすくなります。
例えば、
「ToDoアプリを作って」
よりも、
「項目の追加・完了チェック・削除ができる、初心者向けのToDoアプリを作って」
と伝えた方が明確です。
コツ2：小さく作って少しずつ改良する
最初から多くの機能を追加すると、問題が起きたときに原因を見つけにくくなります。
まずは基本機能だけを作りましょう。
その後で、デザイン変更、期限設定、データ保存などを追加していきます。
コツ3：わからないことは遠慮せず質問する
専門用語がわからない場合は、AIに質問してください。
例えば、
このコードの意味を、小学生にもわかるように説明してください。
専門用語を使わず、具体例を交えて教えてください。
といった質問もできます。
AIの説明が難しければ、さらに簡単に説明してもらいましょう。
ただし、AIの回答には誤りが含まれる場合があります。必ず実際の動作を確認し、重要な情報は信頼できる資料でも確かめてください。
また、パスワードや個人情報などを不用意に入力しないよう注意しましょう。
【スライド⑭：初心者が覚えておきたい成功のコツ3選！】
⑮ 今回のまとめ！次回はプロンプトのコツを学ぼう
今回は、ChatGPTを使って初めてのToDoアプリを作る方法を学びました。
ここで、今回の流れを振り返ってみましょう。
今回できるようになったこと
- ChatGPTにアプリ制作をお願いする
- プロンプトを使って必要な機能を伝える
- HTML・CSS・JavaScriptの基本的な役割を理解する
- AIが生成したコードを保存する
- 保存したアプリをブラウザで動かす
- AIへの追加指示で機能を改良する
- エラーが発生したときにAIへ相談する
最初は難しく感じたかもしれません。
しかし、実際にやってみると、AIとの会話だけでもアプリ制作の多くの工程を進められることがわかったのではないでしょうか。
今回の一番大切なポイントは、プログラミングをすべて理解してから始める必要はないということです。
もちろん、アプリの仕組みやコードの意味を少しずつ学べば、より安全で便利なものを作れるようになります。
まずは小さな成功体験を積み重ねていきましょう。
次回予告｜バイブコーディング超入門講座 第3回
次回は、今回も使用した「プロンプト」をさらに詳しく学びます。
テーマは、
「AIからより良い回答を引き出すプロンプトのコツ」
です。
同じAIを使っていても、指示の出し方によって回答の内容は大きく変わります。
次回は、具体的なプロンプトの改善例や、初心者でもすぐに使える指示のテンプレートを紹介します。
どうぞお楽しみに！
【スライド⑮：今回のまとめ！次回はプロンプトのコツを学ぼう】
おわりに
今回の講座では、AIと一緒に最初のWebアプリを作る方法を紹介しました。
もし途中でうまくいかなくても、何度でもやり直せます。
まずはChatGPTを開き、今回紹介したプロンプトを入力するところから始めてみてください。
そして、自分で作ったアプリが動く楽しさを体験してみましょう。
バイブコーディングは、アイデアを形にするための新しい選択肢です。
これからも一緒に学んでいきましょう！
最後までお読みいただき、ありがとうございました。