Vue3 (Vite) + Vue Router + Element Plus + Firebaseでアプリケーション作成①

今回はフロントエンドをVue3、バックエンドをFirebaseを使ってアプリケーションを作成しようと思います

作成するのはStockBookという在庫管理ツールです

ユーザー登録を行って、グループを作成し在庫を共有して管理するものをイメージしています

さらに、Vue Routerを使用して、Single Page Application(以下SPA)を作成します

SPAとは

SPAというのは、画面遷移を行わずに画面の一部分を切り替えて使用するアプリケーションのことです

ヘッダーやサイドバーは固定でメニューのボタンでメインの画面に必要な情報を切り替えていきます

UIを通じてサーバーサイドにリクエストを送り、必要な情報をサーバーサイド(データベース)から戻してそれをクライアント側に表示します

その際に画面全体を更新するのではなく、DOM操作をして部分的に表示を切り替えます

必要箇所だけの更新となるためレスポンスも早くなり、より使いやすいアプリケーションになります

Vueのリアクティブの機能を使えば、データ変更による表示の切り替えはスムーズです

また、今回採用したVue Routerを使用すれば、サーバーサイドで行っていたルーティングの処理をフロントエンドで実装できるため、開発も楽です

いったり来たりしなくていいのは混乱も少ないですし本当に楽です

プロジェクトの作成からVue Routerの追加方法

まずは、フロントエンドから作成していきます

ViteでVue3をベースにしたプロジェクト作成をします

ターミナルを開いてプロジェクトを作成するディレクトリにcdコマンドで移動してください

プロジェクトのディレクトリ名は以下のコマンドを打ち込んだあとに対話の中で設定していきます

npm init vite@latest

と打ち込みます

いくつか設定を聞かれます

①プロジェクト名(任意)

②使用するフレームワーク 今回はvue

③vue.jsまたはvue.ts 今回はjs

でプロジェクトを作成して

cdコマンドで作成したプロジェクトのディレクトリに移動

以下のコマンドを入力し、その他必要なパッケージをインストール

npm install

いったん起動するか立ち上げる

npm run dev

いつものデモ画面が出力されたらOK

続いてプロジェクトにVue Routerの追加を行います

Vue Router のインストールと設定用ファイルの作成

npmまたはYarnを使ってVue Routerをインストールします

npm install vue-router@4

Vue3を使用する場合はVersion4.0以降になります

それ以前のものはVue2用になり、Vue3では動きませんので気を付けましょう

続いてプロジェクト内でVue Routerを使用するための設定用のファイルを作成します

プロジェクトのディレクトリ下にrouter.js(名前は任意)というファイルを作成します

今回は作成途中ですので仮のコンポーネントを置いています

これでパスによって表示するコンポーネントを切り替えることができます

2,3行目に記入していますが、

ルーティングで使用するコンポーネントはimportするのを忘れないようにしましょう

ルーティングの処理がうまくいっているかテストするために、もう一つAbout.vueというコンポーネントをimportしてルーティングのpathにも記入しています

コンポーネントはまだ作成していません

テスト用のコンポーネントの作成とmain.jsの書き換え

では、続いてルーティング処理のテスト用のコンポーネントを作成、書き換えをしましょう

※HelloWorld.vueはプロジェクト作成時に作られているコンポーネントです。特に書き換える必要はありません。

あとはAbout.vueを新規に作成しました

内容は何でも大丈夫ですが、一か所だけ説明をしておきたいと思います

通常のコンポーネントの場合は、親要素にコンポーネントによって作成されたタグをApp.vueやその他のコンポーネントのtemplate内に配置してコンポーネントを呼び出します

そして、通常であればそのタグ内にプロパティを記入してdefinePropsで受け取り、それをコンポーネントのtemplate内などで使用します

以下のAbout.vueの場合は8行目の{{msg}} の部分です

受け取り側(子要素)のコンポーネント側の処理はこのように今まで通りの書き方で問題ありません

ただし、Vue Routerを使用してコンポーネントを呼び出す際はタグを利用しません

本来は先ほど説明した通りタグ内にプロパティを記入するのですが、それを書くところがないわけです

ではどうやって親要素からデータを渡すのか

上記のrouter.jsファイルを再度確認してください

9~11行目、17~19行目にProps:{データ}という形で同じように親要素から子要素へデータの受け渡しができます

ここはこれまでと処理の仕方が違う点になりますので注意してください

続いてmain.jsに追記と書き換えをしていきます

main.jsはプロジェクト作成時にすでに作られているファイルです

Vue Routerの追記が必要になります

以下のファイルの3行目で先ほど作ったrouter.jsファイルをimportしているのが分かると思います

router.jsで作成した設定をapp.use(router)で組み込んでいます

この修正をしないとVue Routerが追加されず、設定が読み込まれません

わすれずに書き換えましょう

App.vueでルーティング処理を実装

App.vueファイルを見ていきましょう

5~9行目templateタグの中に

router-link というタグがあります

これでrouter.jsで設定したルーティング処理を実装することができます

タグの書き方は<router-link to=”設定したアドレス”>です

このタグの位置に、ルーティングのリンクが作成されます

8行目に router-view というタグがありますルーティングのリンクを押して呼び出されたコンポーネントはこのタグの位置に表示されることになります

今回はここまでとします

動画も参考になさってください

コメント

タイトルとURLをコピーしました