実現したいこと
今回は、ReactとTypeScriptを使用して親から子へ値の受け渡しについて、解説します。
イメージとしては、下図のようになります。
新規プロジェクトの作成
今回は、初学者向けの解説になるため、プロジェクトの作成方法から行っていきます。
既に知っている方は飛ばしてください。
Reactプロジェクトの作成
まずは、作業用のフォルダを作ってみましょう。
（場所はどこでもいいですが、分かりやすい場所が良いです）
フォルダの作成ができたら、コマンドプロンプトやターミナルを開いて、
作成したフォルダまで移動します。
移動が出来たら、下記のコマンドを入力して実行します。
npx create-react-app sample --template typescript「sample」はプロジェクト名になるので好きな名前でOKです（ただし、1文字目は小文字にします）
プロジェクトの実行
Reactのプロジェクトが出来たら、次はプロジェクトのフォルダへ移動します。
cd sample移動が出来たら、下記コマンドでVisualStudioCodeを起動します。
code .VisualStudioCodeが開いたら、画面上部の「ターミナル」→「新しいターミナル」をクリックします。
そうすると、画面下部にターミナルが出てくるので、そこで下記のコマンドでプロジェクトを実行します。
npm run startこれで準備は完了です。
値の受け渡し
ここから実際にコードを書いていきます。
が、まずは最初から作成されているApp.tsxをきれいにしましょう！
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
</div>
);
}
export default App;子コンポーネントの作成
ここで子コンポーネントを、srcフォルダの配下に「Child.tsx」を作成します。
type Props = {
message: string
}
export default function Child(props: Props): JSX.Element {
return (
<div>
{props.message}
</div>
)
};上記のコードを解説します。
まずは、5行目のように関数コンポーネントを作成します。
この関数の中でPropsという型の引数を設定します。
そして、1~3行目のようにPropsという型の定義をします。
そうすることで、親コンポーネント（呼び出し元）からデータを受け取る準備ができます。
1~3行目はTypeScriptの型エイリアスという機能になります。
良ければ、下記の記事も参考にしてみてください。
そして、最後にpropsという変数（型はProps）を呼び出して画面に表示します。（8行目）
.（ドット）でPropsの持つプロパティにアクセスすることができます。
これで、子コンポーネントの作成が完了しました。
親コンポーネントから子コンポーネントの呼び出し
後は、親から子を呼び出すだけです。
8行目をApp.tsxに追記します。
import React from 'react';
import './App.css';
import Child from './Child';
function App() {
return (
<div className="App">
<Child message={'子コンポーネントへ値の受け渡し'} />
</div>
);
}
export default App;注意するポイントとしては、
今回のように呼び出したいコンポーネントが引数を持っている場合は、
親（今回はApp.tsx）で、指定されている引数の型を属性に追加する必要があります。
つまり、下記のような場合には2つの属性を追加することになります。
type Props = {
name: string
age: number
}
export defalut function Child(props: Props) {
}import React from 'react';
import './App.css';
import Child from './Child';
function App() {
return (
<div className="App">
<Child name={'test'} age={20} />
</div>
);
}
export default App;
<レベルアップ>汎用的なPropsの使い方
Reactのコンポーネントは、基本的には汎用的に使用されるものになるので、
Props（引き渡すデータ）も汎用的であるべきです。
その場合、呼び出したい場面によって引き渡すデータの中には必要のないものも存在します。
そういった場面で役に立つのがTypeScriptの型エイリアスです。
下記のように定義すると、コンポーネントを呼び出す際に必要、不要の制御が可能になります。
type Props = {
name: string
age?: number
}3行目の「age」の後ろに「？」が付いています。
このようにプロパティの後ろに「？」を付けることで呼び出す際にage属性の設定は不要（追加しても良い）になります。
// ageが不要な場合
<Child name={'test'} />
// ageが必要な場合
<Child name={'test'} age={30} />最後に
値の受け渡しは、最初はデータの流れが分からずに難しいと感じますが、慣れてしまうと簡単です。
データの流れを意識しながら反復練習することをお勧めします。
また、TypeScriptを使うと便利さは爆上がりなので、どんどんチャレンジしてみてください！
コメント