ssig33's microblog

メンタルヘルスおかしい女を消耗しきるまで選挙の弾として使うみたいの与野党問わずやってて、俺の知人もそれで三人地方議員になってうち二人は今は国会に転出するかどうかみたいになってる。ああいうのにたいしてフェミニズムがどういう言葉を持ってるのか知らんのだが、とにかく有害と思うのだわ。今回の国民民主党のアレも突き詰めればそういう話だろ。

ssig33

@ssig33@pub.ssig33.com

最近最小限のReactアプリを作るのに使ってるものについてとりあえずメモしとく。

前提: デカいフレームワークは使わない

next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。

前提: SSRしない

SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもしれないけどどうせTailwind使うんだからそんな負担にならない(ただし個人レベルではRailsではなくSinatra+Tailwind/sakura.css使ってる)。

実際に使ってるもの

esbuild
esbuild-server

esbuild を直で使う。ホットリロードを実現するには esbuild-server という超便利パッケージがあるのでこれを使う。

実際の設定は以下のような感じになる

build.ts

import { createServer } from "esbuild-server";
import esbuild from "esbuild";

const mode = process.argv[2] === "--watch" ? "watch" : "build";

const esbuildOptions = {
  entryPoints: ["src/index.tsx"],
  bundle: true,
  sourcemap: true,
  loader: { ".svg": "text" },
  outdir: "public",
  logLevel: "info",
};

if (mode === "build") {
  esbuild
    .build({
      ...esbuildOptions,
    })
    .catch(() =&gt; process.exit(1));
}

if (mode === "watch") {
  const port = parseInt(process.env.PORT || "8080");
  console.log(`Development server started at http://localhost:${port}`);
  createServer(
    { ...esbuildOptions },
    { static: "public", historyApiFallback: true, port },
  ).start();
}

package.json には以下のように書いておく

{
  "scripts": {
    "dev": "tsx esbuild.ts --watch",
    "build": "tsx esbuild.ts"
  }
}

こんな感じなのでtsxも必要。あとはreactとかreact-domとかも適宜入れる。Tailwindが必要ならtwindあたりが楽。自分用とか社内ツールならMVP.cssあたりで楽するのもよい。

ルーティングはwouterを使おう。大抵の用途でこれで困らないはず。

おわりに

たぶんこれがベストとかじゃないとは思うんだけど、Reactアプリをフレームワークなしでとりあえず実用レベルで提供できる方法みたいのは手元に持っておくとわりといいことがあると思います。

tsx npm

ssig33

@ssig33@pub.ssig33.com

https://fedibird.com/@bb_lemon/111982090054401070 こういう人ってマジでデータとか一切見たことないんだろうな(あるいは2007年に学ぶことを一切辞めた人)。

檸檬水 (@bb_lemon@fedibird.com) Fedibird

ssig33

@ssig33@pub.ssig33.com

"最大3年のバッテリー寿命" !!! めっちゃもたないな

ssig33

@ssig33@pub.ssig33.com

Anker の忘れ物タグ的なやつつかってるんだけどこれそういえばいつまで電池もつんだろうか、実はもう切れてたりしないだろうか、ということがいきなり気になりはじめた

ssig33

@ssig33@pub.ssig33.com

非常にだるい

ssig33

@ssig33@pub.ssig33.com

猫のやつTikTokにおいて地球全体で爆発的に流行ったものが、そこから遅れて日本のTwitterで流行るとそのタイミングで「日本のTwitterでこれが流行っている」って非日本語圏を含め世界的ニュースみたいな扱いになるの本当に納得いかないんだけど、それだけまあTwitterと日本は特別なんですかね。