変数とは
ここからは変数
変数は、データ(値)の入れ物(箱)です。箱についている名前が「変数名」であり、箱の実際の値が入っています。
変数
・変数名(箱)
・値（入れ物）
変数の定義
変数は「let 変数名=値」として定義します。プログラミングの
「=」は「等しい」という意味ではなく「左右を左辺に代入」という意味という意味
「let」は「これから変数を定義」
let name="john";
変数宣言 変数名="代入する値";
・変数宣言 let
・変数 name
・= 代入
・値 "john"
変数の使い方
「"john"」という値が代入された変数nameを
console.log("john")出力すると、
「"john"」という値が出力されます。
let name="john";
*console.log(name);
置き換えのイメージ
let name="john";
*console.log("john");
*script1「console.log(name);」
変数nameが値("john")に置き換わる
*script2「console.log("john")」
john
が出力される
変数と文字列
これまで見てきた様に、変数のクォーテーションで囲みません。
「console.log("name");」のように変数名のクォーテーションを囲むと
nameが変数ではなく「文字列」として認識され、「name」とそのまま出力されてしまうので注意
let name="john"
console.log(name);
console.log("name")
john
name そのまま出力される
変数の特徴
変数は、これまでに学習してきた「文字列」や「数値」とまったく同じように
扱えます。
代入される値が、文字列の場合は他の文字列と連結することができ、
数値の場合は計算に用いることができる
let name="鈴木";
console.log(name + "さん");
let number=11;
console.log(number + 5);
鈴木さん
16
なぜ変数を使うのか
実際のプログラムの中には多くの値を登場します。
プログラムを書くときは、それらの値を間違いのないように、そして値の変更に対応しやすいようにすることが求められます。それを助けるための１つの仕組みが変数
1.同じ値を繰り返し使える
2.変更に対応しやすい
3.値の意味がわかりやすい
変数のメリット
「同じ値を繰り返し使える」「変更に対応しやすい」という具体的に見てみよう。
似たような文章を書くのは何度も面倒ですが、変数を使えば、
同じ値を繰り返し使え、楽にコードを書くことができます。
文章が後になって変更されても、変数を用いていれば、代入する値を
変更するだけで全ての変更に対応できます。
変数を使用しない場合
console.log("鈴木さん" おはようございます);
console.log("佐藤さん" おはようございます);
console.log("田中さん" おはようございます);
「おはようございます」の部分を
「こんにちは」に変えるなら
おはようの３箇所を全て記入する必要があります。
変数を使用する場合
let text="おはようございます"
console.log("鈴木さん"+text);
console.log("佐藤さん"+text);
console.log("田中さん"+text);
「おはようございます」の部分を
「こんにちは」に変えるなら
変数に代入する文字列を変更するだけでよi
変数の命名のルール
変数名(変数の名前)は自由に決めることができますが、
できるだけわかりやすい名前をつけるようにしよう
◎良い例
number・・・英単語を用いる
oddNumber・・・２語以上の場合は大文字で区切る
×悪い例
1numebr・・・数字開始(エラーが出る)
bango・・・ローマ字(望ましくない)
番号・・・日本語(望ましくない)
演習
// 変数lengthを定義してください
let length=5;
// 変数lengthの値を出力してください
console.log(length);
// 変数lengthを用いて、円の面積を出力してください
console.log(length*length*3);
変数の更新
変数は、一度代入した値を変更することもできます。
一度値を代入した変数に、その後再び代入すると、
後に代入した値で変数の中身が上書きされます。
定義する時と違って「let」は必要なく、
「変数名=新しい値」と書けば値が変更されます。
let name="john"
console.log(name);
name="Kate";
!更新するとき「let」はつけない!
console.log(name);
John
Kate
変数の更新イメージ
プログラムは上から順に実行される
let number=7;
//numberの値は「7」
number=9;
//numberの値は「9」
number=10;
//numberの値「10」
演習
let name = "にんじゃわんこ";
console.log(name);
// 変数nameの値を"とりずきん"に更新してください
name="とりずきん";
// 変数nameの値を出力してください
console.log(name);
変数自身を更新する
既に定義している変数numberの値に3を足したい、というときは
どのようにすれば良いか
numberに3足して、再びnumberに代入することで実現できる
「=」の右側のnumberは値に置き換わり、計算された結果が、
numberに代入されます。
let number=2;
console.log(number);
number=number+3;
console.log(number);
2
5
変数自身に代入するイメージ
変数を変数自身を使って更新する
let number=2;
//numberの値は「2」
number = number + 3;
//numberの値は「5」
省略した書き方
「number = number +10」といった書き方には、省略した書き方もあります
基本形
x=x+10 → x+=10
x=x-10 → x-=10
x=x*10 → x*=10
x=x/10 → x/=10
x=x%10 → x%=10
演習
let number = 7;
console.log(number);
// 変数numberの値に3を加えてください
number+=3;
console.log(number);
// 変数numberの値を2で割ってください
number/=2;
console.log(number);
定数(const)とは
変数(let)とよく似たものに、定数(const)があります。
定数(const)はletの代わりにconstを用いて定義
変数(let)と定数(const)の違い
const name="john";
定数の宣言 定数名=代入する値
定数と変数の違い
変数(let)と定数(const)の違い
変数(let)は１度代入した値を更新することができましたが、
定数(const)は値を変更することはできません
定数(const)の値を更新しようとすると、コードを実行した際にエラーが発生してしまう!
<補足>
複数の変数から一つの同じオブジェクトを参照したり、
リストなどの参照型データを使うことで値を変更することは可能です。
変更というより参照という言葉がぴったりですが...
詳しくはコメント欄をチェック！詳しい方が説明してくれています。
let name="john";
console.log(name); //出力結果:john
name="Kate";
console.log(name); //出力結果:Kate
変数は代入されている値を更新することができる
const name="john";
cosole.log(name); //出力結果 :john
name ="Kate";
×エラー!
定数(const)は一度代入された値を更新することはできない
console.log(name);
定数を使うメリット
定数のメリットは「後から値を更新できない」
一見不便に感じますが、予期せぬ更新を防ぐことができ、
より安全なコードを書くことができます。これはコードの量が増えるにつれて
徐々にメリットとして感じる
変数の場合
script.js
let name="john";
:
:
console.log(name);
とすると、途中で値が変わっている可能性
定数の場合
const name="john";
:
:
console.log(name);
とすると、定数なので値は"john"から変わらない
// 定数languageを定義してください
const language="フランス語";
// 定数languageの値を出力してください
console.log(language);
// 定数languageを用いて、「〇〇を話せます」と出力してください
console.log(language + "を話せます");
テンプレートリテラル
定数の連結には今まで「+」記号を用いてきました。
「テンプレートリテラル」という連結方法があります。
テンプレートリテラルを用いると、文字列の中に定数(変数)を埋め込むことができます。
shift + @ = `
テンプレートリテラルを囲む際には、バッククォーテンションを使う
+ではなく${name}
const name="にんじゃわんこ"
console.log(`こんにちは、${name}さん`);
//console.log("こんにちは"+ name + "さん")
こんにちは、にんじゃわんこさん
テンプレートリテラルの書き方
文字列の中で「${定数}」とすることで、文字列の中に定数や変数を含めることができます。
このとき文字列全体をバッククォーテーションで囲む必要があります。
複数の変数や定数を埋め込むことも可能
const name="にんじゃわんこ";
console.log(`こんにちは、${name}さん`)
const name="にんじゃわんこ";
const age=14;
console.log(`${name}は${age}歳です`);
にんじゃわんこは14歳です
バッククォーテーションの書き方
shift + @ = `
演習
const name = "にんじゃわんこ";
const age = 14;
// 「ぼくの名前は〇〇です」とコンソールに出力してください
console.log(`ぼくの名前は${name}です`);
// 「今は〇〇歳です」と出力してください
console.log(`今は${age}歳です`);