React学習ログ #3｜データの表示・条件判定・リストのレンダー

前回：React学習ログ #2｜コンポーネントの作成とネスト

データの表示

チュートリアルリンク

データを扱う

JSXの中では、波括弧 { } を使うと中身がJavaScriptとして評価されます。

const name = "Hoge";

export default function App() {
  return <h1>Hello {name}</h1>;
}

この辺りはよくある文字列＋変数の文字列連携なので、特に難しいことはしてないですね。

上記を踏まえた上でチュートリアルのコードを試してみます。

src/App.jsx

// ユーザー情報を表すJavaScriptのオブジェクトを定義
const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        // src属性・alt属性・styleで{}を使用し、userの値を埋め込んでいる
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

画面で確認した結果

これだけでもJSだと面倒なことがReactだと良い感じに埋め込み出来て楽だなぁって印象を持てました。

条件付きレンダー

チュートリアルリンク

条件分岐

特にJavaScriptと変わらずに書けます。

let content;

if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}

return (
  <div>
    {content}
  </div>
);

注意しなくちゃいけないと思った点は、<div></div>内で直接{if (isLoggedIn) {・・・}みたいに書けないというところです。

設計思想的に

1. JSのif文で「どのUIを使うか」を決めて
2. JSXを変数に入れて
3. JSXの中で表示する

となっております。

他の書き方として

<div>
  {isLoggedIn ? <AdminPanel /> : <LoginForm />}
</div>

みたいに三項演算子の形で書きます。(こっちの方が多いかも？？)

もしtrueの場合のみ何か返すのであれば、以下のような書き方が出来ます。

<div>
  {isLoggedIn && <AdminPanel />}
</div>

isLoggedIn	表示
true	<AdminPanel />
false	何も出ない

リストのレンダー

チュートリアルリンク

コンポーネントのリストをレンダーする

forループや配列のmap()関数といったJavaScriptの機能を使って行います。

const products = [
  { title: 'Cabbage', id: 1 },
  { title: 'Garlic', id: 2 },
  { title: 'Apple', id: 3 },
];

上記のような配列をmap()関数を使用して、要素の配列に変換してみます。

// productsをループさせる
const listItems = products.map(product =>
  // productには繰り返されたproducts内の要素が入っている
  // 1回目のループ時だとproduct = { title: 'Cabbage', id: 1 }が入っている
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

keyとは「この要素がどのデータに対応しているか」をReactに教えるためのIDのことです。

JavaScriptのIDとはどう違うのか調べてみました。

項目	key	id
役割	Reactの内部用	ブラウザ(HTML)用
見える？	画面には出ない	DOMに出る
誰が使う？	React	CSS / JS / ブラウザ
目的	再描画の最適化	要素を特定する

簡単にまとめると

• Reactのkey → 仮想DOMの世界
• HTMLのid → ブラウザの世界

というイメージです。

次にチュートリアルのソースコードを実行してみます。

src/App.jsx

import './App.css'

const products = [
  { title: 'Cabbage', isFruit: false, id: 1 },
  { title: 'Garlic', isFruit: false, id: 2 },
  { title: 'Apple', isFruit: true, id: 3 },
];

export default function ShoppingList() {
  const listItems = products.map(product =>
    <li
      key={product.id}
      style={{
        color: product.isFruit ? 'magenta' : 'darkgreen'
      }}
    >
      {product.title}
    </li>
  );

  return (
    <ul>{listItems}</ul>
  );
}

画面上ではこうなります。

やっていることを下記にまとめました。

• productsの要素をmap()関数を用いて要素を繰り返している
• <li>タグを繰り返している
• keyはproductのidを定義
• styleにcolorを設定(productのisFruitの値で色を変えている)

次回

イベントを設定します。

React学習ログ #4｜イベントハンドラ