【独学】はじめてのWebプログラミング – 10.4 Webページ開発 3-④(Windows)

ログイン機能の作成

Laravelのログイン機能の導入

Laravelにはログイン機能を簡単に作成できる機能がありますので、それを導入します。

Visual Studio Codeでターミナルを開き、「cd todo_list」を実行します。
その上で、以下のコマンドを実行します。

composer require laravel/ui

「require」は、文字通り「要求する」という意味です。
「laravel/ui」は、Laravelフレームワークの中のUI機能という意味です。
「Laravelフレームワークの中のUI機能を外部サーバーから取得してくる」という意味になりますね。
※UIとは、User Interfaceの略で、画面の装飾と思って下さい。laravel/uiを導入することにより、画面の装飾が簡単にできるようになります。

VSCode

続いて、導入したUI機能に、Bootstrapおよびログイン機能(のひな形)を導入します。
ターミナルで以下のコマンドを実行します。

php artisan ui bootstrap –auth

「UI機能に、Bootstrapおよびログイン機能(のひな形)を導入する」という意味になります。

VSCode

LaravelのUI機能は、Node.jsを必要とします。
そのため、ターミナルで以下を実行します。これは覚えるしかありません。

npm install

「npm」はNode.jsのコマンドです。
「install」を指定することで、必要なファイルやフォルダを生成します。

続いて、ターミナルで以下のコマンドを実行します。
これは覚えるしかありません。

npm run development

以下のように表示されると思います。

VSCode

再度、同じコマンドを実行します。(時間が掛かります)

npm run development

「successfully」と出ていればOKです。

これで、ログイン機能(のひな形)を導入することができました。
ターミナルで「php artisan serve」を実行し、ブラウザで「http://127.0.0.1:8000」にアクセスします。
右上に「Register」(ユーザー登録機能)および「Log in」(ログイン機能)のリンクができていることがわかります。それぞれをクリックしてみて下さい。以下のような画面が表示されればOKです。

ブラウザ
ブラウザ
ブラウザ

ユーザー登録画面で、任意に入力し、ユーザー登録をしてみます。

ブラウザ
ブラウザ

右上のユーザー名を選択し、ログアウトを行います。
続いて、登録したユーザーでログインしてみます。

ブラウザ
ブラウザ
ブラウザ

ホーム画面の変更

ログイン後に、タスク一覧画面に遷移するようにしていきます。
ログイン後にアクセスするコントローラーとして、「laravel/todo_list/app/Http/Controllers/Auth」フォルダにLaravelが自動生成したLoginController.phpファイルがあります。このファイルを以下のように修正します。

laravel/todo_list/app/Http/Controllers/LoginController.php

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class LoginController extends Controller
{
    /*
    |--------------------------------------------------------------------------
    | Login Controller
    |--------------------------------------------------------------------------
    |
    | This controller handles authenticating users for the application and
    | redirecting them to your home screen. The controller uses a trait
    | to conveniently provide its functionality to your applications.
    |
    */

    use AuthenticatesUsers;

    /**
     * Where to redirect users after login.
     *
     * @var string
     */
    // ★修正箇所(ここから)
    protected $redirectTo = '/tasks';
    // ★修正箇所(ここまで)

    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }
}

「$redirectTo」変数は、「ログイン後にどこに遷移するか」を表しています。
これを「/tasks」に修正しています。「http://localhost/tasks」の「/tasks」を表しています。
実際にログインすることで、以下のようにタスク一覧画面に遷移することを確認して下さい。

ブラウザ

※LaravelのUI機能を導入したことで、装飾が行われています。

タスク一覧表示機能の変更

ログインしたユーザーに紐づくタスクが表示されるように修正します。

タスクモデルの変更

Task.phpを以下のように修正します。

laravel/todo_list/app/Models/Task.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Task extends Model
{
    use HasFactory;

    // ★変更箇所2(ここから)
    public $fillable = ['name'];
    // ★変更箇所2(ここまで)

    // ★変更箇所1(ここから)
    // タスクをもつユーザーの取得
    public function user()
    {
        return $this->belongsTo(User::class);
    }
    // ★変更箇所1(ここまで)
}

変更箇所1について解説します。
タスクをもつユーザーを取得する「user関数」を追加しています。
「belongsTo」はLaravelがもつ関数で、引数に関連があるモデル(のクラス)を指定します。ここでは、Userモデル(のクラス)を指定しています。「タスクをもつユーザーを取得」している、ということですね。

変更箇所2について解説します。
user関数などを使ってユーザーの関連を表現するようにしていきます。
そのため「user_id」の指定は削除しておきます。

ユーザーモデルの変更

User.phpを以下のように修正します。
(User.phpは、Laravelが自動生成したファイルです)

laravel/todo_list/app/Models/User.php

<?php

namespace App\Models;

use Illuminate\Contracts\Auth\MustVerifyEmail;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens, HasFactory, Notifiable;

    /**
     * The attributes that are mass assignable.
     *
     * @var string[]
     */
    protected $fillable = [
        'name',
        'email',
        'password',
    ];

    /**
     * The attributes that should be hidden for serialization.
     *
     * @var array
     */
    protected $hidden = [
        'password',
        'remember_token',
    ];

    /**
     * The attributes that should be cast.
     *
     * @var array
     */
    protected $casts = [
        'email_verified_at' => 'datetime',
    ];

    // ★変更箇所(ここから)
    // ユーザーがもつタスクの取得
    public function tasks()
    {
        return $this->hasMany(Task::class);
    }
    // ★変更箇所(ここまで)
}

ユーザーがもつタスクを取得する「tasks関数」を追加しています。
「hasMany」はLaravelがもつ関数で、引数に関連があるモデル(のクラス)を指定します。ここでは、Taskモデル(のクラス)を指定しています。「ユーザーがもつタスクを取得」している、ということですね。

タスクコントローラーの変更

TaskController.phpを以下のように修正します。

laravel/todo_list/app/Http/Controllers/TaskController.php

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Models\Task;

class TaskController extends Controller
{
    // ★変更箇所1(ここから)
    public function __construct()
    {
        $this->middleware('auth');
    }
    // ★変更箇所1(ここまで)

    public function index(Request $request)
    {
        // ★変更箇所2(ここから)
        $tasks = $request->user()->tasks()->get();
        // ★変更箇所2(ここまで)
        return view('tasks.index', [
            'tasks' => $tasks,
        ]);
    }

    public function createTask(Request $request)
    {
        // ★変更箇所3(ここから)
        $request->user()->tasks()->create([
            'name' => $request->name,
        ]);
        // ★変更箇所3(ここまで)

        return redirect('/tasks');
    }


    public function deleteTask(Request $request)
    {
        $id = $request->id;
        Task::find($id)->delete();
        return redirect('/tasks');
    }
}

変更箇所1について解説します。
コンストラクタで「middleware関数」を実行しています。middleware関数はLaravelの関数で、引数に「auth」を指定することで、このクラス(TaskControllerクラス)内で、ログインしているユーザー情報を取得できるようになります。これは覚えるしかありません。

変更箇所2について解説します。
「user関数」は、タスクモデルで追加した関数です。(ログインしている)ユーザー情報が取得できます。
「tasks関数」は、ユーザーモデルで追加した関数です。(ログインしているユーザーの)タスク情報が取得できます。
「get関数」で、実際にデータベースにアクセスし、「ログインしているユーザーのタスク一覧を取得」することになります。

変更箇所3について解説します。
「user関数」は、タスクモデルで追加した関数です。(ログインしている)ユーザー情報が取得できます。
「tasks関数」は、ユーザーモデルで追加した関数です。(ログインしているユーザーの)タスク情報が取得できます。
「create関数」で、実際にデータベースにアクセスし、「ログインしているユーザーのタスクを登録」することになります。引数として、クライアントからリクエストされたタスク名を渡しています。
※元々、引数で指定していたuser_idは、内部的に、ログインしているユーザーのユーザーIDが適用されます。

「$request->user()->tasks()->get()」の箇所はどういう意味か?

「->」は、クラス(の実体)の変数や関数にアクセスする、という意味でした。

「$request->user()」を実行すると、user関数の戻り値は「userクラスの実体」が返ります。だから、userクラスに設けたtasks関数にアクセスできるのです。

①関数の戻り値として、クラスの実体を返すことができる。
②①より、「$request->user()->tasks()」の部分は、「userクラスの実体->tasks()」と読める。さらに、tasks関数がクラスの実体を返せば、「->get()」のようにアクセスできる。
これらの点をおさえておいて下さい。

動作確認

まずはログインします。

ブラウザ

ログインしたユーザーのタスク一覧を表示するようにしたため、これまで登録していたタスクは表示されなくなります。

タスク名を入力し、タスク追加を行います。

ブラウザ
ブラウザ

ログインしたユーザーのタスクが登録できました。
削除が正常にできることも確認して下さい。

おわりに

お疲れ様でした。以上で、はじめてのWebプログラミングのカリキュラムはすべて終了です。
本カリキュラムでは、基本的な内容しか解説していません。しかし、基本をきちんと理解できていないと、応用を効かせることは絶対にできません。是非、ソースコードの1行1行、1文字1文字について何をしているか理解できるまで、何度も復習をして下さい。
一人前のエンジニアに成長するには、少なくとも1年以上の継続した鍛錬が必要です。(繰り返しになりますが)ソースコードの1行1行、1文字1文字について何をしているかを理解し、自分なりに解説できるようにして下さい。 急がず着実に前進することが、成長への近道です。
基本的な内容がわかれば、あとは書籍を読んだり、インターネットで検索するなどで加速度的に成長することができます。

皆様が一人前のエンジニアに成長し、活躍できることを心より祈念しています。

トップページ <<前のカリキュラムへ戻る

タイトルとURLをコピーしました