備忘録 Web：Typescript②

※調べた内容を後日見返せるように本記事を作成しています。

今回はReact、Typescriptを使用したWebアプリ開発環境の構築を行っていく。
仕様ツール類は以下の通り。

JavaScriptを、PythonやRubyのようにパソコン上で動かせるようにしてくれるもの。
ただし、あくまでもフレームワークではなく、Javascript実行環境である。

そんな便利なNode.jsにも以下のようなデメリットはある。

複数のJavaScriptファイルを一つのファイルにまとめて出力するツール。

UI用のJavaScriptライブラリ。
可読性やパフォーマンスを高められることから開発品質の向上が可能。

React、Typescriptの開発環境構築手順は以下の通り。

実行確認コマンド
tsc -v

プロジェクト作成
コマンドプロンプト上でプロジェクトを作成したいフォルダに移動し、以下コマンドを実行する。
npx create-react-app プロジェクト名 --template typescript
ここではプロジェクト名を「test」とする。

以下フォルダ構成が作成されていれば成功。

ブラウザ上に以下のような画面が表示されれば成功。

以上が、React、Typescriptの環境構築手順となる。

Web画面の修正を行いたい場合は「src」フォルダのファイルを修正、保存により、自動で画面の情報が移り変わる。
主に「index.tsx」「App.tsx」を修正することで画面の内容を変えることができる。

ファイルの内容を以下に示す。

ファイル名	概要
index.tsx	実行開始ファイル。プロジェクト上で最初に実行するファイル
index.css	index.tsxのCSSファイル
App.tsx	APP関数定義ファイル。画面中央の内容を表示している。
App.css	App.tsxのCSSファイル
App.text.tsx	画面の「Learn React」を表示するファイル。