[ Vue.js ] Fetch を使って Get / Post を発行する

Vue.js を用いて HTTP Get や Post を発行する方法はいくつか存在しますが、 本記事では Fetch を用いて Vue CLI プロジェクト から HTTP Get / Post を発行する方法について整理していきます。 @vue/cli 4.5.13 npm: 7.24.0 node: v14.17.0 Get 発行処理の実装 Vue CLI プロジェクトの作成 まずは、 Vue CLI プロジェクト を作成していきます。今回は Vue 3 で作成した プロジェクト を用いることにします。 続いて、今回 Get / Post を実装する Fetch.vue という名称の コンポーネント を準備します。 Get / Post のテスト先として httpbin.org という テスト サイト を利用することにします。 こちらの サービス では、5種類の HTTP Method を提供していますが、 今回は以下の 2 つを利用させていただくことにします。 /get /post 引用元: https://httpbin.org/#/HTTP_Methods Fetch.vue Template 部分の作成 今回は Get パラメータ として 名前 (name) と 年齢 (age) の2つを持つ Get Request を発行してみます。 npm run serve を用いて実行すると 以下の UI が表示されます。 Fetch.vue Script 部分の作成 続いて、Get ボタン を クリック することで Fetch を使って Get を発行する部分を実装します。 Get パラメータ には UI … Read more

[ Vue 3 ] Vue CLI を GCP App Engine に デプロイ する手順

Vue CLI (Vue3) で作成した サンプルアプリケーションを GCP App Engine に デプロイ する手順をまとめてみました。なお、こちらの記事 でまとめている通り、ライブラリの追加など、細かなカスタマイズが必要な場合は 同じ GCP であれば Cloud Run を用いる必要があります。 環境 npm: 7.23.0 node: v14.17.0 vue: @vue/cli 4.5.12 前提 GCP プロジェクト作成済み GCP プロジェクトの課金設定済み Google Cloud SDK (gcloud コマンド ) 導入済み ローカル 側準備 Vue CLI プロジェクト の準備 まずは、任意のディレクトリに Vue CLI プロジェクト を作成していきます。 今回は vue3-cli という名称で プロジェクト を作成して進めていきます。 起動確認していきます。 おなじみのトップ画面が表示され、Vue CLI プロジェクトが作成されたことが確認できます。 app.yaml の準備 App Engine のデプロイには Vue CLI プロジェクト の トップディレクトリ に app.yaml ファイルを配置する必要があります。 app.yaml ファイルがない場合、 デプロイ 時に以下のような エラー が出力されてしまいます。 Vue CLI 用 app.yaml 以下の内容を app.yaml として、Vue CLI のトップディレクトリに配置してください。 この app.yaml ですが、 今回は ローカルの環境にあわせ nodejs14 としていますが、そのまま 推奨されている nodejs16 としても サンプルアプリに関しては動作するようでした。 Google App Engine 側準備 GCP への ログイン 最初に 対象となる GCP プロジェクトを選択していきます。 gcloud auth … Read more

[ Vue3 ] Vue CLI から Firestore データベースにアクセスする方法 と サンプルアプリ

Vue3 として作成した Vue CLI プロジェクトにおいて、 Firestore データベースに接続する方法を、簡単なサンプルアプリの実装を通じて紹介していきます。 macOS: Big Sur 11.4 Firebase SDK: 9.0.1 node: v14.17.0 npm: 7.19.1 作成するサンプルアプリ 今回は 「 Firestore に手動で登録された複数のデータ(名前の一覧)を、 Vue.js の コンポーネントに読み込み、そのまま表示する」というサンプルアプリを作成していきいます。 Firestore 準備 Firestore データベースの作成 Firestore データベースは こちらの記事 の内容で作成します。 Firebase, GCP 双方からアクセス可能なデータベースとして作成していますが、 Firebase からアクセスできれば本記事で紹介するサンプルアプリは動作すると思います。 Firestore データベース ルールの設定 Firestore データベースを作成した際に忘れずに実施しておく必要があるのが データベースルールの設定 です。以下の URL をクリックして、 Firestore コンソール を開き、 対象のプロジェクトを選択します。 https://console.firebase.google.com/ メニュー から 「 Firestore Database 」をクリックし、表示されたタブから 「 ルール 」 をクリックして、ルールを表示させます。 初期状態のルールは以下の様になっているかと思いますが、これは、「このデータベースに対して read も write も許可しない」という内容になっています。 今回は、 read だけできればよいサンプルアプリを作っていきますので、「 read であれば、特に制限なくすべて許可する設定」としていきます。 このあたりは、以下の参考サイトにより詳しい説明がありましたので、必要な方は参考にしてみてください。 参考:Qiita:Firestore Security Rules の書き方と守るべき原則 なお、ルールを初期状態のままにしておくと、以下のようなエラーが出力され、データを取得することができません。 Vue CLI プロジェクト 準備 Firestore 側の準備ができたところで、 Web アプリ側である Vue CLI プロジェクトを作成していきます。 Vue CLI プロジェクト作成 今回は、適当なディレクトリに “vue3-cli” という名前でプロジェクトを Vue 3 Preview として作成していきます。 Firebase SDK のインストール Vue CLI プロジェクト作成に引き続き、 Firebase を利用可能にすべく、 Firebase SDK をインストールしていきます。Firebase … Read more

[ Vue3 ] Vue-multiselect を用いた、 ドロップダウン の実装と サンプルアプリ

以前、こちらの記事で Vue.js ( Vue3 において Bootstrap 5 の ドロップダウン を実装する方法を紹介しました。ただしその後色々と試したところ、どうやら vue 3.0.0 では実装した ドロップダウン で選択した値を取得することができないようでした。どうしたものかと困っていたところ Vue3 Multiselect を用いることでこれを簡単に解消することができました。 今回は、「 テーブルデータ を Vue-multiselect の ドロップダウン を用いて フィルタリング する サンプルアプリ 」を作成しながら、 Vue-multiselect を実装する方法を整理していきます。なお、同様のものに Vue-multiselect がありますが、こちらは残念ながら Vue3 ではうまく動作しないようでした。Vue3 Multiselect が Vue2 と Vue3 の両方のサポートを名言している一方で、Vue-multiselect は現状 Vue2 のみの サポート なのかもしれません。 テーブル の準備 まずは、Vue3 でBootstrap 5 を有効にします。詳細はこちらの記事を参考にしてください。 Bootstrap 5 を有効にしたら、以下のような テーブル を作成します。 作成した テーブル の ソースコード App.vue components / TagSearch.vue フィルタリング 機能の実装 それでは、作成した テーブル の内容を フィルタリング する機能を実装していきます。まず最初に ドロップダウン を実装するために  Vue3 Multiselect を インストール していきます。 Vue3 Multiselect の インストール Vue3 Multislect の github README を元に進めていきます。 インストール は以上となります。それでは ドロップダウン を実装していきます。 Single Select ドロップダウン Vue3 Multiselect には 単純な シングルセレクト ドロップダウン 以外にも、マルチセレクト 、タグ といったいくつかの パターン がありますが、今回は最も シンプル な Single … Read more

[Vue3] Vue3-Charts を使って、”折れ線グラフ” や “棒グラフ” といった “チャート” を作成する方法

Vue3 で “折れ線グラフ” 、 “棒グラフ” などの “チャート” を描画したいときに Vue3-Charts を使うことで簡単に実装することができます。今回は、 Vue CLI で作成した Vue3 プロジェクトで Vue3-Charts を用いて折れ線グラフ, 棒グラフ を作成する方法を紹介します。 Vue CLI プロジェクトの作成と Vue3 Charts のインストール Vue CLI プロジェクトの作成 まずは、ベースとなる Vue CLI プロジェクトを作成していきます。 vue create コマンドを使って以下のように Vue 3 のプロジェクトを作成します。 Vue3 Charts のインストール 公式サイトの情報に基づいて以下のようにインストールしていきます。 package.json の dependencies が以下のように更新されました。 事前準備は以上で終了です。それでは早速グラフを作成していきましょう。 折れ線グラフ, 棒グラフ の作成準備 グラフ表示用コンポーネントの作成 グラフを作成する前に、グラフを表示するためのコンポーネントを用意します。 components ディレクトリ配下に Charts.vue を新規作成し、それに合わせて App.vue の内容を変更します。 components / Charts.vue App.vue ここまでの状態で npm run serve コマンドで起動してみます。 それではここにグラフを追加していきます。まずは折れ線グラフを追加してみます。 折れ線グラフ の実装 Getting Started どおりの実装 折れ線グラフ ( Line Chart ) については、こちらを参考に作成していきます。まずは何も考えずに Getting Started の内容で作成してみます。 components / Charts.vue data src ディレクトリ直下に data ファイルを忘れずに作成します。 プロジェクトの構成は以下のようになっています。 折れ線グラフ の表示 この状態で起動してみます。ほんの少しのコード量ながらとてもきれいなグラフが描画されています。 理解を深めるために、このグラフを基にカスタマイズしてみます。 系列(折れ線)の追加 data には先程表示した折れ線のデータ以外にも系列として使えるデータがありますので、系列を追加してみます。 Charts.vue data から avg のデータを赤色で追加してみます。あわせて折れ線のタイプを natural として指定してみます。 折れ線グラフ の表示 緩やかなカーブで表現された赤色の折れ線グラフが追加されました。 色々なプロパティを試してみる こちらに記載されているプロパティを色々試してみます。先程追加した赤い折れ線を残し、新しい折れ線を追加してみます。 … Read more

[Vue3] Vue CLI で作成した プロジェクト で ボタン による “画面遷移” を実装する方法

本記事では Vue3 プロジェクト で Bootstrap 5 画面遷移 を 実装 する方法について紹介していきます。今回は Bootstrap5 の Button を用いて、 3 つの 画面を用いた 画面遷移 の サンプル プログラム を作成する形で、 進めていきます。 最終的に作成する サンプル アプリケーション の 動作 は以下のようになります。 本記事では以下の条件で進めていきます。 Vue CLI で Vue3 プロジェクト として作成 Bootstrap 5 が 利用可能 な状態 Vue Router を プラグイン として利用可能な状態 これらについては、以下の記事も参考にしてください。 https://www.harubears.com/tech/vue-js/bootstratp-with-vuecli-of-vue3/ https://www.harubears.com/tech/vue-js/vue3-vue-router-with-vuecli/ プロジェクト に Bootstrap コンポーネント を作成 それでは、必要な コンポーネント を用意していきます。以下のように、実現したい アプリ のそれぞれの コンポーネント に対応する形で ファイル を用意します。 カッコ 内は、 アプリケーション の相対 パス を記載しています。アプリ が http://localhost:8080/ で動作している場合、 開始画面は http://localhost:8080/start でアクセスできるようにする、ということです。 まずは、呼出し元となる Menu.vue を作成していきます。views ディレクトリ の配下に作成していきます。 Menu Button (Menu.vue) Menu.vue では、Start, Menu それぞれへの リンク を Bootstrap の ボタン を用いて実装していきます。 ボタン は リンク を有効にするため、 a タグ で記載している点に注意してください。 続いて呼出し先である Start.vue と Option.vue を作成していきます。いずれも views ディレクトリ の配下に作成していきます。 Display Menu … Read more

Vu3 CLI プロジェクトで vue router を使ったルーティングを実装する

Vue.js において画面遷移を実装する際は Routing と呼ばれる機能を用いるのが便利です。Vue.js においては、 Vue Router が公式にサポートされているルーターになり、これは Vue3 になっても変わりがありません。現状最新である Vue Router v4 のドキュメントには掲載されていませんでしたが v3 同様に 「プラグインとして追加」する方法で実装ができましたので、 Vue3 における実装について整理していきます。なお本記事では  Vue CLI (Vue3) で作成したプロジェクトを用いて説明します。 Vue3 での Vue CLI についてはこちらの記事も参考にしてください。 vue-router の準備 vue-router のインストール 公式の手順に従って vue-router をインストールしていきます。 インストール後の package.json は以下の様になりました。 vue add router で Vue CLI に Vue Router をプラグインとして追加 今回は、上述のとおり vue-router 4.x 系で進めていきます。4.x 系ドキュメントには記載がないものの、 3.x 系ドキュメントに記載がある方法で進めていきます。具体的には、 vue add router コマンドを使って、プラグインとして vue-router を利用する方法になります。vue add router コマンドを実行すると、以下の通りモードの選択を聞かれます。 なお、 vue add router コマンドを実行すると 既存の App.vue が上書きされてしまいますので、必要に応じてコピーを取るなどしてください。 選択肢:History モードか Hash モードか? ここでは “Y” を選択し、 History モードを選択します。 インストール後、 package.json に cli-plugin-router が追加されています。 また、src ディレクトリに router, views の各ディレクトリが作成されています。 router / index.js views / About.vue views / Home.vue 更に、 App.vue も内容が上書きされています。 主な上書きポイントは以下の通りです。 template に router-link 追加 script の削除 … Read more

[Vue3] Vue 3 プロジェクトで Bootstrap 5 のドロップダウンを使う方法

以前紹介した  Vue3 で Bootstrap 5 を使う方法ですが、 Bootstrap 5 ではそれまでのバージョンに比べ結構実装方法が異なっているため、ドロップダウンを使うために一手間必要になります。今回は、 Bootstrap 5 でドロップダウンを実装する方法について紹介します。 Bootstrap 5 を有効にしただけではドロップダウンが動かない まずは以前紹介した方法で Bootstrap 5 を有効にし、公式サイトからサンプルコードを貼付け実行してみます。 main.js App.vue components / BSDropdown.vue 上記コードの内容で実行すると、以下のように Bootstrap のドロップダウンがエラーなく表示されるのですが、クリックしても何も動作することはありません。 Bootstrap 5 におけるドロップダウンでは Popper が必要 公式ドキュメントをきちんと読むと、以下の説明を見つけることができます。 ドロップダウンはサードパーティのライブラリであるPopper.jsを使って構築されており、動的なポジショニングとビューポート検出を提供しています。必ずBootstrapのJavaScriptの前にpopper.min.jsをインクルードするか、Popper.jsを含むbootstrap.bundle.min.js / bootstrap.bundle.jsを使用してください。 https://getbootstrap.jp/docs/5.0/components/dropdowns/ どうやら、 Popper を活用する必要があるようです。 Popper について  Popper は、簡潔に言うと「ツールチップとポップオーバーに関連するもの」です。 Given an element, such as a button, and a tooltip element describing it, Popper will automatically put the tooltip in the right place near the button. https://www.npmjs.com/package/@popperjs/core 「ボタン等のエレメントと、記載されたツールチップがあると、 Popper は自動的にそのボタンの近くの適切な場所にツールチップを配置します」というような紹介文が掲載されています。百聞は一見にしかず、ということで公式サイトにデモが掲載されていますので、そちらを見ていただくと良いと思います。 現状は Popper 2 がメインストリームのようなので、まずはこちらをインストールすることことからはじめます。 Popper 2 のインストール 公式サイトの手順に従ってすすめていきます。 package.json の内容をみていきます。今回は、 以下のようなバージョンでインストールすることができました。 main.js で Bootstrap bundle をインポート 次に、 公式ドキュメントで言及されている通り、 popper を利用可能にしていきます。今回は、 main.js に bootstrap.bundle.min.js をインポートする方法で進めていきます。 main.js Bootstrap 5 でのドロップダウン実装 popper をインストールし、 main.js 内にインポート行を追記したら、改めて実行してみます。今度は、ただ表示されるだけではなく、クリックに反応するようになりました。 まとめ Vue2 + bootstrap-vue とは少しお作法が異なる Vue3 … Read more

[ Vue3 ] 新規作成した Vue 3 CLI プロジェクトで Bootstrap 5 を利用する方法

Web 開発において、 Bootstrap を用いることで見栄えが良く使い勝手の良い UI を、効率よく実装することができるようになります。Vue 2 においては bootstrap-vue を用いることができましたが、 Vue 3 では2021年8月時点で bootstrap-vue を用いると、 ”Uncaught TypeError: Cannot read property ‘prototype’ of undefined” というエラーが発生し、 UI を表示することができません。色々と情報を探したところ、 Bootstrap 5 を用いることで Vue 3 で Bootstrap を利用することができました。今回は Vue CLI で 新規作成した Vue 3 プロジェクトで Bootstrap 5 を利用する方法をご紹介します。 Vue CLI プロジェクト は、 vue create [ プロジェクト名 ] コマンドを用いて作成したものを想定しています。プロジェクト 作成時にプリセットを選択する場面に遭遇しますが、以下の様に、Vue 3 Preview を選択したものを使っていきます Bootstrap 5 の利用 こちらの記事を参考にしたところ Vue 3 で Bootstrap を利用するには Bootstrap 5 を用いることが簡潔であることがわかりました。 Bootstrap 5 では jQuery を必要としていないため、 以前は jQuery もあわせて導入する必要がありましたがこの手間がなくなることになりますので、よりシンプルに Bootstrap を使うことができます。 Bootstrap 5 のインストール Bootstrap 5 は以下のコマンドを用いて インストール します。 インストール 後、package.json に以下のように dependencies に bootstrap が追加されます。 Bootstrap Button の実装 Bootstrap 適用前の コード main.js こちらは、 Vue CLI プロジェクト を作成した状態のままです。 App.vue Vue CLI … Read more

[Vue.js][vue-csv-import] Vue.js でCSVファイルを読込み、 b-table に表示する

vue-csv-import を用いて CSV ファイルを読込み、テーブルに表示させる方法が少しコツが必要でしたので、その方法を説明します。 vue-csv-import はバージョンにより対応する Vue のバージョンが異なりますが、今回は Vue2 環境で作成した Vue CLI プロジェクトで試しています。 vue-csv-import setup まずは、 vue-csv-import をインストールしていきます。以下の Changelog を確認すると、 v2.3.7 までが Vue2 対応で、その次の v4.0.0 から Vue3 対応となっていますので、今回は v2.3.7 を導入していきます。 v2.3.7のドキュメントは以下になりますが、いくつかそのままでは問題がでますので、その辺りを説明しつつ進めていきます。 Install ドキュメント上は、バージョン指定をしない手順ですが、 v2.3.7 は過去バージョンのため、以下の用にバージョンを指定してインストールします。 実際に試した vue と vue-csv-import のバージョンは以下のようになっています。 Implementation & Data Preparation 次に、 CSV 読み込みのコード実装と、使用する CSV データを準備してきます。 main.js ここは、(ややこしいですが) Vue3 向けである v4.0.0 のドキュメントを参考に以下のように Plugin としてインポートする実装としました。 vue-csv-import に関連する部分をハイライトしています。 Component コンポーネントに関して注意しなければいけないのが、 :mapFields プロパティです。 Vue3 対応の v4.0.0 ではプロパティ名が :Fields となっていますが、 v2.7.3 では :mapFields とする必要があります。 CSV ファイルの Column を配列でこのプロパティに渡してやります。 CSV File CSVファイルは以下を用いることにします。 Check the Behavior このコードを実行すると、以下の画面が表示されます。 今回はヘッダありなので、 File Has Headers にチェックを入れ、先程のCSVファイルを選択し、Nextをクリックします。 すると、 Field 選択画面が表示されます。 ドロップダウンに CSV の各ヘッダが表示されるので、対応するものを選択します。 すべて選択し終えると、 v-model で指定したデータプロパティに値が格納され、今回の例では、画面に Raw Data が表示されます。 Output to b-table 最後に読み込んだ CSV ファイルの内容をテーブルに出力してみます。 先程と同じ用にファイルを選択し、 Field を選択することで、テーブルに … Read more