Reactプログラマーを目指す方必見！JavaScriptの変数と定数の基礎解説
当ブログでは、将来的にReactプログラマーを目指す方に向けて、JavaScriptの基礎を解説します。
今回は、JavaScriptの変数と定数について学習します。
また、スコープについても解説致しますが、詳しくは当ブログの別の記事で説明しています。
以下のリンクを参照してください。
JavaScript 変数
変数はJavaScript固有のものではございません。
実際、ほとんどすべてのプログラミング言語には変数の概念があります。
データを非常に簡単に処理および保存できます。
これはプログラムの実行中に使用できる値を格納するために使用されるオブジェクト(または名前付きメモリスペース)となります。
つまりJavaScript変数は単に保管場所の名前という事になります。
JavaScriptの変数は、他のプログラミング言語と同様に、名前、値、およびメモリアドレスを持っております。
・ 変数の名前は変数を一意に識別します。
・ 値は、変数に格納されているデータを参照します。
・ 変数に格納されている値は動的であり、プログラムの実行中にいつでも変更できます。
変数は単なる名前付きのメモリ位置です、変数に対して実行されるすべての操作は、そのメモリ位置に直接影響します。
そしてすべての変数は、使用する前に宣言する必要があります。
変数の宣言
変数を使う際には、まず変数を宣言する必要があります。
JavaScriptでは、「var」または「let」というキーワードを使用して変数を宣言します。
例えば、以下のように変数xを宣言することができます。
var x;
また、letを使って以下のように変数yを宣言することもできます。
let y;
var variable_name; // or let variable_name;
複数の変数を一度に宣言することもできます。
let x, y, z;
varキーワードは古いバージョンのJavaScriptで使用されており、現在は非推奨となっています。
また、varで宣言した変数は関数スコープとなります。
一方、letはES6（ES2015）以降で導入された新しい変数宣言方法で、ブロックスコープとなります。
これら、スコープは後に詳しく解説します。
つまり、letを使うことでより厳密に変数を管理することができます。
以上の点に注意しながら、適切に変数を宣言し、プログラムを作成していきましょう。
JavaScriptで変数を宣言する際には、いくつかのルールがあります。
最初のルールは、変数名にスペースを含めることができないということです。
変数名は文字（aからzまたはAからZ）、アンダースコア（_）またはドル記号（$）で始める必要があります。
例えば、以下のように変数を宣言できます。
let a = 'hello'; let _a = 'hello'; let $a = 'hello';
次のルールは、変数名の最初の文字の後に数字を使用することができるということです。
let x1 = 10; let myVariable123 = "Hello";
このように、letキーワードを使用して変数を宣言し、変数名の最初の文字の後に数字を使用しています。
しかし、変数名は数字で始めることはできません。
// これは有効な変数名です let x1 = 10; // これは無効な変数名です（数字で始まっている） let 1x = 10;
変数名には、任意の名前を付けることができますが、わかりやすい名前を付けることが望ましいです。
そしてJavaScript変数では、大文字と小文字が区別されます。
つまり、aとAは異なる変数として扱われます。
以下のように変数を宣言して、それらを出力できます。
let a = "hello"; let A = 10; console.log(a); // hello console.log(A); // 10
最後のルールは、JavaScriptの変数名または識別子として予約語を使用することができないということです。
予約語は、JavaScriptにすでに存在する単語であり、ifやforなどが含まれます。
これらの単語を変数名として使用することはできません。
以下は予約語を変数名に使用した例です。
let new = 5; // Error! newはキーワードです。
変数名には、意味を持たせることが望ましく、わかりやすい名前を付けることが推奨されます。
例えば、リンゴの数を格納するために変数を使用する場合は、「numberOfApples」などといった名前が良いでしょう。
これらのルールを遵守して、読みやすく、保守しやすいコードを書くことが重要です。
変数の命名規則
JavaScriptにおいて、変数名が複数の単語を含む場合、通常はcamelCase(キャメルケース)で記述されます。
キャメルケースとは、フレーズの途中にある各単語または略語が大文字で始まり、間にスペースや句読点がないようにフレーズを書く方法です。
以下は、キャメルケースを用いた変数名の例です。
let variableName; //大文字は2番目の単語の先頭にのみ表示
このように、大文字は2番目の単語の先頭にのみ表示されます。
変数の命名規則には、キャメルケース、パスカルケース、スネークケースがあります。
これらは現代のプログラミング言語で最も一般的な命名規則です。
スネークケースは、アンダースコアケースとも呼ばれ、単語のすべての文字が小文字であるか、またはアンダースコアで区切られている場合に使用されます。
以下は、snake_case(スネークケース)を用いた変数名の例です。
let variable_name;
Java、JavaScript、TypeScriptの言語では、スネークケースを使用することはあまりありません。スネークケースは、定数を示すために使用されることが一般的です。
パスカルケースは、キャメルケースの命名規則に従いますが、最初の文字を大文字にします。
以下は、PascalCase(パスカルケース)を用いた変数名の例です。
let VariableName;
なぜこのような命名規則が使用されるのかというと、コードベースに一貫性がもたらされ、保守が容易になるためです。
ただし、各言語には、プログラミングトークンの使用を指定する独自の命名規則が存在します。
したがって、プログラミングにおいては、各言語の命名規則に従って変数名や関数名などの識別子を付けることが重要です。
変数の割り当て(代入)
JavaScriptにおいて変数を宣言し、値を割り当てる方法を簡単な例を用いて説明します。
変数を宣言するには、letキーワードを使用します。
例えば、以下のコードでは、myVariableという変数を宣言しています。
let myVariable; //変数の宣言
変数を宣言した後は、値を割り当てることができます。値の割り当ては、等号（=）を使用します。
例えば、以下のコードでは、myVariableに値10を割り当てています。
myVariable = 10;
また、変数の宣言と値の割り当てを同時に行うこともできます。
以下のコードでは、myVariableという変数を宣言し、値10を割り当てています。
let myVariable = 10;
let myVariable; //変数の宣言 let myVariable = 10 ; //値を割り当てる console.log(myVariable) //10が出力
複数の変数を宣言する場合は、カンマ(,)を使用します。
以下のコードでは、x、y、zという3つの変数を宣言し、それぞれに値を割り当てています。
let x, y, z;
x = 5;
y = 6;
z = 7;
また、配列の分割代入を使用して、複数の変数を同時に宣言・割り当てることもできます。
以下のコードでは、name、age、incomeという変数を宣言し、それぞれに値を割り当てています。
let [name, age, income] = ["Taro", 20, 800];
変数には、値やデータを保存するために使用されます。
また、console.log()関数を使用して、変数の値をコンソールに出力することができます。
以下のコードでは、変数name、age、incomeに保存された値をそれぞれコンソールに出力しています。
console.log(name); // "Taro" console.log(age); // 20 console.log(income); // 800
console.log()関数は、変数だけでなく、数式や文字列などもコンソールに出力することができます。
以下のコードでは、数式の結果や文字列をコンソールに出力しています。
console.log(2 + 3); // 5 console.log("test"); // "test"
これらのコードは、ブラウザの開発者ツールなどを使用して、実行結果を確認することができます。
変数の値を変更(再代入)
前述で学んできたように、JavaScriptにおいて、変数には値を割り当てることができます。
例えば、以下のコードでは、letキーワードを使って変数xに数値の5を割り当て、console.log()メソッドを使用して変数xの値を表示しています。
let x = 5; console.log(x); // 5
変数xの値を変更する場合は、変数名を使用して新しい値を割り当てます。
例えば、以下のコードでは、変数xの値を2に変更して、再びconsole.log()メソッドを使用して変数xの値を表示しています。
// 5は変数xに割り当てられます let x = 5; console.log(x); // 5 x = 2; //変数xの値が変更されます console.log(x); // 2
また、変数の値を変更する際には、新しい値を割り当てるだけで、変数の型を変更する必要はありません。
例えば、以下のコードでは、最初にstring型の値"hello"が変数messageに割り当てられ、次にnumber型の値20が同じ変数messageに割り当てられます。
let message = "hello"; console.log(message); // "hello" message = 20; console.log(message); // 20
このように、変数には、プログラムの実行中に異なる値を割り当てることができます。
ただし、変数名は同じままであることに注意してください。
また、変数の値を変更する際には、新しい値を適切に割り当てるだけで、変数の型を変更する必要はありません。
プログラムを書く際には、文法や構文に気をつける必要があります。
JavaScriptには多くのエラーが存在し、エラーメッセージが表示されることがあります。
例えば、「SyntaxError」というエラーは、文法や構文が正しくない場合に警告されます。
この場合は、コードのどこかに書き間違いがある可能性があるため、エラーメッセージを確認して修正する必要があります。
しっかりと、エラー文を読む事です。
値の型操作
JavaScriptには、文字列、数値、ブール値、null、undefined、およびNaNのようなさまざまなプリミティブ型があります。
これらは、変数が保持するデータの型に基づいています。
文字列は、テキストの一部を表します。
値を引用符で囲む必要があります。
引用符としては、ダブルクォート(例: "This is a value.")またはシングルクォート(例: 'This is a value')が使用されます。
数値は、数学演算を実行できる数値を表します。
数字を書くだけで、小数点以下の桁数(ある場合)を区切るには、ドット(1または23.044)を使用します。
ブール値は、フラグを表し、ステータスはtrueまたはfalseのいずれかになります。
実際使用できる値は、trueおよびfalseの2つだけです。
null型は、値がないことを示す特殊な型となります。
nullによる参照が持つ意味は、実装言語によって様々であり異なりますので注意して下さい。
undefined型は、変数が存在しないことを示す特殊な型です。
NaN(Not a Number)は、数値が予期されていたために操作が失敗したが、別の型が見つかったことを示す特別な型です。
計算エラーを表します。
JavaScriptは動的型付けを採用しているため、実行時に型エラーが発生する可能性があります。
一方、Java言語やTypeScriptは静的型付けを採用しており、コンパイル時に型エラーを検出することができます。
JavaScriptには、JavaやTypeScriptのような静的な型付けの機能はありませんが、JavaScript自体にはデータ型があります。
JavaScriptは動的型付け言語であり、変数の型を宣言する必要はありません。変数は実行時に値に基づいて自動的に型が決定されます。
したがって、変数にはさまざまな型の値を含めることができます。
宣言時に特定の型の値のみを含めるように強制するわけではありません。
以下は、これらの型を使用するいくつかの例です。
let a; a = 5 + 5; // 10 a = "string1" + "string2"; // "string1string2" a = "a" + 5; // "a5" a = "1" + 5; // "15"、『1』は文字列なので数学を実行できません a = 4 * 4; // 16 a = "a" * 4; // NaN、文字列を数値に変換できないため計算結果は非数値 a = "4" * 4; // 16、最初の文字列を自動的に数値に変換します
JavaScriptでは、変数は宣言時に型を指定する必要はありません。
同じ変数に異なる型の値を代入することができます。
ただし、値の型によっては、演算子の処理が異なり、予期しない結果になる場合があります。
例えば、文字列と数値を結合するときは、数値が自動的に文字列に変換されますが、数値と文字列を乗算しようとすると、文字列が数値に変換されます。
しかし、文字列が数値に変換できない場合はNaN（Not a Number）計算エラーになります。
プログラマーは、これらの型を理解し、それらを効果的に使用して、JavaScriptコードを書くことができます。
また、これらの型を混在させることにより、意図しない結果が生じることがあるため、注意が必要です。
再宣言
JavaScriptにおいて、変数を宣言するためにはvarキーワードまたはletキーワードを使用します。
varキーワードを使用して変数を2回宣言してもエラーは発生しませんが、letキーワードの場合はエラーが発生します。
var x = 2; var x = 5; // OK let x = 2; let x = 5; // TypeError: Identifier 'x' has already been declared //TypeError：識別子xはすでに宣言されています。
ただし、letで宣言された変数は、同じブロック内で再利用することはできませんが、ネストされたブロックで再利用することはできます。この場合、再宣言はされず、新しい値が代入されます。
let x = 5; { let x = 6; console.log(x); // >> 6 } console.log(x); // >> 5
つまり、letキーワードを使用する場合は、同じスコープ内で同じ名前の変数を再宣言することはできませんが、ネストされたブロック内では再利用が可能です。
この点を注意して、プログラムを書くようにしなければいけません。
ですが、スコープを学習していない初学者は理解できないと思います。
スコープとは何なのか？その概要を説明致しますが、注意点があります。
関数を知らない初心者には、スコープの概念や関数内での変数の扱いは難しいと感じる場合がありますのでご了承ください。
スコープとは、プログラム中の変数が有効な範囲となり、アクセス可能性を決定する概念です。
JavaScriptでは、変数の宣言場所によって制御され、その変数にアクセスできるプログラムの部分を定義します。
JavaScriptにはさまざまなスコープがあります。
・ グローバルスコープ
・ ローカルスコープ
・ 関数スコープ
・ ブロックスコープ
これらのスコープは、アプリケーションの要件に応じて使用されます。
上記のリストを、できる限り、必要最低限に個別に解説していきます。
JavaScriptグローバル変数
JavaScriptにおいて、グローバル変数とは、スクリプト全体で利用可能である変数のことを指します。また、ウィンドウオブジェクトで宣言された変数もグローバル変数として扱われます。
グローバル変数は、関数やコードブロック内で宣言されていなくても、それらの中で使用できます。
例えば、以下のように宣言されたグローバル変数を関数から呼び出すことができます。
// グローバルスコープに変数を定義する let globalVariable = "Hello, world!"; // グローバルスコープに関数を定義する function globalFunction() { console.log("This is a global function."); } // 変数と関数を使用する console.log(globalVariable); // "Hello, world!" globalFunction(); // "This is a global function."
上記では、letキーワードを使用してglobalVariableという変数をグローバルスコープに定義しています。
letキーワードを使用することで、変数のスコープをブロックスコープ内に制限することもできますが、グローバルスコープに変数を定義する場合には注意が必要です。
一般的にはグローバルスコープに変数を定義するのは推奨されません。
グローバルスコープに定義された変数は、どこからでも容易にアクセスできるため、プログラム全体で変数の値が変更される可能性があります。
では、今あなたが同じチームメンバーと共同でコードを書いていることをご想像ください。
グローバルスコープで変数を定義すると、他のメンバーが定義した変数と同じ名前を使用する可能性があります。
その結果、予期せぬ変数の上書きや値の変更が発生する可能性があります。
特に大規模なプロジェクトでは、複数の開発者が同時に作業することが一般的です。
それぞれがグローバルスコープで変数を定義すると、名前の競合が頻発し、コードのバグや予期せぬ振る舞いを引き起こす可能性が高まります。
これはデバッグやメンテナンスの困難さを引き起こす可能性があります。
このような競合を回避するためには、様々なプラクティスを遵守することで、チーム開発中の変数名の衝突という問題を最小限に抑えることができます。
JavaScriptローカルスコープ
JavaScriptでは、関数という機能を使うことができます。
関数を定義することで、その関数内でのみ使用可能なローカルスコープが作られます。
関数内で変数を定義する場合、その変数はその関数内でしか使用できないローカル変数となります。
例えば、以下のコードでは、関数内で変数を宣言し、その変数はその関数内でのみ使用できます。
function abc() { let x = 10; // ローカル変数 }
また、条件分岐や繰り返し処理などのブロック内で変数を宣言することもできますが、その場合も、その変数はそのブロック内でしか使用できないローカル変数となります。
これを「ブロックスコープ」と呼びます。
例えば、以下のコードでは、if文内で変数を宣言し、その変数はif文内でのみ使用できます。
if (true) { var apple = "りんご"; // グローバルスコープ let banana = "バナナ"; const grape = "ぶどう"; } console.log(apple); // "りんご" が出力される console.log(banana); // エラーが発生する console.log(grape); // エラーが発生する
同じ名前の変数を異なる関数で使用することができますが、スコープ外のローカル変数を参照しようとすると、参照エラーが発生します。
ES6以降では、ローカル変数を宣言する場合には、letキーワードを使用することを推奨します。
関数スコープ
関数スコープは、関数内で宣言された変数が関数の内部でのみアクセス可能であることを意味します。
関数スコープ内で宣言された変数は、関数の外部からはアクセスできません。
function num() { // function scope let count = 0; console.log(count); // 0 } num(); console.log(count); // ReferenceError: count is not defined
count変数は、num()の範囲内で自由にアクセスすることができます。
しかし、num()のスコープ外では、countはアクセスできません。
とにかく外からcountにアクセスしようとすると、JavaScriptは「ReferenceError: count is not defined」を投げます。
ブロックスコープ
2015年にES6(ECMAScript 6)が導入される前、JavaScriptにはグローバルスコープとローカルスコープの2つのスコープしかありませんでした。
しかし、letおよびconstキーワードの導入により、JavaScriptに新しいタイプのスコープが追加されました。
これらのキーワードを使用することで、特定のブロック内で宣言された変数には、そのブロックの外部からアクセスできません。
例えば、以下のコードでは、変数"x"はブロック内で定義されており、外部からはアクセスできません。
{ let x = "こんにちは、ようこそ。"; console.log(x) // この行はxにアクセスできます } console.log(x) // errorが発生します
関数およびブロックのスコープは入れ子にすることができます。
{ // block scope }
複数のネストされたスコープを使用して、変数はそれ自体のスコープ内または内部スコープからアクセスできますが、そのスコープの外部からはアクセスできません。
例えば、「if」や「for」などのコードブロックは、letやconstキーワードで宣言された変数にスコープを定義します。
一方、varキーワードは関数スコープに限定されます。これは、新しいスコープが関数内部でしか作れないことを意味します。
そのため、letまたはconstキーワードを使用することで、より細かいスコープを作成することができます。
他の例で、おさらいしましょう。
letを使用して変数を宣言する場合、その変数はブロックスコープ内でのみ有効であり、ブロックを抜けるとその変数は破棄されます。
以下の例を見てください。
function example() { let a = 1; // ブロックスコープ内でのみ有効な変数 if (true) { let b = 2; // ブロックスコープ内でのみ有効な変数 console.log(a); // 1を出力 console.log(b); // 2を出力 } console.log(a); // 1を出力 console.log(b); // エラー: bは定義されていません }
上記の例では、aとbは両方ともletキーワードを使用して宣言されていますが、bはifブロック内で宣言されているため、そのスコープはそのブロック内に限定されます。
そのため、b変数はifブロックの外で参照することができず、「console.log(b)」はエラーをスローします。
一方、a変数はexample関数のブロックスコープ内で宣言されており、そのスコープは関数全体にわたります。
そのため、a変数はifブロックの外でも参照することができ、「console.log(a)」はエラーをスローしません。
定数
ES6では、定数を宣言するための新しい方法として、constというキーワードが提供されています。
constを使用すると、読み取り専用の参照を持つ定数を作成できます。
これにより、変数名を再割り当てしようとすることを防止することができます。
ただし、オブジェクトは参照渡しであるため、オブジェクトプロパティを渡すことができます。これは後ほど説明します。
constは、プログラム全体で変数の値を変更したくない場合に変数を宣言するためのキーワードとして使われます。
定数は大文字を使用するか小文字を使用するかにかかわらず宣言が可能です。
ですが、一般的には、すべて大文字で宣言されます。
以下が定数の宣言方法です。
const CONSTANT_NAME = value;
letキーワードと同様に、constキーワードはブロックスコープ変数を宣言します。したがって、ブロック内で定義された変数は、外部の変数とは異なる値を表します。
ただし、constキーワードで宣言されたブロックスコープの変数は再割り当てできません。一方、letの場合は、いつでも値を変更できます。
以下がletを使用した例です。
let a = 10; a = 20; //再代入 a = a + 10; console.log(a); // 30
しかし、constキーワードで宣言された変数は、再割り当てできません。
つまり、不変の変数として扱われます。
以下はconstを使用した例です。
const RATE = 0.1; RATE = 0.2; // TypeError
割り当ては失敗し、定数は元の値のままとなります。
つまり、定数は値を変更できない変数の一種ということです。
また、constは値の再割り当てができないだけでなく再宣言もできません。
// constキーワードを使用した変数の定義と初期化 const constantVariable = 10; // 値の再割り当てを試みる constantVariable = 20; // エラー: TypeError: Assignment to constant variable. // 再宣言を試みる const constantVariable = 30; // エラー: SyntaxError: Identifier 'constantVariable' has already been declared.
constキーワードを使用してconstantVariableという変数を定義し、値を初期化しています。
しかし、constキーワードを使用して宣言された変数は、再割り当てや再宣言ができません。
このように、constキーワードを使用することで、不変の定数を宣言することができます。これにより、意図しない値の変更や再宣言を防ぐことができます。
JavaScriptの定数とオブジェクト
constキーワードを使用すると、作成される変数は読み取り専用であることが保証されますが、const変数自体が不変であることを意味するわけではありません。
たとえば、定数である変数を使用してオブジェクトを作成し、そのオブジェクトのプロパティを変更することができます。
const person = { age: 20 }; person.age = 30; //変更可能 console.log(person.age); // 30
ただし、定数に別の値を再割り当てすることはできません。
person = { age: 50 // TypeError };
オブジェクトのプロパティを不変にするには、「Object.freeze()」メソッドを使用します。
これにより、オブジェクトが凍結され、凍結されたオブジェクトのプロパティは変更できなくなります。
const person = Object.freeze({ age: 20 }); person.age = 30; // TypeError
ただし、「Object.freeze()」メソッドを使用する場合は注意が必要です。
オブジェクト全体が凍結されるため、プロパティによって参照されるオブジェクトではなく、オブジェクトのプロパティを凍結する可能性があります。
したがって、プロパティの追加などは可能です。
以上を踏まえて、constキーワードの使用方法と、オブジェクトのプロパティを不変にするための「Object.freeze()」メソッドの正しい使い方について理解しておきましょう。
最後に
この記事では、JavaScriptの変数や定数について学びました。
また、ローカル変数やグローバル変数の違い、そしてスコープの種類についても解説しました。
JavaScriptでは、変数はデータを格納するための入れ物であり、定数は変更されない値を表します。
ローカル変数は関数内でのみ使用可能であり、グローバル変数はスクリプト全体で使用できます。
スコープとは、変数がどの範囲で有効かを定義するもので、ローカルスコープとグローバルスコープがあります。
プログラミングには多くの概念があり、最初は理解するのが難しいかもしれません。
しかし、コーディングを始める前に、変数や定数などの基本的な概念をしっかりと理解しておくことが重要です。
また、実際に手を動かしてコードを書くことで、より深い理解が得られます。
初心者の方は、簡単なプログラムを書いてみることから始めてみると良いでしょう。
最後に、この記事を読んでいただきありがとうございました。
今後も、プログラミング学習のお役に立てるような記事を提供していきますので、引き続きご覧ください。
この記事が役に立ったら、ブックマークし、他の方にも共有して頂けると幸いです。
