【Vue.js】Hello World（3種類のインポート方法を比較）

## この記事の内容
Vue.jsを利用するために必要な雛形のコードを、3種類のインポート方法(CDN形式)で紹介します。
いずれの方法もインストール不要で、HTMLファイルもしくはJSファイルにコピペするだけでVue.jsを始められます。

また、Vue.jsでカウントアップするWebアプリのコード例も合わせて紹介します。


## Vue.jsとは

[Vue.js](https://ja.vuejs.org/) はユーザーインターフェースの構築のための JavaScript フレームワークです。
ユーザーのブラウザ操作に応じて、表示を変化する仕組みを簡単に実装することが可能です。

![vuejs.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469687/d66f7fd7-f30b-4d45-0dca-b5077422c064.jpeg)

他に似たようなフレームワークとして、[React](https://ja.legacy.reactjs.org/)、[jQuery](https://jquery.com/)、[Angular](https://angular.jp/) などがあります。



## 導入方法

Vue.jsを読み込むコードは、以下の3箇所で記述できます。

① HTMLファイルの\<head\>タグ
② HTMLファイルの\<body\>タグ
③ JSファイルでimport

それぞれコードが異なるので順に紹介します。

---

### ① HTMLファイルの\<head\>タグ

\<head\>タグ内で、jsファイルを読み込む方法です

```html:index.html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
```

- カウントアップのコード例
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="bGmXmRW" data-editable="true" data-user="watsony" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/watsony/pen/bGmXmRW">
  【Vue.js 3 】Hello World (HTML&lt;script&gt;)</a> by Watson (<a href="https://codepen.io/watsony">@watsony</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

### ② HTMLファイルの\<body\>タグ

\<body\>タグ内の最後で、jsファイルを読み込む方法です

```html:index.html
<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
</script>
```

- カウントアップのコード例
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="eYPqPMP" data-editable="true" data-user="watsony" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/watsony/pen/eYPqPMP">
  【Vue.js 3 】Hello World @ESmodules (HTML)</a> by Watson (<a href="https://codepen.io/watsony">@watsony</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

---

### ③ JSファイルでimport

jsファイルで読み込む方法です

```js:index.js
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
```

- カウントアップのコード例
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="html,result" data-slug-hash="gOBVBQm" data-editable="true" data-user="watsony" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/watsony/pen/gOBVBQm">
  【Vue.js 3 】Hello World @ESmodules (HTML+JS)</a> by Watson (<a href="https://codepen.io/watsony">@watsony</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>


---

いずれもVue.jsの読み込み先は [unpkg.com](https://www.unpkg.com/) で記述しましたが、[jsdelivr](https://www.jsdelivr.com/) など他のCDNサービスも選択可能です。

一方で、自身の環境にVue.jsをダウンロードして使用する場合は、URLの代わりにVue.jsのファイルパスに置き換えます。

## まとめ

Vue.jsをCDN形式で読み込んで利用する方法を紹介しました。

公式サイトでも同じ内容を確認できますが、コードの全体像がわかりにくかったため、初心者でも簡単に試せるようにまとめました。