プログラミング未経験者が、初めてVSCodeでコードを動かして書き換えてみた

※本記事にはPR(アフィリエイトリンク)が含まれます。

コードを書く場所も、どこで動くのかも、正直まったく分かっていませんでした。そんな自分が今日、初めて自分のパソコンでコードを動かして、しかも1か所だけ書き換えてみました。やったことは、ごはんを決めるアプリの「カレー」を「ラーメン」に変えただけ。それだけなんですが、画面がちゃんと変わった瞬間、思わず「お、変わった！」と声が出ました。

こたつ

自分が変えた部分が実際に動くと「おもしろい！」ってなりました。

この記事は、「プログラミングに興味はあるけど、コードってどこに書いてどこで動くの？」というレベルの人向けです。専門用語の解説じゃなくて、本当に何も分からなかった人間が、最初の一歩をどう踏んだかの記録です。読むのに5分くらい。プログラミング未経験で、AIに頼りながらこたつで独学しています。できた自慢じゃなく、こんな自分でもここまで来れた、という話として読んでください。

今回やりたかったこと

やりたかったのは、AIに作ってもらった「ごはんルーレット」という小さなアプリを、自分のパソコンで動かすこと。ボタンを押すと、今日の晩ごはんをランダムで選んでくれる、それだけのアプリです。

ただ、ここまでが長かった。前にAIからこのアプリのコードはもらっていたんですが、「で、このコードをどこに置いて、どうやったら動くの？」が本当に分からなくて、しばらく放置していました。コードって、なんだか難しくて、暗号にしか見えないじゃないですか。

なので今回のゴールは、めちゃくちゃ低く設定しました。アプリを自分のパソコンで表示させて、1か所だけ書き換えて、変化を見る。たったこれだけ。中身を理解するのは、今日はナシ。まず「動かす」を体で覚えることだけを目指しました。

やってみた

まず仕組みを教えてもらった

そもそも分からなかったので、AIに「コードってどこに書いて、どこで動くの？」と素直に聞きました。返ってきた答えがシンプルで、登場人物は3つだけ、と。コードを書く場所（VS Codeというアプリ）、保存されるファイル、動かす場所（ブラウザ）。この3つで、「書く→保存→ブラウザで開く→動く」という流れになっている、と教わりました。なるほど、特別な何かじゃなくて、ただのファイルなのか、とここで少し肩の力が抜けました。

ファイルを作って、ブラウザで開いた

VS Codeで新しいファイルを作って、名前を gohan.html にしました。もらっていたコードを全部貼り付けて、保存。そのファイルをブラウザにドラッグ＆ドロップしたら…出ました！。ごはんルーレットの画面が！。自分のパソコンの中で動いてる！。ボタンを押すと、ちゃんとメニューが選ばれる！。これだけで、けっこう感動しましたし、すごく面白いと感じました。

1か所だけ書き換えてみた

次に、コードの中のこの行を探しました。

let dishes = ["カレー", "生姜焼き", "鍋", "パスタ", "焼き魚", "親子丼", "おでん"];

この「カレー」を「ラーメン」に書き換えて、保存。ブラウザに戻って、ボタンを連打。…出た！。ちゃんと「ラーメン」が候補に入ってる！。自分でコードを変えて、結果が変わった。初めての体験でした。

詰まったところ

順調そうに書きましたが、1回つまずきました。「カレー」を「ラーメン」に書き換えたのに、ブラウザを見ても、まだ「カレー」が出てくる。え、なんで？ちゃんと変えたのに。

書き換えた行を、何度も見直しました。ちゃんと変更している、場所も合ってる。でも変わらない。2分くらい、「自分のやり方が間違ってるのかな」と画面とにらめっこしていました。何度ボタンを押しても、しれっとカレーが出てくる。地味にショックでした。

原因と解決

分からないので、状況をそのままAIに伝えました。「コードを書き換えたのに、ブラウザに反映されない」と。
最初から聞けばいいのに…と自分に言いつつ。

原因：2つの「忘れ」があった

返ってきた答えで、自分の勘違いが分かりました。コードを書き換えただけでは、ブラウザは何も変わらない。「保存」と「再読み込み」という2つの操作が必要だったんです。VS Codeで書き換えても、保存しないとファイルには反映されない。さらに、ファイルを保存しても、ブラウザは古い状態を表示したままなので、再読み込みしないと新しい中身を読みに行かない。自分は、この両方を飛ばしていました。書き換えた＝反映される、と思い込んでいたんですよね。

解決：保存して、再読み込みした

やったことは2つだけ。VS Codeで Cmd + S（保存）。そしてブラウザに切り替えて Cmd + R（再読み込み）。これで、ちゃんと「ラーメン」が出てきました。拍子抜けするくらい単純な原因でしたが、知らないと永遠に「なんで変わらないの？」とハマり続けるやつだな、と思いました。

今日わかったこと

コードを書き換えたら、「保存」と「ブラウザの再読み込み」をセットでやらないと、画面は変わらない。

当たり前のことかもしれません。でも、これを知らずに「書き換えたのに変わらない！」とハマる初心者は、絶対に多いはず。少なくとも自分はガッツリ引っかかりました。これからコードを書き換えるたびに必要になる動作なので、最初にここでつまずいておいて、むしろよかったかもしれません。自分で詰まって気づいたことは、ちゃんと頭に残るんですよね。

まとめ

今日やったのは、アプリを自分のパソコンで動かして、コードを1か所（「カレー」を「ラーメン」に）書き換えただけ。書き換えた文字数でいえば、たった3文字です。でも、「コードがどこで動くのか分からない」状態から、「自分で書き換えて変化させられる」状態まで来れました。

分からないことは全部AIに聞いて、詰まったところも一緒に抜けて、進めました。これがAI時代の学び方なのかもしれません。次は、書き換えるだけじゃなく、メニューを自分で増やしてみるところまでやってみます。