JavaScriptでの変数宣言について現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでの変数宣言について現役エンジニアが解説しています。変数宣言とは、繰り返し利用できるように文字や数値の入れる箱に名前を付けて宣言することを言います。JavaScriptの変数宣言としてconst、var、letと変数の範囲であるスコープについて解説します。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでの変数宣言について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでの変数宣言について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

 

変数宣言とは

変数宣言とは、プログラムを実行する際に、繰り返し利用できるように文字や数値の入れる箱に名前を付けて宣言することを言います。

JavaScriptには、「const」「var」「let」の3種類が存在します。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

グローバル変数とローカル変数とは

また、変数には”ローカル変数”,”グローバル変数”の二種類があります。

ローカル変数は、関数宣言した関数内でしか利用できず、逆にグローバル変数は、全体で利用できるという違いがあります。一見、全体で利用できるグローバル変数の方が利用しやすいように思えますが、思わぬところで変数の値が変更され、不要なバグを発生させる可能性も含んでしまいます。

スコープとは

スコープとは、先ほど説明した変数が利用できる範囲を示す言葉です。

先ほどの”ローカル”,”グローバル”が基本ですが、”ローカル”の中に、”関数内”と”ブロック内”の二つがあります。まとめると

グローバル プログラム全体のどこからでもアクセス可能
ローカル グローバル変数以外のすべて
 ├──関数内 関数ごとに作られる
 └──ブロック内 ブロック{}ごとに作られる

となります。

これに、先ほどの変数宣言の方法を合わせると下記の様になります。

宣言 関数スコープ ブロックスコープ
var ×
let
const

 

varの使い方

varによる変数の宣言は、再度同じ名前の変数を宣言できるところにあります。

var var_data = "初期値";

console.log(var_data);

var var_data = "変更値";

console.log(var_data);

letの使い方

letによる変数の宣言は、varによる変数の宣言と違い、再度同じ名前の変数を宣言出来ないところにあります。

let let_data = "初期値";

console.log(let_data);

let let_data = "変更値"; ←こちらはエラー

let_data = "変更値";

console.log(let_data);

constの使い方

constによる変数の宣言は、再度同じ名前の変数を宣言出来ず、さらに値の設定も行えません。

const const_data = "初期値";

console.log(const_data );

const const_data = "変更値"; ←こちらはエラー

const_data = "変更値";  ←こちらもエラー

console.log(const_data);

var, let, constを利用して変数を宣言してみよう

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>var let const JavaScript</title>
</had>
<body>
  <script type="text/javascript">
  var var_data = "var_初期値";
  let let_data = "let_初期値";
  const const_data = "const_初期値";
  console.log(var_data);
  console.log(let_data);
  console.log(const_data);
  function test() {
    var var_date = "関数内"
    let let_data_test = "let_test_初期値";
    const const_data_test = "const_test_初期値";   
    console.log(var_data);
    console.log(let_data_test);
    console.log(const_data_test);
  }
  function test2() {
    var var_date = "関数内"
    let let_data_test = "let_test2_初期値";
    const const_data_test = "const_test2_初期値";
    console.log(var_data);
    console.log(let_data_test);
    console.log(const_data_test);
  }
  test();
  test2();
  </script>
  </body>
</html>

 

まとめ

変数を宣言するといは、スコープや宣言の仕方を意識する必要があります。

厳密にするほど、不要なバグを押さえられますが、利便性は下がります。その辺りをしっかりと意識してプログラムを作成しましょう。

筆者プロフィール

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。