Vue + Vue Router + Vuex +Laravel 写真共有アプリ作成 (2)

勉強記録　

Vue + Vue Router + Vuex +Laravelで写真共有アプリを作るチュートリアルを行い、

一通り完成したので、自分の復習もかねてまとめます！

参考サイトのチュートリアルの記事が全16記事でしたので、それに合わせてまとめていきます♪

www.hypertextcandy.com

アプリケーションの設計

SPAのアーキテクチャ

SPAとは？

シングルページアプリケーション（Single Page Application)のこと。

 

SPAでない普通のアプリケーション（MPA:マルチページアプリケーションとも呼ばれる）では、ブラウザからの画面要求(GET)またはデータ送信(POST)に対して、サーバはHTMLを返却して、ブラウザがそのHTMLをもとに画面を構築する。この通信パターンを繰り返すことで画面をつくる。

 

SPAではブラウザは最初に画面要求をして、サーバはHTMLを返す。

ブラウザが画面を構築したあと、Ajaxでデータの要求または送信が行われ、サーバからはJSONデータが返却される。

ブラウザは返却されたJSONデータを使って、JavaScriptで画面の一部を書き換える。

（つまりが画面全体をサーバから受け取るのは最初だけで、あとはAjaxによる要求・送信、JSONデータの返却という流れ）

 

SPAとMPAの違いとして重要なのは、画面を再描画するときにHTMLでまるごと再描画するのか、それともサーバからの返却されたデータによって部分的に再描画するのかという、機能的違いがあるということ。

 

SPAでの画面遷移

SPAではサーバから返却されたHTMLで画面全体を構築し直すのではなく、返却されたJSONデータを使用して画面の一部しか書き換えないので、本来の意味での画面遷移は発生していない。

ただし、アプリケーションの使い勝手の観点から、SPAでも画面遷移しているように見せることが必要な場合もある。

 

SPAで画面遷移を表現する場合、ヘッダーやフッター以外の部分などの主要なコンテンツを持つ領域を書き換えることで、画面遷移したかのように見せるテクニックがある。

URLに対応するHTML部品を決めておいて、URLの変化に応じて対応する部品でコンテンツ部分を切り替える。

 

これを実現するのが、Vue RouterやReact Routerというルーターライブラリ。

今回はVue.jsを使うのでVue Routerを使用。（Reactというjsのフレームワークの場合は、React Routerを使用）

 

機能一覧

写真の一覧を表示

写真投稿（会員）

写真にいいねをつける（会員）

写真のいいねを解除（会員）

写真にコメントを追加（会員）

写真につけられたいいね数の表示

写真につけられたコメントを表示

会員登録

ログイン

ログアウト（会員）

 

テーブル設計

必要なテーブルは？

ユーザーと写真は1対多（ユーザーは複数の写真にいいねがつけられる）

写真といいねは1対多（一枚の写真に複数のいいねがつく）

ユーザーとコメントは1対多（ユーザーはコメントを複数追加できる）

写真とコメントは1対多（1枚の写真には複数のコメントがつく）

 

(photosテーブル)

ユーザーテーブルへの外部キー。写真のファイル名を表すfilenameカラム。画像自体はAWS S3に格納

今回idは自動採番のSERIAL型ではなく、ランダムな文字列を主キーにする。

(commentsテーブル)

ユーザーと写真テーブルへの外部キー。コメント内容を表すcontentカラム。

(likesテーブル)

ユーザーと写真テーブルへの外部キー。

(usersテーブル)

今回はデフォルトのまま使用。

 

URL設計

Web APIのURL設計

Web APIはインターネットの線を共有してやり取りできるようになっている窓口。

今回でいう、Ajaxでデータの要求・送信を受け取って、JSONデータを返却するサーバサイドのプログラムを指す。

 

SPAの場合はAPIについてもURLを設計する必要がある。

 

SPA以外のアプリケーションの場合には、HTTPメソッドとしてGETとPOSTしか用いられない。

サーバーへのリクエスト発行をアンカーリンク<a>とフォーム送信<form>に頼っている。

アンカーリンクはGETメソッドを発行、フォーム要素のmethod属性はGETとPOSTしかサポートしていない。

画面を要求するときはGET、それ以外のデータ処理の要求はPOSTで、要求内容はURLのパスで表現する。

 

<例>

POST /items/create # 新規作成
POST /items/update # 編集
POST /items/delete # 削除

 

 

Web APIはAjaxによってリクエストを発行するので、このような制約がない。

GET、POST、PUT、PATCH、DELETEも使用できる。

(PUTは置換、PATCHは既存のリソースを更新、変更、修正）

URLが目的語でHTTPメソッドが動詞（ex: itmesをDELETEする) という形式になっている。

 

<例>

POST   /items # 新規作成
PATCH  /items # 編集
DELETE /items # 削除

 

API

APIのURL一覧はチュートリアル記事を参照。

なぜいいねの追加がPUTなのか

→同じ人が同じ写真に何個もいいねをつける仕様ではないので、新規作成のPUTは不自然。

いいねはON,OFFの状態しかなく、一部だけ変更することもないのでPATCHも不自然。