Laravel(+Vue.js)でSNS風Webサービスを作ろう!

【初級レベル/25時間】いいね・タグ付け・フォロー・Googleログイン機能を持つ記事投稿型SNS風Webサービスを開発!PHP/Laravelの様々な知識やVue.jsの導入方法、Sendgridを使ったメール送信、本番環境デプロイなどWebアプリ開発に役立つ知識を学ぶ。

Laravelを使った基本からVue.jsを組み合わせた応用までを丁寧に解説

本教材では、Laravelを使った基本的な機能の作り方から、Vue.jsを組み合わせた応用的な機能の作り方まで、段階を踏んで徐々に学べる構成となっています。

学べる内容は、いいね・ハッシュタグ風のタグ付け・フォロー・パスワード再設定メール送信・ソーシャルログイン(Googleログイン)など、多くのWebサービスで求められる機能を盛り込んでいます。

また、

・認証機能を作る際はコマンド1発ではなく、フレームワークのコードも読んで作る
・Laravelを使っていると普段は目にすることの無いSQLを確認して改善する

など、単に機能を作ることだけを目的とするのでなく、裏側の仕組みも理解できるよう解説しています。

本教材を通じてLaravelVue.jsによるWebアプリケーション開発を学び、ポートフォリオ作りなどに活かしていただければと思います。


学習内容

  • PHPの人気フレームワークであるLaravelを使ったWebアプリケーション開発の流れ
  • 記事登録、参照、更新、削除機能の作り方
  • ユーザー登録・ログイン・ログアウト機能の作り方(コマンド一発で作るのではなく、フレームワークのコードを読みながら作ります)
  • メールを使ったパスワード再設定機能の作り方
  • Googleアカウントを使ったユーザー登録・ログイン機能の作り方
  • いいね機能の作り方(一部Vue.jsを使用)
  • タグ機能の作り方(一部Vue.jsを使用)
  • フォロー機能の作り方(一部Vue.jsを使用)


さらに、周辺知識として以下も解説していきます。

  • PHPに関する知識
    • 三項演算子、null合体演算子
    • 型キャスト、型宣言、nullableな型
    • クロージャ(無名関数)
    • コンストラクタ
    • トレイト
  • Laravelに関する知識
    • フォームリクエスト、バリデーション
    • Bladeテンプレート
    • Laravel Mix
    • 認可
    • コレクション
    • 各種ヘルパ関数
    • Eloquent ORM、データベースマイグレーション
    • Eagerロード
  • Linuxの基本的なコマンド(pwd, cd, ls, mkdir, cpなど)の使い方
  • Googleアカウントを使ったログインを可能にするLaravel Socialiteの使い方
  • タグ入力ライブラリであるVue Tags Inputの使い方
  • デバッグツールであるLaravel Debugbarを使ったSQLの改善方法
  • N + 1 問題
  • Web開発の現場に浸透している仮想化技術Dockerを用いたLaravel開発環境構築(Laradockを利用)
  • メールテストツールであるMailHogの使い方
  • メールサービスであるSendgridを使った実際のメール送信方法
  • クラウドサービスHerokuを使って、Laravel, Vue.jsのアプリケーションをインターネットに公開する方法


実際に作成するサービスのイメージ


教材の対象者

  • PHPの初歩を学んだ次のステップとして、何かWebアプリケーションを作ってみたいと思っている方
  • PHPの人気フレームワークであるLaravelを使ったWebアプリケーション開発を学びたい方
  • LaravelにVue.jsを組み合わせた開発方法を知りたい方
  • Webアプリケーション開発に役立つさまざまな知識を得たいと思っている方


受講における必要条件

  • 教材全体
    • HTML/CSSの基礎知識
    • PHPの初歩的な知識(変数、配列、連想配列、if文、foreach文、関数・引数の概念の理解)
  • 7章~9
    • Vue.jsの初歩的な知識(コンポーネント、プロパティ、データ、メソッド、算出プロパティの概念の理解)


学ばないこと

本教材はLaravelでの開発方法を把握することを一番の目的としています。その為、以下については解説をしていません。

・HTMLに関する知識
・CSSに関する知識
・CSSフレームワークであるMDBootstrap(マテリアルデザイン版Bootstrap4)に関する知識

また、Vue.js, SQLについては教材に登場するコードについては解説していますが、Vue.js, SQLそのものの基礎については解説しておりませんので、ご注意ください。


本教材の対応バージョン

  • Laravel 6.8
  • Vue.js 2.6.11


本教材で質問対応可能なOSや環境

  • Mac OS


★現在開催中のイベント(4/11まで)★

この教材の執筆者


やんばる@shonansurvivors
やんばる@shonansurvivors

Web系の企業でLaravel + Vue.jsによる自社Webサービスの開発を行なっています。 その他経験言語、フレームワークはPython, Djangoなど。 独学でプログラミングを学びWebエンジニアに転職した経験を持つことから、プログラミング初学者の方々に役に立つ知識を提供したいと思っています。 twitterアカウント: @shonansurviors


本教材のカリキュラム



今すぐはじめる!