LaravelAPIとVueの構成はざっくり分けると２種類ある
いつもご利用ありがとうございます。このブログは、広告費によって運営されています。
目次
Laravel と Vue でサービスなりポートフォリオを作る際には、ざっくり分けると２種類の構成があります。それぞれメリットがあると思うので、まとめてみます。
はじめに
API とかホスティングとか、「まじでよく分からない」人向けの記事です。
これを読めば、ウェブ上にたくさんある、Laravel×Vue の記事が何となくつながると思います。
なぜ書いたのか
２種類あることを知っておかないと、
参考にする記事をミスる
というのを感じていて、両者が混じったような書き方をして沼にハマるみたいなことが起きると感じているからです。
（簡単な）Laravel の中に Vue があるパターン
これはつまり、Laravel のプロジェクトを一個サーバーにアップすれば良いというパターンになります。
Laravel では、簡単に Vue を使うことができる、
laravel-ui というパッケージがあり、それを使うとコマンド３つくらいで認証までセットでついた、Vue の雛形が生成されます。
それを元に作っていくのがこの Laravel の中に Vue があるパターンとなります。
このパターンだと、blade の中に Vue コンポーネントを import するので、csrf トークンを使うことができ、
手軽にセキュアにできる
セッションで簡単に認証を実装できる
CORS を気にしなくて良い
というメリットがあります。
⇨Laravel ＋ Vue.js ＋ Vue-Router+Vuetify の環境構築
（難しめ）Laravel と Vue が完全に分離しているパターン
逆に完全に分離するパターンもあり得ます。
我々が目にするような大きいサービスはむしろこっちが普通なのでは無いでしょうか？
完全に Vue と Laravel のプロジェクトを別々に作成し、別のサーバーにアップし、そしてお互いが味方サービスですよという設定をしてセキュアにするというものになります。
この時に使うパッケージとして代表的なのが、
Laravel だと Laravel-Passport
Vue だと Auth-module
になってきます。
このパターンのときには、API 認証が必須になってきます。
⇨Nuxt3 と Laravel8（API）の環境構築をしてデータを取得する方法
どちらでやるべきか？
その人の力量や、サービスのフェーズ、やりたいことによると思います。
力量
前者の Laravel の中に Vue の方が簡単です。
自信がなければ、前者で始める方が良いと思います。
サービスのフェーズ
フェーズというとふわっとしますが、エンジニアがそこそこの人数いて、フロントエンドとバックエンドが分かれているような段階では後者の方が良いと思います。
前者は設定に多くの時間が必要では無いことから、仮説段階のサービスならもしかしたら前者の方が良いかもしれません。
ただ、長く保守性高く続けて行きたいと志しているサービスであれば走り始めから後者でやろうというのはエンジニアとして普通の感覚だと思いますし、個人的にはその考え方はとてもリスペクトできます。
そして早く作って早く仮説したいというのも分かります。
ということで、この項目は結論なしで！
やりたいこと
Vue は特性上 SEO には向いていません。
SEO というのは Google とかの検索で順位を高くすることを指します。
というのも、Vue は SPA で Javascript で表示を作っていることから、
Google の検索順位をつけるためのクローラーがページの情報を読み取りにくいという特徴があります。
なので、検索順位を意識するパターンでは、前者は向いていません。
検索順位を意識しているのであれば、後者パターンで、Vue の Nuxt.js というフレームワークを使う方が良いと思います。
ポートフォリオではどうすべきか？
前者を推します。
なぜなら、最初は普通に何をしていても難しいからです。
Vue と Laravel でデータを連携して一覧ページを作るのでも大変だと思います。
後者だと、認証のための機能を作っている時が全体を通して一番難しく、
一番最初が一番難しいみたいなパターンに陥ります。
また、その最初の部分以外はほぼ同じというのもあります。
認証の部分だけ作ってしまえば残りはほとんど同じような書き方
LaravelではJSONでレスポンスを作るだけ
Vueではaxiosでデータを取得して、そのデータで表示を作ってあげるだけで、できるからです。
「別べつパターンでできるようになりたい！」
というやる気に満ちた人もいると思いますが、一番最初は前者でやって、慣れた後に認証のところだけ勉強がてら、
Laravel と Nuxt.js を別べつにプロジェクトを立てて練習しても全然遅くはありません。
最初は難易度を下げて、慣れてから次のステップをふむ
というのが僕のオススメです。
（同じような理由で Docker も後でやった方がいいと思っている派です）
参考
まとめ
以上です。
なんかちょっとセンシティブな内容について語ってしまいましたが、
できるだけ難易度を下げて最初は取り組んでもらいたいという内容でございます！
感想・苦情は TwitterDM にご連絡ください。
それでは！
人気記事
