Vueのまとめ

こんにちは！Yoshiです！
この記事では、Vueの私が学んだごく一部の内容を説明いたします。

Udemyの「超Vue.js 完全ガイド2026 (Vue Router, Pinia含む)」という講座やVueの公式サイト、Wikipediaを主に参考にして作りました。
また、この記事の情報は2024/10よりも後の情報です。

【目次】

・§１：Vueとは
・§２：Vueの基礎
・§３：Vueで入力フォームを作る
・§４：Composable

§１：Vueとは

・Vue（またはVue.js）：Web UIを作る為のアプリケーションフレームワーク。
Evan Youが開発し、2014/2にリリース。
Evan Youは、GoogleでAngularJSを使った開発に関わっていて、AngularJSの好きだった部分をVueに活かした。

Vueとの関係値が高い用語

・Node.js：オープンソースのJavaScriptの実行環境。2009/5/27にリリース。（以下「JS」という）
・Nuxt：Vueなどに基づく、オープンソースのフレームワーク。2016/10/26にNext.jsに影響を受けてリリース。
・Next.js：Webアプリを作る為のReactのフレームワーク。2016/10/25にリリース。
・React：Webとネイティブのアプリを作るためのJSのライブラリ。2013/5/29に一般にリリース。

Vueの強み

( cf.レバテック[2024/10]、侍エンジニア[2025/12] )

1] 学習コストが比較的低い
・Vueで開発する為に、HTML, CSS, JavaScriptの知識が必要だが、これらは比較的習得しやすい。
また、Vueで開発するために必要な、PCやブラウザ、コードエディタは用意しやすいものである。

2] 柔軟に機能を追加できる
・Vueコンポーネントというものは、Vueの強力な機能の1つである。
Vueアプリはネストになっているコンポーネントのツリーによって構成されている事が一般的であり機能を追加する場合は新しいコンポーネントを作り既存ページと組み合わせれば良い。既存のプログラムを大きく変えることは不要。

3] SPAの構築が得意
・SPA：1枚のページから構成されるWebアプリ。Single Page Applicationの略。
・従来のWebアプリでは、ユーザとWebサーバの間の通信が頻繁に発生することが一般的。
一方、SPAでは大部分の処理がブラウザ内で行われる為Webアプリのレスポンス速度が速くなる。

4] モバイルアプリも開発できる
・iOSとAndroidに対応したハイブリッドアプリを開発することもできる。
・ハイブリッドアプリ：ブラウザが組み込まれたネイティブアプリ（cf. AWS）

§２：Vueの基礎

・リアクティビティー：一般に、データの変化に応じて自動的に状態を変える機能
・リアクティブ：一般に、データの変化に応じて自動的に状態が変わる状態
・リアクティビティーを使うと、TypeScript等の変数はリアクティブなオブジェクトとなる。（以下「TS」という）
・ref()：TS等の変数をリアクティブなオブジェクトにすることができる関数
これを使ってリアクティブなオブジェクトとなったものをrefオブジェクトという。

・例えば、[2.1]を作る等すると、ブラウザの画面に[2.2]が出力され
「num++」ボタンを押すと、[2.3]が出力される（DOMが変わる）ため
numはリアクティブなオブジェクトになったということが分かる。
let numを使った場合、ブラウザの画面の「1」は「2」に変わらない。

[2.1] src\App.vue

<script setup lang="ts">
import { ref } from 'vue'
const num = ref(1)
function increment() {
  num.value++
  console.log(num.value)
}
</script>
<template>
  <h2>num: {{ num }}</h2>
  <button @click="increment">num++</button>
</template>

import { ref } from 'vue'

const num = ref(1)

function increment() {

num.value++

console.log(num.value)

}

</script>

</template>

[2.2] ブラウザの画面

[2.3] ブラウザの画面（右は開発ツールの画面）

§３：Vueで入力フォームを作る

・v-model：入力フォームの要素の値とTSの変数の値などを同期できる属性

・例えば、[10.1]を作る等すると、ブラウザの画面に[10.2]が出力され
テキスト欄に「あ」と入力し、「Checkbox」の直下のボックスにチェックを入れ
「Banana->Orange->Apple」の順でチェックを入れ、　リストで「B」を選ぶと
[10.3]が出力される。

[10.1] src\App.vue

<script setup lang="ts">
import { ref } from 'vue'
const userInput = ref('')
const checked = ref('')
const fruits = ref([])
const selected = ref('')
</script>

<template>
  <h2>Text</h2>
  <input v-model="userInput" />
  <p>{{ userInput }}</p>

  <h2>Checkbox</h2>
  <input v-model="checked" type="checkbox" true-value="checked" false-value="unchecked" />
  {{ checked }}

  <h3>Multiple</h3>
  <input id="Apple" v-model="fruits" type="checkbox" value="Apple" />
  <label for="Apple">Apple</label>
  <input id="Banana" v-model="fruits" type="checkbox" value="Banana" />
  <label for="Banana">Banana</label>
  <input id="Orange" v-model="fruits" type="checkbox" value="Orange" />
  <label for="Orange">Orange</label>
  <p>{{ fruits }}</p>

  <h2>Select</h2>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <p>{{ selected }}</p>
</template>

import { ref } from 'vue'

const userInput = ref('')

const checked = ref('')

const fruits = ref([])

const selected = ref('')

</script>

<p>{{ userInput }}</p>

<h2>Checkbox</h2>

<h3>Multiple</h3>

<label for="Apple">Apple</label>

<label for="Banana">Banana</label>

<label for="Orange">Orange</label>

<p>{{ fruits }}</p>

<h2>Select</h2>

<option disabled value="">Please select one</option>

</select>

<p>{{ selected }}</p>

</template>

- [10.2] ブラウザの画面
- [10.3] ブラウザの画面

§４：Composable

・Composable: Composition APIを使って状態を管理しているロジックを再利用するための関数。下記のファイルの場合、この状態はComposableのhistoryの状態。
・Composition API：インポートすることでVueコンポーネントを作れるAPI
例えば、ref()のこと。

・例えば、[11.1], [11.2]を保存するなどすると、[11.3]が出力され
「+1」ボタンを2回押すと、[11.4]が出力されるため、Composableを使えていることになる。

[11.1] src/App.vue など

<script setup lang="ts">
import { ref } from 'vue'
import { useRefHistory } from './composables/refHistory'

const count = ref(0)
const history = useRefHistory(count)
</script>
<template>
  <p>count: {{ count }}</p>
  <button @click="count++">+1</button>
  <p>history: {{ history }}</p>
</template>

import { ref } from 'vue'

import { useRefHistory } from './composables/refHistory'

const count = ref(0)

const history = useRefHistory(count)

</script>

<p>count: {{ count }}</p>

<p>history: {{ history }}</p>

</template>

[11.2] src\composables\refHistory.ts

import { ref, watchEffect } from 'vue'

export function useRefHistory(source) {
  const history = ref([])

  watchEffect(() => {
    history.value.push(source.value)
  })
  return history
}

import { ref, watchEffect } from 'vue'

export function useRefHistory(source) {

const history = ref([])

watchEffect(() => {

history.value.push(source.value)

})

return history

}

[11.3] ブラウザの画面
[11.4] ブラウザの画面

ここで私の記事は以上となります。
読んでいただきありがとうございました！

【目次】

§１：Vueとは

Vueとの関係値が高い用語

Vueの強み

§２：Vueの基礎

§３：Vueで入力フォームを作る

§４：Composable

About the author

Yoshi

Add Comment

Cancel reply

最近の投稿

アーカイブ

カテゴリー

コーポレートサイト

【目次】

§１：Vueとは

Vueとの関係値が高い用語

Vueの強み

§２：Vueの基礎

§３：Vueで入力フォームを作る

§４：Composable

About the author

Yoshi

Add Comment

Cancel reply

Read more

最近の投稿

アーカイブ

カテゴリー

タグクラウド

コーポレートサイト