0xf

日記だよ

フロントエンド周りのメモ

プログラミング

ちょっと手元で簡単な管理画面を作ろうとしていた。Elmで書くか、素朴なテンプレートエンジンでサーバーサイドレンダリングをするのが手癖だったんだけど、それもちょっと古いよなあということで Nodeベースの何かとする。

tailwindcss

なんとなくわかってきた。全体レイアウトを一回作っておけばなんとかなる。

レイアウトを一回作るのはHTML構造だけ作ってCursorに依頼すると割となんとかなった。

たとえばよくあるヘッダ・フッタ・サイドバーの構成だったら、以下のような素朴なHTMLを作っておいて、

<body>
  <header> ... </header>
  <aside> ... </aside>
  <main> ... </main>
  <footer> ... </footer>
</body>

んで tailwindでスタイリングしてとでも依頼しておけばとりあえず形になる。

現代は flex と grid が普及しているので自分の知っているつらいCSSとは隔世の念がある。

zod

最初はちょっと面倒だなと思ってたけど、anyなデータを扱う箇所は基本的に限られていて、それはどうせパースせざるを得ず書いたらテストもしないといけないのだから、一緒である。

APIの結果を処理するなど anyを処理するところはとりあえず zod で変換しとけばよい。

型定義も素朴な型を書けば zodの定義を生成して と依頼しておけば作ってくれる。

react-router

なんか昔よりだいぶ素直な感じになっている気がする。NavLink とか手作りしなくて良くなっている。ありがたい。

jotai

状態管理。

Recoilは消えてしまった。似ているということで jotai を使ってみたがわりと良い感じだった。自分の用途だとこれで足りなくなることはなさそう。

Jotai, primitive and flexible state management for React

ViteとVitest

React環境をセットアップするのはViteで安定している。

Viteは開発サーバも軽快で良い。バックエンドアプリケーションとも開発サーバのプロキシが素直に書ける。

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
      },
    },
  },
})

Vitestはセットで使うと良さそう。Jestより確かに高速。

VSCodeの launch.json で複数の起動構成まとめて動かす

だいたいWeb UIをReactで書いたりするときはサーバーサイドも一緒に立ててテストするのである。

    "compounds": [
        {
            "name": "Full Stack: Backend + Frontend",
            "configurations": ["Python: FastAPI", "Frontend: Vite", "Frontend: Chrome"],
            "stopAll": true
        }
    ]

みたいにして複数のデバッグ用起動構成をまとめて実行させるようにするのが便利。ターミナル複数で watch とか走らせなくて良い。