Vue.jsを初めて触ってみた所感
kouこれからVueを本格的に勉強し始めようと思うので、主にReactとの比較などに焦点を当てつつ思ったことを書いていく予定📝
kou【公式ドキュメント少し見ただけの感想】
まだ特に触ってはいないが公式ドキュメントでざっと使い方を眺めてみた感じの率直な印象。
Vueは構造(HTML)とデータの処理(JS)を同じファイル内ながら分けて書く必要があり、それが恐らく可読性的な観点などから良い面なんだと思われるが、ReactでJSXをよく書いている人間からすると、構造(HTML)と処理(JS)が初めから一体化してくれている（=つまりはJSX記法）方が見易いし扱い易いような気がした。
Vueのよく挙げられる利点として、HTMLやCSS、JSを分けて書くことから、「デザイナーとのやり取りがしやすい」というのを何度か見たことがあるが、結局のところCSSを分けて書くのはReactでも出来ることで（CSS Modulesなど）、そこまで利点なのかな？と純粋に感じた。
また、HTML部分も分かれていることで、これもまた「デザイナーとのやり取りがしやすい」要因の一つなのかなと思ったが、思っているよりもHTML部分の中でVueのコンポーネントを多く使う印象を受けたので、これもまた本当に「やり取りがしやすいのか？」という疑問が浮かんだ。
Reactのフィルターを通して見てしまっていることは間違いないが、やはりJSX記法に慣れ親しんだ後だとインパクトにかけるというか、少し見劣りしてしまうなという第一印象だった。
まだ一行もコードは書いていないので、これからも色々と気になったことや気付いた点を書き留めていきたい。
特にVue2系と3系では大きく体験が違うらしく、そこも色々知りたいなという感じ。Composition APIは結構Reactに近いとのこと？
kou【Vue思ったよりも使いやすい】
実際にVueをちょこちょこと触り始めて2日、正直思っていたよりも悪くない。割と普通に使いやすい感。
ただ、まだやってて楽しいのはReact。
前に誰かが、VueよりもReactは「俺フロントエンドやってる感が強い」みたいなことを書いていたが、今のところ非常に納得といった感じ。
kou【HTML部分で変数を使う時の記述方法がパッと見でわかりにくい？】
Reactの場合、JSX記法において{}で囲んだ範囲がJSの世界として扱われることがパッと見で明確にわかる（まあJSX自体全てJSで出来ていることはさておき🙄）。
Vueの場合、HTMLを書くtemplate部分で変数を使うときなどの書き方がパッと見でわかりにくいなと感じた。まあ慣れの問題といえばそれまでかも。
マスタッシュ構文{{ }}を使う場面はわかりやすいが、v-bindやv-forのような、中に""で変数を記述するのが慣れない。
恐らく確実に慣れの問題だが、""の中にJSを記述するのがめちゃくちゃに違和感がある。
// ""の中にJSチックなものを書くことにとても違和感
<ul v-for="task in tasks" v-bind:key="task.id">
<li>{{ task.title }}</li>
{/* マスタッシュ構文は見易い */}
<ul>
雑なVue記事メモ
kou【 this 出現しすぎ問題】
Reactではほぼほぼ見かけなかったthisが頻繁に出てきて困った。
と思ったらこれはVue2系までの話で、Vue3系のComposition APIからはこのthis地獄から解放されるみたい。
これを調べていてすぐに気付いたこととしては、Reactで言うところのクラスコンポーネントから関数コンポーネントへの移行と同様のことかなということ。
そして更に思ったのは、「だったらReactで良くないか？」ということ。
Reactを推しているのは勿論あるが、出来るだけフラットに見ようとして今のところVue固有の良さというものが見えてきていないのが率直な感想。
VueがReactを追っかけて同じことをしようとしているだけに見えてしまう。
今後も色々調べてみる。Vueの良さを見つけたい🤔
参考になった記事メモ
kou【console.logぐらいパッと使わせてほしい😂】
JSデバッグの要 console.log さえ中々どうやって使うのか戸惑った😇
kou【Vueを基礎から学習し直し中】
Vueの基礎理解が少しあやふやすぎるなと感じたので一度基礎の基礎から復習中。
有益な記事がたくさんあって大変助かる。