背景:改めてJSを勉強して、超絶進化していることを知った。いつ使うのか知らなないが、Vueも使えるようになりたい
課題:Vueの仕様を理解する。できたら最新バージョンを理解
取り組み:Vue3.2の解説本を読んでプログラムを写経する
自分のPCのCygwin環境ではnode/npm/yarnがまともに動かないので、WSL環境のUbuntu でnode/npmを最新にする。先人の記事を参考に以下で最新化(toyonobu 様Zennの記事 感謝)
sudo apt update sudo apt --yes upgrade sudo apt --yes install nodejs npm sudo npm -g install n sudo n stable sudo apt purge nodejs npm sudo apt autoremove sudo npm -g install yarn
上記操作の結果、一応以下のバージョンまで上がった
$ node -v v18.17.1 $ npm -v 9.6.7 $ yarn -v 1.22.19
vue解説本に従い、素のvueを動かしてみる
cd lang/js/vue/ yarn create vite my-vite-todo --template vue cd my-vite-todo/ yarn yarn dev
上記で素のvueが構築され、 http://localhost:5173/で稼働中と表示されたので、ブラウザでアクセス
とりあえず、、コンポーネント間の連携、サーバとブラウザ間の連携ぐらいは実装できるようになりたい。
解説本に従ってコードを打ち込んで、ToDoListが登録できるところまでは進んだ。
■ご参考URL
UbuntuへのNode.jsのインストール
参考にしている本 (Kindle Unlimitedを契約していたら0円)
サンプルコードはシンプルで、Vue3.2で書かれているので、最初に読むのに適していると思います。■補足
Vue3.2で書くとコンパクトに実装できますが、Vue一命令の裏では展開された複数のJSソースコードが動いているので、Vueの動きを完全に理解するには、どんなJSに変換されるのかまで理解する必要があると思います。そこまで時間をかけてVueを勉強するか、あるいは、細かい挙動が分からないけど、だいたい使えたらいいで留めておくか・・・Vueで商用コードを書くわけではないから、、何となく理解したレベルで留めておこう。