React開発Part0～JavaScriptの必須項目～

はじめに

　未経験からエンジニアを目指しているTunと申します。
自己紹介は最初の記事に記載していますので割愛させていただきます。

　今回はReact開発の学習に向けて、JavaScriptの抑えるべき最低限の項目を書き記したいと思います。書籍には目を通しましたが、復習がてら書いてみようと思います。
（解釈違い等がございましたら、ご教授願います。）

変数宣言

• let :上書き可、再宣言不可

letによる変数上書きの例

let val = "変数";
console.log(val);  //変数

//valを上書き
val = "変数上書き";
console.log(val);  //変数上書き

letでの再宣言の例

let val2 = "変数2";
console.log(val2);  //変数2

//val2を再宣言できない
let val2 = "変数2を再宣言";  //エラー

出力結果

Identifier 'val2' has already been declared

　このように、letはvar同様上書きが可能ですが、再宣言は上記のような出力結果でエラーになります。

• const :上書き不可、再宣言不可

constは両方不可

const val3 = "変数3";
console.log(val3);  //変数3

//constは上書きさえも不可能
val3 = "変数3を上書き";  //エラー

出力結果

Assignment to constant variable.

　constで宣言した変数に関しては、再宣言はもちろん、上書きでさえも不可能になります。

テンプレート文字列

従来の書き方

const name = "Tun";
const age = 22;
const message = "My name is" + name + ",I'm" + age + "years old.";

console.log(message); //My name is Tun,I'm 22 years old.

テンプレート文字列

const name = "Tun";
const age = 22;
const message2 = `My name is ${name},I'm ${age} years old.`;

console.log(message2); //My name is Tun,I'm 22 years old.

　${変数名}を使用することによって、従来の書き方よりもコードが見易くなり、上記の例に関しては文章での名詞nameと変数nameの区別が一目瞭然です。また、文章自体も「``」（バッククォート）で囲むことで、従来の「＋」や複数の「""」の冗長な面を排除できます。　

アロー関数

従来の書き方

const func1 = function(value){
  return value;
};

console.log(func1("Tunです")); //Tunです

アロー関数

const func2 = (value) => {
  return value;
};

console.log(func2("Tunです")); //Tunです

　アロー関数は、従来のfunctionを省略する代わりに、引数を宣言する( )の後にアローという名前の由来のように弓矢のような「=>」を追加します。
　またアロー関数にはもっと省略できます。

1. アロー関数に引数が一つ => 引数の( )を省略できる
2. returnの処理が一行 => return{}を省略できる
   上記を踏まえ省略してみると

アロー関数省略版

const func2 = value => value;

console.log(func1("Tunです")); //Tunです

　ここまで省略可能ですが、あまり省略しすぎると関数の場所がわかりづらくなるというデメリットも潜んでいます。また上記の例は、ただ受け取った引数をそのまま表示するという無意味な処理ですが、もっと複雑なプログラムで引数が二つ以上、または処理が一行以上の場合は省略ができません。

分割代入

従来の書き方～オブジェクト～

const myPlofile = {
  name = "Tun";
  age = 22;
};
const message = `My name is ${myPlofile.name},I'm ${myPlofile.age} years old.`;

console.log(message); //My name is Tun,I'm 22 years old.

分割代入～オブジェクト～

const myPlofile = {
  name = "Tun";
  age = 22;
};
const {name, age} = myPlofile; //追加
const message2 = `My name is ${name},I'm ${age} years old.`;

console.log(message2); //My name is Tun,I'm 22 years old.

　分割代入は、オブジェクトのプロパティの冗長性を排除してくれます。上記の例は、分割代入の恩恵を感じられないですが、オブジェクト内のプロパティが多くなるほど必要性がわかります。
　変数messageのテンプレート文字列内の「myPlofile」は、分割代入のおかげで書かなくて済みます。

従来の書き方～配列～

const myPlofile = ["Tun", 22];
const message = `My name is ${myPlofile[0]},I'm ${myPlofile[1]} years old.`;

console.log(message); //My name is Tun,I'm 22 years old.

分割代入～配列～

const myPlofile = ["Tun", 22];
const [name, age] = myPlofile; //追加
const message2 = `My name is ${name},I'm ${age} years old.`;

console.log(message2); //My name is Tun,I'm 22 years old.

　配列に関しては、index番号を指定して表示させるのが従来の書き方でした。分割代入でもindex番号は、name（index[0]）やage（index[1]）のように意識しないといけませんが、「myPlofile」と冗長性は排除できますし、myPlofile[0]の記述よりも何が書いてあるかが明確に宣言できます。

スプレッド構文

従来の書き方

const arr = [1, 2];

const sumFunc = (num1, num2) => console.log(num1 + num2);

sumFunc(arr[0],arr[1]); //3

スプレッド構分

const arr = [1, 2];

const sumFunc = (num1, num2) => console.log(num1 + num2);

sumFunc(...arr);

　スプレッド構文は、配列内部を順番に展開する機能があり、上記の例では配列arrの要素を順番に展開して関数sumFuncの引数として渡し、アロー関数で処理結果を表示しています。

　また、オブジェクトや配列といったオブジェクト型には参照先の問題がありますが、これをスプレッド構文が解決してくれます。

配列の変数名でコピー

const arr1 = [1, 2];

const arr1 = arr2;

arr2[0] = 100;

console.log(arr1); //[100, 2]
console.log(arr2); //[100, 2]

スプレッド構文

const arr1 = [1, 2];

const arr2 = [...arr1];

arr2[0] = 100;

console.log(arr1); //[10, 2]
console.log(arr2); //[100, 2]

　変数名でコピーする場合は、配列に対する参照がコピーされるため、配列自体の要素が変わるともちろん同じ結果になります。これは上記の例で行くと、arr1とarr2が同じ配列の参照先をさしているためこのようなことが起きるのです。
　しかし、スプレッド構文を使うと、arr2という新しい配列が作成されるため、参照先はそれぞれの配列になります。上記の例では、arr2のindex[0]の要素の値を100に変更してますが、arr1には何ら変更がないのがわかります。

map関数

　map関数はforの処理を簡潔にしてくれる優れものです。さっそく例を見てみましょう。

従来のforの書き方

const nameArr = ["Tun", "Tun2", "Tun3"];

for(let i = 0; i < nameArr.length; i++){
  console.log(`${i + 1}番目は${nameArr[i]}です。`);
};
//1番目はTunです。
//2番目はTun2です。
//3番目はTun3です。

map関数

const nameArr2 = ["Tun", "Tun2", "Tun3"];

nameArr2.map((name, i) => console.log(`${i + 1}番目は${nameArr[i]}です。`));
//1番目はTunです。
//2番目はTun2です。
//3番目はTun3です。

　map関数は配列を順番に処理して、処理した結果を配列として受け取りも可能です。上記のように配列である必要がない場合は、そのまま結果を表示することもできます。
　また、下記にも紹介しますが、map関数やfilter関数は、第2引数にindexの情報が格納されている。

filter関数

filter関数

const numArr = [1, 2, 3, 4, 5];

const newNumArr = numArr.filter((num) => {
  return num % 2 === 1; 
});

console.log(newNumArr); //[1, 3, 5]

　filter関数はreturnの後の条件式に一致するもののみを返す。すなわち、配列の中から特定の条件に一致するものを抽出する処理とも言えます。

まとめ

　これまで紹介してきたものは、最低限のものでありまだまだ必要な知識は山ほどありますが、Reactの入門するにはこれだけ押さえることができれば十分かなと思います。
　また、JavaScript不安な方は、「改訂3版JavaScript本格入門」も一読すればかなりの知識が付くと思います。APIやイベントハンドラなどを記載していますので、一旦JSを極めたいのであればそちらから学習するのもありかなと。。。

参考

モダンJavaScriptの基本から始める React実践の教科書