『プログラミング未経験の私が、ChatGPTとコーヒー記録アプリを作った話②』

〜「まず何をしたらいいの？」編〜

「早速取り掛かりましょう」
　PowerPointで作った雑なイメージ図をChatGPTに見せると、そんな返事が返ってきました。
「いや、取り掛かるって何を？まず何をしたらいいの？」
　そんな状態です。

　すると、ChatGPTは次々と指示を出してきました。
「まずはVSCodeをダウンロードしましょう」
　……何それ？聞いたことのない単語が、急に当たり前のように出てきます。
　ただ、この時の私は、
「よく分からないけど、とりあえず言われた通りやってみるか」
　という状態でした。

　なので、まずは指示されたサイトを開き、言われるままダウンロードを始めました。
「VSCode」の正式名称はVisual Studio Code。
　マイクロソフトが提供している、プログラミング用のエディタです。
……と言われても、当時の私はもちろん意味が分かりませんでした。
　ざっくり言うと、「プログラムを書くための作業机」のようなソフトです。
　VSCodeはプログラミング向けに特化していて、コードを見やすく色分けしてくれたり、「ここ間違ってますよ」と教えてくれたり、必要なファイルを整理して表示してくれたりする。
　つまり、“初心者でも少しだけ作業しやすくしてくれる道具”という感じでした。

　VSCodeをインストールし終えて次はどうしたら良いか尋ねます。
　すると今度は、
「次はFlutterをインストールしましょう」
　と言われました。
　また知らない単語です。これもよく分からないまま、とりあえずダウンロード。
　Flutter（フラッター）は、簡単に言えば「作ったプログラムを、“ちゃんと動くスマホアプリ”に変えてくれる仕組み」でした。
　当時の私は、「VSCodeで文字を書けば、そのままアプリになる。」と思っていました。でも実際は、そう単純ではありません。
　VSCodeは、あくまで“文字を書く場所”です。たとえるなら、ノートや原稿用紙みたいなもの。そこにアプリの内容を書いても、そのままではただの文字の集まりでしかありません。
　例えば、
「ここにボタンを置く」
「カレンダーを表示する」
「押したら画面を切り替える」
　そんな指示を書いたとしても、それだけではスマホは理解してくれない。　
　そこで必要になるのがFlutterでした。Flutterは、その“ただの文字”を、「実際に動くアプリ」として組み立ててくれる仕組みだったのです。
　つまり、VSCodeが“文字を書く机”なら、Flutterは“それをアプリとして完成させる工場”みたいなイメージでした。
　……もちろん、当時の私はそんなことを理解していたわけではありません。
「なんかアプリを作るために必要らしい」
　本当に、それぐらいの認識でした。

　さらに今度はAndroid Studio。
　Android Studioは、「作ったアプリをパソコン上で試運転するためのソフト」でした。
　例えば、
「ボタンを押したら本当に動くのか」
「画面がちゃんと表示されるのか」
「エラーが出ていないか」
　そういうものを確認する場所が必要でした。
　その“確認用の作業場”みたいな役割をしていたのが、Android Studioだったのです。
　実際、パソコンの画面の中に“仮想スマホ”を表示して、その中でアプリを動かして確認できました。

　つまり、
・VSCodeでプログラムを書く。
・Flutterでアプリとして組み立てる。
・Android Studioで実際に動かして確認する。
　この3つが揃って初めてアプリ作りができるということなのです。
　当時の私は、そんな役割分担もまったく理解していませんでした。
「なんか色々必要なんだな……」
　本当に、それぐらいの認識です。

　3つをインストールし終えた私は、「次は何をすればいいんですか？」と、またChatGPTに尋ねました。
　すると、次の指示が飛んできます。
「PowerShellを開いてください」
　当然ですが、当時の私は「PowerShell」という単語すら知りません。しかも、ここで一つ疑問がありました。
「え？ それ、インストールしてないけど……？」
　VSCodeやFlutter、Android Studioは、自分でダウンロードして入れました。でも、PowerShellはそんな作業をした記憶がありません。
　検索してみるとPowerShellの文字とアイコンが出てくる。最初からWindowsの中に入っている機能でした。
　PowerShellは、“パソコンに直接指示を出すための画面”です。「この作業をしてください。」という命令を、文字で入力していきます。
　例えば、
「Flutterがちゃんと入っているか確認する」
「アプリ作成の準備をする」
「作ったアプリを動かす」
　そういう作業を、文字でパソコンに伝えていく場所だったのです。
　そして最初は、Windows側でPowerShellを単独で開いて使っていました。
　ただ、後からVSCodeの中にも「ターミナル」という機能があることを知ります。
　これは、VSCodeの中でPowerShellのような命令画面を使える機能でした。
　つまり、VSCodeでコードを書く。そのままVSCode内のターミナルのPowerShellで命令を実行する。という流れで作業できるようになっていたのです。

　VSCodeのソフトを開くと、コードを実際に書く「作業場所」と、それを実行する「命令を出す場所＝ターミナル（PowerShell）」が、画面の中でまとまって表示されるのです。

　PowerShellを開いたあと、ChatGPTは次のような文字列を入力するよう指示してきました。
　「flutter doctor」
　これをPowerShellにコピペしてEnter。もちろん、当時の私は意味なんて分かりません。
　すると、黒い画面の中に大量の英語が表示され始めました。しかも、よく見ると「✓」や「✗」のような記号も並んでいる。
　どうやら、Flutterを使うための準備がちゃんとできているか確認しているらしい。
　後から知ったのですが、「flutter doctor」というのは、“Flutter開発の健康診断”みたいな命令でした。
　必要なソフトが揃っているか。設定に問題がないか。それを確認するためのものだったのです。

　私は、表示された内容をそのままChatGPTにコピペしました。
　するとChatGPTが、
「次はこれを入力してください」
「この設定を追加してください」
　という感じで、次の指示を返してくるのです。

「表示された内容をChatGPTに渡す」
↓
「返ってきた指示をそのままコピペして実行する」

　ほぼ、その繰り返しでした。今振り返ると、私は“プログラミング”というより、“AIに導かれながら作業していた”に近かった気がします。
　ただ、ChatGPTに言われた通りに進めていると、いつの間にかパソコンの中に大量のフォルダやファイルが出来上がっていました。

「android」
「lib」
「test」
「pubspec.yaml」

　もちろん、何一つ意味は分かりません。
　ただ、「なんかアプリっぽいものが出来始めてる……」という感覚だけはありました。
　後から知ったのですが、これはFlutterが“アプリの土台”を自動で作っていたのでした。
　つまり私は、自分で一からアプリを作っていたというより、「AIに指示されながら、必要な準備を順番に進めていた」という状態だったのです。
　そして、そんな作業を繰り返していくうちに、いよいよ“実際にアプリの中身を書き始める段階”へ進むことになります。

　ChatGPTからは、
「まずは main.dart を開いてください」
　という指示が出ていました。どうやら、この main.dart というファイルが、“アプリの中身を書く中心部分”らしい。
　そして今度は、
「まずはカレンダー画面から作りましょう」
　という指示が出ます。
　事前にPowerPointで作った、かなり雑なイメージ図をもとにChatGPTが
「月ごとのカレンダーを表示します」
「日にちをタップしたらその日の詳細を下に表示します。そこに飲んだ記録を表示します」
　などと提案してくれます。
　私は言われるがままに「その提案通りで良いです。」と回答。
　するとChatGPTはすぐにコードを書き始めます。画面上にズラッとならぶコードの文字列に圧倒されます。
　完成すると「これをコピペしてください。」の指示。
　そして私は、そのコードをVSCodeへコピペ。もちろん、この時点ではコードの意味なんてほとんど分かっていません。
　コピペしたら次は何をするか聞いてみると、「ひとまずAndroid Studioで実行してみましょう」との指示。
　指示通りに「実行」のボタンを押すと例の“仮想スマホ”が表示されました。その中に、自分がPowerPointで描いたイメージに近いカレンダー画面が表示されたのです。
　あの瞬間は、かなり驚きました。
「うわ、本当にアプリっぽいものが動いた……」
　日にちをクリックすると画面の下に項目が出て、飲んだカプセルを記録できるようになっていました。
　もちろん、その時点ではまだ未完成です。デザインも簡素でしたし、記録機能もまだ途中段階。
　見た目だけなら、“試作品”と呼ぶのが正しい状態だったと思います。
　でも、それでも私はかなり感動していました。なぜなら、自分がPowerPointで雑に描いただけのイメージが、本当に「動く画面」として目の前に現れたからです。
　しかも面白かったのは、ChatGPTに、
「ここをもう少し大きくしたい」
「このボタンを下に置きたい」
「飲んだ記録をここに表示したい」
　そんなふうに伝えると、それに合わせたコードを次々と書いてくれることでした。
　もちろん私は、そのコードの意味をほとんど理解していません。それでも、「こうしたい」と伝えると、少しずつ形になっていく。
　その感覚は、今まで触れてきたゲームやソフトとはまったく違う体験でした。
「もしかして、本当に自分でもアプリが作れるのかもしれない」
　少しずつそんな期待を持ち始めていました。

この作品は【創作大賞2026　ビジネス部門】に応募します。
連載したものをマガジンにまとめております。
ぜひ続きをお読みいただき、フォローやコメントでの応援をよろしくお願いいたします。

#創作大賞2026 #ビジネス部門
#生成AI #ChatGPT #アプリ開発
#ドルチェグスト #コーヒー
#ネスカフェ #ネスレ