前のパートに戻る 完了して次のパートへ  

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

はじめに


本教材では、Laravelを使ってSNS風の記事投稿Webサービスを作ります。

Laravelとは、Webアプリケーションに必要となる機能を揃えたフレームワークのひとつです。

WebアプリケーションフレームワークというとRuby on Railsがよく知られていますが、このLaravelも非常に高い人気を誇っています。

GitHub上のスター数(人気度を示す目安)では、Ruby on Railsが約44,000個であるのに対し、Laravelはそれを凌ぐ約54,000個となっています(2020年現在)。

筆者がエンジニアとして勤務する職場でも、このLaravelが使われています。

本教材で学べること


本教材を通じて、以下について学ぶことができます。

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

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

○ Linuxの基本的なコマンド(pwd, cd, ls, mkdir, cpなど)の使い方

○ PHPに関する知識

  • 三項演算子、null合体演算子
  • 型キャスト、型宣言、nullableな型
  • クロージャ(無名関数)
  • コンストラクタ
  • トレイト

○ Laravelに関する知識

  • フォームリクエスト、バリデーション
  • Bladeテンプレート
  • Laravel Mix
  • 認可
  • コレクション
  • 各種ヘルパ関数
  • Eloquent ORM、データベースマイグレーション
  • Eagerロード

○ Googleアカウントを使ったログインを可能にするLaravel Socialiteの使い方

○ タグ入力ライブラリであるVue Tags Inputの使い方

○ デバッグツールであるLaravel Debugbarを使ったSQLの改善方法

○ N + 1 問題

○ Web開発の現場に浸透している仮想化技術Dockerを用いたLaravel開発環境構築(Laradockを利用)

○ メールテストツールであるMailHogの使い方

○ メールサービスであるSendgridを使った実際のメール送信方法

○ クラウドサービスHerokuを使って、Laravel, Vue.jsのアプリケーションをインターネットに公開する方法

作成するアプリケーションのイメージをつかもう


本教材で作成するSNS風Webサービスの画面の一部を紹介します。

記事一覧画面

いいね機能

記事投稿・更新画面

ユーザーページ

ログイン画面

パスワード再設定メール送信リクエスト画面

この教材の対象者


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

受講にあたって必要な条件


○ 全体

  • HTMLの基礎知識
  • PHPの初歩的な知識(変数、配列、連想配列、if文、foreach文、関数・引数の概念の理解)

○ 7章〜9章

  • Vue.jsの初歩的な知識(コンポーネント、プロパティ、データ、メソッド、算出プロパティの概念の理解)

学ばないこと


本教材はLaravelでの開発方法を把握することを一番の目的としています。

その為、以下については解説をしていません。

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

また、Vue.js, SQLについては教材に登場するコードについては解説していますが、Vue.js, SQLそのものの基礎については解説していません。

ご注意ください。

本教材の対象OS


  • Mac OS

本教材の対応バージョン


  • Laravel 6.8
  • Vue.js 2.6.11

目次


本教材では以下の順序で開発を進めていきます。

0〜6章および10〜11章は、Laravelを使った開発となります。

7〜9章は、LaravelにVue.jsも組み合わせた開発となります。

0章 はじめに

あなたのMacに、本教材を進める上で必要な開発環境を構築する方法を解説します。

1章 記事一覧を作ろう

Webサービスのトップページとなる記事一覧を作ります。

2章 ユーザー登録機能とログアウト機能を作ろう

ユーザー登録機能を作ります。

また、ログアウト機能も作ります。

3章 ログイン機能を作ろう

ログイン機能を作ります。

4章 記事投稿機能を作ろう

記事の投稿機能を作ります。

5章 記事更新・削除・詳細表示を作ろう

投稿済みの記事を更新・削除する機能を作ります。

また、他人が記事を更新できないよう認可機能を追加します。

その他、記事1件を詳細表示する機能を作ります。

6章 メールを使ったパスワード再設定機能を作ろう

ログインパスワードを忘れたユーザーのために、メールを使ったパスワード再設定機能を作ります。

7章 いいね機能を作ろう

各記事にいいねをする機能を作ります。

8章 タグ機能を作ろう

各記事に複数のタグを付ける機能を作ります。

また、タグごとの記事一覧機能を作ります。

9章 フォロー機能とユーザーページ機能を作ろう

ユーザーをフォローする機能を作ります。

また、各ユーザーの全フォロワーなどを表示するユーザーページ機能を作ります。

10章 Googleアカウントを使ったユーザー登録・ログイン機能を作ろう

パスワードを使わずにGoogleアカウントを使ってユーザー登録・ログインを可能とする機能を作ります。

11章 デバッグバーを使ってSQLを改善しよう

Laravelのデバッグバーを使って、これまで作った各機能でLaravelがどんなSQLを発行しているかを確認します。

また、Laravelのコードを修正して、それらSQLを改善(発行回数を削減)します。

12章 作ったWebサービスをインターネットに公開しよう

ここまで作ったLaravelアプリケーションはPC上で動かしていましたが、クラウドサービス(PaaS)であるHerokuにLaravelアプリケーションを配置(デプロイ)します。

こうすることで本教材で作ったWebサービスをあなただけでなく、友だちやインターネット上の知り合いに使ってもらうことができるようになります。

議論

0 質問

このコースの評価は?