個人的なwebサービス開発時にVueJSを導入しようとして色々調べているうちに思ったことを書いていく
前提として私のJSスキルはフレームワークはjQueryしかまともに触ったことがないです(PureなJSもES6も書けますよ)
まあ表題の通りなので簡単にはいかないよねって話
その理由はいくつかあるが
- 現在(2023/8)がVueJSの過渡期であること(Vue2→Vue3へ切り替わる途中)
- Vue3はJSのフレームワークであると同時にNode.jsのパッケージでもあるということ(これはReactもそう)
- VueJS自体がかなり独特な表記法を使っていること
などなど。
1.について
まず分からないことだらけで色々調べるのだが、ネット上の記事だとVue2前提で書かれているものとVueJS公式のようにVue3前提で書かれているもののざっくり2種類あり、素人目線からするとどっちか区別できないことが挙げられます。
2.について
個人的に分かりづらいなと思ったのがNode.jsのコマンドや用語、package.jsonの扱いやそもそもサーバ上で動かせるJSってなんだよ！という点。これにwebpackも。。。なんてなったらぜってえ頭こんがらがるヨ
更に調べていくとNode.jsとAWS Lambdaを使ってサーバレスアプリケーションを作れる、なんて話もあるくらい。いやいや、サーバレスって言いながらサーバ使ってんじゃんラマヌジャン
この辺の用語のキモさって消費税と同じものを感じますね。言葉を正しく使えよ（◞‸◟）
3.について
実際にVueJSのサンプルコードをググって一目見ればわかる
あと、ついでにVueJSはTypeScriptとの親和性が高い(というかそもそもVueJS自体がTypeScriptで書かれている)ということもありせっかくなのでTypeScriptも…と欲張った結果より学習コストが爆上がりしてしまったというオチ
「State of JavaScript 2022」公開。利用率1位のフロントエンドライブラリはReact、レンダリングはNext.js、テストはJestなど、4万人のエンジニアが回答 － PublickeyにあるようにVueJS自体は使用率が高くて魅力はあるんですけどね。今の自分の職場ではReactは使われているけどVueは特に…って感じだったので独学するしかないのが辛いところ→ならReactやれよって言われたらそれはそう
→→別にいいんだけどでもぶっちゃけReactの記法であるJSXをひと目見て吐き気したのは内緒です😒
じゃあどうやって学習するのって話
TypeScript→VueJSの順がいいのか、それとも逆がいいのか…
結論：一緒にやればいい
どうせどっちもできたほうがいいんだからそらそうよ、と言いたいところですがここでちょっくら整理を。
- VueJSはVue3の方を使う
- VueJSのインストール方法は3つあるがSFCをフル活用したほうがいいしTypeScriptと連携するならnpm install一択
→サーバ用言語のフレームワークでガッツリ開発してフロントエンドの部分だけJSを使うことができる
- TypeScriptに関しては一通りVueJSで書いたコードを.tsにしてエラーを潰していきながら覚える、的な感じ
これでなるべくVueJS公式が想定する通りの環境での実装が可能なはずです。多分。
ディレクトリ構成は余程メチャクチャじゃなければいいでしょう。
あとはもう分からん単語や記法が出てきたら都度調べて地道にマスターしていく予定
