クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【React】コンポーネント事始め(一文字目は大文字!)

Reactの続きです。前回はイベント属性を使ってみました。今回からはコンポーネント編に入ります。いよいよJSフレームワークっぽい内容になってきましたね。それではいきましょう!

【目次】

※参考:【React】イベント属性を使ってみた(onChangeとonClick) - クモのようにコツコツと

Reactでやってみたことまとめ
qiita.com

コンポーネント=部品(独自タグ)

今回からコンポーネント編に入る。いつものように掌田さんの「React.js & Next.js超入門」を参考に進める。

React.js & Next.js超入門

React.js & Next.js超入門

コンポーネントとは部品のこと。Vue.jsの時もやったHTMLタグではない独自のタグ名を配置する形式。

※参考:【Vue.js】コンポーネント事始め(グローバル登録とローカル登録) - クモのようにコツコツと

コンポーネント指向という設計手法があって、オブジェクト指向とおなじく古くからある考え方。

※参考:ソフトウェアコンポーネント - Wikipedia

※参考:理解しておきたいコンポーネント指向 - Qiita

今、別シリーズでやっているメタ言語(HTMLテンプレート、AltCSS、AltJS)もコードを省略して書くだけでなく、最終的には共通部品をコンポーネント化して、それを読み込むという設計構造に向かっていくのがセオリーなようで、JSフレームワークを採用しようがしまいが最終的にはコンポーネント設計に向かっていく、と思っている。

Reactのコンポーネントの書き方

Reactでのコンポーネントの書き方をみていく。

コンポーネントの定義の仕方はいくつか方法があるようだが、簡単なのは関数として定義する形。

function コンポーネント名 ( 引数 ) {
    return JSXによる表示
}

関数名がコンポーネント名になる。ブロックの中では表示するJSXタグをreturnで返す。

定義したコンポーネントはタグとして配置できる

<コンポーネント名 />

先程の関数名の部分がタグ名になる。

※参考:コンポーネントと props – React

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);

最後に

f:id:idr_zz:20200406071152j:plain

ということで、コンポーネントの設定、表示に成功しました。Vue.jsとは書き方が少し違うけど、やっていることは同じなので経験できている分、理解がしやすかったです。

次回はコンポーネントの中に固有の値などを入れてバリエーションを増やしてみたく思います。それではまた!


Reactでやってみたことまとめ
qiita.com