雑にReactアプリを作りたい時に使ってるもの

Viteとmolefrog/wouterを使う。

https://ja.vitejs.dev/
https://github.com/molefrog/wouter

とりあえず最初は↓のコマンドを叩くだけでReact+TypeScriptの設定は終わり。

npm create vite hoge --template react-ts
npm install

あとはrouterとしてmolefrog/wouterが最小限の機能しかないから好きで使ってる。

npm install wouter

これで↓みたいな感じでアプリを書いて終わり。

import "./App.css";
import { Link, Route, Switch } from "wouter";

function Nav() {
  return (
    <nav>
      <Link to="/">Home</Link>
      <br />
      <Link to="/about">About</Link>
    </nav>
  );
}

function Home() {
  return (
    <div className="App">
      <h2>Home</h2>
      <Nav />
    </div>
  );
}

function About() {
  return (
    <div className="App">
      <h2>About</h2>
      <Nav />
    </div>
  );
}

function App() {
  return (
    <>
      <Switch>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route>
          <h2>404 not found</h2>
        </Route>
      </Switch>
    </>
  );
}

export default App;

LintとFormatterが欲しい時はBiomeでドカッとまとめて設定する。

npm install --save-dev --save-exact @biomejs/biome
npx @biomejs/biome init

biome.json

{
  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noNonNullAssertion": "off"
      }
    }
  },
  "javascript": {
    "parser": {
      "unsafeParameterDecoratorsEnabled": true
    },
    "formatter": {
      "enabled": true,
      "quoteStyle": "single",
      "jsxQuoteStyle": "single",
      "trailingComma": "all",
      "semicolons": "asNeeded",
      "arrowParentheses": "asNeeded",
      "indentWidth": 2,
      "indentStyle": "space",
      "lineWidth": 80,
      "quoteProperties": "asNeeded"
    }
  },
  "json": {
    "parser": { "allowComments": true },
    "formatter": {
      "enabled": true,
      "indentStyle": "space",
      "indentWidth": 2,
      "lineWidth": 80
    }
  }
}

VSCodeのsettings.json

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "always",
    "source.organizeImports.biome": "always"
  },
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  }
}

雑にSPAが作りたい時なんてものがあるのか？という話はあるがSEOが不要でサーバーも無駄に管理したくない、S3とか雑にオブジェクトストレージにドン！みたいな、個人/社内アプリとかwebviewアプリを作りたいことはそれなりにある。自分の場合は仕事でLIFFというLINE内Webアプリを作ることが結構あって、その際にNext.js/Remix/Astroあたりのフレームワークは流石にオーバースペックで、これらを使わず小さくやるならどうするか？という話が出た時にこういう需要が出てきた。

まぁなんだかんだで雑なアプリこそ初手はNext.jsを採用しておきゃいいでしょという話はあり、それはそれで正しい。そもそも色々考える手間を減らすためにフレームワークがあるわけだし。

が、活発に開発が進んでいるちゃんとしたフレームワークであればあるほどどんどん進化が進み、時代の流れ的に必要な機能で理解は出来るが自分には不要なんだけどな〜みたいな変更が入ったりする。それに追従したりキャッチアップする作業がだるい...という現象に苛まれることもあって極力小さく済むならそうしたいという気持ちで小さく始めたりしてる。

あと正直、自分の責任範囲であればフレームワークだろうがviteやらesbuildやら何でも使えばいいかなと思うからこれはあくまで自分の場合の例ということでひとつ。