今回はフロントエンドを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の場合は８行目の｛｛msg｝｝ の部分です
受け取り側（子要素）のコンポーネント側の処理はこのように今まで通りの書き方で問題ありません
ただし、Vue Routerを使用してコンポーネントを呼び出す際はタグを利用しません
本来は先ほど説明した通りタグ内にプロパティを記入するのですが、それを書くところがないわけです
ではどうやって親要素からデータを渡すのか
上記のrouter.jsファイルを再度確認してください
9～11行目、17～19行目にProps：｛データ｝という形で同じように親要素から子要素へデータの受け渡しができます
ここはこれまでと処理の仕方が違う点になりますので注意してください
続いてmain.jsに追記と書き換えをしていきます
main.jsはプロジェクト作成時にすでに作られているファイルです
Vue Routerの追記が必要になります
以下のファイルの３行目で先ほど作ったrouter.jsファイルをimportしているのが分かると思います
router.jsで作成した設定をapp.use(router)で組み込んでいます
この修正をしないとVue Routerが追加されず、設定が読み込まれません
わすれずに書き換えましょう
App.vueでルーティング処理を実装
App.vueファイルを見ていきましょう
5～９行目templateタグの中に
router-link というタグがあります
これでrouter.jsで設定したルーティング処理を実装することができます
タグの書き方は<router-link to=”設定したアドレス”>です
このタグの位置に、ルーティングのリンクが作成されます
８行目に router-view というタグがありますルーティングのリンクを押して呼び出されたコンポーネントはこのタグの位置に表示されることになります
今回はここまでとします
動画も参考になさってください
コメント