TypeScriptクックブック

第10章. TypeScriptとReact

この作品はAIを使って翻訳されている。ご意見、ご感想をお待ちしている：[e-mail]

Reactは間違いなく、近年最も人気のあるJavaScriptライブラリの1つだ。コンポーネントの構成に対するそのシンプルなアプローチは、フロントエンド（そしてある程度はバックエンド）アプリケーションの書き方を変え、JSXと呼ばれるJavaScript構文拡張を使ってUIコードを宣言的に書くことを可能にした。このシンプルな原理は、手に取りやすく理解しやすかっただけでなく、他の何十ものライブラリにも影響を与えた。

JSXは間違いなくJavaScriptの世界を変えるものであり、すべてのJavaScript開発者に対応するというTypeScriptの目標とともに、JSXはTypeScriptの中に発見された。実際、TypeScriptは本格的なJSXコンパイラだ。追加のバンドルや余分なツールの必要性がなければ、TypeScriptだけでReactアプリを動かすことができる。TypeScriptの人気も絶大だ。本稿執筆時点で、NPM上のReactタイピングは1週間に2000万ダウンロードを記録している。VS Codeによる素晴らしいツールと優れたTypescriptによって、TypeScriptは世界中のReact開発者の最初の選択肢となった。

React開発者の間でのTypeScriptの人気は衰えることを知らないが、TypeScriptをReactで使うことを少し難しくしている事情がある。他のJSXベースのライブラリは現在、ほとんどがTypeScriptで書かれているため、優れた型がすぐに提供されるが、ReactチームはFlowと呼ばれる独自の静的型チェッカーを使用しており、これはTypeScriptに似ているが、最終的には互換性がない。つまり、何百万人もの開発者が頼りにしているReactの型は、コミュニティの貢献者グループによって定義され、Definitely Typedで公開されている。@types/react は優れていると考えられているが、それでもReactのように複雑なライブラリをタイプするための最善の努力に過ぎない。そのため、必然的にギャップが生じる。それらのギャップが目につく場所については、この章があなたのガイドとなるだろう。

この章では、Reactは簡単なはずなのに、TypeScriptが複雑なエラーメッセージを出して苦労させる状況を見ていく。これらのメッセージは何を意味するのか、どうすれば回避できるのか、長期的にはどのような解決策が役立つのかを考えていく。また、さまざまな開発パターンとその利点、TypeScriptに組み込まれているJSXサポートの使い方についても学ぶ。

ReactとTypeScriptの基本的なセットアップガイドを手に入れることはできない。エコシステムはとても広大で豊かで、多くの道がローマに通じている。フレームワークのドキュメントページを選び、TypeScriptに注目しよう。また、前もってReactの経験をある程度想定していることにも注意してほしい。この章では、Reactのタイピングを主に扱う。

この章ではReactを強く意識しているが、ある種の学びを他のJSXベースのフレームワークやライブラリにも応用できるようになるだろう。

10.1 プロキシ・コンポーネントを書く

問題

あなたは標準的なHTMLコンポーネントをたくさん書いているが、必要なプロパティを常にすべて設定したいわけではない。 ...