みなさんこんにちは!
今回の記事は、

・Vue.jsを使うとどんなことができるんだろう?
というお悩みを解決する記事になっています。
・CDNを使ってVue.jsを始める方法
・CDNを使ったVue.jsの実装例
・Vue.jsのディレクティブを触ってみよう【コピペでOK】
-272x300.jpg)
今回の記事は、 最近よく聞くけど、Vue.jsってなに?これからVue.jsを始めてみたいVue.jsの特徴やメリットが知りたい というお悩みをお持ちの方に向けた記事になっています。 ReactやAngular、そしてV[…]
フリーランス案件を探すならこのエージェント!
転職を考えているならこのエージェント!
Vue.jsをCDNで始める方法
それでは早速、CDNを使ってVue.jsの始める方法について解説していきます。
CDNというのは、「Contents Delivery Network」の略で、コンテンツ(ここではVue.jsファイル)を配布するためのサーバーを立て、配布先(ユーザー)に近いネットワークを経由してコンテンツを配布する仕組みです。
このCDNを利用することで、コードに1行追加するだけでVue.jsが使用できるようになります。
Vue.jsを使用するためのCDNは2種類あり、それぞれ以下の通りになります。
CDNその① 最新バージョンを使用する
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
CDNその② バージョンを指定する
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
既存のプロジェクトへ導入する関係でバージョンを指定する必要があれば後者を採用すべきですが、今回のように少し使ってみる場合には前者のように最新のバージョンを使用する形で問題ないです。
(※今回も最新のバージョンを使用します。)
CDNを使ってVue.jsを触ってみよう【コピペでOK】
それでは実際にCDNを使ってVue.jsを動かしてみましょう。
VSCodeやAtomなどのテキストエディタで「index.html」ファイルを作成し、以下の内容を記載してください(※コピペで動きます)。
実装コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CDNを使ってVue.jsを始めよう</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p>
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data: {
message: "Hello!!! Vue.js!!!"
}
})
</script>
</html>
作成したファイルをそのままドラッグし、使用しているWebブラウザのタブにドロップすると、無事「Hello!!! Vue.js!!!」という文字が表示されているはずです。
このように、CDNを使用するとたった1行追加するだけでVue.jsを使用することができますので、「少しVue.jsを触ってみたい」というような方はぜひこれで色々と遊んでみてくださいね。
Vue.jsのディレクティブを触ってみましょう【コピペでOK】
さて、ここからは、実際のコードを交えながら、Vue.jsのディレクティブについてご紹介します。
ディレクティブというのは、「v-」で始まる、Vue.jsに用意されている特別な属性のことを指します。
Vue.jsでは、このディレクティブを活用してアプリケーションを構築していきますので、ぜひこの機会にそのイメージを掴んでみてください(※いずれも、先ほど作成されたindex.htmlへコピペしていただくだけで動くようになっています)。
ご紹介するディレクティブ
- v-if
- v-on
- v-for
- v-model
- v-bind
Vue.jsのディレクティブその① v-if
まずご紹介するのは、v-ifディレクティブです。
その名の通り、条件分岐を設定する際に使用するディレクティブで、以下のようにして使用します。
実装コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CDNを使ってVue.jsを始めよう</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="isErrorOccurs">エラーが発生しています。</p>
<p v-else>エラーは発生していません。</p>
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data: {
isErrorOccurs: true
}
})
</script>
</html>
上記にように、v-ifの中身がtrueの場合には設定したタグが表示され、falseの場合には非表示となります。
v-elseと組み合わせると、v-ifの中身がfalseだった場合に表示するタグも指定することができます。
試しに「isErrorOccurs」の中身をfalseに変えて遊んでみてください。
-272x300.jpg)
今回の記事は、 これからVue.jsを始めてみたいVue.jsで条件分岐を使ってみたい という方に向けた記事になっています。 なお、Vue.jsの概要や特徴については以下の記事にて詳しく解説していますので、こちら[…]
Vue.jsのディレクティブその② v-on
続いてご紹介するのは、v-onディレクティブです。
v-onディレクティブを使うと、DOMにイベントを定義することができるようになります。
実装コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CDNを使ってVue.jsを始めよう</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ currentTime }}</p>
<button v-on:click="calcCurrentTime">いま何時何分?</button>
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data: {
currentTime: "00:00"
},
methods: {
calcCurrentTime: function() {
let date = new Date();
this.currentTime = date.getHours() + ":" + date.getMinutes()
}
}
})
</script>
</html>
上記の例では、クリックイベントを定義し、ボタンをクリックするたびに現在時刻を表示するように実装しています。
Vue.jsのディレクティブその③ v-for
続いては、v-forディレクティブです。
v-forディレクティブを使用すると、配列などの要素に対して繰り返し処理を実行することができます。
実装コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CDNを使ってVue.jsを始めよう</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="station in stations" :key="station.id">
{{ station.name }}
</li>
</ul>
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data: {
stations: [
{ id: 1, name: "渋谷駅" },
{ id: 2, name: "新宿駅" },
{ id: 3, name: "代官山駅" },
{ id: 4, name: "五反田駅" },
{ id: 5, name: "原宿駅" }
]
}
})
</script>
</html>
なお、v-forを使用する際には、併せてkey属性も指定する必要がありますので、この点は覚えておきましょう。
というお悩みを解決する記事になっています。
-272x300.jpg)
今回の記事は、 これからVue.jsを始めてみたいVue.jsで繰り返し処理を実装してみたい という方に向けた記事になっています。 なお、Vue.jsの概要や特徴については以下の記事にて詳しく解説していますので、[…]
Vue.jsのディレクティブその④ v-model
最後にご紹介するのは、v-modelディレクティブです。
v-modelディレクティブを使用すると、データの双方向バインディングを簡単に実現することができます(※入力した値がすぐに画面上に反映されるイメージです)。
実装コード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CDNを使ってVue.jsを始めよう</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="text">入力値は {{ text }} です</p>
<input v-model="text">
</div>
</body>
<script>
let app = new Vue({
el: "#app",
data: {
text: ''
}
})
</script>
</html>
上記をコピペで試していただくと、フォームに書き込んだ値がすぐさまその上に表示されるのを体験いただけたかと思います。
というお悩みを解決する記事になっています。
-272x300.jpg)
今回の記事は、 これからVue.jsを始めてみたいv-modelの使い方が知りたい双方向バインディングを使ってみたい という方に向けた記事になっています。 なお、Vue.jsの概要や特徴については以下の記事[…]
最後に
さて、ここまでCDNを使ったVue.jsを始め方についてご紹介してきましたがいかがでしたか?
CDNを使用すると、「こんなに簡単に始められるのか」と驚かれた方も少なくないと思います。
実際に触りながらでないと分かりづらいこともあるかと思いますので、今回ご紹介した内容を元に色々とVue.jsで遊んでみてくださいね。
このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。