この記事では、ReactとTypeScriptの組み合わせで開発環境を作り型、関数コンポーネントをどう活用するかについて説明します。
ReactとTypeScriptの組み合わせについて
ReactとTypeScriptの相性
Reactはウェブアプリケーションを作るためのツールです。
TypeScriptは、JavaScriptの上に型を加えたプログラミング言語です。
これらは一緒に使うことで、より安全で効率的なコードを書くことが可能になります。
TypeScriptをReactで利用するメリット
TypeScriptを使うと、コードが間違いにくくなります。
具体的な例を見てみましょう。
JavaScriptの場合:
function greet(name) {
return "こんにちは、" + name + "さん";
}
TypeScriptの場合:
function greet(name: string): string {
return "こんにちは、" + name + "さん";
}
TypeScriptでは、関数が受け取る引数と、関数が返す値の型が明確になります。
これにより、コードが間違いにくくなります。
ReactとTypeScriptの環境構築
必要なツールとライブラリ
ReactとTypeScriptの開発環境を作るには、いくつかのツールとライブラリが必要です。
- Node.js
- npm(Node.jsに同梱されています)
- TypeScript
- create-react-app(Reactアプリケーションを作成するツール)
これらをインストールした後、以下のコマンドでReactとTypeScriptのプロジェクトを作成します。
npx create-react-app プロジェクト名 --template typescript
TypeScriptの設定ファイルの説明
TypeScriptの設定ファイルはtsconfig.jsonというnameで、プロジェクトのルートディレクトリにあります。
このファイルで、TypeScriptの動作を細かく設定することができます。
例えば、以下の設定は、TypeScriptをJavaScriptに変換する際のルールを指定しています。
{
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx"
},
"include": ["src"]
}
TypeScriptでの関数コンポーネント
関数コンポーネントとは何か?
Reactでアプリケーションを作る際、コンポーネントという部品を作ります。
関数コンポーネントは、その一種で、関数として定義されたコンポーネントのことを指します。
TypeScriptでの関数コンポーネントの基本的な作り方
Reactにおけるコンポーネントは、ウェブページの一部を形成する要素です。
関数コンポーネントは、その名の通り関数として定義されるコンポーネントです。
以下にTypeScriptで関数コンポーネントを定義する基本的な方法を示します。
import React from 'react';
const Greet: React.FC = () => {
return <h1>こんにちは、皆さん!</h1>;
}
この例では、Greet
というnameの関数コンポーネントを定義しています。
これは、画面に「こんにちは、皆さん!」という見出しを表示するコンポーネントです。
React.FC
は、Function Componentの略で、関数コンポーネントの型を表します。
関数コンポーネントでpropsを使う方法
関数コンポーネントはpropsというデータを受け取ることができます。
propsは親コンポーネントから子コンポーネントにデータを渡すための仕組みです。
以下に、propsを受け取る関数コンポーネントの例を示します。
import React from 'react';
type Props = {
name: string;
};
const Greet: React.FC<Props> = ({ name }) => {
return <h1>こんにちは、{name}さん!</h1>;
}
この例では、Greet
はname
というpropsを受け取り、それを表示します。
関数コンポーネントで状態を扱う方法
関数コンポーネントはuseState
というReactのフックを使うことで、状態を管理できます。
以下に、状態を持つ関数コンポーネントの例を示します。
import React, { useState } from 'react';
const Counter: React.FC = () => {
const [count, countを設定する] = useState<number>(0);
return (
<div>
<p>あなたがボタンを押した回数: {count}</p>
<button onClick={() => countを設定する(count + 1)}>押す</button>
</div>
);
}
この例では、Counter
はcount
という状態を持ち、それを表示します。
ボタンを押すと、countが1増えます。
以上が、TypeScriptを用いたReactの関数コンポーネントの基本的な使い方になります。
クラスコンポーネントとの違い
Reactでは、関数コンポーネントの他にクラスコンポーネントというコンポーネントの定義方法があります。
例えば、以下のようにクラスコンポーネントを定義することができます。
import React from 'react';
type Props = {
name: string;
};
type State = {
count: number;
};
class Greet extends React.Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
count: 0,
};
}
render() {
return (
<div>
<p>あなたがボタンを押した回数: {this.state.count}</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>押す</button>
</div>
);
}
}
クラスコンポーネントは、関数コンポーネントと比べて以下のような特徴があります。
- 関数コンポーネントよりも長くなりがち
- 関数コンポーネントよりも複雑な機能を実装できる
React を使いこなしたい方におすすめの記事
React を使いこなすには、一度でも本や動画教材で体系的に学習することが大事です。
一通りの React 知識を身に付けると、その後の伸びがグンと良くなるからです!
おすすめの React 教材については、以下の記事で厳選したものを紹介しているので参考にしてみてください!
プログラミングスクール教材の執筆経験もある筆者の目線で比較しています。
