JavaScriptにおける変数とは?概要と使い方について分かりやすく解説

プログラミング

『変数』は様々なプログラム言語において実装されている根本的な概念になります。Javascriptでももちろん使われています。しかしプログラミングの勉強をはじめたばかりの方だと概念が中々理解できないかもしれません。この記事ではJavaScriptでの変数の概念、使い方まで解説します。JavaScriptに限らずプログラミングを学習する中で変数は必須の知識なので、ぜひ覚えておきましょう。

変数とは

プログラミング言語には、文字列や数値などのデータに名前をつけることで、繰り返し利用できるようにする変数という機能があります。変数とは、文字列や数値など情報を入れておく箱というイメージです。プログラムを書くときには、長い文字列や、同じ数値・計算式を何度も繰り返し使うこともあります。その都度同じデータを書き込まずに済むために変数を利用します。

変数のイメージを現実で例えると以下の例のような感じです。

例えば、名前という変数があったとします。

名前– 情報は “田中さん”

というイメージです。

ここでは変数とは「情報を入れておく箱」なんだとイメージを掴んでおいてください。

変数の書き方

JavaScriptでは、まず変数を使用する前に「変数宣言」をしなくてはいけません。「変数宣言」とは、コンピューターに「これが変数だよ!」と事前に教えてあげることです。JavaScriptでの変数宣言は「var」と記載し半角スペースを一つあけて「変数名」を記述します。

「変数名」とはその名の通り変数の名前のことです。「var」の後に任意の「変数名」を記述すればその変数名を持った変数を宣言することができます。

var 変数名

変数の宣言をvarでおこなったら、代入演算子「=」で、右側の「” ”」で囲まれた値や文字列のデータを左側の変数に代入します。

var 変数名 = “値、文字列”;

つまり、nameという変数にTanakaという文字列を入れたいときは、次のように書きます。

var name = “Yamada”

基本はこれだけです。

変数にはvarの他にletとconstという宣言方法もあります。

次に簡単にvarとletとconstの違いを解説します。

var,let,constの違い

以前は変数の宣言を行うときに var を使用していましたが、 ECMAScript 2015 (ES6) 以降では var に加えて let と const を使用することができるようになりました。変数の宣言は次のいずれかを使用します。

var 変数名;

let 変数名;

const 変数名=初期値;

変数の宣言に使われる 3 つのキーワードの中で const は変数の宣言時に必ず初期値を設定する必要があります。他にもvar ,let , constには再代入と再宣言が出来たり、出来なかったりというそれぞれ違いがありますので以下にまとめています。

var

varでは再宣言、再代入が可能です。

var fukugyomedia = ‘初期値OK’;

fukugyomedia = ‘再代入OK’;

var fukugyomedia = ‘再宣言OK’;

let

letでは再宣言が禁止されています。

let fukugyomedia = ‘初期値OK’;

fukugyomeidia = ‘再代入OK’;

let fukugyomedia = ‘再宣言NG’;

const

constでは、再宣言、再代入が禁止されています。

const fukugyomedia = ‘初期値OK’;

fukugyomedia = ‘再代入NG’;

const fukugyomedia = ‘再宣言NG’;

プログラムを書いてみよう!

今回は例として、「Tanaka」を変数に定義して、それをdocument.writeメソッドを使って呼び出してみましょう。document.write( )という命令分を使うことで( )内の数値や文字列を表示させることができます。 

<!DOCTYPE html>

<html lang=”en”>

<head>

    <meta charset=”UTF-8″>

    <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    <title>Document</title>

</head>

<body>

    <script>

        var name = “Tanaka”;

        document.write(name);

      </script>

</body>

</html>

Webブラウザで読み込むと、変数で定義した「Tnanaka」が出力されました。

今回は、「Tanaka」と簡単な文字列の出力でしたが、長文であったり、何度も利用する文字列や数値もありますので、変数としてまとめておくと使いやすくなります。

まとめ

この記事ではJavaScriptでの変数の概念、使い方まで解説しました。

変数とは、文字列や数値など情報を入れておく箱というイメージと捉えるとよいでしょう。

そして、変数を使用する前には「変数宣言」をする必要があります。

変数を宣言するキーワードとしてconst、let、varがあり、以下の違いがあります。

  • varは、再宣言、再代入が可能
  • letは、再宣言が禁止だが、再代入は可能
  • constは、再宣言、再代入が禁止

JavaScriptに限らずプログラミングを学習する中で変数は必須の知識なので、初心者の方は本記事を学習の参考にしていただければと思います。

JavaScriptを短期間かつ効率的に学びたい方は

「独学だと分からないことが多すぎる」「プログラミングをより現場に近い形で学びたい」「学んだ後にどう収益に繋げればいいの?」と考えている方も多いでしょう。

そんな方には、現役エンジニア講師在籍/案件獲得サポートもあるプログラミングスクールで学ぶのがおすすめです。都度検索しながら知識を補完していくのではなく、体系立てて学ぶことで短期間かつ効率的にプログラミングを習得することが可能です。

「即戦力になれる!稼いでいけるようになれる!」プログラミングスクールを紹介した記事をこちらに記載しておきますので、是非ご覧ください。

コメント

タイトルとURLをコピーしました