Vue.jsに触れよう2

カテゴリ: 初心者

公開日: 2024/12/17

Vue.jsは、JavaScriptフレームワークの1つとして急速に人気を得ています。

軽量で使いやすく、学習コストが低いことから、多くの開発者に選ばれています。

この記事では、Vue.jsの基本的なところから応用までを説明し、その魅力を探ります。

1. Vue.jsとは？

Vue.jsは、JavaScriptフレームワークの1つであり、特にユーザーインターフェースを構築するために設計されています。

リアクティブなデータバインディングやコンポーネントベースのアーキテクチャなど、たくさんの特徴がVue.jsの魅力です。

リアクティブは、データへの変化への反応のことです。

データバインディングとは、要素内のデータの外部表現が変更された場合、基になるデータを自動的に更新して変更を反映することです。

データやプログラムの更新を行ったときに自動で更新されることが魅力的です。

コンポーネントとは、ファイルやプログラムの構成要素のことです。

1-1. 特長

Vue.jsの最大の特徴の一つは、データとビューの同期を自動的に行うリアクティブデータバインディングです。

データが変更されると、それに連動してビューも更新されます。

<javascript>

// Vue.jsのリアクティブなデータバインディングの例
new Vue({
  data: {
    message: 'Hello, Vue.js!'
  },
  template: '<div>{{ message }}</div>'
});

これは、「’Hello, Vue.js!’」という文字列を表示させるプログラムの一部です。

1-2. コンポーネントベース

Vue.jsでは、アプリケーションを小さな部品に分割することが簡単です。

これらの部品はコンポーネントと呼ばれ、再利用性が高まります。

<javascript>

// Vue.jsのコンポーネントの例
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

これは自分でコンポーネントを作成しているプログラムの例です。このコンポーネントは、指定した文字列を表示させるコンポーネントです。

1-3. 単一ファイルコンポーネント

Vue.jsでは、HTML、CSS、JavaScriptを1つのファイルにまとめた単一ファイルコンポーネントが使えます。

Vue.jsではよく使われます。これにより、コンポーネントごとに関連するコードをひとまとめに管理できます。

<html>

<!-- Vue.jsの単一ファイルコンポーネントの例 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello, Vue.js!'
    };
  }
};
</script>

<style scoped>
/* スタイルを適用 */
</style>
```

これも、「Hello, Vue.js!」と表示させるプログラムです。

「.vue」ファイルでは、基本的にはこのような記述でコードを書きます。

2. 利点

Vue.jsの利点はたくさんありますが、以下にその一部を挙げてみます。

1.学習コストが低い

Vue.jsはシンプルで理解しやすい構文を持っており、初心者でも容易に学び始めることができます。

2.柔軟性

小規模なプロジェクトから大規模なプロジェクトまで、幅広い規模で利用できます。

3.コミュニティサポート

アクティブでサポート体制が充実したコミュニティが存在し、問題に対するサポートや情報共有が行われています。

3. 実践例

最後に、Vue.jsを使用したシンプルな実践例を紹介します。

以下のコードは、Vue.jsを使って簡単なToDoアプリを作成する例です。

<html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.js ToDo App</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>

<div id="app">
  <h1>ToDo App</h1>
  <input v-model="newTask" @keyup.enter="addTask" placeholder="Add a new task">
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      {{ task }}
      <button @click="removeTask(index)">Remove</button>
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    newTask: '',
    tasks: []
  },
  methods: {
    addTask: function() {
      if (this.newTask.trim() !== '') {
        this.tasks.push(this.newTask.trim());
        this.newTask = '';
      }
    },
    removeTask: function(index) {
      this.tasks.splice(index, 1);
    }
  }
});
</script>

</body>
</html>

この例では、ToDoリストに新しいタスクを追加し、タスクを削除するシンプルなアプリケーションがVue.jsを使用して構築されています。

実際に「メモ帳」にコードを書くと、このように出力されます。

「Add a new task」にタスクを書いてエンターを押すと、上記のようにタスクが表示されます。

「Remove」ボタンでタスクを消すこともできます。

4. まとめ

Vue.jsは使いやすさと柔軟性を兼ね備えたJavaScriptのフレームワークであり、その人気は日々拡大しています。

本記事では、Vue.jsの基本的な特長や利点、実践例について紹介しました。

是非、Vue.jsを取り入れて新しいプロジェクトに挑戦してみてください。