みなさんこんにちは！
今回の記事は、
悩みを抱えた人・Vue.jsを使うとどんなことができるんだろう？
というお悩みを解決する記事になっています。
・CDNを使ってVue.jsを始める方法
・CDNを使ったVue.jsの実装例
・Vue.jsのディレクティブを触ってみよう【コピペでOK】
傍楽たろう今回の記事は、 最近よく聞くけど、Vue.jsってなに？これからVue.jsを始めてみたいVue.jsの特徴やメリットが知りたい というお悩みをお持ちの方に向けた記事になっています。 ReactやAngular、そしてV[…]
フリーランス案件を探すならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社Hajimari |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約28,000件 | 約3,300件 | 約4,200件 |
| 平均単価 | 68.2万円 | 72.2万円 | – |
| 最高月収 | 145万円 | 200万円 | 176万円 |
| 特徴 | ・高単価な案件が多い ・福利厚生サービスが受けられる ・首都圏の案件が中心 | ・給与保証制度で安定した収入を得られる ・税務処理のサポートあり ・マージン率は実質20% | ・週2/週3の案件が多い ・在宅/リモート案件が多い ・スタートアップ企業やベンチャー企業の案件が多い |
| 紹介企業例 | ・株式会社Gunosy ・株式会社バンダイナムコホールディングス ・株式会社ユーザベース | ・Sansan株式会社 ・株式会社一休 ・株式会社FiNC Technologies など | ・クックパッド株式会社 ・株式会社カオナビ ・株式会社Kaizen Platform など |
| 説明記事 | |||
| 公式サイト |
転職を考えているならこのエージェント！
 |  |  | |
|---|---|---|---|
| 運営会社 | レバテック株式会社 | 株式会社Branding Engineer | 株式会社リブセンス |
| 対応エリア | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・愛知・福岡 | 東京・神奈川・埼玉・千葉 大阪・兵庫・京都・奈良・和歌山・滋賀 | 東京・神奈川・埼玉・千葉 茨城・大阪・兵庫・福岡 |
| 案件数 | 約13,000件 | 約800件 ※非公開求人が多い | – ※ドラフト制のため、対象外 |
| 年齢層 | 20代：◎ 30代：〇 40代：〇 | 20代：〇 30代：〇 40代：△ | 20代：〇 30代：〇 40代：〇 |
| 特徴 | ・エンジニア・デザイナーを専門としている ・カウンセリングに時間をかける ・年収アップ率60％の実績 | ・IT/Web/ゲーム業界専門の転職エージェント ・業界経験者がキャリアコンサルタントを務める ・丁寧なカウンセリングで入社後の離職率1%以下を実現 | ・ドラフト制による採用を叶える特殊なサービス ・スキル・経験重視で評価してもらえる ・他エンジニアの入札結果を見ることで 自分の市場価値が分かる |
| 紹介企業例 | ・サイボウズ株式会社 ・株式会社サイバーエージェント ・Chatwork株式会社 など | ・DMM.com ・Money Forward ・SmartHR など | ・メルカリ ・ZOZOテクノロジーズ ・freee など |
| 説明記事 | |||
| 公式サイト |
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に変えて遊んでみてください。
傍楽たろう今回の記事は、 これから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属性も指定する必要がありますので、この点は覚えておきましょう。
というお悩みを解決する記事になっています。
傍楽たろう今回の記事は、 これから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>上記をコピペで試していただくと、フォームに書き込んだ値がすぐさまその上に表示されるのを体験いただけたかと思います。
というお悩みを解決する記事になっています。
傍楽たろう今回の記事は、 これからVue.jsを始めてみたいv-modelの使い方が知りたい双方向バインディングを使ってみたい という方に向けた記事になっています。 なお、Vue.jsの概要や特徴については以下の記事[…]
最後に
さて、ここまでCDNを使ったVue.jsを始め方についてご紹介してきましたがいかがでしたか？
CDNを使用すると、「こんなに簡単に始められるのか」と驚かれた方も少なくないと思います。
実際に触りながらでないと分かりづらいこともあるかと思いますので、今回ご紹介した内容を元に色々とVue.jsで遊んでみてくださいね。
このブログを通じて少しでも「傍（はた）を楽（らく）にする」ことができていれば嬉しく思います。
最後まで読んで頂きありがとうございました。
