【Laravel 6 & PHP 7.4 対応】Vue + Vue Router + Vuex + Laravel チュートリアル（全16回）を書きました。

![](https://cdn.hypertextcandy.com/posts/vue-laravel-tutorial/eye-catch.jpg)

**2020/1/5 更新**
チュートリアルを Laravel バージョン6 & PHP 7.4 に対応し、加筆修正しました。

[技術ブログ](https://www.hypertextcandy.com)に
『[Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう](https://www.hypertextcandy.com/vue-laravel-tutorial-introduction/)（全16回）』
を公開しました :hugging: :clap: :tada:

出来るだけたくさんの方に見てほしいので宣伝エントリを書きます。

## コンテンツ

フロントエンドに Vue.js + Vue Router + Vuex と
サーバーサイドに Laravel を使用して写真共有アプリを開発するという内容です。

こんなやつ :point_down: ができます。

![トップページ](https://cdn.hypertextcandy.com/posts/vue-laravel-tutorial/VLT-vuesplash-1.jpg)

写真を投稿できます。

<img src="https://cdn.hypertextcandy.com/posts/vue-laravel-tutorial/VLT-vuesplash-7.jpg" alt="写真投稿パネル" width="480" />

コメント投稿、いいね、ダウンロード機能も実装します。

![写真閲覧ページ](https://cdn.hypertextcandy.com/posts/vue-laravel-tutorial/VLT-vuesplash-5.jpg)

ログイン・会員登録といった認証機能もカバーします。

![ログイン / 会員登録ページ](https://cdn.hypertextcandy.com/posts/vue-laravel-tutorial/VLT-vuesplash-3.jpg)

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

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

## 学べること

- Vue.js と Laravel を組み合わせる
- ルーティングライブラリ Vue Router を取り入れる
- 状態管理ライブラリ Vuex を取り入れる
- タブやローディングを作る
- Vue.js + Laravel の構成でクッキー認証と CSRF 対策を行う
- SPA でエラー処理を行う

## こんな人に読んでほしい

Vue や Laravel について、

- 入門書を読んだあとに実際に何か作ってみたい！という人
- 仕事などで触れて基本的な機能はわかったけどゼロからアプリを作ったことはない人

より複雑なアプリを作れるようになるためのきっかけになればいいなと思います :innocent:

## 連載記事

- [(1) イントロダクション](https://www.hypertextcandy.com/vue-laravel-tutorial-introduction/)
- [(2) アプリケーションの設計](https://www.hypertextcandy.com/vue-laravel-tutorial-application-design/)
- [(3) SPA開発環境とVue Router](https://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project/)
- [(4) 認証API](https://www.hypertextcandy.com/vue-laravel-tutorial-authentication/)
- [(5) 認証ページ](https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-2/)
- [(6) 認証機能とVuex](https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3/)
- [(7) 認証機能とVuex Part.2](https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-4/)
- [(8) エラーハンドリング](https://www.hypertextcandy.com/vue-laravel-tutorial-error-handling/)
- [(9) 写真投稿API](https://www.hypertextcandy.com/vue-laravel-tutorial-submit-photo/)
- [(10) 写真投稿フォーム](https://www.hypertextcandy.com/vue-laravel-tutorial-submit-photo-part-2/)
- [(11) 写真一覧取得API](https://www.hypertextcandy.com/vue-laravel-tutorial-list-photos/)
- [(12) 写真一覧ページ](https://www.hypertextcandy.com/vue-laravel-tutorial-list-photos-part-2/)
- [(13) 写真詳細ページ](https://www.hypertextcandy.com/vue-laravel-tutorial-photo-detail/)
- [(14) コメント投稿機能](https://www.hypertextcandy.com/vue-laravel-tutorial-add-comment/)
- [(15) いいね機能](https://www.hypertextcandy.com/vue-laravel-tutorial-likes/)
- [(16) エラーハンドリング Part.2](https://www.hypertextcandy.com/vue-laravel-tutorial-error-handling-part-2/)

ぜひチェックしてみてください！

## :atom: React 学びたい方はこちら

Vue.js じゃなくて React やりたいんだ！っていう人はこちらをどうぞ。

- [React入門チュートリアル (1) Reactとは何か](https://www.hypertextcandy.com/react-tutorial-01-what-is-react)
- [React入門チュートリアル (2) JSX](https://www.hypertextcandy.com/react-tutorial-02-jsx)
- [React入門チュートリアル (3) 属性と状態](https://www.hypertextcandy.com/react-tutorial-03-props-and-state)
- [React入門チュートリアル (4) フォームとイベントハンドリング](https://www.hypertextcandy.com/react-tutorial-04-form-and-events)
- [React入門チュートリアル (5) ToDoアプリを作ってみよう](https://www.hypertextcandy.com/react-tutorial-05-wrap-up-with-todo-app)
- [React入門チュートリアル (6) 副作用](https://www.hypertextcandy.com/react-tutorial-06-effect)
- カスタムフック（予定）
- Reactプロジェクトを始める方法（予定）

## フロントエンドエンジニア募集中！

ちなみに！
私のチームでは、これからSPA開発などを学びたいフロントエンドエンジニアさんを募集してます。

詳しくはこちらの記事をご覧ください :grinning:
https://www.hypertextcandy.com/ari-job-offer-2020