2019.01.12

Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (1) イントロダクション

UPDATED：2020.01.05

PHP 7.4 および Laravel 6 に対応しました 🎉

この連載記事では、フロントエンドに Vue.js + Vue Router + Vuex とサーバーサイドに Laravel を使用したシングルページ Web アプリケーションの開発方法を紹介します。実際に写真共有アプリを開発する手順を通して SPA 開発のエッセンスを学ぶことができます。

今回のチュートリアルで扱うツールなどのバージョンは以下の通りです。

Node	npm	Vue.js	Vue Router	Vuex	PHP	Laravel
10.15	6.4	2.6	3.1	3.1	7.4	6.9

はじめに

対象者

JavaScript / Vue.js / PHP / Laravel の入門レベルの方、入門書を読んだあとに「何か作ってみたい」という方が、それぞれの知識を組み合わせて本格的なアプリケーションを開発できるようになることを目指しています。

上記のいずれかの知識がまったくない状態だとこのチュートリアルの内容は少し難しいかもしれません。チャレンジするのもいいですが、参考文献に挙げた市販の入門書か、関連記事のチュートリアルを先に読んでおくと理解しやすいと思います。

学べること

Vue.js と Laravel を組み合わせて SPA を構築する方法
SPA におけるクッキー認証と CSRF 対策
Vue Router を使用した画面遷移
Vuex を使用した状態管理
Vue でのタブやローディング UI の表現
SPA におけるエラー処理

扱わないこと

デザインと CSS コーディングについては範囲が広くなり過ぎてしまうので扱いません。SCSS ファイルを用意するので、ダウンロードして使っていただきます。

作るもの

このチュートリアルでは写真共有アプリを開発します。

私がこのブログのアイキャッチ画像を作成するときに活用させてもらっている Unsplash というサービスを真似して Vuesplash と名付けました

トップページ

トップページには写真の一覧が並びます。
キャプチャからは見切れていますが、前後のページに移動するページ送り機能も実装します。

それぞれの写真にマウスオーバーすると以下のように「いいねボタン」「ダウンロードボタン」「投稿者名」が表示されます。

写真閲覧ページ

個別の写真のページです。
このページではいいね機能、ダウンロード機能に加えてコメント機能も実装します。

写真投稿パネル

「Submit a photo」ボタンをクリックすると写真を投稿するパネルが表示されます。

フォームから画像を選択するとプレビューが表示されます。

submit ボタンをクリックすると以下のローディングを表示します。

ログイン / 会員登録ページ

ログインと会員登録は1ページにまとめました。

タブでログインフォームと会員登録フォームの表示を切り替えます。

以上、3ページ＋写真投稿パネル（と簡単なシステムエラーおよび404ページ）を作成します。

参考文献

チュートリアルを読み進めるのに役に立ちそうな参考文献を紹介します。

Web / HTTP

HTTP や Web API の知識は基本ですので押さえておきましょう。

JavaScript

チュートリアル中の JavaScript は ES2015 以降のシンタックスを用います。
以下の2冊はモダンな JavaScript の書き方を学ぶのにおすすめです。

また変数のスコープや this の性質など JavaScript そのものの言語仕様を知るのに個人的に役に立った本も紹介しておきます。

開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質

Vue.js

まずは公式ドキュメントです。
Vue.js はコミュニティの活動が活発らしく、公式ドキュメントに日本語版が存在します。

Vue.js の国内人気の高まりとともに日本語の書籍も出版され始めています。
私自身は読んでいないのでおすすめ度合いは分かりませんが、公式ドキュメントを難しく感じた方はリファレンスとして傍に置いておくのもいいかもしれません。

私もこのブログで入門記事を書いていますので、よろしければ参考にしてみてください。

Laravel

Laravel はリファレンスとしては基本マニュアルだけで十分だと思います。

日本語の書籍も出版されています。
こちらも私自身は読んでいないのでおすすめ度合いは分かりません。

私が書いたチュートリアルも紹介しておきます。
SPA ではなく「普通の」マルチページアプリケーションの作成方法を紹介していますが、今回のチュートリアルにあたってもこの程度は知っておくと理解が進みやすいだろうという内容です。

入門Laravelチュートリアル (1) イントロダクション

Vue.js DevTools

最後に Vue.js アプリを開発するのに欠かせないデバッグツール Vue.js DevTools を紹介します。

Chrome または FireFox の拡張機能である Vue.js devtools には以下の機能が備わっています。

Components

コンポーネントツリーの表示
data の表示と編集
computed の表示
props の表示

Vuex

state の表示
getters の表示
state の更新履歴の表示
state 更新履歴の特定時点に状態を戻す

Events

$emit によるイベント発行履歴の表示

このように Vue.js DevTools には便利なデバッグ機能が揃っています。
開発前に必ずインストールしましょう