app.jsは、laravel-mixでコンパイルされて作成されてall.jsとなります。つまり、ソースファイルです。いったい何が含まれているか興味あります。今回は、このファイルの中身を見てましょう。もうすでにLaravelは、6.1のバージョンになっていますが、ここでは5.8をもとにします。
/**
* 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',
});
上のコードを見て、まず、何これ？、と思うのは、７行目のrequire()の関数です。php言語では昔よく使っていた関数だけれど、これはjavascriptのファイルでphpのファイルではありません。私のように、HTMLのファイルの中でしかjavascriptを触ったことがない人には、まったく見たことがないjavascriptの関数です。
調べたところ、require()は他のjavascriptのファイルで定義されているモジュールを読み込むためのNode.jsの関数ということがわかりました。一般的にウェブで使用しているjavascriptにはモジュールの概念がないゆえに、Node.jsで発明されたらしい。その後に、ES6の登場でjavascriptにはモジュールの機能が正式に対応されるようになりますが、そこでは、require()でなく、importが使用されています。歴史的な経過により複雑になっているので、混乱しそうなところですね。
さらに、require('./bootstrap')と書かれているので、もしかして、CSSフレームワークのBootstrapのこと？とも思いますが、ここではそのBootstrapではなく、単に同じディレクトリにある、bootstrap.jsをモジュールとして読み込んで実行する、ということです。またまた、混乱しそうなところですが、忘れてならないのは、これらのjsファイルはNode.jsの世界のjsファイルで、ブラウザーのjsではないということです。以前に書いたように、最終的にはwebpackなどのツールを使用して、Node.jsのプログラムをブラウザー用に変換します。
次に、そのapp.jsが参照しているbootstrap.jsを見てみましょう。
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
* CSRF token as a header based on the value of the "XSRF" token cookie.
*/
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
/**
* Next we will register the CSRF Token as a common header with Axios so that
* all outgoing HTTP requests automatically have it attached. This is just
* a simple convenience so we don't have to attach every token manually.
*/
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
/**
* Echo exposes an expressive API for subscribing to channels and listening
* for events that are broadcast by Laravel. Echo and event broadcasting
* allows your team to easily build robust real-time web applications.
*/
// import Echo from 'laravel-echo'
// window.Pusher = require('pusher-js');
// window.Echo = new Echo({
// broadcaster: 'pusher',
// key: process.env.MIX_PUSHER_APP_KEY,
// cluster: process.env.MIX_PUSHER_APP_CLUSTER,
// encrypted: true
// });
lodash, popper.js, axiosといろいろなもの読み込んでいますが、注意してもらいのは、１１行目からの以下。
window.$ = window.jQuery = require('jquery');
require('bootstrap');
最初の行では、require()でjqueryのモジュールを読み込んでいます。そして、jqueryのDOMセレクターで使われる、$やjQueryをwindowの変数に割り当ててグローバルで使用できるようにしています。
そして、そう、次の行で今度は本当のCSSフレームワークのBootstrapのモジュールを読み込んでいます。Bootstrapはjqueryに依存しているゆえに、jqueryがその前にロードされています。
Bootstrapのためにロードされているjqueryですが、もちろん通常の目的でも使用できます。次回は、インラインのスクリプトでjqueryを使用してみます。