Skip to content

article.md

Latest commit

 

History

History
343 lines (223 loc) · 14.8 KB

article.md

File metadata and controls

343 lines (223 loc) · 14.8 KB
Raw

変数

ほとんどの場合、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';

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

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

*!*var*/!* message = 'Hello';

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

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


## 現実での例え 

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

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

![](variable.svg)

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

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

message = 'Hello!';

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

alert(message);
```

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

![](variable-change.svg)

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

```js run
let hello = 'Hello world!';

let message;

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

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

````warn header="2回宣言すると、エラーが発生します"
変数は一度だけ宣言する必要があります。

同じ変数の繰り替えし宣言はエラーになります:

```js run
let message = "This";

// 'let' の繰り返しはエラーになります
let message = "That"; // SyntaxError: 'message' has already been declared
```
そのため、変数は1度だけ宣言し、その後は `let` なしで参照する必要があります。

変数の値の変更を禁止する[関数型プログラミング言語](https://ja.wikipedia.org/wiki/関数型言語)と呼ばれる言語も存在することを知っておくと良いかもしれません。関数型言語の例として[Scala](http://www.scala-lang.org/) や[Erlang](http://www.erlang.org/)が挙げられます。

このような言語では、一度"箱の中"に格納された値は、永遠に変化することがありません。もし他の値を"箱の中"に格納したい場合、新たな箱を作る、すなわち新たな変数を宣言する必要があります。一度使った変数を再利用することはできません。

一見すると少し奇妙に見えるかもしれませんが、それらの言語は本格的な開発に適しています。それ以上に、並列計算のような分野ではこの制限が恩恵をもたらしさえします。このような言語を勉強することは視野を広げるために推奨されています(たとえすぐにそれを使う予定がなくても)。

変数のネーミング

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

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

変数名の例:

let userName;
let test123;

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

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

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

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

alert($ + _); // 3

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

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

let my-name; // ハイフン '-' は名前で許可されていません
変数名 `apple` と `AppLE` -- は2つの異なる変数です。

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

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

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

[予約語の一覧](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Lexical_grammar#Keywords)があります。これらは言語自身によって使用されるため、変数名として使用することはできません。

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

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

```js run no-beautify
let let = 5; // "let" という変数名にはできません、エラーです!
let return = 5; // 同様に "return" という名前もエラーです!
```

````warn header="use strict なしでの代入"

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

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

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

alert(num); // 5

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

"use strict";

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

## 定数 

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

```js
const myBirthday = '18.04.1982';
```

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

```js run
const myBirthday = '18.04.1982';

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

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


### 大文字の定数 

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

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

例えば、いわゆる "web"(16進数) 形式での色の定数を作りましょう:

```js run
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進数のような)と、実行中にランタイムで *計算* されますが、代入後は変更されないものがあります。

たとえば:
```js
const pageLoadTime = /* webページの読み込み時間 */;
```

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

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

## 正しい名前をつける 

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

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

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

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

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

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

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

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

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

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

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

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

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

## サマリ 

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

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

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