自分だけのクイズ作成 - Quipha公開中

【Laravel 9】Bootstrap5を導入

Laravel
スポンサーリンク

はじめに

今回は、Laravel9にBootstrap5を導入する手順をまとめました。
以下のページも参考にしてください。

JavaScriptとCSSスカフォールド 9.x Laravel

Laravel Sailでの開発環境の構築方法は以下をご覧ください。

Windows
Mac
使用するバージョン
  • Windows 11 or macOS Monterey (M1)
  • Laravel Framework 9

WindowsでもMacでも同様に作成できます。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

VS Codeの用意

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

設定方法は以下を参考にしてください。

プロジェクトの作成

Sail を使いプロジェクトを作成します。

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

「laravel-app-bootstrap」の部分はプロジェクト名ですので、任意で指定してください。

VS Code でプロジェクトを開きましょう。
これ以降は、VS Code のターミナルでコマンドを実行します。
Sail を起動します。

$ sail up -d
スポンサーリンク

Bootstrapの導入

まずはComposerを使い、laravel/uiパッケージを導入します。

$ sail composer require laravel/ui

次に、Bootstrapを導入します。

$ sail php artisan ui bootstrap

package.jsonにBootstrapが追加されます。
現時点で、Bootstrap 5.1.3でした

package.json
{
    "private": true,
...
    "devDependencies": {
...
        "bootstrap": "^5.1.3",
...
    }
}

NPMコマンドで、パッケージをインストールします。

$ sail npm install

CSSやJSファイルをビルドします。

$ sail npm run dev

以下のメッセージが表示された場合は、もう一度「npm run dev」を実行します。

Additional dependencies must be installed. This will only take a moment.
 
Running: npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps

Finished. Please run Mix again.

publicフォルダに、app.cssとapp.jsファイルが出力されます。

JavaScriptの実装は不要です。
bootstrap.jsを確認すると、Bootstrapが読み込まれているのが分かります。

resources\js\bootstrap.js
try {
    require('bootstrap');
} catch (e) {}

画面の実装

viewを返すだけのルーティングを定義します。

routes\web.php
Route::get('/bootstrap', function () {
    return view('bootstrap');
});

テンプレートファイルを作成します。
最低限、Bootstrapが確認できる程度の実装を行いました。

resources\views\bootstrap.blade.php
<!doctype html>
<html>

<head>
    <meta charset='utf-8' />

    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    <style>
        body {
            padding-top: 70px;
        }

    </style>
</head>

<body>
    <header>
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Bootstrapテスト</a>
            </div>
        </nav>
    </header>

    <div class="container">
        本文
    </div>

    <script src="{{ mix('js/app.js') }}"></script>
</body>

</html>

ビルドし出力した、app.cssとapp.jsを読み込んでいるのがポイントです。

以下のURLにアクセスします。

http://localhost/bootstrap

Bootstrapが適用されているのが確認できました。

LaravelアプリにBootstrapを適用

以下の記事で翻訳アプリを作成し、今回の手順でBootstrapを適用しました。
興味があれば参考にしてください。

その他

初学者へ

Laravelを初めて触る方へ向け、手順やアドバイスをまとめました。

外部サーバーへ公開

作成したアプリは公開して使ってもらいましょう!
Laravelアプリケーションを外部公開する方法をまとめました。

脆弱性対策

脆弱性を抱えたアプリケーションの場合、攻撃を受ける可能性があり大変危険です。
作成したアプリケーションは、脆弱性対策も意識しましょう。

GitHubと連携

GitHubと連携する方法を解説しました。
プロジェクトの管理はGitHubを活用しましょう。

さいごに

今回は、Laravel9にBootstrap5を導入する手順をまとめました。
ぜひ試してみてくださいね。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

\オススメ/

コメント

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