久しぶりにフロントエンドなゼロから実装をすることになったのだけど、最近のことは何もしらない。
風の噂で Vite | 次世代フロントエンドツール がいいぞ、という話を聞いたのでこれでやってみる。
$ npm create vite@latest
これしたら色々選択肢が出てきて全部いい感じに準備してくれる。すごい
? Select a framework: › - Use arrow-keys. Return to submit.
❯ Vanilla
Vue
React
Preact
Lit
Svelte
Solid
Qwik
Angular
Others
よくわからないけれど、Svelteが良いぞ、という話を聞いたのでSvelteにしてみる。
? Select a variant: › - Use arrow-keys. Return to submit.
❯ TypeScript
JavaScript
SvelteKit ↗
SvelteKitが良いらしいのでそれで。
┌ Welcome to the Svelte CLI! (v0.6.15)
│
◆ Which template would you like?
│ ● SvelteKit minimal (barebones scaffolding for your new app)
│ ○ SvelteKit demo
│ ○ Svelte library
└
demoだと参考にできそうな実装がついてくるので、最初の学習はdemoから始めるのがいいかもしれない。
◆ Add type checking with Typescript?
│ ● Yes, using Typescript syntax
│ ○ Yes, using Javascript with JSDoc comments
│ ○ No
└
Typescriptでいきましょう。あえてJavascript+JSDocにするメリットはないのでは？
◆ What would you like to add to your project? (use arrow keys / space bar)
│ ◻ prettier (formatter - https://prettier.io)
│ ◻ eslint
│ ◻ vitest
│ ◻ playwright
│ ◻ tailwindcss
│ ◻ sveltekit-adapter
│ ◻ drizzle
│ ◻ lucia
│ ◻ mdsvex
│ ◻ paraglide
│ ◻ storybook
└
あとでも入れられるけれど、いったん全部入れておいて、あとで消す、が初学者な現状はいいかも。 各ライブラリのあれこれが聞かれて、依存性が解決されて、demoが入った状態で完了。
以前は各ライブラリのバージョンの組み合わせが〜とか、1個ずつ入れたり、設定ファイルを書いていたりしたような気がするんだけど、基本セット全部いりで渡されるので、何もせずともここからアプリケーションの実装に入っていける。
あとはビルトインサーバが立ち上げるくらいか。
$ npm run dev -- --open
ゼロから始めるのがめちゃくちゃ辛いイメージがあって、軽いものなら生でがんばるか…という気持ちだったけどリセットされた。 こんなすぐできて、いい感じにコンポーネント扱っていけて、型もついてきて、テストもかけて、なら最初から全部これでいいな。