次のフロントエンドプロジェクトの技術スタック - 2024 Autumn
@iktakahiro / Takahiro Ikeuchiフロントエンドフレームワークは SolidJS + SolidStart
軽量・高速で学習コスト低い。SolidStart が v1 になり CSR、SSR、SSG をカバーする選択肢の1つになっている。
ファイル・ディレクトリベースのルーティングもかなり柔軟に作れる
状態管理は Signals
SolidJS を使うと状態管理は標準で Signals になるがこれがよいと思う。
UI コンポーネントキット・CSS周りは ParkUI（Ark UI + Panda CSS）
Ark UI は Radix UI のレイヤー。shadcn 的なものが Park UI。shadcn のスタイリングは Tailwind だが、Park UI は Panda CSS を採用している。（以前は Panda CSS / Tailwind の両対応だったがPandaに1本化された経緯がある）
スタイリングにコストをかけられる場合は Park をはさまずに Ark UI + Panda CSS でも良さそう。
Tailwind 論争に疲れたあなたにもお勧め（？）
参考 :
Panda CSS は Chakura UI チームが正式に管理するライブラリだが、Park UI はそうではない点を気にしておく必要はありそう。
@iktakahiro / Takahiro Ikeuchiビルドツールは Vite
SolidStart を採用すると Vinxi を使うことになる。
Vinx は Vite や Nitro をよしなに扱ってくれるもの（という理解
テストツールは Vitest と Playwright
Vite を使うし Jest ではなく Vitest が良さそう。
E2E テストは Playwright（で良いですかね）
Formatter / Linter は Biome
@iktakahiro / Takahiro IkeuchiDI コンテナは inversify
TSyringe を好んで使っていたけど、API もほとんど変わらないし、より型安全にし易いので inversify を推す（どちらでもよい）
@iktakahiro / Takahiro Ikeuchi急に具体だが デコレーター使えるようにするのに沼ったのでメモ。Babel 周辺は触らなくても大丈夫だった
import typescript from '@rollup/plugin-typescript';
import { defineConfig } from '@solidjs/start/config';
import tsconfigPaths from 'vite-tsconfig-paths';
export default defineConfig({
vite: {
plugins: [typescript(), tsconfigPaths({ root: './' })],
},
});
{
"target": "ESNext",
"module": "ESNext",
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
ほか（更新予定）
UI カタログは Storybook
フルサポートではない可能性があるが Storybook 公式に SolidJS をサポートしている。
多言語対応（i18n）は @solid-primitives/i18n
多言語対応（i18n）は Solid Primitives リシーズの @solid-primitives/i18n だけで良さそう。