leaning diary Rails Uncategorized

【Learning Diary46】react_componentについておさらい

【Learning Diary46】react_componentについておさらい

 

react_component は、gem "react-rails"を導入すると使えるようになるヘルパーメソッドです。

 

【特徴】

■erbテンプレートに記述できる。

■erbファイルとして記述できるため、RailsからPropsを簡単に渡せる。

 

gemのインストールからやってみます。

 

以下をgemファイルに記述します。

 

gem "react-rails"

 

bundle install を実行。

 

❯ bundle install
Fetching gem metadata from https://rubygems.org/.........
Resolving dependencies...

 

gemをインストールするとreact_componentを使えるようになります。

 

コンポーネントの生成は以下のコマンドでできます。

 

❯ rails g react:component SampleComponent test:string
create app/assets/javascripts/components/sample_component.js.jsx

 

上記のコマンドを実行すると、以下のファイルが作成されます。

 

# app/assets/javascripts/components/sample_component.js.jsx

function SampleComponent(props) {
  return (
    <React.Fragment>
      Test: {props.test}
    </React.Fragment>
  );
}

SampleComponent.propTypes = {
  test: PropTypes.string
};

 

function SampleComponent(props) { } 部分はSampleComponent という名前の関数コンポーネントを定義しています。

 

このコンポーネントは、props と呼ばれるプロパティを引数として受け取り、その値を表示しています。

 

SampleComponent.propTypes 部分では、SampleComponent コンポーネントの propTypes プロパティに、test というプロパティが文字列 (PropTypes.string) であることを指定しています。

 

PropTypes は、Reactコンポーネントでプロパティの型や必須性を検証するために使用されます(この例では、test プロパティが文字列であることを期待しています)。

 

この設定により、もし SampleComponent が test プロパティを受け取る場合、そのプロパティが文字列であることが確認され、型が合わない場合には開発者ツールのコンソールに警告が表示されるようになります。

 

3行の簡潔なコードですが、PropTypes の使用は、コンポーネントの正しい使用法を明示的に示し、チームメンバー全員がコンポーネントを適切に利用できるようにするために役立ちます。

 

-leaning diary, Rails, Uncategorized