bootstrap

Laravelを使用したbootstrapの使い方!レイアウトの作成方法

✓本記事のテーマ
  • laravel / uiとは
  • 導入準備、前提条件
  • laravel/ui導入
  • bootstrap導入
  • bootstrap使い方
  • まとめ

今回は上記のテーマで解説していきます。

細かいところについて詳しく解説していきますので、是非参考にして頂ければと思います。

[laravel bootstrap 使い方]はじめに

今回は、Laravel 6.xについて解説していきます。

バージョン5.8まではフロントエンドフレームワークとしてbootstrapが使えていました。
それがなぜかバージョン6移行デフォルトで使えなくなってしまったんですね。

まさに改悪ですね…。

そのため、6.xでBootstrapを利用するには、フロントエンドのScafolding機能を提供するlaravel/uiのコマンドを使用してJavascriptのビルドとCSSのプリプロセッサ設定を生成する必要があります。

何言ってるかわからないと思いの読者さんもとりあえず、言葉の意味は理解しなくてよいので、この後に説明する手順を一緒に行ってくださればbootstrapが使えるようになりますので一緒に頑張っていきましょう!

[laravel bootstrap 使い方]laravel / uiとは

まずはlaravel/uiはなにか、というところから解説していきます。

ざっくり説明すると、、JavascriptのビルドとCSSのプリプロセッサ設定のScaffoldingの生成コマンドを提供するパッケージです。
コマンドオプション–authでフォーム認証用のビューテンプレートも生成することができるようになっています。
(6.xでは、artisan make:authコマンドがなくなっているので、認証機能をlaravel/uiのコマンドオプション–authで生成します)

[laravel bootstrap 使い方]導入準備、前提条件

JavascriptとCSSのビルドはLaravel Mix つまり Webpackを利用しますので、node.jsのインストールが必用です。
node.isをインストールする解説記事はbootstrap themeの使い方からどうぞ。

凄く細かい話をすると「Composer」や「PHP」「MariaDB」も入っていたほうが良いです。
場合によっては必須ではないですが、開発環境によっては必要なのでインストールを推奨しています。

以上のものがパソコンにインストールされている前提でお話しさせていただきます

[laravel bootstrap 使い方]laravel/ui導入

新規プロジェクトを作ります。名前はなんでもOKです。

今回は「test」としました。最後についてるやつが名前です。

次にlaravel/uiを読み込みます。

先ほど説明しました通りComposerで追加するので、インストールしといてください。

上記のようになったら次に進みます。

[laravel bootstrap 使い方]bootstrap導入

まずuiコマンドを立ち上げ、bootstrapを選択して実行します。

その後、インストールしたら完了です。(ビルドはしてくださいね)

[laravel bootstrap 使い方]bootstrap使い方

それでは、テストがてらbootstrapを利用してwelcomeページを見てみましょう。

resources/viewを開きます。
welcome.blade.phpに編集をかけていきます。(先ほどPHPをインストール推奨したのはこのためです)

こちらのコードを追加していきます。

次に、ボタンを追加していきます。こちらはおなじみのボタンタグです。

こちらで完成です。

一度、ここでソースコード全体を確認していきましょう。

この後、ブラウザでも正しく表示されているかを確認できれば終わりです。

お疲れ様でした。

[laravel bootstrap 使い方]まとめ

いかがだったでしょうか?

laravel/ui導入にてbootstrapを使用する方法について解説してきました。

まとめますと

インストールするもの

  • node.js
  • Composer
  • PHP
  • MariaDB

手順

  1. 新規プロジェクトを立ち上げる
  2. laravel/uiを読み込む
  3. bootstrapを読み込む

になります。

それでは最後までありがとうございました。