今回は、Java Scriptでよく使われる変数の「const」と「let」の使用シーンの違いと、実際の書き方について説明していきます。
Java Script初心者の方は、初めの方に覚えておくべき基礎的なプログラム言語です。
| 難易度（MAX10） | ★★☆☆☆☆☆☆☆☆ |
今回の記事ではコンソールログを使用して説明しています。コンソールログの使い方についてのリテラシーの無い方は下記の記事で予習しとく事をおすすめします。
constとletとは
Java Scriptでは、数値や文字列などの様々な値を取り扱います。それらの値に「const」や「let」などで名前をつける事ができ、繰り返し使用しやすいものに変更する事が出来ます。
これを「変数」や「定数」と言います。
「変数」や「定数」に値を入れることを、「値を代入する」「値を格納する」などと表現されます。
constとletの違い
Java Scriptでは「const」で「定数」を入れる事ができ、「let」には「変数」を入れる事が出来ます。
そして「定数」は文字通り一定の値のみを扱うプログラムなので、再代入する事が出来ません。反対に「変数」は変更可能＝再代入する事が出来ます。
よって、「const」は値を固定したい時に使い、「let」は値を変更する場合がある時に使用します。
基本的な書き方は以下の通りです。
| let 変数名 ＝ 値 | 変数にデータを代入。値の再代入は出来る。 |
| const 変数名 ＝ 値 | 定数にデータを代入。値の再代入は出来ない。 |
constの書き方
constは、値に名前を付けて扱いたい時、値を使いまわしたい時、再代入不可の定数を使用したい時、に使用します。
constの書き方は以下のとおり。
const mynameF = 'KT';
const mynameS = 'LIFE';
const fullmyname = mynameF + mynameS;
//コンソールでの確認
console.log(mynameF)
console.log(mynameS)
console.log(fullmyname)定数の「mynameF」に「KT」を代入。「mynameS」に「LIFE」を代入します。さらに定数の「fullmyname」に「mynameF」と「mynameS」を結合した値を代入しています。これを「console.log」で確認するとコンソールにしっかりと出力されているのが確認出来ます。
また、const＝定数なので、値の再代入は出来ません。そのため下記様記述はエラーになります。
const mynameF = 'KT';
const mynameS = 'LIFE';
const mynameX = 'Blog';
const fullmyname = mynameF + mynameS;
//再代入は出来ないのでエラーになる。
fullmyname = mynameF + mynameX
しかし、ややこしいのですが既存の定数を利用して、新しい定数はいくらでも作る事が出来ます。
const mynameF = 'KT';
const mynameS = 'LIFE';
const mynameX = 'Blog';
const message1 = 'WEBに関しての';
const message2 = '知識や技術を書く';
const message3 = '趣味&コンサルブログです。';
const fullmyname = mynameF + mynameS;
//定数を再利用して新しい定数はいくらでも作れる
const fullmyname2 = fullmyname + mynameX
const fullmessage = message1 + message2 + message3
const fullmyname3 = fullmyname2 + fullmessage
//コンソールでの確認
console.log(fullmyname3)
そして、先ほどの「fullmyname」を「alert(fullmyname);」で呼び出すと下記の様にしっかりと「KT LIFE」の表示を確認出来ます。
const mynameF = 'KT';
const mynameS = 'LIFE';
const fullmyname = mynameF + mynameS;
//実際に表示されるのか確認
alert(fullmyname);
letの書き方
letは、値に名前を付けて扱いたい時、値を使いまわしたい時、再代入可能の変数を使用したい時、に使用します。
letの書き方は以下のとおり。
let number1 = 10;
let number2 = 30;
let number3 = 15;
let sum = number1 + number2;
//コンソールでの確認
onsole.log(number1)
console.log(number2)
console.log(sum)変数の「number1」に「10」を代入。「number2」に「30」を代入。「number3」に「15」を代入します。さらに変数の「sum」に「number1」と「number2」を足した値を代入しています。これを「console.log」で確認するとコンソールにしっかりと出力されているのが確認出来ます。
また、let＝変数なので、値の再代入が出来ます。
let number1 = 10;
let number2 = 30;
let number3 = 15;
//再代入出来る。
number2 = 100
let sum = number1 + number2;
//コンソールでの確認
onsole.log(number1)
console.log(number2)
console.log(sum)上記の記述では、「number2」の値の「30」を「100」に再代入しています。よって下記の様に「sum」の答えが変わってきます。
再代入が可能だと数字などのリアルタイムで変化の多い要素の運用が楽になる場合があります。
let number1 = 10;
let number2 = 30;
let number3 = 15;
//再代入
number2 = 100
let sum = number1 + number2; //答え「110」
let sum2 = sum + number3; //答え「125」
let sum3 = sum2 + sum; //答え「235」
//再代入
sum = sum3 //答え「235」
//コンソールでの確認
console.log(sum)
上記の記述の場合、「sum」の答えを再代入で大きく変更しています。元に戻したい場合は、「//再代入」部分をまるっと消せば良いだけです。
また「let」ももちろん「alert(変数名);」で呼び出して表示を確認する事が出来ます。
ついでにvarについて
今までの「const」と「let」の記述では 下記の様に最初の2~3行目くらいに「変数名」＝「値」と書いていきました。この流れを「宣言」と言います。
const mynameF = 'KT';
const mynameS = 'LIFE';「const」と「let」は再宣言をすることは出来ません。内容を変更したい場合は「変数名」＝「値」の部分を書き直します。
一方「var」を使うと再宣言する事が出来ます。なので内容を書き換えたい時は再宣言してしまえば良いわけです。
var mynameF = 'KT';
var mynameS = 'LIFE';
//再宣言
var mynameF = 'KT BLOG';しかし、デバック作業や表示確認で、どの部分にエラーや記述ミスが起きているのか非常にわかりづらくなりおすすめしません。というより現在では使っている技術者は殆どいないかと思います。なのでおまけ程度で覚えておきましょう。
（イメージはCSSの「!important」の様な感じ？）
以上が「constとletの書き方と使用シーンの違い：Java Scriptの基礎③」でした。
徐々に難しくなっていきますが、まだまだ基礎的部分です。
