TypeScript Deep Dive 日本語版
  • TypeScript Deep Dive 日本語版
  • TypeScript入門 & 環境構築
    • なぜTypeScriptを使うのか?
  • JavaScript
    • 等価演算子の同一性
    • リファレンス
    • nullとundefined
    • this
    • クロージャ
    • Number型
    • Truthy
  • モダンなJavaScriptの機能
    • クラス
      • Classes Emit
    • アロー関数
    • 残余引数(Restパラメータ)
    • let
    • const
    • 分割代入
    • スプレッド演算子
    • for...of
    • Iterator
    • テンプレートリテラル
    • Promise
    • ジェネレータ
    • async await
  • プロジェクトの環境設定
    • コンパイルコンテキスト
      • tsconfig.json
      • コンパイル対象ファイルの設定
    • 宣言空間
    • ファイルモジュール
      • ファイルモジュールの詳細
      • global.d.ts
    • 名前空間
    • 動的インポート
  • Node.js & TypeScriptのプロジェクト作成
  • React & TypeScriptのプロジェクト作成
  • TypeScriptの型システム
    • JavaScriptからの移行ガイド
    • @types パッケージ (DefinitelyTyped)
    • アンビエント宣言(declare)
      • 型定義ファイル
      • グローバル変数の宣言
    • インターフェース
    • Enum
    • lib.d.ts
    • 関数の型
    • 呼び出し可能オブジェクト
    • Type Assertion(型アサーション)
    • Freshness
    • 型ガード
    • リテラル型
    • Readonly
    • ジェネリック型
    • 型推論
    • 型の互換性
    • never
    • 判別可能なUnion型
    • Index signature(インデックス型)
    • 型の移動
    • 例外のハンドリング
    • ミックスイン
  • JSX
    • React
    • React以外のJSX
  • オプション
    • noImplicitAny
    • strictNullChecks
  • TypeScriptのエラー
    • エラーの理解
    • 一般的なエラー
  • NPM
  • テスト
    • Jest
    • Cypress
  • ツール
    • Prettier
    • Husky
    • Changelog
  • その他のヒント
    • String Based Enums
    • Nominal Typing
    • Stateful Functions
    • Bind is Bad
    • Currying
    • Type Instantiation
    • Lazy Object Literal Initialization
    • Classes are Useful
    • Avoid Export Default
    • Limit Property Setters
    • outFile caution
    • JQuery tips
    • static constructors
    • singleton pattern
    • Function parameters
    • Build Toggles
    • Barrel
    • Create Arrays
    • Typesafe Event Emitter
  • スタイルガイド(コーディング規約)
  • TypeScriptコンパイラの内側
    • Program
    • AST
      • TIP: Visit Children
      • TIP: SyntaxKind enum
      • Trivia
    • Scanner
    • Parser
      • Parser Functions
    • Binder
      • Binder Functions
      • Binder Declarations
      • Binder Container
      • Binder SymbolTable
      • Binder Error Reporting
    • Checker
      • Checker Diagnostics
      • Checker Error Reporting
    • Emitter
      • Emitter Functions
      • Emitter SourceMaps
    • Contributing
GitBook提供
このページ内
  • 1. 手動でTypeScriptのプロジェクトをセットアップする場合
  • 一般的なマシンのセットアップ
  • 素早くプロジェクトをセットアップする
  • プロジェクトの詳細設定
  • あなたのすばらしいアプリケーションを開発する
  • 2. Create React Appを利用する場合
  • 簡単にプロジェクトをセットアップする
  • プロジェクトの詳細設定
  • プロジェクトのビルド

役に立ちましたか?

React & TypeScriptのプロジェクト作成

前へNode.js & TypeScriptのプロジェクト作成次へTypeScriptの型システム

最終更新 2 年前

役に立ちましたか?

手動でTypeScriptのプロジェクトをセットアップする場合と、Create React Appのテンプレートを利用する場合の両方について説明します。

1. 手動でTypeScriptのプロジェクトをセットアップする場合

TypeScriptを使用してWebアプリケーションを作成する場合は、簡単なTypeScript + React(UIフレームワーク)のプロジェクトのセットアップを作成することをお勧めします。

一般的なマシンのセットアップ

  • をインストールする

  • をインストールする

素早くプロジェクトをセットアップする

ベースとして を使用してください。

git clone https://github.com/basarat/react-typescript.git
cd react-typescript
npm install

ここで、 にジャンプしてください。

プロジェクトの詳細設定

そのプロジェクトがどのように作成されたかは下記の通りです。

  • プロジェクトのディレクトリを作成する:

mkdir your-project
cd your-project
  • tsconfig.jsonを作成する:

{
  "compilerOptions": {
    "sourceMap": true,
    "module": "commonjs",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "experimentalDecorators": true,
    "target": "es5",
    "jsx": "react",
    "lib": [
      "dom",
      "es6"
    ]
  },
  "include": [
    "src"
  ],
  "compileOnSave": false
}
  • package.jsonを作成する:

{
  "name": "react-typescript",
  "version": "0.0.0",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://github.com/basarat/react-typescript.git"
  },
  "scripts": {
    "build": "webpack -p",
    "start": "webpack-dev-server -d --content-base ./public"
  },
  "dependencies": {
    "@types/react": "16.4.10",
    "@types/react-dom": "16.0.7",
    "clean-webpack-plugin": "0.1.19",
    "html-webpack-plugin": "3.2.0",
    "react": "16.4.2",
    "react-dom": "16.4.2",
    "ts-loader": "4.4.2",
    "typescript": "3.0.1",
    "webpack": "4.16.5",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "3.1.5"
  }
}
  • すべてのリソースを含む単一のapp.jsファイルにモジュールをバンドルするためのwebpack.config.jsを作成する:

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/app/app.tsx',
  plugins: [
    new CleanWebpackPlugin({
      cleanAfterEveryBuildPatterns: ['public/build']
    }),
    new HtmlWebpackPlugin({
      template: 'src/templates/index.html'
    }),
  ],
  output: {
    path: __dirname + '/public',
    filename: 'build/[name].[contenthash].js'
  },
  resolve: {
    extensions: ['.ts', '.tsx', '.js']
  },
  module: {
    rules: [
      { test: /\.tsx?$/, loader: 'ts-loader' }
    ]
  }
}
  • webpackが生成するindex.htmlのテンプレートとして使われるsrc/templates/index.htmlファイルです。生成されたファイルはpublicフォルダに配置され、Webサーバーから提供されます:

<html>
  <body>
      <div id="root"></div>
  </body>
</html>

アプリケーションのエントリポイントであるsrc/app/app.tsxは以下の通りです:

import * as React from 'react';
import * as ReactDOM from 'react-dom';

const Hello: React.FunctionComponent<{ compiler: string, framework: string }> = (props) => {
  return (
    <div>
      <div>{props.compiler}</div>
      <div>{props.framework}</div>
    </div>
  );
}

ReactDOM.render(
  <Hello compiler="TypeScript" framework="React" />,
  document.getElementById("root")
);

あなたのすばらしいアプリケーションを開発する

最新のパッケージを入手するにはnpm install typescript@latest react@latest react-dom@latest @types/react@latest @types/react-dom@latest webpack@latest webpack-dev-server@latest webpack-cli@latest ts-loader@latest clean-webpack-plugin@latest html-webpack-plugin@latest --save-exactを実行してください。

  • npm startを実行してライブ開発を行います

    • src/app/app.tsx(またはsrc/app/app.tsxに使われるts/tsxファイル)を編集すれば、サーバーがLive Reloadします

    • src/templates/index.htmlを編集すれば、サーバーがLive Reloadします

  • npm run buildを実行して本番用のアセットをビルドします

    • Webサーバーを通じてpublicフォルダ(ビルドされたアセットが配置される)をサーブします

2. Create React Appを利用する場合

簡単にプロジェクトをセットアップする

npx create-react-app my-app --template typescript
cd my-app
npm start # または、yarn start

プロジェクトの詳細設定

Create React Appでプロジェクトを作成すると、下記のようなtsconfig.jsonが作成されます。これを必要に応じて修正し、TypeScriptのコンパイラの動作を、好みに合わせて調整することができます。

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

プロジェクトのビルド

npm run build または yarn build のコマンドで、本番環境用のビルドを実行できます。これで、Reactチームによって本番環境に最適化されたバンドルファイルを出力できます。

を参照してください

TypeScriptを使用してReactのWebアプリケーションを作成する場合、最も一般的な方法は、を使うことです。このツールはReactの開発チームがメンテナンスを行っているツールです。公式にTypeScriptのテンプレートが提供されています。

に書かれているようにnpx create-react-app my-app --template typescriptというコマンドを実行します。my-appの部分には、プロジェクトに利用するフォルダ名を指定します。これで、最初からTypeScriptを利用可能なプロジェクトを簡単に作成できます。

これで、開発用サーバが起動し、 にアクセスして動作を確認しながら、開発を進めることができます。この開発用サーバーは、ファイルの更新を監視しているので、TypeScriptのコードを変更すれば、自動的にコンパイルされ、ブラウザがリロードされます。この仕組みをLive Reloadや、Hot Reloadと呼びます。

http://localhost:8080
Create React App
Reactの公式Webサイト
http://localhost:3000/
Node.js
Git
https://github.com/basarat/react-typescript
あなたのすばらしいアプリケーションを開発する