React初心者のためのハンズオンその１[勉強方法とReactの基本] ｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ

━目次━

Reactに興味があるけど何となく「難しそう」と感じて手が出せない人、

ネットで軽く調べてみたけど「？？？」な人、

モダンなJavaScriptをどれか習得したいと思っている人、

そんな人達がReactを始めるキッカケになればと思いこの記事を書いています。

Reactはとっかかりが難しく、勉強方法を間違えると嫌いになってしまいがちですが、順序立てて学習すれば決して難しくありません。

騙されたと思ってこのハンズオンをやってみてください！！！

そう、騙されたと思って始めれば実際に騙されてもダメージは少ないはず…←

私が主催するこちらのイベントでReactのハンズオンをして、なかなか評判が良かったのでこのブログにもまとめています。

また、上記イベントでは時間の関係上全部できずに終わったので、参加された方も要チェックです。

Reactハンズオン全体像

React初心者のためのハンズオンその１[勉強方法とReactの基本]
React初心者のためのハンズオンその２[Propsとコンポーネント化]
React初心者のためのハンズオンその３[Stateでの状態管理]
React初心者のためのハンズオンその４[API実行と一覧表示]

それではReactの世界へようこそ！Hello React!!

Reactハンズオンを始める前に

Reactをオススメする理由

ハンズオンがメインなので細かくは書きませんが、私がReactをオススメする理由は以下です。

なぜReactを勧めるか

Reactはライブラリ(VueやAngularはフレームワーク)
日本ではまだまだ開発者が少なく仕事がとりやすい
アプリ開発にも繋がる(ReactNative)

ライブラリで何が良いかと言うと

「Reactをやっていると自然とJavaScriptの力がつく」

からです。

例えばコンポーネントのループだと、Vueは< v-for >などの用意されたタグを使いますが、Reactの場合はJavaScriptのmap関数を使って実現します。(ハンズオン内でも実践するのでお楽しみに)

これは一例ですが、Reactでは他にもJavaScriptの様々な機能を最大限生かしてコーディングしていくので知らず知らずのうちに自力がつくと思います。

仕事がとりやすいというのは、私自身が本当に実感していることですし、ReactをやっていればReacNativeの案件も視野に入るのでコスパが良いです。

Reactの勉強方法でやってはダメなこと

Reactにつまづく人達に話を聞いたりして思ったことです。
(自分も最初、「むずっっ」って挫折しそうになりました)

React初学者がやってはダメなこと

いきなり完成されたコードを読み解く
いきなりReduxをやろうとする
いきなりHooksをやろうとする

簡単にまとめると、

「基礎からしっかり順番に」

です。

小さなコンポーネントを実際に書いて組み立てるところから順々にやり始めれば、理解は非常にスムーズになります。

そしてこのハンズオンはまさにそれを体感できるようになっていますので、安心してついてきてください。大丈夫、おじさん全然怪しくないからね～。こわくないこわくないよ～。

環境

ハンズオンの環境ですが、WEBエディターで行います。

よって面倒な環境構築は一切不要です。

以下の記事で紹介していますが、スーパー優秀なCodeSandboxを使います。

Reactの環境構築につまずいた全ての人へCodeSandboxをオススメする理由と使い方
https://freelance-jak.com/technology/react/1106/
絶賛React勉強中のじゃけぇです。何か新しい言語やフレームワークを勉強しようとしたときに誰もがぶつかる壁、…

GitHubアカウントをお持ちの方は是非Sign inして連携しちゃってください。

ハンズオン事前準備

じゃけぇ

では、前置きはこれくらいにしてハンズオンはじめよ～う

※GUIは2019年7月時点なので多少変更はあるかもしれません

CodeSandboxにアクセスする

右上のCreate Sandboxを押下する

Reactを押下する

はい！これだけでReactプロジェクトが完成です！

考える人

やべぇ～～～～～～

軽く説明すると、基本的にはホットリロードが効いているのでソースを修正したら右側の画面が合わせて変わってくれますが、如何せんWEB上なのでたまにおかしいと思うときはソースを『保存』してからブラウザごと再読み込みしてみてください。

初期コードの説明

初期コードの説明を簡単にすると、publicフォルダ配下にindex.html、srcフォルダ配下にindex.jsとstyles.cssが配備されています。

ReactなどのSPA(single Page Application)はHTMLは1つのみで、jsのレンダリングで画面遷移などを表現します。

index.htmlの30行目あたりに、<div id=”root”></div>とあると思いますが、ここがレンダリングする目印となっています。

HTMLファイルを触ることはないので、ここだけ確認したら閉じてしまいましょう。

index.jsは最初に呼ばれるコンポーネントで、cssは説明不要かと思います。

不要なファイルの削除

今回のハンズオンではcssファイルは使用しないので、styles.cssは削除しましょう。

マウスオーバーすると×ボタンがでるので押下して、Deleteを押下します。

次にindex.jsをひらいて、一旦内容を全て削除してしまいましょう！

では、白紙の状態から書き始めましょう。

画面タイトルを表示してみよう

この章のゴールは以下のようにh2タグでタイトルを表示することです。

では書いていきましょう。

これはお決まりですが、Reactを使う場合、「react」からimportする必要があります。
「react-dom」はHTMLにレンダリングするのに必要なので１番親のコンポーネントのみimportが必要です。

index.jsにimport文を書いていきます。

[index.js]

import React from "react";
import ReactDOM from "react-dom";

1 2	import React from "react"; import ReactDOM from "react-dom";

次に関数を書きます。ES2015(ES6)から導入されたアロー関数を知らない人は先に調べることをオススメしますが、説明もするので雰囲気では分かるかと思います。

Appという関数名でnullを返却するだけの関数を作りましょう。

[index.js]

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return null;
};

import React from "react";

import ReactDOM from "react-dom";

const App = () => {

return null;

};

そしてこの定義したAppをHTMLファイルにレンダリングする処理を記述します。

[index.js]

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return null;
};

ReactDOM.render(<App />, document.getElementById("root"));

import React from "react";

import ReactDOM from "react-dom";

const App = () => {

return null;

};

ReactDOM.render(<App />, document.getElementById("root"));

さぁこれで枠が完成しました！今はnullしか返してないので画面には何も表示されないと思いますが、エラーは出なくなったはずです。

このApp関数のreturn文の中にHTMLのタグを書いていくのがReact特有のJSX記法と呼ばれるものなのです。

また、<App />のように、関数を< />で囲むことでコンポーネントとして扱うことができます。

では先程の関数を以下のように修正してみましょう。

[index.js]

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <h2>Reactハンズオン！</h2>;
};

ReactDOM.render(<App />, document.getElementById("root"));

import React from "react";

import ReactDOM from "react-dom";

const App = () => {

return <h2>Reactハンズオン！</h2>;

};

ReactDOM.render(<App />, document.getElementById("root"));

すると以下のようにタイトルが表示されたと思います！

考える人

これが噂のJSX記法ってやつか、、、

じゃけぇ

JavaScriptの中にHTMLタグを書くから慣れないうちはちょっと違和感あるかもね

じゃけぇ

そしてこのJSXを使ってHTMLタグがreturnされた関数(ここで言うApp)を関数コンポーネント(Functional Component)って呼ぶんだよ

Reactはこういったコンポーネントを定義して、それらを組み合わせることで画面を作っていきます。

関数コンポーネントとは別にクラスコンポーネントというものがあります。ハンズオンで後程紹介するのでお楽しみに！

タイトルの下に説明文を追加してみよう！

では次に先ほどのタイトルの下にpタグで説明文を追加してみましょう。

普通のHTMLの感覚で書くと以下のように書きたくなると思います。
(あ、returnが複数行になるときはカッコで囲みましょうね。)

[index.js]

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    <h2>Reactハンズオン！</h2>
    <p>Reactは難しくないよー</p>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

import React from "react";

import ReactDOM from "react-dom";

const App = () => {

return (

<h2>Reactハンズオン！</h2>

<p>Reactは難しくないよー</p>

);

};

ReactDOM.render(<App />, document.getElementById("root"));

しかしこう書くと以下のようなエラーが表示されていると思います。

Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>…?

何を言っているかというと、

「JSXの要素は1つのタグで囲まんかい！fragment使ったらどうや？お？」

って怒っています。短気ですね。

これがJSXの最大のルールで、

returnするタグは1つに囲まないといけない

のです。

回避方法は大きく３つあります。

１．divタグなどHTML標準の何かしらのタグで囲む

先ほどの例で言うと、以下のようにすればエラーは消えるでしょう。

[index.js]

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    <div>
      <h2>Reactハンズオン！</h2>
      <p>Reactは難しくないよー</p>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

import React from "react";

import ReactDOM from "react-dom";

const App = () => {

return (

<div>

<h2>Reactハンズオン！</h2>

<p>Reactは難しくないよー</p>

</div>

);

};

ReactDOM.render(<App />, document.getElementById("root"));

ただこの場合、エラーを回避する目的のためだけに不要なdivをレンダリングしていることになり、スマートではない場合もあるでしょう。

２．React.Fragmentで囲む

Reactの途中のバージョンからFragmentというものが使えるようになりました。

流石に開発者も「コレゼンゼンスマートジャナイヨ」ってなったのでしょう。

[index.js]

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    <React.Fragment>
      <h2>Reactハンズオン！</h2>
      <p>Reactは難しくないよー</p>
    </React.Fragment>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

import React from "react";

import ReactDOM from "react-dom";

const App = () => {

return (

<React.Fragment>

<h2>Reactハンズオン！</h2>

<p>Reactは難しくないよー</p>

</React.Fragment>

);

};

ReactDOM.render(<App />, document.getElementById("root"));

これはエラーを回避でき、且つ画面に不要な要素がレンダリングされない方法です。

でもちょっと長ったらしいしいちいちこれ書くのメンドクサイですよね。そこで最後の手法。

３．<></>で囲む

なんと以下のように書けます。

[index.js]

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return (
    <>
      <h2>Reactハンズオン！</h2>
      <p>Reactは難しくないよー</p>
    </>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

import React from "react";

import ReactDOM from "react-dom";

const App = () => {

return (

<h2>Reactハンズオン！</h2>

<p>Reactは難しくないよー</p>

</>

);

};

ReactDOM.render(<App />, document.getElementById("root"));

これはReact.Fragmentと全く同じ意味の省略形です。

１番外のタグに、特にスタイルなど適用しなくて良い、ただエラー回避のためだけに囲みたいときはこれを使っておけばOKです！

さいごに

さぁReactの基礎となるJSXはマスターできましたね。

長くなってきましたので、続きは次回としましょう。

尚、このハンズオンのソースはGiHubに公開しています。
https://github.com/freelance-jak/react-handson_1_h2p

次はReactで重要な役割を果たしてくれるPropsについて書きながら紹介したいと思います！

もし「分かり易い！」と感じたら是非のボタンからシェアしてReactの輪を拡げて頂けたらと思います！

↓その２へ↓
React初心者のためのハンズオンその２[Propsとコンポーネント化]

それでは！また！！

最後まで読んで頂きありがとうございます！
人気の記事だけ集めたので是非覗いていってください＾＾
　厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-

React初心者のためのハンズオンその１[勉強方法とReactの基本]

Reactハンズオンを始める前に

Reactをオススメする理由

Reactの勉強方法でやってはダメなこと

環境

ハンズオン事前準備

初期コードの説明

不要なファイルの削除

画面タイトルを表示してみよう

タイトルの下に説明文を追加してみよう！

さいごに

この記事を書いている人

じゃけぇ

“React初心者のためのハンズオンその１[勉強方法とReactの基本]” への1件のフィードバック

コメントを残すコメントをキャンセル

Reactハンズオンを始める前に

Reactをオススメする理由

Reactの勉強方法でやってはダメなこと

環境

ハンズオン事前準備

初期コードの説明

不要なファイルの削除

画面タイトルを表示してみよう

タイトルの下に説明文を追加してみよう！

さいごに

この記事を書いている人

じゃけぇ

関連記事

“React初心者のためのハンズオン その１[勉強方法とReactの基本]” への1件のフィードバック

コメントを残す コメントをキャンセル

“React初心者のためのハンズオンその１[勉強方法とReactの基本]” への1件のフィードバック

コメントを残すコメントをキャンセル