Vue.jsの学習サイト
仕事でVue.jsの学習用のサイトを共有する機会があったので、私が学習した際に使用したサイトを一例として記事にしてみたいと思います。何の変哲もない記事になりますが、参考になりましたら幸いです。
html・css・javascript
大御所なので、とりあえずこれを読んでいけば問題ないと思います。
Guidesからチュートリアルもできますし、ちょっとわからないところをググっても
大体ここに行き着くイメージです。
Vue.js
トップページにあるなぜVuejs？のボタンからチュートリアル動画が見れます。
記憶が正しければ、チュートリアル動画はOption APIを使用しているので、今から学習する人だと、終わった後にComposition APIの勉強が必要です。ただ、Composition APIを使用するにしても元となる考え方を学ぶ必要があるのでやって損はないと思います。
ver.3がデフォルトになったときの変更で、英語版のページでは同じ記事をOption APIとComposition APIで切り替えながら見ることができるようになったので学習はしやすいかなと思います。
UI フレームワーク
Element-Plus
Element-UIのVue3版です。ver.3にいち早く対応していたフレームワークだったと思います。
使用感としてはcomponentが充実していて使いやすいと思います。
注意点としては、細かいところの記事を探そうとすると中国語？の記事に行き着くことが多いところです。翻訳等で読めないこともないですが、少ししんどいですね。
社で以前より使用していた以外の採用理由がないので、下記の記事で紹介いただいている別のフレームワークを選ぶかTailwindやBootstrap等のcssフレームワークを使用すれば、勉強コストはそこまでかからないんじゃないかなと思います。
Build tools
Vite
ver.3になってプロジェクト作成時にビルドツールがデフォルトでviteになっていたかと思いますが、環境変数のところやconfigファイルのところは一度目を通してみてもよいと思います。
勉強用に使用できるサービス
CodeSandbox
環境構築が面倒だと思いますのでブラウザ上で開発できるサービスを使用するとよいと思います。同じようなサービスだとcodepenや公式のplayground等がありますが、Reactなどの環境も手軽に構築して試せるのでいいかなと思います。
Discussion