More than 1 year has passed since last update.

初心者による初心者のためのJavaScript基礎１【変数】

Last updated at 2022-07-23Posted at 2022-07-12

1. 変数

変数定義のキーワードとして、const、let、varの3種類があります。
それぞれ次のような特徴があります。

const

constには再代入不可、再定義不可という特徴があります。

const name = "Qii太郎";

name = "Zenn次郎"; //エラー　再代入×

const name = "はてなブ郎"; //エラー　再定義×

constの特徴
再代入　×
再定義　×

let

letには再代入可、再定義不可という特徴があります。

let age = 25;

age = 35; //OK 再代入○

let age = 18; //エラー　再定義×

letの特徴
再代入　○
再定義　×

var

varには再代入可、再定義可という特徴があります。

var language = "PHP";

language = "Ruby"; //OK 再代入○

var language = "Java"; //OK 再定義○

varの特徴
再代入　○
再定義　○

変数定義の使い分け

3種類もあるけどどれを使えばいいの？
よくわからないから全部varでいいんじゃないの？

となりますが、現在はvarを使うことは推奨されていません。
変数が簡単に書き換えられると意図しないバグの温床となるためです。
じゃあなぜvarが存在するのかというと、元々constやletがなくvarしか存在しなかったからです。
varは過去との互換性のために残っているようです。
基本的にはconstで定義して、やむを得ない場面ではletを使用し、varは使用しないという方針が良さそうです。
以下の記事が参考になりました。（コメント欄も参考になります）

2. console.log

console.logはブラウザのコンソール上にメッセージを表示することができる関数です。
コンソールはデベロッパーツール（検証モード）を使用することで確認できます。
Chromeのデベロッパーツールは【command + option + i 】（Windowsでは【Cntl + alt + i 】）のショートカットで起動できます。（右クリック→「検証」でも同様）

引数に値を渡すとその値が表示されます。
文字列は'（シングルクォーテーション）か"（ダブルクォーテーション）で囲む必要があります。

console.log("Hello world");
//出力結果 : Hello world

console.log(35);
//出力結果 : 35

変数を渡すこともできます。

const name = "Qii太郎";

console.log(name);
//出力結果 : Qii太郎

console.log({変数名})と記述することで変数名と値を表示することもできます。

const name = "Qii太郎";
const age = 35;

console.log({name}); //出力結果 : name: "Qii太郎"
console.log({age});  //出力結果 : age: 35

3. テンプレートリテラル

値や変数は+で結合することができます。

const name = "Qii太郎";
const age = 35;

console.log("私の名前は" + name + "です。年齢は" + age + "歳です。");
//出力結果 : 私の名前はQii太郎です。年齢は35歳です。

テンプレートリテラルという方法を使うことで、文字列の中に変数や式を埋め込むことができます。
テンプレートリテラルは`（バッククォート）で囲んで使用します。
変数や式は${変数}、${式}このように記述します。

console.log(`私の名前${name}はです。年齢は${age}歳です`);
//出力結果 : 私の名前はQii太郎です。年齢は35歳です。

console.log(`私の名前${name}はです。年齢は${20 + 15}歳です`);
//出力結果 : 私の名前はQii太郎です。年齢は35歳です。