React開発に必要なJavaScriptの基本文法を紹介

りっきー（エンジニア）

2023.01.06

IT技術

JavaScript

はじめに

福岡でバックエンドエンジニアをやっています、りっきーです。

最新、社内勉強会にて React コンポーネントを作成したり、プライベートで NextJs + React でポートフォリオ作成などしています。

React 開発では JavaScript を使用するのですが、今回は React を早く理解するために、最低限必要な JavaScript の基本文法を紹介したいと思います。

JavaScript・TypeScriptの基本文法紹介

React開発では JavaScript、TypeScript の様々な記法、ルールを駆使して開発します。

早速ですが、React 開発に必要な JavaScript、TypeScript の基本的な記法・ルールを紹介します。

モダンJavaScriptの記法・ルール

変数宣言

const を使用して上書き・再宣言不可能にすることで、最初に代入した値が変わらないことが担保され、コードの理解が容易になります。React では基本的に const を使用するようです。

1// 上書き可能、再宣言可能
2var hoge = "var変数1";
3hoge = "var変数2";
4var hoge = "var変数2";
5
6// 上書き可能、再宣言不可能
7let hoge2 = "let変数";
8
9// 上書き、再宣言不可能
10const hoge3 = "const変数";

アロー関数

ES2015 で取り入れられた関数の記法です。

アロー関数には省略記法がいくつかあります。省略されると、はじめのうちはなんのこっちゃ〜、となっていましたが=>があると関数なんだということを意識すれば次第に慣れてきて便利に感じるようになりました。

1//今までの関数
2function hogeFunction(value) {
3    return value;
4};

1// アロー関数
2const hogeFunc = (value) => {
3    return value;
4};

省略記法

1// 1つ目
2// 引数が1つの場合のみ、かっこを省略できる
3const hogeFunc = value => { 
4    return value;
5};

1// 2つ目
2// return1文のみの場合、{}とreturnを省略できる
3// 引数をそのままreturn
4 const hogeFunc = value => value;

オブジェクトの分割代入

オブジェクト名.プロパティ名を使わずにそのまま変数に代入できる。プロパティが多い場合に有用。

1const user = {
2    sei: "honda",
3    name: "keisuke",
4};
5// 分割代入
6// 各変数に代入できる
7const { sei, name } = user;

オブジェクトの省略記法

オブジェクトのプロパティ名と変数名が同じであれば、プロパティ名を省略することができます

1const sei = "ホンダ";
2const name = "keisuke";
3
4// 通常の定義
5const userA = {
6     sei: sei,
7     name: name,
8};
9// 省略できる
10const userB = {
11     sei,
12     name,
13};

ループ処理(map)

配列の各要素に対してアロー関数を実行して、新しい配列を生成します。従来のfor文よりも簡潔に書けます。

1const hogeArray = [1,2];
2
3// ()にアロー関数を記述して、配列の各要素に対して2倍した値の新しい配列を生成する
4const newArray = hogeArray.map((num) => num * 2);

TypeScriptの記法・ルール

TypeScript とは Microsoft が開発した JavaScript です。JavaScript で型を扱えるようになりました。TypeScriptは JavaScript のスーパーセットにあたるので、今までの JavaScript 機能もすべて使用することができます。

型定義を使いこなすことで、意図しない値が設定されることを未然に防ぐことができます。また、props に型を定義することで、未然に意図しない値をコンポーネントに渡すことを防いでくれたりもします。React 開発では必ずといっていいほど TypeScript の型定義を利用するので、React 開発する際に必須の知識になります。

基本的な型指定

1//　コロンで型を指定します
2// 文字列 
3const str: string = "honda";
4
5// 数値
6const num: number = 10;
7
8// 配列
9const arry: Array<string> = ["honda","keisuke"];
10
11// 関数の型
12// 引数の型、戻り値の型(void)
13const funcA = (str: string): void => {
14    console.log(str);  
15};
16
17// オブジェクトの型
18const obj: { str: string, num: number };
19obj = {
20    str: "honda",
21    num: 10,
22};

いろんな型指定

1// Union型
2// stringとnumberどちらでも代入可能
3let hoge: string | number = "honda";
4hoge = 10;
5
6// 型のエイリアス
7// 型の定義を変数に入れて使い回すことができる
8type HogeType1 = {
9    sei: string;
10    name: string;
11};
12type HogeType2 = {
13　　　　　　　　// ?をつけることで、実装時に値を省略可能
14    address?: string;
15};
16
17// Intersection型 
18// &で型を指定
19// 複数の型をマージできる
20const hogeConst: HogeType1 & HogeType2 = {
21    sei: "honda",
22    name: "keisuke",
23    address: "earth",   
24};
25// addressを省略することもできる
26const hogeConst: HogeType1 & HogeType2 = {
27    sei: "honda",
28    name: "keisuke",
29};

まとめ

以上、簡単ですが React開発に必要な JavaScript、Typescript の基本文法を紹介させていただきました。はじめはとっつきにくく、難しい印象がありましたが、様々な React コンポーネントを見ていくうちに簡潔に書けるJavaScript が楽しくなってきました。今回紹介した基本文法を知っておくだけでも、React コンポーネントが少しは見やすくなったのではないでしょうか。

ES2015から新たに便利な仕様が多く提供されました。基本文法を学んだ後は、ES2015 の便利な機能を学んでみるといいかもしれません。React 開発では JavaScript、TypeScript は必須になってきますので、本記事が JavaScript を深く学ぶきっかけになれれば幸いです。

最後までご覧頂きましてありがとうございました。

ITフリーランスのエンジニア専門エージェント