はじめに
React を実務で使用するために、現在 TypeScript を学習しております。
しかし、そもそもの JavaScript の理解が不十分だと判断し、アウトプットと備忘録のために投稿することにしました。
ES2015 以降に実装された書き方を中心にまとめています。
エディタは sandbox を使用しました。
内容に不備などございましたら、ご指摘いただけますと幸いです。
基本的な機能の一覧
var の変数宣言
var は古い変数宣言の方法になります。
var での変数宣言は以下のように、上書きや再宣言どちらも出来てしまいます。
しかしプロジェクトが大きくなると、意図しないところで変数を上書き＆再宣言してしまう問題があるため、使用するには注意が必要です。
var val1 = "var変数";
console.log(val1);
// varは上書きが可能
val1 = "var変数を上書き";
console.log(val1);
// varは再宣言が可能
var val1 = "var変数を再宣言";
console.log(val1);
var変数
var変数を上書き
var変数を再宣言
let の変数宣言
ES2015 から導入された、後で書き換えることができる変数を定義する書き方です。
let の特徴として、上書きは可能ですが再宣言は不可能という制約があります。
let val2 = "let変数";
console.log(val2);
// letは上書きが可能
val2 = "let変数を上書き";
console.log(val2);
// letは再宣言が不可能
let val2 = "let変数を再宣言";
console.log(val2);
// エラー
Error in sandbox:
const の定数宣言
const も、ES2015 に導入されたものになります。
特徴としては、上書きと再宣言ともに不可という制約がある、厳密な宣言になります。
なお const は、val や let のような「変数」を定義するのではなく、「定数」を定義するという言い方になります。
数学で出てくる「定数」とも少しニュアンスが違いますので、その点もご注意ください。
const val3 = "const定数";
console.log(val3);
// constは上書きが不可能
val3 = "const定数";
console.log(val3);
// エラー
// constは再宣言が不可能
const val3 = "const定数を再宣言";
console.log(val3);
// エラー
Error in sandbox:
以上のように、const には厳密な制約がかかっております。
オブジェクトを定義する時は、基本的に const しか使いません。
しかし、このような厳密な const でも、const で定義したオブジェクト内の値を変えることができたり、プロパティも追加できてしまいます。
// constで定義したオブジェクトはプロパティの変更が可能
const val4 = {
name: "佐藤一郎",
age: 18,
};
val4.name = "田中太郎";
val4.address = "東京";
console.log(val4);
▼ {name: "田中太郎", "age": 18}
name: "田中太郎"
age: 18
address: "東京"
配列
オブジェクトの時と同様に、const で定義しても中身の値を変えたり、追加（push）したりすることができます。
// constで定義した配列はプロパティの変更が可能
const val5 = ['apple', 'orange'];
val5[0] = "grape";
val5.push('banana');
console.log(val5);
▼ (3) ["grape", "orange", "banana"]
0: "grape"
1: "orange"
2: "banana"
実際に React の開発での宣言もほとんど const を使用していきます。
ここでは記述しませんが、React の中で動的に値が変わるものは state という別の定義を使用します。
ですので基本的には const を使用し、処理の中で上書きが必要な変数に関しては let を使用していく、というような流れになります。
テンプレート文字列
ES2015 から、文字列の中に JavaScript の変数を従来より便利に埋め込めるようになり、コードも読みやすくなりました。
const name = "佐藤一郎";
const age = "18";
// 「私の名前は佐藤一郎です。年齢は18歳です。」と出力したい
// 従来の方法
const message1 = "私の名前は" + name + "です。年齢は" + age + "歳です。";
console.log(message1);
// テンプレート文字列を用いた方法
const message2 = `私の名前は${name}です。年齢は${age}歳です。`;
console.log(message2);
私の名前は佐藤一郎です。年齢は18歳です。
私の名前は佐藤一郎です。年齢は18歳です。
アロー関数
こちらも ES2015 で追加された、新しい関数になります。
function の記述が不要になり、「 => 」という記号で表現され、アロー関数という名前の由来になっています。
アロー関数内の処理が一行で終わるような場合には、「 { } 」と「 return 」の両方を省略することもできます。
ただし、ブラケットを「 { } 」で囲う場合に「 return 」を省略してしまうと、エラーになるため注意が必要です。
// 従来の関数
function func1(str) {
return str;
}
console.log(func1("func1です。"));
const func2 = function(str) {
return str;
}
console.log(func2("func2です。"));
// アロー関数
const func3 = (str) => {
return str;
}
console.log(func3("func3です。"));
const func4 = (str) => str;
console.log(func4("func4です。"));
const func5 = (num1, num2) => num1 + num2;
console.log(func5(10, 20));
func1です。
func2です。
func3です。
func4です。
30
おわりに
分割代入やスプレッド構文、三項演算子などに関しては、後日改めて投稿したいと思います。
参考記事・教材