Progate Javascript 変数・定数

##変数とは
ここからは変数
変数は、データ(値)の入れ物(箱)です。箱についている名前が「変数名」であり、箱の実際の値が入っています。

変数
・変数名(箱)
・値（入れ物）

##変数の定義
変数は「let 変数名=値」として定義します。プログラミングの
「=」は「等しい」という意味ではなく「左右を左辺に代入」という意味という意味
「let」は「これから変数を定義」

script.js

let name="john";

変数宣言 変数名="代入する値";

・変数宣言 let
・変数 name
・= 代入
・値 "john"

##変数の使い方
「"john"」という値が代入された変数nameを
console.log("john")出力すると、
「"john"」という値が出力されます。

script1.js

let name="john";
*console.log(name);

##置き換えのイメージ

script2.js

let name="john";
*console.log("john");

*script1「console.log(name);」
変数nameが値("john")に置き換わる
*script2「console.log("john")」

john
が出力される

##変数と文字列
これまで見てきた様に、変数のクォーテーションで囲みません。
「console.log("name");」のように変数名のクォーテーションを囲むと
nameが変数ではなく「文字列」として認識され、「name」とそのまま出力されてしまうので注意

script.js

let name="john"
console.log(name);
console.log("name")

john
name そのまま出力される

##変数の特徴
変数は、これまでに学習してきた「文字列」や「数値」とまったく同じように
扱えます。
代入される値が、文字列の場合は他の文字列と連結することができ、
数値の場合は計算に用いることができる

script.js

let name="鈴木";
console.log(name + "さん");

let number=11;
console.log(number + 5);

鈴木さん

16

##なぜ変数を使うのか
実際のプログラムの中には多くの値を登場します。
プログラムを書くときは、それらの値を間違いのないように、そして値の変更に対応しやすいようにすることが求められます。それを助けるための１つの仕組みが変数

1.同じ値を繰り返し使える
2.変更に対応しやすい
3.値の意味がわかりやすい

##変数のメリット
「同じ値を繰り返し使える」「変更に対応しやすい」という具体的に見てみよう。
似たような文章を書くのは何度も面倒ですが、変数を使えば、
同じ値を繰り返し使え、楽にコードを書くことができます。
文章が後になって変更されても、変数を用いていれば、代入する値を
変更するだけで全ての変更に対応できます。

変数を使用しない場合

scirpt.js

console.log("鈴木さん" おはようございます);
console.log("佐藤さん" おはようございます);
console.log("田中さん" おはようございます);

「おはようございます」の部分を
「こんにちは」に変えるなら
おはようの３箇所を全て記入する必要があります。

変数を使用する場合

script.js

let text="おはようございます"
console.log("鈴木さん"+text);
console.log("佐藤さん"+text);
console.log("田中さん"+text);

「おはようございます」の部分を
「こんにちは」に変えるなら
変数に代入する文字列を変更するだけでよi

##変数の命名のルール
変数名(変数の名前)は自由に決めることができますが、
できるだけわかりやすい名前をつけるようにしよう

◎良い例
number・・・英単語を用いる
oddNumber・・・２語以上の場合は大文字で区切る

×悪い例
1numebr・・・数字開始(エラーが出る)
bango・・・ローマ字(望ましくない)
番号・・・日本語(望ましくない)

##演習

script.js

// 変数lengthを定義してください
let length=5;

// 変数lengthの値を出力してください
console.log(length);

// 変数lengthを用いて、円の面積を出力してください
console.log(length*length*3);

##変数の更新
変数は、一度代入した値を変更することもできます。
一度値を代入した変数に、その後再び代入すると、
後に代入した値で変数の中身が上書きされます。
定義する時と違って「let」は必要なく、
「変数名=新しい値」と書けば値が変更されます。

script.js

let name="john"
console.log(name);
name="Kate";

!更新するとき「let」はつけない!

console.log(name);

John
Kate

##変数の更新イメージ
プログラムは上から順に実行される

script.js

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に代入されます。

script.js

let number=2;
console.log(number);

number=number+3;
console.log(number);

2
5

##変数自身に代入するイメージ
変数を変数自身を使って更新する

script.js

let number=2;
//numberの値は「2」

number = number + 3;
//numberの値は「5」

##省略した書き方
「number = number +10」といった書き方には、省略した書き方もあります

script.js

基本形
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

##演習

script.js

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)の違い

script.js

const name="john";
定数の宣言 定数名=代入する値

##定数と変数の違い
変数(let)と定数(const)の違い

変数(let)は１度代入した値を更新することができましたが、
定数(const)は値を変更することはできません
定数(const)の値を更新しようとすると、コードを実行した際にエラーが発生してしまう!

<補足>
複数の変数から一つの同じオブジェクトを参照したり、
リストなどの参照型データを使うことで値を変更することは可能です。
変更というより参照という言葉がぴったりですが...
詳しくはコメント欄をチェック！詳しい方が説明してくれています。

script.js

let name="john";
console.log(name); //出力結果:john

name="Kate";
console.log(name); //出力結果:Kate

変数は代入されている値を更新することができる

script.js

const name="john";
cosole.log(name); //出力結果 :john
name ="Kate";

×エラー!
定数(const)は一度代入された値を更新することはできない

console.log(name);

##定数を使うメリット
定数のメリットは「後から値を更新できない」
一見不便に感じますが、予期せぬ更新を防ぐことができ、
より安全なコードを書くことができます。これはコードの量が増えるにつれて
徐々にメリットとして感じる

変数の場合

script.js

let name="john";
:
:
console.log(name);
とすると、途中で値が変わっている可能性

定数の場合

script.js

const name="john";
:
:
console.log(name);
とすると、定数なので値は"john"から変わらない

script.js

// 定数languageを定義してください
const language="フランス語";

// 定数languageの値を出力してください
console.log(language);

// 定数languageを用いて、「〇〇を話せます」と出力してください
console.log(language + "を話せます");

##テンプレートリテラル
定数の連結には今まで「+」記号を用いてきました。
「テンプレートリテラル」という連結方法があります。
テンプレートリテラルを用いると、文字列の中に定数(変数)を埋め込むことができます。

shift + @ = `
テンプレートリテラルを囲む際には、バッククォーテンションを使う

+ではなく${name}

scirpt.js

const name="にんじゃわんこ"
console.log(`こんにちは、${name}さん`);
//console.log("こんにちは"+ name + "さん")

```

```
こんにちは、にんじゃわんこさん
```

##テンプレートリテラルの書き方
文字列の中で「${定数}」とすることで、文字列の中に定数や変数を含めることができます。
このとき文字列全体を<strong>バッククォーテーション</strong>で囲む必要があります。
複数の変数や定数を埋め込むことも可能

 ```script.js
const name="にんじゃわんこ";
console.log(`こんにちは、${name}さん`)

```

```script.js
const name="にんじゃわんこ";
const age=14;
console.log(`${name}は${age}歳です`);
```

```
にんじゃわんこは14歳です
```

##バッククォーテーションの書き方

shift + @ = `

##演習

```scirpt.js
const name = "にんじゃわんこ";
const age = 14;

// 「ぼくの名前は〇〇です」とコンソールに出力してください
console.log(`ぼくの名前は${name}です`);

// 「今は〇〇歳です」と出力してください
console.log(`今は${age}歳です`);

```