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 そのものの言語仕様を知るのに個人的に役に立った本も紹介しておきます。

Vue.js

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

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

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

Laravel

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

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

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

Vue.js DevTools

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

Vue.js DevTools

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

Components

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

Vuex

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

Events

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

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

👾 👾 👾

この章はこれでおしまいです。

次の章ではアプリケーション全体の設計を考えます。

関連記事

連載記事(全16回)

Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう

その他