ReactにおけるComponentを解説!

React

今日は師匠の所に行って、前回の続きを教えてもらうブゥ!

楽しみだなぁ!

師匠、こんにちは!

師匠

とんぺいくん。こんにちは。

よく来たね。

じゃあ今日は、ReactにおけるComponentを説明しよう。

はい!

よろしくお願いしますだブゥ!

Component(コンポーネント)とは?

師匠

Componentとは『再利用可能なUI部品』のことなんだ。


そしてこのComponentには

Class Component
・Functional Component

の2種類が存在しているよ。

部品ってことは、前に習った、moduleみたいな感じなのかな?

その前にUIってなんだブゥ?

師匠

イメージとしては、moduleと同じでいいと思うよ。

UIとは(User Interface)の略で、ユーザーとサービスの接触面を表しているんだ。

つまり「ユーザーの目に触れる部分」はすべてUIとみなすことができるよ。

ほうほう。つまりComponentとは、Webサービスの画面を作成する際に、簡単に入れ替えできる部品のことをいうんだね!

師匠

そうだね。

入力フォームや、ボタン、検索結果一覧表示などWebサービスで何度も使用するものをComponentとして1度作成しておけば、あとはそれを使いたい所にはめ込めばOKだね。

なるほど!

1度部品を作ってしまえば、同じ機能の箇所であったら、それを使い回すだけということブゥね!

師匠

その通り!

じゃあ次からは、

Class Component
・Functional Component

の例を実際にコーディングしながら見ていこう。

Class Component

師匠

Class定義によって作成するComponentのことをClass Componentというんだ。

コーデディングするときは以下のようになるよ。

ほうほう!

これがClass Componentブゥね!

Functional Component

師匠

では次に、Functional Componentを見ていこう。

関数の定義によって作成するComponentのことをFunctional Componentと言うんだ。実際のコードは以下のようになるよ。

ほうほう。

これが、Functional Componentかブゥ…

この2つはどういった時に、使い分けをするんだブゥ?

Class Component VS Functional Component

師匠

いい質問だね!今回の例では載せていないのだけど

Class ComponentComponentState(状態)などの情報を付加したい時

Functional Componentは余計な情報を付加させずにUI部品の表示に徹底させたい時に使うよ。

ユーザー目線では、どちらも変わりないのだけど、開発者目線ではどちらのComponentを使うかと言うのはその後の保守も含めて、とても大切なことなんだ。

なるほどブゥ!

そのUI部品をどのように設計するかによって、どちらのComponentを使うのかが変わってくるってことブゥね!

師匠

その通り。

今話した、Stateと言う単語はpropsと併せてRaectで開発を続けていく中でとても大切なことだから、それらに関しては、また次回以降に話していこう。

そういえばそんな単語が出ていたような!!

わかったブゥ!

次回はpropsstateについて学びに来るブゥ!

今日はありがとう!バイバーイ!

師匠

はい。さようなら。

それでは、最後に今日習ったことをまとめて終わりにしよう。

まとめ

Componentとは『再利用可能なUI部品』のこと

Class ComponentとFunctional Componentの2種類のComponentがある

これらは作成したいComponentによって使い分ける

コメント

タイトルとURLをコピーしました