Zenn
🌽

[React] 必須：コンポーネントの方法と表示技術[props・map]

2024/08/27に公開
React
初心者向け
Rails 6
コンポーネント
props
tech

コンポーネントとは？

コンポーネントは「部品」や「パーツ」という意味。
Reactでは、見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせることでWebサイトの見た目を作ります。これにより、コードの再利用性が向上し、複雑なUIも効率的に管理できるようになります。

コンポーネントのやり方

  1. クラスコンポーネントでの指定方法（今回はLanguageという名前のコンポーネントを例にします）
Language.js
import React from 'react';

// Languageクラスを定義
class Language extends React.Component {
  render() {
    return (
      内容
    );
  }
}

export default Language;
  1. 関数コンポーネントを使用する
Language.js
import React from 'react';

// Language関数コンポーネントを定義
const Language = () => {
  return (
    <div className='language-item'>
      <div className='language-name'>HTML & CSS</div>
      <img
        className='language-image'
        src='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg'
        alt='HTML & CSS'
      />
    </div>
  );
};

export default Language;

コンポーネントの表示

下記の図の流れで、Languageコンポーネントはブラウザに表示されます。
基本的な流れとしては、まずコンポーネントを作成し、それを親コンポーネント（今回はApp.js）でインポートして呼び出すことで表示が可能になります。

LanguageコンポーネントをApp.jsで呼び出す方法(3手順)

  1. Language.jsにて作成したコンポーネントをexportする。
Language.jsの最後に追加
export default Language;
  1. App.jsにてLanguageコンポーネントをインポート
  2. return内でLanguageコンポーネントを呼び出す。
App.js
import React from 'react';
// ⭐️Languageコンポーネントをインポート
import Language from './Language';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>言語一覧</h1>
        <div className="language">
          {/* ⭐️Languageコンポーネントを呼び出す */}
          <Language />
          
        </div>
      </div>
    );
  }
}

export default App;

これでOK〜〜〜👍🏻

コンポーネントを何回も呼び出せるのは便利だけど表示される内容が同じだと使いどころが限られる。
「例えば、言語ごとに異なる名前や画像を表示したい！」そんなときに役立つのがprops！
これを使えば、コンポーネントの中身を動的に変えらる！！

Propsとは？

Propsは、コンポーネントに外部からデータを渡すための仕組みです。
これにより、同じコンポーネントを複数回使っても、表示される内容を変えることができます。

例えば、コンポーネントに表示するテキストや画像のデータを渡したいときに、Propsが役立ちます。Propsは「props名=値」という形で、コンポーネントを呼び出す箇所で渡します。
書き方にはいくつかのスタイルがありますが、2つ目の書き方がより可読性が高いためおすすめ😳

App.js
<div className='language'>
 {/* HTML & CSSのpropsを渡してください */}
 <Language 
   name='HTML & CSS'　image='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg'/>
 {/* JavaScriptのpropsを渡してください */}
 <Language 
   name ='JavaScript'
   image='https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/es6.svg'
  />
</div>

Propsの表示

Language.jsに渡されたpropsは、this.props.props名で取得できます。

Language.js
import React from 'react';

class Language extends React.Component {
  render() {
    return (
      <div className='language-item'>
        <div className='language-name'>{this.props.name}</div>

        <img className='language-image'
          src={this.props.image}
          alt={this.props.name} {/* alt属性を追加してアクセシビリティを向上 */}
        />
      </div>
    );
  }
}
export default Language;

コンポーネントを何度も呼び出す[mapメソッド]

何度も呼び出せるけど、もし１００種類あったら？全部書くの大変すぎない？
そんな時に使うのがmapメソッドです！！
手順

  1. 配列を作成する
    App.js 内で表示したいデータを配列として定義します。
  2. mapメソッドを使ってコンポーネントを生成する
    配列の map メソッドを使用して、各データからコンポーネントを動的に生成します。
App.js
import React from 'react';
import Language from './Language';

class App extends React.Component {
  render() {
    //配列作成
    const languageList = [
      {
        name: 'HTML & CSS',
        image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/html.svg'
      },
      {
        name: 'JavaScript',
        image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/es6.svg'
      },
      {
        name: 'React',
        image: 'https://s3-ap-northeast-1.amazonaws.com/progate/shared/images/lesson/react/react.svg'
      },
    ];

    return (
      <div>
        <h1>言語一覧</h1>
        <div className='language'>
         // mapメソッド使用
         {languageList.map((languageItem) => {
            return (
             <Language
              name={languageItem.name}
              image={languageItem.image}
             />
            )
          })}
        </div>
      </div>
    );
  }
}
export default App;

なんとなくつかめてきた〜〜実装してみたい😚

Discussion