React開発の特徴として、様々なコンポーネントを開発しそれらを組み合わせることで、最終的にアプリケーションにしていきます。

今回はReact開発で重要なコンポーネントを定義する方法について書きます。

Contents

コンポーネントとは

コンポーネントとはUIの一部となる見た目（View）と機能（Controller）を合わせたものになります。

コンポーネント化しておくことで、

  • 再利用できる。
  • 見た目や機能が統一できる。
  • 管理がしやすくなる。

などのメリットが生まれます。

コンポーネントの定義

Reactではクラスまたは関数でコンポーネントを定義することができます。

クラスでの定義

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>I'm {this.props.name}</div>
  }
}

クラスコンポーネントの特徴として

  • React.Componentを継承する。
  • constructorでpropを受け取る。
  • renderメソッド内でJSXをreturnする。
  • ライフサイクルやstateを持つ。

が挙げられます。

関数での定義

import React from 'react';

const App = (props) => {
  return <div>I'm {props.name}</div>
}

が関数コンポーネントの特徴として

  • 関数内でJSXをreturnする。
  • 引数でpropsを受け取る。
  • ライフサイクルやstateを持たない。

挙げられます。

どちらを使うべきか

基本的に関数コンポーネントを使った方が良いです。

関数コンポーネントは記述がシンプルであり、React16.8からHookという機能が導入されたことによって、関数コンポーネントでもライフサイクルやstateに相当するものが使えるようになりました。

ただHookによってクラスコンポーネントの機能を全てカバーしたわけではないので、用途に応じてコンポーネントを使い分けます。

親コンポーネントと子コンポーネント

コンポーネント内にさらに他のコンポーネントを記述して返すこともできます。

他のコンポーネントの取り入れる時は、空要素でコンポーネント名を記述します。

<コンポーネント名 />

この時コンポーネントを取り込んだ方が親コンポーネントとなり、取り込まれた方が子コンポーネントとなります。

import React from 'react';

// 親コンポーネント
const App = () => {
  return <Greeting />
}

// 子コンポーネント
const Greeting = () => {
  return <div>Hello, World!</div>
}

export default App;

// Hello, World!

AppコンポーネントがにGreetingコンポーネントを取り込んでAppコンポーネントから「Hello, World!」を表示させています。

この例だとあまり効果はないのですが、実際にアプリケーションを開発する場合、それぞれの機能をコンポーネントにすることで疎結合になり、開発やリファクタリングがしやすくなります。

再利用する

開発やリファクタリングがしやすく以外にも、コンポーネントのメリットとして再利用ができます。

これによって何回も同じものを作る必要がなくなります。

import React from 'react';

// 親コンポーネント
const App = () => {
  return (
    <>
      <Greeting />
      <Greeting />
      <Greeting />
    </>
  )
}

// 子コンポーネント
const Greeting = () => {
  return <div>Hello, World!</div>
}

export default App;

// Hello, World!
// Hello, World!
// Hello, World!

まとめ

  • コンポーネントはクラスまたは関数で定義する。
  • クラスコンポーネントではライフサイクルやstateが使える。
  • Hook機能を使えば関数コンポーネントでもライフサイクルやstateに相当するものが使える。
  • 基本的に関数コンポーネントを使い、用途に応じてクラスコンポーネントと使い分ける。

さいごに

以上、クラスコンポーネントと関数コンポーネントの特徴についてでした。

Hook機能が使えることによってシンプルに記述できるようになりありがたいです。

propsやライフサイクル、stateについてはここでは記述していませんが、次回以降書いていきたいと思います。

参考