Sponsored
この記事では、React と TypeScript を用いてアプリケーションを実装する上での基礎知識を紹介します。
本記事では、React と TypeScript についての理解を深めるための簡単な説明を併せて記載します。
【TypeScript】 type と interface の違いを解説 | Lazy Developer
この記事では、 TypeScript の type と interface の違いを詳しく解説し、それぞれの使用場面について説明します。 TypeScriptを使用する際、開発者は時に type と interface のどちらを使うべきか迷うことがあります。 両者は似たような機能を持っていますが、微妙な違いがあります
React とは
React は、Facebook （Meta社） が開発した、インタラクティブでダイナミックなユーザーインターフェースを構築するための強力な JavaScript ライブラリです。
React
React is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizations.
誤解しやすい点として、React は「ライブラリ」であり、フレームワークではありません。
React をベースとしたフレームワークとしては、Next.js や Gatsby.js などがあります。
React の特徴
コンポーネントベースのアーキテクチャ
React における UI は独立した再利用可能なピース、つまり「コンポーネント」 で構成されます。これにより、複雑な UI も管理しやすくなります。
つまり、 React は UI ライブラリとして用いられる技術です。
JSX
JavaScript を拡張した構文で、マークアップとロジックを一緒に記述できるため、開発プロセスが直感的になります。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}このコードは、props.name を含む <h1> 要素を返します。JSXはHTMLに似ていますが、JavaScriptの力を持っているため、動的な内容を簡単にレンダリングできます。
バーチャルDOM
Reactの最も強力な特徴の一つは、バーチャルDOMの使用です。
これは、実際のDOMの軽量なコピーで、JavaScript 内に存在します。実際のDOMの操作は時間がかかり、パフォーマンスに影響を与える可能性があるため、Reactはこのスマートなテクニックを採用しています。
- 動作の仕組み
ユーザがコンポーネントの状態を更新するたびに、Reactは新しいバーチャルDOMツリーを作成します。 そして、この新しいツリーを前回のツリーと比較し、変更された部分を特定します。
その後、Reactはその変更を効率的に実際のDOMに適用します。
このプロセスは「差分更新」と呼ばれ、アプリケーションのパフォーマンスを大幅に向上させます。
- メリット
バーチャルDOMのおかげで、Reactは必要な最小限のDOM更新だけを行い、余分な処理を避けます。 これにより、アプリケーションのレスポンスが速くなり、ユーザー体験が向上します。
特に大規模なアプリケーションやデータが頻繁に更新されるアプリケーションでは、この差分更新がパフォーマンスの向上に大きく寄与します。
TypeScript とは
TypeScript は Microsoft によって開発された JavaScript のスーパーセットで、大規模アプリケーションの開発に適しています。
JavaScript に静的型付けとクラスベースオブジェクト指向を導入することで、コードの品質と効率を向上させ、大規模なプロジェクトでの開発を容易にします。
JavaScript With Syntax For Types.
TypeScript extends JavaScript by adding types to the language. TypeScript speeds up your development experience by catching errors and providing fixes before you even run your code.
TypeScript の特徴
静的型付け
TypeScriptの最大の特徴は静的型付けです。
静的型付けとは、変数や関数のパラメータ、戻り値などに事前に型を定義することを指します。
これにより、開発中に型の不一致に関するエラーを捉えることができ、より安全で信頼性の高いコードを書くことが可能になります。
- Vanilla JavaScriptの例
function add(a, b) {
return a + b;
}
let result = add(5, "10"); // これは '510' を返すVanilla JavaScript では、型が明示的に指定されていないため、数値と文字列を加算すると、数値が文字列に変換され、予期しない結果が発生する可能性があります。
- TypeScriptの例
function add(a: number, b: number): number {
return a + b;
}
let result = add(5, "10"); // エラー: Argument of type 'string' is not assignable to parameter of type 'number'.TypeScriptでは、関数のパラメータと戻り値に型が指定されています。
もし型が一致しない引数を渡そうとすると、コンパイル時にエラーが発生します。これにより、実行前に問題を発見し、より安全なコードを保証できます。
JavaScript との互換性
TypeScript は JavaScript のスーパーセットなので、JavaScript と完全に互換性があります。
既存の JavaScript コードを TypeScript に徐々に移行することも、 TypeScript で書かれたライブラリを JavaScript プロジェクトで利用することも可能です。
TypeScriptは、大規模なアプリケーションの開発、またはより堅牢でメンテナンスしやすいコードを求めるJavaScript開発者にとって便利な選択肢です。 その静的型付けと豊富な機能セットにより、開発プロセスをより効率的でエラーの少ないものに変えることができます。
React + TypeScript での開発のメリット
型安全性の向上
先述の通り、TypeScriptは静的型付けを提供し、開発中に変数、関数、コンポーネントの型を明示します。
Sponsored
これにより、コードがより予測可能になり、型関連のエラーをコンパイル時に発見できるようになります。
コードを読んでいて、「この変数は何が渡されているのか？」と、さらにコードを読み進める必要は多いですよね。
React と組み合わせることで、Props や State の型を厳密に管理でき、アプリケーションの堅牢性が向上します。
画面を構成する際に、意図しない型のデータが渡されないということは、それだけで大いにメリットがあるのです。
しかも、ReactのコンポーネントベースのアーキテクチャとTypeScriptの型システムを組み合わせることで、再利用可能でメンテナンスしやすいコードを作成できます。
型定義はコンポーネントのインターフェースを明確にするので、異なるプロジェクト間でのコンポーネントの再利用ができます。
つまり、組織のアセットをどんどんためていけるということですね。
コミュニティとツールのサポート
ReactとTypeScriptはどちらも活発なコミュニティに支えられており、数多くのライブラリ、ツール、リソースが利用可能です。
この豊富なエコシステムは、開発プロセスを加速し、問題解決に役立ちます。
React + TypeScript での開発手順
公式にも手順の記載があります。
TypeScript の使用 – React
The library for web and native user interfaces
以下のコマンドで、新規プロジェクトを作成します。
npx create-react-app myapp --template typescriptmyapp のところは任意のアプリケーション名にしてください。
※Node.js がインストールされている前提とします。
実行後、App.tsx 等のファイル群が作成されます。
TypeScript を用いて実装する場合、JSX を含むファイルはすべて .tsx というファイル拡張子を使用する必要があります。
実行後は、 以下のコマンドでローカルサーバーが起動します。
npm starthttp://localhost:3000 にアクセスすると、React プロジェクトの初期画面が表示されていると思います。
これで、自身の実装を加えていくためのベースが出来上がりました。
参考書籍
オライリー信者なので。
おわりに
人気言語である React に加え、堅牢なシステムを実装する上での TypeScript という組み合わせは今後のアプリケーション開発では多く登場することでしょう。
これらはぜひ積極的に取り入れていきたいですね。
