はじめまして、釣り人Shochanです！2023年に新卒でプログラミングの世界に足を踏み入れ、まだまだ未経験者の一員です。現在は仕事でフロントエンドの実装に携わりながら、プライベートではJavaScript、TypeScript、Reactの勉強に励んでいます。
この記事では、私がReactの学習中に気づいたことや学んだことを共有していきます。今回のトピックは、React✖️TypeScriptに型定義を導入方法に焦点を当てます。
それでは、さっそく本題に入っていきましょう。
はじめに
まず、ReactとTypeScriptを組み合わせることはどのようなメリットがあるのでしょうか。
以下にReactとTypeScriptを組み合わせることのメリットを5つ記載します。
-
型安全性の向上
- TypeScriptは静的型付き言語であり、コンパイル時に型エラーを検知できます。これにより、開発中の多くのエラーを事前に捉え、信頼性を向上させます。
-
コードの可読性向上
- 型定義を使用することで、コードの意図がより明確になり、チーム全体でのコミュニケーションやメンテナンスが容易になります。
-
開発効率の向上
- TypeScriptは開発ツールやエディタの補完機能をサポートしており、開発者が迅速かつ効果的にコードを書けるようになります。
-
大規模プロジェクトの管理
- 大規模で複雑なプロジェクトでは、型安全性が特に重要です。TypeScriptはプロジェクトのスケーラビリティを向上させ、協業開発を容易にします。
- スケーラビリティ：システム、機器、またはソフトウェアの拡張性や拡張可能性を指し、どれだけ柔軟に規模や利用負荷の増大に対応できるかの能力
- 大規模で複雑なプロジェクトでは、型安全性が特に重要です。TypeScriptはプロジェクトのスケーラビリティを向上させ、協業開発を容易にします。
-
Reactとの親和性
- TypeScriptはReactとの組み合わせが公式にサポートされており、Reactコミュニティでも広く利用されています。これにより、Reactとの親和性が高まります。
以上より、ReactとTypeScriptを組み合わせることは、「大規模なプロジェクトやチームでの協業において、開発の信頼性と効率を向上させる」 といったメリットがあります。
propsに型定義を導入する
Sampleコンポーネントからトムとジェリーのキャラクターリスト（配列）を渡し、リスト表示するようなものをつくっていきます。以下のようなモノです。
Sampleコンポーネントについて見ていきます。
ここでは、TomAndJerryListというキャラクター名の配列を定義し、リスト表示する用のSampleListコンポーネントにpropsとして渡しています。
import React from 'react';
import SampleList from './SampleList';
const Sample: React.FC = () => {
const containerStyle = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
};
const divStyle = {
width: '500px',
height: '500px',
backgroundColor: 'lightblue',
border: '1px solid black',
alignItems: 'center',
};
const tomAndJerryCharacters = ['トム', 'ジェリー', 'マッスル', 'ニブルス'];
return (
<div style={containerStyle}>
<div style={divStyle}>
<h2>リストを表示します</h2>
<SampleList tomAndJerryCharacters={tomAndJerryCharacters} />
</div>
</div>
);
};
export default Sample;
次にpropsを受け取る側のSampleListコンポーネントを見ていきます。
import React from 'react'
type Props = {
tomAndJerryCharacters: string[],
}
const SampleList: React.FC<Props> = (props) => {
return (
<>
<ul>
{props.TomAndJerryCharacters.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</>
);
};
export default SampleList;
以下の記述でSampleコンポーネントから渡ってくるpropsについての型をタイプエイリアスで定義しています。
tomAndJerryCharactersはstring型の配列だよということを定義しています。
定義したPropsという型をジェネリクスとしてReact.FCに指定します。
React.FC<> を使うことで、コンポーネントが動的な型情報を持つことができ、柔軟な再利用が可能になります。
type Props = {
tomAndJerryCharacters: string[],
}
const SampleList: React.FC<Props> = (props) => {
以上が基本的なpropsに型定義をする方法となります。
任意のpropsを渡したい時
SampleListにtomAndJerryCharactersではなくlooneyTunesCharactorを渡したい場合は今のままではエラーが出てしまいます。
以下のようにlooneyTunesCharactorをSampleListに渡そうとすると、SampleListで定義しているPropsという型と異なるためエラーが出てしまうのです。
tomAndJerryCharactorしか受け付けてないよって感じです。
import React from 'react';
import SampleList from './SampleList';
const Sample: React.FC = () => {
const containerStyle = {
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: '100vh',
};
const divStyle = {
width: '500px',
height: '500px',
backgroundColor: 'lightblue',
border: '1px solid black',
alignItems: 'center'
};
const tomAndJerryCharacters = ['トム', 'ジェリー', 'マッスル', 'ニブルス'];
// 追加
const looneyTunesCharacters = [
'バッグス・バニー',
'ダフィー・ダック',
'ポーキー・ピッグ',
'エルマー・ファッド',
'シルベスター・キャット',
'トゥイーティー',
'フィオナス・レッグホーン',
'ヒューマン・ワンドアー',
'ペペ・ル・ピュー',
'スピーディー・ゴンザレス',
];
return (
<div style={containerStyle}>
<div style={divStyle}>
<h2>リストを表示します</h2>
<SampleList looneyTunesCharacters={looneyTunesCharacters} />
</div>
</div>
);
};
export default Sample;
このような場合SampleListコンポーネントの型定義を以下のように変更する必要があります。
import React from 'react'
type Props = {
tomAndJerryCharacters?: string[],
looneyTunesCharactors?: string[],
}
const SampleList: React.FC<Props> = (props) => {
return (
<>
<ul>
{props.TomAndJerryCharacters?.map((item, index) => (
<li key={index}>{item}</li>
))}
{props.looneyTunesCharacters?.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</>
);
};
export default SampleList;
このような記述にすることで、tomAndJerryCharactorsがpropsとして渡ってこなくても正常に動作するようになります。
今回の場合はSampleListにlooneyTunesCharactorsを渡しているので、looneyTunesCharactorsをmapで回しリストで表示されます。
終わり
以上がpropsに型定義を導入する方法となります。
この記事がプログラミング初学者の学習の一助になれば幸いです。
誤り、アドバイス等ございましたら気軽にコメントいただけると嬉しいです。