tag:crieit.net,2005:https://crieit.net/tags/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/feed Crieitでタグ「チュートリアル」に投稿された最近の記事 2019-01-14T01:07:09+09:00 https://crieit.net/tags/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB/feed tag:crieit.net,2005:PublicArticle/14719 2019-01-14T01:06:52+09:00 2019-01-14T01:07:09+09:00 https://crieit.net/posts/Vue-Vue-Router-Vuex-Laravel-16 <p><img src="https://cdn.hypertextcandy.com/posts/vue-laravel-tutorial/eye-catch.jpg" alt="" /></p> <p><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com">技術ブログ</a>に<br /> 『<a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-introduction/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう</a>（全16回）』<br /> を公開しました 😄👏🎉</p> <p>出来るだけたくさんの方に見てほしいので宣伝エントリを書きます。</p> <h2 id="コンテンツ"><a href="#%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84">コンテンツ</a></h2> <p>フロントエンドに Vue.js + Vue Router + Vuex と<br /> サーバーサイドに Laravel を使用して写真共有アプリを開発するという内容です。</p> <p>こんなやつ 👇 ができます。</p> <p><img src="https://cdn.hypertextcandy.com/posts/vue-laravel-tutorial/VLT-vuesplash-1.jpg" alt="トップページ" /></p> <p>写真を投稿できます。</p> <p><img src="https://cdn.hypertextcandy.com/posts/vue-laravel-tutorial/VLT-vuesplash-7.jpg" alt="写真投稿パネル" width="480" /></p> <p>コメント投稿、いいね、ダウンロード機能も実装します。</p> <p><img src="https://cdn.hypertextcandy.com/posts/vue-laravel-tutorial/VLT-vuesplash-5.jpg" alt="写真閲覧ページ" /></p> <p>ログイン・会員登録といった認証機能もカバーします。</p> <p><img src="https://cdn.hypertextcandy.com/posts/vue-laravel-tutorial/VLT-vuesplash-3.jpg" alt="ログイン / 会員登録ページ" /></p> <p>ちなみにチュートリアルで扱うツールなどのバージョンは以下の通りです。</p> <div class="table-responsive"><table> <thead> <tr> <th align="center">Node</th> <th align="center">npm</th> <th align="center">Vue.js</th> <th align="center">Vue Router</th> <th align="center">Vuex</th> <th align="center">PHP</th> <th align="center">Laravel</th> </tr> </thead> <tbody> <tr> <td align="center">10.7.0</td> <td align="center">6.4.1</td> <td align="center">2.5.21</td> <td align="center">3.0.2</td> <td align="center">3.0.1</td> <td align="center">7.2.10</td> <td align="center">5.7.19</td> </tr> </tbody> </table></div> <h2 id="学べること"><a href="#%E5%AD%A6%E3%81%B9%E3%82%8B%E3%81%93%E3%81%A8">学べること</a></h2> <ul> <li>Vue.js と Laravel を組み合わせる</li> <li>ルーティングライブラリ Vue Router を取り入れる</li> <li>状態管理ライブラリ Vuex を取り入れる</li> <li>タブやローディングを作る</li> <li>Vue.js + Laravel の構成でクッキー認証と CSRF 対策を行う</li> <li>SPA でエラー処理を行う</li> </ul> <h2 id="こんな人に読んでほしい"><a href="#%E3%81%93%E3%82%93%E3%81%AA%E4%BA%BA%E3%81%AB%E8%AA%AD%E3%82%93%E3%81%A7%E3%81%BB%E3%81%97%E3%81%84">こんな人に読んでほしい</a></h2> <p>Vue や Laravel について、</p> <ul> <li>入門書を読んだあとに実際に何か作ってみたい！という人</li> <li>仕事などで触れて基本的な機能はわかったけどゼロからアプリを作ったことはない人</li> </ul> <p>より複雑なアプリを作れるようになるためのきっかけになればいいなと思います 🤗</p> <h2 id="連載記事"><a href="#%E9%80%A3%E8%BC%89%E8%A8%98%E4%BA%8B">連載記事</a></h2> <ul> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-introduction/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (1) イントロダクション</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-application-design/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (2) アプリケーションの設計</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-setting-up-spa-project/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (3) SPA開発環境とVue Router</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-authentication/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (4) 認証API</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-2/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (5) 認証ページ</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-3/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (6) 認証機能とVuex</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-authentication-part-4/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (7) 認証機能とVuex Part.2</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-error-handling/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (8) エラーハンドリング</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-submit-photo/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (9) 写真投稿API</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-submit-photo-part-2/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (10) 写真投稿フォーム</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-list-photos/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (11) 写真一覧取得API</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-list-photos-part-2/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (12) 写真一覧ページ</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-photo-detail/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (13) 写真詳細ページ</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-add-comment/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (14) コメント投稿機能</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-likes/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (15) いいね機能</a></li> <li><a target="_blank" rel="nofollow noopener" href="https://www.hypertextcandy.com/vue-laravel-tutorial-error-handling-part-2/">Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (16) エラーハンドリング Part.2</a></li> </ul> <p>🚀🚀🚀</p> <p>以上です。ぜひチェックしてみてください。</p> Masahiro Harada