15日目の記事になります。(ちょうど空いていたのでぎりぎりですが参加させていただきました。6.xではデフォルトでは含まれなくなりました。6.xでBootstrapを利用するには、フロントエンドのScafolding機能を提供するlaravel/uiのコマンドを使用してJavascriptのビルドとCSSのプリプロセッサ設定を生成する必要があります。6.xのプロジェクトにlaravel/uiを利用してBootstrapをプロジェクトに導入する手順についてシンプルなアプリケーションを例に解説しています。4の基本的な機能を使ってマークアップと多少画面の動きをつけたい(DatePickerを利用したいなど)といった構成のアプリケーションです。Mixについても学ぶ必要がありますが、デフォルトのwebpack.mix.jsの設定でできる範囲にとどめて深堀りしません。記事の中で解説していないソースコードについてはこちらを参照ください。uiとはlaravel/uiは、JavascriptのビルドとCSSのプリプロセッサ設定のScaffoldingの生成コマンドを提供するパッケージですが、コマンドオプション--authでフォーム認証用のビューテンプレートも生成することができるようになっています。make:authコマンドがなくなっているので、認証機能をlaravel/uiのコマンドオプション--authで生成します)またlaravel/uiのリポジトリの認証のScaffoldingを参考に基本的なCRUDのScaffoldingオプションの追加などの開発もできそうな気もします。4で開発を進めるにあたって必ず要るであろう以下の3点を設定し、それぞれを利用するシンプルなToDoアプリを作成してみます。作成するのは、RailsなどのScaffoldが生成するようなCRUDアプリです。Webpackを利用しますので、node.jsのインストールが必用です。適当に「laravel-ui-bootstrap-tasks」という名前のプロジェクトを作ってみます。--devuiコマンドでbootstrap用のJavascriptビルドおよびCSSプリプロセッサsassの設定を含むScaffoldingを追加します。scaffolding.コマンドの実行で追加された設定を確認してみます。package.jsonには、以下のパッケージが追加されています。}jsは、bootstrap.jsにpopper.jsの初期化処理とbootstrapのインポートが追加されました。Nunito、追加されたvariablesとbootstrapの読み込みが追加されています。パッケージをインストールしてビルドします。4を利用できる環境が整いました。FontAwesomeとDatePickerは後ほど追加していきます。以下のテーブルを用意していきます。オプションを付けて生成します。2019_12_11_151510_create_tasks_tableテーブル定義に従ってマイグレーションを作成します。}...マイグレーションを適用します。seconds)ロジックを実装リソースコントローラを生成して、対応するViewを追加します。ルーティングを追加します。アクションに実装を追加します。resources/views/layout.blade.phpresources/viewsにtasksディレクトリを追加して、ビュー’index’、’created’、’show’、’edit’を追加します。edit.blade.phpのテンプレートについてはGithubリポジトリのソースを確認して追加してください。ここまでで/tasks/indexを表示してみると以下の用になります。テンプレートにはアイコンのタグが含まれていますが、まだ表示されていません。Awesomeを導入してアイコンも表示されるようにしていきます。推奨しているライブラリの一番上に載っていたからというだけです。npmで、@fortawesome/fontawesome-freeとfont-awesome-scssを追加します。--save-devresources/sass/app.scssにFontAwesomeのインポートを追加します。'~@fortawesome/fontawesome-free/scss/regular';この記事で作るアプリでは、「free」の「solid」と「regular」に含まれるアイコンのみを使用しています。その他のアイコン(「blands」など)を使う場合は、必要に応じてインポートは追加してください。dev再度、/tasks/indexを表示してみると以下のようにアイコンも表示されるようになります。Dominusを動かすにはMoment.jsが必要なのでMoment.jsもインストールします。Dominusのscssのインポートを追加します。'~tempusdominus-bootstrap-4/src/sass/tempusdominus-bootstrap-4-build';resources/js/bootstrap.jsにmoment.jsとtempusdominus-bootstrap-4の読み込みを追加します。moment.jsはグローバル変数にセットする必要があります。Dateのマークアップは以下のように記述しています。</div>ポイントは、datepickerクラスを指定しているdiv要素のidの値「due_date」を、input-group-appendクラスのdiv要素のdata-target属性の値にセットするあたりです。