Vue.js 入門 Tips

Vue.js The Progressive JavaScript Framework

Vue.js 入門

Vue.js入門前(特徴、導入ハードル、学習コストなど)

Vue.js入門前(特徴、導入ハードル、学習コストなど)
ここでは、Vue.jsを始める前に知っておきたい情報などをまとめています。 これからVue.jsを入門しようと思っている方や、導入...

Vue.jsのインストール(ダウンロード・NPM・CDN)

Vue.jsのインストール(ダウンロード・NPM・CDN)
Vue.js(ヴュー・ジェイエス)は、Webアプリケーション(ネットワークアプリケーション)のUI(ユーザーインターフェース)を構築...

Vue インスタンスの作成とマウント

Vue インスタンスの作成とマウント [Vue.js3.X]
Vueアプリケーションでは、createApp関数で新しいVueインスタンスを作成するところから始まります。 Vueでアプリケ...

Vue.jsのコンポーネント指向とUIの構造化

Vue.jsのコンポーネント指向とUIの構造化
コンポーネントシステム Vue.jsには重要なコンセプトの1つに「コンポーネントシステム」があります。 コンポーネントには「構成...

Vue.jsのライフライクル

Vue.jsのライフライクル [Vue v3.x]
Vue.jsを使用したアプリケーションの開発は、Vueのインスタンスを作成するところからスタートします。 作成したインスタンスにHTM...

Vue.jsのオプション構成(インスタンスのプロパティ)

Vue.jsのオプション構成(インスタンスのプロパティ)
ここでは、Vue.jsのオプション構成(インスタンスのプロパティ)について紹介します。 Vue.jsのアプリケーションでは...

数値、文字列などの値やオブジェクトなどのデータを格納するdata

数値、文字列などの値やオブジェクトなどのデータを格納するdata [Vue.js]
本記事では、Vue.jsで作成するアプリケーションの状態を定義するdataプロパティオプションについて紹介します。 dataプ...

Vue.jsのリアクティブシステムとデータバインディング

Vue.jsのリアクティブシステムとデータバインディング
Vue.jsはJavaScriptのデータとHTMLテンプレートのDOM要素を結びつける「リアクティブなデータバインディング」を備えています...

Vue.jsで文字列や数値などのデータ(値)を表示するMustashe(マスタッシュ)記法

Vue.jsで文字列や数値などのデータ(値)を表示するMustashe(マスタッシュ)記法
本記事では、Vue.jsで作成するアプリケーションでデータをHTML(Webページ)に表示する際に使用するMustashe(マスタッ...

Vue.jsのディレクティブ(v-xxxx)で属性やイベントなどを設定する

Vue.jsのディレクティブ(v-xxxx)で属性やイベントなどを設定する
ここでは、Vue.jsのディレクティブについて紹介します。 ディレクティブとは ディレクティブは「v-」で始まる「v-xxx...

v-modelディレクティブでフォームの入力要素と双方向データバインディング

v-modelディレクティブでフォームの入力要素と双方向データバインディング [Vue.js]
本記事では、Vue.jsのv-modelディレクティブについて紹介します。 v-modelディレクティブ ユーザーからの入力...

メソッド(アプリケーションの振る舞い)を定義するmethods

メソッド(アプリケーションの振る舞い)を定義するmethods [Vue.js]
本記事では、Vue.jsで作成するアプリケーションのメソッド(振る舞い)を定義するmethodsプロパティオプションについて紹介しま...

関数の結果を返せる算出プロパティ computed

関数の結果を返せる算出プロパティ computed [Vue.js]
本記事では、Vue.jsで作成するアプリケーションの算出プロパティを定義するcomputedプロパティオプションについて紹介します。...

算出プロパティ「computed」のSetter関数

算出プロパティ「computed」のSetter関数 [Vue.js]
ここでは、算出プロパティ(computed)のSetter関数について紹介します。 算出プロパティcomputedのGette...

データやプロパティの変更を監視するウォッチャー watch

データやプロパティの変更を監視するウォッチャーwatch [Vue.js]
本記事では、Vue.jsで作成するアプリケーションのデータやプロパティを監視して変更を検知するwatchプロパティオプションについて...

v-onディレクティブでイベントの処理(メソッドや式)をバインドする

v-onディレクティブでイベントの処理(メソッドや式)をバインドする [Vue.js]
本記事では、Vue.jsのv-onディレクティブについて紹介します。 v-onディレクティブ ユーザーからの操作を受け付ける...

v-bindディレクティブでHTML要素の属性にバインドする

v-bindディレクティブでHTML要素の属性にバインドする [Vue.js]
本記事では、Vue.jsのv-bindディレクティブについて紹介します。 v-bindディレクティブ HTMLの要素はcla...

v-showディレクティブでHTML要素の表示・非表示を制御する

v-showディレクティブでHTML要素の表示・非表示を制御する [Vue.js]
本記事では、Vue.jsのv-showディレクティブについて紹介します。 v-showディレクティブ Webアプリケーション...

v-ifディレクティブでHTML要素の表示・非表示を制御する

v-ifディレクティブでHTML要素の表示・非表示を制御する [Vue.js]
本記事では、Vue.jsのv-ifディレクティブについて紹介します。 v-ifディレクティブ v-ifディレクティブはv-s...

v-ifディレクティブとv-showディレクティブの違いと使いどころ

v-ifディレクティブとv-showディレクティブの違いと使いどころ [Vue.js]
Vue.jsで要素の表示と非表示を切り替ええたい場合には、v-showディレクティブを使う方法と、v-ifディレクティブを使う方法が...

v-forディレクティブで配列やオブジェクトのデータを表示する

v-forディレクティブで配列やオブジェクトのデータを表示する [Vue.js]
本記事では、Vue.jsのv-forディレクティブについて紹介します。 v-forディレクティブ 一覧表を表示するアプリケー...

class属性(CSSクラス)を指定するv-bindディレクティブ

class属性(CSSクラス)を指定するv-bindディレクティブ [Vue.js]
Vue.jsのv-bindディレクティブを使うとHTML要素の属性を指定することができます。 今回は、v-bindディレクティ...

style属性(CSSスタイル)を指定するv-bindディレクティブ

style属性(CSSスタイル)を指定するv-bindディレクティブ [Vue.js]
Vue.jsではHTML要素の属性を指定する際にv-bindディレクティブを使用します。 v-bindディレクティブによるバインデ...

イベントの既定の動作をキャンセルするv-onディレクティブの.prevent修飾子

イベントの既定の動作をキャンセルするv-onディレクティブの.prevent修飾子 [Vue.js]
JavaScriptのイベントには、ブラウザー上で発生する既定の動作が用意されています。 既定の動作とは、ブラウザーがイベントに伴...

イベントの伝搬をストップするv-onディレクティブの.stop修飾子

イベントの伝搬をストップするv-onディレクティブの.stop修飾子 [Vue.js]
JavaScriptのイベントは、イベントが発生した要素でのみ発生するのではなく、イベントの発生元である用途の親要素や子要素でもイベ...

イベントを現在の要素でのみ処理するv-onディレクティブの.self修飾子

イベントを現在の要素でのみ処理するv-onディレクティブの.self修飾子 [Vue.js]
前回の記事では、.stop修飾子を使用してイベントの伝播を抑制する方法についてご紹介しました。 JavaScriptの...

イベントをキャプチャフェーズで処理するv-onディレクティブの.capture修飾子

イベントをキャプチャフェーズで処理するv-onディレクティブの.capture修飾子 [Vue.js]
前回の記事では.self修飾子を使用して、イベントが発生した要素だけでイベントが処理されるようにする方法について紹介しました。 ...

イベントを1回のみ実行するv-onディレクティブの.once修飾子

イベントを1回のみ実行するv-onディレクティブの.once修飾子 [Vue.js]
Vue.jsではv-onディレクティブを使用することで、HTMLの要素のイベントにイベントハンドラーのメソッドをバインドして処理を行...

キーイベントで特定のキーが押された場合のみ処理を行うv-onディレクティブのキー修飾子

キーイベントで特定のキーが押された場合に処理を行うv-onディレクティブのキー修飾子 [Vue.js]
Vue.jsでは特定のキーが押された時にキーイベントを発生させるためのキー修飾子が用意されています。 今回は、キーイベントで特...

マウスイベントで特定のボタンが押された場合に処理を行うv-onディレクティブのマウス修飾子

マウスイベントで特定のボタンが押された場合に処理を行うv-onディレクティブのマウス修飾子 [Vue.js]
前回の記事では、キーボードの特定のキーが押されたことを検知して、キーイベントを処理する際に使用するキー修飾子について紹介しました。 ...

コンポーネントの基本

コンポーネントの基本 [Vue.js]
ここでは、Vue.jsのコンポーネントについて紹介します。 コンポーネントとは コンポーネントとはページを構成するUI部品の...

テンプレートをHTMLの<script>要素として表すx-template

テンプレートをHTMLの<script>要素として表すx-template [Vue.js]
今回は、<script>要素を使用してテンプレートを記述する際に使用する「x-template」について紹介します。 ...

コンポーネント間の通信 親から子へデータを渡すprops

コンポーネント間の通信 親から子へデータを渡すprops [Vue.js]
Vue.jsのコンポーネントは、Vueインスタンスを生成してアプリケーションを作成する場合と同様に、コンポーネント用のデータ(dat...

コンポーネント間の通信 子から親へイベントを通知する$emit

コンポーネント間の通信 子から親へイベントを通知する$emit [Vue.js]
前回の記事では子コンポーネントにはpropsを経由して、親側のアプリケーションやコンポーネント(以下親コンポーネントと記載)のデータ...

コンポーネントのイベントを定義するemits

コンポーネントのイベントを定義するemits [Vue.js]
今回は、コンポーネントに定義できるemitsオプションについて紹介します。 emitsオプション Vue.jsのバージョン3...

componentメソッドでローカルコンポーネントを定義する

componentメソッドでコンポーネントを定義する [Vue.js]
ここでは、componentメソッドを使ったコンポーネントの定義について紹介します。 Vue.jsのコンポーネント コンポー...

コンポーネントにpropsで定義されていない属性を渡す(指定する)

コンポーネントにpropsで定義されていない属性を渡す(指定する) [Vue.js]
コンポーネントの属性には、基本的にはpropsオプションに定義さえている属性を指定します。 しかし、コンポーネントには、props...

ディレクティブの省略記法 「v-bind: ⇒ :」「v-on: ⇒ @」

ディレクティブの省略記法 「v-bind: ⇒ :」「v-on: ⇒ @」[Vue.js]
Vue.jsでは、HTMLテンプレートでディレクティブを使用して、データをバインドしたりDOMを操作したりします。 デ...

v-bindディレクティブで複数の属性をまとめて一括指定する

v-bindディレクティブで複数の属性をまとめて一括指定する [Vue.js]
Vue.jsのv-bindディレクティブを使用すると、HTML要素の属性に値をバインドすることができます。 v-bin...

ディレクティブの動的引数

ディレクティブ(v-bind, v-on)の動的引数 [Vue.js]
Vue.jsのv-bindディレクティブを使用すると、HTML要素の属性に値をバインドすることができます。 v-bin...

要素のtextContentを更新するv-textディレクティブ

要素のtextContentを更新するv-textディレクティブ [Vue.js]
ここでは、Vue.jsのv-textディレクティブについて紹介します。 v-textディレクティブ Vue.jsでは、Vue...

文字列をHTMLとして埋め込み要素のinnerHTMLを更新するv-htmlディレクティブ

文字列をHTMLとして埋め込み要素のinnerHTMLを更新するv-htmlディレクティブ [Vue.js]
ここでは、Vue.jsのv-htmlディレクティブについて紹介します。 v-htmlディレクティブ 前回の記事でv-text...

データを1度だけバインドするv-onceディレクティブ

データを1度だけバインドするv-onceディレクティブ [Vue.js]
ここでは、Vue.jsのv-onceディレクティブについて紹介します。 v-onceディレクティブ Vue.jsのv-onc...

マスタッシュ構文({{…}})による画面のチラツキを防止するv-cloakディレクティブ

マスタッシュ構文({{...}})による画面のチラツキを防止するv-cloakディレクティブ [Vue.js]
ここでは、Vue.jsのv-cloakディレクティブについて紹介します。 v-cloakディレクティブ マスタッシュ(Mus...

複数の要素のブロックを描画する<template>(v-if, v-for)

複数の要素のブロックを描画する<template>(v-if, v-for) [Vue.js]
v-ifディレクティブやv-forディレクティブは、単一の要素に対して指定する必要があります。 例えば、v-ifディレクティブを使...

v-onディレクティブに複数のイベントを一括指定する

v-onディレクティブに複数のイベントを一括指定する [Vue.js]
ここではv-onディレクティブで、複数のイベントをまとめて一括で指定する方法について紹介します。 v-onディレクティブ V...

props、$emitで親子コンポーネント間でデータをやり取り(同期)する(v-bind、v-on)

props、$emitで親子コンポーネント間でデータをやり取り(同期)する(v-bind、v-on) [Vue.js]
Vue.jsでは、propsと$emitを使用して、親コンポーネントと子コンポーネントの間でデータをやり取りします。 ...

コンポーネントにv-modelディレクティブを実装する(props, $emit)

コンポーネントにv-modelディレクティブを実装する(props, $emit)[Vue.js]
前回は子コンポーネントに実装したpropsと$emitを利用して、親コンポーネントのデータをやり取り(同期)する方法を紹介しました。...

1つのコンポーネントに複数のv-modelディレクティブでのバインディングを適用する

1つのコンポーネントに複数のv-modelディレクティブでのバインディングを適用する [Vue.js]
前回の記事では子コンポーネントにpropsと$emitを実装し、親コンポーネントからv-modelディレクティブを使用して双方向バイ...

propsや$emitを使わずに親子コンポーネント間の通信をする $parent、$refs、$root

propsや$emitを使わずに親子コンポーネント間の通信をする $parent、$refs、$root [Vue.js]
Vue.jsの親子コンポーネント間の通信は、原則としてpropsと$emitを使用します。 子コンポーネントはpropsで親コンポ...

コンポーネントに指定したコンテンツを外から埋め込む<slot>要素

コンポーネントに指定したコンテンツを外から埋め込む<slot>要素 [Vue.js]
コンポーネントを作成していると、コンポーネント側の実装時点では配置できない要素などを利用する側から差し込みたい場合があります。 ...

名前付きスロットでコンポーネントの複数のスロットにコンテンツを埋め込む v-slot

名前付きスロットでコンポーネントの複数のスロットにコンテンツを埋め込む v-slot [Vue.js]
前回はコンポーネントに外部からコンテンツを埋め込むことができるスロット(slot要素)を紹介しました。 前回の記事では...

子コンポーネントのデータを参照するスコープ付きスロット(slot要素の属性にv-bindでバインドする)

子コンポーネントのデータを参照するスコープ付きスロット(slot要素の属性にv-bindでバインドする) [Vue.js]
前回、前々回の記事ではVue.jsのスロットを使用して、親コンポーネントから子コンポーネントへコンテンツを埋め込めることを紹介しまし...

コンポーネントを動的に切り替える<component>要素

コンポーネントを動的に切り替える<component>要素 [Vue.js]
Vue.jsには、コンポーネントを制御するためのコンポーネントのメタコンポーネントの組み込みコンポーネントが用意されています。 ...

動的コンポーネントのキャッシュを保持する<keep-alive>要素

動的コンポーネントのキャッシュを保持する<keep-alive>要素 [Vue.js]
前回の記事では、<component>要素を使用して、動的にコンポーネントを切り替える方法について紹介しました。 ...

アニメーション機能を提供する<transition>要素

アニメーション機能を提供する<transition>要素 [Vue.js]
Vue.jsには、HTMLのテンプレート要素に対してアニメーションの効果を与える仕組みが標準で用意されています。 アニメーションの...

コンポーネントの要素をコードから生成するrenderオプション

コンポーネントの要素をコードから生成するrenderオプション(関数) [Vue.js]
コンポーネントのHTMLテンプレートを定義する際は、templateプロパティオプションを利用するのが基本です。 const ...

provideとinjectを使用して離れた子孫コンポーネントにデータを渡す

provideとinjectを使用して離れた子孫コンポーネントにデータを渡す [Vue.js]
Vue.jsでは、通常、親コンポーネントから子コンポーネントにデータを渡す時にはpropsを使います。 HTML <...

カスタムディレクティブを定義する directive

カスタムディレクティブを定義する directive [Vue.js]
Vue.jsには、属性の形式でDOMツリー(文書ツリー)を操作する仕組みとしてディレクティブが用意されています。 ディレクティブに...

引数付きのカスタムディレクティブを定義する

引数付きのカスタムディレクティブを定義する [Vue.js]
本ブログでは、以前にVue.jsのカスタムディレクティブについて紹介しました。 カスタムディレクティブを自作することで...

修飾子付きのカスタムディレクティブを定義する

修飾子付きのカスタムディレクティブを定義する [Vue.js]
本ブログでは、以前にVue.jsのカスタムディレクティブについて紹介しました。 また、引数付きのカスタムディレクティブ...

カスタムオプションを定義して参照する $options

カスタムオプションを定義して参照する $options [Vue.js]
Vue.jsには、データを定義するdataオプション、メソッドを定義するmethodsオプション、算出プロパティを定義するcompu...

インスタンスプロパティ

インスタンスプロパティ($data、$props、$el、$options、$parent、$root、$slots、$refs、$attrs) [Vue.js]
ここでは、Vue.jsに用意されているインスタンスプロパティを紹介します。 インスタンスプロパティ インスタンスプロパティと...

コンポーネントの再利用可能なオプションを追加するミックスイン mixin

コンポーネントの再利用可能なオプションを追加するミックスイン mixin [Vue.js]
Vue.jsには、コンポーネントを拡張する仕組みとしてミックスインという機能が用意されています。 ここでは、ミックスイン(mi...

DOMが更新された後のに処理を行う this.$nextTick

DOMが更新された後に処理を行う this.$nextTick [Vue.js]
今回は、DOMの更新が完了した後に処理を行うことができるnextTickについて紹介します。 Vue.jsのDOM更新 Vu...

Vue.js Tips

Vue.js devtoolsのインストール

Vue.js devtoolsのインストール
Vue.js devtoolsはVue.jsを利用して開発するアプリケーションのデータ(変数の値)などをリアルタイムに確認できるブラウザーの...

Vue.jsのコーディングに便利なVisual Studio Code + Vetur

Vue.jsのコーディングに便利なVisual Studio Code+Vetur
Vue.jsをこれから始めようとしている方や、初めて間もない方にとっては、Vue.jsのコーディングのしやすさも大事ではないかと思い...

Vue.jsで定番のプログラムサンプルの「Hello world!」を作成する

Vue.jsで定番のプログラムサンプルの「Hello world!」を作成する
プログラミングの入門書やWebサイトには、初歩的なプログラムの例として「Hello world!」が使われることがとても多いです。 ...

jsFiddleでVue.jsのサンプルプログラムを作成する

jsFiddleでVue.jsのサンプルプログラムを作成する
ここでは、jsFiddleを利用してVue.jsのコーディングを行います。 Vue.jsをこれから始めようという方はローカルに環境...

Vue.jsのコーディングがすぐに始められるHTMLのテンプレートテキスト

Vue.jsのコーディングがすぐに始められるHTMLのテンプレートテキスト
この記事では、Vue.jsのちょっとしたコーディングをすぐに始めることができるように、HTMLファイルに記述するテンプレートのコード...

子コンポーネントのFunction型のpropsにメソッドを渡して処理を行う

コンポーネントに定義したFunction型のpropsにメソッドを渡して処理を行う [Vue.js]
Vue.jsの親子コンポーネント間の通信は、親から子へデータを渡す時にはpropsを使用し、子から親へ通知を行う時には$emitメソ...

Vue CLIでプロジェクトを作成する

Vue CLIでプロジェクトを作成する [Vue.js]
Vue.jsには、アプリケーションのプロジェクトのテンプレートを自動生成してくれるコマンドラインツールの「Vue CLI」が用意され...

Viteでプロジェクトを作成する

Viteでプロジェクトを作成する [Vue.js]
Vue.jsには以前から、アプリケーションのプロジェクトを自動生成してくれるコマンドラインツールの「Vue CLI」が用意されていま...

Vue CLIのGUIツールを使ってプロジェクトを作成して管理する

Vue CLIのGUIツールを使ってプロジェクトを作成して管理する [Vue.js]
本ブログでは、以前にVue CLIでプロジェクトを作成する手順について紹介しました。 Vue CLIでは、コマンドを利用してプ...

テキストボックス(input、textarea)を操作する

テキストボックス(input、textarea)を操作する [Vue.js]
Vue.jsではv-modelディレクティブを使用することで、HTMLのフォーム(form要素)のテキストボックス(input要素や...

チェックボックス(input[type=”checkbox”])を操作する

チェックボックス(input[type="checkbox"])を操作する [Vue.js]
Webアプリケーションでは、チェックボックスを使用してユーザーのオプション選択を取得することがよくあります。 例えば、アンケートア...

セレクト(選択)ボックス(select)を操作する

セレクト(選択)ボックス(select)を操作する [Vue.js]
Webアプリケーションでは、ユーザーに項目を選択させるためにselect要素でセレクトボックス(選択ボックス)を利用することがよくあ...

ラジオボタン(input[type=”radio”])を操作する

ラジオボタン(input[type="radio"])を操作する [Vue.js]
複数の項目から1つを選択させるラジオボタンのオプションは、多くのWebアプリケーションで利用されています。 例えば、性別を選択する...

リスト(<ul><ol><li>)レンダリング(v-for)

リスト(<ul><ol><li>)レンダリング(v-for) [Vue.js]
Webアプリケーションでは、データをリスト(一覧)で表示することがよくあります。 例えば、データを検索して結果を一覧で表示したり、...

テーブル(<table><tr><td>)レンダリング(v-for)

テーブル(<table><tr><td>)レンダリング(v-for) [Vue.js]
前回の記事では、v-forディレクティブを使用してリストを描画する方法について紹介しました。 リスト(ul, ol, ...

Vue 2.x

高さを自動調整するテキストエリアコンポーネント

高さを自動調整するテキストエリアコンポーネント [Vue.js, TypeScript]
データベースのテーブルのスキーマ情報をもとに、エンティティクラスのソースコードを自動生成するジェネレーターを作成する際に、ソースコードの行数...

UML 描画ライブラリ nomnoml でテーブルの ER 図を作成

UML 描画ライブラリ nomnoml でテーブルの ER 図を作成 [Vue.js, TypeScript]
Vue CLI のプロジェクトで、nomnoml という JavaScript のライブラリを使用して、データベースのテーブルの ER ダイ...

Web上で色が作成できるカラーミキサーコンポーネント

Web上で色が作成できるカラーミキサーコンポーネント [Vue.js, JavaScript]
Vue.jsを使用してWeb(ブラウザー)上で色の作成ができるカラーミキサーコンポーネントを作成します。 カラーミキサーコンポーネントはR...

Vueのライフサイクルを理解する

Vueのライフサイクルを理解する [Vue.js v2.x]
今回はVueインスタンスのライフサイクルについて理解していこうと思います。 インスタンスのライフサイクル Vueのインスタン...