1. HOME
  2. ブログ
  3. エンジニアリング
  4. 【Laravel完全解説】インスタ風SNSを作って学ぶチュートリアル

BLOG

ブログ

エンジニアリング

【Laravel完全解説】インスタ風SNSを作って学ぶチュートリアル

本連載では、SNS開発を通じてLaravel開発の基礎を一気に学ぶチュートリアルを提供します。

本格的なアプリ開発を行いながらLaravelの機能を理解していく形式になるので、かなり実践的な知識を手に入れることができます。

バージョン: Laravel 11

チュートリアルの全体像

本チュートリアルを通じて学べる内容は以下のようになります。

  1. Laravelの開発環境セットアップ (now🐾)
  2. Laravel Breezeで認証機能を導入
  3. Laravelのルーティングを徹底解説
  4. Laravelのコントーラーを徹底解説
  5. Laravelのブレイドを使ってみよう
  6. マイグレーションの仕組みを解説
  7. シーディングを使ってみよう
  8. Eloquentの基本と使い方を徹底解説
  9. 画像アップロードを実装する方法
  10. バリデーションを実装してみよう
  11. Laravelで認可処理を実装しよう

チュートリアルを進めていくだけでLaravelの主要機能に一通り触れることができるように設計しています。

動画で学びたい方はこちらから！

作るアプリ紹介

飼っている犬の画像をシェアできるインスタ風アプリを作りながらLaravelを学んでいきます。

イメージしやすいように、いくつか画面を紹介します。

ダッシュボード

ダッシュボード画面ではユーザの投稿管理ができます。

認証ユーザが最初に訪れるページになります。

各投稿をクリックすると、投稿編集画面に進みます。

プロフィール編集

プロフィール編集画面では、名前や自己紹介、アイコンを変更できます。

投稿作成

こちらの画面では、新規投稿が作成できます。

ユーザが入力するのは以下の2つの項目です。

  • 投稿画像
  • キャプション(投稿の説明)

投稿編集

投稿編集画面では、キャプションの修正ができます。

新着投稿

この画面ではユーザの投稿が新着順に並んでいます。タイムラインのような役割です。

各投稿画面をクリックすると投稿詳細画面に移動します。

投稿詳細

ユーザの投稿の詳細が見られるページです。

以下の機能があります。

  • 投稿情報
  • オーナー情報
  • コメント一覧
  • コメント投稿機能

オーナー一覧

登録オーナー一覧が見られます。

登録順に並んでいます。

オーナー詳細

オーナー情報と、オーナーが投稿した画像一覧が表示されます。

ログイン

メールアドレスとパスワードでログインできる画面です。

新規登録

ユーザに以下の項目を入力してもらい新規登録してもらう画面です。

  • 名前
  • メールアドレス
  • パスワード

エディタの準備

本チュートリアルを進めるにあたって、推奨のエディタや設定を紹介します。

すでにお好みのエディタや設定がある場合はスキップしていただいて構いません。

VSCodeインストール

以下のサイトからVisual Studio Codeをインストールします。

https://code.visualstudio.com

拡張機能追加

VSCodeの拡張機能として、PHP Intelephenseをインストールします。

https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client

開発環境構築

Dockerインストール

以下のサイトからDockerをインストールします。

https://www.docker.com/ja-jp

※本チュートリアルではDockerを使って開発を行っていきますが、特にDockerの知識が必要なわけではありませんので安心してください。

詳しい話を知りたい方は、こちらを読んでみてください。

Laravelの環境構築をDockerで行うチュートリアル
Laravelのローカル環境構築方法には、Laravel HomesteadやLaradockを使った方法などがありますが、本記事ではDocker Composeを使った方法を一から解説します。Dockerの仕組みにも触れながら、Laravel11をLEMP環境(Nginx+MySQL+PHP-FPM）で動かす方法を紹介します。Docker Composeで環境構築をできるようになるとLaravelに限らず様々なWebフレームワークをモダンな環境で瞬時に立ち上げられるようになるので、ぜひマスターしてください！構築の流れまずは、大まかな方針をまとめておきます。以下の手順で進めていきます。1.　Nginxで静...

開発環境構築コードをダウンロード

https://github.com/techinit-blog/inusta-workspace

上記の開発環境構築コードをダウンロードします。

git clone git@github.com:techinit-blog/inusta-workspace.git

Docker起動

先ほどインストールしたDockerをクリックして起動します。

Dockerコンテナ起動

以下のコマンドでDockerコンテナを起動します。

cd inusta-workspace
docker compose up -d --build

Laravelプロジェクト作成

先ほど立ち上げたDockerコンテナに入ります。

docker compose exec app bash

それでは、プロジェクト作成を作成しましょう。

以下のコマンドを実行します。

composer create-project laravel/laravel inusta "11"

しばらく待つと、新しく inusta フォルダが作成されて初期状態のLaravelがインストールされます。

以下のコマンドを実行しましょう。

mv inusta/* ./

mv inusta/.* ./ 

rmdir inusta

実行し終わりましたら、動作確認をしてみましょう。

http://localhost:8000

にアクセスして以下の画面が表示されるか確認しましょう。

データベース設定

.envファイルを以下のように書き換えます。

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=database
DB_USERNAME=user
DB_PASSWORD=password

Docker Compose再起動

# Docker内の場合は以下のコマンドを実行してください。
exit

# Dockerコンテナ再起動
docker compose restart

phpMyAdmin

http://localhost:3300

にアクセスすると、データベースの中身が見られます。

これから開発を進めていく際にはこちらでデータ確認を行いながら進めていくと便利です。

素材

先ほどダウンロードした　inusta-workspace/assets 内に画像ファイルを置いてあります。

投稿を作成するときのサンプル画像としてお使いください。

まとめ

以上で環境構築は終了です。

それではチュートリアルを始めていきましょう！

LaravelのBreezeで認証システムをコマンド一発で導入する方法
本記事では、Laravel Breezeを使って認証機能を導入していきます。一般的に認証機能の導入は比較的手間のかかる作業になりますが、Laravelの場合はあらかじめパッケージを提供してくれているので、コマンドを打つだけですぐに導入できてしまいます。チュートリアルの全体像本チュートリアルを通じて学べる内容は以下のようになります。Laravelの開発環境セットアップLaravel Breezeで認証機能を導入 (now🐾)Laravelのルーティングを徹底解説Laravelのコントーラーを徹底解説Laravelのブレイドを使ってみようマイグレーションの仕組みを...

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

関連記事