バニラを使用して状態ベースのレンダリング要素3-優先パラメータ(feat.ボイラプレート)を作成する

リポジトリの表示🗃

テクノロジースタック🦾

プロジェクトの環境設定🔧

1.プロジェクトバージョン管理の開始

npm init -y

2.gitignoreの設定

//.gitignore

# dependencies
/node_modules

# production
/dist

# etc
.DS_Store
.vscode

3.Webpackの設定

関連パッケージのインストール

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin copy-webpack-plugin

package.jsonスクリプト設定

// package.json
...
{
	"scripts": {
		"build": "webpack --mode production",
		"dev": "webpack-dev-server --mode development --open"
	}
}

webpack.config.js設定

// webpack.config.js
const path = require('path')
const HtmlPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/bundle.js',
    clean: true
  },
	module: {
		rules: [
			{
        test: /\.(png|jpg|gif)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'assets/images/[name][ext]'
        },
      },
		]
	},
	devtool: "inline-source-map",
  devServer: {
    client: {
      logging: 'none'
    }
  },
  plugins: [
    new HtmlPlugin({
      template: './public/index.html',
      favicon: path.resolve(__dirname, 'public/favicon.ico')
    }),
    new CopyPlugin({
			patterns: [
				{ from: 'public/favicon.ico'}
			]
		})
  ]
}

4.Type Script+Webpackの設定

関連パッケージのインストール

npm i -D typescript ts-loader tsconfig-paths-webpack-plugin

tsconfig.path.json設定

// tsconfig.path.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@assets": ["./assets"],
      "@assets/*": ["./assets/*"],
      "@api": ["./api"],
      "@api/*": ["./api/*"],
      "@services": ["./services"],
      "@services/*": ["./services/*"],
      "@utils": ["./utils"],
      "@utils/*": ["./utils/*"],
      "@constants": ["./data/constants"],
      "@constants/*": ["./data/constants/*"],
      "@models": ["./data/models"],
      "@models/*": ["./data/models/*"],
      "@router": ["./router"],
      "@router/*": ["./router/*"],
      "@components": ["./components"],
      "@components/*": ["./components/*"],
      "@hooks": ["./hooks"],
      "@hooks/*": ["./hooks/*"],
      "@core": ["./components/core"],
      "@core/*": ["./components/core/*"],
      "@base": ["./components/base"],
      "@base/*": ["./components/base/*"],
      "@domain": ["./components/domain"],
      "@domain/*": ["./components/domain/*"],
    }
  }
}

tsconfig.json設定

// tsconfg.json

{
  "extends": "./tsconfig.path.json",
  "include": ["src/**/*"],
  "outDir": "./dist/js",
  "compilerOptions": {
    "baseUrl": "src",
    "target": "es5",
    "lib": [
      "DOM",
			"DOM.Iterable",
      "ESNext"
    ],
    "module": "esnext",
    "moduleResolution": "Node",
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "forceConsistentCasingInFileNames": true,
    "skipLibCheck": true,
    "strict": true,
    "resolveJsonModule": true
  }
}

webpack.config.jsその他の設定

// webpack.config.js

const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin')
const tsConfigPath = path.resolve(__dirname, "./tsconfig.json")

module.exports = {
  entry: './src/main.ts',
  resolve: {
    extensions: ['.ts', '.js'],
    plugins:[
      new TsconfigPathsPlugin({
        configFile: tsConfigPath
      })
    ]
  },
  module: {
    rules: [
    ...
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
}

5.SCSS+Webpackの設定

関連パッケージのインストール

npm i -D sass sass-loader css-loader mini-css-extract-plugin

webpack.config.jsその他の設定

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
  module: {
    rules: [
    ...
      {
        test: /\.s[ac]ss$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
  ...
    new MiniCssExtractPlugin({
      filename: 'assets/css/style.[contenthash].css',
    })
  ]
}

6.Babel設定

関連パッケージのインストール

npm i -D @babel/core @babel/preset-env @babel/preset-typescript @babel/plugin-proposal-class-properties

npm i core-js whatwg-fetch

webpack.config.jsその他の設定

// webpack.config.js

module.exports = {
  module: {
    rules: [
    ...
      {
        test: /\.m?js$/,
        include: [path.resolve(__dirname, 'src')],
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ["@babel/preset-env", {
                "useBuiltIns": "usage",
                "corejs": 3
              }],
              "@babel/preset-typescript"
            ],
            plugins: ["@babel/plugin-proposal-class-properties"]
          }
        }
      }
	  ]
  }
}

7.ESLint設定

関連パッケージのインストール

npm i -D eslint eslint-plugin-import-helpers @typescript-eslint/parser @typescript-eslint/eslint-plugin

.eslintc設定

// .eslintrc.js
module.exports = {
	root: true,
	env: {
		browser: true,
		es2021: true,
		node: true
	},
	parser: '@typescript-eslint/parser',
	parserOptions: {
		project: './tsconfig.json'
	},
	plugins: ['@typescript-eslint', 'eslint-plugin-import-helpers'],
	extends: [
		'eslint:recommended',
		'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended'
	],
	ignorePatterns: ['webpack.config.js','**/*.config.js', '.eslintrc.js'],
	rules: {
		'import-helpers/order-imports': [
			'error', {
				newlinesBetween: 'never',
				groups: [
					'absolute',
					'module',
					['parent', 'sibling', 'index'],
					'/^@shared/',
				],
				alphabetize: { order: 'asc', ignoreCase: true },
			},
		],
		'no-prototype-builtins': 0,
		'@typescript-eslint/consistent-type-definitions': ['error', 'interface'],
		'@typescript-eslint/consistent-type-imports': 'error',
		'@typescript-eslint/explicit-function-return-type': 'error',
		'@typescript-eslint/member-ordering': 'error',
		'@typescript-eslint/method-signature-style': ['error', 'method'],
		'@typescript-eslint/no-confusing-void-expression': 'error',
		'@typescript-eslint/no-duplicate-imports': 'error',
		'@typescript-eslint/no-non-null-assertion': 'off',
		'@typescript-eslint/no-explicit-any': 'off',
		'@typescript-eslint/type-annotation-spacing': ['error', {
			before: false,
			after: true,
			overrides: { colon: { before: true, after: true }}
		}]
	}
}

package.jsonスクリプトの追加の設定

// package.json

"scripts": {
	...
	"lint": "eslint ./src/**/*.ts",
    "lint:fix": "tsc --noEmit && eslint --fix ./src/**/*.ts"
},

8.Prettier設定

関連パッケージのインストール

npm i -D prettier eslint-plugin-prettier eslint-config-prettier

.prettierrc.json設定

// .prettierrc.json
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "bracketSameLine": true,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

アクションの確認🤩

1.開発サーバの起動

// 완성본을 다운받은 경우, npm install
npm run dev

2. console.logを開き、「test」入力が正しい場合は設定を完了します!

// ./src/main.ts
export const test = 'test'
console.log(test)