Typescript入門2(Webアプリケーション開発環境構築：React編)

備忘録 Web：Typescript②

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

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

1. Node.js
2. Webpack
3. React

仕様ツール類説明

1. Node.js

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

特徴

• JavascriptでOS機能へのアクセスを可能
• Node.js を使うことで、クライアントとサーバサイド両方を慣れ親しんだJavaScriptで言語を統一して記述でき、プログラマの負担も軽減

Node.jsを利用してできること

• Webサーバ構築
• Webアプリケーション開発
• スマホアプリ開発
• IoT分野の開発
• CSSへの変換

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

• Node.js非対応のサーバーがあること
• フロントエンドのプログラムがそのまま使用できないこと
• 大規模開発に不向きなこと

2. Webpack

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

特徴

• 依存関係のあるJavaScriptのモジュールを解決
• 読み込み順を気にせず、1回のリクエストで済むため効率的
• JavaScriptモジュールをブラウザで扱える形に簡単に変換できる
• ローダやプラグインなどが豊富
• 様々なフレームワークで採用されているのでライブラリからサンプルを見つけやすい

3. React

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

特徴

• 「宣言的」でソースコードを理解しやすい
• スマホアプリでも活用可能
• 「仮想DOM」採用で処理が高速
• 最先端のユーザーインターフェースを作りやすい

環境構築手順

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

1. Node.jsをインストール
   公式のHPからインストールファイルをダウンロードし、ダウンロードしたファイルをダブルクリックでインストールする。

2. Typescriptをインストール
   以下コマンドを実行し、Typescriptをインストールする。
   npm install -g typescript

実行確認コマンド
tsc -v

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

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

1. プロジェクト起動
   プロジェクトフォルダに移動し、以下コマンドを実行する。
   npm start

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

以上が、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」を表示するファイル。