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

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

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

 

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

 

 

目次

• 変数宣言とは
• グローバル変数とローカル変数とは
• スコープとは
• varの使い方
• letの使い方
• constの使い方
• var, let, constを利用して変数を宣言してみよう
• まとめ

 

変数宣言とは

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

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

[PR] フロントエンドで副業する学習方法を動画で公開中

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

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

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

スコープとは

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

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

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

となります。

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

宣言	関数スコープ	ブロックスコープ
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を利用して変数を宣言してみよう

 

まとめ

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

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

筆者プロフィール

小宮山晃史（こみやまこうじ) 現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。 iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

 

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

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