Vue.js

外観

目次

クイックスタート ​

オンラインで Vue を試す ​

  • Vue をすぐに体験するには、Playground で直接試すことができます。

  • もし、ビルドのステップのないプレーンな HTML のセットアップを好む場合は、この JSFiddle を出発点として使用できます。

  • Node.js とビルドツールの概念に既に慣れている場合は、StackBlitz を使ってブラウザー内で完全なビルドセットアップを試すことも可能です。

Vue アプリケーションの作成 ​

前提条件

  • コマンドラインに慣れている
  • Node.js のバージョン 18.3 以上をインストールしている

このセクションでは、ローカルマシン上で Vue のシングルページアプリケーションを生成する方法を紹介します。作成されたプロジェクトは、Vite に基づいたビルド設定を使用し、Vue の単一ファイルコンポーネント（SFC）を使用できるようにします。

Node.js の最新バージョンがインストールされていること、現在の作業ディレクトリがプロジェクトを作成する予定の場所であることを確認し、コマンドラインで次のコマンドを（$ 記号なしで）実行します:

npm
pnpm
yarn
bun
sh
$ npm create vue@latest

このコマンドは、公式の Vue プロジェクトスキャフォールディングツールである create-vue をインストールして実行します。TypeScript やテストのサポートなど、いくつかのオプション機能がプロンプトに表示されます:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Nightwatch / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

もしオプションについてはっきりとわからないなら、今のところ単純にエンターを押して No を選んでください。プロジェクトが作成されたら、指示に従って依存関係をインストールし開発サーバーを起動しましょう:

npm
pnpm
yarn
bun
sh
$ cd <your-project-name>
$ npm install
$ npm run dev

あなたの初めての Vue プロジェクトが今実行されているはずです！　なお、生成されたプロジェクトのサンプルコンポーネントは、Options API ではなく、Composition API と <script setup> で書かれていることに注意してください。いくつか追加のヒントをどうぞ:

あなたのアプリをプロダクション環境に出す準備ができたら、以下を実行してください:

npm
pnpm
yarn
bun
sh
$ npm run build

これであなたのアプリのプロダクション向けビルドがプロジェクトの ./dist ディレクトリーに作成されます。プロダクション環境への出荷についてさらに学ぶには プロダクション環境への配信 を確認してください。

次のステップ ＞

CDN の Vue を使用する ​

script タグで CDN から直接 Vue を使用できます:

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

ここでは unpkg を使っていますが、例えば jsdelivr や cdnjs など、npm パッケージを提供する CDN なら何でも使えます。もちろん、このファイルをダウンロードして、自分で配信することもできます。

CDN から Vue を使用する場合は「ビルドステップ」は必要ありません。これによりセットアップが非常にシンプルになり、静的な HTML を拡張したり、バックエンドのフレームワークと統合したりするのに適しています。ただし、単一ファイルコンポーネント（SFC）の構文は使用できません。

グローバルビルドの使用 ​

上記のリンクは、Vue のグローバルビルドを読み込んでいます。これは、すべてのトップレベル API がグローバルな Vue オブジェクトのプロパティとして公開されています。以下は、グローバルビルドを使用した完全な例です:

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

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

CodePen のデモ >

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

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

CodePen のデモ >

TIP

このガイドでは、Composition API の多くの例で <script setup> という構文を使用しており、これにはビルド ツールが必要です。ビルドステップなしで Composition API を使用する場合は、setup() オプション の使い方を参照してください。

ES モジュール ビルドの使用 ​

このドキュメントの残りの部分では、主に ES モジュール構文を使用します。最近のブラウザーは ES モジュールをネイティブでサポートしているので、次のようにネイティブの ES モジュールで CDN から Vue を使用できます:

html
<div id="app">{{ message }}</div>

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

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
html
<div id="app">{{ message }}</div>

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

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

<script type="module"> を使用していることと、インポートされる CDN の URL が、（ひとつ前の例とは違って）Vue の ES モジュール ビルド を指していることに注意してください。

CodePen のデモ >

CodePen のデモ >

インポートマップの有効化 ​

上記の例では、完全な CDN URL からインポートしていますが、他のドキュメントでは、次のようなコードが表示されます:

js
import { createApp } from 'vue'

インポートマップを使って、vue のインポートの場所をブラウザーに教えることができます:

html
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

CodePen のデモ >

html
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

CodePen のデモ >

他の依存関係のエントリーをインポートマップに追加することもできますが、使用するライブラリーの ES モジュールのバージョンを指していることを確認してください。

インポートマップのブラウザーサポート

インポートマップは比較的新しいブラウザー機能です。必ずサポート範囲内のブラウザーを使用してください。特に、Safari 16.4+ でのみサポートされています。

プロダクション使用の注意

ここまでの例では、Vue の開発ビルドを使用しています。プロダクションで CDN から Vue を使用する場合は、プロダクション環境への配信を確認してください。

ビルドシステムなしで Vue を使用することは可能ですが、別のアプローチとして、vuejs/petite-vue を使用することも検討してください。petite-vue は、jquery/jquery（過去）やalpinejs/alpine（現在）が使用されるようなコンテキストに適しています。

モジュールの分割 ​

ガイドをさらに深く潜っていくと、管理しやすくするためにコードを個別の JavaScript ファイルに分割する必要がでるかもしれません。例えば:

html
<!-- index.html -->
<div id="app"></div>

<script type="module">
  import { createApp } from 'vue'
  import MyComponent from './my-component.js'

  createApp(MyComponent).mount('#app')
</script>
js
// my-component.js
export default {
  data() {
    return { count: 0 }
  },
  template: `<div>Count is: {{ count }}</div>`
}
js
// my-component.js
import { ref } from 'vue'
export default {
  setup() {
    const count = ref(0)
    return { count }
  },
  template: `<div>Count is: {{ count }}</div>`
}

ES モジュールは file:// プロトコルでは動作しないため、上記の index.html をブラウザーで直接開くとエラーが発生します。これは、ローカルファイルを開くときにブラウザーが使用するプロトコルです。

セキュリティー上の理由から、ES モジュールは http:// プロトコルでのみ動作できます。これはブラウザがウェブ上でページを開くときに使用するプロトコルです。ES モジュールをローカルマシンで動作させるためには、ローカルの HTTP サーバーを使って http:// プロトコルで index.html を配信する必要があります。

ローカル HTTP サーバーを起動するには、まず Node.js がインストールされていることを確認し、HTML ファイルがあるのと同じディレクトリでコマンドラインから npx serve を実行します。正しい MIME タイプで静的ファイルを配信できる他の HTTP サーバーを使用することもできます。

インポートされたコンポーネントのテンプレートが JavaScript 文字列としてインライン化されていることに気づいたかもしれません。VS Code を使っている場合は es6-string-html 拡張機能をインストールして、文字列の前に /*html*/ というコメントをつけることでシンタックスハイライトさせられます。

次のステップ ​

あなたが はじめに を跳ばしたなら、残りのドキュメントに移る前にこれを読むことを強く推奨します。

ガイドを続ける

ガイドはこのフレームワークのあらゆる側面について詳しく説明しています。

チュートリアルを試す

手を動かしながら学びたい人々のために。

例を見てみる

コア機能や一般的な UI タスクの例を探索する。

このページを GitHub で編集