この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
はじめに
CX事業本部の中安です。まいどです。
モバイルアプリエンジニアな自分がReact
を始めてみることにした
「よーし! いっちょReactやってみっか!」シリーズの続きです。
今回もよろしくお願いします。
前回は、関数コンポーネントでHooks
を使ってステートを扱う基本的な書き方と動き、ルールなどを書きました。
今回はクラスコンポーネントの作り方を書こうと思います。
Reactのクラスコンポーネント
基本キーワード編でも触れましたが、React
では長らくクラスによるコンポーネントが主流だったとのことでした。
大きな理由としては、関数コンポーネントではHooks
という仕組みがなく、ステートなどを使用することができなかったからだそうです。
関数コンポーネントは状態を持たない小さなコンポーネントのために使われることがメインだったのでしょう。
しかし、Hooks
の登場により関数コンポーネントとクラスコンポーネントの立場は入れ替わったといいます。
関数コンポーネントがクラスコンポーネントと同等の機能を有し、さらにシンプルに書けるということであれば、 コンポーネントを作る際には関数コンポーネントを採用していく前提であるほうがいいでしょうね。
公式ドキュメントでも
フック、クラスのいずれを使うべきですか、あるいはその両方でしょうか?
準備ができしだい、新しいコンポーネントでフックを試すことをお勧めします。チームの全員の準備が完了し、このドキュメントに馴染んでいることを確かめましょう。(例えばバグを直すなどの理由で)何にせよ書き換える予定の場合を除いては、既存のクラスをフックに書き換えることはお勧めしません。
クラスコンポーネントの定義内でフックを使うことはできませんが、クラス型コンポーネントとフックを使った関数コンポーネントとを 1 つのコンポーネントツリー内で混在させることは全く問題ありません。あるコンポーネントがクラスで書かれているかフックを用いた関数で書かれているかというのは、そのコンポーネントの実装の詳細です。長期的には、フックが React のコンポーネントを書く際の第一選択となることを期待しています。
と、クラスコンポーネントが関数コンポーネントに取って代わられる未来を描いてるようです。
しかしながら、いくつかの理由で未だクラスコンポーネントを触ることもあるかもしれません。 たとえば以下のような理由です。
- すでに既存の
React
アプリでクラスコンポーネントが使われている。(「既存のクラスをフックに書き換えることはお勧めしません」と上記の引用にも書かれています) - いくつかのクラス特有の機能が
Hooks
には搭載されていない。(近く追加されるとは書かれています) - いくつかのサードパーティ製のライブラリは現時点でフックとの互換性がない。
そういう意味ではクラスコンポーネントにまったく無知識でいる必要もないのかもしれません。
今シリーズで積極的にクラスコンポーネントを扱う予定はないですが、今回はクラスコンポーネントに絞ってまとめていきたいと思います。
クラスコンポーネントを定義する
前回作ったコンポーネント
まず前回のおさらいですが、関数コンポーネントで「フォームに入力した文字に挨拶をしてくれる」というHello
コンポーネントを作りました。
const Hello = (props) => {
const [name, setName] = useState("World");
return (
<Card>
<Card.Body>
<h1>Hello {name}!</h1>
<Form.Control
value={name}
onChange={(e) => setName(e.target.value)}
/>
</Card.Body>
</Card>
)
}
これをクラス型コンポーネントに置き換えてみますか。
定義
クラスコンポーネントとは、React.Component
を継承させたクラスのことを言います。
なので、Hello
コンポーネントはこのような定義となります。
class Hello extends React.Component {
}
余談ですが、昔にWEBアプリやってて最近はモバイルアプリばかり開発してた人間なので、
いつJavaScript
にクラスという概念ができたのか把握していませんでした。
ECMAScript2015
で採用されたという風に書かれていたので、結構最近(最近と言っていいのか微妙ですが)なのですね。
以前は「プロトタイプ」という概念でやってたような・・・という記憶で調べてみたのですが、
JavaScript
の「クラス」は「プロトタイプ」の糖衣構文(シンタックスシュガー = 他の方法で書き直すことができる構文)と書かれていたので、
なるほど奥底では以前と変わってないんだなぁと腹落ちしました。(脱線すいません)
必須メソッド render
React.Component
を継承させたコンポーネントクラスは、1つだけ実装しなければならないメソッドがあります。
render()
というメソッドです。
render()
メソッドはコンポーネントの構成を主にJSX
で返すメソッドになります。
今回では、関数コンポーネントでのreturn
部分がほぼそのまま使えると思います。
ただしHooks
はクラスでは使えないので外しておいて、このように書いてみました。
class Hello extends React.Component {
render() {
return (
<Card>
<Card.Body>
<h1>Hello {name}!</h1>
<Form.Control
value={name}
onChange={(e) => setName(e.target.value)}
/>
</Card.Body>
</Card>
)
}
}
これは関数コンポーネントからそのまま移してきたものなので、当然ですがこのままではエラーになります。 ステートについて何も書いてないからです。
コンストラクタ
クラスにはコンストラクタ(生成された時に最初に必ず通るメソッド)を設置することができます。 ここでステートの設定を行うのがセオリーです。
class Hello extends React.Component {
constructor(props) {
super(props);
}
React.Component
のコンストラクタではprops
が引数として渡されてきます。
こちらは後でつかうことにしましょう。
1行目にsuper(props);
というふうに継承元のコンストラクタを最初に呼び出します。
ステートの初期設定
コンストラクタ内でステートの初期設定を行います。
Hooks
の時とは書き方が変わります。
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "World"
};
}
このようにthis.state
にオブジェクトを渡す形になります。
const Hello = (props) => {
const [name, setName] = useState("World");
↑関数コンポーネントと比べるとだいぶ違いますね。
ステートの値
render()
側も変更しないといけません。
関数コンポーネントではname
という変数でアクセスできましたが、
クラスの場合はコンストラクタで指定したthis.state
のオブジェクトにアクセスすることになります。
render() {
return (
<Card>
<Card.Body>
<h1>Hello {this.state.name}!</h1>
<Form.Control
value={this.state.name}
onChange={(e) => setName(e.target.value)}
/>
</Card.Body>
</Card>
)
}
ステートの更新
現時点でもまだ動かないと思います。なぜならsetName()
というものが存在しないからです。
クラスコンポーネントでは代わりにsetState()
というものに統一されます。
setState()
ではコンストラクタと同じようにオブジェクトで渡すことになります。
render() {
return (
<Card>
<Card.Body>
<h1>Hello {this.state.name}!</h1>
<Form.Control
value={this.state.name}
onChange={(e) => this.setState({
name: e.target.value
})}
/>
</Card.Body>
</Card>
)
}
これでブラウザで見てみると動くかと思います。
関数コンポーネントの内容がクラスコンポーネントに書き換えれましたね。
差分更新
関数コンポーネントのステート基本編では、下記のようにオブジェクトを渡す方法も書きました。
const Hello = (props) => {
const [person, setPerson] = useState({
name: "",
email: "",
address: "",
age: 0
});
この場合はsetPerson()
ではname
を更新する際には、他のキーの値も合わせて変更する必要があることも書きました。
クラスコンポーネントのsetState()
も同じようにしなければならないのでしょうか。
いえ。そんなことありません。
setState()
は変更しようとした値だけが差分更新される仕組みになっています。
なので、コンストラクタで
class Hello extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "World",
email: "",
address: "",
age: 0
};
}
このように定義したとしても、変わらずに
<Form.Control
value={this.state.name}
onChange={(e) => this.setState({
name: e.target.value
})}
/>
とすることで、name
だけが更新され、それ以外の値には影響は出ません。
最後に
ということで、前回のステートを用いた関数コンポーネントをクラスコンポーネントに書き換えながら、 クラスコンポーネントの実装方法をまとめてみました。
冒頭の話の通り、基本的には関数コンポーネントの方が主流になるので、 クラスコンポーネントはこれくらいにしておきます。 また何か必要そうな話が出てきたらブログにまとめます。
では、またー。