はじめに

最近、フロントエンド開発の世界では、React、Angular、Vue.jsが人気の選択肢として挙げられます。中でも、Vue.jsは「軽量で使いやすい」「学習コストが低い」という特徴を持ち、開発者の間で急速に人気を集めています。本記事では、Vue.jsの基礎から実践的な使い方までを紹介し、初心者が実際にプロジェクトに取り組みやすいようにサポートします。

この記事を読むことで、Vue.jsの基本概念、構文、実践的な使い方を理解できることを目指します。

Vue.jsとは？

Vue.jsは、ユーザーインターフェース（UI）を構築するための軽量で直感的なJavaScriptフレームワークです。シンプルな設計が特徴で、他のフレームワークに比べて学習曲線が緩やかで、すぐに始められる点が魅力です。

Vue.jsの主な特徴

データバインディング: Vue.jsは、データの変更をリアルタイムでUIに反映させるデータバインディング機能を持っています。これにより、開発者はDOMを手動で操作する必要がなく、簡単に動的なUIを作成できます。
コンポーネントベース: Vue.jsはコンポーネント指向で、UIを小さな部品（コンポーネント）に分けて再利用することができます。
双方向データバインディング: Vue.jsの強力な機能で、ユーザーの入力とデータを自動的に同期させることができます。
軽量: Vue.jsは非常に軽量で、必要なときに必要な機能だけを使うことができ、パフォーマンスも良好です。

Vue.jsの基本概念

Vue.jsを使うためには、いくつかの基本的な概念を理解する必要があります。以下で、主要な概念について詳しく解説します。

1. データバインディング

Vue.jsでは、HTMLとJavaScriptのデータを簡単に結びつけることができます。データをVueインスタンスに保持し、HTMLに動的に表示することができます。

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

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;
  
  createApp({
    data() {
      return {
        message: 'Hello, Vue.js!'
      };
    }
  }).mount('#app');
</script>

上記のコードでは、messageというデータがHTMLの<h1>タグ内に表示されます。Vue.jsが自動的にデータとDOMを同期させるため、データを変更するとUIが自動的に更新されます。

2. イベントハンドリング

Vue.jsでは、ユーザーのアクション（クリックや入力）を簡単に処理することができます。v-onディレクティブを使ってイベントリスナーを追加します。

v-on（省略形 @）を使ってイベントを処理できます。

<div id="app">
  <button v-on:click="changeMessage">クリックしてメッセージを変更</button>
  <!-- <button @click="changeMessage">クリックしてメッセージを変更</button> -->
  <p>{{ message }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;
  
  createApp({
    data() {
      return {
        message: '初期メッセージ'
      };
    },
    methods: {
      changeMessage() {
        this.message = '新しいメッセージ';
      }
    }
  }).mount('#app');
</script>

この例では、ボタンをクリックするとchangeMessageメソッドが実行され、messageが変更されます。それにより、表示されるメッセージが変わります。

3. 条件付きレンダリング

Vue.jsはv-ifディレクティブを使って、特定の条件に基づいてHTML要素を表示または非表示にできます。

<div id="app">
  <p v-if="isVisible">このテキストは表示されます</p>
  <button @click="toggleVisibility">表示/非表示</button>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        isVisible: true
      };
    },
    methods: {
      toggleVisibility() {
        this.isVisible = !this.isVisible;
      }
    }
  }).mount('#app');
</script>

v-if="isVisible"は、isVisibleがtrueのときにだけ要素を表示します。ボタンをクリックすることで、isVisibleが切り替わり、要素の表示・非表示が変更されます。

4. コンポーネント

Vue.jsでは、アプリケーションを再利用可能な「コンポーネント」に分割することができます。これにより、コードの再利用性が高まり、保守がしやすくなります。

<div id="app">
  <greeting></greeting>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  const Greeting = {
    template: '<p>こんにちは、Vue.js!</p>'
  };

  const app = createApp({});
  app.component('greeting', Greeting);
  app.mount('#app');
</script>

上記のコードでは、greetingという名前のコンポーネントを作成し、<greeting></greeting>タグでそのコンポーネントをHTML内に埋め込んでいます。

Vue.jsの実践的な使い方

ここまでで、Vue.jsの基本的な使い方を紹介しました。次は、実際にVue.jsを使ってシンプルなアプリケーションを作成する方法を紹介します。

1. ユーザー入力を受け取るフォーム

Vue.jsを使って、ユーザーの入力をフォームから受け取る方法を見てみましょう。

<div id="app">
  <input v-model="username" placeholder="ユーザー名を入力">
  <p>こんにちは、{{ username }}さん！</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  createApp({
    data() {
      return {
        username: ''
      };
    }
  }).mount('#app');
</script>

ここでは、v-modelを使用して、入力欄の値をusernameにバインディングしています。ユーザーが入力するたびにusernameの値がリアルタイムで更新され、その内容が下の<p>タグに表示されます。

2. コンポーネントの使い方

複数のコンポーネントを使って、より複雑なUIを作成する方法も見てみましょう。

<div id="app">
  <user-card :user="user"></user-card>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;

  const UserCard = {
    props: ['user'],
    template: `
      <div>
        <h3>{{ user.name }}</h3>
        <p>{{ user.email }}</p>
      </div>
    `
  };

  const app = createApp({
    data() {
      return {
        user: {
          name: '山田太郎',
          email: 'taro@example.com'
        }
      };
    }
  });

  app.component('user-card', UserCard);
  app.mount('#app');
</script>

この例では、user-cardというコンポーネントを作成し、親コンポーネントからuserというデータを渡しています。propsを使って親からデータを受け取り、表示しています。

まとめ

Vue.jsは、初心者にとって学びやすく、シンプルな構文と強力な機能を兼ね備えています。この記事で紹介した基本的な概念を理解すれば、すぐにVue.jsを使ったプロジェクトを始めることができます。

さらに進んだ機能としては、Vue Router（ページ遷移）、Pinia（状態管理）などがあり、これらを使うことで大規模なSPAを効率的に作成できます。

Vue.jsプロジェクトを本格的に始める場合は、npm create vue@latest を使用すると、開発環境を簡単に構築できます。

関連リンク

参考本