Laravel + Vue.jsでいいね機能・フォロー機能などを作るチュートリアルを公開しました

初心者向け Laravel PHP Vue.js

はじめに

LaravelとVue.jsで、いいね機能やフォロー機能を持つSNS風のWebサービスを作るチュートリアルをTechpitで公開しました。

目次

執筆の経緯

Techpitでは2019年9月にLaravel x LINE Botのチュートリアルを公開しましたが(現在公開終了)、第二弾としてブラウザで利用できるタイプのスタンダードなWebアプリケーションの作り方も解説したいと思っていました。

2019年末にアプリ部分をいったん仕上げ、年が明けて1月からチュートリアル記事部分の執筆を開始し、2020年3月に完成しました。

公開から1年が経ちますが、その間も随時内容を見直しており、多くの方に学んでもらっています。

字数は50万字以上、画像も多く使用していますので、もし本にすると400ページぐらいのボリュームになるかと思います。

執筆にあたって心掛けたこと

チュートリアルの執筆にあたって以下を心掛けました。

  1. Webアプリの完成だけを目的とせず様々な知識を学べるようにする

  2. プログラミング初心者が知りたそうなWebサービスの「よくある機能」の作り方を盛り込む

  3. 基本的な機能から応用的な機能まで段階を踏んで学ぶ構成にする

  4. 認証機能を敢えてコマンド一発で作らない

  5. メール送信に関しては商用のWebサービスでも利用されるメールサービスを使う

  6. Laravelを使っていると普段目にしないSQLを確認・改善するプロセスを盛り込む

順に解説します。

1. Webアプリの完成そのものを目的とせず様々な知識を学べるようにする

チュートリアルでは、ただWebアプリの完成を目指すのではなく、途中途中に登場するコードとその解説を通じて、様々な知識を得られるようにしました。

本チュートリアルでは、Webアプリ作りを通じて、以下の知識に触れられるようになっています。

  • プログラミング一般
    • DIの初歩 / N+1問題
  • PHP
    • 三項演算子 / null合体演算子 / 型キャスト / 型宣言 / コールバック / クロージャ / トレイト
  • Laravel
    • リソースルート / authミドルウェア / CSRF保護 / フォームリクエスト / バリデーション / Blade / LaravelMix / 認証・認可 / ポリシー / コレクション / 各種ヘルパ関数 / メール / Eloquent ORM / データベースマイグレーション / リレーション / アクセサ / Eagerロード / Laravel Socailite / Laravel Debugbar
  • Vue.js
    • 単方向のデータフロー / Vue Tags Input
  • メール関連
    • Mailhog / Sendgrid

DI(Dependency Injection/依存性の注入)、型宣言、トレイトなどPHP初心者にはやや敷居が高いと思われる内容にも、知識の入り口として少し触れるようにしています。

2. プログラミング初心者が知りたそうなWebアプリの「よくある機能」の作り方を盛り込む

このチュートリアルで作成するWebアプリそのものはシンプルな記事投稿型サービスとなっています。

その代わりに、

  • いいね機能
  • フォロー機能
  • 記事へのタグ付け機能
  • ソーシャルログイン(Googleログイン)

といった、Webサービスでよく見られる機能を盛り込んでいます。

汎用的な機能ですので、プログラミング初心者の方が今後自作するWebアプリ、ポートフォリオに追加機能として組み込むこともできるのではないかと思います。

また、機能自体も、複数テーブルの多対多のリレーションや非同期通信、外部ライブラリの利用などの要素があり、知識やスキルのアップに繋がるのではと思います。

3. 基本的な機能から応用的な機能まで段階を踏んで学ぶ構成にする

一度に多くの情報を解説されても理解が追いつかない、という自身の学習経験から、

  • ひとつの要素を解説し、これを実装してから次の要素に進む

という構成を心掛けました。

例えば、第1章の「記事一覧を作ろう」では記事一覧画面を作成しますが、1章の前半では、コントローラーからビューに渡す記事一覧の情報をデータベースから取得せず、ダミーの固定データとしています。

具体的には、

  • コントローラーが初登場するパートでは、ビューにデータを渡すというコントローラーの役割のひとつを理解してもらう
  • その次のパートでは、ビューを作成し、ダミーの固定データを表示する
  • さらにその次のパートで、初めてデータベースに記事テーブルを作成する

といった具合です。

Laravel、というかMVCフレームワークそのものを初めて触る初心者でも、つまづくことなく、ひとつひとつの要素を学んでいけるようになっています。

なお、チュートリアルの後半では、基礎を理解している前提でもう少しテンポアップして解説を進めますので、説明がゆっくり過ぎてまどろっこしい、といったことも無いかと思います。

いま説明したのは1つの章の構成の話ですが、チュートリアル全体としても、

  • 前半の6章まではLaravelの知識だけで開発できる
  • 中盤を過ぎた7章の「いいね機能」からは応用編としてフロントエンドにVue.jsを導入

といった構成になっています。

チュートリアルの章立て

  • 0章：はじめに
  • 1章：記事一覧を作ろう
  • 2章：ユーザー登録機能を作ろう
  • 3章：ログイン機能を作ろう
  • 4章：記事投稿機能を作ろう
  • 5章：記事更新・削除・詳細表示を作ろう
  • 6章：メールを使ったパスワード再設定機能を作ろう
  • === ここまでLaravelのみ ===
  • === ここからVue.jsも登場 ===
  • 7章：いいね機能を作ろう
  • 8章：タグ機能を作ろう
  • 9章：フォロー機能とユーザーページ機能を作ろう
  • 10章：Googleアカウントを使ったユーザー登録・ログイン機能を作ろう
  • 11章：デバッグバーを使ってSQLを改善しよう
  • 12章：作ったWebサービスをインターネットに公開しよう

4. 認証機能を敢えてコマンド一発で作らない

もともとLaravelは、(laravel/uiというライブラリを別途インストールすれば)ユーザー登録やログインといった認証関連の機能をコマンド一発で作成できます。

これはこれでとても便利なのですが、この方法だけでしか認証機能を作った経験が無い場合、初心者がいざ自分の作ろうとするWebアプリに合わせて認証機能をカスタマイズしようと思った時に、どのコードから手を付ければ良いのか分からないのではないでしょうか？

そこで、本チュートリアルでは認証機能を敢えてコマンド一発で作らずに、フレームワークのコードを読みながら順に作成していくようにしました。

本チュートリアルを通じて、フレームワークのコードを読む、という実務で求められる行為にも少し慣れることができるのではないかと思います。

5. メール送信に関しては商用のWebサービスでも利用されるメールサービスを使う

Laravel初心者で、Laravelからメール送信を行ったことがある人は、普段から馴染みのあるGmailのセキュリティ設定を下げて利用したことが多いのではないでしょうか。

本チュートリアルでは、商用のWebサービスでも利用されている、Sendgridというメールサービスの無料枠を使ってメール送信を行う方法を解説しています。

今後、Laravelで個人開発のWebサービスなどを作る際に、メール送信機能を組む込む上で、この知識が役に立つかと思います。

6. Laravelを使っていると普段目にしないSQLを確認・改善するプロセスを盛り込む

LaravelではデータベースのアクセスにORM(Object-relational mapping)が使用されており、SQLを書くことなく、データベースのテーブルにアクセスできます。

ただし、実務ではどのようにSQLが発行されているか意識して開発する必要があります。

本チュートリアルでは、Laravelのデバッグ機能を使用して実際に発行されているSQLを確認するとともに、非効率な部分(N+1問題)を改善してLaravelのレスポンスを向上させるプロセスを学びます。

終わりに

以上、Laravel x Vue.jsのチュートリアルの解説でした。

ぜひ、このチュートリアルを手に取ってLaravelを学び、個人開発や就職のためのポートフォリオ作りなどに活かしていただければと思います！