Posted at

【2019/01/16 実践日記】写真共有アプリを作る(Laravel×Vue) チュートリアル1日目


やること

「写真共有アプリを作ろう」チュートリアルの学習記録第1回です。

Qiita経由で見つけた下記URLを参考に手を動かします。

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


ツールのバージョン

Node
npm
Vue.js
Vue Router
Vuex
PHP
Laravel

10.7.0
6.4.1
2.5.21
3.0.2
3.0.1
7.2.10
5.7.19


目的

「0からアプリを完成させる流れ(アプリケーションの設計)」を経験して知見を獲得し、その後のオリジナルアプリ作成に生かすこと。


写真共有アプリ完成までの流れ(全16回)


  1. イントロダクション ←今ここ

  2. アプリケーションの設計

  3. SPA開発環境とVueRouter

  4. 認証API

  5. 認証ページ

  6. 認証機能とVuex

  7. 認証機能とVuex Part.2

  8. エラーハンドリング

  9. 写真投稿API

  10. 写真投稿フォーム

  11. 写真一覧取得API

  12. 写真一覧ページ

  13. 写真詳細ページ

  14. コメント投稿機能

  15. いいね機能

  16. エラーハンドリング


今回やったこと


①学べることの確認


  • Vue.jsとLaravelを組み合わせてSPAを構築する方法

  • SPAにおけるクッキー認証とCSRF対策

  • Vue Routerを使用した画面繊維

  • Vuexを使用した状態管理

  • VueでのタブやローディングUIの表現

  • SPAにおけるエラー処理
    2019/01/16時点 ちんぷんかんぷん


②作るものの確認

写真共有アプリ

* トップページ

* 写真閲覧ページ

* 写真投稿パネル

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

* システムエラーおよび404ページ


今日やったことは以上です


参考文献(=購入したもの)

Webを支える技術 -HTTP, URI, HTML,そしてREST


次回やること

Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (2) アプリケーションの設計


おわり

今回は以上です。