chakokuのブログ(rev4)

テック・コミック・DTM・・・ごくまれにチャリ

Vueを学ぶ

背景:改めて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で商用コードを書くわけではないから、、何となく理解したレベルで留めておこう。