プログラミングとは

プログラムは命令の並びです。JavaScript はそれを、いちばん上の行から下へ、一つの文ずつ実行します。

コンピューターが従える命令

料理のレシピには「卵を二つ割って、かき混ぜて、フライパンに流しこむ」と書いてあります。読む人は、どのボウルを使うか、どれくらい強く混ぜるか、殻のかけらが入ったらどうするかなど、多くのことを自分でおぎないます。コンピューターは何もおぎないません。命令に書いてあるとおりのことを、書いてあるとおりの順番で実行し、意味のわからない命令に出会ったとたん、エラーで止まります。プログラミングとは、機械が従えるほど正確な命令を書く仕事です。

その命令はプログラミング言語で書きます。プログラミング言語は語彙が少なく、文法がきびしいので、どの行も一つのことだけを意味します。このコースでは JavaScript を使います。JavaScript はすべての Web ブラウザーに組みこまれている言語なので、実行するのに必要なものはもうそろっています。このページの練習ボックスは、今読んでいるブラウザーの中であなたのコードを実行します。JavaScript は Node.js などのツールを使ってブラウザーの外でも動き、ここで学ぶ基本はそこでも同じようにはたらきます。

はじめてのコード

ほとんどのプログラミングのコースは、コンピューターにメッセージを表示させることから始まります。JavaScript では次のようになります。

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

一つずつ読んでみましょう。console は、プログラムが実行している人に向けてメッセージを書く場所です。.log は「そこに一行書く」という意味です。かっこの中には書く内容が入り、ダブルクォーテーションは Hello, world! がコードの続きではなく文字列であることを示します。最後のセミコロンは、文の終わりの句点のように、命令を閉じます。このようなひとまとまりの命令を文といいます。実行すると、コンソールには Hello, world! と一行だけ表示されます。クォーテーションは表示されません。クォーテーションは、文字列がどこで始まりどこで終わるかを JavaScript に伝えるだけです。

上から下へ、一つの文ずつ

文がいくつかあるプログラムは、それを順番に実行します。一つめの文が終わるまで、二つめは始まりません。下のプログラムは三行を表示し、行はコードと同じ順番で出てきます。

console.log("Wake up");
console.log("Brush teeth");
console.log("Eat breakfast");
// 表示:
// Wake up
// Brush teeth
// Eat breakfast

最初の二行を入れかえると、出力も入れかわります。当たり前に聞こえますが、初心者のバグのかなりの部分は、文の順番の間違いから生まれます。値を計算する前に使ってしまったり、最後の品物を足す前に合計を表示してしまったりするのです。

コメントは人のためのメモ

上の例で、// で始まる行はコメントです。JavaScript は // からその行の終わりまでをすべて飛ばすので、自分やほかの読者に向けたメモを書けます。何行にもわたるメモは、/* で始めて */ で終えます。コメントは、行を消さずに止めておくのにも便利です。行の前に // をつければ、その行はもう実行されません。

うまくいかないとき

JavaScript は大文字と小文字を区別します。console.log は動きますが、Console.log や console.Log は動きません。consol.log のように名前のつづりを間違えると、ReferenceError: consol is not defined のようなメッセージが出てプログラムが止まります。閉じるクォーテーションやかっこが抜けていると SyntaxError になります。これはコードがそもそも正しい JavaScript ではないという意味なので、何も実行されません。エラーメッセージは最初はこわく見えますが、コンピューターがどこでつまずいたかを教えてくれているのです。メッセージの一行めを読み、そこに出てくる名前を見つけて、自分のコードと一文字ずつ見比べましょう。

練習ボックスの使い方

どの練習ボックスも、左にコード、右に出力があります（スマートフォンでは出力はコードの下）。「再生」でコードを実行します。キーボードの Ctrl+Enter か Cmd+Enter でも同じです。「答え合わせ」はコードを実行し、表示された各行を正解と比べます。つづり、大文字、行の中の空白もすべて数えます。「最初から」で元のコードにもどります。コードは閉じた枠の中で動くので、いろいろ試しても何もこわれません。