ナノトイラボ 
今回は、Reactでよく使うJavaScriptのメソッドや構文を8つ解説していきます。
基本的な構文の記述方法を解説していきます。少しでも参考になれば幸いです。
Reactを始めたばかりの人間の備忘録的な部分がありますのでご了承願います。
本記事の内容は書籍「これからはじめるReact実践入門」を参考にしています。
コンテンツ
リテラル表現
ここでは、基本的な文字列の扱いにおいて、便利な記述方法を解説していきます。
変数宣言における「let」「var」「const」の使い分けは下記の記事が参考になると思います。
参考：【React入門】letとvarとconstの違いや使い分けを徹底解説！（変数宣言）
テンプレートリテラル
テンプレートリテラル（文字列）は文字列をバッククォート「`」（Shift + @）で括る記法です。
テンプレートリテラルを持ちることで以下のような記述が可能です。
|
1 2 3 4 5 6 7 8 9 |
const name = 'Taro tanaka'; const msg = `Hello, ${name} How are you today?`; console.log(msg); /* Hello, Taro tanaka How are you today? */ |
従来の記法であれば、改行には「\n」, 文字列の結合には「+」や「&」などを用いる必要がありました。
バッククォートではそれらをシンプルに記述できます。
桁区切り文字
桁区切り文字「_」（アンダースコア）を用いることで可読性を高めることができます。
|
1 2 3 4 5 6 7 8 9 |
const value1 = 123_456_789; console.log(value1); // 123456789 const value2 = 1_2_3_4_5_6; console.log(value2); // 123456 |
ただし、下記のような場合は桁区切りという概念からずれるため記述できません。
- 記号や小数点の前後に記述
- 連続して「_」（アンダースコア）を記述
|
1 2 3 4 5 6 7 8 9 |
const value3 = 10_; console.log(value3); // Parsing error const value4 = 1__6; console.log(value4); // 複数の連続した数値区切り記号を指定することはできません。 |
アロー関数
アロー関数は、関数の引数と、関数の内容を「 => 」を用いて記述します。矢印に似ていることからこの名前がついています。
|
1 2 3 4 5 6 |
// 関数が1文の場合 const area = (r) => r * r * Math.pi; // 引数がひとつの場合、かっこを省略できる const area = r => r * r * Math.pi; |
アロー関数は、処理の内容を簡易的に表すための記法で、コードがスッキリします。
上記のサンプル2つ目のように、引数がひとつの場合、かっこを省略できますが、引数がない場合は省略できません。
Reactでは非常によく見る記法ですので覚えておきましょう！
オブジェクトリテラルの構文
変数のプロパティとその値を格納する名前が同じ場合は、値の指定を省略できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
const name = `田中`; const age = 20; const info1 = {name, age}; console.log(info1) // { name: "田中", age: 20 } const info2 = {name : name, age : age}; console.log(info2) // { name: "田中", age: 20 } const info3 = {name_ : name, age_ : age}; console.log(info3) // { name_: "田中", age_: 20 } |
以下のように、メソッドへのプロパティ名の指定や、
|
1 2 3 4 5 6 7 8 |
const name = `田中`; const info1 = { name, introduce(){ console.log(`私は${name}です。`); } } |
プロパティ名を動的に生成することも可能です。
|
1 2 3 4 5 6 7 8 9 |
let i = 0; const nums = { [`num${i++}`]: `1番目`, [`num${i++}`]: `2番目`, [`num${i++}`]: `3番目`, }; // { num0: "1番目", num1: "2番目", num2: "3番目" } |
分割代入
分割代入とは、オブジェクトや配列から特定の要素を抜き出し、個別の変数に割り当てる構文です。
非常によく用いる記述方法です。
配列の分割代入
配列の分割代入では、特定の要素を抜き出し、個別の変数に割り当てる構文です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const list = [1, 2, 3]; const [a, b, c] = list; console.log(a, b, c); // 1 2 3 const [x, y] = list; console.log(x, y); // 1 2 const [x1, x2, x3, x4] = list; console.log(x1, x2, x3, x4); // 1 2 3 undefined |
オブジェクトの分割代入
オブジェクトの分割代入をする場合も様々な記法が用意されています。
以下のサンプルでは、デフォルト値を指定する方法です。
|
1 2 3 4 5 6 7 8 9 10 |
const info = { name: `田中`, sex: `M`, age: 20 }; const {name, age = `22`, mail = `aaa.gmail.com`} = info; console.log(name, age, mail); // 田中 20 aaa.gmail.com |
また、以下のようにプロパティを変更したり、指定されなかったプロパティを複数取得することも可能です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
const info = { name: `田中`, sex: `M`, age: 20 }; const {name: temp, ...rest} = info; console.log(temp); // 田中 console.log(rest); // { sex: "M", age: 20 } |
可変長引数とその利用
可変量引数を用意した関数を定義するには、変数名の前に「…」（ピリオド3つ）を付与します。
こうすることで、任意の数の値を関数に渡すことが可能になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function calc_sum(...nums) { let sum = 0; for (const num of nums) { sum += num; } return sum; } console.log(calc_sum(1,2,3)); // 6 console.log(calc_sum(1,2,3,4)); // 10 console.log(calc_sum(1,2,3,4,5)); // 15 |
オプショナルチェイニング
オプショナルチェイニング（変数の後に「?」を付ける）とは、変数に値が定義されていないデータに対してメソッドを呼び出す際に、nullやundefinedを判定してくれる便利な機能です。
値が定義されていないと4行目のようにメソッドを呼び出す際にエラーとなってしまいますが、オプショナルチェイニングを利用すると、「?」の一文字で解決できます。
|
1 2 3 4 5 6 7 |
const sample = null; console.log(sample.length); // Uncaught TypeError: sample is null console.log(sample?.length); // undefined |
また、Null合体演算子（変数の後に「??」を付ける）という記法も存在します。
Null合体演算子は、値がnullやundefinedの場合の規定値を設定できる記法です。
|
1 2 3 4 |
const sample = null; console.log(sample ?? `${sample}です。`); // nullです。 |
まとめ
今回は、Reactでよく使うJavaScriptのメソッドや構文を8つ解説しました。
Reactというよりは、それ以前のJavaScriptの内容がメインでしたが、非常に重要な内容となっていますので、使いこなせるようになりたいところです。
本記事が少しでも参考になれば幸いです。
本記事の内容は書籍「これからはじめるReact実践入門」を参考にしています。
