【React】コンポーネントの属性値を読み込む（style、テキスト、四則演算）

Reactの続きです。前回はコンポーネントを事始めました。この時は一種類のテキストを読み込んで表示するのみでしたが、今回はstyle属性や四則演算の設定を追記して、コンポーネントのバリエーションを増やします。だんだんコンポーネントを使うメリットを感じられてきました。それではいきましょう！

【目次】

コンポーネントの属性の固有値を読み込む
コンポーネントで四則演算を計算する
最後に

前回記事
※参考：【React】コンポーネント事始め（一文字目は大文字！） - クモのようにコツコツと

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

コンポーネントの属性の固有値を読み込む

完成品

今回も掌田さんの「React.js & Next.js入門」を参考に進める。

React.js&Next.js超入門

作者:津耶乃, 掌田
発売日: 2019/03/08
メディア: 単行本

前回は一種類のコンポーネントを読み込んで表示するのみだったのだが、これだとあまりコンポーネントを使うメリットが感じられない。テキストでは次に属性に固有値を読み込ませてバリエーションを実現している！

実際にやってみた。

See the Pen React - component 2 by イイダリョウ (@i_ryo) on CodePen.

「こんにちは、こんぽくん。」「こんにちは、ねんとちゃん。」「こんにちは、りあくと様。」と異なるテキストと背景色になっているが、これらは同一のコンポーネントを読み込んでいる！違うのはコンポーネントの中に書いている属性部分。

HTMLコード

<section>
    <h1>Reactのコンポーネント</h1>
    <div class="text">読み込み中…</div>
</section>

HTMLはいつものごとく変更なし。.textにJSXがレンダリングされる。

JSコード

次、JSコード部分

//DOM取得
const text = document.querySelector('.text');

まず変数textでDOM.textを取得。

//JSXに埋め込む値
const h2Text = 'コンポーネント事始め';

変数h2Textでh2タグに表示したいテキストを設定。ここまではいつもと変わらない。

ここから下がコンポーネントに関わる部分。

//コンポーネントのスタイル
const bgColor1 = {
    background: '#fcc',    
    padding: '10px',
}

const bgColor2 = {
    background: '#ccf',    
    padding: '10px',
}

const bgColor3 = {
    background: '#cfc',    
    padding: '10px',
}

変数bgColor1、bgColor2、bgColor3で３種類の背景色を設定している。これを下記のコンポーネントにそれぞれ読み込ませる。

次はコンポーネントのテンプレート

//コンポーネント
function Hello(props) {
    return <p style={props.style}>こんにちは、{props.name}。</p>
}

Hello関数を設定、引数はprops
pタグの中にprops.styleプロパティ、テキストの中にprops.nameプロパティを読み込む

コンポーネントなので関数名は大文字（前回参照）。

そして引数propsがオブジェクトになってstyle、nameなどのプロパティを設定できる。

次に、JSXの設定

//JSXの中身
let elm = (
    <section className="h2_elem">
        <h2>{ h2Text }</h2>
        <div>
            <Hello name="こんぽくん" style={bgColor1} />
            <Hello name="ねんとちゃん" style={bgColor2} />
            <Hello name="りあくと様" style={bgColor3} />
        </div>
    </section>
);

h2タグでh2Textを読み込み
1つ目のHelloコンポーネントのname属性で「こんぽくん」、style属性でbgColor1を読み込み
2つ目のHelloコンポーネントのname属性で「ねんとちゃん」、style属性でbgColor2を読み込み
3つ目のHelloコンポーネントのname属性で「りあくと様」、style属性でbgColor3を読み込み

JSXに配置されているコンポーネントタグの中の属性に固有値を入れている。これでバリエーションを実現している！

最後にレンダリング

ReactDOM.render(elm, text);

elmをレンダリングしてtextに表示する。

JSコード（全体）

JSコード全体ではこうなる。

//DOM取得
const text = document.querySelector('.text');

//JSXに埋め込む値
const h2Text = 'コンポーネント事始め';

//コンポーネントのスタイル
const bgColor1 = {
    background: '#fcc',    
    padding: '10px',
}

const bgColor2 = {
    background: '#ccf',    
    padding: '10px',
}

const bgColor3 = {
    background: '#cfc',    
    padding: '10px',
}


//コンポーネント
function Hello(props) {
    return <p style={props.style}>こんにちは、{props.name}。</p>
}

//JSXの中身
let elm = (
    <section className="h2_elem">
        <h2>{ h2Text }</h2>
        <div>
            <Hello name="こんぽくん" style={bgColor1} />
            <Hello name="ねんとちゃん" style={bgColor2} />
            <Hello name="りあくと様" style={bgColor3} />
        </div>
    </section>
);
    
ReactDOM.render(elm, text);

コンポーネントで四則演算を計算する

完成品

次にコンポーネントに四則演算を設定してみる。

See the Pen React - component 3 by イイダリョウ (@i_ryo) on CodePen.

合計額に対して、人数ごとの割り勘金額を表示。これも一種類のコンポーネントで属性値を読み込んで異なる結果になっている。

JS変更部分

先程と変更した部分。

まず冒頭で合計額を設定

let goukei = 8376;

変数goukeiで合計額を設定

h2のテキストを変更

//JSXに埋め込む値
const h2Text = '割り勘（合計' + goukei + '円）';

変数h2Textのテキストの中にgoukeiを読み込む。

コンポーネントの設定

//コンポーネント
function Warikan(props) {
    let tanka = goukei / props.number;
    return <p style={props.style}>{props.number}名様では、お一人様あたり{tanka}円になります。</p>
}

Warikan関数の引数はprops
変数tankaでgoukeiをprops.numberプロパティで割って単価を割り出す
pタグのstyle属性でprops.styleプロパティ、テキストでprops.numberプロパティとtankaを読み込む。

props.styleプロパティは変更なし。テキストはprops.nameプロパティからprops.numberプロパティに変更。

JSXの設定

//JSXの中身
let elm = (
    <section className="h2_elem">
        <h2>{ h2Text }</h2>
        <div>
            <Warikan number="3" style={bgColor1} />
            <Warikan number="6" style={bgColor2} />
            <Warikan number="8" style={bgColor3} />

        </div>
    </section>
);

Warikanコンポーネントのnumber属性が上から「3」、「6」、「8」と固有値。これが割り勘の人数になる。

JSコード

JSコード全体

//DOM取得
const text = document.querySelector('.text');

let goukei = 8376;

//JSXに埋め込む値
const h2Text = '割り勘（合計' + goukei + '円）';

//コンポーネントのスタイル
const bgColor1 = {
    background: '#fcc', 
    padding: '10px',
}

const bgColor2 = {
    background: '#ccf', 
    padding: '10px',
}

const bgColor3 = {
    background: '#cfc', 
    padding: '10px',
}


//コンポーネント
function Warikan(props) {
    let tanka = goukei / props.number;
    return <p style={props.style}>{props.number}名様では、お一人様あたり{tanka}円になります。</p>
}

//JSXの中身
let elm = (
    <section className="h2_elem">
        <h2>{ h2Text }</h2>
        <div>
            <Warikan number="3" style={bgColor1} />
            <Warikan number="6" style={bgColor2} />
            <Warikan number="8" style={bgColor3} />

        </div>
    </section>
);
    
ReactDOM.render(elm, text);