【第2回】AIに作業させる場所を用意する｜VS Code・Node.js・ターミナル（嫁子が教えるTS講座）
今回のゴール
- VS Code（コードを書くアプリ）が使える状態になる
- Node.js（コードを動かす仕組み）が入っていることを自分で確認できる
- ターミナルでJavaScriptを1行動かす
所要時間は30〜60分です。ダウンロードの待ち時間が大半なので、実際の作業は少しです。
前回（Webはどう動いているか）で地図を見たので、今回は作業場所を用意します。講座全体の流れは目次にあります。
嫁子: ここで身構える人が多いから、先に言っておくね。
今日入れるものは、全部「AIと一緒に作業するための場所」だよ。あなたが黒い画面に呪文を打ち込み続けるためじゃない。
- VS Code ＝ AIが書いたコードが表示される画面。Claude Code もここで動く
- Node.js ＝ AIが書いたコードを、実際に動かして試す場所
- ターミナル ＝ AIに実行させたコマンドの結果が出るところ
つまり今日やるのは、AIに働いてもらう作業台を組み立てること。料理でいえば、まだ何も作らずにキッチンを整えてる段階だね。
ちなみに最後に1行だけコードを動かすけど、それは作業台がちゃんと動くかの確認であって、手打ちの練習じゃないからね。
① VS Code を入れる
コードを書くための無料アプリです。メモ帳でも書けますが、色分けや入力補完があるので、最初からこれを使ってください。
- VS Code の公式サイト を開く
- 大きな青いボタンからダウンロードする（自動でお使いのOSを判別してくれます）
- ダウンロードしたファイルを開いて、指示に従ってインストール
日本語にする
初期状態では英語なので、日本語にしておきます。
- VS Code を開く
- 左端のアイコンが並んだ列で、四角が4つのアイコン（拡張機能）をクリック
- 検索欄に
Japaneseと入力 - 「Japanese Language Pack for Visual Studio Code」を Install
- 右下に出てくるボタンから再起動
嫁子: 拡張機能はあとで色々おすすめされると思うけど、今は日本語化だけでいいよ。
最初から10個も入れる人がいるけど、何がどの機能か分からなくなるだけ。必要になったときに1個ずつ足すのが、結局いちばん早いよ。
② Node.js を入れる
Node.js は、JavaScriptをブラウザの外で動かすための仕組みです。
前回、JavaScriptはブラウザが解釈すると言いました。でもそれだと、サーバー側で動かせません。Node.js を入れると、パソコンの中で直接JavaScriptを動かせるようになります。
- Node.js の公式サイト を開く
- 「LTS」と書かれたほうをダウンロード（もう一方の最新版は選ばない）
- インストーラーを開いて、基本は「次へ」で進める
嫁子: LTSを選ぶのが大事だよ。Long Term Support の略で、「長くサポートされる安定版」という意味。
もう一方は最新機能が入ってるけど、その分よく壊れる。初心者が最新版を選ぶ理由はひとつもないから、新しいほうが良さそう、で選ばないでね。
③ ターミナルを開いて、入ったか確認する
ターミナル（黒い画面）は、マウスを使わずに文字で命令を出すための道具です。
VS Code を開いて、上のメニューから「ターミナル」→「新しいターミナル」。画面の下半分に入力できる領域が出ます。
そこに、次のように打って Enter を押してください。
node -v
こういう表示が返ってくれば成功です（数字は違って構いません）。
v22.14.0
続けて、もう1つ確認します。
npm -v
10.9.2
npm は Node.js と一緒に入る道具で、他の人が作った部品を持ってくるときに使います。あとで大量に使うので、入っていることだけ確認しておきます。
嫁子: ここで
command not foundとか「認識されていません」って出たら、まだ入ってないよ。よくある原因は2つ。①インストール後にターミナルを開き直していない。これがいちばん多い。VS Code を完全に閉じて、開き直してもう一度試して。
②インストールが途中で失敗している。もう一度インストーラーを実行してみて。
焦らなくていい。ここでつまずくのは、あなたが悪いんじゃなくて、単にそういう仕組みだからだよ。
④ 初めてコードを動かす
道具が揃ったので、1行だけ動かしてみます。
フォルダを作る
- パソコンのどこでもいいので、
ts-lessonという名前のフォルダを作る（デスクトップで構いません） - VS Code のメニューから「ファイル」→「フォルダーを開く」で、そのフォルダを選ぶ
ファイルを作る
- 左側のエリアで、新しいファイルのアイコンをクリック
- ファイル名を
hello.jsにする
書く
そのファイルに、これだけ書いて保存（Ctrl + S、Macなら Cmd + S）してください。
console.log("嫁子です。ここから始めましょう");
動かす
ターミナルで、こう打って Enter。
node hello.js
こう出れば成功です。
嫁子です。ここから始めましょう
嫁子: おめでとう。作業台が動くことが確認できたね。
console.log()は、カッコの中身を画面に出す命令。AIが書いたコードにもこれが大量に出てくるから、意味だけ知っておいて。なぜ大事かというと、「思ったとおりに動かない」ときの調べ方がこれだから。AIに「ここの値がおかしい」と伝えるには、まず自分でその値を見る必要がある。これがディレクターの目になるんだよ。
つまずいたときの読み方
エラーが出ても慌てないでください。エラーメッセージは敵ではなく、いちばん親切なヒントです。
たとえばこういう表示が出たとします。
Error: Cannot find module 'C:\Users\you\hello.js'
これは「hello.js というファイルが見つかりません」と言っています。原因はほぼこの3つです。
- ファイル名が違う（
Hello.jsとhello.jsは別物として扱われます） - ファイルを保存していない（タブに丸印が付いていたら未保存です）
- ターミナルがいる場所と、ファイルの場所が違う
嫁子: エラーを読む習慣、ここでつけておいて。AIに丸投げする場合でも、これは必要だよ。
なぜかというと、エラーメッセージをそのまま貼れるかどうかで、AIの直しの精度が変わるから。「動きません」と言うのと、エラー全文を貼るのとでは、返ってくる答えの質が全然違うんだよね。
読み方は簡単で、ファイル名と
Error:の後ろだけ見ればいい。全部英語でも、その2つで見当がつく。意味が分からなければ、そのままAIに貼って「これ何？」と聞けばいい。それで十分だよ。大事なのは、閉じずに見ること。
今回のまとめ
- VS Code はコードを書くアプリ。日本語化だけしておけば、他の拡張機能は今は不要
- Node.js はJavaScriptをブラウザの外で動かす仕組み。必ず LTS版 を選ぶ
- npm は部品を持ってくる道具。Node.jsと一緒に入る
node ファイル名で動かせる。console.log()は中身を表示する命令- エラーが出たら、ファイル名と
Error:の後ろを読む
次にやること
次回は Git を扱います。「保存」とは別に、作業の履歴を残す仕組みです。「昨日は動いていたのに」という事故から自分を守るための道具で、これも早めに触れておくほど後が楽になります。
今回の宿題：hello.js の文字を好きなものに書き換えて、もう一度 node hello.js を実行してみてください。書き換えて保存しないと結果が変わらないことも、あわせて確認しておくと理解が早くなります。