Reactを学習するためのJavaScript
今回は、Reactを習得することがゴールであるから、JavaScriptはただの通過点。であるから、Reactで活きるJavaScript最低限の知識をまとめていく。
JavaScriptの基礎
- 変数の宣言
Reactでは、constとletが基本になってくるためこの二つは網羅しておく。
sample.js
const name = "React";
let count = 0;
const：再宣言、再代入、繰り返し文 使用不可
let ：再宣言、再代入、繰り返し文 使用可
- 関数の作成
アロー関数を用いたシンプルな関数の作成方法の理解。
sample.js
const greet = (name) => `Hello, ${name}!`;
console.log(greet("React"));
この関数を用いることで通常の関数の表記と比べて改行しなくてよい、などの利点が多くあるため、積極的にこの関数を使っていくとよい。
その名の通り、 => この記号がアローに見えることからアロー関数と呼ばれている。
- 条件分岐
JSX（HTMLのようなコードを書くための拡張機能）内でもよく使うため、ifや三項演算子の基本を理解しておくとよい。
sample.js
const isLoggedIn = true;
const message = isLoggedIn ? "Welcome!" : "Please log in.";
console.log(message);
- 配列のメソッド
Reactでは配列操作が頻繁に起きるため知っておくべき。
sample.js
const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2); // [2, 4, 6]
- オブジェクトとスプレッド構文
状態管理（コンポーネントやアプリ全体の「データの状態」を管理し、それを使ってUIを動的に変化させる仕組み）によく使うため知っておくべき。
sample.js
const user = { name: "React", age: 5 };
const updatedUser = { ...user, age: 6 }; // { name: "React", age: 6 }
- 非同期処理
外部データを取得するのに必要となってくる。具体的には、Webアプリケーションで外部のサーバーからデータを取得したり、データを送信したりする際に使う。
役割としては、時間のかかる操作をしている間にほかの作業を進められるというもの。実現方法としては主に三つある。
-
コールバック関数
-
Promise
-
async/await
- ES6の構文
分割代入
配列やオブジェクトの要素を簡単に取り出して、変数に割り当てる構文。コードを従来よりシンプルにできる。
sample.js
const user = { name: "React", age: 5 };
const { name, age } = user;
console.log(name, age); // React 5
テンプレートリテラル
テンプレートリテラルはバッククォート（`）で囲んで記述する。
中に埋め込みたい変数や式を、${}の中に書くことで結果を文字列に挿入できる。
sample.js
const name = "React";
console.log(`Hello, ${name}!`);
まとめ
- 変数の宣言（constとlet）
- 配列やオブジェクトの基本操作
- 非同期処理
- ES6構文（分割代入、テンプレートリテラル）
これらの知識を踏まえたうえで、Reactを学びながら不足分を補っていくと効率よく学べると思う。