Laravel6でフロントエンドのスカフォールドをつかってみる

エリカ

2019.12.04

こんにちは、ディレクターのエリカです。

Laravel6からはフロントエンドのスカフォールドが、Laravel UIパッケージとして分離しました。

今回は、Laravel5のときのような、 Vue/Bootstrapなどを利用したフロントエンドをセットアップする方法について調べてみました。

Laravel UI のインストール

composer require laravel/ui --dev を実行し、Laravel UIパッケージをインストールします。

すると artisan に以下が追加されました。

ui
  ui:auth              Scaffold basic login and registration views and routes

artisan ui --help してみます。

Description:
  Swap the front-end scaffolding for the application

Usage:
  ui [options] [--] <type>

Arguments:
  type                   The preset type (bootstrap, vue, react)

Options:
      --auth             Install authentication UI scaffolding
      --option[=OPTION]  Pass an option to the preset command (multiple values allowed)
  -h, --help             Display this help message
  -q, --quiet            Do not output any message
  -V, --version          Display this application version
      --ansi             Force ANSI output
      --no-ansi          Disable ANSI output
  -n, --no-interaction   Do not ask any interactive question
      --env[=ENV]        The environment the command should run under
  -v|vv|vvv, --verbose   Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug

プリセットとして、 bootstrap , vue , react が用意されているようです。

それでは、順番に見ていきます。

Bootstrapのセットアップ

artisan ui bootstrap を実行します。

$ artisan ui bootstrap
Bootstrap scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

変更があったファイルを確認します。

diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -11,9 +11,12 @@
     },
     "devDependencies": {
         "axios": "^0.19",
+        "bootstrap": "^4.0.0",
         "cross-env": "^5.1",
+        "jquery": "^3.2",
         "laravel-mix": "^4.0.7",
         "lodash": "^4.17.13",
+        "popper.js": "^1.12",
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.15.2",
         "sass-loader": "^7.1.0"
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -1,5 +1,18 @@
 window._ = require('lodash');
 
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
+
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1 +1,8 @@
-//
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+// Variables
+@import 'variables';
+
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';

以上が差分になりました。

必要なパッケージのインストールと、cssおよびjsの読み込みが追加されています。

Vueのセットアップ

artisan ui vue を実行します。

$ artisan ui vue
Vue scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

変更があったファイルを確認します。

diff --git a/package.json b/package.json
--- a/package.json
+++ b/package.json
@@ -11,11 +11,16 @@
     },
     "devDependencies": {
         "axios": "^0.19",
+        "bootstrap": "^4.0.0",
         "cross-env": "^5.1",
+        "jquery": "^3.2",
         "laravel-mix": "^4.0.7",
         "lodash": "^4.17.13",
+        "popper.js": "^1.12",
         "resolve-url-loader": "^2.3.1",
-        "sass": "^1.15.2",
-        "sass-loader": "^7.1.0"
+        "sass": "^1.20.1",
+        "sass-loader": "7.*",
+        "vue": "^2.5.17",
+        "vue-template-compiler": "^2.6.10"
     }
 }
diff --git a/resources/js/app.js b/resources/js/app.js
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1 +1,32 @@
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes Vue and other libraries. It is a great starting point when
+ * building robust, powerful web applications using Vue and Laravel.
+ */
+
 require('./bootstrap');
+
+window.Vue = require('vue');
+
+/**
+ * The following block of code may be used to automatically register your
+ * Vue components. It will recursively scan this directory for the Vue
+ * components and automatically register them with their "basename".
+ *
+ * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
+ */
+
+// const files = require.context('./', true, /\.vue$/i)
+// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
+
+Vue.component('example-component', require('./components/ExampleComponent.vue').default);
+
+/**
+ * Next, we will create a fresh Vue application instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+const app = new Vue({
+    el: '#app',
+});
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -1,5 +1,18 @@
 window._ = require('lodash');
 
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
+
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1 +1,8 @@
-//
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+// Variables
+@import 'variables';
+
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';
diff --git a/webpack.mix.js b/webpack.mix.js
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -12,4 +12,4 @@ const mix = require('laravel-mix');
  */
 
 mix.js('resources/js/app.js', 'public/js')
-    .sass('resources/sass/app.scss', 'public/css');
+   .sass('resources/sass/app.scss', 'public/css');

こちらは、 bootstrap に加えて Vue の設定が追加されています。

Laravel5系は、これが初期状態だったかと思われます。

Reactのセットアップ

artisan ui react を実行します。

$ artisan ui react
React scaffolding installed successfully.
Please run "npm install && npm run dev" to compile your fresh scaffolding.

変更があったファイルを確認します。

diff --git a/package.json b/package.json
index 9fcb8ee..77f3e2c 100644
--- a/package.json
+++ b/package.json
@@ -10,10 +10,16 @@
         "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
     },
     "devDependencies": {
+        "@babel/preset-react": "^7.0.0",
         "axios": "^0.19",
+        "bootstrap": "^4.0.0",
         "cross-env": "^5.1",
+        "jquery": "^3.2",
         "laravel-mix": "^4.0.7",
         "lodash": "^4.17.13",
+        "popper.js": "^1.12",
+        "react": "^16.2.0",
+        "react-dom": "^16.2.0",
         "resolve-url-loader": "^2.3.1",
         "sass": "^1.15.2",
         "sass-loader": "^7.1.0"
diff --git a/resources/js/app.js b/resources/js/app.js
index 40c55f6..a5f91ab 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -1 +1,15 @@
+/**
+ * First we will load all of this project's JavaScript dependencies which
+ * includes React and other helpers. It's a great starting point while
+ * building robust, powerful web applications using React + Laravel.
+ */
+
 require('./bootstrap');
+
+/**
+ * Next, we will create a fresh React component instance and attach it to
+ * the page. Then, you may begin adding components to this application
+ * or customize the JavaScript scaffolding to fit your unique needs.
+ */
+
+require('./components/Example');
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
index d11586d..8eaba1b 100644
--- a/resources/js/bootstrap.js
+++ b/resources/js/bootstrap.js
@@ -1,5 +1,18 @@
 window._ = require('lodash');
 
+/**
+ * We'll load jQuery and the Bootstrap jQuery plugin which provides support
+ * for JavaScript based Bootstrap features such as modals and tabs. This
+ * code may be modified to fit the specific needs of your application.
+ */
+
+try {
+    window.Popper = require('popper.js').default;
+    window.$ = window.jQuery = require('jquery');
+
+    require('bootstrap');
+} catch (e) {}
+
 /**
  * We'll load the axios HTTP library which allows us to easily issue requests
  * to our Laravel back-end. This library automatically handles sending the
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 8337712..3193ffa 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -1 +1,8 @@
-//
+// Fonts
+@import url('https://fonts.googleapis.com/css?family=Nunito');
+
+// Variables
+@import 'variables';
+
+// Bootstrap
+@import '~bootstrap/scss/bootstrap';
diff --git a/webpack.mix.js b/webpack.mix.js
index 8a923cb..cc075aa 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -11,5 +11,5 @@ const mix = require('laravel-mix');
  |
  */
 
-mix.js('resources/js/app.js', 'public/js')
-    .sass('resources/sass/app.scss', 'public/css');
+mix.react('resources/js/app.js', 'public/js')
+   .sass('resources/sass/app.scss', 'public/css');

こちらも、 bootstrap に加えて React 用の設定が追加されていますね。

カスタムプリセットの追加

そして、この Laravel UI を利用すれば、カスタムのスカフォールドを作成することもできます。

サービスプロバイダに以下のように定義します。

use Laravel\Ui\UiCommand;

UiCommand::macro('カスタムUI名', function (UiCommand $command) {
    // 独自フロントエンドのスカフォールド…
});

そうすれば、 artisan ui カスタムUI名 で独自のフロントエンドのスカフォールドを準備することもできるようになります。

まとめ

ひとまず、Laravel5系のスカフォールドを利用した場合も簡単ですし、そして、なにより自分たちの環境におけるフロントエンドまわりでよく使うスカフォールドを、カスタムプリセットとして用意できれば、開発準備もより簡単になりそうですね。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

エリカ Webディレクター

このメンバーの記事をもっと読むこのメンバーの記事をもっと読む

ディレクターのエリカです。趣味は美術鑑賞で、絵画や展示などたくさんの作品を眺めるのが好きです。得意料理は「鍋」です。よろしくお願いします。

このメンバーの記事をもっと読むこのメンバーの記事をもっと読む

バックエンドへの道 | 58 articles

Laravelで、Eloquentインスタンスをリフレッシュしたいとき

エリカ

WordPressの自動保存を停止する方法

エリカ

Laravel6でフロントエンドのスカフォールドをつかってみる

Laravel UI のインストール

Bootstrapのセットアップ

Vueのセットアップ

Reactのセットアップ

カスタムプリセットの追加

まとめ

Contact

Mid Career

New Graduates

Contact Us

Laravel6でフロントエンドのスカフォールドをつかってみる

Laravel UI のインストール

Bootstrapのセットアップ

Vueのセットアップ

Reactのセットアップ

カスタムプリセットの追加

まとめ

Recommend

徹底討論のワークショップからGA4勉強会までトータル支援。「セルソース」HRサイト制作秘話

Figma Slidesがすごい！特徴や使用感を紹介します

開発効率2.5倍に！初心者にこそGitHub Copilotがおすすめな理由

尖ったクリエイター陣を支える“プロジェクトマネージャー”が語る、シフトブレインの魅力

Contact

Mid Career

New Graduates

Contact Us