🕵️‍♂️

webアプリフロント開発環境構築備忘録

2022/07/22に公開

frontend

idea

新規プロジェクトを作成する機会が発生した。

reactでfrontを作るのは2年ぶりくらいである。

2年前とは随分構築方法も異なっていたので、(主に自分用に)記録を残しておく。

選定技術

react
Vite
tailwindcss
docker

reactとvue3の選択に迷ったが、web3なのでsampleの多いreactを選択した。

Viteはbuildのストレスを最小限に抑えるために採用した。

tailwindcssを選択したのは、デザインに凝るつもりがないから。

dockerはPodmanでも良いが、はまる時があるのでdockerにした。

開発環境のゴール

誰でもキャッチアップしやすいシンプルな設定で、早くPDCAが回せる環境の構築。

ベストプラックティスではなく、ファストプラックティスを目指す。

OS環境

docker hubをそのまま利用する。

node -v
v18.6.0

プロジェクト作成

npm create vite@latest

Ok to proceed? (y) y
✔ Project name: … hoge
✔ Select a framework: › react
✔ Select a variant: › react-ts

ライブラリ導入

npm install

hostとportを変更

コンテナとhostをつなぐので、hostとportを変更する。

hostとport以外の変更はしないので、configは作成しないで変更する。

  "scripts": {
    "dev": "vite --port 3000 --host 0.0.0.0",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },

立ち上げ

npm run dev

画面でVite + Reactが表示されれば成功である。

シンプルでよろしい。

css

公式のtailwindcssの導入箇所を参考に導入

特に難しい箇所はない。
postcssは不要な気もしたが、後々必要になる可能性が高いので導入した。

vscode

remoteコンテナを使う。
重くなるのが嫌なので、他は入れない。
入れたい人はご自由に。

lint系

eslintを使う。
viteなので、設定に注意。
以下を参考にした

色々足りない箇所があるので補完。

.eslintignore

vite-env.d.tsなどをチェックから外すために

eslintignoreを作成する

error

lintを実行すると以下のエラーが発生。

error  Definition for rule 'import/extensions' was not found                  import/extensions
  1:1  error  Definition for rule 'import/no-extraneous-dependencies' was not found

.eslintrc.yml設定ファイルに以下を追加

extends:
  - plugin:import/recommended

これでOK。

import sort等は使わない。
Prettierも入れない。

小規模、かつ初心者もいないし、何より重いのがストレスで何より嫌いなので。

importのパス

importが相対パスだとリファクタリングが大変なのでエイリアスにする

実行するとエイリアスにはなったけどlintでエラー発生

No default export found in imported module "react"

これは、不毛でくだらないdefault import有無チェック。

どっちでも良いんだけど

import * as React from 'react';

のように修正。

多言語

基本英語ベースだけど、日本語も利用できると(自分が)楽なので導入。

i18nextを利用する。

deploy

depploy方法も確認しておく。

deployの確認をリリース前にやる人がいるが、先にやっておこう。

viteのdeploy方法は以下である。

previewにもhostとportを追記した。
テストしやすくなる。

"scripts": {
    "dev": "vite --port 3000 --host 0.0.0.0",
    "build": "tsc && vite build",
    "preview": "vite preview --port 3000 --host 0.0.0.0",
    "lint": "eslint --ext .tsx,.ts src/",
    "lintfix": "npm run lint -- --fix"
  },

簡単でよろしい。

unit test

Vitestを使う。速いは正義。

e2e test

cypressを使う。定番。

gitHubAction

チェック・テスト・deployを自動化

gitHubが死んでいる時のバックアップは現段階では考慮しないが、作るときは、色々な環境で動かせるようにrustで書く。

おまけ(folder structure)

frontのフォルダ構成は、どんな選択をしても不満があるので、今回は以下に倣って作成することにする

基本的に私はfolder構成はよほどひどくない限り気にしない。

ルールを設けるのは最低限のルールがないとコード荒れすぎてしまうからだ。
最低限満たしていれば良い。

テスト(unit, e2e, 負荷, データ分析)の方が100倍重要で、うるさく口を挟む。

まとめ

web frontもbackendやサーバーの例に漏れず、順調に複雑、肥大化している。

多くの

やった方がいい設定

を発見したが、

その設定によって、どんな価値が生まれるのか

をきちんと数値(お金)ベースで考えることが重要だろう。

でないとただの自己満足で終わってしまう。

日本人は足し算は得意だが、引き算が苦手な傾向にあるので、注意が必要だ。

ベストプラックティスは画一的な受験勉強をしてきた日本人にとっては魅力的に見えるのかもしれないが、ビジネスにはあまり役立たない。

ベストプラックティスよりファストプラックティスを選択して、(ユーザー視点の)サービスの価値を上昇させることに注力してほしい。