icon
icon

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

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

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

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

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

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

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

大石ゆかり

お願いします!

 

目次

1時間でできる無料体験!

 

変数宣言とは

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

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

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

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

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

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

スコープとは

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

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

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

となります。

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

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

 

コラム

実は私も!?独学で損する人の特徴

「スクールは高いから独学で成功する」という気持ちの方は多いと思います。
もちろんその方が金額は低く抑えられるでしょう。
ただ 独学には向き不向きがあり、実はスクールが向いている人も大勢います。

そんな方のために参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困って挫折しそうなときに、質問や相談できる相手がいる環境で学んでいきたいなと思った
  • ・わかった気になっているだけだったので、自分を追い込む環境に置いた方がいいと感じた
  • ・スクールのカリキュラムで市場に求められるスキルを学ぶべきと思った

少しでも当てはまる部分があれば、 スクールが向いているかもしれません。
お試しのつもりで、まずは一度 無料相談 に参加してみませんか?

現役エンジニア・デザイナーに何でも気軽に相談できる30分すべて無料で できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き! 無料相談はこちら

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);

1時間でできる無料体験!

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

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

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学していて、このように感じた経験はないでしょうか?

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、現役エンジニア講師とマンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう 厳しい試験を通過した講師 があなたの相談に真摯に向き合います。

「ただ気になることを相談したい」
「漠然としているがプロの話を聞いてみたい」

こんな気持ちでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。(1週間限定)

今なら参加者限定の割引特典付き! 無料相談を予約する