みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
Vue.jsの解説シリーズです。
今回はVue.js3の導入方法について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
- Vue3の導入の仕方がわかる
- Vue3の使い方がわかる
そもそもVue.jsとは
ReactやAngularと並んで人気のJavaScriptのフレームワークです。
ちなみにフレームワークとは何かというと、
ピュアなJavaScriptで書くと面倒な処理を
簡単に実装できるようにした枠組みのことです。
Vue.jsを使うメリット
今回は細かい点は割愛しますがメリットは大きく３つあります。
1. 双方向バインディング
2. HTMLを部品化することができる
3. JavaScriptとHTMLが書ける人にとって比較的簡単
導入してみよう
Vue.jsの読み込み
HTMLのタグに以下を張り付けるだけで、実装可能です。
<script src="https://unpkg.com/vue@next"></script>HTMLのテキストをVue.jsで管理しよう！
書き方としてはこのようになります。
<body>
<div id="app">{{変数}}</div>
<!--Vueの読み込み-->
<script src="https://unpkg.com/vue@next"></script>
<script>
// Vueの宣言
Vue.createApp({
data() {
return { 変数名: "値" };
},
}).mount("#app"); //Vueで管理する要素
</script>
</body>
</code></pre></div>このように記述することで、{{}}部分の値を
Vue.jsで管理することができるようになります。
実際に動かしてみよう
See the Pen Vue3導入 by samehack (@samehack) on CodePen.
試しにこちらのJSファイルの値を変えてみると
ブラウザに表示される値が連動して変わることが確認できます。
ちなみにですが、ピュアなJSで記述しようとすると以下のようになります。
<body>
<div id="message"></div>
<script>
// 対象の要素を取得
const msg = document.getElementById("message");
// テキストを上書き
msg.textContent = "こんにちは、サメハックです";
</script>
</body>今回のようにテキストを書き換えるだけだといまいち恩恵が
伝わりづらいかと思いますが、
このような記述だと処理が煩雑になってしまい、
テキスト部分の更新が非常に手間になってしまいます。
次回以降、値の更新や条件分岐等もっと踏み込んだ内容を解説していきます。
まとめ
- <script src=”https://unpkg.com/vue@next”></script>
- ↑のをHTMLに加筆するだけでVueの導入は完了
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
