JavaScriptで、書いてみる

新しいのは、表記だけ

ここまでの7つのレッスンで、あなたは名づけ、くりかえし、もしも、関数という道具を手に入れました。今日はそれを、JavaScriptという言語で書き直します。世界中のウェブページの裏側で動いている、いま地球でいちばん使われているプログラミング言語です。

先に約束しておきます。このレッスンに、新しい概念はほぼ出てきません。 変わるのは書き方だけ——漢字で書いていた手紙をローマ字で書き直すようなもので、伝える中身はもう全部あなたの中にあります。

ひとつだけ、先に正直に言っておくことがあります。この章の道具には、絵を描くキャンバスがありません。文字だけの世界です——でも文字だけでも、レッスンの最後に山を描きます。

console.log は「と いう」

まず、いちばん基本の一往復から。下を実行してみてください。

console.log("ことばの庭");
console.log("こと" + "ば");

console.log(〜) は、にわ語の 〜 と いう です。console は「操作卓」、log は「記録する」——操作卓に書き出す、という意味の英語です。

読み方の部品はこうです。文字列（ことば）は " で囲んで「ここからここまでが中身です」と示し、+ で文字列をつなぐ——これはにわ語と同じです。行末の ; は、日本語の句点「。」にあたる「文の終わり」の印です。

とよぶ は const、にする は let

レッスン2の「とよぶ」と「にする」の区別を、覚えていますか。あの区別が、ここでそのまま効いてきます。

const kankaku = 40;
console.log(kankaku);
console.log(kankaku + kankaku);

const kankaku = 40; は「40 を かんかく とよぶ」です。const は constant（変わらないもの）の略で、付け替えない名前を宣言します。名前はローマ字で書いていますが、実は日本語の名前も動きます——ただ世界のコードのほとんどがローマ字なので、この庭もそれにならいます。

では、付け替えたいときは。let を使います。

let nagasa = 10;
console.log(nagasa);
nagasa = nagasa + 15;
console.log(nagasa);

3行目の nagasa = nagasa + 15; は、レッスン2でやった「ながさ を ながさ + 15 にする」、あのあだ名の引っ越しです。はじめての名づけには let か const、付け替えには = だけ。

ここで実験をひとつ——上のエディタの let を const に変えて、実行してみてください。コンピュータは「constant（変わらないもの）に付け替えようとしましたね」という趣旨の英語で、誠実に断ってきます。レッスン1で学んだとおり、これは失敗ではなく返事です。

「4 かい くりかえす」を、解剖する

次は、くりかえしです。先に予告すると、JavaScriptの for は多くの人がつまずく場所です——部品が3つ、1行に詰めこまれているからです。ゆっくり解剖しましょう。

for (let i = 0; i < 4; i++) {
  console.log(i);
}

にわ語の「4 かい くりかえす」は、回数だけ言えば済む、よくできた省略でした。for はその省略が隠していた中身を、全部見せてくる書き方です。丸かっこの中に、; で区切られた3つの部品が並んでいます。

• let i = 0 ——名づけです。「i という名前を作って、0と呼ぶ」。回数を数える係の誕生です
• i < 4 ——続ける条件です。「i が 4 より小さいあいだは、くりかえす」
• i++ ——一歩です。i = i + 1 の省略形で、ひとまわり終わるたびに i がひとつ増えます

実行結果を見てください。0、1、2、3——4回くりかえしたのに、最初は 0 で、4 は出ません。 ここは正直に言うと、初めて見た全員が「えっ」となる場所です。

こう読んでください。i は「いま何回目か」ではなく「もう何回終わったか」。始まる前は0回終わっていて、4回終わったら i < 4 が成り立たなくなって止まる——そう読むと、つじつまが合います。

i < 4 を i < 7 にしたら、let i = 0 を let i = 2 にしたら——予想してから、実行して確かめてください。にわ語では見えなかった「数える係」が見えるようになったぶん、途中の数を自由に使えるようになりました。

引数——レッスン5の宿題を、回収する

レッスン5で関数を作ったとき、ひとつ不便がありましたね。にわ語の関数は、呼ぶたびにまったく同じことしかできない。「大きさだけ変えて、同じ花びらを」と頼めなくて、大きさちがいの関数を別々に作るしかありませんでした。

JavaScriptの関数は、その不便を解消します。

function hanabira(size) {
  console.log(`おおきさ ${size} の はなびら`);
}

hanabira(3);
hanabira(8);

function hanabira(size) の丸かっこの中の size が、このレッスンでいちばん新しい部品、**引数（ひきすう）**です。呼ぶ側が hanabira(3) と値を渡すと、関数の中では size がその値へのあだ名になる——名づけが、呼び出しの瞬間に起きるのです。同じ関数を、渡す値だけ変えて2回呼べていることを確かめてください。

もうひとつ、2行目の文字列は " ではなく `（バッククォート）で囲まれています。これはテンプレート文字列といって、中の ${size} の部分に値がはめこまれます。文字列の中に、値の置き場所を空けておく書き方です。

文字だけで、山を描く

キャンバスはなくても、文字は並べられます。文字列には .repeat(回数) という「くりかえし並べる」道具が最初から備わっています。

for (let i = 1; i <= 5; i++) {
  console.log("★".repeat(i));
}

★が1個、2個……と増えて、山の斜面が現れたはずです。i <= 5 は「5 以下のあいだ」——今度は 1 から始めて 5 を含めています。for の部品が見えていると、こういう調整が自分でできます。

仕上げに、今日の道具を全部つなぎます。名づけ、くりかえし、関数、引数。

function yama(takasa) {
  for (let i = 1; i <= takasa; i++) {
    console.log("★".repeat(i));
  }
}

yama(3);
yama(6);

「高さを渡して、山を呼ぶ」。にわ語ではできなかったことが、できるようになりました。yama(10) を足してみてください——連峰になります。

for (let i = 1; i <= 9; i++) {
  console.log(i);
}

function aisatsu(namae) {
  console.log("こんにちは");
}

aisatsu("はる");
aisatsu("あき");

このレッスンで分かったこと

• 新しかったのは表記だけ。「と いう」= console.log、「とよぶ」= const、付け替えるなら let
• for の3部品は名づけ・続ける条件・一歩。「かい くりかえす」が隠していた中身が見えた
• 関数は引数で、呼ぶたびにちがう値を受け取れる。レッスン5の不便がここで解消された
• テンプレート文字列（` で囲み、${ } に値をはめこむ）で、文字列に置き場所を空けられる

にわ語からJavaScriptへ、橋は渡りました。ここからは、書ける量が増えるぶん、まちがいの量も増えます。それは上達の印です。