3.Javascript-3

変数

今回は変数についてです。
変数とはデータ値を格納（代入）する箱のことです。
代数の基本では、変数とは1つの数を表す文字のことです。よくある変数名にxがありますが、yやzなどでも同じように簡単に表現できます。
例えば「X」このXはいくつでしょう？

こう言われたら「？」と思いますよね。
それでは「X ＝ 3」このXはいくつでしょう？と言われたら「3」と答えられませんか？
これが変数のイメージです。

これをJavascriptではどう記述すればいいか説明していきます。

Javascriptではlet,constというキーワードを使い変数を作っていきます。(letを大文字にするとでLETです)

let X = 5;
const y = 10;

これでXは5、yは10というように定義できます。また行末には「;（セミコロン）」を入れます。
Javascriptではセミコロンは無くても機能しますが、phpなどの他の言語では「;」がないとエラーになってしまうので今のうちから入れる癖をつけておきましょう。（ソースの視認性を上げる効果もあります）

またこの時使っている「=」は、「等しい」という意味ではなく、代入として使われます。
変数 X の中身を「5」にしているイメージです。

これをログ出しして確認してみましょう。
jsファイルを一度まっさらにして以下を記入してください。

let X = 5;
const y = 10;
console.log(X);
console.log(y);

ブラウザの検証で確認すると以下の画像のように5と10が確認出来たはずです。

変数宣言と変数の初期化

このlet 変数名 = 初期値; const 変数名 = 初期値; の形を変数の初期化と言います。
初期化時に「＝ 初期値」（代入）を行わない形 let 変数名; を変数宣言と言います。

変数宣言
let 変数名; 

変数の初期化（変数宣言＋代入）
let 変数名 = 初期値; 
const 変数名 = 初期値;

let,constについて詳しく説明する前に再代入と再宣言について説明します。

再代入、再宣言とはその名の通り、再び代入すること、再び宣言することです。
コードで確認すると以下のようになります。

// letの場合
let whether = "晴れ"; 
console.log(whether);　// 変数の初期化を行いログ出します。出力結果晴れ

// 再代入
whether = "曇り";　// 変数whetherに再び値を代入します。
console.log(whether); //　出力結果曇り

// 再宣言
let whether = "雨";　// 変数whetherを再び宣言します。
console.log(whether);　//letは再宣言できないので出力結果はエラーとなります。 （エラー文:Uncaught SyntaxError: Identifier 'whether' has already been declared (at index.js:10:5))

letからconstに変えてみましょう。

// constの場合
const whether = "晴れ"; 
console.log(whether);　// 変数の初期化を行いログ出します。出力結果晴れ

// 再代入
whether = "曇り";　// 変数Xに再び値を代入します。
console.log(whether); // constは再代入できないので出力結果はエラーとなります。 （エラー文:Uncaught TypeError: Assignment to constant variable.　at index.js:6:3))

// 再宣言
const whether = 雨;　// 変数whetherを再び宣言します。
console.log(whether);　//constは再宣言できないので出力結果はエラーとなります。 （エラー文:Uncaught SyntaxError: Identifier 'whether' has already been declared (at index.js:10:7))

ご自身で試す場合、変数の初期化をしてログ出し、再代入を行なってログ出し、確認が出来たら再宣言をしてログ出しという順で行うと再代入と再宣言の出力結果を見ることができます。
※プログラムは基本的に上から順番に処理が行われていくのでコピー＆ペーストすると最後の再宣言の処理の結果しか現れません。

課題

それではここで課題です。

Jsファイルをまっさらにして、以下の文字を変数に代入しコンソールに文字をログ出ししてください。
変数名はtest1、test2で行ってください、test1はconst、test2はletで初期化してください。

変数名test1には「100」を代入してください。

変数名test2には「ジョジョの奇妙は冒険（あなたの好きな漫画や本のタイトルを入れてください）」を代入してください。

このように出ればOKです。

letとconst

変数を作る上で使われるletとconstですが、先ほど再代入と再宣言について説明した時にコメントアウト部分（//から後ろ）に書いたように、letは再宣言が、constは再代入と再宣言が出来ません。

変数を定義できるletとconstですがどっちを使えばいいのかと疑問を抱いてしまうかもしれません。
結論から言うと、とりあえずconstを使用して再代入が必要ならletを使うようにする。と覚えてください。

理由は気付かないところで変数の値を上書きしてしまい、出力したら思わぬ結果が出てくる、バグが起きてしまうなどが起こりえるので、なるべく上書きができないものを使い思わぬバグを防ぐためです。
使っていくうちに理解が深まるので今はそう言う物なんだなと思っていただければ大丈夫です。

変数名

変数の名前は任意です。
以下のルールに沿って命名していただければとりあえず大丈夫です。

• 半角英数字と「_（アンダースコア）」のみ使用するようにしましょう。
• 先頭に大文字を使うのは、避けましょう。
• 先頭に数字は、使用できません。
• 予約語は、使用できません。
  予約後についてはこちらhttps://e-words.jp/w/予約語.htmlをご確認ください。

変数の応用

変数は結合することが出来るので、そのやり方を説明します。

//先ほどの課題で使った変数を使います。
const test1 = 100;
let test2 = 'ジョジョの奇妙な冒険';

// 結合する。
const str = test1 + "回読んでも飽きない漫画は" + test2 + "です。";

console.log(str); 
// 出力結果（100回読んでも飽きない漫画はジョジョの奇妙な冒険です。）

次に数字の結合をしていきます。

// 2つの数字が入った変数を用意します。
const num1 = 100;
const num2 = 50;

// 結合する。
const number = num + num2

//コンソールで文字と変数をさらに結合して出す。
console.log("足した結果は" + number + "です");

//出力結果(足した結果は150です)

このように変数は結合することができます。

ここで変数を定義するときに文字は「”」で囲むのに数字はそのままで定義していると言うことに気づいたかと思います、これは製作者の気まぐれではないのでご安心ください！

データの型

それでは「”」を使うルールについて説明します。

プログラミング言語にはデータの型と言うものがあり、具体的には

• 数値
• 長整数
• 文字列
• 倫理値
• undefined
• null
• シンボル
• オブジェクト

などがあります、ここではとりあえず文字列と数値について説明するので、気になる方はhttps://www.javadrive.jp/javascript/ini/index6.htmlこちらの記事などをご覧ください。

文字列
文字列を使いたい時は”（ダブルクォート）または、’（シングルクォート）で囲んで表現します。
そのため、今までの作った変数やconsole.logの中などには”で囲ったものを入れていました。

const whether = "晴れ"; 
let test2 = 'ジョジョの奇妙な冒険';
console.log("足した結果は" + number + "です");

数値
数値を入れたい場合はそのまま書いて大丈夫です。
数値をクォートで囲ってしまうと、文字列として扱われるので注意してください。

const num1 = 100;
const num2 = 50;

// 以下を試してみてください
let test_num1 = 50;
let test_num2 = 47;
console.log(test_num1 + test_num2);
//再代入
test_num1 = "50";
test_num2 = "47";
console.log(test_num1 + test_num2);

2つ目のconsole.logの中が5047になったと思います。これが文字列と数値の違いなので気をつけてください。

課題

課題1

変数を2つ定義し「私の名前は〇〇です」とログ出ししてください。
また同じ変数に再代入をして「私の特技は〇〇です」とログ出ししてください。
※名前の部分と〇〇の部分を変数にしてください。
※〇〇はご自身の名前などをお入れください。

課題2

変数を２つ数値で定義し足した数値をログ出ししてください。
この時変数に再代入したらエラーが出るようにしてください。

今回は以上になります！
お疲れ様でした！