Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

React入門 未経験から1週間でReactをマスターする #03. Class ComponentsとFunction Componentsの書き方

目次

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を利用したテーマの変更 (準備中)

今回の学習内容

今回は、

  • Class Components , Function Components の書き方についての理解
  • Class Componentsでのコンポーネントの書き方

をやっていきます。

YouTubeでの解説動画

YouTubeでも解説しています。
動画で確認したい方はこちらもどうぞ。
【YouTube動画】 未経験から1週間でをマスターするReact入門 #03. Class ComponetnsとFunction Componentsの書き方
【YouTube動画】 未経験から1週間でをマスターするReact入門

この記事のソースコード

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

https://github.com/yassun-youtube/ReactTutorial

ブランチが違うので注意してください↓
スクリーンショット 2020-11-14 1.32.52.png

今回のコミット一覧↓
スクリーンショット 2020-11-14 1.32.45.png

Class Components

少しずつReactの書き方がわかってきたところで、 Class ComponentsFunction Components の話をします。

Reactでのコンポーネントの書き方に、 Class ComponentsFunction Components があります。
Function Components は、本入門で紹介してきた書き方で、 function を定義するとそれがコンポーネントになりました。
Class Components は、 JavaScript のクラスを記載することで、コンポーネントを定義する書き方です。

今は Function Components の書き方が使われることが多くなってきていると思いますが、 Class Components の書き方もまだまだ使われているため、 Class Components の書き方を学んでおく必要があります。

今回は、 App.jsClass Components で書き直してみます。

ブランチの作成

本入門では、すべてのコードを Class Components で記載したものを別ブランチで管理します。

class-components ブランチを作成しましょう。

git checkout -b class-components

App.js の Class Components 化

まず、一番単純なコンポーネントにしてみます。

src/App.js
// 全体的に書き直し
import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>クラスコンポーネントにしてみました。</div>
    )
  }
}

export default App;

もともと function だったものが、 class に変わっていることがわかると思います。
function だったときは、その return<div> を返していましたが、 Class Components では
render 関数の返り値が表示するものになります。

画面表示を確認してみましょう。

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

このようになりました。

List.js の Class Components 化

List.js も同じ様に変更します。

src/List.js
import React from 'react';

export class List extends React.Component {
  render() {
    const { title } = this.props;

    return (
      <div>
        <h4>{ title }</h4>
        <div>リストです</div>
      </div>
    )
  }
}

List コンポーネントでは、 propstitle という値を利用していました。
Class Components では、 this.propsprops が入っています。
Function Components では、下記のように関数の引数に入っていましたね。

const List = ({ title }) => {}

App.jsから List.js を呼び出す

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

class App extends React.Component {
  render() {
    return (
      <div>
        クラスコンポーネントにしてみました。
        <List title="取り扱い言語一覧" /> // 追加
      </div>
    )
  }
}

export default App;

これは以前行った変更と同じですね。
画面表示は下図のようになります。

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


Class Components での state の利用

App.jsstate を利用するようにコードを修正してみます。

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

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { description: 'クリック前の表示' }
  }

  changeDescription() {
    this.setState({
      description: 'クリック後の表示です。'
    })
  }

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

export default App;

同じことができるコードなのですが、 Function Components より少し長いですね。
画面にはボタンが表示されていて、クリックすると下記のように表示されます。

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

コードの解説

Class Components では、 state の初期値は constructor で定義します。

  constructor(props) {
    super(props);
    this.state = { description: 'クリック前の表示' }
  }

ここですね。 constructorprops を引数にとり、それを super(props) で渡す必要があります。
その後、 state を初期化しています。
初期化のときは、 this.state = {}= を使います。

次に changeDescription を見ていくと、

  changeDescription() {
    this.setState({
      description: 'クリック後の表示です。'
    })
  }

となっていて、 setState という関数で state を更新していることがわかります。
ここで注意して欲しいのが、これは this.state = では動きません。

Reactでは、ステートの更新を明示的に関数で呼び出してやる必要があります。 setState を呼ばれると、Reactがコンポーネントの表示を更新する必要があるとわかるわけですね。

最後に、 button に対しての onClick イベントを追加している部分を見ていきます。

<button onClick={() => this.changeDescription()}>ボタン</button>

ここでは、 onClickchangeDescription メソッドを呼び出しています。

ここで注意してほしいのが、 onClickchangeDescription 関数の参照だけを渡すとエラーになることです。

<button onClick={this.changeDescription}>ボタン</button>

このように記載を変えると、ボタンを押すとエラーになります。

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

参照だけ渡すと this の罠に捕まってしまうので、ちゃんとこのインスタンスが参照されるように意識しましょう。

ちなみに、 bindthis を固定してもちゃんと動きます。
こちらの書き方のほうが好きという方はこちらの書き方を利用しても良いです。

<button onClick={this.changeDescription.bind(this)}>ボタン</button>

今日やったこと

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

Class Components と Function Componentsの違い

一番単純なコンポーネント

class ClassComponent extends React.Component {
  render() {
    return (
      <div>クラスです。</div>
    )
  }
}
function FunctionComponent {
  return (
    <div>ファンクションです</div>
  )
}

プロパティの違い

Class Componentsでは、

this.props

Function Components

function FuncCompo(props) {}

ステートの違い

初期化

Class Components

constructor(props) {
  super(props);
  this.state = { test: initialValue };
}

Function Components

const [test, setTest] = useState(initialValue);

ステートの変更

Class Components

this.setState({ test: value })

Function Components

setTest(value);

おわりに

これで入門 その2と同様のコードを Class Components の書き方で書くことができました。
今後の入門は、基本的に Function Components の書き方で書いていきますが、 Class Components での書き方も解説していきます。

次の記事

React入門 未経験から1週間でReactをマスターする #04. 条件分岐(if)と繰り返し(loop)
https://qiita.com/yassun-youtube/items/9474b1681958e2ab0f25

yassun-youtube
教育系エンジニアやっすんがエンジニアに役立つTipsを毎日紹介するYouTubeチャンネル「やっすんのエンジニア大学」をやっています。 エンジニアリングに興味のある方全員が知って得するTIPSをお届けしています!
https://www.youtube.com/channel/UCajrdoGzHzDogrNrLYYmGsg/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away