数年前から噂のVue.jsをぼちぼち弄りはじめてみましたよって記事です。

多分そんなに長くならないと思うー

巷ではReact やら Nuxt やら Node やら TypeScript やら騒がしい昨今だよね。

どれに手を付けたら良いかわかんないよね、俺もわかんない。

CSSとかJavaScript、jQueryみたいに読み込んで使い始めれるものばかりじゃなくなってもきてるしよくわかんないよね、本当。

npm だ yarn だ brew だなんだってさ。
この時代黒い画面怖い、とっつきづらいとか言ってらんないんだよ、
わからないんだったら勉強して使えるようにならないといけないのよ。

てな訳で社内の案件で必要ではないけれどはじめてみたVue.jsです。

【Vue.js公式】https://jp.vuejs.org/index.html

上記のURLにアクセスするとこのアイキャッチが表示されると思います。（2021年1月現在）
The Progressive JavaScript Framework：ザ・プログレッシブ・ジャヴァスクリプト・フレームワーク
Vue.jsは進化し続けるjavascriptのフレームワークです。って言いたいんだと思う。多分。

使い方

npmでのインストールもありますけど今回はjQueryと同じようにscriptタグで読み込む使い方をします。

こんな感じ。
@以降でバージョン指定をせずに使って不具合が起きる可能性もあるからバージョン指定をする方が良いよって公式でも推奨されてるよ。

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

Reactも少しだけ勉強してみたんだけど、
HTMLファイルに直接書いていくのがVueで、HTMLファイルを動的に作成するのがReactって違いがあるのかなって思う。
jQueryに慣れた人ならVueのが取っ付きやすい。
俺がそう。

Hello Worldしてみる

See the Pen
Vue.js Study 001 by dipcode_kj (@dipcode_kj)
on CodePen.

こんな風に使っていくみたい、まだ基礎部分だけど。
JS側でインスタンス作って、el の部分でDOMと紐付けて、{{ Vue Code }} でJSでの処理結果を表示させる。

関数も使えるし三項演算も出来る。
うん、使いやすい。

モダンなフレームワークやライブラリを使えばSPAも作れちゃいますって公式にも書いてあるから楽しみだね。

まとめ

なんで勉強しようかって思ったかなんだけどこの本を何となく買ってみて、
その中にGoogleのサービスや社員は今の10倍の○○を目指すみたいな事が書いてあって。

インハウスでクリエイターやっている自分もハッとしたわけで。
そこまでキツく追求なんかはされていないけども予算を達成させる事ばかりに目が行っていて、
それ以上とは全く考えていなくてハッとさせられたからシェアします。

自分が本を買ってその本に求める事は「何か一つでも学びになりそうな事が書いてあるか」なので、
買って良かったなって思いました。
この本に限って言うならばGoogleみたいに大きい会社じゃないから
Googleのサービスあんまり使ってないからみたいな理由で気になっていながら読んでない人は
読んだ方が良いと思います。

本を読んだり記事をググったりする人って少なからず今の現状に満足していなかったり、
何か解決・進捗・変化させたい事があるって事だからとっても良い事よね。