Vue.jsをCDNで始める方法【コピペで遊べるVue.jsの実装例もあります】

みなさんこんにちは!

今回の記事は、

悩みを抱えた人
・CDNを使ってVue.jsを触ってみたいな〜
・Vue.jsを使うとどんなことができるんだろう?

というお悩みを解決する記事になっています。


この記事の内容

・CDNを使ってVue.jsを始める方法
・CDNを使ったVue.jsの実装例
・Vue.jsのディレクティブを触ってみよう【コピペでOK】


傍楽たろう
なお、Vue.jsの概要や特徴については以下の記事にて詳しく解説していますので、こちらもぜひご覧くださいね。

おすすめ記事

今回の記事は、 最近よく聞くけど、Vue.jsってなに?これからVue.jsを始めてみたいVue.jsの特徴やメリットが知りたい というお悩みをお持ちの方に向けた記事になっています。 ReactやAngular、そしてV[…]

Vue.jsロゴ

レバテックフリーランス … 業界最大級の案件数業界トップクラスの高単価報酬を誇る最大手のサービスです。実績豊富なコーディネーターが丁寧な対応をしてくれるため、案件の無理な提案はありません。フリーランスで生きていくためにはまず登録しておきましょう。
MidWorks … フリーランス賠償責任保障生命保険の折半など、フリーランスでありながらも正社員並みの保障を受けられるのが特徴です。また、経験豊富なキャリアコンサルタントによる手厚いサポートも受けられるため、安定したフリーランス生活を送りたい方には特におすすめのサービスです。
ポテパンフリーランス … IT業界・技術に詳しいコンサルタントが担当してくれるため、こちらの要望をきちんと理解した上で案件を紹介してくれます。また、案件情報のみならず、フリーランスのイロハについても教えてくれるため、フリーランスとして初めて活動される方には特におすすめのサービスです。

レバテックキャリア … ITエンジニアが利用したい転職エージェントNo.1にも選ばれており、年収600万円以上のハイクラス求人を5,000件以上も保有しています。エンジニアが転職を考えた時にまず初めに登録しておくべきサービスです。
Tech Stars Agent … Tech Stars Agentでは、担当エージェントが全員エンジニア出身のため、スキルやキャリアを見据えたきめ細かな転職支援が受けられます。運営元の株式会社Branding Engineerは、独立支援サービス「MidWorks」も展開しているため、独立を視野に入れたサポートも受けられます
転職ドラフト … 年収UP率93.8%/平均年収UP額126万円と圧倒的な年収UP率を誇るイベント型のエンジニア向け 転職サービスです。毎月1回開催され、厳選された優良IT/Web系企業約150社からダイレクトスカウトを受け取ることができます。年収アップを目指す方は登録必須です。

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に変えて遊んでみてください。


傍楽たろう
v-ifディレクティブについては、こちらの記事でも詳しく解説していますので、興味のある方はぜひこちらもご覧くださね。

あわせて読みたい

今回の記事は、 これから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属性も指定する必要がありますので、この点は覚えておきましょう。

というお悩みを解決する記事になっています。


傍楽たろう
v-forディレクティブについては、こちらの記事でも詳しく解説していますので、興味のある方はぜひこちらもご覧くださね。

あわせて読みたい

今回の記事は、 これから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>

上記をコピペで試していただくと、フォームに書き込んだ値がすぐさまその上に表示されるのを体験いただけたかと思います。

というお悩みを解決する記事になっています。


傍楽たろう
v-modelディレクティブについては、こちらの記事でも詳しく解説していますので、興味のある方はぜひこちらもご覧くださね。

あわせて読みたい

今回の記事は、 これからVue.jsを始めてみたいv-modelの使い方が知りたい双方向バインディングを使ってみたい という方に向けた記事になっています。 なお、Vue.jsの概要や特徴については以下の記事[…]

プログラミングイメージ

お仕事の途中ですが、少し一休みして、転職独立について考えてみませんか🙌?

現役エンジニアが選ぶおすすめの転職エージェント11選【成功談・失敗談もあります】

レバテックフリーランスの評判ってどう?【現役エンジニアが徹底解説します】

MidWorks(ミッドワークス)の評判ってどう?【現役エンジニアが徹底解説します】

日々の業務に追われて自分を見失わないよう、
定期的にキャリアを振り返るようにしておきましょう🤲

最後に

さて、ここまでCDNを使ったVue.jsを始め方についてご紹介してきましたがいかがでしたか?

CDNを使用すると、「こんなに簡単に始められるのか」と驚かれた方も少なくないと思います。

実際に触りながらでないと分かりづらいこともあるかと思いますので、今回ご紹介した内容を元に色々とVue.jsで遊んでみてくださいね。

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。