Reactの基礎 その3:コンポーネント

新しい現場で本格的にReactを触ることになったのでReactについて学んだことを備忘録として記事にしていきます。
今回はReactでアプリを作成していく上で重要となるコンポーネントについてまとめていきます。

サンプルコードについて

サンプルコードはこちらにあります。
記事ごとにコミットログで分けてあるので該当するコミットをご覧ください。

コンポーネントとは

コンポーネントとは、とても平たくいうとアプリケーションを構築する部品のことです。
Reactアプリでは、ヘッダーやフッターなどの大きな部品や、ボタンやフォームなどの小さな部品など、様々な単位でコンポーネント化することができます。
各コンポーネントは、HTML要素を返すJavaScriptの関数と捉えることができ、それぞれ独立して独自にスタイルや振る舞いを保持することができます。
1つのアプリを適切にコンポーネントに分割することによって、管理がしやすくなり、コンポーネントの再利用も可能になります。
これにより、コードの可読性や保守性を高めることができます。

コンポーネントを利用する

では実際にアプリ内でコンポーネントを利用してみましょう。

アプリの見た目を作成する

まずは、アプリの見た目だけ作成してみましょう。
create-react-appで作成したファイルを編集していきます。
src/App.jssrc/App.cssを以下のように修正します

import './App.css';

function App() {
  return (
    <div>
      <div className='header'>
        <h1 className='title'>Todo List</h1>
      </div>
      <div className='body'>
        <div className='card'>
          <input className='todocheck' type='checkbox' />
          <p className='todocontent'>Study English</p>
        </div>
        <div className='card'>
          <input className='todocheck' type='checkbox' />
          <p className='todocontent'>Study React</p>
        </div>
        <div className='card'>
          <input className='todocheck' type='checkbox' />
          <p className='todocontent'>Clean Room</p>
        </div>
      </div>
    </div>
  );
}

export default App;
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-size: 20px;
  border: none;
  background-color: white;
}

.App {
  text-align: center;
}

.header {
  width: 100vw;
  padding: 15px 10px; 
  border-bottom: 1px solid black;
}

.title {
  font-size: 30px;
  font-weight: bold;
}

.body {
  padding: 15px 10px;
}

.card {
  border: 1px solid black;
  border-radius: 3px;
  margin-top: 10px;
  display: flex;
  padding: 5px;
}

.todocheck {
  margin-right: 10px;
}

.todocontent {
  text-align: center;
  font-size: 15px;
}

修正後、アプリを起動すると以下のような画面になると思います。

現状は一つのファイルに全てを記述していますが、こちらをコンポーネントに分割していきましょう。

基本的なコンポーネントの作成方法

先ほど作成した画面を元に、コンポーネントを作成していきます。
まずは基本的なコンポーネントの作成方法をまとめていきます。
下記のようにアプリをヘッダーコンポーネントとボディコンポーネントに分割していきます。

src/Header.jsファイルを作成し、以下のように記述してください。

import React from "react";

function Header() {
  return (
      <div className='header'>
        <h1 className='title'>Todo List</h1>
      </div>
  )
}

export default Header;

これはsrc/App.js内のヘッダー部分のコンポーネントを切り出したものになります。
同じようにsrc/Body.jsフィイルを作成し、ボディ部分を切り出していきましょう。

import React from "react";

function Body() {
  return (
    <div className='body'>
      <div className='card'>
        <input className='todocheck' type='checkbox' />
        <p className='todocontent'>Study English</p>
      </div>
      <div className='card'>
        <input className='todocheck' type='checkbox' />
        <p className='todocontent'>Study React</p>
      </div>
      <div className='card'>
        <input className='todocheck' type='checkbox' />
        <p className='todocontent'>Clean Room</p>
      </div>
    </div>
  )
}

export default Body

ヘッダーコンポーネントとボディコンポーネントが作成できたのでsrc/App.jsファイルから呼び出していきましょう。
src/App.jsを以下のように修正してください。

import './App.css';
import Header from './Header';
import Body from './Body';

function App() {
  return (
    <div>
      <Header />
      <Body />
    </div>
  );
}

export default App;

修正後もアプリの見た目が変わっていなければ成功です。
コンポーネントに切り出すことですっきりとしたコードにすることができました。

プロパティ(props)を持つコンポーネントの作成

先ほどは決まったHTML要素を返すだけのコンポーネントを作成しました。
しかし、表示される文字列などを動的に受け渡して表示させたい場合などでは、このようなコンポーネントでは不便です。
実はReactのコンポーネントにはpropsと呼ばれるプロパティを設定することができ、これに値を受け渡すことで要素を動的に作成することが可能になります。
では、今回はカードコンポーネントを作成し、その内容をpropsで受け渡して表示させるようにしていきましょう。

src/Card.jsファイルを作成し以下のように記述します。

import React from "react";

function Card(props) {
  return (
    <div className='card'>
      <input className='todocheck' type='checkbox' />
      <p className='todocontent'>{props.content}</p>
    </div>
  )
}

export default Card;

propsという引数の中にプロパティで受け取った値を格納することができます。
propsは辞書型で渡されるため、props.contentの部分で利用したい値にアクセスして呼び出しています。
では、カードコンポーネントをボディコンポーネントから呼び出していきましょう。
src/Body.jsを以下のように修正します。

import React from "react";
import Card from "./Card";

function Body() {
  return (
    <div className='body'>
      <Card content='Study English' />
      <Card content='Study React' />
      <Card content='Clean Room' />
    </div>
  )
}

export default Body

propsを受け渡す際はこのようにHTMLの属性を指定するように記述します。
このようにすることで共通のコンポーネントをプロパティによって表示内容を動的に変えることができます。

まとめ

今回はコンポーネントの基本的な作成方法のみご紹介しました。
コンポーネントに分割することでコードがわかりやすく、保守性も上がるので適切にコンポーネント分割をしてアプリを作成していきましょう。
最後まで読んでいただき、ありがとうございました。
それでは、また。

Reactの基礎の過去の記事はこちら。

キョウタコの技術日記

新しい現場で本格的にReactを触ることになったのでReactについて学んだことを備忘録として記事にしていきます。何回か…

キョウタコの技術日記

新しい現場で本格的にReactを触ることになったのでReactについて学んだことを備忘録として記事にしていきます。何回か…