0.セットアップ

前提: VS Code および Node.js がインストール済みであること

このドキュメントのゴール

このドキュメントを終えると、以下ができるようになります。

VS Code のターミナルを開き、コマンドを実行できる
作業フォルダを作成し、VS Code で開ける
JavaScript のファイルを作成し、node コマンドで実行して結果を確認できる

1. 実行環境の確認

本講義では、JavaScript というプログラミング言語を使ってプログラムを書きます。書いたプログラムは Node.js というソフトウェアを使って実行します。

プログラムは人間が読める言葉（JavaScript）で書かれていますが、コンピュータはそのままでは理解できません。Node.js が間に入って、JavaScript を読み取り、コンピュータが実行できる形に変換してくれます。

ここでは、Node.js が正しくインストールされていることを確認します。

ターミナルを開く

VS Code の画面下部にある ターミナル を開いてください。メニューから「ターミナル → 新しいターミナル」を選択するか、キーボードで `Ctrl + “ を押します。

ターミナルとは、コンピュータに対してコマンド（命令文）を入力して操作するための画面です。マウスでクリックする代わりに、文字を入力して指示を出します。
Node.js の確認

ターミナルが開いたら、以下のコマンドを入力して Enter キーを押してください。
Terminal window
```
node --version
```
v20.18.0 のようにバージョン番号が表示されれば、Node.js は正常にインストールされています。

「command not found」や「認識されていません」と表示された場合は、Node.js がインストールされていません。講師に確認してください。

2. 作業フォルダの準備

本講義で書くプログラムは、1つのフォルダにまとめて管理します。ここではそのフォルダを作成し、VS Code で開きます。

フォルダの作成

ターミナルで以下の2つのコマンドを順に実行してください。
Terminal window
```
mkdir js-practice
cd js-practice
```
1行目の mkdir js-practice は、js-practice という名前のフォルダを作るコマンドです（mkdir は「make directory」の略です）。→ コマンドリファレンス: mkdir

2行目の cd js-practice は、作成したフォルダの中に移動するコマンドです（cd は「change directory」の略です）。ターミナルでは、今いる場所（フォルダ）を基準にファイルを操作します。フォルダを作っただけではまだ外にいるので、cd で中に入る必要があります。→ コマンドリファレンス: cd
VS Code でフォルダを開く

VS Code のメニューから「ファイル → フォルダーを開く」を選択し、今作った js-practice フォルダを開いてください。

以降、すべてのプログラムはこのフォルダの中に作成していきます。

3. はじめてのプログラム

JavaScript のファイルを作成し、ターミナルから実行して結果を確認する流れを学びます。この流れは研修全体を通して使います。

3-1. プログラムを書いて実行する

VS Code の左側にあるファイル一覧の領域で右クリックし、「新しいファイル」を選択して hello.js という名前のファイルを作成してください。.js は JavaScript のファイルであることを示す拡張子です。たとえば .txt がテキストファイルを表すのと同じように、.js は「このファイルには JavaScript のプログラムが書かれている」ということを示します。

hello.js に以下の1行を記述してください。

console.log("Hello, World!");

ファイルを保存（Ctrl + S）したら、ターミナルで以下のコマンドを実行します。

node hello.js

Hello, World!

画面に Hello, World! と表示されましたか？これがプログラミングの第一歩です。

3-2. 今やったことの整理

ここで起きたことを順に追います。

hello.js というファイルにプログラムを書いた
ターミナルで node hello.js と入力して、Node.js に「このファイルを実行してほしい」と伝えた
Node.js がファイルを開き、中に書かれている console.log("Hello, World!") という命令を見つけた
Node.js がその命令を実行し、Hello, World! をターミナルに表示した

3-3. `console.log()` について

console.log() は、括弧の中に書いた値を画面（ターミナル）に出力する命令です。

console.log("おはようございます");
console.log(100);
console.log(3.14);

おはようございます
100
3.14

文字だけでなく数値も出力できます。プログラムを書いていると「この時点で値はいくつになっているのか？」「ここまで正しく動いているか？」を確認したい場面がよくあります。そのとき console.log() で値を出力して確認します。

console.log(100 + 200);
console.log(100 * 3);

300
300

同じ 300 でも、足し算の結果と掛け算の結果です。このように console.log() で計算結果を出力すれば、プログラムが正しく動いているかを1行ずつ確かめられます。console.log() は「今、何が起きているか」を目で見るための道具です。この先の学習で頻繁に使うので、書き方に慣れてください。

3-4. 複数行のプログラム

プログラムは上から下へ、1行ずつ順番に実行されます。multi.js を作成して、以下を記述・実行してください。

console.log("1行目");
console.log("2行目");
console.log("3行目");

1行目
2行目
3行目

出力を見ると、書いた順番の通りに表示されています。2行目が先に出力されたり、3行目が飛ばされたりすることはありません。

ではこの順番を入れ替えるとどうなるでしょうか。

console.log("3行目");
console.log("1行目");
console.log("2行目");

3行目
1行目
2行目

当然ですが、書いた順番の通りに出力されます。プログラムは「1行目」「2行目」という文字の意味を理解しているわけではなく、上から順に処理しているだけです。

3-5. エラーが出たら

プログラムに間違いがあると、Node.js はエラーメッセージを表示して停止します。試しに、わざと間違ったプログラムを書いてみましょう。error-test.js を作成してください。

console.log("Hello, World!"

閉じ括弧 ) を書き忘れています。実行すると以下のようなエラーが表示されます。

SyntaxError: missing ) after argument list

SyntaxError は「文法の間違い」を意味します。エラーメッセージを読むと「引数リストの後に ) がない」と書かれています。つまり Node.js は「ここに ) があるはずなのに見つからなかった」と教えてくれています。

閉じ括弧を追加して修正し、再度実行すると正常に動きます。

console.log("Hello, World!");

エラーが出ても慌てる必要はありません。エラーメッセージを読んで、該当箇所を修正すれば問題ありません。プログラミングではエラーは日常的に発生するものです。

3-6. コメント

プログラムの中で // と書くと、そこから行末までは コメント として扱われ、実行時に無視されます。

// 計算の途中経過を確認する
console.log(100 + 200); // 300

コメントはプログラムの動作に影響しません。コードの意図を補足したり、一時的にコードを無効化したりするために使います。この先のドキュメントでは、コード例の中に // 結果 のような形でコメントが登場します。