みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!
Vue.jsの解説シリーズです。
今回はVue.js3の導入方法について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
- Vue3の導入の仕方がわかる
- Vue3の使い方がわかる
そもそもVue.jsとは
![](https://samehack.com/wp-content/uploads/2022/01/23f8f7c7dfc7cbe57408b2300d627cfa-1024x297.png)
ReactやAngularと並んで人気のJavaScriptのフレームワークです。
ちなみにフレームワークとは何かというと、
ピュアなJavaScriptで書くと面倒な処理を
簡単に実装できるようにした枠組みのことです。
Vue.jsを使うメリット
今回は細かい点は割愛しますがメリットは大きく3つあります。
1. 双方向バインディング
2. HTMLを部品化することができる
3. JavaScriptとHTMLが書ける人にとって比較的簡単
導入してみよう
![](https://samehack.com/wp-content/uploads/2022/01/laptop-5906214_1920-1024x684.jpg)
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>
今回のようにテキストを書き換えるだけだといまいち恩恵が
伝わりづらいかと思いますが、
このような記述だと処理が煩雑になってしまい、
テキスト部分の更新が非常に手間になってしまいます。
次回以降、値の更新や条件分岐等もっと踏み込んだ内容を解説していきます。
まとめ
![](https://samehack.com/wp-content/uploads/2021/11/dfe65cc8c5d3185e7b92ade5af4cc6bb-4-1024x264.jpg)
- <script src=”https://unpkg.com/vue@next”></script>
- ↑のをHTMLに加筆するだけでVueの導入は完了
![](https://samehack.com/wp-content/uploads/2021/09/00c3d3cf1d32995d7b5414ac551d13f3.png)
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈