Javascript【変数・定数】とは？初心者向け

プログラムって難しいな・・・。
プログラミングって苦手だなという方もいると思います。
私も得意ではありません。どうにかコピペで全部すまないかなと思うこともあります。

プログラミングが得意な人に説明を受けても、早口すぎて何を言っているの分からない。ネット上の文書を読もうと思っても、詳細すぎて読みたくない。
誰も「自分の分からない」に寄り添ってくれない・・・。あ～わかんない！
そんな時ってありますよね。

ただ「プログラミング」はちゃんとルールを知り、ルールを覚えて使いだしたら楽しいものにかわります。少しでも楽しいと思ったならこっちのもんです。

Javascriptの【変数・定数】について説明していきます。
※JavaScript(ES6)

Javascript「変数」ってなに？

「変数」と言うのは「箱」だと考えて下さい。
そしてその「箱」に、中に何を入れたか分かるよう「名前」をつけます。

後から見て、箱の中に何を入れたかわかるように名前をつけます。

引っ越しの時ダンボールに何をつめたのかあとでも分かるように、ダンボールに名前を書くが如しです。
引っ越し先で積まれたダンボール、中に何が入っているのか分からないと大変です。パソコンを探しているのに全然みつからない・・・避けたいところです。

JavaScriptの「変数」は中に「文字や数値」の値を入れて使用します。

【変数】はなんで使うの？便利なの？

そもそもなんで「変数」なんて使用するんだろう？
そうは思いません？必要がないなら覚えたくないです。

「変数」はとても便利なものです。

これらが要点としてあげられます。
ただ文字で読んだだけではなかなか実感がわかないと思います。

具体的にイメージしてみましょう。
例えばの話です。

仕事で自分が書いていないプログラムの修正を行うとします。
今日は金曜日、早く帰りたい。残業はごめんだ。

途方もないですね。
しかも自分で書いたプログラムであれば、比較的どこに〇を書いたのか覚えています。ですが初めて見るプログラムではそういうわけにもいきません。

これが「変数」を〇と定義していると、
「変数」を1か所、△に書き換えるだけですんでしまいます。
他の1000以上も書き換わってくれるためです。

残業することなく帰宅することができます。
「変数」を使うことで効率よくプログラミングを行うことができます。

実際にJavascriptの「変数」を書いてみましょう。

Javascriptの変数「let」とは？

Javascriptの「変数」は最初に宣言する必要があります。

プログラミングと言うのは前提としてパソコンに指示を出しているわけです。
パソコンさんにこれ「変数」です。
名前は○○、中身は○○と教えてあげるのです。
そんなイメージです。

実際に人間が見る場合も、宣言してあるため「変数」を目で見て発見できます。

let text = "桜花爛漫の候、貴社におかれましてはますます輝かしい春をお迎えのことと存じます。";

「let」を書くことによってこれから変数を書きますと宣言しています。これは決められた単語です。
※letは英単語の「let」数学において利用される「…をxとする」という動詞。

「text」と言うのがこの変数の名前です。変数名は自分で決めます。分かりやすく、中身と関連しているものを選びましょう。
※変数名のつけ方ですが、頭文字に数字は選べません。エラ－になってしまいます。　1text、2nameなど。

「＝」は右辺を左辺に代入するという意味です。

今回の例。

let text = "桜花爛漫の候、貴社におかれましてはますます輝かしい春をお迎えのことと存じます。";

これを説明すると、変数名「text」の中に、文字：桜花爛漫の候、貴社におかれましてはますます輝かしい春をお迎えのことと存じます。を入れましたという意味です。

console.log(text);で表示すると、

桜花爛漫の候、貴社におかれましてはますます輝かしい春をお迎えのことと存じます。

が表示されます。

「変数」に代入するのは文字なのか？数字なのか？【表記の仕方】

let text = “桜花爛漫の候、貴社におかれましてはますます輝かしい春をお迎えのことと存じます。”;
「変数」の中に「文字」を代入する場合、その「文字」の始まりと終わりを “ダブルクオーテーションで囲みます。“で囲むことによってこれは文字ですよと、パソコンさんに伝えています。

「数字」を代入したい場合は囲みません。
let text　＝　6;
これで「数字」の6が代入されたことになります。

これを、
let text　＝　”6″;
と“で囲んだ場合、文字の6が代入されます。

「文字」と「数字」で何が違うの？

変数を定義したあと、変数を使った足し算をしたとしましょう。

数字6の入ったtextに＋4をしたなら、答えは10です。
文字”6″の入ったtextに＋4をしたなら、答えは64になります。
数字の4も文字として扱われます。

変数の中身は変わる？

「変数」は一度、定義したあとでも中身の変更ができます。

let text = “桜花爛漫の候、貴社におかれましてはますます輝かしい春をお迎えのことと存じます。”;
と変数を定義した後に、
text = “お疲れ様です。”;
と書いたとします。
※「let」は一度定義してあるため、改めて書く必要はありません。

let text = "桜花爛漫の候、貴社におかれましてはますます輝かしい春をお迎えのことと存じます。";
text = "お疲れ様です。";

console.log(text);で表示されるのは
お疲れ様です。
に変わっています。

JavaScriptの定数「const」とは？

const text = "桜花爛漫の候、貴社におかれましてはますます輝かしい春をお迎えのことと存じます。";

変数letと同様、「定数」constも宣言する必要があります。
※constant = 定数、不変のもの略

変数「let」と定数「const」の違いは？

「変数」は代入した値を更新することができました。
「定数」は値を更新することはできません。
コードを実行した際にエラーが発生します。

const text = "桜花爛漫の候、貴社におかれましてはますます輝かしい春をお迎えのことと存じます。";
text = "お疲れ様です。";

console.log(text);
ではエラーが発生します。

「const」は値を更新することはできません。
「let」と状況で使い分けることができます。

JavaScript(ES6)変数「var」について

JavaScript(ES6)以前。

以前は変数を定義する時「var」を使用していました。
「var」は「誤って変数を2重に定義」してしまったり「代入したくない変数(定数)などに再代入」するといったプログラム上の予期せぬ不具合(バグ)が起きてしまう場面がありました。

問題だった部分を変数を宣言から取り除くために追加されたのが「let」「const」です。