見出し画像

Laravel と Vue.jsでQ&Aサイトを作りました

先日より少しずつ学習を進めているLaravelとVue.js。今回は2つを組み合わせてQ&Aサイトを作りました。

作ったと言っても、Udemyの講座を受けてそのまま作ったので、ご興味ある方はこの講座受けてみてください。


成果物

作ったのはこちら。


・トップ画面

質問が一覧で表示されます。


・質問作成画面

質問の投稿ができます。


・質問詳細画面

質問と回答が確認でき、新しい回答の投稿ができます。


どんなサイト?何ができる?

Yahoo知恵袋やQuora等のような、Q&Aサイトです。簡単に機能を説明しますと、

・質問が投稿できる
・質問に対して回答できる。
・投票機能
・スター機能
・ベストアンサー機能
・質問や回答の編集
・質問や回答の削除

ができます。

・質問投稿


・回答投稿

markdownが利用できます。「Preview」タブで投稿前にプレビューが確認できます。


・投票

質問、回答ともに投票ができるようになります。投票するとポップアップでメッセージが表示されます。


・スター機能(お気に入り)

質問にスター(お気に入り)をつけることができます。


・ベストアンサー機能

質問者限定の機能ですが、回答に対してベストアンサーの✅がつけられます。チェックするとポップアップでメッセージが表示されます。


・編集

質問、回答の編集昨日です。編集画面は画面遷移せずに変更できます。


・削除

ポップアップ表示して削除処理を行います。画面遷移はせずに削除できます。


学んだこと

DRY原則

エンジニアの世界ではDRY原則という考え方があるようです。
DRY原則とは『Don't Repeat Yourself』の略で、「繰り返しを避けること」という意味です。
これは単純に同じコードを書かないということもありますが、情報を重複させないことが重要とのこと。

参考:プログラマが知るべき97のこと DRY原則


LaravelのPolicy機能

Laravelの権限周りがいまいちよくわかっていなかったのですが、今回Policyという機能を使ってサクッとできるようになりました。

質問者しかベストアンサーの機能が利用できない時、また、自分の回答しか削除できないとかPolicyを利用して実装しました。

参考:Laravel5.7: 認可 (記事の編集はオーナーに限る、などの制限)


izitoastの利用

更新完了時や削除のメッセージ表示にisitoastを利用しました。

↑こういうメッセージですね。

Vue.jsを利用

Vue.jsを利用して、更新や削除の処理を画面遷移することなく行うことができるようになりました。(実はここが一番学びたかったところ)
画面遷移しないでサクサク動くというのは利用していて気持ちが良いものです笑

Herokuへのデプロイ

Herokuでデプロイするのは初めてだったのですが、すんなりできました。Githubと連携し、DB接続、Configの設定等を進めるだけで完了。
DBを利用しないのであればnetlifyが便利だと思うのですが、HerokuだとPostgreSQLが利用できるので、Laravelのデプロイには良さそうです。

対応方法はnoteにまとめました。

細かいところだと他にもたくさんありますが、ざっとこんなところです。


最後に

というわけでLaravelからVue.jsまで利用してのサイト構築が完成しました。今は動画やネット記事等が充実しているので、どこでも1人で学習できて本当に良いなと思います。

今後はLaravel、Vue.jsの学習は引き続きやっていくのに加えて、一回初めてストップしていたNuxt.jsに手をつけてみたいと思います。

それでは最後に学習に使用した動画や本、記事を紹介してこの記事を終わりにしようと思います。

・Udemy講座:Fullstack Web Development With Laravel and Vue.js

このQ&Aサイトはこの講座をしっかりやれば作ることができます。


・Udemy講座:Vue JS入門決定版!jQueryを使わないWeb開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ

Vue.jsについての基礎を学ぶことができます。


サイト:入門Laravelチュートリアル (1) イントロダクションと環境構築

Laravelの基礎を学ぶのであればこのサイトがとても良いと思います。


本:Vue.js入門 基礎から実践アプリケーション開発まで

Vue.jsの基礎本。私は先に紹介したUdemyの講座で一通りVue.jsとはなんぞやというところを理解してから、この本に進みました。
基本的なところから、中規模・大規模向けのアプリ開発についての解説もあります。
また、単語とか調べるのに利用しています。


ということで以上です!次は何作ろうかなー。

読んでいただきありがとうございます。