Vue3 – ちょいプラ素材 https://vitorec.co.jp/choi-plus-sozai 趣味や日々のコトを通して，見つけたモノや出会ったヒト，出かけたトコロを紹介するブログです． Fri, 17 Oct 2025 23:33:55 +0000 ja hourly 1 https://wordpress.org/?v=6.9.4 https://vitorec.co.jp/choi-plus-sozai/wp-content/uploads/2024/08/choi-plus-sozai-favicon-150x150.jpg Vue3 – ちょいプラ素材 https://vitorec.co.jp/choi-plus-sozai 32 32 「Vue 3 Datepicker」やりたいことは何でもできるんじゃない？！ https://vitorec.co.jp/choi-plus-sozai/%e3%80%8cvue-3-datepicker%e3%80%8d%e3%82%84%e3%82%8a%e3%81%9f%e3%81%84%e3%81%93%e3%81%a8%e3%81%af%e4%bd%95%e3%81%a7%e3%82%82%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%93%e3%81%98%e3%82%83%e3%81%aa%e3%81%84/ https://vitorec.co.jp/choi-plus-sozai/%e3%80%8cvue-3-datepicker%e3%80%8d%e3%82%84%e3%82%8a%e3%81%9f%e3%81%84%e3%81%93%e3%81%a8%e3%81%af%e4%bd%95%e3%81%a7%e3%82%82%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%93%e3%81%98%e3%82%83%e3%81%aa%e3%81%84/#comments Mon, 25 Jul 2022 03:15:19 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=11120
  1. 環境
  2. Vue 3 Datepickerとは？
  3. Vue 3 Datepickerの機能紹介
    1. デフォルト状態
    2. フォーマットの変更
    3. 日本語表記にする
    4. 「秒」を入力できるようにする
    5. 2つのカレンダーを表示して期間を入力する
  4. まとめ

環境

このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。

vue.js3.2.37
Vue 3 Datepicker7.2.2

Vue 3 Datepickerとは？

「Vue 3 Datepicker」は、Vue3で使用できるDate-Time-Pickerライブラリです。

今回、以下の機能を持ったDate-Time-Pickerを探していて見つけたライブラリです。

  • 日付と時刻が入力できること。
  • 時刻は、「秒」まで入力できること。
  • 日本語表記に対応できること。
  • モダンなデザインで、使いやすいUIであること。

デザインや使い勝手は、好みのわかれるところですが、この「Vue 3 Datepicker」は、何より機能が豊富です。

「やりたいこと、何でもできるじゃん！」と感激したので、是非とも紹介したくなりました。

Vue 3 Datepickerの機能紹介

「Vue 3 Datepicker」は、とにかく機能が豊富です。
全ての機能は、公式のドキュメントを見てもらうとして、ここでは、一部の機能と実際のソースコードを紹介します。

デフォルト状態

まずは、デフォルトの状態です。
厳密には、デフォルト状態にplaceholderを追加しています。

下のテキストボックスをクリックして、実際の日時を入力してみてください。

コード
<div id="app-default">
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
    ></datepicker>
</div>

<script>
    Vue.createApp({
        components: { Datepicker: VueDatePicker },
        data() {
            return { date: Vue.ref() };
        },
    }).mount("#app-default");
</script>

フォーマットの変更

デフォルトの状態では、入力した日時が「MM/DD/YYYY, HH:mm」のフォーマットで表示されます。
このフォーマットを「YYYY-MM-DD HH:mm:ss」に変更します。

コード
<div id="app-format">
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
        v-bind:format="format"
    ></datepicker>
</div>

<script>
    Vue.createApp({
        components: { Datepicker: VueDatePicker },
        data() {
            return {
                date: Vue.ref(),
                format: (date) => {
                    const year = date.getFullYear();
                    const month = String(date.getMonth() + 1).padStart(2, "0");
                    const day = String(date.getDate()).padStart(2, "0");
                    const hours = String(date.getHours()).padStart(2, "0");
                    const minutes = String(date.getMinutes()).padStart(2, "0");
                    const seconds = String(date.getSeconds()).padStart(2, "0");

                    return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                },
            };
        },
    }).mount("#app-format");
</script>

日本語表記にする

<datepicker>タグにlocale="jp"を追加するだけで、曜日が日本語表記になります。

cancel-text="キャンセル"、select-text="OK"も追加して、”Cancel”を”キャンセル”、”Select”を”OK”に変更します。

「月」の数字の後ろに”月”、「年」の数字の後ろに”年”の文字を表示するには、
<template year="{ value }"> {{ value }}年></template>
を追加します。

Vue 3 Datepickerのバージョン5.x.xまでは、<template>タグの赤字部分を下記のとおりyearにする必要がありました。

<template year="{ year }"> {{ year }}年></template>

このように、Vue 3 Datepickerは、バージョンによって仕様が大きく変わりますので、注意が必要です。

これ以降、実際のコードは、<datepicker>…</datepicker>タグの部分のみが変更になりますので、<datepicker>…</datepicker>タグ部分のみを掲載します。

コード
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
        v-bind:format="format"
        locale="jp"
        cancel-text="キャンセル"
        select-text="OK"
    >
        <template #year="{ value }"> {{ value }}年 </template>
    </datepicker>

「秒」を入力できるようにする

<datepicker>タグにenable-secondsを追加するだけで、時刻入力で「秒」も入力できるようになります。

コード
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
        v-bind:format="format"
        locale="jp"
        cancel-text="キャンセル"
        select-text="OK"
        enable-seconds
    >
        <template #year="{ value }"> {{ value }}年 </template>
    </datepicker>

2つのカレンダーを表示して期間を入力する

最後に2つのカレンダーを表示して、期間を入力する例です。
<datepicker>タグにrangeとmulti-calendarsを追加します。

日時が格納される変数dateが配列になるので、format関数が少し複雑になります。

コード
<div id="app-multi">
    <datepicker
        placeholder="ここをクリックして日時を入力"
        v-model="date"
        v-bind:format="format"
        locale="jp"
        cancel-text="キャンセル"
        select-text="OK"
        enable-seconds
        range
        multi-calendars
    >
        <template #year="{ value }"> {{ value }}年 </template>
    </datepicker>
</div>

<script>
    Vue.createApp({
        components: { Datepicker: VueDatePicker },
        mounted() {
            this.date = [];
        },
        data() {
            return {
                date: Vue.ref(),
                format: (date_array) => {
                    let result = "";
                    date_array.forEach((date, index) => {
                        if (Object.prototype.toString.call(date) == "[object Date]") {
                            const year = date.getFullYear();
                            const month = String(date.getMonth() + 1).padStart(2, "0");
                            const day = String(date.getDate()).padStart(2, "0");
                            const hours = String(date.getHours()).padStart(2, "0");
                            const minutes = String(date.getMinutes()).padStart(2, "0");
                            const seconds = String(date.getSeconds()).padStart(2, "0");

                            result += `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
                            if (index == 0) {
                                result += ` - `;
                            }
                        }
                    });

                    return result;
                },
            };
        },
    }).mount("#app-multi");
</script>

まとめ

日時入力に関して、やりたいことが何でもできそうな「Vue 3 Datepicker」を紹介しました。

ここで紹介した機能を使って、GPXファイルのタイムスタンプを変更するアプリケーションを作ってみました。

GPXファイルのタイムスタンプを変更する
GPXファイルのタイムスタンプを変更するツールを作成しました。 「Vue 3 Datepicker」で開始日時/終了日時を指定して、GPXファイルのタイムスタンプを簡単に変更できます。
vitorec.co.jp
2022.08.14
]]> https://vitorec.co.jp/choi-plus-sozai/%e3%80%8cvue-3-datepicker%e3%80%8d%e3%82%84%e3%82%8a%e3%81%9f%e3%81%84%e3%81%93%e3%81%a8%e3%81%af%e4%bd%95%e3%81%a7%e3%82%82%e3%81%a7%e3%81%8d%e3%82%8b%e3%82%93%e3%81%98%e3%82%83%e3%81%aa%e3%81%84/feed/ 1 WordPressの投稿にガントチャートを実装する https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%ab%e3%82%ac%e3%83%b3%e3%83%88%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b/ https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%ab%e3%82%ac%e3%83%b3%e3%83%88%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b/#respond Fri, 10 Jun 2022 15:00:00 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=10848
  1. 環境
  2. frappe-ganttとは？
  3. 実装したガントチャート
    1. ガントチャートの編集方法
    2. 工数グラフ
  4. まとめ

環境

このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。

vue.js3.2.31
vue3-sfc-loader0.8.4
frappe-gantt0.6.1をベースに機能拡張
moment2.29.3
sweetalert211.4.17
vue-select4.0.0-beta.3
@lk77/vue3-color3.0.6
encoding-japanese2.0.0

frappe-ganttとは？

「frappe-gantt」は、マウスでドラッグしてグラフィカルに編集できるガントチャートのJavaScriptライブラリです。
センスの良いデザイン、わかりやすいユーザーインターフェースが魅力的です。

ただ、アップデートが停滞気味で、機能的にも足りない部分があるので、「frappe-gantt」を独自に機能拡張したライブラリを作成することにしました。

追加した機能は、以下のとおりです。

  • タスクの担当者入力
  • タスクの工数配分入力
  • タスクや進捗度の色の編集
  • タスクに入力した担当者 / 工数配分を基に、積み上げ工数グラフを表示

作成したJavaScriptライブラリを「Vue3.x」から利用して、WordPressの投稿にガントチャートを実装します。

実装したガントチャート

実装したガントチャートです。

初回は、本日の位置に［初期タスク］が1つ配置されます。
スクロールバーを本日の位置に動かしてください。
この状態から、ガントチャートを編集していきます。

次回以降は、前回の編集途中のガントチャートが自動的に読み込まれます。

・別のPCやブラウザを使った場合
・ブラウザのデータをクリアした場合
は、前回の編集途中のガントチャートや一時保存したガントチャートを読み込むことができなくなります。
重要なガントチャートは、ローカルファイルにダウンロードしてください。

キーボード操作が必要なため、スマートフォンやタブレットでは、正しく編集できません。

ガントチャートの編集方法

  • タスク情報を変更する
    タスクをダブルクリックすると、タスク情報を編集するダイアログが表示されます。
    ダイアログにタスク情報を入力し、OK ボタンを押します。

    タスク名だけは、入力が必須の項目です。

    タスクの詳細は、複数行テキスト、HTMLタグも入力できます。

    担当者は、そのタスクを担当する人の情報（名前やID、メールアドレスなど）を入力します。

    工数配分は、そのタスクに配分する工数の割合を入力します。

    プログレスの色 / タスクバーの色を指定したい場合は、色指定ボタン（小さい長方形   ）を押し、カラーピッカーを起動して色を選びます。
    色指定ボタンを押すたびに、カラーピッカーの表示 / 非表示が切り替わります。
    　
  • タスクの開始日 / 終了日を変更する
    タスクにマウスカーソルを合わせると、タスクの左端 / 右端にハンドルが表示されます。
    左端 / 右端のハンドルをドラッグし、タスクの開始日 / 終了日を変更します。

    タスクを左右にドラッグすると、開始日 / 終了日の間隔を維持したまま、タスクの日程を変更できます。
    ［Shift］キーを押しながら左右にドラッグすると、移動方向は左右のみに固定され、上下の位置は変わりません。
    　
  • タスクの進捗度を変更する
    タスクにマウスカーソルを合わせると、三角形のハンドルが表示されます。
    三角形のハンドルをドラッグし、タスクの進捗度を変更します。
    　
  • タスクを追加する
    タスクを追加 ボタンを押すと、新規のタスク情報を入力するダイアログが表示されます。
    ダイアログにタスク情報を入力し、OK ボタンを押すと、新しいタスクが一番下に追加されます。

    タスク名だけは、入力が必須の項目です。
    　
  • タスクを削除する
    タスクを右クリックすると、タスクの削除を確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、選択したタスクが削除されます。
    　
  • タスクの依存関係（親子関係）を変更する
    ［Alt］キーを押したまま、「親タスク」をクリックします。
    赤い矢印が表示されます。
    その後、依存関係を設定したい「子タスク」をクリックします。
    「親タスク」から「子タスク」に矢印がつながり、依存関係が設定されます。

    既に、依存関係が設定されている場合は、依存関係が解除されます。
    　
  • タスクの上下位置を変更する
    タスクを上下にドラッグすると、タスクの上下位置を変更できます。
    ［Shift］キーを押しながら上下にドラッグすると、移動方向は上下のみに固定され、左右の位置は変わりません。

    「子タスク」を「親タスク」の上に移動することはできません。
    ドラッグ後のタスクの位置は、「親タスク」「子タスク」の上下関係を優先して調整されます。

    を有効にした状態でタスクを上下にドラッグすると、上下位置を自由に変更できます。
    この状態では、「親タスク」「子タスク」の関係も無視され、タスクを移動した後の上下位置の整列も行いません。
    　
  • ビューモードを変更する
    日 週 月 ボタンを押して、ビューモードを変更します。
    　
  • ガントチャートをリセットする
    リセット ボタンを押すと、ガントチャートのリセットを確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、ガントチャートを初期状態にリセットします。
    　
  • ガントチャートを保存 / 読込む
    保存 ボタンを押すと、ガントチャートの保存を確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、作成中のガントチャートを自分の使っているブラウザに一時的に保存します。

    読込み ボタンを押すと、ガントチャートの読込みを確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、保存したガントチャートを読込みます。

    ブラウザを閉じても、保存したガントチャートはブラウザに残ります。
    　
  • ガントチャートをダウンロード / アップロードする
    ダウンロード ボタンを押すと、作成中のガントチャートをローカルファイルにダウンロードできます。

    アップロード ボタンを押し、ダウンロードしたガントチャートファイルを指定すると、このファイルがアップロードされ、ガントチャートが更新されます。

工数グラフ

  • タスク情報を変更する
    タスクをダブルクリックすると、タスク情報を編集するダイアログが表示されます。
    ダイアログにタスク情報を入力し、OK ボタンを押します。

    タスク名だけは、入力が必須の項目です。

    タスクの開始日時 / 終了日時のボックスをクリックするとカレンダー / 時計のユーザーインターフェースが表示され、開始日時 / 終了日時を変更できます。

    タスクの詳細は、複数行テキスト、HTMLタグも入力できます。

    担当者は、そのタスクを担当する人の情報（名前やID、メールアドレスなど）を入力します。

    工数配分は、そのタスクに配分する工数の割合を入力します。

    プログレスの色 / タスクバーの色を指定したい場合は、色指定ボタン（小さい長方形   ）を押し、カラーピッカーを起動して色を選びます。
    色指定ボタンを押すたびに、カラーピッカーの表示 / 非表示が切り替わります。
    　
  • タスクの開始日 / 終了日を変更する
    タスクにマウスカーソルを合わせると、タスクの左端 / 右端にハンドルが表示されます。
    左端 / 右端のハンドルをドラッグし、タスクの開始日 / 終了日を変更します。

    タスクを左右にドラッグすると、開始日 / 終了日の間隔を維持したまま、タスクの日程を変更できます。
    ［Shift］キーを押しながら左右にドラッグすると、移動方向は左右のみに固定され、上下の位置は変わりません。

    タスク情報を編集するダイアログでも、カレンダー / 時計のユーザーインターフェースを使って、タスクの開始日時 / 終了日時を変更できます。
    　
  • タスクの進捗度を変更する
    タスクにマウスカーソルを合わせると、三角形のハンドルが表示されます。
    三角形のハンドルをドラッグし、タスクの進捗度を変更します。
    　
  • タスクを追加する
    タスクを追加 ボタンを押すと、新規のタスク情報を入力するダイアログが表示されます。
    ダイアログにタスク情報を入力し、OK ボタンを押すと、新しいタスクが一番下に追加されます。

    タスク名だけは、入力が必須の項目です。
    　
  • タスクを削除する
    タスクを右クリックすると、タスクの削除を確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、選択したタスクが削除されます。
    　
  • タスクの依存関係（親子関係）を変更する
    ［Alt］キーを押したまま、「親タスク」をクリックします。
    赤い矢印が表示されます。
    その後、依存関係を設定したい「子タスク」をクリックします。
    「親タスク」から「子タスク」に矢印がつながり、依存関係が設定されます。

    既に、依存関係が設定されている場合は、依存関係が解除されます。
    　
  • タスクの上下位置を変更する
    タスクを上下にドラッグすると、タスクの上下位置を変更できます。
    ［Shift］キーを押しながら上下にドラッグすると、移動方向は上下のみに固定され、左右の位置は変わりません。

    「子タスク」を「親タスク」の上に移動することはできません。
    ドラッグ後のタスクの位置は、「親タスク」「子タスク」の上下関係を優先して調整されます。

    を有効にした状態でタスクを上下にドラッグすると、上下位置を自由に変更できます。
    この状態では、「親タスク」「子タスク」の関係も無視され、タスクを移動した後の上下位置の整列も行いません。
    　
  • ビューモードを変更する
    日 週 月 ボタンを押して、ビューモードを変更します。
    　
  • ガントチャートをリセットする
    リセット ボタンを押すと、ガントチャートのリセットを確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、ガントチャートを初期状態にリセットします。
    　
  • ガントチャートを保存 / 読込む
    保存 ボタンを押すと、ガントチャートの保存を確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、作成中のガントチャートを自分の使っているブラウザに一時的に保存します。

    読込み ボタンを押すと、ガントチャートの読込みを確認するダイアログが表示されます。
    ダイアログの OK ボタンを押すと、保存したガントチャートを読込みます。

    ブラウザを閉じても、保存したガントチャートはブラウザに残ります。
    　
  • ガントチャートをダウンロード / アップロードする
    ダウンロード ボタンを押すと、作成中のガントチャートをローカルファイルにダウンロードできます。

    アップロード ボタンを押し、ダウンロードしたガントチャートファイルを指定すると、このファイルがアップロードされ、ガントチャートが更新されます。

まとめ

「frappe-gantt」を独自に機能拡張したJavaScriptライブラリを作成し、WordPressの投稿にガントチャートを実装しました。

ガントチャートを使うと、視覚的に業務計画を立てることができます。
また、進捗度も変更できるので、業務の進み具合いもビジュアルに把握しやすくなります。

タスクに担当者と工数配分を入力すれば、積み上げ工数グラフで、担当者ごとの毎日の業務負荷を確認できます。

以下のページは、少し広い画面でガントチャートを編集できます。
ちょっとした業務計画の作成に利用ください。

ガントチャート
ガントチャート編集ページ
vitorec.co.jp
2024.01.01
]]> https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%ab%e3%82%ac%e3%83%b3%e3%83%88%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e3%82%92%e5%ae%9f%e8%a3%85%e3%81%99%e3%82%8b/feed/ 0 WordPressの投稿にソートやページネーションの機能を持ったテーブルを実装する https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%ab%e3%82%bd%e3%83%bc%e3%83%88%e3%82%84%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ae%e6%a9%9f%e8%83%bd%e3%82%92%e6%8c%81/ https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%ab%e3%82%bd%e3%83%bc%e3%83%88%e3%82%84%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ae%e6%a9%9f%e8%83%bd%e3%82%92%e6%8c%81/#respond Sun, 24 Apr 2022 03:05:42 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=10802
  1. 環境
  2. vue-good-table-nextとは？
  3. テーブル用ライブラリの比較
  4. WordPressの投稿でvue-good-table-nextを使う
    1. “table_library_comparison_table.vue”の中身
  5. まとめ

環境

このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。

vue.js3.2.31
vue3-sfc-loader0.8.4
vue-good-table-next0.1.0

vue-good-table-nextとは？

「vue-good-table-next」は、ソート、ページネーション、フィルターなどの機能をもったテーブルを実装できるVueライブラリです。
「vue-good-table-next」は、「Vue2.x」で動作する「vue-good-table」を「Vue3.x」に対応させたバージョンです。
GitHub（updatedショートコードは投稿・固定ページ以外では利用できません。時点）の「vue-good-table-next」バージョンは「0.1.0」で、"README"にも以下の注意書きがあります。

This project is a port of Vue-good-table for Vue 3.x. The current version is stable enough to start developing new projects but work is still in progress and changes could be made in the short-term. Thus the project is not yet intended to be used in a production environment.

ただ、基本的な動作は安定しているようです。

テーブル用ライブラリの比較

多機能なテーブルを実装するためのライブラリやプラグインは、以下のようにいろいろ提供されています。

この記事では「vue-good-table-next」を紹介しますが、各種のライブラリの特徴を比較表にまとめました。（updatedショートコードは投稿・固定ページ以外では利用できません。時点）
なお、この比較表は、「vue-good-table-next」をインポートしたSFCで表示しています。

カスタマイズの自由度では「vue-tables2（v-tables3）」が優れているのですが、Vue3の対応が不完全なので、総合的に「vue-good-table-next」を選びました。

WordPressの投稿でvue-good-table-nextを使う

上記の各種ライブラリの比較表の部分には、WordPressのブロックエディタで以下の「カスタム HTML」ブロックを配置しています。

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>

<div id="app"></div>

<script type="module">
    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader モジュール
    ////////////////////////////////////////////////////////////////////////////////
    import { loadModule } from "https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.esm.js";

    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader オプション
    // SFCファイルから外部のモジュールをimportできるオプション
    // 参考：https://github.com/FranckFreiburger/vue3-sfc-loader/issues/14#issuecomment-908849863
    ////////////////////////////////////////////////////////////////////////////////
    const vue3_sfc_loader_options = {
        moduleCache: { vue: Vue },
        getFile(url) {
            url = /.*?\.js|.mjs|.css|.less|.vue$/.test(url)
                ? url
                : `${url}.vue`;
            const type = /.*?\.js|.mjs$/.test(url)
                ? ".mjs"
                : /.*?\.vue$/.test(url)
                ? ".vue"
                : /.*?\.css$/.test(url)
                ? ".css"
                : ".vue";
            const getContentData = (asBinary) =>
                fetch(url).then((res) =>
                    !res.ok
                        ? Promise.reject(url)
                        : asBinary
                        ? res.arrayBuffer()
                        : res.text()
                );
            return { getContentData: getContentData, type: type };
        },
        addStyle(textContent) {
            let styleElement = document.createElement("style");
            document.head.insertBefore(
                Object.assign(styleElement, { textContent }),
                document.head.getElementsByTagName("style")[0] || null
            );
        },
        handleModule(type, getContentData, path, options) {
            switch (type) {
                case ".css":
                    return options.addStyle(getContentData(false));
                case ".less":
                    console.error(".......");
            }
        },
        log(type, ...args) {
            console.log(type, ...args);
        },
    };

    ////////////////////////////////////////////////////////////////////////////////
    // Vue.js アプリケーションインスタンス
    ////////////////////////////////////////////////////////////////////////////////
    const app = Vue.createApp({
        components: {
            "table-library-comparison-table": Vue.defineAsyncComponent(() =>
                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/table_library_comparison_table.vue",
                    vue3_sfc_loader_options
                )
            ),
        },
        template: `<table-library-comparison-table />`,
    });
    app.mount("#app");
</script>

いつものように、「vue3-sfc-loader」で"table_library_comparison_table.vue"を読み込んでいます。

“table_library_comparison_table.vue”の中身

"table_library_comparison_table.vue"の全体です。

<script setup>
////////////////////////////////////////////////////////////////////////////////
// vue-good-table-next モジュール
////////////////////////////////////////////////////////////////////////////////
import { VueGoodTable } from "https://cdn.jsdelivr.net/npm/vue-good-table-next@0.1.0/dist/vue-good-table.cjs.min.js";

////////////////////////////////////////////////////////////////////////////////
// data
////////////////////////////////////////////////////////////////////////////////
const table_columns = [
    {
        label: "比較項目",
        field: "comparison_items",
        thClass: "vgt-center-align vgt-comparison-items",
        tdClass: "vgt-center-align vgt-comparison-items",
        sortable: true,
        html: true,
    },
    {
        label: "vue-good-table-next",
        field: "vue_good_table_next",
        thClass: "vgt-center-align vgt-vue-good-table-next",
        tdClass: "vgt-center-align vgt-vue-good-table-next",
        html: true,
    },
    {
        label: "vue-tables2",
        field: "vue_tables2",
        thClass: "vgt-center-align vgt-vue-tables2",
        tdClass: "vgt-center-align vgt-vue-tables2",
        html: true,
    },
    {
        label: "Vuetable-2",
        field: "vuetable_2",
        thClass: "vgt-center-align vgt-vuetable-2",
        tdClass: "vgt-center-align vgt-vuetable-2",
        html: true,
    },
    {
        label: "Grid.js",
        field: "grid_js",
        thClass: "vgt-center-align vgt-grid-js",
        tdClass: "vgt-center-align vgt-grid-js",
        html: true,
    },
];
const table_rows = Vue.ref([]);
const search_options = {
    enabled: true,
    trigger: "enter",
    placeholder: "テーブルを検索します",
};
const sort_options = {
    enabled: false,
};
const pagination_options = {
    enabled: true,
    mode: "pages",
    perPage: -1, // -1のときは全項目
    position: "top",
    perPageDropdown: [3, 5],
    dropdownAllowAll: true,
    setCurrentPage: 1,
    nextLabel: "次へ",
    prevLabel: "前へ",
    rowsPerPageLabel: "1ページに表示する比較項目数",
    ofLabel: " / ",
    pageLabel: "ページ", // for 'pages' mode
    allLabel: "全項目",
};

////////////////////////////////////////////////////////////////////////////////
// onMountedライフサイクルフック
////////////////////////////////////////////////////////////////////////////////
Vue.onMounted(() => {
    table_rows.value = [
        {
            comparison_items: "Vue3対応",
            vue_good_table_next: "〇<br>基本的な動作は安定",
            vue_tables2: "<span style='font-size: 1.2em;'>△</span><br>v-tables3で対応しているが不完全",
            vuetable_2: "<span style='font-size: 1.8em;'>×</span>",
            grid_js: "〇<br>オリジナルがJavaScriptライブラリなので、Vue3のコンポーネントでラップ可能"
        },
        {
            comparison_items: "ソート",
            vue_good_table_next: "〇",
            vue_tables2: "〇",
            vuetable_2: "〇",
            grid_js: "〇"
        },
        {
            comparison_items: "ページネーション",
            vue_good_table_next: "〇",
            vue_tables2: "〇",
            vuetable_2: "〇",
            grid_js: "〇"
        },
        {
            comparison_items: "グループ表示",
            vue_good_table_next: "〇",
            vue_tables2: "<span style='font-size: 1.2em;'>◎</span><br>指定の要素で自動的にグループ化",
            vuetable_2: "？",
            grid_js: "<span style='font-size: 1.8em;'>×</span>"
        },
        {
            comparison_items: "ヘッダー/セルの<br>HTML対応",
            vue_good_table_next: "〇",
            vue_tables2: "〇",
            vuetable_2: "〇",
            grid_js: "〇"
        },
        {
            comparison_items: "テーブル構成の<br>カスタマイズ",
            vue_good_table_next: "〇<br>ある程度可能",
            vue_tables2: "<span style='font-size: 1.2em;'>◎</span><br>カスタムテンプレートで自由度大",
            vuetable_2: "？",
            grid_js: "<span style='font-size: 1.8em;'>×</span>"
        },
    ];
});
</script>

<template>
    <VueGoodTable v-bind:columns="table_columns" v-bind:rows="table_rows" v-bind:search-options="search_options"
        v-bind:sort-options="sort_options" v-bind:pagination-options="pagination_options">
        <template #table-column="props">
            <span v-if="props.column.label == 'vue-tables2'">
                {{ props.column.label }}<br>（v-tables3）
            </span>
            <span v-else>
                {{ props.column.label }}
            </span>
        </template>
    </VueGoodTable>
</template>

<style>
@import "https://cdn.jsdelivr.net/npm/vue-good-table-next@0.1.0/dist/vue-good-table-next.css";

table.vgt-table th,
table.vgt-table td {
    vertical-align: middle !important;
}

th.vgt-comparison-items {
    min-width: 10em !important;
}

th.vgt-vue-good-table-next,
th.vgt-vue-tables2,
th.vgt-vuetable-2,
th.vgt-grid-js {
    min-width: 15em !important;
}

td.vgt-vue-good-table-next,
td.vgt-vue-tables2,
td.vgt-vuetable-2,
td.vgt-grid-js {
    font-size: 0.8em;
}
</style>
////////////////////////////////////////////////////////////////////////////////
// vue-good-table-next モジュール
////////////////////////////////////////////////////////////////////////////////
import { VueGoodTable } from "https://cdn.jsdelivr.net/npm/vue-good-table-next@0.1.0/dist/vue-good-table.cjs.min.js";

"vue-good-table-next"モジュールをCDNサイト「https://cdn.jsdelivr.net」からインポートします。

<template>
    <VueGoodTable v-bind:columns="table_columns" v-bind:rows="table_rows" v-bind:search-options="search_options"
        v-bind:sort-options="sort_options" v-bind:pagination-options="pagination_options">
        <template #table-column="props">
            <span v-if="props.column.label == 'vue-tables2'">
                {{ props.column.label }}<br>（v-tables3）
            </span>
            <span v-else>
                {{ props.column.label }}
            </span>
        </template>
    </VueGoodTable>
</template>

インポートした"VueGoodTable"を<template>タグで配置します。

基本は、作成したSFCのローカル変数を"VueGoodTable"のプロパティーにバインドしているだけですが、

        <template #table-column="props">
            …
        </template>

の部分については、「vue-good-table-next」の公式ドキュメントの「Custom column headers」を参照してください。

また、テーブルのコンテンツ（"table_rows"）は、あえて"Vue.onMounted();"の中で設定しました。
実際の用途では、"table_rows"を動的に変更すると、テーブルのコンテンツがリアクティブに再表示されます。

まとめ

「vue-good-table-next」を使うと、WordPressの投稿に多機能なテーブルを手軽に実装できます。
しかも、Vueを使っているので、テーブルのコンテンツも簡単に更新/再表示ができます。

]]> https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%ab%e3%82%bd%e3%83%bc%e3%83%88%e3%82%84%e3%83%9a%e3%83%bc%e3%82%b8%e3%83%8d%e3%83%bc%e3%82%b7%e3%83%a7%e3%83%b3%e3%81%ae%e6%a9%9f%e8%83%bd%e3%82%92%e6%8c%81/feed/ 0 WordPressの投稿にVue3のSFCを読み込んでChart.jsのチャートを表示する https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%abvue3%e3%81%aesfc%e3%82%92%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a7chart-js%e3%81%ae%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e3%82%92%e8%a1%a8%e7%a4%ba/ https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%abvue3%e3%81%aesfc%e3%82%92%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a7chart-js%e3%81%ae%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e3%82%92%e8%a1%a8%e7%a4%ba/#respond Thu, 21 Apr 2022 12:38:47 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=10675
  1. 環境
  2. Chart.jsとは？
  3. 棒グラフを表示する
    1. コードの解説
    2. "bar_chart.vue"の中身
  4. ユーザーインターフェースで棒グラフを操作する
    1. "bar_chart_with_ui.vue"の中身
  5. まとめ

環境

このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。

vue.js3.2.31
vue3-sfc-loader0.8.4
chart.js3.6.0

この記事を書いた後、「vue-chartjs」のバージョン5がリリースされました。
「vue-chartjs」バージョン5では、最新の「Chart.js」バージョン4をサポートしています。
「Chart.js」バージョン4では、チャートのDataやOptionsが変更された場合、再描画するようになりました。なので、この記事で紹介した「Chart.js」を直接ラップする方法より、「vue-chartjs」バージョン5を利用した方が簡単で便利です。

📈 vue-chartjs
⚡ Easy and beautiful charts with Chart.js and Vue.js
vue-chartjs.org

Chart.jsとは？

「Chart.js」は、チャート（グラフ）を表示するJavaScriptライブラリです。
機能の豊富さと表示の美しさで、この「Chart.js」を越えるJavaScriptライブラリはないと思います。
MITライセンスで、無償で利用できます。

2021年の4月に、メジャーバージョンが「2.x」から「3.x」に変わり、仕様も大きく変わっています。
なので、今から「Chart.js」を利用する方は、バージョン「3.x」を使うことをお勧めします。

Vue3で「Chart.js」を使えるようにしたコンポーネント「vue-chartjs」もあります。
「vue-chartjs」のバージョン「4.x」から、「Chart.js」のバージョン「3.x」に対応しているので、Vueの環境で簡単に「Chart.js」を使いたい場合は、「vue-chartjs」を利用すると良いでしょう。

ただし、「vue-chartjs」のバージョン「4.0.5」では、ドキュメントに以下の記載があり、チャートのOptionsを変更しても、チャートが再描画されません。

Options
The options object is not currently implemented reactively. Therefore, if you dynamically change the chart options, they will not be recognized by the update data handler.

なので、この記事では「vue-chartjs」を使わず、「Chart.js」を直接ラップしたSFCを作成し、このコンポーネントでチャートを表示します。

WordPressの投稿にVueのSFCを読み込む方法については、以下の記事で紹介しています。

WordPressのサイトでVue3の単一ファイルコンポーネントを使う
「vue3-sfc-loader」を使うと、「Node.js」が無いブラウザ環境でもVue3の単一ファイルコンポーネントを使うことができます。
vitorec.co.jp

棒グラフを表示する

まずは、簡単な棒グラフを表示してみましょう。
このチャートは、「Chart.js」のドキュメントの最初の例に出てくる棒グラフです。

チャートが表示されている部分には、WordPressのブロックエディタで以下の「カスタム HTML」ブロックを配置しています。

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>

<div id="app"></div>

<script type="module">
    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader モジュール
    ////////////////////////////////////////////////////////////////////////////////
    import { loadModule } from "https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.esm.js";

    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader オプション
    // SFCファイルから外部のモジュールをimportできるオプション
    // 参考：https://github.com/FranckFreiburger/vue3-sfc-loader/issues/14#issuecomment-908849863
    ////////////////////////////////////////////////////////////////////////////////
    const vue3_sfc_loader_options = {
        moduleCache: { vue: Vue },
        getFile(url) {
            url = /.*?\.js|.mjs|.css|.less|.vue$/.test(url)
                ? url
                : `${url}.vue`;
            const type = /.*?\.js|.mjs$/.test(url)
                ? ".mjs"
                : /.*?\.vue$/.test(url)
                ? ".vue"
                : /.*?\.css$/.test(url)
                ? ".css"
                : ".vue";
            const getContentData = (asBinary) =>
                fetch(url).then((res) =>
                    !res.ok
                        ? Promise.reject(url)
                        : asBinary
                        ? res.arrayBuffer()
                        : res.text()
                );
            return { getContentData: getContentData, type: type };
        },
        addStyle(textContent) {
            let styleElement = document.createElement("style");
            document.head.insertBefore(
                Object.assign(styleElement, { textContent }),
                document.head.getElementsByTagName("style")[0] || null
            );
        },
        handleModule(type, getContentData, path, options) {
            switch (type) {
                case ".css":
                    return options.addStyle(getContentData(false));
                case ".less":
                    console.error(".......");
            }
        },
        log(type, ...args) {
            console.log(type, ...args);
        },
    };

    ////////////////////////////////////////////////////////////////////////////////
    // Vue.js アプリケーションインスタンス
    ////////////////////////////////////////////////////////////////////////////////
    const app = Vue.createApp({
        components: {
            "bar-chart": Vue.defineAsyncComponent(() =>
                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/bar_chart.vue",
                    vue3_sfc_loader_options
                )
            ),
        },
        template: `<bar-chart />`,
    });
    app.mount("#app");
</script>

コードの解説

前回の紹介記事「ブラウザ環境でVue3の単一ファイルコンポーネントを使う」からの差分を中心に解説します。

    ////////////////////////////////////////////////////////////////////////////////
    // Vue.js アプリケーションインスタンス
    ////////////////////////////////////////////////////////////////////////////////
    const app = Vue.createApp({
        components: {
            "bar-chart": Vue.defineAsyncComponent(() =>
                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/bar_chart.vue",
                    vue3_sfc_loader_options
                )
            ),
        },
        template: `<bar-chart />`,
    });
    app.mount("#app");

アプリケーションインスタンスの作成とマウントの方法は、前回の「ブラウザ環境でVue3の単一ファイルコンポーネントを使う」と同じ流れです。
違うのは、"bar_chart.vue"というSFCを"bar-chart"という名前のコンポーネントとして読み込んで、`<bar-chart />`で表示している点です。

"bar_chart.vue"の中身

"bar_chart.vue"の全体です。

<script setup>
////////////////////////////////////////////////////////////////////////////////
// Chart.js モジュール
////////////////////////////////////////////////////////////////////////////////
// Chart.jsモジュールのimportとregisterを行う
import { Chart, registerables } from "../chart.js-3.6.0/dist/chart.esm.js";
Chart.register(...registerables);

////////////////////////////////////////////////////////////////////////////////
// data
////////////////////////////////////////////////////////////////////////////////
let chart = {}; // チャートオブジェクト
const chart_height = 400; // チャートの高さ
let chart_options = { // チャートのオプション
    scales: {
        y: {
            beginAtZero: true
        }
    },
};
let chart_data = { // チャートのデータ
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        borderWidth: 1
    }]
};

////////////////////////////////////////////////////////////////////////////////
// onMountedライフサイクルフック
////////////////////////////////////////////////////////////////////////////////
Vue.onMounted(() => {
    renderChart();
});

////////////////////////////////////////////////////////////////////////////////
// チャートを描画する
////////////////////////////////////////////////////////////////////////////////
const renderChart = () => {
    const ctx = document.getElementById("chart").getContext("2d");
    chart = new Chart(ctx, {
        type: "bar",
        data: chart_data,
        options: chart_options,
    });
};
</script>

<template>
    <div>
        <canvas id="chart" width="100%" v-bind:height="chart_height"></canvas>
    </div>
</template>

<style>
</style>

"bar_chart.vue"のセットアップは、

<script>
export default defineComponent({
    setup() {
        …
    },
});
</script>

を使わずに、

<script setup>
    …
</script>

の中でやっています。

<script setup>については、Vue3の公式ドキュメント「SFC<script setup>」を参照してください。
<script setup>の利便性については、以下の記事が参考になります。

【Vue.js 3.2】`` 構文がすごくすごい
zenn.dev
 
////////////////////////////////////////////////////////////////////////////////
// Chart.js モジュール
////////////////////////////////////////////////////////////////////////////////
// Chart.jsモジュールのimportとregisterを行う
import { Chart, registerables } from "../chart.js-3.6.0/dist/chart.esm.js";
Chart.register(...registerables);

「Chart.js」ライブラリ一式をCDNサイト「https://www.jsdelivr.com/package/npm/chart.js」からダウンロードして、適当なフォルダに保存します。
「ちょいプラ素材」のブログは、WordPressのテーマに「Cocoon」を使っています。
今回は、「Cocoon」の子テーマ「cocoon-child-master」の下に"chart.js-3.6.0"というフォルダを作って保存しました。

SFC"bar_chart.vue"が保存されているフォルダからの相対パス"../chart.js-3.6.0/dist/chart.esm.js"で「Chart.js」のESモジュール"chart.esm.js"をインポートします。

「Chart.js」モジュールをインポートした後は、実際に利用するモジュールの登録（register）が必要です。1つ1つのモジュールを登録するのは面倒なので、"Chart.register(...registerables);"でまとめて登録しています。

////////////////////////////////////////////////////////////////////////////////
// data
////////////////////////////////////////////////////////////////////////////////
let chart = {}; // チャートオブジェクト
const chart_height = 400; // チャートの高さ
let chart_options = { // チャートのオプション
    …
};
let chart_data = { // チャートのデータ
    …
};

このSFCだけで使うデータを宣言しています。
それぞれのデータの意味は、コメントを見てください。

////////////////////////////////////////////////////////////////////////////////
// onMountedライフサイクルフック
////////////////////////////////////////////////////////////////////////////////
Vue.onMounted(() => {
    renderChart();
});

このSFCがマウントされたときに呼ばれる、ライフサイクルフックです。
SFCがマウントされたら、この後に説明する"renderChart();"を実行します。

////////////////////////////////////////////////////////////////////////////////
// チャートを描画する
////////////////////////////////////////////////////////////////////////////////
const renderChart = () => {
    const ctx = document.getElementById("chart").getContext("2d");
    chart = new Chart(ctx, {
        type: "bar",
        data: chart_data,
        options: chart_options,
    });
};

チャートを描画する処理です。
この後の<template>タグで配置される<canvas id="chart">要素に「Chart.js」の"bar"モジュール（棒グラフモジュール）を紐づけます。

また、"chart = new Chart();"で作成した「Chart.js」のモジュール（JavaScriptのオブジェクト）を変数"chart"に保存しておきます。
こうすることで、「Chart.js」のメソッド（関数）を使って、作成した"bar"モジュールを操作することができます。

<template>
    <div>
        <canvas id="chart" width="100%" v-bind:height="chart_height"></canvas>
    </div>
</template>

<template>タグで<canvas id="chart">要素を配置します。

ユーザーインターフェースで棒グラフを操作する

次に、先ほどの棒グラフを表示するSFCにユーザーインターフェースを追加して、チャートを操作してみましょう。
ユーザーインターフェースとデータの連携は、Vueが得意とするところです。

［データを変更］ボタンを押すと、データが0～50の範囲の整数にランダムに変化します。
［縦軸の最大値］スライダーを動かすと、チャートの縦軸の最大値を変更できます。

"bar_chart_with_ui.vue"の中身

新しく作成したSFC"bar_chart_with_ui.vue"の全体です。

<script setup>
////////////////////////////////////////////////////////////////////////////////
// Chart.js モジュール
////////////////////////////////////////////////////////////////////////////////
// Chart.jsモジュールのimportとregisterを行う
import { Chart, registerables } from "../chart.js-3.6.0/dist/chart.esm.js";
Chart.register(...registerables);

////////////////////////////////////////////////////////////////////////////////
// data
////////////////////////////////////////////////////////////////////////////////
let chart = {}; // チャートオブジェクト
const chart_height = 400; // チャートの高さ
let y_max = Vue.ref(50); // 縦軸の最大値
let chart_options = { // チャートのオプション
    scales: {
        y: {
            beginAtZero: true,
            min: 0,
            max: y_max.value,
        }
    },
};
let chart_data = { // チャートのデータ
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: "# of Votes",
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
            "rgba(255, 99, 132, 0.2)",
            "rgba(54, 162, 235, 0.2)",
            "rgba(255, 206, 86, 0.2)",
            "rgba(75, 192, 192, 0.2)",
            "rgba(153, 102, 255, 0.2)",
            "rgba(255, 159, 64, 0.2)"
        ],
        borderColor: [
            "rgba(255, 99, 132, 1)",
            "rgba(54, 162, 235, 1)",
            "rgba(255, 206, 86, 1)",
            "rgba(75, 192, 192, 1)",
            "rgba(153, 102, 255, 1)",
            "rgba(255, 159, 64, 1)"
        ],
        borderWidth: 1
    }]
};

////////////////////////////////////////////////////////////////////////////////
// onMountedライフサイクルフック
////////////////////////////////////////////////////////////////////////////////
Vue.onMounted(() => {
    renderChart();
});

////////////////////////////////////////////////////////////////////////////////
// チャートを描画する
////////////////////////////////////////////////////////////////////////////////
const renderChart = () => {
    const ctx = document.getElementById("chart2").getContext("2d");
    chart = new Chart(ctx, {
        type: "bar",
        data: chart_data,
        options: chart_options,
    });
};

////////////////////////////////////////////////////////////////////////////////
// チャートのデータを変更する
////////////////////////////////////////////////////////////////////////////////
const onChangeData = () => {
    chart_data.datasets[0].data = [
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
    ];
    chart.update(); // チャートを再描画する
};

////////////////////////////////////////////////////////////////////////////////
// 縦軸の最大値を変更する
////////////////////////////////////////////////////////////////////////////////
const onChangeYMax = () => {
    chart_options.scales.y.max = y_max.value;
    chart.update(); // チャートを再描画する
};
</script>

<template>
    <div>
        <canvas id="chart2" width="100%" v-bind:height="chart_height"></canvas>
        <form class="chart-ui-form">
            <input type="button" class="data-change-button" v-on:click="onChangeData" value="データを変更" />
            <div class="chart-range-container">
                <span style="margin-right: 0.2em">縦軸の最大値　10</span>
                <input type="range" id="view-time-start-range" class="y-max-range" v-model.number="y_max" min="10"
                    max="100" step="10" v-on:mouseup="onChangeYMax" v-on:touchend="onChangeYMax" />
                <span style="margin-left: 0.2em">100</span>
            </div>
        </form>
    </div>
</template>

<style>
.chart-ui-form {
    margin: 20px;
}

.chart-range-container {
    margin-left: 10px;
    margin-top: 10px;
}

.data-change-button {
    color: #fff;
    background-color: #3b83d8;
    font-weight: bold;
    border-radius: 4px;
    display: inline-block;
    cursor: pointer;
    line-height: normal;
    padding: 7px 13px;
    text-decoration: none;
    text-align: center;
    font-size: 14px;
    border: 2px solid transparent;
    position: relative;
}

.y-max-range {
    max-width: 40%;
    width: 40%;
}
</style>

SFCの変更点を解説します。

let y_max = Vue.ref(50); // 縦軸の最大値
let chart_options = { // チャートのオプション
    scales: {
        y: {
            beginAtZero: true,
            min: 0,
            max: y_max.value,
        }
    },
};

チャートのオプションを指定する"chart_options"の"scale.y"オブジェクトに、"min"と"max"を追加しました。
"min"、"max"を指定しない場合は、データの値に応じて、「Chart.js」が軸の表示を最適に調整してくれます。

"max"には、新しく追加した変数"y_max"の値を設定します。
また、変数"y_max"は、Vueの「refメソッド」でリアクティブな変数にしています。

////////////////////////////////////////////////////////////////////////////////
// チャートのデータを変更する
////////////////////////////////////////////////////////////////////////////////
const onChangeData = () => {
    chart_data.datasets[0].data = [
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
        Math.floor(Math.random() * 51),
    ];
    chart.update(); // チャートを再描画する
};

［データを変更］ボタンが押されたときに呼ばれるイベントハンドラーです。
チャートのデータが0～50の範囲の整数にランダムに変化します。
実際の用途では、チャートに表示したいデータの設定処理を実装します。

その後、"chart.update();"でチャートを再描画します。

////////////////////////////////////////////////////////////////////////////////
// 縦軸の最大値を変更する
////////////////////////////////////////////////////////////////////////////////
const onChangeYMax = () => {
    chart_options.scales.y.max = y_max.value;
    chart.update(); // チャートを再描画する
};

［縦軸の最大値］スライダーを動かした後、マウスのボタンを離すと呼ばれるイベントハンドラーです。
チャートのオプション"chart_options.scales.y.max"の値を変更した後、"chart.update();"でチャートを再描画します。

<template>
    …
</template>

<style>
    …
</style>

<template>タグと<style>タグで、SFCの外観（ビュー）を定義します。

以上のように、VueのSFCを使うと、

  • ユーザーインターフェースの操作をトリガーにして、
  • 必要なデータやオプションを変更し、
  • 「Chart.js」のupdate()メソッドを呼び出すだけで、

チャートの表示を動的に、しかも簡単に操作できます。

まとめ

「Chart.js」を直接ラップしたSFCを作成し、コンポーネントでチャートを表示する方法を紹介しました。

チャートのデータやオプションを動的に変えることができるので、WordPressのデータベースのデータをビジュアルに表示したり、データが保存されているCSVファイルをアップロードして、CSVファイルのデータをチャートで確認したり、いろいろなシチュエーションで活用できるはずです。

次は、WordPressの投稿に「vue-good-table-next」のテーブルを表示してみましょう。

WordPressの投稿にソートやページネーションの機能を持ったテーブルを実装する
VueのSFCを介して「vue-good-table-next」を使うと、WordPressの投稿に多機能なテーブルを手軽に実装できます。
vitorec.co.jp
2024.07.25
]]> https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e6%8a%95%e7%a8%bf%e3%81%abvue3%e3%81%aesfc%e3%82%92%e8%aa%ad%e3%81%bf%e8%be%bc%e3%82%93%e3%81%a7chart-js%e3%81%ae%e3%83%81%e3%83%a3%e3%83%bc%e3%83%88%e3%82%92%e8%a1%a8%e7%a4%ba/feed/ 0 WordPressのサイトでVue3の単一ファイルコンポーネントを使う https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%81%a7vue3%e3%81%ae%e5%8d%98%e4%b8%80%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%82%92/ https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%81%a7vue3%e3%81%ae%e5%8d%98%e4%b8%80%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%82%92/#respond Wed, 20 Apr 2022 09:52:07 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=10600
  1. 環境
  2. Vueのコンポーネントとは？
  3. 単一ファイルコンポーネントとは？
  4. ブラウザ環境で単一ファイルコンポーネントを使うには？
  5. 「vue3-sfc-loader」の使い方
    1. コードの解説
    2. "hello_world.vue"の中身
  6. まとめ

環境

このページで使用しているフレームワークやライブラリのバージョンは、以下のとおりです。

vue.js3.2.31
vue3-sfc-loader0.8.4

Vueのコンポーネントとは？

Vueでは、大きなアプリケーション（下図の左側）を小さな部品の組み合わせで構成（下図の右側）することができます。
この小さな部品（下図の緑色の箱）に相当するのがコンポーネントです。

詳しくは、Vueの公式ドキュメント「コンポーネントによる構成」を参照してください。

単一ファイルコンポーネントとは？

単一ファイルコンポーネント（Single-File Component：以後SFCと呼ぶ）は、Vueを使う上で、とても便利な仕組みです。

SFCは、下図のように、「JavaScript：<script>タグ」「HTML：<template>タグ」「CSS：<style>タグ」を1つにまとめて記述したファイルのことです。
このファイルの拡張子は「*.vue」で、SFCのことを、別名「*.vue」ファイルということがあります。

SFCの「JavaScript：<script>タグ」でコンポーネントの動作や処理を記述することができ、「HTML：<template>タグ」「CSS：<style>タグ」でコンポーネントの外観を指定することができます。
つまり、「*.vue」ファイル1つで、コンポーネントの動作と外観が規定できるということです。

大きなアプリケーションを小さなコンポーネントに分解すれば、ソースコードの可読性も上がりますし、メンテナンスも容易になります。

また、このSFCに汎用性を持たせて、再利用できるように作っておけば、いろいろなアプリケーションで流用できます。

ブラウザ環境で単一ファイルコンポーネントを使うには？

とっても便利なSFCなのですが、ブラウザ環境で動作するJavaScriptでは、「*.vue」ファイルをそのまま読み込むことができません。

サーバーの「Node.js」にインストールした「weback」や「Vue CLI」、「Vite」などの開発環境では、「*.vue」ファイルを直接読み込むことができます。

Vueの便利な機能の1つであるSFCが使えないのは、とても残念です。

ところが、「vue3-sfc-loader」というライブラリを使えば、ブラウザ環境でも「*.vue」ファイルを直接読み込んで、SFCの仕組みを活用することができます。

Vue3/Vue2 Single File Component loader.

Load .vue files dynamically at runtime from your html/js. No node.js environment, no (webpack) build step needed.

上記「vue3-sfc-loader」の概要にも書いてあるように、"No node.js environment, no (webpack) build step needed."、つまり、「Node.js」も「webpack」も無いブラウザ環境で、VueのSFCを使えるようになります。
ブラウザ環境で、SFCがサクッと使えるようになると、WordPressサイトのような「Node.js」の無い環境で、Vueの便利さと簡便さが最大限発揮できると思います。

「vue3-sfc-loader」のオプションを工夫すると、読み込んだ「*.vue」ファイルから、別の「*.vue」ファイルを読み込んだり、外部サイトのJavaScriptライブラリをインポートすることもできます。

「vue3-sfc-loader」の使い方

実際に、「vue3-sfc-loader」を使って、SFCを読み込んでみましょう。

どうでしょうか？
赤い文字で「Hello World!」と表示されましたか？

「Hello World!」と表示されている部分には、WordPressのブロックエディタで「カスタム HTML」ブロックを配置しています。

「カスタム HTML」ブロックには、以下のHTMLコードを入力します。

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>

<div id="app"></div>

<script type="module">
    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader モジュール
    ////////////////////////////////////////////////////////////////////////////////
    import { loadModule } from "https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.esm.js";

    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader オプション
    // SFCファイルから外部のモジュールをimportできるオプション
    // 参考：https://github.com/FranckFreiburger/vue3-sfc-loader/issues/14#issuecomment-908849863
    ////////////////////////////////////////////////////////////////////////////////
    const vue3_sfc_loader_options = {
        moduleCache: { vue: Vue },
        getFile(url) {
            url = /.*?.js|.mjs|.css|.less|.vue$/.test(url)
                ? url
                : `${url}.vue`;
            const type = /.*?.js|.mjs$/.test(url)
                ? ".mjs"
                : /.*?.vue$/.test(url)
                ? ".vue"
                : /.*?.css$/.test(url)
                ? ".css"
                : ".vue";
            const getContentData = (asBinary) =>
                fetch(url).then((res) =>
                    !res.ok
                        ? Promise.reject(url)
                        : asBinary
                        ? res.arrayBuffer()
                        : res.text()
                );
            return { getContentData: getContentData, type: type };
        },
        addStyle(textContent) {
            let styleElement = document.createElement("style");
            document.head.insertBefore(
                Object.assign(styleElement, { textContent }),
                document.head.getElementsByTagName("style")[0] || null
            );
        },
        handleModule(type, getContentData, path, options) {
            switch (type) {
                case ".css":
                    return options.addStyle(getContentData(false));
                case ".less":
                    console.error(".......");
            }
        },
        log(type, ...args) {
            console.log(type, ...args);
        },
    };

    ////////////////////////////////////////////////////////////////////////////////
    // Vue.js アプリケーションインスタンス
    ////////////////////////////////////////////////////////////////////////////////
    const app = Vue.createApp({
        components: {
            "hello-world": Vue.defineAsyncComponent(() =>
                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/hello_world.vue",
                    vue3_sfc_loader_options
                )
            ),
        },
        template: `<hello-world />`,
    });
    app.mount("#app");
</script>

コードの解説

では、コードの中身を解説します。

<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>

VueをCDNサイト「https://cdn.jsdelivr.net」からインポートします。
"vue@3.2.31"なので、メジャーバージョンが「3」です。
なので、Vue3を読み込んでいます。

投稿やページの最初に1回インポートすれば、それ以降、Vueのメソッド（関数）は、"Vue.createApp();"のように「Vue.func()」で利用できます。

<div id="app"></div>

Vueのアプリケーションインスタンスをマウントする<div>タグを"app"というidで配置します。
この<div>要素が、この後に読み込むSFC、"hello_world.vue"で置き換えられます。

<script type="module">
　…
<script>

<script type="module">～</script>が、SFCを読み込むJavaScriptになります。
JavaScriptでimport文を使うので、「type="module"」にします。

    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader モジュール
    ////////////////////////////////////////////////////////////////////////////////
    import { loadModule } from "https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.8.4/dist/vue3-sfc-loader.esm.js";

「vue3-sfc-loader」をCDNサイト「https://cdn.jsdelivr.net」からインポートします。
ファイル名が"vue3-sfc-loader.esm.js"になっていて、"esm"という文字列が入っています。
これは、import文でインポートできる「ESモジュール」であることを示しています。

    ////////////////////////////////////////////////////////////////////////////////
    // vue3-sfc-loader オプション
    // SFCファイルから外部のモジュールをimportできるオプション
    // 参考：https://github.com/FranckFreiburger/vue3-sfc-loader/issues/14#issuecomment-908849863
    ////////////////////////////////////////////////////////////////////////////////
    const vue3_sfc_loader_options = {
        moduleCache: { vue: Vue },
        getFile(url) {
            url = /.*?.js|.mjs|.css|.less|.vue$/.test(url)
                ? url
                : `${url}.vue`;
            const type = /.*?.js|.mjs$/.test(url)
                ? ".mjs"
                : /.*?.vue$/.test(url)
                ? ".vue"
                : /.*?.css$/.test(url)
                ? ".css"
                : ".vue";
            const getContentData = (asBinary) =>
                fetch(url).then((res) =>
                    !res.ok
                        ? Promise.reject(url)
                        : asBinary
                        ? res.arrayBuffer()
                        : res.text()
                );
            return { getContentData: getContentData, type: type };
        },
        addStyle(textContent) {
            let styleElement = document.createElement("style");
            document.head.insertBefore(
                Object.assign(styleElement, { textContent }),
                document.head.getElementsByTagName("style")[0] || null
            );
        },
        handleModule(type, getContentData, path, options) {
            switch (type) {
                case ".css":
                    return options.addStyle(getContentData(false));
                case ".less":
                    console.error(".......");
            }
        },
        log(type, ...args) {
            console.log(type, ...args);
        },
    };

"vue3_sfc_loader_options"は、「vue3-sfc-loader」でSFCを読み込むときのオプションです。
読み込んだSFCファイルから外部のモジュールをimportできるオプションになっています。

Is it possible to import from an ES6 module in a component (SFC) ? ?? Issue #14 ?? FranckFreiburger/vue3-sfc-loader
Hi, First I wan't to thank you for this librairy which is going to be very useful for me. I can't manage to import from ...
github.com
 
    ////////////////////////////////////////////////////////////////////////////////
    // Vue.js アプリケーションインスタンス
    ////////////////////////////////////////////////////////////////////////////////
    const app = Vue.createApp({
        components: {
            "hello-world": Vue.defineAsyncComponent(() =>
                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/hello_world.vue",
                    vue3_sfc_loader_options
                )
            ),
        },
        template: `<hello-world />`,
    });
    app.mount("#app");

"Vue.createApp"で、Vueのアプリケーションインスタンスを作成した後、"app.mount("#app");"で、最初に作成した<div>タグに、作成したアプリケーションインスタンスをマウントしています。

                loadModule(
                    "../wp-content/themes/cocoon-child-master/vue-components/hello_world.vue",
                    vue3_sfc_loader_options
                )

「vue3-sfc-loader」の"loadModule"関数で、SFCファイルを読み込みます。
今回は、"hello_world.vue"という名前のSFCファイルを"../wp-content/themes/cocoon-child-master/vue-components/"フォルダの下に置いています。

「ちょいプラ素材」のブログは、WordPressのテーマに「Cocoon」を使っています。
なので、「Cocoon」の子テーマ「cocoon-child-master」の下に"vue-components"というフォルダを作りました。

        components: {
            "hello-world": Vue.defineAsyncComponent(() =>

読み込んだSFCは、"hello-world"という名前のコンポーネントになります。

        template: `<hello-world />`,

"hello-world"コンポーネントを<hello-world>タグでHTML要素として配置します。

"hello_world.vue"の中身

"hello_world.vue"の中身は、Vueの公式ガイド「単一ファイルコンポーネント」で紹介されている単純なテンプレート構文の例のSFCです。

<script>
export default {
  data() {
    return {
      greeting: 'Hello World!'
    }
  }
}
</script>

<template>
  <p class="greeting">{{ greeting }}</p>
</template>

<style>
.greeting {
  color: red;
  font-weight: bold;
}
</style>

"greeting"というテンプレートを"color: red;"と"font-weight: bold;"のスタイルで表示するというものです。
"greeting"というテンプレートの文字列は、"Hello World!"です。

まとめ

「vue3-sfc-loader」ライブラリを使えば、WordPressの「カスタム HTML」ブロックから、VueのSFCを読み込むことができます。
「カスタム HTML」ブロックには、SFCのロード処理だけを書いて、実際にやりたい表示や処理は、SFC（1つの「*.vue」ファイル）にまとめることができます。
さらに凝った表示や処理をさせたい場合は、適宜、いくつかのSFCに分割すれば良いでしょう。

この方法で、WordPressサイトに簡単にVueを導入し、WordPressサイトのページ中に、複雑な表示や処理を実装することができます。

次は、もう少し面白いSFCの例として、WordPressの投稿に「Chart.js」のチャート（グラフ）を表示してみましょう。

WordPressの投稿にVue3のSFCを読み込んでChart.jsのチャートを表示する
WordPressの投稿に「Chart.js」をラップしたVueのSFCを読み込み、チャート（グラフ）を表示します。
vitorec.co.jp
2024.05.26
]]> https://vitorec.co.jp/choi-plus-sozai/wordpress%e3%81%ae%e3%82%b5%e3%82%a4%e3%83%88%e3%81%a7vue3%e3%81%ae%e5%8d%98%e4%b8%80%e3%83%95%e3%82%a1%e3%82%a4%e3%83%ab%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d%e3%83%b3%e3%83%88%e3%82%92/feed/ 0 そろそろVue3を使ってみるか https://vitorec.co.jp/choi-plus-sozai/%e3%81%9d%e3%82%8d%e3%81%9d%e3%82%8dvue3%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%8b%e3%81%8b/ https://vitorec.co.jp/choi-plus-sozai/%e3%81%9d%e3%82%8d%e3%81%9d%e3%82%8dvue3%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%8b%e3%81%8b/#respond Sat, 02 Apr 2022 14:25:57 +0000 https://vitorec.co.jp/choi-plus-sozai/?p=10511
  1. Vue.jsは、とっても楽しい
  2. Vue3へ移行
  3. 使いたいのはローカルのブラウザ環境
    1. WordPressで作成されたWebサイトが表示されるまでの流れ
    2. サーバー側にインストールしたNode.jsでJavaScriptを使う場合
    3. クライアント側のブラウザで動作するVueとは？
    4. CDNからVueを読み込む
  4. まとめ

Vue.jsは、とっても楽しい

2017年頃、ネットでReactとかVueといったJavaScriptのフレームワークの話題を頻繁に目にするようになって、自分のWordPressサイトのフロントエンドでも、ReactかVueを使ってみたいと思い始めました。

ReactにするかVueにするか、いろいろ調べた結果、

  • 既存のJavaScriptのプログラムに少しずつ導入できそうなこと
  • Vue2の日本語サイトのイントロダクションの説明がとてもわかりやすかったこと

から、Vue.js（当時のバージョンは、2.xだったので、Vue2と呼ぶ）を使い始めました。

Vue2を使うまでは、JQueryを使ってHTMLの要素を動的に操作したりしていましたが、いざ、Vue2を使い始めると、

「なんて便利なの！」
「もっと早く使えば良かった。」

という感じで、ドハマりしてしまいました。

何より、JavaScriptの変数やプロパティーが変わると、更新が必要なDOMが自動で置き換わるリアクティブな動作が心地いいんです。

状態の変化に応じて、自分でHTML要素をJQueryで変更する面倒な作業には、もう戻れません。

「カバの樹」さんのサイトなどで紹介されているVueのライブラリも便利そうなものが多く、気に入ったVueライブラリを自分のサイトに組み込むのが楽しい作業になりました。

Vue3へ移行

Vue.jsは、2020年の9月にメジャーバージョンが2.xから3.0にアップし、さまざまな改良が加えられました。

いろいろネットの情報を調べてみると、Vue.js本体を2.xから3.0に単純に差し替えるだけではダメで、自分の書いたJavaScriptのプログラムを変更しないといけないことがわかりました。

以下のように、Vueアプリケーションを組み込む、最初のコードから違います。

// Vue2の場合
var app = new Vue({
  el: '#app',
    …
})
// Vue3の場合
Vue.createApp(Counter).mount('#app')

ということで、ちょっと面倒臭くなり、しばらく放っておきました。

ただ、HTMLのテーブルにいろいろな機能を追加するために、ずっと利用させてもらってきたJQueryの「teblesorter」というライブラリを、テーブル用Vueライブラリ「vue-good-table-next」へ置き換えるのを機に、Vue3に移行することにしました。

使いたいのはローカルのブラウザ環境

ここで一つ注意があります。

ネットでVueの情報を閲覧すると、そのほとんどが、サーバー側にNode.jsをインストールして、そのNode.jsの環境でVueを実行させる話です。

Node.jsは、WindowsやMACなど、手元（ローカル）のPCにインストールすることもできます。
ただし、ローカルのPCにインストールしたNode.jsの環境は、あくまでサーバーとしての位置づけです。
ローカルPCの中に、仮想のサーバーを作るイメージです。

この「ちょいプラ素材」のブログで取り上げるのは、サーバー側にインストールしたNode.js環境の話ではなく、手元（ローカル）のブラウザ環境でVue3を利用する方法です。

WordPressで作成されたWebサイトが表示されるまでの流れ

  • クライアント側：手元（ローカル）のブラウザ環境
  • サーバー側：サーバー環境

の区別を理解するために、WordPressで作成されたWebサイトの情報やコンテンツが、ローカルPCのブラウザに表示されるまでの流れを説明します。

この「ちょいプラ素材」のブログも、WordPressを利用したWebサイトです。
皆さんの使っているブラウザから、「ちょいプラ素材」にアクセスしたとき、「ちょいプラ素材」のコンテンツがブラウザに表示されるまでの流れを下図で説明します。

  1. ブラウザから「ちょいプラ素材」のURLを指定してWebサーバーにアクセスします。
    　
  2. Webサーバーは、URLを解釈して、URLに応じたPHPプログラムを実行します。
    Webサーバーには、Linuxサーバーで利用されるAPACHE、NGINX、OpenLiteSpeedや、Windowsサーバーで利用されるIISなどがあります。
    　
  3. PHPプログラムは、MySQLを経由して、データベースに保存されているコンテンツ（文章やデータ）を読み出します。
    MariaDBなどMySQL互換のデータベースサーバーが使われることもあります。
    　
  4. データベースから読み出されたコンテンツは、PHPプログラムによって処理され、Webサーバーを通して、HTML / CSS / JavaScript の形式でクライアント側に送られます。
    　
  5. ブラウザは、クライアント側に送られたHTML / CSS を解釈し、画面に表示します。
    JavaScriptが含まれるWebページでは、JavaScriptのプログラムを実行します。
    JavaScript（場合によっては、JavaScriptのjQueryライブラリ、JavaScriptのフレームワークのVue.jsなど）を利用するとHTMLの要素を動的に変更することができます。
    「ちょいプラ素材」では、JavaScriptライブラリやVueライブラリを使って、表やグラフを表示したり、ユーザーインターフェースを構成したりしています。
    　
  6. ブラウザはクライアント側にあるので、ブラウザからサーバー側のデータベースに直接アクセスできません。
    ユーザーがインターフェースを操作して入力したパラメーターをサーバーに送ったり、表やグラフの元になるデータをサーバーに要求したりする場合は、Ajax通信を使います。
    URLを指定したアクセスでは、Webページ全体の表示が更新（リセット）されてしまいますが、Ajax通信を使うと、Webページの表示をリセットしないで、クライアントとサーバーの間でデータのやりとりができます。
    Ajax通信は、jQueryライブラリやフレームワークのVue.jsにaxiosを組み合わせて利用した方が楽に処理できます。

余談になりますが、2022年4月現在、「W3Techs」の調査データによると、全世界のWebサイトの43%がWordPressを利用しています。
コンテンツ管理システムでのシェアは、64.5%です。

これだけ広くWordPressが使われるようになった理由は、WordPressがリリースされた当時、一番メジャーだった以下のサーバーシステムを組み合わせて構成したので、ITエンジニアに抵抗感なく受け入れられたからだと思います。

  • Webサーバー：APACHE
  • アプリケーションサーバー：PHP
  • データベースサーバー：MySQL

サーバー側にインストールしたNode.jsでJavaScriptを使う場合

先ほど、

ネットでVueの情報を閲覧すると、そのほとんどが、サーバー側にNode.jsをインストールして、そのNode.jsの環境でVueを実行させる話です。

と説明しました。

上図で示したように、WordPressのアプリケーションサーバーは、PHPを使っています。

WordPress以外の一部のWebサイトでは、サーバーにNode.jsをインストールし、サーバー側でもJavaScriptが動作する環境を用意して、この環境で動作するJavaScriptをアプリケーションサーバーとして使うことがあります。

Vueは、JavaScriptのフレームワークですから、当然、サーバー側のNode.js環境でも動作します。
ネットに溢れているVueの情報は、サーバー側のNode.js環境の話がほとんどです。

クライアント側のブラウザで動作するVueとは？

では、「クライアント側のブラウザで動作するVue」とは、どういう話でしょうか？

上図で、

  1. データベースから読み出されたコンテンツは、PHPプログラムによって処理され、Webサーバーを通して、HTML / CSS / JavaScript の形式でクライアント側に送られます。
    　
  2. ブラウザは、クライアント側に送られたHTML / CSS を解釈し、画面に表示します。
    JavaScriptがが含まれるWebページでは、JavaScriptのプログラムを実行します。

と説明しました。

クライアント側に送られたJavaScript（④）は、ブラウザで実行（⑤）されますが、このブラウザで実行されるJavaScriptでも、Vueを動作させることができます。

「クライアント側のブラウザで動作するVue」とは、ブラウザで実行（⑤）されるJavaScriptで、Vueを利用するという意味です。

CDNからVueを読み込む

ブラウザで動作するJavaScriptでVueを利用するためには、Vue本体（Vue.js）を読み込む必要があります。

上図の④で、Webサーバーから送られるJavaScriptに、Vue本体を含めても良いのですが、

  • サーバー側の処理や通信トラフィックに負荷がかかる
  • 個々のサーバーで、Vue本体のバージョン管理をするのは大変

という理由で、実際には行われていません。

では、どうするか？

④で送られるHTMLやJavaScriptの中に、Vue本体を読み込む処理（コード）を埋め込みます。
Vue本体を読み込むコードは、1行で書けるほどの小さいサイズなので、④で送られるHTMLやJavaScriptのデータ量はほとんど増えません。

以下に、実際のコードの例を示します。

<!-- HTMLから読み込む場合 -->
<script src="https://unpkg.com/vue@next"></script>
// JavaScriptから読み込む場合
import Vue from "https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.esm-browser.js";

上記のコードで、「3.2.31」は、Vueのバージョンです。
メジャーバージョンが「3」なので、Vue3を読み込んでいます。

また、Vue本体を「https://unpkg.com」や「https://cdn.jsdelivr.net」といった、CDNサイトから読み込んでいます。

CDNは、「Content Delivery Network：コンテンツデリバリーネットワーク」の略で、

ウェブサーバーの負荷を軽減する目的で、ウェブコンテンツを効率的かつスピーディーに配信できるように工夫されたネットワーク

の仕組みです。

まとめ

今後、「ちょいプラ素材」では、ローカルのブラウザ環境でVue3を使う方法を説明します。

具体的には、

  • ブラウザ環境で、SFC（Single-File Component：単一ファイルコンポーネント、別名 *.vueファイル）を使う方法
  • 美しいグラフを作成できる有名なJavaScriptライブラリ「Chart.js」をVue3で使う方法
  • テーブル用の高機能なVueライブラリ「vue-good-table-next」をVue3で使う方法

などを紹介しようと思います。

WordPressのサイトでVue3の単一ファイルコンポーネントを使う
「vue3-sfc-loader」を使うと、「Node.js」が無いブラウザ環境でもVue3の単一ファイルコンポーネントを使うことができます。
vitorec.co.jp
2025.10.18
WordPressの投稿にVue3のSFCを読み込んでChart.jsのチャートを表示する
WordPressの投稿に「Chart.js」をラップしたVueのSFCを読み込み、チャート（グラフ）を表示します。
vitorec.co.jp
2024.05.26
WordPressの投稿にソートやページネーションの機能を持ったテーブルを実装する
VueのSFCを介して「vue-good-table-next」を使うと、WordPressの投稿に多機能なテーブルを手軽に実装できます。
vitorec.co.jp
2024.07.25
]]> https://vitorec.co.jp/choi-plus-sozai/%e3%81%9d%e3%82%8d%e3%81%9d%e3%82%8dvue3%e3%82%92%e4%bd%bf%e3%81%a3%e3%81%a6%e3%81%bf%e3%82%8b%e3%81%8b/feed/ 0