ほとんどの場合、JavaScript アプリケーションは情報を処理する必要があります。ここに2つの例があります。

  1. オンラインショップ – 情報は “売られている商品” や “ショッピングカート” などが考えられます。
  2. チャットアプリケーション – 情報は “ユーザ”、“メッセージ” やその他より多くのものが考えられます。

変数は情報を保持するために使われます。

変数

変数 はデータのための “名前付けされた格納場所” です。私たちは商品や訪問者、その他のデータを格納するために変数が利用できます。

JavaScriptで変数を作るには、let キーワードを使います。

下の文は “message” という名前の変数を作ります(別の言い方: 宣言 または 定義 ):

let message;

代入演算子 = を使って、データを置く事ができます。

let message;

message = 'Hello'; // 文字列を格納します

今、文字列は変数に関連付けられたメモリ領域に保存されています。変数名を使ってアクセスすることができます。:

let message;
message = 'Hello!';

alert(message); // 変数の中身を表示します

簡潔にするために、変数宣言と代入を1行で書くことができます。

let message = 'Hello!'; // 変数宣言と値の代入

alert(message); // Hello!

また、1行で複数の変数を宣言することもできます。

let user = 'John', age = 25, message = 'Hello';

より短いように見えるかもしれませんが、これは推奨しません。可読性のため、1変数1行にしてください。

複数行のケースはちょっと長くなりますが、読みやすいです。

let user = 'John';
let age = 25;
let message = 'Hello';

多くの変数がある場合、このように書く人もいます:

let user = 'John',
  age = 25,
  message = 'Hello';

…もしくは “カンマから始まる” スタイル:

let user = 'John'
  , age = 25
  , message = 'Hello';

技術的にはこれらすべてのパターンは同じです。なので、これは個人の好みと美学の問題です。

let の代わりに var

古いスクリプトには、別のキーワードがあるかもしれません: let の代わりに var です:

var message = 'Hello';

キーワード varletほとんど 一緒です。それも変数を宣言します。が、わずかに違います, 伝統的スタイルのやり方です。

letvar には微妙な違いがありますが、まだ気にする必要はありません。その詳細については、古い "var" のチャプターで説明します。

現実での例え

ユニークな名前のステッカーを付けたデータの “箱” として想像すれば、“変数” という概念を簡単に把握できます。

たとえば、変数 message は値 "Hello!" を持った "message" とラベル付けされた箱として想像することができます。:

箱の中にはどんな値でも入れることができます。

また、それを変えることもできます。値は必要なだけ何度でも変更することができます。

let message;

message = 'Hello!';

message = 'World!'; // 値の変更

alert(message);

値が変更されたとき、古い値は変数から削除されます。

私たちは2つの変数を宣言して、ある変数から別の変数にデータをコピーすることもできます。

let hello = 'Hello world!';

let message;

// hello から message に 'Hello world' をコピー
message = hello;

// これで2つの変数は同じデータを持ちます
alert(hello); // Hello world!
alert(message); // Hello world!
関数言語

変数の値の変更を禁止するfunctionalプログラミング言語も存在することも知っておくと良いかもしれません。たとえば, Scala または Erlang です。

このような言語では、一度 “箱の中に” 値を格納すると、それは永遠です。もし他の何かを格納する必要がある場合、その言語は新しいボックスを作ることを強制します(新しい変数を宣言します)。古いものを再利用することはできません。

一見すると少し奇妙に見えるかもしれませんが、それらの言語は本格的な開発が可能です。それ以上に、並列計算のようなこの制限が確かな利益を与える領域があります。このような言語を勉強することは見識を広げるために推奨されます(たとえすぐにそれを使う予定がなくても)。

変数のネーミング

JavaScript変数名は2つの制限があります:

  1. 名前は文字、数字、記号 $_ のみを含む必要があります。
  2. 最初の文字は数字であってはいけません。

変数名の例:

let userName;
let test123;

名前に複数の単語を含む場合、camelCase が一般的に使われます。 つまり: 単語が続々と続き, 各単語は大文字で始まります。: myVeryLongName.

興味深いことに – ドル '$' や アンダースコア '_' も名前に使うことができます。それらは単に文字にように特別な意味をもたない普通の記号です。

これらは有効な名前です:

let $ = 1; // 名前 "$" の変数を宣言
let _ = 2; // またここでは名前 "_" の変数です

alert($ + _); // 3

正しくない変数名の例です:

let 1a; // 数値から開始はできません

let my-name; // ハイフン '-' は名前で許可されていません
大文字小文字の区別

変数名 appleAppLE – は2つの異なる変数です。

英語以外の文字も使用できますが、推奨されません。

キリル文字や象牙文字を含め、どの言語を使うことも可能です。:

let имя = '...';
let 我 = '...';

技術的には、ここでエラーは起きず、このような名前も許可されます。しかし変数名では英語を使うのが国際的な伝統です。たとえ小さなスクリプトを書いているとしても、そのコードはこの先も残るかもしれません。他の国の人々がそれを見ることがあるかもしれません。

予約された名前

予約語の一覧があります。これらは言語自身によって使用されるため、変数名として使用することはできません。

たとえば、単語 let, class, return, function は予約されています。

下のコードは構文エラーです:

let let = 5; // "let" という変数名にはできません、エラーです!
let return = 5; // 同様に "return" という名前もエラーです!
use strict なしでの代入

通常、変数を使う前に定義する必要があります。しかし、以前は let なしで、単に値を代入するだけで変数を作成することが技術的に可能でした。use strict でない場合には今でも動作します。この動作は古いスクリプトの互換性のために維持されています。

// 注意: この例は "use strict" なしモードです

num = 5; // 存在しなかった場合、変数 "num" が作られます

alert(num); // 5

これは悪い習慣です、strict モードではエラーになります:

"use strict";

num = 5; // エラー: num が未定義です

定数

定数を宣言するためには、 let の代わりに const を使います。

const myBirthday = '18.04.1982';

const を使って宣言された変数は “定数” と呼ばれます。それらは変更することが出来ません。変更しようとするとエラーになります:

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // エラー, 定数の再代入はできません!

プログラマがその変数は決して変更されるべきでないと確信するとき、それを保証しつつみんなにその事実を明示的に示すために const を使います。

大文字の定数

実行する前に分かっているが、覚えるのが難しいという値に対しては、エイリアスとして定数を使うという慣習は広く行われています。

このような定数は大文字とアンダースコアを使って名前がつけられます。

このように:

const COLOR_RED = "#F00";
const COLOR_GREEN = "#0F0";
const COLOR_BLUE = "#00F";
const COLOR_ORANGE = "#FF7F00";

// ...色を使う必要がある場合、次のようにします
let color = COLOR_ORANGE;
alert(color); // #FF7F00

メリット:

  • COLOR_ORANGE"#FF7F00" よりも覚えるのが遥かに簡単です。
  • COLOR_ORANGE よりも "#FF7F00" のほうがタイプミスをし易いです。
  • コードを読むとき、#FF7F00 よりも COLOR_ORANGE のほうがより意味があります。

いつ定数に大文字を使うべきなのか、いつ通常の名前をつけるべきなのかを明らかにしましょう。

“定数” であることは、その値は決して変わらないことを意味します。が、実行する前に知られている定数(赤の16進数のような)と、実行中にランタイムで 計算 されますが、代入後は変更されないものがあります。

たとえば:

const pageLoadTime = /* webページの読み込み時間 */;

pageLoadTime の値はページロードする前にはわからないので、通常の名前がつけられます。しかし代入後は変更されないのでこれも定数です。

つまり、大文字の名前の定数は “ハードコードされた” 値のエイリアスとしてのみ使います。

正しい名前をつける

変数について話すとき、もう1つ極めて重要な事があります。

変数は分かりやすい名前にしてください。必要に応じて考えましょう。

変数のネーミングは、プログラミングにおいて、もっとも重要で複雑なスキルの1つです。変数名をちょっと見れば、どのコードが初心者で書かれ、どれが経験豊富な開発者によって書かれたものかがわかります。

実際のプロジェクトでは、スクラッチで完全に分離された何かを書くよりも、既存のコードベースの修正や拡張に最も時間を費やします。そして、何か他のことをした後にコードに戻ったとき、よくラベル付けされた情報を探すのははるかに簡単です。それは言い換えると、適切な名前がついている変数、です。

変数を宣言する前に正しい名前について考えるようにしてください。それは多くのことに報いるでしょう。

いくつかの良いルールです:

  • userName または shoppingCart のように人間が読みやすい名前を使ってください。
  • 本当に何をしているか分かっている場合を除き、 a, b, c のような略語や短い名前は避けてください。
  • 最大限説明的、かつ簡潔な名前を作ってください。悪い名前の例としては datavalue です。このような名前からは何も分かりません。コンテキストからデータや値が意味することが例外的に明白な場合のみ使ってもOKです。
  • あなたのチームの中で、またあなた自身の心の中で用語を統一してください。もしあるサイト訪問者が “ユーザ” と呼ばれる場合、関連する変数として currentVisitornewManInTown ではなく currentUsernewUser のように命名するべきです。

簡単に聞こえますか? 確かにそうですが、実際には良い説明的で簡潔な名前を作ることは簡単ではありません。頑張りましょう。

再利用 or 作成?

そして最後のメモです。新しい変数宣言する代わりに、既存の変数を再利用する傾向のある怠けたプログラマが中にはいます。

その結果、変数はステッカーの変更なしに異なったものを投げ入れる箱になります。今何が入っているでしょうか?誰が知っているでしょうか…? より細かくチェックが必要になります。

このようなプログラマは変数定義では多少節約しますが、デバッグで10倍以上の時間を失います。

余分な変数は良く、悪ではないです。

モダンなJavaScriptは minify したり、ブラウザは十分にコードを最適化します。なので、パフォーマンスの問題になることはありません。異なる値に対して異なる変数を使うことは、エンジンの最適化を助けることもあります。

サマリ

データを格納するために変数を宣言することができます。それは var, let, または const を使うことでできます。

  • let – は現代の変数宣言です。Chrome(V8)では、let を使うには、そのコードは strict モードである必要があります。
  • var – は伝統的なスタイルの変数宣言です。一般的には使いませんが、必要なときのために、チャプター 古い "var"let との微妙な違いを説明します。
  • const – は let のようですが、変数の値は変更することができません。

変数は、内部のことを簡単に理解できるように命名するべきです。

タスク

重要性: 2
  1. 2つの変数を宣言してください: adminname.
  2. "John"name に代入してください。
  3. 値を name から admin にコピーしてください。
  4. alert を使って admin の値を表示してください(“John” を出力がされるはずです)。

下のコードは、各行がタスクリストの該当する項目になります。

let admin, name; // 一度に2つの変数を定義できます

name = "John";

admin = name;

alert( admin ); // "John"
重要性: 3
  1. 我々の惑星の名前を持つ変数を作成してください。あなたはこのような変数の名前をどのように指定しますか?
  2. 現在の訪問者の名前を格納する変数を作成してください。あなたはそのような変数の名前をどのように指定しますか?

最初に、我々の惑星の名前に対する変数からです。

シンプルです:

let ourPlanetName = "Earth";

注意してください。より短い名前 planet を使うことはできますが、どの惑星を指しているかが明白ではありません。より冗長な方がよいです。少なくとも変数が長すぎない程度まで。

2つ目に、現在の訪問者の名前です。:

let currentUserName = "John";

ユーザが現在のものであることがわかっている場合は、これを userName に短縮することもできます。

現代のエディタや自動補完により、長い変数名を簡単に書くことができます。節約は不要です。3単語の名前は良いです。

また、もしあなたのエディタが適切な自動補完を持っていない場合には、新しいエディタ を入手してください。

重要性: 4

次のコードを検査してください:

const birthday = '18.04.1982';

const age = someCode(birthday);

ここで、私たちは定数 birthday の日付を持っており、age はいくつかのコードの助けを借りて birthday から計算されます(詳細はここでは重要ではないため、someCodeの中身はここでは書きません)。

birthday に対して大文字を使うのは正しいでしょうか? age はどうでしょう?

const BIRTHDAY = '18.04.1982'; // make uppercase?

const AGE = someCode(BIRTHDAY); // make uppercase?

私たちは一般に、"ハードコード "された定数には大文字を使用します。 つまり、実行前に値がわかっていて、コードに直接書き込まれている場合です。

このコードでは、birthday はまさにそうです。なので、大文字を使います。

対照的に、age は実行時に評価されます。 今日はある年齢で、1年後に別の年齢になります。コード実行によって変化しないという意味で一定ですがそれは birthday より “定数ではありません”。それは計算されるので、小文字を維持する必要があります。

チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。