Chapter 03

Classコンポーネントの基礎

実際にコンポーネントを作りながら、コンポーネントがどういったものか、どうやって使うのか、などをみていきましょう。

つかみたい概要

  • Reactではコンポーネント(部品) を組み合わせてWebページの見た目や機能を作成します。
  • コンポーネントはJSXを返すクラスである
  • JSXに変数や関数を含めることができる
  • クラスメソッドへのアクセスにはthisを使う

コンポーネントとは?

コンポーネントとは具体的にどういったモノなのでしょうか。一言で表現すると、
コンポーネントは 『JSX』を返却するクラス・または関数』 です。

ポイント: コンポーネントとは 『JSX』を返却するクラス・または関数』

JSXとは、仮想DOMのことをいうのでした。具体的には以下のような書き方です。
このHTMLのように書いてある部分<div>Hello!</div>JSXです。

JSXは、まるでHTMLのようなJavaScriptの値です。

const helloNode = <div>Hello!</div>;

では早速Reactコンポーネントのコードを見てみましょう!

Classコンポーネントの例

以下は「Welcomeコンポーネント」という架空のコンポーネントの例です。

class Welcome extends React.Component {
  render() {
    return (
      <h1>Hello, React!</h1>
    );
  }
}

render()という関数が使われていますね。
Renderとは描画するという意味です。つまり画面への描画をする関数です。

render()関数の中でreturnされた仮想DOMが、画面に描画されます。これは、Reactによって決まっている約束事です。

この「Welcomeコンポーネント」は、画面に<h1>Hello, React!</h1>を描画します。

コンポーネントに要素を追加する

コンポーネントが管理できる要素は、一つだけに限りません。

先ほどの「Welcomeコンポーネント」にボタンを追加してみましょう。

エラー!以下のコードは動きません!

// エラー!
class Welcome extends React.Component {
  render() {
    return (
      <h1>Hello, React!</h1>
      <button>ボタン</button> ←追加
    );
  }
}

上記の例はエラーになってしまいます。なぜでしょうか?

実は、コンポーネントはひとまとまりの要素しかRenderできません。
エラーを解消するためには、以下のように<div>で囲んでひとまとまりにします。

class Welcome extends React.Component {
  render() {
    return (
      <div> ←追加
        <h1>Hello, React!</h1>
        <button>ボタン</button>
      </div>
    );
  }
}

画面にボタンが描画されました!

ポイント: 1つのコンポーネントは、ひとまとまりの要素しか描画できない

変数を画面に描画する

Hello, React!と表示されている部分を、変数に変えてみましょう。

let title = 'へろー、りあくと!'; //追加

class Welcome extends React.Component {
  render() {
    return (
      <div>
        <h1>{title}</h1> ←追加
        <button>ボタン</button>
      </div>
    );
  }
}

変数titleの内容を画面に表示させることができました。

ポイント: JSXの中で、変数や式などを扱う場合は{}波括弧でくくる

タイトルを変化させる

無事、変数を画面に表示することができました!
それならこの変数titleの値を書き換えれば、「動的に」画面タイトルを変化させることができそうです。

ボタンをクリックしたら、タイトルが書き換わるようにしてみましょう。

ボタンにイベントを設定する

ボタンを押した時に変数が書き換わるようにしたいので、まずはボタンにイベントを設定します。

let title = "へろー、りあくと!";

class Welcome extends React.Component {
 render() {
   return (
     <div>
       <h1>{title}</h1>
       <button onClick={handleClick}>ボタン</button> ←追加
     </div>
   );
 }
}

ボタンタグの中にonClick={handleClick}と追記しました。

  • onClickというプロパティに設定した関数が、クリック時に呼ばれます。
  • handleClickという関数は、これから以下で実装します。
  • handleClick{}波括弧で括られています。JSXの中で変数や関数を扱うときは{}波括弧で括るルールを思い出してください。

handleClick関数を実装する

エラー!以下のコードは動きません!

let title = "へろー、りあくと!";

class Welcome extends React.Component {

  //追加
  handleClick = () => {
    title = 'クリックされました。'
  }

  render() {
    return (
      <div>
        <h1>{title}</h1>
        <button onClick={handleClick}>ボタン</button>
      </div>
    );
  }
}

export default Welcome;

おや?またエラーになってしまいました。
これを解決するには、以下のようにhandleClickthis.handleClickに変更します。

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

クラス内のメソッドや変数に、クラス内からアクセスする時にはthis.〇〇と呼び出します。
これはオブジェクト指向プログラミングの範囲なので詳しい解説は省きますが、ここではthisをつけてアクセスできるんだな、とざっくり覚えておけば問題ありません。

ボタンを押してみる

無事エラーも解決しました。現在のコードは以下のようになっています。

ボタンを押すと、へろー、りあくと!からクリックされました。にタイトルが変わるはずですが...

let title = 'へろー、りあくと!';

class Welcome extends React.Component {

  handleClick = () => {
    title = 'クリックされました。'
  }

  render() {
    return (
      <div>
        <h1>{title}</h1>
        <button onClick={this.handleClick}>ボタン</button>
      </div>
    );
  }
}

あれ?ボタンを押しても反応しません...

.
.
.

実は、

  • 画面を動的に変更するには、State(ステート)を使用する必要があります。
  • 変数を上書きしても、画面には反映されないのです。
  • 画面に反映させるには**再レンダー(再描画)**させる必要があります。

では、次のチャプターで実際にStateを使って画面を動的に変更させてみましょう!