Vite/ReactでTodoあぷり
こんにちは。
フロントエンドの変化は激しいと揶揄されてから20年(嘘) The State of JS 2021: Libraries
を見ると、vite+typescriptが現時点で良さそうということがわかります。
そこで今日はこの二つでTodoアプリを作ってみましょう
構築
モダンなjsツールはscaffoldする機能がついています
https://vitejs.dev/guide/#scaffolding-your-first-vite-projectに記載があるようにやっていきます
npm create vite@latest
コマンドを打つといくつかの質問項目が表示されますが適当に選んでいくとプロジェクトが完成します
npm run dev
を実行するとスキャフォルドされたアプリが立ち上がりました。
簡単ですね。
ちなみにvite
コマンドは開発時に使用vite build
でdist等に成果物を出力、vite preview
というコマンドは単にwebサーバをdist基準で立ち上げるという処理のようです。
previewの存在意義がいまいちわかりませんが、おそらくdistに固めたものが問題ないか確認したいというケースがそれなりにあるんでしょうね。
(普段フロントエンド開発はしないのでわからん)
ちなみに作られるプロジェクトの構成とメインの中身は以下の図の通りです。
viteだとindex.htmlがpublic以下にないのが特徴的でしょうか。 公式にこだわりの一つと記載があった気がするので気になった人は探してみてください。 アプリ自体は典型的なReactアプリだなあという感じです。
Todoアプリを作る
中身自体はmuiで適当に作ります
...
できました
まあ正直なんだかわかりませんが、 左側のタスクを右側に書いてあることをやるときの気分でやれば取り掛かるのがめんどい! ということがへるんじゃないでしょうか
まあ色もやばい気もしますがこれは好みです
何か大志を持ってこれに取り組んだ気もするんですが何をしようとしていたか忘れました。
そのうちローカルストレージ対応できたらいいかなと思ってます
以上!!
skebはまだ来ないですね、、