JavaScript varの使い方

  • JavaScript
  • 変数
最終更新日:

この記事のポイント

  • JavaScript開発における変数宣言の基本とvarキーワードの特徴
  • varキーワードの特徴と使用場面
  • 実践的なコード例による変数宣言の理解促進

目次

JavaScriptのvarとは？

JavaScriptのvarは、変数宣言で使用する最も基本的なキーワードです。

プログラミングにおける変数は、データを一時的に保存しておく「箱」のようなものになります。この箱に名前をつけることで、プログラム内で繰り返し使用したり、変更したりすることができる形です。

JavaScriptプログラミングでvarキーワードを使うと、数値、文字列、配列、オブジェクトなど、あらゆる種類のデータを変数として保存できます。JavaScriptの特徴として、同じvar宣言で型の異なるデータをあとから代入することも可能です。

例えば最初に数値を入れた変数に、あとから文字列を代入してもよいでしょう。

varは、初めてJavaScriptを学ぶ方が最初に習得すべき重要な概念です。しかし、ES6（ECMAScript 2015）以降は、より安全な変数宣言方法としてletやconstも導入されています。varにはいくつか独特の挙動がありますが、まずはJavaScriptの基礎として理解しておくとよいでしょう。

【関連】
JavaScriptをもっと詳しく学ぶならpaizaラーニング

基本構文

JavaScriptでvarを使った変数宣言の基本構文はシンプルです。「var」キーワードのあとに変数名を記述し、必要に応じて初期値を設定します。変数名では、英数字、アンダースコア（_）、ドル記号（$）が使用できます。数字から始めることはできません。

// 基本的な変数宣言 var animal; // 宣言と同時に値を代入 var animal = "イヌ"; // 複数の変数を一度に宣言 var animal1 = "ネコ", animal2 = "ウサギ", animal3 = "パンダ";

varの特徴は、同じ名前の変数を再宣言できる点です。他の言語では一般的ではない動作ですが、JavaScriptでvarを使う場合はエラーになりません。

var animal = "イヌ"; var animal = "ネコ"; // エラーにならず、値が上書きされる

また、変数の宣言と代入は、別々に行うことも可能です。宣言だけを行った変数は「undefined」という特殊な値を持ちますが、あとから値を代入することで使用できるようになります。これらの特性理解は、JavaScriptプログラミングの基礎が身につけるうえでも不可欠なものでしょう。

実用例

varキーワードを使った変数宣言は、JavaScriptプログラミングのあらゆる場面で活用されます。このセクションでは具体的なコード例を通して、実際の使い方を見ていきましょう。初心者の方でも理解しやすくするために、シンプルな例から徐々に実践的な使い方へと進めていきます。

以下の例では、単純な値の保存から、配列やオブジェクトの操作、関数内での利用まで、さまざまなシチュエーションでのvar変数の活用法を紹介します。各コード例は実行結果とともに示していますので、実際の挙動をイメージしながら読み進めてください。

また、実際に自分でコードを書いて試してみる経験は、JavaScriptプログラミング力そのものを高めるうえでも大切です。失敗やエラーを恐れず、積極的にチャレンジしてみましょう。

変数の宣言と代入

以下のコード例は、varの最も基本的な使い方です。変数を宣言し、そこに値を代入します。JavaScriptのプログラムでは、文字列、数値、真偽値などさまざまなデータ型を扱えるようになっています。初めて変数を使う場合は、以下のシンプルな例から始めてみるとよいでしょう。

var animal = "キリン"; var count = 3; var isTall = true; console.log(animal); console.log(count); console.log(isTall);







実行結果：
キリン
3
true
再代入と変数の更新
varで宣言した変数は、あとから値を変更（再代入）することができます。それはつまり、プログラムの実行中に変数の内容を動的に更新できるということです。この特徴は、カウンターやユーザー入力の保存などで活用できるでしょう。

  
var animal = "ゾウ";
console.log("最初の動物: " + animal);

animal = "ライオン";
console.log("変更後の動物: " + animal);

animal = animal + "とトラ";
console.log("追加後の動物: " + animal);

  


  







実行結果:
最初の動物: ゾウ
変更後の動物: ライオン
追加後の動物: ライオンとトラ
関数スコープの特性
varの特徴的な性質に「関数スコープ」があります。varで宣言した変数は、関数スコープの効果により、宣言された関数内でのみ有効となります。それはつまり、関数の外からはアクセスできないということです。バグを防止するうえでも、この特性は理解しておく必要があるでしょう。

  
function showAnimal() {
  var animal = "キツネ";
  console.log("関数内: " + animal);
}

showAnimal();
// console.log("関数外: " + animal); // エラーになるためコメントアウト

  


  







実行結果:
関数内: キツネ
変数の巻き上げ現象
JavaScriptのvarには、「ホイスティング（巻き上げ）」という特徴もあります。varによる変数宣言はコードの先頭に巻き上げられますが、一方で初期化は元の位置で行われる形です。予期せぬバグを避けるうえでは、この動作の理解も必要でしょう。

  
console.log("宣言前の値: " + animal); // undefinedになる
var animal = "カンガルー";
console.log("宣言後の値: " + animal);

  


  







実行結果:
宣言前の値: undefined
宣言後の値: カンガルー
配列の操作
複数の値をまとめて扱いたい場合、varと配列と組み合わせて使用するのが効果的です。具体的には、varで配列を宣言してから、インデックスを使って各要素にアクセスできます。このテクニックは、複数のデータを順番に処理する際に役立つでしょう。

  
var animals = ["コアラ", "カンガルー", "ワニ"];
console.log("最初の動物: " + animals[0]);
console.log("すべての動物: " + animals);
animals[1] = "ディンゴ";
console.log("変更後: " + animals);

  


  







実行結果:
最初の動物: コアラ
すべての動物: コアラ,カンガルー,ワニ
変更後: コアラ,ディンゴ,ワニ
オブジェクトの操作
関連データをまとめて扱う際には、オブジェクトを活用しましょう。具体的な動作は、varでオブジェクトを宣言し、プロパティを通じて個々の値にアクセスできるというものです。複数の関連データを構造化して管理したい場合に役立つテクニックになります。

  
var animal = {
  name: "パンダ",
  age: 5,
  isHungry: true
};
console.log(animal.name + "は" + animal.age + "歳");
animal.isHungry = false;
console.log("お腹いっぱい？ " + !animal.isHungry);

  


  







実行結果：
パンダは5歳
お腹いっぱい？ true
ループ内での変数利用
var変数は、繰り返し処理を行うループ内でも重要な役割を果たします。具体的には、カウンターとしての利用や、配列の要素を順に処理する際に活用できるでしょう。ループと変数をうまく組み合わせることで、効率的な処理が可能となります。

  
var animals = ["ライオン", "トラ", "クマ", "オオカミ"];
for (var i = 0; i < animals.length; i++) {
  console.log((i + 1) + "番目: " + animals[i]);
}

  


  







実行結果:
1番目: ライオン
2番目: トラ
3番目: クマ
4番目: オオカミ
まとめ
JavaScriptにおけるvar変数宣言は、プログラミングの基本となる重要な概念です。この記事では、varの基本構文から実用的な使い方について、初心者の方にもわかりやすく解説しました。
varには、関数スコープやホイスティングといった特有の性質があります。これらをしっかり理解するで、JavaScriptプログラミングの基礎が身についてくるでしょう。現在ではletやconstの使用が推奨されますが、varの動作を理解しておくことは、既存コードの保守やJavaScriptの深い理解に役立ちます。
変数はプログラミングの要となる概念です。このページで学んだvarの使い方を活用し、さまざまなJavaScriptプログラムを作成してみてください。実際にコードを書いて何度も試すことが、効果性の高い学習方法となります。
レベルを更に上げたい方はpaizaプログラミングスキルチェックへ





























  1. paizaラーニングトップ
  2. リファレンス
  3. JavaScriptのリファレンス記事一覧
  4. JavaScript varの使い方