TypeScript最近のReactはTypeScriptで書かれているのをよく見るようになりましたね。いうことでTypeScriptでReactの基本的なところを学んでみましょう。LinkTypeScriptの基礎に関してはこちらの記事も参考にしてください。環境構築node.jsは入っていることとします。今回はcreate-react-appで始めます。TypeScriptの場合はオプションに--typescriptを指定します。--typescriptインストールが終わったら。startブラウザが起動して何か表示されたら成功です!初期画面をカスタマイズしてみよう最初に表示される画面をカスタマイズしてみます。プログラムファイルはsrcディレクトリに入っています。最初に読み込まれるファイルはindex.tsxですが、そこからApp.tsxを読み込んで表示する設定をしているので、App.tsxを下記のように編集してみましょう。React!!」と表示されましたか。おめでとうございます。AppにReact.FCという型を指定してますが、これは関数コンポーネント(FunctionComponent)のことです。Reactはこの関数コンポーネントのreturnにHTMLタグ(のようなものを)を書くことでそのまま表示することができます。これをJSXと呼びますが、TypeScriptなのでTSXです。Reactコンポーネントはクラスベースの作成方法もありますが、今後は関数コンポーネントで書くことが推奨されているらしいので、基本的にはこちらを使うといいと思います。TSXで変数の表示コンポーネントの中に変数を定義してTSXで表示してみましょう。}</p></div>)}オブジェクト配列をリスト表示Webアプリケーションを作っているとオブジェクトの配列を扱うことはよくありますよね。その場合は最初にオブジェクトのタイプを作ります。string}作成したタイプの配列型を指定して配列を作ります。'一番ださい商品'}]あとはmapで一つずつ表示しましょう。}</ul></div>)}コンポーネントを分けるReactのアプリケーションは複数のコンポーネントを組み合わせて作成することになります。今はAppコンポーネントしかないので、Childという子のコンポーネントを作成して、Appコンポーネントに配置してみましょう。/></div>)}子のコンポーネントにデータを渡す先ほどの例は固定された文字列を表示するだけの子コンポーネントでしたが、親から表示する文字列を指定できるようにしてみましょう。ReactではこのようなときはPropsという機能を使います。TypeScriptの場合はどのような値を使うのかをPropsのタイプで作成してから、React.FCのジェネリクスで指定します。/></div>)}記述量は増えますが、VSCodeなどTypeScriptがサポートされているエディターを使えば、補完されるので結構さくさく書けると思います。タグで囲んだデータを子のコンポーネントに渡すPropsはタグ属性のような書き方で値を渡しましたが、childrenを使うと、値をタグで囲んで渡すことができます。className="App"><Child>子のコンポーネントに渡す</Child></div>)}Propsの値が多くなるとたくさんprops書くの大変ですよね。分割代入を使うとスマートに書けます。)}ファイルを分けるコンポーネントを分けたらファイルも分けたくなりますね。Reactの使い方というわけではありませんが、別ファイルのコンポーネントをインポートして使ってみましょう。defaultの場合はimportで変数に代入するように使います。Appexportだけの場合ファイルに複数exportがある場合はdefaultは付けないで次のようにします。(一つはdefaultにできます。(<div>子のコンポーネント2</div>)}インポートするときは分割代入を使います。変数の値を更新すると、表示している値も同時に変更されるというのがReactを使う利点の一つです。以前はクラスコンポーネントで作りステートという機能を使って状態管理をしましたが、関数コンポーネントでもHooksという機能を使うことで状態管理できるようになりました。今後はこちらがスタンダートになると思うのでこちらを使っていきましょう。APIを使用した状態管理はuseStateを使用します。ステートの値が数値の場合は次のように記述します。useState<number>(0)useStateは配列の分割代入で2つの変数に入れます。一つ目の変数(count)はステートを表示する変数です。二つ目の変数(setCount)はステートの値を更新する為の関数です。このステートの表示と更新するボタンを作成してみましょう。setCount(count-1)}>-1</button></div></div>)}以前のクラスコンポーネントと比べると、だいぶスマートに書けるようになりましたね。これだと描画するたびに関数が再定義されてパフォーマンスがよくないようなので、次のようにしましょう。REPLYNAMEE-MAILURLコードを書く場合は<pre>で囲んでください。WixこのブログではjQueryやWordPressを中心としたWeb制作関係のことを書いております。ご意見ご感想などお気軽にコンタクトフォームよりお問い合わせください。Web関係のお仕事も募集しております。