Reactでテトリスをつくる⑪＿開発用フロントエンド構築 #React

5.3 開発用フロントエンド構築

開発用フロントエンドを構築します。
構成は以下の通りです。

構成

React
- 今回の主目的なので
TypeScript
- Storybookに付随して
webpack
- バンドルにこれを使うので
ts-loader
- TypeScriptのコンパイルにこれを使う
CSS in JS
- Qiita執筆にあたり、ファイル数を増やしたくないので、cssファイル不要にする。
html-webpack-plugin
- htmlにも色々書きこみたい
JSX
- 標準的で扱いやすいので。

構築コマンド

npm init
- プロジェクト初期化
yarn add react react-dom react-routeor-dom
- React
yarn add typescript
- TypeScript
yarn add webpack webpack-cli webpack-dev-server
- webpack
yarn add prettier
- コード自動補正（細かい体裁を気にしないで、速く書きたい）
touch tsconfig.json
- TypeScriptの設定
touch .prettierrc
- prettierの設定
touch .prettierignore
- prettier除外設定
touch src
- 製造ファイル
touch dist
- コンパイル結果出力先
npx -p @storybook/cli sb init
- Storybookインストール、初期化
git init
- プロジェクトGit対象
touch .gitignore
- Git除外設定

ディレクトリ設計

├── src
│   ├── index.tsx
│   ├── index.html
│   └── comtainer
│       └── Tetris.tsx
├── dist
├── node_modules
├── package.json 
├── tsconfig.json
├── webpack.config.js
├── README.md
├── .prettierrc.md
└── .prettierignore.md

npm 設計

package.json

{
  "name": "reacttetris",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --config ./webpack.config.js",
    "storybook": "start-storybook -p 6006",
    "build-storybook": "build-storybook",
    "prettier": "prettier --write \"src/**/*.tsx\""
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "@babel/core": "^7.14.5",
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-essentials": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/react": "^6.2.9",
    "@types/react": "^17.0.11",
    "@types/react-dom": "^17.0.7",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^5.3.1",
    "prettier": "^2.3.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "ts-loader": "^9.2.3",
    "typescript": "^4.3.2",
    "webpack": "^5.38.1",
    "webpack-cli": "^4.7.2",
    "webpack-dev-server": "^3.11.2"
  }
}

src/index.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>TETRIS</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="./bundle.js"></script>
    </body>
</html>

src/comtainer/Tetris.tsx

import * as React from 'react'

export interface Props {
    content: string
}

export const Tetris = (props: Props) => {
    return <div> {props.content} </div>
}

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = [{
    mode: 'development',
    entry: {
        bundle: './src/index.tsx'
    },
    devtool: 'inline-source-map',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
              // 拡張子 .ts の場合
              test: /\.tsx?$/,
              // TypeScript をコンパイルする
              use: 'ts-loader',
              exclude: /node_modules/,
            },
          ]
    },
    resolve: {
        // 拡張子を配列で指定
        extensions: [
          '.ts', '.tsx', '.js', '.jsx',
        ],
    },
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        port: 3000,
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: "./src/index.html"
      })
    ]
}];

npm run storybook