JavaScript は、もともとWeb ページを動かすためにブラウザへ組み込まれた言語です。ボタンを押したら表示が変わる、入力をその場で確かめる、といった処理を受け持ってきました。
いまはブラウザの外でも動きます。サーバ、コマンドラインのツール、デスクトップアプリ、スマートフォンアプリまで、同じ言語で書けます。
まずは 1 行動かしてみます。下の「▶ 実行」を押すと、このページの中でコードが動き、結果が黒い欄に出ます。
console.log("こんにちは、JavaScript！");
console.log(1 + 2);こんにちは、JavaScript！
3console.log は、値を画面（コンソール）に出す命令です。Java の System.out.println、C# の Console.WriteLine、VBA の Debug.Print に当たります。この資料では、ほとんどの例でこれを使って結果を確かめます。
Java ・ C# ・ VBA から来た人へ: 名前は似ていますが、JavaScript と Java は別の言語です。生まれたときに、当時人気だった Java にあやかって名付けられただけです。文法の見た目（波かっこ { } や if の書き方）は似ていますが、考え方はかなり違います。
JavaScript を学ぶときは、言語そのものと、それを動かす環境を分けて考えると見通しがよくなります。
第1部では Node.js を実行環境として、言語そのものを学びます。ただし言語の部分はブラウザでも同じに動くので、この資料の「▶ 実行」ボタンはブラウザの中で実際にコードを動かしています。ファイルの読み書きのように Node.js にしか無い機能だけは、ブラウザでは動かせません。そうした例は、Node.js で動かしたときの結果を記録して見せます。
ヒント: 調べものをするときは、知りたいのが「言語」なのか「環境」なのかを意識すると、検索がうまくいきます。たとえば「配列を並べ替えたい」は言語の話、「ファイルを読みたい」は Node.js の話、「ボタンの色を変えたい」はブラウザの話です。
最初に戸惑いやすい違いを表にまとめます。細かいことは、それぞれの章で扱います。
| 項目 | Java ・ C# | VBA | JavaScript |
|---|---|---|---|
| 型の決まり方 | 変数に型を書き、コンパイル時に確かめる | Dim x As Long。書かなければ Variant | 変数に型は無い。値が型を持つ |
| 実行の前に | コンパイルが要る | エディタで実行 | コンパイル不要。書いたらすぐ動く |
| プログラムの入口 | main メソッドが要る | Sub を選んで実行 | ファイルの上から順に実行。入口は要らない |
| クラス | すべてのコードはクラスの中 | クラスモジュールは任意 | 使わなくてもよい。関数だけで書ける |
| 数値の型 | int ・ long ・ double … | Integer ・ Long ・ Double … | ふだん使うのは number の 1 種類だけ |
| 待ち時間のある処理 | スレッドや async | 基本的に待つ | 待たずに先へ進み、後で結果を受け取る（11 章） |
入口が要らないことを確かめてみます。クラスも main もありません。上から順に実行されるだけです。
function greet(who) {
return "ようこそ、" + who + " さん";
}
console.log(greet("ゲスト"));
console.log(greet("チーム"));ようこそ、ゲスト さん
ようこそ、チーム さん変数に型が無いことも見ておきます。typeof は値の型を調べる演算子です。同じ変数に、数値を入れた後で文字列を入れられます。
let x = 10;
console.log(typeof x);
x = "十";
console.log(typeof x);number
string注意: 型を書かなくてよい分、間違った型の値が入っても実行するまで気づけません。この弱点は 04 章（型変換）で詳しく見ます。型を書けるようにした言語が TypeScript で、この資料を終えた後の進み先になります。
第1部は 13 の資料で、勉強会 4 回と宿題で進めます。★ の付いた章が山場です。前半の山（04 ・ 07）で JavaScript らしい落とし穴を知り、後半の山（09 ・ 11）で最も大事な仕組みを身につけます。
例のコードには、ボタンが付いています。
下のコードを書き換えて、表示される文字を変えてみてください。
const message = "書き換えてみよう";
console.log(message);
console.log(message.length + " 文字");書き換えてみよう
8 文字結果はすぐに出るとは限りません。次の例は、1 行目がすぐ出て、2 行目は 1 秒後に出ます。こうした「待つ処理」は 11 章で扱います。
console.log("すぐ表示");
setTimeout(() => console.log("1 秒後に表示"), 1000);すぐ表示
1 秒後に表示間違いがあると、赤い字でエラーが出ます。エラーが起きた行で処理は止まり、その先は実行されません。
console.log("ここまでは動く");
console.log(undefinedValue);
console.log("ここは実行されない");ここまでは動く
Uncaught ReferenceError: undefinedValue is not definedエラーは英語で出ます。形はいつも「エラーの種類: 説明」です。上の例は「ReferenceError（参照のエラー）: undefinedValue は定義されていない」という意味です。この資料ではエラーを英語のまま載せ、訳を添えます。
メモ: エラーの文面は、実行するプログラムで少し変わります。この資料の文面は Chrome ・ Edge と Node.js のもので、この 3 つは同じ仕組み（V8）で動くため一致します。Firefox や Safari では言い回しが違うことがあります。先頭の Uncaught は「どこでも捕まえられなかった」という意味で、10 章で扱います。