Node.js on ララジャパン

app.jsとbootstrap.js

Mon, 14 Oct 2019 23:47:36 +0900

app.jsは、laravel-mixでコンパイルされて作成されてall.jsとなります。つまり、ソースファイルです。いったい何が含まれているか興味あります。今回は、このファイルの中身を見てましょう。もうすでにLaravelは、6.1のバージョンになっていますが、ここでは5.8をもとにします。

resources/js/app.js

/**
 * 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を見てみましょう。

resources/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を使用してみます。

Node.jsとnpm

Mon, 23 Sep 2019 09:34:17 +0900

Laravelは、いわゆるバックエンド、サーバーサイドのアプリケーションの開発のための使用が主なのですが、フロントエンドの開発にもlarave-mixを通してサポートしています。今回はそちら関連のコマンドやツールの備忘録です。こうたくさん実行するコマンドがあると、もう覚えられない年頃です。

Node.js

Node.jsの登場で、今までのHTMLに以下のようなcdnのリンクを入れてjavascriptで使用するやり方から、

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

以下のように、すべて自分のサイトで１つのcssやjsファイルに皆まとめてトランスパイルして最小化してしまうことが可能になりました。

<link rel="stylesheet" href="/assets/css/all.js">
<script src="/assets/js/all.js"></script>

しかし、そのために初めてjavascriptのコマンドラインでの開発環境が必要となりました。

Node.jsがあなたの環境にインストールされているかどうかは、

$ node -v
v12.4.0

インストールされているなら、nodeコマンドを実行してみてください。

$ node  
Welcome to Node.js v12.4.0.
Type ".help" for more information.
> x = 1
1
> y = 2
2
> x + y
3
>

とtinkerみたいに対話式で実行できます。これは役に立ちそうです。いちいちhtmlにスクリプトにconsole.log()を入れてブラウザでデバッグしていた時代から抜けられるかな。

npm

php言語において、composerというパッケージ管理のツールがあるように、Node.jsでは、npmというパッケージマネージャーがあります。npmがインストールされているかは、以下でチェックします。、

$ npm -v
6.10.2

composer create-projectでLaraveの新規のプロジェクトを作成したら、composer.jsonの情報をもとに、

$ composer install

が自動的に実行されて、vendorのディレクトリにすべての必要なphpのパッケージがダウンロードされて収納されます。

それと同様に、

$ npm install

を実行すると、今度は、package.jsonの情報ををもとにnode_modulesのディレクトリにすべての必要なNode.jsのパッケージがダウンロードされます。

どのパッケージがインストールされたかは、composerでは以下のコマンドでチェックできます。

$ composer show
beyondcode/laravel-dump-server        1.3.0    Symfony Var-Dump Server for Laravel
dnoegel/php-xdg-base-dir              0.1      implementation of xdg base directory specification for php
doctrine/inflector                    v1.3.0   Common String Manipulations with regard to casing and singular/plural rules.
doctrine/instantiator                 1.2.0    A small, lightweight utility to instantiate objects in PHP without invoking their constructors
doctrine/lexer                        1.1.0    PHP Doctrine Lexer parser library that can be used in Top-Down, Recursive Descent Parsers.
dragonmantank/cron-expression         v2.3.0   CRON for PHP: Calculate the next or previous run date and determine if a CRON expression is due
egulias/email-validator               2.1.11   A library for validating emails against several RFCs
erusev/parsedown                      1.7.3    Parser for Markdown.
fideloper/proxy                       4.2.1    Set trusted proxies for Laravel
filp/whoops                           2.5.0    php error handling for cool kids
fzaninotto/faker                      v1.8.0   Faker is a PHP library that generates fake data for you.
hamcrest/hamcrest-php                 v2.0.0   This is the PHP port of Hamcrest Matchers
jakub-onderka/php-console-color       v0.2    
jakub-onderka/php-console-highlighter v0.4     Highlight PHP code in terminal
laravel/framework                     v5.8.35  The Laravel Framework.
...

同様に、npmでは、

$ npm list
/vol1/usr/www/repos/repos/l58
├─┬ axios@0.19.0
│ ├─┬ follow-redirects@1.5.10
│ │ └─┬ debug@3.1.0
│ │   └── ms@2.0.0
│ └── is-buffer@2.0.3
├── bootstrap@4.3.1
├─┬ cross-env@5.2.1
│ └─┬ cross-spawn@6.0.5
│   ├── nice-try@1.0.5
│   ├── path-key@2.0.1
│   ├── semver@5.7.1
│   ├─┬ shebang-command@1.2.0
│   │ └── shebang-regex@1.0.0
│   └─┬ which@1.3.1
│     └── isexe@2.0.0
├── jquery@3.4.1
├─┬ laravel-mix@4.1.4
...

依存するパッケージが階層で表示されているのでたくさんの表示になってしまいます。–depth 0を付けたら第一階層のみ表示できます。

$ npm list --depth 0
/vol1/usr/www/repos/repos/l58
├── axios@0.19.0
├── bootstrap@4.3.1
├── cross-env@5.2.1
├── jquery@3.4.1
├── laravel-mix@4.1.4
├── lodash@4.17.15
├── popper.js@1.15.0
├── resolve-url-loader@2.3.2
├── sass@1.22.12
├── sass-loader@7.3.1
└── vue@2.6.10