Laravel8でログイン機能を実装する。

2023年11月10日

【自分用メモ】Laravel 7.30.4 新規開発時の準備でいつもやってることメモ
でエラーが出るとのことだったので調べてみました。
RouteServiceProvider.phpファイルからデフォルトの名前空間を削除されたようです。
Laravel8 は “class@method" の文字列形式を受け入れなくなりました。

このあたりも考えつつさらに使いやすい環境を構築していきます。

laravel8の新規プロジェクトではlayout.blade.phpが無いってのがちょっと不便だなと思ったので追加しました。

ログイン機能を作る

早速ですがログイン機能を作っていきたいと思います。
後に必要になる場合もそうでない場合もこれはあると便利ですからね。

Jetstreamを使う

https://jetstream.laravel.com/2.x/introduction.html
Laravel8以降で使えるJetstreamですが、インストールするだけで以下機能を扱うことが可能。
おいおい贅沢かよ。これは大変素晴らしい。

  • ログイン・ログアウト基本機能
  • 新規アカウント登録
  • 本登録メールによる認証
  • 2段階認証(!)
  • セッション管理
  • チームにおける管理

これはインストールせざるを得ませんね。

composer require laravel/jetstream

待っていれば完了。

Livewireのインストール。

Jetstreamには2パターンの開発技術(LivewireとInertia.js)が用意されているらしいんですが
Inertia.jsはVue.jsベースのため私が苦手なので今回はLivewire(いつもどおりのLaravel Bladeを使用するもの)
をインストールします。

php artisan jetstream:install livewire

こちらもインストール完了。

データベースのマイグレーション

php artisan migrate

sessionが追加されていることがわかります。

表の画面確認

前回記事でデータベースは用意できているので
早速表画面を開いてみましょう。

なんてお手軽なんでしょう。

ログイン画面を開くと

なんかCSSが適応されていないみたいですね。

@vite　の部分にCSSとJavascriptが読み込まれるはずなんだろうけどこれも動いていない。

表示が崩れる

Laravel8におけるCSS、JSを読み込まないことによる表示崩れ。
ここみんな困っているみたいです。
ちょっと調べてみたらただごとではないくらい複雑な問題でした。
おそらく標準のCSSが用意されてるんだろうから適応したい。
無いんだったらとにかくCSSを弄って見た目を整えたい。

resources\views\auth\login.blade.phpを確認すると
1行目から

という謎のコードが書かれている。
あ、ここでheadから始まらないのね。

というタグはjetstreamが作成したBlade Componentsです。
ヒントが全く無いですが、実はapp/view/component/GuestLayout.phpを呼び出しています。
viewファイルはresources/views/layouts/guest.blade.php。

Blade Componentsって何よ

いやヒントが全く無いのは今後困る。
のでさらに調べていきます。

なぜこれで
app/view/component/GuestLayout.phpを呼び出しているのか。

の部分に全くヒントが無いように見えますが、
これはBlade Componentsのルールによるものです。
このフォルダに入っているものは全てBlade Components。
x-なんとかで始まるファイルたちがずらっと並んでいる。

ここにあるBlade Componentsのタグはクラスファイル名(ここで言うGuestLayout.php)の
ケバブケース(単語間をハイフンでつなげる)で先頭にx-が付くことが特徴。
x-guest-layoutと表記されているのでGuestLayout.phpがどこかにあるということになります。
今回はapp\View\Componentsにあります。
GuestLayout.phpを発見できたはずです。

まずapp\View\Components\GuestLayout.phpを見てみると



となっています。


Blade ComponentsファイルはApp¥View¥Componentsに保存すると自動で認識されます。

対応するviewファイルはresources/views/layouts/guest.blade.phpということがここでわかります。


つまりx-guest-layoutで始まるBlade Componentsがapp¥View¥Components￥GuestLayout.phpに対応するってことらしいです。

ファイル名で分からないの辛い。


Bladeコンポーネントのタグ名はx-{コンポーネント名}となり、

resources/views/フォルダ内に配置。

新規で作る場合わかりやすいように

resources/views/componentsに配置すると良いかもしれません。


タグで囲われているlogin.blade.phpですが、囲われている部分が

guest.blade.php内の{{$slot}}の場所に挿入される仕組みになっています。こんなんわかるか。



        

            {{ $slot }}
        

    



この部分ですね。


今までは@extend, @yield, @sectionといったディレクティブを使ってきましたが


{{ $slot }}



のような形に変わるんですね。と覚えておいても問題ないと思う。


CSS読み込んでない


ここまで来てやっとわかったのが、やっぱCSSを読み込んでないね。


@vite　の部分にCSSとJavascriptが読み込まれるはず


これですね。

Laravel8はLaravel mixではなくviteを標準使用になったらしいです。

大幅に変わりすぎだろ。


@viteではコンパイル後のファイルを参照するのではなく、

コンパイル元のファイルパスを指定するみたいです。


というかコンパイルされてないよねこれ？


これまでのLaravel mixのコンパイル設定はwebpack.mix.jsに書いていましたが、

vite仕様に変わってしまったのでvite.config.jsの方に記載する必要があります。

よく見るとルートディレクトリにありましたのでこれを編集していきます。

当環境ではこうなっていました。


import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
export default defineConfig({
    plugins: [
        laravel([
            'resources/css/app.css',
            'resources/js/app.js',
        ]),
    ],
});



Viewファイルのコードの方は


@vite(['resources/css/app.css', 'resources/js/app.js'])



となっていたのでこのままでいいんですかね？


ルートディレクトリのpackage.jsonを開いてみると


{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/typography": "^0.5.0",
        "alpinejs": "^3.0.6",
        "autoprefixer": "^10.4.7",
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.4.14",
        "tailwindcss": "^3.1.0"
    }
}



のようになっていた。


それではコンパイルするとしよう。


npm run development



すると、public/にCSSとJavascriptが生成されました。


・・・で？


\resources\views\layouts\guest.blade.php

に






とコードを追加した所、




CSSが適用されました！


って違うよねこれ？


@vite(['resources/css/app.css', 'resources/js/app.js'])



だけで動くはずなんだろうな・・・


もうちょっと調べますか・・・。


解決方法


https://nodejs.org/en/download

node最新版を入れます。


その後、


npm install
npm run dev



いやちょっとまてよこれLaravel-mixとVite混在してるな。


今回


npm run development



で書き出したものってLaravel-mix側のものを書き出してるわ。


基本的にpackage.jsonに書かれている方に合わせる方が無難ということでしたので

resources/views/layouts/app.blade.php の読み込み部分をLaravel-mix形式に書き換えるほうがいいそうです・・・


マジかー！

でもこの方法が一番正しいらしいです。

早速読み込み部分を書き換えていきましょう。


Laravel-mix形式に書き換え


resources/views/layouts/app.blade.phpを開きます。



        @vite(['resources/css/app.css', 'resources/js/app.js'])



↓


//コメントアウト
{{--        @vite(['resources/css/app.css', 'resources/js/app.js'])--}}
//追加
        
        



でいきましょう！


※この記事は追記の可能性があります。




Related Posts

Laravel, PHP

Posted by bistro