【英語のJavaScriptチュートリアルビデオでプログラミング学習】まずは基本的な「変数」の使い方

ここからはJavaScriptの具体的なコーディング方法、つまりシンタックス（構文）に入っていきます。最初は「変数」です。変数はvariable（バリアブル)で、もともとはvary（変わる）という動詞です。よく「～によって変わる」と言いますが、それに使われます。

The number of customers varies depending on seasons.
客の数は季節によって変わります。

ということでvariableは何か変わるもの。何が変わるか、まずはビデオを聞いてみてください。下のリンクをクリックすると該当箇所からスタートします。そこから、彼の名前で変数を作る場面まで。Next we're going to look at constantsというところまでです。

ここまで。

変数の基礎知識

まずは変数の基本的な意味をこう説明しています。

We use a variable to store data temporarily.
変数はデータを一時的に保存するのに使う。

temporaryは「一時的な」という意味で、逆の意味はpermanent「永久的」、あるいは、persistent「ずっと、持続して」です。変数は一時的に保存するもので、その場所はメモリです。一方、permanentlyあるいはpersistentlyにデータを保存する場所はハードディスクです。時と場合にもよりますが、基本的にパソコンを消すとメモリからはデータが消えます。でもハードディスクのデータは残ったまま。これがtemporarilyとpermanentlyの違いです。ちなみにディスクにデータが残るという場合にpersist（存続する）という動詞を使うことがあります。

The data persists for at least four week.
データは割いてでも４週間残ります。

さて、変数とは、メモリーのある場所にデータを置いて、そこに名前を付けておくと、後でそのデータを取り出すことができると説明しています。

そこでまたこのフレーズです。

Here is a metaphor.
例えるならこうです。

metaphorは「比喩」です。これは前回、HTMLとJavaScriptの分離の話でも出てきました。詳しい説明はそちらをご覧ください。

前回のメタファーはちょっとかすった感じがしますが、今回のはもっともな例えだと思います。これはあえて解説はいらないと思います。

変数の名前を付ける場合はvarではなくletを使う

まず、データの入れ物である変数を作ることをdeclare（宣言する）と言います。普段はなかなか使わないので「デクレアー」と聞いてもわからないと思います。プログラミングではよく使う動詞なので覚えておいてください。「宣言」はdeclarationで、アメリカの「独立宣言」ってありますよね。あれがthe Declaration of Independenceと言って、この単語を使います。

冒頭に説明しているのは変数の宣言ではこれまでvar（まさにvariableのvarです）を使っていたのが、今はletを使うのがbest practiceだと言っています。なぜかはまた後でじっくり学習します。今はとにかくletを使うと覚えておけば大丈夫です。

そこで、まず作ったのがnameという名前の変数です。

let name;

そしてこの変数の中身を見るために、例のコンソール画面に表示させようとしています。そこで、前回作ったindex.jsを使ってVisual Studio Codeにこのコードを書いてみます。

index.jsのファイルを作る話は前編で詳しく説明しているので、それに沿ってコードを作ってみてください。ここにもう一度リンクを貼っておきます。

ちなみにMoshさんのビデオでは、左にVSCode、右にブラウザのコンソール画面を一緒にした便利そうな形で表示していますが、実際はこんなに便利な表示をしてくれるツールがあるわけではありません。全編をやった方は理解できると思いますが、次の手順に沿ってやってください。

１．まず上のコード２行を書く。
２．index.htmlのところで右クリック、Open with Live Serverを選択。
３．ブラウザが立ち上がって真っ白い画面が出る。
４．どこかで右クリックして「検証ツール」「開発ツール」を選択。
５．検証画面でConsoleのタブを探してクリック。
６．そこにundefinedが表示されている。

変数の基本を理解するステップなので「何でこんなコードを書いているの？」と思うかもしれませんが、ここは我慢してついていってください。

要は、nameという変数（入れ物）を作ってみたので、まずは何が入っているか見てみましょうということです。そこでconsole.logというメソッドを使うとその変数の中身を見ることができるわけです。

ただ、入れものを作っただけなので中に何かが入っているはずはありません。Moshさんはあえてそこを確認しようと、半ば強引に中身を表示させたわけです。なにが出てきたかというと、

The value is undefined.
値は”未定義”のままです。

defineは「定義する」、それにunが付いているので「定義されていない」という意味。空の中身を表示させようとするとJavaScriptではこんなのが出てくるということです。

ならば入れ物に何かを入れたくなります。そこで適当に日本語で名前を入れてみましょう。

let name = '佐藤";

すると今度はコンソールに「佐藤」が表示されたはずです。

これで変数が空になっている状態と何か中身が入った状態のイメージが湧くと思います。

ここで入れ物には「文字列」を入れました。文字列を入力するには普通の引用符と二重引用符のどちらも使えますが、Moshさんはこう説明しています。

It's more common to use single quotes for declaring strings in JavaScript.
JavaScriptで文字列を宣言する場合は引用符を使うほうが普通です。

変数の名前にはルールがある

ここでの変数の名前はnameでしたが、その名前の付け方として５つのルールを説明しています。それをコード内に「コメント」として書き込んでいます。

//Cannot be a reserved keyword
（予約されたキーワードは使えない）
//Should be meaningful
（意味がある名前にする）
//Cannot start with a number
（数字からスタートできない）
//Cannot contain a space or hyphen
（スペースやハイフンを含むことができない）
//(They) are case-sensitive
（大文字小文字の区別がある）

コード内ではスラッシュ二つから始まる行はコメント行と言って、メモを書き込むことが できます。皆さんもやってみるとわかりますが、VSCodeでスラッシュ二つを入れて文字を書き込むと色が変わりますよね。それがコメント行です。コードの説明に使うということは、これも前編で説明していました。

そして”意味ある”名前の付け方の説明として

let firstName

これをCamel Notationと言っています。Notationは「表記」、Camelはそう、ラクダです。なぜラクダ？それは小文字と大文字を混在させるからです。ラクダのこぶがデコボコになっているイメージからその言葉が使われています。具体的には、「変数名の最初の単語の文字は小文字、次の単語の文字を大文字にする」ということです。例としては、

firstName
lastName
mailAddress
storageSize

変数に値を入れておく「初期化」

この「初期化」という概念もプログラミングでよく出てきます。英語ではinitialize（イニシャライズ）。イニシャルを書くことではありません。あらかじめ変数にデータを入れておくこと、つまり空の入れ物のままにしないということです。まず、

let firstName, lastName;

変数の宣言だけならこうやって列記するだけでOKです。あるいはそれぞれの入れ物の宣言だけではなく、実際に値を入れておくことができます。

let firstName = '太郎', lastNme = '山田';

この作業のことをInitializeと言います。

ところがMoshさんは、変数の宣言は別行にしたほうがよいとすすめています。

let firstName = '太郎';
let lastNme = '山田';

これをmodern best practice、つまり「最近のベストプラクティス」としてはこのやり方がよいということです。