frontendのリファクタリング

README.md

@@ -43,15 +43,7 @@ $ docker-compose run backend bin/rails db:create db:schema:load db:seed_fu
 
 ### Frontend
 
-```bash
-$ cd ./frontend
-$ yarn install
-
-# Commands
-$ yarn start  # Start webpack-dev-server
-$ yarn build  # Build to dist/
-$ yarn lint   # Check type and syntax, auto fix
-```
+refer to [/frontend/README.md](/frontend/README.md)
 
 ## その他
 

frontend/.prettierrc

@@ -1,7 +1,7 @@
 {
   "semi": true,
   "singleQuote": false,
-  "printWidth": 120,
+  "printWidth": 80,
   "useTabs": false,
   "trailingComma": "none",
   "bracketSpacing": true,

frontend/README.md

@@ -0,0 +1,17 @@
+# Frontend README
+
+[![CircleCI](https://circleci.com/gh/kure-kosen/cho_kure_web/tree/feature%2Fdev.svg?style=svg)](https://circleci.com/gh/kure-kosen/cho_kure_web/tree/feature%2Fdev)
+[![Maintainability](https://api.codeclimate.com/v1/badges/cef3c1298621fa26dd1c/maintainability)](https://codeclimate.com/github/kure-kosen/cho_kure_web/maintainability)
+[![Test Coverage](https://api.codeclimate.com/v1/badges/cef3c1298621fa26dd1c/test_coverage)](https://codeclimate.com/github/kure-kosen/cho_kure_web/test_coverage)
+
+## How to Dev
+
+```bash
+$ yarn install
+
+# Commands
+$ yarn start  # Start webpack-dev-server, open http://localhost:3000/app
+$ yarn dev    # same as $ yarn start
+$ yarn build  # Build to /public/assets/build/
+$ yarn lint   # Check type and syntax, auto fix
+```

frontend/config/webpack.config.common.js

@@ -2,33 +2,35 @@
 
 const path = require('path');
 
-module.exports = {
-  entry: {
-    app: ['babel-polyfill', path.resolve(__dirname, '../src/index.tsx')],
-  },
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 
-  mode: 'development',
-  devtool: 'source-map',
+module.exports = {
+  entry: {app: path.resolve(__dirname, '../src/index.tsx')},
 
   resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.css', '.json'],
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    alias: {'@': path.resolve(__dirname, '../src')}
   },
 
+  plugins: [new ForkTsCheckerWebpackPlugin({workers: 1, tslint: true})],
+
   module: {
     rules: [
-      { test: /\.(ts|tsx)?$/, loader: 'awesome-typescript-loader' },
       {
-        test: /\.(js|jsx)$/,
-        loader: 'babel-loader',
+        enforce: 'pre',
+        test: /\.(ts|tsx)?$/,
+        use: [{loader: 'tslint-loader', options: {typeCheck: true, fix: true}}]
+      },
+      {
+        test: /\.(ts|tsx)?$/,
+        loader: 'ts-loader',
         exclude: /node_modules/,
-        query: {
-          presets: ['es2015', 'react', 'react-dom'],
-        },
+        options: {transpileOnly: true}
       },
       {
         test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-      },
-    ],
+        loaders: ['style-loader', {loader: 'css-loader', options: {url: false}}]
+      }
+    ]
   }
 }

frontend/config/webpack.config.dev.js

@@ -4,22 +4,21 @@ const path = require("path");
 const merge = require("webpack-merge");
 const common = require("./webpack.config.common.js");
 
+const DEV_SERVER_PORT = 5000;
+
 module.exports = merge(common, {
   mode: 'development',
-
   devtool: 'inline-source-map',
 
   devServer: {
     host: '0.0.0.0',
-    port: 5000,
-
+    port: DEV_SERVER_PORT,
     disableHostCheck: true,
-
     contentBase: path.resolve(path.join(__dirname, '../')),
-
     watchContentBase: true,
-    historyApiFallback: true,
     noInfo: true,
+    hot: true,
+    open: true,
     historyApiFallback: true,
     overlay: true,
     inline: true
@@ -29,30 +28,26 @@ module.exports = merge(common, {
     rules: [
       {
         test: /\.(jpg|png|gif|eot|ttf|svg)$/,
-        use: [
-          {
-            loader: 'file-loader',
-            options: {
-              name: '[path][name].[ext]',
-              outputPath: '/',
-              publicPath: 'http://localhost:5000/'
-            }
+        use: [{
+          loader: 'file-loader',
+          options: {
+            name: '[path][name].[ext]',
+            outputPath: '/',
+            publicPath: `http://localhost:${DEV_SERVER_PORT}/`
           }
-        ]
+        }]
       },
       {
         test: /\.(woff|woff2)$/,
-        use: [
-          {
-            loader: 'url-loader?mimetype=application/font-woff',
-            options: {
-              name: "[path][name].[ext]",
-              outputPath: "/",
-              mimetype: 'application/font-woff',
-              publicPath: "http://localhost:5000/"
-            }
+        use: [{
+          loader: 'url-loader',
+          options: {
+            name: '[path][name].[ext]',
+            outputPath: '/',
+            mimetype: 'application/font-woff',
+            publicPath: `http://localhost:${DEV_SERVER_PORT}/`
           }
-        ]
+        }]
       }
     ]
   }

frontend/config/webpack.config.prod.js

@@ -2,22 +2,22 @@
 
 const path = require("path");
 const merge = require("webpack-merge");
-const CleanWebpackPlugin = require("clean-webpack-plugin");
-const ManifestPlugin = require("webpack-manifest-plugin");
 const common = require("./webpack.config.common.js");
 
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const ManifestPlugin = require("webpack-manifest-plugin");
+
 module.exports = merge(common, {
   mode: 'production',
+  devtool: 'source-map',
 
   output: {
     path: path.resolve(__dirname, '../../public/assets/build'),
     filename: '[name]-[hash].js'
   },
 
   plugins: [
-    new CleanWebpackPlugin(['build'], {
-        root: path.join(__dirname, '../../public/assets/')
-      }),
+    new CleanWebpackPlugin(),
     new ManifestPlugin()
   ],
 

frontend/package.json

@@ -7,40 +7,46 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "build": "webpack --config ./config/webpack.config.prod.js",
-    "start": "webpack-dev-server --hot --config ./config/webpack.config.dev.js",
+    "build": "webpack --color --progress --config ./config/webpack.config.prod.js",
+    "dev": "webpack-dev-server --config ./config/webpack.config.dev.js",
+    "start": "yarn dev",
     "lint": "npx tslint --fix -c ./tslint.json 'src/**/*{.ts,.tsx}'"
   },
+  "lint-staged": {
+    "*.{js,ts,tsx}": [
+      "yarn lint",
+      "git add"
+    ]
+  },
   "devDependencies": {
     "@types/react": "^16.8.17",
     "@types/react-dom": "^16.8.4",
     "@types/react-router-dom": "^4.3.3",
     "@types/react-slick": "^0.23.4",
     "@types/styled-components": "^4.1.15",
-    "awesome-typescript-loader": "^5.0.0",
-    "babel-loader": "^7.1.4",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-react": "^6.24.1",
-    "clean-webpack-plugin": "^1.0.0",
-    "css-loader": "^0.28.11",
-    "file-loader": "^1.1.11",
-    "prettier": "^1.15.3",
-    "source-map-loader": "^0.2.3",
-    "style-loader": "^0.21.0",
-    "tslint": "^5.11.0",
-    "tslint-config-prettier": "^1.17.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.0.3",
+    "css-loader": "^2.1.1",
+    "file-loader": "^3.0.1",
+    "fork-ts-checker-webpack-plugin": "^1.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "prettier": "^1.17.0",
+    "style-loader": "^0.23.1",
+    "ts-loader": "^6.0.2",
+    "tslint": "^5.16.0",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-loader": "^3.5.4",
     "tslint-plugin-prettier": "^2.0.1",
     "typescript": "^3.4.5",
-    "url-loader": "^1.0.1",
-    "webpack": "^4.10.2",
-    "webpack-cli": "^2.1.4",
-    "webpack-dev-server": "^3.1.10",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.30.0",
+    "webpack-cli": "^3.3.1",
+    "webpack-dev-server": "^3.3.1",
     "webpack-manifest-plugin": "^2.0.4",
-    "webpack-merge": "^4.1.4"
+    "webpack-merge": "^4.2.1"
   },
   "dependencies": {
     "axios": "0.19.0-beta.1",
-    "babel-polyfill": "^6.26.0",
     "mobx": "^5.9.4",
     "mobx-react": "^5.4.4",
     "mobx-react-lite": "^1.3.2",

frontend/src/api/ContactApi.ts

@@ -1,4 +1,4 @@
-import RestClient from "./RestClient";
+import RestClient from "@/api/RestClient";
 
 export interface IContactEnum {
   corners: { [key: string]: number };
@@ -19,7 +19,13 @@ export default class ContactApi {
     errored: (err: object) => void,
     always = () => {}
   ) {
-    return this.restClient.post("/api/v1/contacts", json, succussed, errored, always);
+    return this.restClient.post(
+      "/api/v1/contacts",
+      json,
+      succussed,
+      errored,
+      always
+    );
   }
 
   public fetchContactEnum() {

frontend/src/api/RestClient.ts

@@ -4,7 +4,9 @@ export default class RestClient {
   public axios: AxiosInstance;
 
   constructor(baseUrl: string) {
-    const csrfToken = (document.querySelector("meta[name=csrf-token]") as HTMLMetaElement).content;
+    const csrfToken = (document.querySelector(
+      "meta[name=csrf-token]"
+    ) as HTMLMetaElement).content;
 
     this.axios = axios.create({
       baseURL: baseUrl,
@@ -21,7 +23,11 @@ export default class RestClient {
         const { config, data, status } = response;
         const { method, params, url } = config;
 
-        console.group(`${method ? method.toUpperCase() : "undefined method"}:${status} - ${url}`);
+        console.group(
+          `${
+            method ? method.toUpperCase() : "undefined method"
+          }:${status} - ${url}`
+        );
         if (params) console.table(params);
         console.log(data);
         console.groupEnd();