未経験からエンジニア転職をするための最強ロードマップロードマップ

【応用Laravel教材①】タスク管理アプリを実装してLaravelをより深く知る!〜環境構築からログイン機能実装編〜

ファド

こんにちは!
PHPのLaravelやJavaScriptでWeb開発をしているフリラーンスエンジニアのファドと申します!

こちらの記事は応用Laravel教材の第1回目の記事になります。

その他の応用Laravel教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。

目次

作成するアプリ

Laravelで基本のCRUD操作ができるようになったので、いよいよ本格的なアプリを作成していきましょう。

今回作成するアプリは、「タスク管理アプリ」です。

アプリ作成準備

さっそくLaravel教材で作成したfirst-appと同じLaravelディレクトリにsailコマンドでプロジェクトを作成していきましょう。
ターミナルで下記コマンドをLaravelディレクトリ上で実行してください。

Laravelプロジェクト作成

$ curl -s "https://laravel.build/task-app" | bash

実行が終わったらsail upコマンドで起動させましょう。
ターミナルで下記コマンドをLaravelディレクトリ上で実行してください。

sail up

$ cd task-app && ./vendor/bin/sail up -d

これでタスク管理アプリのプロジェクト作成が完了しました。

phpMyAdminインストール

次にphpMyAdminのインストールをしていきましょう。
task-app/docker-compose.ymlを下記の通り編集してください。

# For more information: https://laravel.com/docs/sail
version: '3'
services:
    # --- ここから追加 ---
    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        links:
            - mysql:mysql
        ports:
            - 8888:80
        environment:
            PMA_HOST: mysql
        networks:
            - sail
    # --- ここまで追加 ---
    laravel.test:
    # --- 以下省略 ---

編集が完了したら、一旦開発環境をオフにします。
ターミナルで下記コマンドをtask-appディレクトリ上で実行してください。

$ ./vendor/bin/sail stop

もう一度起動させるので、ターミナルで下記コマンドをtask-appディレクトリ上で実行してください。

$ ./vendor/bin/sail up -d

これでphpMyAdminがインストールできたので、さっそくhttp://localhost:8888へアクセスして下記画像のような画面が表示されればOKです。

データベースにアクセスするためのユーザー名とパスワードはtask-app/.envに記述されているので確認してみましょう。

# --- 以上省略 ---

DB_CONNECTION=mysql
DB_HOST=mysql
DB_PORT=3306
DB_DATABASE=task_app
DB_USERNAME=sail
DB_PASSWORD=password

# --- 以下省略 ---

DB_〇〇となっているところがデータベースに関する情報です。
データベース名がtask_appでユーザー名がsail、パスワードがpasswordとなります。

phpMyAdminで上記のユーザー名とパスワードを入力してログインしてください。

task_appというデータベースが作成されていればOKです。

初期設定

Laravelをインストールした直後にしておく初期設定をしておきましょう。

初期設定で行うことは下記の4つです。

  1. アプリケーション名変更
  2. タイムゾーン変更
  3. 言語設定
  4. 日本語ファイルダウンロード

アプリケーション名変更

それでは、アプリケーション名を変更するためにtask-app/.envを下記の通り編集してください。

# APP_NAME=Laravelから下記に変更
APP_NAME="タスク管理アプリ"
APP_ENV=local
# --- 以下省略 ---

タイムゾーン・言語設定・日本語ファイルダウンロード

次はタイムゾーン・言語設定・日本語ファイルダウンロードを一気に行っていきます。

task-app/config/app.phpを下記の通り編集してください。

// 'timezone' => 'UTC'から下記に変更(72行目付近)
'timezone' => 'Asia/Tokyo',

// 'locale' => 'en'から下記に変更(85行目付近)
'locale' => 'ja',

// 'faker_locale' => 'en_US'から下記に変更(111行目付近)
'faker_locale' => 'ja_JP',

編集箇所はLaravel教材の時と全く同じです。
最後にアプリケーション名と、タイムゾーン、言語設定の変更をアプリケーションに反映させるためにターミナルにて、下記コマンドをtask-appディレクトリ上で実行してください。

$ ./vendor/bin/sail php artisan cache:clear && ./vendor/bin/sail php artisan config:clear

これでアプリケーション名とタイムゾーン、言語設定を変更することができました。

最後に日本語ファイルのダウンロードを行っておきましょう。
こちらはドキュメントにも載っていますが、下記3コマンドで完了します。
さっそくターミナルにて、下記コマンドをtask-appディレクトリ上で実行してください。

$ ./vendor/bin/sail php -r "copy('https://readouble.com/laravel/8.x/ja/install-ja-lang-files.php', 'install-ja-lang.php');"
$ ./vendor/bin/sail php -f install-ja-lang.php
$ ./vendor/bin/sail php -r "unlink('install-ja-lang.php');"

コマンド実行後、task-app/resources/lang/jaディレクトリが作成されていればOKです。

これで開発の準備は整ったので、さっそく開発していきましょう。

ログイン機能実装

まずはログイン機能を実装していきます。
Laravelにはログイン機能を実装するためにLaravel Breezeが提供されています。

このLaravel Breezeを使用すると、たった数コマンドで認証機能が実装できてしまいます。
新規登録機能やログイン機能、ログアウト機能は認証機能と言われるので、覚えておきましょう。

それではさっそくLaravel Breezeを導入していきましょう。
ターミナルで下記コマンドをtask-appディレクトリ上で実行してください。

$ ./vendor/bin/sail composer require laravel/breeze

このコマンドでLaravel Breezeに関するデータがインストールされたので、次はそれらのデータをLaravelに反映させていきましょう。

ターミナルで下記コマンドをtask-appディレクトリ上で実行してください。

$ ./vendor/bin/sail php artisan breeze:install

コマンドの実行が終わると様々なファイルが追加されています。

追加されているファイルを覚える必要はありませんが、下記のようなファイルが追加されています。

app/Http/Controllers/Auth/AuthenticatedSessionController.php
app/Http/Controllers/Auth/ConfirmablePasswordController.php
app/Http/Controllers/Auth/EmailVerificationNotificationController.php
app/Http/Controllers/Auth/EmailVerificationPromptController.php
app/Http/Controllers/Auth/NewPasswordController.php
app/Http/Controllers/Auth/PasswordResetLinkController.php
app/Http/Controllers/Auth/RegisteredUserController.php
app/Http/Controllers/Auth/VerifyEmailController.php
app/Http/Requests/Auth/LoginRequest.php
app/View/Components/AppLayout.php
app/View/Components/GuestLayout.php
resources/views/auth/confirm-password.blade.php
resources/views/auth/forgot-password.blade.php
resources/views/auth/login.blade.php
resources/views/auth/register.blade.php
resources/views/auth/reset-password.blade.php
resources/views/auth/verify-email.blade.php
resources/views/components/application-logo.blade.php
resources/views/components/auth-card.blade.php
resources/views/components/auth-session-status.blade.php
resources/views/components/auth-validation-errors.blade.php
resources/views/components/button.blade.php
resources/views/components/dropdown-link.blade.php
resources/views/components/dropdown.blade.php
resources/views/components/input.blade.php
resources/views/components/label.blade.php
resources/views/components/nav-link.blade.php
resources/views/components/responsive-nav-link.blade.php
resources/views/dashboard.blade.php
resources/views/layouts/app.blade.php
resources/views/layouts/guest.blade.php
resources/views/layouts/navigation.blade.php
routes/auth.php
tailwind.config.js
tests/Feature/AuthenticationTest.php
tests/Feature/EmailVerificationTest.php
tests/Feature/PasswordConfirmationTest.php
tests/Feature/PasswordResetTest.php
tests/Feature/RegistrationTest.php

ファイル名や拡張子を確認すると、コントローラーやビューなどのファイルがインストールされていることがわかるかと思います。

次にターミナルで下記コマンドをtask-appディレクトリ上で実行してください。

$ ./vendor/bin/sail npm install && ./vendor/bin/sail npm run dev

実行に時間がかかることもありますが、このコマンドを実行することで認証に関する画面が無事に表示できるようになります。

試しにhttp://localhostへアクセスしてみると、画面右上にLoginボタンRegisterボタンが表示されます。

「Log in」ボタンをクリックすると、下記のようにログイン画面が表示されます。

「Register」ボタンをクリックすると、下記のように新規登録画面が表示されます。

今のままだと画面は表示できるのですが、ユーザー情報を登録するテーブルが作成されていないので、新規登録やログインをすることはできません。

そのため、最後に認証に関するusersテーブルなどを作成するためにマイグレーションを行いましょう。

ターミナルで下記コマンドをtask-appディレクトリ上で実行してください。

$ ./vendor/bin/sail php artisan migrate

Laravel教材では削除したデフォルトのマイグレーションファイルが実行され、認証用のテーブルが作成されます。

実際に作成されるテーブルはfailed_jobsテーブル migrationsテーブルpassword_resetsテーブルpersonal_access_tokensテーブルusersテーブルの5つが作成されます。

今回使用するのはusersテーブルです。

ユーザー作成

以上でLaravel Breezeの導入は終了ですが、新規登録やログインができることを確認しておきましょう。
http://localhost/registerへアクセスして、新規登録を行いましょう。

登録するデータは下記の通りです。

ラベルデータ
Namefdsa
Emailfdsa@fdsa.fdsa
Passwordfdsafdsa
Confirm Passwordfdsafdsa

無事に登録が完了すれば、下記画面へリダイレクトされます。

右上のユーザー名fdsaをクリックするとLog Outボタンが出てくるのでログアウトしましょう。

http://localhost/loginへアクセスして、ログインを行いましょう。
ログイン情報は下記の通りです。

ラベルデータ
Emailfdsa@fdsa.fdsa
Passwordfdsafdsa

ログインが無事に完了すれば、下記画面へリダイレクトされます。

これで新規登録とログイン、ログアウトの動作確認が完了しました。

テストデータ作成

次にユーザーのテストデータを作成しておきましょう。
テストデータの作成はLaravel教材の時と全く同じです。

まずはシーダーファイルを作成しましょう。
ターミナルで下記コマンドをtask-appディレクトリ上で実行してください。

$ ./vendor/bin/sail php artisan make:seeder UsersTableSeeder

作成したtask-app/database/seeders/UsersTableSeeder.phpを下記の通り編集してください。

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB; // ここを追加

class UsersTableSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        DB::table('users')->insert([
            'name' => 'test',
            'email' => 'test@test.test',
            'password' => bcrypt('testtest'),
            'created_at' => date('Y-m-d H:i:s'),
            'updated_at' => date('Y-m-d H:i:s'),
        ]);
    }
}

Laravelでは、ユーザーのパスワード登録時にセキュリティの観点から必ず暗号化して登録します。
暗号化のためのヘルパーメソッドであるbcryptメソッドも用意されており、簡単に暗号化することができます。

Laravelでユーザーのテストデータを作る際には、パスワードを暗号化することを覚えておきましょう。

次にtask-app/database/seeders/DatabaseSeeder.phpを下記の通り編集してください。

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        $this->call([
            UsersTableSeeder::class,
        ]);
    }
}

これでusersテーブルのテストデータを作成する準備が整いました。
それでは、ターミナルで下記コマンドをtask-appディレクトリ上で実行してください。

$ ./vendor/bin/sail php artisan db:seed

コマンドの実行が完了すると、ユーザー名testというテストデータが作成されます。
念の為、皆さんはphpMyAdminなどで確認しておきましょう。

現在usersテーブルには新規登録画面から登録したユーザー名fdsaのデータとシーダーで登録したユーザー名testの2つのユーザーデータが存在してることになります。

どちらのユーザーでもログインができるかなどは確かめておきましょう。

IDユーザー名メールアドレスパスワード
1fdsafdsa@fdsa.fdsafdsafdsa
2testtest@test.testtesttest

・新規登録
http://localhost/registerアクセス

・ログイン
ログアウト後、http://localhost/loginへアクセス

次の教材

次の教材は下記から簡単に飛ぶことができます!
引き続きプログラミングを楽しんでいきましょう!

あわせて読みたい
【応用Laravel教材②】Laravelでタスク管理アプリ実装!〜テンプレートの作成からログイン画面作成編〜 こちらの記事は応用Laravel教材の第2回目の記事になります。 その他の応用Laravel教材を学習したい方は下記リンクから直接教材へ飛ぶことができます。 各種テンプレート...

プログラミング学習サポートについて

「独学で挫折した。。。」

「一人でのプログラミング学習がしんどい。。。」

「未経験からエンジニア転職をしたいけど何をしたら良いかわからない。。。」

このような悩みをお持ちの方向けに、本教材作成者のファドがMENTAという学習サイトにてあなたのプログラミング学習とエンジニア転職を徹底サポートいたします!

サポート価格はなんと1日あたりたったの約300円!

教材で分からない箇所のサポートはもちろんのこと、本サイトで公開しているすべての課題の解答も公開しております。
また、MENTAで学習を終わらせていただいた方限定で懇意にしていただいている企業さんを紹介することもあります!

なお、サポート内容の詳細は下記の通りです。

  • 目標設定
  • マインドセット
  • オリジナル教材見放題
  • オリジナル課題見放題
  • オリジナル課題の解答見放題
  • 課題コードレビュー
  • 教材への無制限質問
  • 課題への無制限質問
  • ポートフォリオ作成アドバイス
  • 褒めのコーチング

いくつかのプランを用意させていただいておりますので、下記より一度ご覧ください!

あわせて読みたい
【プログラミング学習】1日あたりたったの「300円」のみでプログラミングを学び、最短で転職or稼ぐ!|【ME... プログラミングを学びたいすべての方へこれからの時代は格安でプログラミングを学び、最短で稼げ自己紹介はじめまして!この度はプランをご覧いただき、誠にありがとうござ...

コメント

    この記事が気に入ったら
    フォローしてね!

    よかったらシェアしてね!
    • URLをコピーしました!

    コメント

    コメントする

    目次