Reactの続きです。前回はイベント属性を使ってみました。今回からはコンポーネント編に入ります。いよいよJSフレームワークっぽい内容になってきましたね。それではいきましょう!
【目次】
※参考:【React】イベント属性を使ってみた(onChangeとonClick) - クモのようにコツコツと
Reactでやってみたことまとめ
qiita.com
コンポーネント=部品(独自タグ)
今回からコンポーネント編に入る。いつものように掌田さんの「React.js & Next.js超入門」を参考に進める。

- 作者:掌田津耶乃
- 発売日: 2019/08/30
- メディア: Kindle版
コンポーネントとは部品のこと。Vue.jsの時もやったHTMLタグではない独自のタグ名を配置する形式。
※参考:【Vue.js】コンポーネント事始め(グローバル登録とローカル登録) - クモのようにコツコツと
コンポーネント指向という設計手法があって、オブジェクト指向とおなじく古くからある考え方。
今、別シリーズでやっているメタ言語(HTMLテンプレート、AltCSS、AltJS)もコードを省略して書くだけでなく、最終的には共通部品をコンポーネント化して、それを読み込むという設計構造に向かっていくのがセオリーなようで、JSフレームワークを採用しようがしまいが最終的にはコンポーネント設計に向かっていく、と思っている。
Reactのコンポーネントの書き方
Reactでのコンポーネントの書き方をみていく。
コンポーネントの定義の仕方はいくつか方法があるようだが、簡単なのは関数として定義する形。
function コンポーネント名 ( 引数 ) { return JSXによる表示 }
関数名がコンポーネント名になる。ブロックの中では表示するJSXタグをreturnで返す。
定義したコンポーネントはタグとして配置できる
<コンポーネント名 />
先程の関数名の部分がタグ名になる。
Reactでコンポーネントを作ってみる
実際にやってみた。
See the Pen React - component 1 by イイダリョウ (@i_ryo) on CodePen.
色付き背景の「こんにちは、こんぽおねんと。」の部分がコンポーネント!
HTMLコード
<section> <h1>Reactのコンポーネント</h1> <div class="text">読み込み中…</div> </section>
HTMLはいつもと変わらず、.text
の中にJSXを読み込んでいる。
JSコード
次にJSコード。
DOM取得
//DOM取得 const text = document.querySelector('.text');
まず変数text
でDOM.text
を取得。これはいつもと変わらない。
h2のテキスト
//JSXに埋め込む値 const h2Text = 'コンポーネント事始め';
変数h2Text
でJSXのh2タグに入れたいテキストを設定。これも変わらない。
コンポーネントのCSSスタイル
const componentStyle = { background: '#fcc', margin: '5px', padding: '5px', borderRadius: '5px' }
変数componentStyle
でコンポーネントに当てたいCSSスタイルを設定。配列形式。値はコーテーションで括る。
コンポーネント設定
function Hello(props) { return <p style={componentStyle}>こんにちは、こんぽおねんと。</p> }
関数Hello()
でコンポーネントを設定。注意として、関数名の一文字目は必ず大文字にしないと行けない、というルールがある!(hello()
にしたら認識されなかった。。)
関数の引数にはprops
という値を入れている。今は使われていないが、後々これを使って色々な拡張設定ができる。
p
タグの中には先程のcomponentStyle
のスタイルを読み込んでいる。
JSXの設定
//JSXの中身 let elm = ( <section className="h2_elem"> <h2>{ h2Text }</h2> <div> <Hello /> </div> </section> );
JSXの設定の大枠は同じだが、中身に注目。<Hello />
という独自名のタグがある。ここにコンポーネントが読み込まれる!
JSXのレンダリング
ReactDOM.render(elm, text);
elm
のJSXをtext
にレンダリングする。ここはいつもと変わらない。
JSコード全体
JSコード全体はこうなる。
//DOM取得 const text = document.querySelector('.text'); //JSXに埋め込む値 const h2Text = 'コンポーネント事始め'; //コンポーネントのスタイル const componentStyle = { background: '#fcc', margin: '5px', padding: '5px', borderRadius: '5px' } //コンポーネント function Hello(props) { return <p style={componentStyle}>こんにちは、こんぽおねんと。</p> } //JSXの中身 let elm = ( <section className="h2_elem"> <h2>{ h2Text }</h2> <div> <Hello /> </div> </section> ); ReactDOM.render(elm, text);
最後に
ということで、コンポーネントの設定、表示に成功しました。Vue.jsとは書き方が少し違うけど、やっていることは同じなので経験できている分、理解がしやすかったです。
次回はコンポーネントの中に固有の値などを入れてバリエーションを増やしてみたく思います。それではまた!
Reactでやってみたことまとめ
qiita.com