コンテンツにスキップ

JavaScript/Vue.js

リンクを追加
出典: フリー教科書『ウィキブックス（Wikibooks）』

Vue.jsは、Web開発者にとって非常に人気のあるJavaScriptフレームワークです。Vue.jsは、MVVMパターン（Model-View-ViewModel）をベースにしています。このパターンは、データバインディングと依存性注入に焦点を当てています。

Vue.jsの主な機能には、次のようなものがあります。

  1. テンプレート構文：Vue.jsのテンプレート構文は、HTMLライクな構文で、Vue.jsのディレクティブを含めることができます。
  2. コンポーネントシステム：Vue.jsのコンポーネントシステムは、再利用可能なコードを作成するための優れた方法です。
  3. リアクティブデータバインディング：Vue.jsのリアクティブデータバインディングは、データとビューの同期を維持するための重要な機能です。
  4. ライフサイクルフック：Vue.jsのライフサイクルフックは、コンポーネントのインスタンスが作成、マウント、アップデート、破棄されるときに呼び出されるメソッドです。

Vue.jsを使用するには、まずVue.jsライブラリをインポートする必要があります。Vue.jsを使用するために必要な最小限のファイルは、vue.jsです。

Vue.jsの基本的な使い方を見ていきましょう。Vue.jsを使用して、最初のVueアプリケーションを作成してみましょう。

まず、HTMLファイルのheadタグ内に、Vue.jsライブラリをインポートします。 

 <script src="https://cdn.jsdelivr.net/npm/vue"></script>

次に、Vue.jsアプリケーションの起点となる、div要素を作成します。 

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

ここでは、idが「app」のdiv要素を作成しています。この要素内に、テンプレート:Messageというテキストを表示するように指示しています。 次に、JavaScriptファイル内に、Vue.jsのインスタンスを作成します。 

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

ここでは、idが「app」のdiv要素に、Vue.jsのインスタンスをマウントしています。また、このインスタンス内に、messageプロパティを定義しています。messageプロパティの初期値は「Hello Vue!」です。 最後に、Vue.jsインスタンスを作成したJavaScriptファイルをHTMLファイルのbodyタグ内でインポートします。 

<script src="path/to/your/script.js"></script>


これで、最初のVue.jsアプリケーションが完成しました。ブラウザでHTMLファイルを開いて、テンプレート:Messageが「Hello Vue!」に置き換わっていることを確認できます。

このように、Vue.jsを使用することで、シンプルで使いやすいWebアプリケーションを簡単に作成できます。 Vue.jsは、ReactやAngularなどの他のフレームワークと比較しても、学習コストが低く、柔軟性があります。 Web開発者にとって、Vue.jsは必須のツールとなっています。

コード例

[編集]

こちらはVue.jsを使用した基本的なページの例です。Vue.jsの機能を活用して、HTML, CSS, JavaScriptをシームレスに連携させることができます。 

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue.js Example</title>
	<!-- Vue.jsを読み込みます -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<style>
		/* CSSを記述します */
		.container {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100vh;
		}
		.title {
			font-size: 3rem;
			margin-bottom: 2rem;
		}
		.button {
			background-color: #4CAF50;
			color: white;
			padding: 1rem 2rem;
			border: none;
			border-radius: 5px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<!-- Vue.jsでマウントする要素を指定します -->
	<div id="app" class="container">
		<!-- Vue.jsでデータをバインドする部分を記述します -->
		<h1 class="title">{{ message }}</h1>
		<button class="button" v-on:click="reverseMessage">Reverse Message</button>
	</div>

	<!-- Vue.jsのスクリプトを記述します -->
	<script>
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello, Vue!'
			},
			methods: {
				reverseMessage: function () {
					this.message = this.message.split('').reverse().join('')
				}
			}
		})
	</script>
</body>
</html>

この例では、Vue.jsを使って以下の機能を実装しています。

  • データバインディング：{{ message }}のように{{}}で囲んだテキストを、dataオブジェクトに定義されたmessageプロパティにバインドしています。
  • イベントハンドリング：v-on:click="reverseMessage"で、ボタンがクリックされたときにreverseMessageメソッドが呼び出されるように設定しています。
  • メソッド：reverseMessageメソッドで、messageプロパティを反転させる処理を実装しています。methodsオブジェクトにメソッドを定義し、v-onディレクティブで呼び出します。

これらの機能を使って、Vue.jsを活用したページを実装することができます。

コード例２

[編集]

以下はVue.jsを使用して作成した、簡単なTo-Doリストアプリのコード例です。このアプリは、ユーザーが追加したタスクを表示し、完了したタスクをマークすることができます。 

<!DOCTYPE html>
<html>
<head>
  <title>To-Do List App</title>
  <script src="https://unpkg.com/vue"></script>
</head>
<body>
  <div id="app">
    <h1>To-Do List</h1>
    <form @submit.prevent="addTask">
      <input type="text" v-model="newTask" placeholder="Add a new task...">
      <button type="submit">Add</button>
    </form>
    <ul>
      <li v-for="(task, index) in tasks" :key="index" :class="{completed: task.completed}" @click="completeTask(index)">
        {{ task.description }}
      </li>
    </ul>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        newTask: '',
        tasks: []
      },
      methods: {
        addTask: function() {
          if (this.newTask !== '') {
            this.tasks.push({
              description: this.newTask,
              completed: false
            });
            this.newTask = '';
          }
        },
        completeTask: function(index) {
          this.tasks[index].completed = !this.tasks[index].completed;
        }
      }
    });
  </script>
  <style>
    .completed {
      text-decoration: line-through;
    }
  </style>
</body>
</html>

このコードは、Vue.jsのv-modelディレクティブを使用して、フォームの入力値をnewTaskデータプロパティにバインドしています。また、v-forディレクティブを使用して、tasksデータプロパティ内の各タスクをループして、タスクの説明を表示しています。@clickディレクティブを使用して、タスクがクリックされたときにcompleteTaskメソッドを呼び出し、クリックされたタスクのcompletedプロパティをトグルします。

CSSは、完了したタスクに線を引くために使用されています。この例は非常にシンプルですが、より複雑なアプリケーションを作成するためにVue.jsを使用することができます。

"https://ja.wikibooks.org/w/index.php?title=JavaScript/Vue.js&oldid=241169" より作成