JavaScriptの変数とは？意味と基本の使い方をわかりやすく解説

JavaScriptにおける「変数」とは何か、そして何をするためのものなのでしょうか？

JavaScriptをはじめとするプログラミング言語において、変数とは値への参照を格納しておくための「入れ物（コンテナ）」です。必要なときにその値を取り出し、さまざまな処理を行うことができます。格納できる値は文字列（テキスト）や数値、関数、さらには他の変数まで、実に多彩です。

いくつか例を見てみましょう。

• 文字列の値: let name = 'James'
• 数値の値: let amount = 100
• 関数の値: let myFunction = function() {}
• 変数の値: let fullName = firstName + lastName

例えば、後でアクセスして何らかの処理を行いたい人物のリストへの参照を保存したいとしましょう。

// 人物リスト（配列）をpeopleList変数に代入
let peopleList = ['Arnold', 'Linda', 'Sylvester', 'Dolph']

// リストを出力
console.log(peopleList)

このように変数を使えば、リストが必要になるたびに全項目を入力し直す必要はありません。人物リスト（配列）を指し示すpeopleList変数を参照するだけで、リストへアクセスしたり操作したりできます。

上記のコードは、主に3つの要素で構成されています。

• peopleListという名前の参照用変数
• 代入演算子: =
• 文字列値の配列（リスト）: ['Arnold', 'Linda', 'Sylvester', 'Dolph']

代入演算子（=）は、左側の変数名と右側の値（数値、文字列、関数、変数など）をつなぐ「糊」のようなものだと考えると分かりやすいでしょう。

では、人物リストで何ができるのか？

できることはたくさんあります。プログラミングで最もよく行われる操作のひとつがCRUD処理です。これを通じて学んでみましょう。

• Create（作成）
• Read（読み取り）
• Update（更新）
• Delete（削除）

Create（作成）は、人物リストを作成した時点で完了しています。

Read（読み取り）とは、つまり「取得する」ということです。先ほどのpeopleListを取得してみましょう。console.log()で試しましたが、アラートのポップアップで表示することもできます。

// ポップアップで人物リストを表示
alert(peopleList)

また、リストの最初の人物の値だけを読み取りたい場合は、次のように書きます。

// 人物リストから最初の人物を取得
console.log(peopleList[0])

// Arnoldが出力される

注意点として、JavaScriptの配列（リスト）はゼロベース、つまり0から数え始めます。0番目が1つ目、1番目が2つ目という具合です。

そのため、[0]を指定すると、配列の先頭にいるArnoldが出力されます。

Update（更新）とは、既存の値を変更することです。SylvesterをKeanuに入れ替えて、結果を出力してみましょう。

let peopleList = ['Arnold', 'Linda', 'Sylvester', 'Dolph']

peopleList[2] = 'Keanu'

console.log(peopleList)

// 結果: ["Arnold", "Linda", "Keanu", "Dolph"]

Delete（削除）は、その名の通り要素を取り除く操作です。人物リストからArnoldを削除してみます（上記のコードを再利用します）。

let peopleList = ['Arnold', 'Linda', 'Sylvester', 'Dolph']

peopleList[2] = 'Keanu'

// 配列の先頭の項目（Arnold）を削除
peopleList.shift()

// 結果: ["Linda", "Keanu", "Dolph"]

配列の末尾の項目を削除したい場合は、shift()の代わりにpop()を使います。

次のステップへ

ここで紹介したのはJavaScript変数のごく入門的な部分にすぎませんが、変数が何のために使われ、どれほど柔軟なものなのか、しっかりイメージできたのではないでしょうか。まずは実際にコードを書いて、変数への代入や配列の操作を自分の手で試してみることをおすすめします。