React.jsの学習のポイントをまとめてみた【フロントエンドエンジニア編】

React.js学習中なんだけど押さえておくべきポイントとかある？

フロントエンドエンジニアを目指しています。

今回はそんな疑問に回答します。

React.jsはJavaScriptの中でも圧倒的な人気フレームワークです。

最近だとReact.jsを使用する企業も増えてきており、React.jsのフロントエンジニアを目指す人も多くなってきました。ただ、現場が求めているレベルでReact.jsを使用できる人は少ないのが現状です。

私のこれまでのReact.jsの現場経験から学習のポイントやおすすめ学習手順をまとめておこうと思います。

これから学習する方はぜひ参考にしてみてください！

学習の全体像とおすすめ手順
学習のポイントを紹介
最後に

学習の全体像とおすすめ手順

学習の全体像とおすすめ手順を紹介します。

React.jsはJavaScriptのフレームワークなので、JavaScriptの知識がないと躓つまずきやすく挫折してしまいます。そのためまずはJavaScriptの基本知識を身に付ける必要があります。また並行してWeb周りの基本知識を身に付けると良いと思います。

そしていよいよReact.jsの学習です。React.jsのコンポーネント指向について理解し、業務でよく使用するHooks（フック）について学習しておくと良いでしょう。

そして、Gitも学習して慣れておきましょう。Gitはチーム開発で必須のツールで、苦手意識がある人が多いのですが、現場に入る前に必ず学習しておきましょう。（React.jsを使用したフロントエンド開発にGitはほぼ必須なので今回記事に含めてみました。）

その後、余裕があればTypeScriptとNext.jsにも触れておくと良いでしょう。

TypeScriptは、React.jsと相性が良いとされているJavaScriptを拡張した静的型付き言語です。JavaScriptよりも品質の良いコードを書くことができて、企業でも人気の言語なので必須レベルです。

また、Next.jsはReact.jsのフレームワークです。React.jsと比較するとルーティング等の機能が更に便利になっています。これも業務でよく使用されます。

では、それぞれ細かく解説していきます。

学習のポイントを紹介

JavaScriptの基本知識

学習中の人

なぜJavaScriptを学習しないといけないの？

カシムラ

React.jsはJavaScriptのフレームワークなので、JavaScriptの知識がないと躓つまずきやすく挫折してしまうのです。逆にいうと、JavaScriptの知識を身につけてしまえば、React.jsの習得にそんなに苦労しないと思います。

ではJavaScriptの学習のポイントを紹介します。

学習のポイント

Googleで「JavaScript　基礎」と検索をかけて出てきた文法は基本的に使いこなせるくらいのレベルになるまで学習した方が良いです。

まずJavaScriptの基礎として下記の理解は必須です。

変数、定数
四則演算
配列（配列の定義、要素の追加・削除）
クラス、オブジェクトとプロパティ
コンソール出力（ブラウザの検証ツールからconsole.log結果を確認する手順）
条件分岐文
繰り返し文
関数（定義、呼び出し、引数、戻り値）
アロー関数
JSON
非同期処理（promise、async/await）
例外処理

加えて、React.jsでよく使用するJavaScriptの基本文法を紹介します。

三項演算子

条件を満たす場合は値1を返す、条件を満たさない場合は値2を返す、という演算子です。
if文と似ていますがJSX（※）の中に判定を記述したい場合は三項演算子を使用する必要があります。

条件 ? 値 1 : 値 2

※JSXとはReact.jsの用語です。JavaScriptの中にHTMLを記述することをいいます。

論理演算子（&&, ||）

「&&」は論理積といいます。expr1 を false と見ることができる場合は expr1 を返す、条件を満たさない場合は expr2 を返す、という演算子です。

expr1 && expr2

両オペランドが true であれば && は true を返し、そうでなければ false を返す、という意味もありますが、React.jsでは前者の意味で覚えておくと良いです。その理由は以下のような用途があるからです。

expr1 && expr2 (
  // JSXを記述
)

これは expr1 がtrue の場合は JSXを表示するという意味になります。

「||」は論理和といいます。expr1 を true と見ることができる場合はexpr1 を返す、条件を満たさない場合は expr2 を返す、という演算子です。「&&」よりは重要ではないですが区別して覚えておくと良いです。

expr1 || expr2

分割代入

オブジェクトからデータを抽出するとき、一行で値を受け取ることができます。

var colors = ['red', 'blue', 'green'];

// 分割を行わない代入
var val1 = colors[0];
var val2 = colors[1];
var val3 = colors[2];

// 分割代入
var [val1, val2, val3] = colors;

スプレッド構文

オブジェクトに用いるとプロパティと値の組み合わせを展開して取り出すことができます。

const rect = {type: 'rectangle', width: 100, height: 30};
const rectClone = {...rect};
console.log(rectClone);  // {type: "rectangle", width: 100, height: 30}

map関数

map関数とは、JavaScriptの繰り返し文の一つです。

繰り返し文には、for文、forEach文、while文などもありますが、map関数は配列と相性が良く、JSXの中に記述することもできるのでよく使用されます。

const ary = [1, 2, 3];
const mapary = ary.map(() => (
  return value + 1;
);

fetch（フェッチ）メソッド

「fetch」とは、取ってくる、呼び出す、引き出すという意味です。非同期通信でリクエストを発行して、そのレスポンス（サーバ上のデータ）を取得することができる関数です。

以下のように記述することで、URLへ非同期通信でリクエストを発行してレスポンスを取得することができます。

fetch("URL");

Web周りの基本知識

学習中の人

Web周りの基本知識って何？

カシムラ

ネットワーク、データベース、セキュリティなどのコンピュータサイエンス基礎やLinuxコマンドなどのITエンジニアに必要な知識のことです。

フロントエンジニアは、プログラミング言語だけではなくネットワークやデータベースなどの知識も求められます。

では、Web周りの基本知識の学習のポイントを紹介します。

学習のポイント

コンピュータサイエンス基礎

ネットワーク、データベース、セキュリティなどのITエンジニアに必要な知識のことです。これらは業務の基盤となる知識で、知っておくと業務をより円滑に遂行することができます。

ネットワーク
…IPアドレス、HTTPリクエストなど
データベース
…SQL、ER図など
セキュリティ
…公開鍵・秘密鍵など

Linuxコマンド

Linuxコマンドとは、ターミナル（コマンドプロンプト）上からディレクトリ・ファイルを操作するコマンドのことです。

知らないと業務ができないというわけではありませんが、知っていると業務で役に立ちます。

用途	Windows	MacOS
現在のディレクトリ直下のフォルダ/ファイルを表示	dir	ls
指定のディレクトリへ移動する	cd [dir]	cd [dir]
ファイルやディレクトリを移動	move [from] [to]	mv [from] [to]
ディレクトリ名を変更	move [old] [new]	mv [old] [new]
ファイル名を変更	ren [old] [new]	mv [old] [new]
ディレクトリを作成	mkdir [dir]	mkdir [dir]
ファイルを作成	copy nul [dir]	touch [file]
ファイルを削除	del [dir]	rm [dir]
空のディレクトリを削除	rmdir [dir]	rmdir [dir]

React.js

JavaScriptとWeb周り基本知識の学習を終えたら、いよいよReact.jsの学習です。

React.jsの公式ドキュメント

まずはReact.jsの公式ドキュメントをサッと読んでみましょう。

React – ユーザインターフェース構築のための JavaScript ライブラリ

ユーザインターフェース構築のための JavaScript ライブラリ

React.jsの概念「コンポーネント指向」

React.jsは、コンポーネント指向型のJavaScriptフレームワークです。

JavaScriptの中でHTMLを記述する（この記述をJSXという）ことができ、ボタンやテキストボックス、ヘッダーなど一つ一つを部品として定義することができます。

この部品のことをコンポーネントといい、コンポーネントを組み合わせて画面を構築していくことができます。

SPA（シングルページアプリケーション）での画面遷移は、このコンポーネントを入れ替えることで実現しています。これがReact.jsの魅力の一つです。

カシムラ

SPA（シングルページアプリケーション）とは、単一のWebページでアプリケーションを構成する設計構造の名称です。

Props（プロップス）

他のプログラミング言語でいう「引数」です。

親コンポーネントから子コンポーネントを呼び出す際に、親コンポーネントから子コンポーネントへ値をPropsとして渡すことができます。

コードで書くとこんな感じです。

const App = () => {
　return <Hello name='Kashimura' />;
};

const Hello = (props) => {
　return <h1>Hello, {props.name}</h1>;
};

上記の場合、画面に「Hello, Kashimura」という文字列をH1タグで表示します。

Hooks（フック）

Hooksとは、React.jsの関数コンポーネントで使用できる便利な要素です。

React.jsには、関数コンポーネントとクラスコンポーネントの二つがありますが、最近は関数コンポーネントがよく使われています。その理由は、関数コンポーネントでしか使用できないHooksが登場して、関数コンポーネントの方がより便利になったからです。

それではHooksの中で代表的なものを紹介します。

useState

useStateは状態管理を行うことできるHooksです。

元々、クラスコンポーネントでしか状態管理ができませんでしたが、Hooks（useState）の登場によって関数コンポーネントでも状態管理ができるようになりました。

useStateを使用したプログラムの例を紹介します。

import React, { useState } from 'react';

const App = () => {
　const [count, setCount] = useState(0);
　return (
　　<div>
　　　<div>カウント: { count }< /div>
　　　<button onClick={() => setCount(count + 1)}>＋</button>
　　　<button onClick={() => setCount(count + 1)}>ー</button>
　　</div>
　);
};

export default App;

このプログラムを実行すると、カウンターの数値と＋ボタン、ーボタンが表示されます。＋ボタン押下で数値に1を加算、ーボタン押下で数値から1を減算するのですが、その値（状態）の管理はuseStateが行います。

uaseEffect

useEffect内に記述したプログラムは、レンダリング後に実行されます。

レンダリングとはDOMを描画することです。もっと簡単にいうと画面のロード処理です。

つまりuseEffectを使用すると、画面をロードした後にプログラムを実行することができるのです。

useEffectを使用したプログラムの例を紹介します。

App.jsx

import React, { useState, useEffect } from 'react';

const App = () => {
　const [ count, setCount ] = useState(0);
　useEffect(
　　() => {
　　　// 偶数の時にlogを出力する
　　　const outputEvenNumber = () => {
　　　　if (count % 2 === 0) {
　　　　　console.log(count);
　　　　}
　　　};
　}, [ count ]);
　return (
　　<div>
　　　<div>カウント: { count }< /div>
　　　<button onClick={() => setCount(count + 1)}>＋< /button>
　　</div>
　);
};

export default App;

このプログラムを実行すると、カウンターの数値と＋ボタンが表示されます。＋ボタン押下で数値に1を加算し、数値が偶数になったときコンソールへその数値を出力します。

useEffectの第二引数に配列（要素：count）を渡すと、countの値が更新されたときにuseEffect内の処理が実行されます。