PR

Vue.js 3で始めるフロントエンド開発【セットアップからルーティングまで】

Vue.js 3で始めるフロントエンド開発【セットアップからルーティングまで】 Vue.js
記事内に広告が含まれています。

Vue.jsは、シンプルで効率的なフロントエンド開発を実現するJavaScriptフレームワークです。

この記事では、Vue.js 3でのフロントエンド開発の始め方を解説し、セットアップからコンポーネントの使い方データバインディング、さらにルーティングの実装方法まで、実装方法をご紹介します。

今回はWindows環境を前提としていますが、他のOSでもほぼ同様の手順です。

Vue.jsの基本的セットアップ

まずは、Vue.js 3を使って開発を始めるための準備をしていきます。

1. Node.jsのインストール

Vue.jsを使用するには、まずNode.jsをインストールする必要があります。

Node.jsの公式サイト(https://nodejs.org)から推奨バージョンをダウンロードし、インストールします。

2. Vue CLIのインストール

次に、Vue CLIをインストールします。

Vue CLIは、Vue.jsの開発環境を構築するためのコマンドラインツールで、これを使うとVue.jsのプロジェクト作成が簡単になります。

以下のコマンドを、コマンドプロンプトまたはターミナルで実行します。

npm install -g @vue/cli
3. Vueプロジェクトの新規作成

以下の手順で、新しいプロジェクトを作成していきます。

1.プロジェクトを作成したいディレクトリに移動します

ここではworkspaceディレクトリにプロジェクトを作成します。

cd workspace

2.新規プロジェクトを作成します

vue create my-vue-app

上記コマンドを実行すると、プリセットの選択が表示されます。

こだわりがない場合は、デフォルトの設定(Default [Vue 3] )を選択しましょう。

3.プロジェクト作成が完了したら、プロジェクトディレクトリに移動します。

cd my-vue-app

コンポーネントの確認

Vue.jsでは、再利用可能なコンポーネントを作成することができます。

コンポーネントとは、Vue.jsにおけるビューの最小単位であり、HTML、CSS、JavaScriptのコードを組み合わせたものです。


作成されたプロジェクトには、すでにサンプルコンポーネントが含まれています。

以下の手順でvue create my-vue-appコマンドで作成されたHelloWorldコンポーネントを確認します

1. HelloWorldコンポーネントの確認

src/components/HelloWorld.vueファイルが作成されていることを確認します。

dir src/components

上記のコマンドにより、src/componentsディレクトリ内のファイル一覧が表示されます。
dirはWindowsコマンドなので、LinuxやMacOSの場合はlsコマンド等で確認してください。)

HelloWorld.vueが存在していれば、リストに表示されます。

プロジェクトのフォルダを開き、src/components/HelloWorld.vueというファイルが生成されていることを確認します。

2. コードの確認

続いて、HelloWorldコンポーネントのコードを確認してみましょう。

VSCodeなどのエディタでHelloWorld.vueを開くと、以下のようなコードが記述されています。

<template>内にHTMLが記述されており、<script>ではコンポーネントのデータやロジックを定義しています。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>
      For a guide and recipes on how to configure / customize this project,<br>
      check out the
      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
    </p>
    <h3>Installed CLI Plugins</h3>
    <ul>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
    </ul>
    <h3>Essential Links</h3>
    <ul>
      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
    </ul>
    <h3>Ecosystem</h3>
    <ul>
      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
3. ウェブブラウザでの確認

my-vue-appディレクトリで、以下のコマンドを実行して開発サーバーを起動します。

npm run serve

起動を確認できたら、ウェブブラウザでhttp://localhost:8080にアクセスして、正常に動作することを確認します。

データバインディングの実装

Vue.jsでは、データバインディングを使用してデータとビュー(HTML要素)を結び付けることができます。

ここでは、実際にでデータバインディングを実装してみます。

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

VSCodeなどのエディタでHelloWorld.vueを開き、以下のように編集します。

今回は、データバインディングを使った簡単なメッセージの変更機能を実装してみます。

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">メッセージを変更する</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "こんにちは、Vue!"
    };
  },
  methods: {
    changeMessage() {
      this.message = "Hello, Vue!";
    }
  }
};
</script>

<style scoped>
h1 {
  color: blue;
}
</style>
2. 実行確認

my-vue-appディレクトリで、以下のコマンドを実行して開発サーバーを起動します。

npm run serve

ウェブブラウザでhttp://localhost:8080にアクセスします。


すると、ウェブブラウザに「こんにちは、Vue!」という文字と、「メッセージを変更する」というボタンが表示されます。

表示されている「メッセージを変更する」ボタンをクリックすると、「こんにちは、Vue!」という文字が「Hello, Vue!」に変更されます。

これにより、データバインディングが正常に動作することを確認できます。

3. コードの解説

このコードでは、messageというデータと<h1>タグ内のテキストをデータバインディングしています。

初期状態ではmessageに「こんにちは、Vue!」が設定されており、これがそのまま表示されます。

ボタンをクリックするとchangeMessageメソッドが呼ばれ、messageの内容が「Hello, Vue!」に変更されることで、表示されるテキストも変わります。

テンプレート部分

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">メッセージを変更する</button>
  </div>
</template>
  • {{ message }}:これはVue.jsのデータバインディングの構文です。
    messageというデータが動的にHTMLにバインドされ、値が自動的に反映されます。
  • @click="changeMessage":Vue.jsのイベントディレクティブです。
    ボタンをクリックした際にchangeMessageメソッドを呼び出します。



スクリプト部分

<script>
export default {
  data() {
    return {
      message: "こんにちは、Vue!"
    };
  },
  methods: {
    changeMessage() {
      this.message = "Hello, Vue!";
    }
  }
};
</script>
  • data:Vueコンポーネントの状態を保持するオブジェクトです。
    今回はmessageに初期値「こんにちは、Vue!」を設定しています。
  • methods:Vueコンポーネントのメソッドを定義する場所です。
    ここではchangeMessageメソッドが定義されています。
    このメソッドは、ボタンがクリックされたときに実行され、messageを「Hello, Vue!」に変更します。


このように、Vue.jsのデータバインディングを使うと、データの状態変化に応じて自動的にビューが更新されます。

これにより、ユーザーの操作に対して動的にUIが変化する柔軟なインターフェースを作成することができます。

ルーティングの実装方法

Vue Routerを使うと、Vue.jsでページ遷移を管理することができます。

ここでも、Vue.jsでページ遷移を管理するルーティング機能を実装してみます。

1. Vue Routerのインストール

my-vue-appディレクトリで、以下のコマンドを実行してVue Routerをインストールします。

npm install vue-router
2. ルーターファイルの作成

src/router/index.jsファイルを作成し、以下の内容を追加します。

mkdir src/router
touch src/router/index.js

index.jsファイルを以下のように編集します。

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About
  }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

そして、エディタでsrc/main.jsを開き、以下のように編集します。

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index.js'

const app = createApp(App)
app.use(router)
app.mount("#app")

これにより、Vueアプリケーション内でVue Routerの機能を利用できるようになります。

3. ビューファイルの作成

コマンドプロンプトでsrc/viewsディレクトリを作成し、Home.vueAbout.vueというファイルを作成します。

mkdir src/views
touch src/views/Home.vue
touch src/views/About.vue

Home.vueAbout.vueファイルをそれぞれ以下のように編集します。

Home.vue

<template>
  <div>
    <h1>Home</h1>
    <p>Welcome to the home page!</p>
  </div>
</template>


About.vue

<template>
  <div>
    <h1>About</h1>
    <p>This is the about page.</p>
  </div>
</template>
4. Appコンポーネントの編集

エディタでsrc/App.vueを開き、ルーターリンクを追加します。

<template>
  <div>
    <router-view></router-view>
    <li><router-link to="/">Home</router-link></li>
    <li><router-link to="/about">About</router-link></li>
  </div>
</template>
5. ルーティングの動作確認

my-vue-appディレクトリで、以下のコマンドを実行して開発サーバーを起動します。

npm run serve

ウェブブラウザでhttp://localhost:8080にアクセスし、「Home Welcome to the home page!」という文字と、「Home」「About」というリンクが表示されていることを確認します。

「About」をクリックすると、「About」ページへの遷移が行われます。


これにより、ルーティングが正常に動作することを確認できます。

Component name “Home” should always be multi-word

Component name “About” should always be multi-word
というエラーが出た場合には、プロジェクトディレクトリ直下にあるpackage.jsonのrulesに以下のように追加しましょう。

"rules": {
   "vue/multi-word-component-names": 0
}

まとめ

Vue.js 3でのフロントエンド開発の始め方を解説しました。

基本的なセットアップ、コンポーネントの作成、データバインディングの実装、ルーティングの追加などをカバーしています。

ご自身の環境でもぜひ試してみてください!

さらに高度な機能やその他開発手法についてはVue.jsの公式ドキュメントやチュートリアルの参照をお勧めします。


Vue.jsでの「表の作り方」や「コンポーネント間のデータ受け渡し」について知りたい方はこちらもご覧ください。

コメント

タイトルとURLをコピーしました