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

ちなみに作られるプロジェクトの構成とメインの中身は以下の図の通りです。

viteだとindex.htmlがpublic以下にないのが特徴的でしょうか。 公式にこだわりの一つと記載があった気がするので気になった人は探してみてください。 アプリ自体は典型的なReactアプリだなあという感じです。

Todoアプリを作る

中身自体はmuiで適当に作ります

...

できました

まあ正直なんだかわかりませんが、 左側のタスクを右側に書いてあることをやるときの気分でやれば取り掛かるのがめんどい! ということがへるんじゃないでしょうか

www.teikoku-vol.com

まあ色もやばい気もしますがこれは好みです

何か大志を持ってこれに取り組んだ気もするんですが何をしようとしていたか忘れました。

そのうちローカルストレージ対応できたらいいかなと思ってます

以上!!

skebはまだ来ないですね、、