React初心者のためのハンズオンその２[Propsとコンポーネント化] ｜ 25歳でフリーランス28歳で起業したエンジニア -じゃけぇ- のあれこれ

━目次━

Reactハンズオンその２です。

１から順番にやるのをオススメします。

Reactハンズオン全体像

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

さて前回までで、タイトルと説明文を表示するところまでできましたね。

今回はズバリ「Props」と「コンポーネント化」というReactの根幹とも言える機能について学びます。

じゃけぇ

独学だとここで「？？？」ってなるけどこのハンズオンをやればきっと理解できるから安心するんだ～

Reactの世界へようこそ！ニーハオ React!!

文字にスタイルをあててみよう

では前回の続きからやります。

JSXでCSSを適用させるやり方の１つが以下のようなものです。書いてみましょう。

[index.js]

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

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

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

import React from "react";

import ReactDOM from "react-dom";

const App = () => {

return (

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

<p style={{ color: "blue" }}>Reactは難しくないよー</p>

</>

);

};

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

何やら{{が２つ書かれていますね。JSXではHTMLタグ内であっても{}で囲むことでその内部でJavaScriptのコードを書くことができます。

なのでここでは

外側の{
　JavaScriptを書くためのJSX記法

内側の{
　JavaScriptのオブジェクト定義のための{

styleという属性にJavaScriptのオブジェクトで定義したCSSをあてはめることでスタイリングできるということですね。

なので以下のようにも書けます。

[index.js]

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

const messageStyle = {
  color: "blue"
};

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

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

import React from "react";

import ReactDOM from "react-dom";

const messageStyle = {

color: "blue"

};

const App = () => {

return (

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

<p style={messageStyle}>Reactは難しくないよー</p>

</>

);

};

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

考える人

CSSまでもJavaScriptで書くんじゃの～

じゃけぇ

勿論CSSファイルに書くこともできるけどね！Reactはコンポーネントごとに独立しているのが望ましいから、jsファイルごとにCSSも独立しているほうが都合が良いことが多いかな。

ここでは最初の書き方で進めていきましょう！

コンポーネント化してみよう

ではReactの真骨頂とも言えるコンポーネント化をしていきましょう！

画面の要素を大小様々なコンポーネントに分割して別々のファイルにしておくことで、色々な画面で使い回せたりコンポーネントごとのテストが容易になるというメリットがあります。

まずは、コンポーネントを入れるフォルダを作りましょう。
srcの部分にマウスオーバーして、右から２番目のNew Directoryを押して、「components」という名前をつけます。

同様にcomponentsフォルダにマウスオーバーして、右から３番目のNew Fileを押して、「Msg.js」という名前でファイルをつくります。

今のディレクトリ構造はこんな感じ

ではこれから、pタグで「Reactは難しくないよー」と表示していた部分をコンポーネント化していきたいと思います。

Msg.jsを開いて、いつも通りReactを使えるようにしましょう。
(※これはコンポーネントを返すだけで直接HTMLにレンダリングするわけではないのでreact-domは不要です)

[Msg.js]

import React from "react";

1 2	import React from "react";

次にこれまでの要領で、pタグのメッセージだけを持った関数コンポーネントを作成します。
名前はMsgとしておきましょう。

[Msg.js]

import React from "react";

const Msg = () => {
  return <p style={{ color: "blue" }}>Reactは難しくないよー</p>;
};

import React from "react";

const Msg = () => {

return <p style={{ color: "blue" }}>Reactは難しくないよー</p>;

};

最後に、この関数コンポーネントを他のファイルで使えるようにexportしてあげる必要があります。
基本的に「default」をつけておけばOKです。

[Msg.js]

import React from "react";

const Msg = () => {
  return <p style={{ color: "blue" }}>Reactは難しくないよー</p>;
};

export default Msg;

import React from "react";

const Msg = () => {

return <p style={{ color: "blue" }}>Reactは難しくないよー</p>;

};

export default Msg;

さぁ、これでメッセージのみを持ったコンポーネントが作成できました！

あとはこいつを呼び出して使うだけです。

ではindex.jsを開いて、先程exportしたMsgを使えるようにimportしましょう。

[index.js]

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

import Msg from "./components/Msg";

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

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

import React from "react";

import ReactDOM from "react-dom";

import Msg from "./components/Msg";

const App = () => {

return (

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

<p style={{ color: "blue" }}>Reactは難しくないよー</p>

</>

);

};

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

このように、相対パスでファイルを指定して名前(Msg)をつけることでそのファイルで対象のコンポーネントが使えるようになります！たったのこれだけ！

では最後に、index.jsのpタグの部分をimportしたMsgコンポーネントに差し替えてみましょう。

[index.js]

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

import Msg from "./components/Msg";

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

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

import React from "react";

import ReactDOM from "react-dom";

import Msg from "./components/Msg";

const App = () => {

return (

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

<Msg />

</>

);

};

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

これでエラーなく、表示もそのままならコンポーネント化大成功です！やったぜ。

Propsを渡してみる

コンポーネント化をしたことによって、上記<Msg />コンポーネントは他の画面でも使い回せるようになりましたが、今のままだと

『青色』で、『Reactは難しくないよー』

という文字を表示する固定のコンポーネントになっちゃってます。

この『』で囲まれているような要素って動的に変更できたら便利そうじゃないですか？

例えば、ある画面では『赤色』にしたり、ある画面では『Vueは簡単だよー』という文言にしたり、といった感じですね。

そこで登場するのがPropsというものです。

図でイメージすると分かり易いですが、以下のようにPropsとはコンポーネントに渡す引数のようなものです。

ええ、何も難しくありません。実際に書いてみましょう。

Msg.jsを作った時の要領で、componentsフォルダ配下に「ColorfulMsg.js」というファイルを新規作成しましょう。

フォルダ構成はこんな感じ。

Msg.jsの内容を全てコピーして、ColorfulMsg.jsにペーストし、以下のようにコンポーネント名のみ「ColorfulMsg」に修正します。

[ColorfulMsg.js]

import React from "react";

const ColorfulMsg = () => {
  return <p style={{ color: "blue" }}>Reactは難しくないよー</p>;
};

export default ColorfulMsg;

import React from "react";

const ColorfulMsg = () => {

return <p style={{ color: "blue" }}>Reactは難しくないよー</p>;

};

export default ColorfulMsg;

呼び出し側のコンポーネント名とimport先も修正しましょう。

[index.js]

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

import ColorfulMsg from "./components/ColorfulMsg";

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

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

import React from "react";

import ReactDOM from "react-dom";

import ColorfulMsg from "./components/ColorfulMsg";

const App = () => {

return (

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

</>

);

};

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

さて、とりあえずここまでで、エラーなく表示も変わってなければOKです。

じゃけぇ

じゃあお待ちかねPropsを渡していこーう！

Propsは、HTMLのidやnameの要領でコンポーネントタグ内に好きな名前を設定して渡すことができます。

例えば以下の例では、「color」という名前で「blue」という値のPropsを渡しています。
書いてみましょう。

[index.js]

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

import ColorfulMsg from "./components/ColorfulMsg";

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

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

import React from "react";

import ReactDOM from "react-dom";

import ColorfulMsg from "./components/ColorfulMsg";

const App = () => {

return (

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

</>

);

};

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

この時点ではエラーにはならないはずです。(Propsを渡すだけ渡して使っていない状態)

ではColorfulMsg側で渡されたPropsを使っていきたいと思います。

引数にpropsを設定することで、その中にPropsに設定した値が入ってきます。
(※アローファンクションでは引数が1つの場合、()を省略できます)

[ColorfulMsg.js]

import React from "react";

const ColorfulMsg = props => {
  return <p style={{ color: props.color }}>Reactは難しくないよー</p>;
};

export default ColorfulMsg;

import React from "react";

const ColorfulMsg = props => {

return <p style={{ color: props.color }}>Reactは難しくないよー</p>;

};

export default ColorfulMsg;

さぁどうでしょうか？エラーなく表示もそのままであれば大成功です。

Propsとしてcolorを渡したので、上記のようにprops.colorとすることで使用することができます。

考える人

おおー！でも別に変数名は「props」じゃなくても良いんじゃろ？？

じゃけぇ

まぁそうだね。でも通例としてpropsにするのが一般的だから他の人の可読性も考えるとpropsにしておくことをオススメするよ

では同じ要領で表示するメッセージ(message)もPropsとして渡してみましょう。もう慣れたものでしょう。

[index.js]

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

import ColorfulMsg from "./components/ColorfulMsg";

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

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

import React from "react";

import ReactDOM from "react-dom";

import ColorfulMsg from "./components/ColorfulMsg";

const App = () => {

return (

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

</>

);

};

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

ColorfulMsg側も修正します。JSX記法ではタグ内でJavaScriptの変数を使う場合は{}で囲むのでしたね。

[ColorfulMsg.js]

import React from "react";

const ColorfulMsg = props => {
  return <p style={{ color: props.color }}>{props.message}</p>;
};

export default ColorfulMsg;

import React from "react";

const ColorfulMsg = props => {

return <p style={{ color: props.color }}>{props.message}</p>;

};

export default ColorfulMsg;

できましたね！このようにPropsはいくつでも渡すことが可能です。

考える人

これでワシもPropsマスターじゃの～！！

じゃけぇ

ちょっと気が早い！あと少し！！

Propsで良く使う概念として「children」というものがあります。

props.childrenとすることで値を扱えるのですが、ここに入ってくる値は何かと言うと

コンポーネントタグに囲まれた要素

です。

実際に例を見たほうが早いので先ほどのファイルを以下のように修正してみてください。

[index.js]

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

import ColorfulMsg from "./components/ColorfulMsg";

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

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

import React from "react";

import ReactDOM from "react-dom";

import ColorfulMsg from "./components/ColorfulMsg";

const App = () => {

return (

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

<ColorfulMsg color="blue">Reactは難しくないよー</ColorfulMsg>

</>

);

};

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

[ColorfulMsg.js]

import React from "react";

const ColorfulMsg = props => {
  return <p style={{ color: props.color }}>{props.children}</p>;
};

export default ColorfulMsg;

import React from "react";

const ColorfulMsg = props => {

return <p style={{ color: props.color }}>{props.children}</p>;

};

export default ColorfulMsg;

上記のようにしても表示は同じままだと思います。

このようにコンポーネントタグを開始タグと終了タグに分離し、その間に何か設定することで自動的に「props.children」として扱うことができます。

このほうが、

文字として「Reactは難しくないよー」と表示して、オプションとして色は「blue」なんだな

というのが直感的に分かり易いと思います。

childrenは良くでてくるので覚えておきましょう！

コンポーネントの使い回しを体感してみよう

では最後におまけ的に。

ここまでの流れであなたは

「色」と「文章」を受け取ることで、「色でスタイリングされた文章を返す」

というコンポーネントの作成に成功しています。

こういった風にコンポーネントのINとOUTを考えることをコンポーネント設計と言ったりします。

いかに効率よく使い回せるコンポーネント設計ができるかが大事ですね。

それではColorfulMsgも使い回してみましょう。
index.jsを以下のように修正します。

[index.js]

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

import ColorfulMsg from "./components/ColorfulMsg";

const App = () => {
  return (
    <>
      <h2>Reactハンズオン！</h2>
      <ColorfulMsg color="blue">Reactは難しくないよー</ColorfulMsg>
      <ColorfulMsg color="green">Vueも難しくないよー</ColorfulMsg>
      <ColorfulMsg color="red">Angularは、、、</ColorfulMsg>
    </>
  );
};

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

import React from "react";

import ReactDOM from "react-dom";

import ColorfulMsg from "./components/ColorfulMsg";

const App = () => {

return (

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

<ColorfulMsg color="blue">Reactは難しくないよー</ColorfulMsg>

<ColorfulMsg color="green">Vueも難しくないよー</ColorfulMsg>

<ColorfulMsg color="red">Angularは、、、</ColorfulMsg>

</>

);

};

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

以下のように、スタイリングされた文字が表示されたら完璧です！

さいごに

さてさてReactの世界にはだいぶ慣れてきたでしょうか？(ﾟ∀ﾟ)

コンポーネント化とPropsはマスターできましたね。順番にやっていけばさほど難しくないと思います。

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

さぁさぁ次はReactで最も重要な概念とも言えるStateについて紹介します。

その名の通りコンポーネントの「状態」を表す値で、画面の動きやアクションは全てこのStateで管理していきます。

PropsとStateが分かればReactで画面が作れるようになるので、もう少し頑張っていきましょう！

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

↓その３へ↓
React初心者のためのハンズオンその３[Stateでの状態管理]

それでは！また！！

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

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

文字にスタイルをあててみよう

コンポーネント化してみよう

Propsを渡してみる

コンポーネントの使い回しを体感してみよう

さいごに

この記事を書いている人

じゃけぇ

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

文字にスタイルをあててみよう

コンポーネント化してみよう

Propsを渡してみる

コンポーネントの使い回しを体感してみよう

さいごに

この記事を書いている人

じゃけぇ

関連記事

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

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