LoginSignup
43

More than 3 years have passed since last update.

React入門 未経験から1週間でReactをマスターする #02. コンポーネントのプロパティ(props)とステート(state)

Last updated at Posted at 2020-11-11

目次

1. Reactの新規プロジェクトの立ち上げ
2. コンポーネントのプロパティ(props)とステート(state) ←今ここ
3. Class Components と Function Components
4. 条件分岐 (if) と繰り返し (loop)
5. フォームと親子間のデータのやり取り
6. コンポーネントのライフサイクル
7. スタイル (準備中)
8. Higher-Order Component (準備中)
9. Portalを利用したモーダル (準備中)
10. refによるエレメントの取得 (準備中)
11. Contextを利用したテーマの変更 (準備中)

今回の学習内容

今回は、

  • コンポーネントの作成
  • コンポーネント内で他のコンポーネントを利用する方法
  • propsとstate
  • コンポーネント内のクリックイベントで画面を変更する

をやっていきます。

この記事のソースコード

ソースコードはGitHubで公開しています。

本記事の内容は下記コミットになります。

スクリーンショット 2020-11-10 22.45.39.png

YouTubeでの解説動画

YouTubeでも解説しています。
動画で確認したい方はこちらもどうぞ。
【YouTube動画】 未経験から1週間でをマスターするReact入門 #02. コンポーネントのプロパティ(props)とステート(state)
【YouTube動画】 未経験から1週間でをマスターするReact入門

コンポーネントの作成

まずは新しいコンポーネントを作成していきます。

ただ div 要素が一つだけあるすごく簡単なコンポーネントを src/List.js に作ります。

src/List.js
export const List = () => {
  return (
    <div>リストです</div>
  )
}

すごく簡単ですね。
Reactはとてもシンプルにコンポーネントを作成できます。

内容としては、 List という関数(変数)を定義してそれを export しているだけです。

コンポーネント内で他のコンポーネントを利用する

では、今作成したコンポーネントを App.js から呼び出してみましょう。

src/App.js
import { List } from "./List"; // 追加

function App() {
  return (
    <div>
      ゼロから始めるReact入門
      <List/> { /* 追加 */ }
    </div>
  );
}

export default App;

このように簡単にコンポーネントを利用できます。

Webページは下記のようになります。

スクリーンショット 2020-10-31 14.15.58.png

とても簡単ですね。

コンポーネントにタイトルを渡す

今は単純に App.js から List.js を呼び出しただけでした。
次に、 App.js から List.js を呼び出すときにタイトルを渡してみましょう。

まず、 App.js を修正します。

src/App.js
import { List } from "./List";

function App() {
  return (
    <div>
      ゼロから始めるReact入門
      <List title="取り扱い言語一覧"/>  // 変更
    </div>
  );
}

export default App;

Listtitle 属性でタイトルを渡すようにしました。
この時点ではまだ List.js 側にそれを受け取る処理がないのでWebページに変更はありません。

次に、 List.js を修正します。

src/List.js
export const List = ({ title }) => { // 変更
  return (
    <div>
      <h4>{ title }</h4> // 追加
      <div>リストです</div>
    </div>
  )
}

先程渡した title 属性を List.js が処理できるようにしました。
Reactのコンポーネントでは、関数の最初の引数がHTMLでいう属性値を受け取るようになります。
これを プロパティ と呼びます。よく props と表現されることが多いです。

function ComponentFunc(props) {}

このようにコンポーネントの最初の引数は props になっていて、それが Object の形で渡されるので、 ({ title }) として title 属性を取れたことになります。
JavaScriptに詳しくない人に説明すると、

const title = props.title;

と同じことをしたので title に値が入ったわけですね。

スクリーンショット 2020-10-31 14.30.08.png

コミット

ここまでのコミットはこちらです。

プロパティとステート(propsとstate)

先程利用した props は親のコンポーネントから子供のコンポーネントを呼び出す時に使うものです。
親から渡されるもので、読み込み専用です。

先程の title のように利用します。

props とは別に、 Reactにはstate という概念があります。
これはコンポーネントの状態を表します。
stateprops とは違って変更が可能です。
例えばコンポーネントは、状態によって表示を変更したいということがあります。
そのような場合に state を利用します。

stateを使ってみる

state を学習するために「ボタンを押すと画面表示が変わる」コンポーネントを作ってみます。

src/App.js
import { useState } from 'react'; // 追加
import { List } from "./List";

function App() {
  const [description, setDescription] = useState('クリック前の表示'); // 追加

  return (
    <div>
      { description } { /* 変更 */ }
      <List title="取り扱い言語一覧"/>
    </div>
  );
}

export default App;

Reactには useState という関数が用意されていてそれを利用することで state を定義できます。

今回は下記で description という state を定義しています。 useState は初期値を引数に持ち、
statestate を変更する関数を返り値で返します。

  const [description, setDescription] = useState('クリック前の表示'); // 追加

この部分で description には 初期値として クリック前の表示 という文字列が入ります。

コンポーネント中にこの description を表示するようにしたので、画面は下記のように変わりました。

スクリーンショット 2020-10-31 21.47.46.png

クリックして画面表示が変わるようにする。

今度は画面をクリックすると先程定義した state が変わるようにしてみます。

src/App.js
import { useState } from 'react';
import { List } from "./List";

function App() {
  const [description, setDescription] = useState('クリック前の表示');

  const changeDescription = () => { // 追加
    setDescription('クリック後の表示です。')
  }

  return (
    <div>
      { description }
      <List title="取り扱い言語一覧"/>
      <button onClick={changeDescription}>ボタン</button> // 追加
    </div>
  );
}

export default App;

changeDescription という関数を追加しました。
この関数は実行されると画面表示が変わります。

また、クリックされると changeDescription 関数を呼ぶボタンを追加しました。

onClick={changeDescription}

Reactでは、クリックイベントは上記のように定義します。 {} 内は関数への参照を定義できます。

上記は、下記でも同じものになります。

onClick={() => setDescription('クリック後の表示です') }

ボタンを押すと、Webページは下図のように表示されます。

スクリーンショット 2020-10-31 21.55.13.png

ここまでのコミット

ここまでのコミットは下記です。

今日やったこと

今日やったことをまとめます。

コンポーネントの作り方

export const ComponentFunc = () => {
  return <div></div>
}

親コンポーネントから子コンポーネントへのプロパティの渡し方

<List title="値">

子コンポーネントからプロパティの参照方法

const ComponentFunc = (props) => {}

stateによるコンポーネントの状態の変更

const [value, setValue] = useState('initial')

おわりに

今日はコンポーネントの作成とプロパティ、ステートについて学びました。
まだよくわからない部分がありそうと思ったら、再度記事を読み返していただけると嬉しいです。

次回は、 Reactの Function ComponentsClass Components の書き方についてお話していきます。

次の記事

React入門 未経験から1週間でReactをマスターする #03. Class ComponentsとFunction Componentsの書き方
https://qiita.com/yassun-youtube/items/2ed8601e4fa477726705

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
43