Npm on ララジャパン

Turbolinks、再び

Tue, 03 Dec 2019 00:44:58 +0900

ほぼ２年前にTurbolinksを紹介しました。全ページロードのウェブサイトを高速のSPA(シングルページアプリ)に変えてくれます。しかも、Laravelのフロントエンドのブレードやバックエンドのコントローラーをまったく変えることなしです。今回は、再びこのTurbolinksに戻って、まずcdnを使わずにnpmを使用してトランスパイルします。そして前回不可能と思っていたajaxによるフォームのPOST投稿もSPA化します。

SPA移行へのコストが非常に低いTurbolinks

ある程度大きな規模のプロジェクトを抱えていると、開発テクノロジー進歩によりプログラムを書き直す必要性が出てきます。それはまったく新しいデバイスへの対応（例：bootstrap）であったり、プログラムの管理性を高めるためのフレームワークの採用（例：Laravel）であったりします。プロジェクトが大きいほど、書き直しには時間とコストがかかります。スマホの対応ならお客さんにとっては理解されやすいですが、フレームワークの採用では外観は何も変わらないときもあるので、何か月（あるいは何年）もかけて書き直す必要性を説くのは大変です。

今回のSPAの採用も同じ状況です。SPAの採用の目的はユーザー体験の改善です。画面のリフレッシュが行われないのでページの遷移がスムーズで高速です。それだけで採用の説得は十分ですが、問題はSPAへ移行のためのコストが非常に高いことです。まず、すでにたくさんある、しかも新しいのが次々と登場する、SPAのJavascriptのフレームワークの中で、どれが有望性があるか長期的に管理されるかを見極めるために時間が必要なこと、さらにどれかに決めたらそれを学習して巧みになること、その上で既存のプロジェクトをSPAへ移行する開発です。これらを考慮すると、ReactJS, AngularJS, VueJSなどを採用してSPAに書き直すには莫大な時間、つまりコストがかかります。それらのフレームワークの経験に乏しい私が持つ小さい開発チームだと、特に。

そこで輝くのがTurbolinks!

Turbolinksを採用すると、ウェブページ内に同じサイト内のリンク、つまりがあると、そのリンクがクリックされたら、Turbolinksはajaxでそのページを取ってきてその中ののコンテンツを現在のページのものと取り換えます。は同じなので、全ページ更新とはならず、SPA特有のスムーズなページ遷移となります。しかも、ブラウザのURLはあたかも全ページ更新と同様に変更されるし、遷移したページ内のJavascriptも実行されます。さらに、ブラウザのWeb History APIを利用してキャッシュからの「戻る」ボタンで前のページの出力にも対応しています。これらは、既存のサーバーサイドのプログラムを変更することなく、次に説明する、npmでパッケージを追加するだけでできちゃいます。夢のような話と思いませんか？

npmでパッケージを追加

このTurbolinksを前回紹介したときは、

<html lang="ja">                                                                                                                                                                                                   
  <head>                                                                                                                                                                                                           
    <meta charset="utf-8">                                                                                                                                                                                         
    <title>Turbolinks</title>                                                                                                                                                                                      
    <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.0.3/turbolinks.js"></script>    
..

のようにCDNを使う設定でした。

今回は、npmでパッケージを追加して（関連記事）して、npmでトランスパイルします。

まず、コマンドラインでパッケージの追加。

$ npm install turbolinks --save-dev

次に、bootstrap.jsに以下の行を追加して、このパッケージをロードします。

resources/js/bootstrap.js

...
var Turbolinks = require("turbolinks");
Turbolinks.start();

最後にトランスパイルの実行です（ライブバージョンは、npm run prod）。

$ npm run dev

これでホーム画面のリンクから以下の会員登録画面にアクセスすると、以下のようにすでにSPA化されています。画面の下は、FirefoxのInspectorのパネルですが、そこのxhrはXMLHttpRequest (XHR) のことでいわゆるajaxの実行のことです。

フォームの投稿のSPA化

さて、turbolinksは、リンクのようなGETに対しては自動にSPA化してくれますが、POSTは自動で対応していません。同じ登録画面で、入力して意図的にエラーを出すようにして、「Register」ボタンを押すと、以下のように通常の入力データの投稿のPOSTとエラーの出力のGETのアクションが起こります。

見ての通り、それらのアクションはajaxではありません。通常の全ページロードです。

turbolinksのレポのgithubサイトには、フォームの投稿後のリダイレクト、つまり入力が成功して違う画面に（例：ホーム画面）に飛ぶことに関して、ajaxを使用しての対応に関して書かれている部分があります。しかし、上のようにバリデーションエラーが発生して入力画面に戻りエラーを出力する場合は書かれていません。

つい最近まで、私も「そういうものなのか」「まあGETだけSPAになるだけでも結構」と思っていました。しかし、より調査したところ、Rubyではエラーの際に画面をレンダーするパッケージがある、ということを知りました。ちなみに、TurbolinksはRuby in Railsを開発したBaseCampが発明したものなので、とてもRubyとの仲が良い。

Rubyで可能なら、どこかにそれに対応するJavascriptの例があるのでは、と思い、以下にそれらしきディスカッションを見つけました。

https://github.com/turbolinks/turbolinks/issues/85#issuecomment-338784510

これをもとに、会員登録をSPA化してみます。

編集するのは以下のブレードです。

resources/views/auth/register.blade.php

...
@section('script')

    $(document).on('turbolinks:load', function() { // Turbolinksがロード完了のイベントにおいて、
      $("form").on("submit", function(event) {
        event.preventDefault();

        $.ajax({　// jqueryのajax関数
          url: '/register', // データ送信宛てのURL
          type: 'POST',
          dataType: 'html',
          processData: false,
          contentType: false,
          cache: false,
          data: new FormData($("form")[0])　// フォームのデータを送信
        }).done(function(response, status, $xhr) {
          if (response && ($xhr.getResponseHeader('Content-Type') || '').substring(0, 9) === 'text/html') {
            var referrer = window.location.href; //　現在のURLを取得
            Turbolinks.controller.cache.put(referrer, Turbolinks.Snapshot.wrap(response));　// キャッシュにレスのデータを入れる
            Turbolinks.visit(referrer, { action: 'restore' });　// キャッシュを呼び出す
          }
        });
      });
    });

@endsection

そして、このscriptのセクションは、レイアウトのブレードに入れ込みます。

resources/views/layouts/app.blade.ophp

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <script type="module">
        @yield('script')
    </script>
...

これで再度、登録画面での入力エラーの実行をすると、

今度は、documentではなくxhrでの取得になっています。

さらに、登録成功のときは、以下のようにホーム画面への遷移もSPA化されています。

前回のVue.js：バックエンドのバリデーションを使うと、まったく同じ動作です。比べてみてください。

npmからパッケージを追加

Sun, 10 Nov 2019 04:38:19 +0900

laravel-mixでフロントエンドを開発で、Laravelのプロジェクトにおいてのフロントエンドの開発の流れを説明しました。今回は、その続きとしてnpmから新規のパッケージをプロジェクトに追加する過程を説明します。

訂正（7/17/2022）

最近、読者からの以下のコードの間違いの指摘をいただきましたので修正しました。読んでいただいて、しかも間違いを指摘をしてくれる。大変光栄です。kazooさんありがとう。

resources/js/bootstrap.js

...
require('jquery-ui/ui/widgets/dialog.js'); // dialog.jsでなくdatepicker.jsが正しい！

上のコードにおいての、dialog.jsはdatepicker.jsであるべきです。

以降の文中のコードで修正されています。投稿時のL5.8でなく現在の私のL8.xの環境で確認しました。

jquery-uiのパッケージを検索

例として、jquery-uiのdate pickerを使います。会員登録フォームにおいて以下のように誕生日の日付の入力をカレンダーの選択としたいからです。

まず、パッケージとして登録されているかどうか、https://www.npmjs.comのサイトへ行き検索します。画面の検索窓に、jquery-uiと入れます。

検索結果として、774ありますが完全マッチ（exact match）は１つです。オリジナルのパッケージであることを確認してそれを使用します。

次にコマンドラインで、このパッケージをLaravelのプロジェクトにインストールします。

$ npm install jquery-ui --save-dev

これを実行すると、package.jsonが更新されて、以下のようにjquery-uiの行が追加されます。

{
...
    "devDependencies": {
        "axios": "^0.18",
        "bootstrap": "^4.1.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "jquery-ui": "^1.12.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.15.2",
        "sass-loader": "^7.1.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    }
}

–save-devの引数を指定したので、上のようにdevのセクションに追加されます。フロントエンドの開発なので開発時にしかパッケージは使用しないためです。

また、node_modulesのディレクトリにjquery-uiのソースがダウンロードされていることは、以下のコマンドの実行で確認できます。

$ npm list --depth=0
├── axios@0.18.1
├── bootstrap@4.3.1
├── cross-env@5.2.1
├── jquery@3.4.1
├── jquery-ui@1.12.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
└── vue-template-compiler@2.6.10

bootstrap.jsの編集

次に、bootstrap.jsに以下の行を追加して、このパッケージをロードします。

resources/js/bootstrap.js

...
require('jquery-ui/ui/widgets/datepicker.js');

jquery-uiにはいろいろなウィジットがあるので、他も指定したい場合は以下のように指定します。

...
require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/widgets/dialog.js');
require('jquery-ui/ui/widgets/sortable.js');
require('jquery-ui/ui/widgets/tooltip.js');

app.scssの編集

jquery-uiにはcssの設定も必要です。app.scssを編集します。

resources/sass/app.scss

// Fonts                                                                                                                                                                                                           
@import url('https://fonts.googleapis.com/css?family=Nunito');                                                                                                                                                     
                                                                                                                                                                                                                   
// Variables                                                                                                                                                                                                       
@import 'variables';                                                                                                                                                                                               
                                                                                                                                                                                                                   
// Bootstrap                                                                                                                                                                                                       
@import '~bootstrap/scss/bootstrap';                                                                                                                                                                               
                                                                                                                                                                                                                   
// jquery -ui                                                                                                                                                                                                      
@import '~jquery-ui/themes/base/all.css';

bladeの編集

今度はテンプレートの変更です。ここでは、Laravelのプロジェクトについてくる会員登録ページにお誕生日の項目を追加します。

resources/views/auth/register.blade.php

...
                        <div class="form-group row">                                                                                                                                                               
                            <label for="birthdate" class="col-md-4 col-form-label text-md-right">お誕生日</label>                                                                                                  
                                                                                                                                                                                                                   
                            <div class="col-md-6">                                                                                                                                                                 
                                <input id="birthdate" type="text" class="form-control datepicker @error('birthdate') is-invalid @enderror" name="birthdate" value="{{ old('birthdate') }}" required autocomplete="\
birthdate">                                                                                                                                                                                                        
                                                                                                                                                                                                                   
                                @error('birthdate')                                                                                                                                                                
                                    <span class="invalid-feedback" role="alert">                                                                                                                                   
                                        <strong>{{ $message }}</strong>                                                                                                                                            
                                    </span>                                                                                                                                                                        
                                @enderror                                                                                                                                                                          
                            </div>                                                                                                                                                                                 
                        </div>                                                                                                                                                                                     
                                                                                                                                                                                                                   
                        <div class="form-group row mb-0">                                                                                                                                                          
                            <div class="col-md-6 offset-md-4">                                                                                                                                                     
                                <button type="submit" class="btn btn-primary">                                                                                                                                     
                                    {{ __('Register') }}                                                                                                                                                           
                                </button>                                                                                                                                                                          
                            </div>                                                                                                                                                                                 
                        </div>                                                                                                                                                                                     
                    </form>               
...

class=“form-control datepickerの部分に注意してください。

app.jsの編集

ブレードで使用したクラス名、datepickerとjquery-uiのdatepickerを繋げるために、以下の定義をapp.jsに加えます。

resources/js/app.js

require('./bootstrap');   
...
$(".datepicker").datepicker({                                                                                                                                                                                      
    dateFormat: 'yy-mm-dd'                                                                                                                                                                                         
});

コンパイル

いろいろなソースファイルの編集を完了して、以下でコンパイルして、all.jsとall.cssを作成します。

$ npm run dev

プロダクションには、

$ npm run prod

これで完了ですが、最後にカレンダーを日本語にしてみましょう。そのためには、bootstrap.jsにおいて、以下のように日本語版のカレンダーに代えます。

resources/js/bootstrap.js

...
//require('jquery-ui/ui/widgets/datepicker.js');
require('jquery-ui/ui/i18n/datepicker-ja.js');

これでコンパイルすると以下のような画面となります。

誕生日の項目なので年も選択できるようにしました。そのためには、app.jsでの定義は以下のようになります。

resources/js/app.js

...
$(".datepicker").datepicker({                                                                                                                                                                                      
    dateFormat: 'yy-mm-dd',
    changeMonth: true,                                                                                                                                                                                             
    changeYear: true,                                                                                                                                                                                              
    yearRange: '1901:'                                                                                                                                                                                     
});

jsやcssファイルのバージョン化

Sun, 06 Oct 2019 07:45:52 +0900

laravel-mixの続きです。まだ続きそうなので、連載ものにしました。右にリストされているCATEGORIESのフロントエンドの開発です。

今回は、laravel-mixで作成されたjsやcssのファイルがどのようにbladeで参照されているかにフォーカスします。

asset()

再びレイアウトのbladeファイルの中身を以下に掲載します。

resources/views/layouts/app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>

    <!-- Scripts -->
    <script src="{{ asset('js/app.js') }}" defer></script>

    <!-- Fonts -->
    <link rel="dns-prefetch" href="//fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">

    <!-- Styles -->
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
...

上の中の以下に注目してください。

...
<script src="{{ asset('js/app.js') }}" defer></script>
...
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
...

asset()は、app.jsなどのファイルが存在するURLを生成するヘルパーです。与えた引数の値をURLにしてくれます。

$ php artisan tinker
Psy Shell v0.9.9 (PHP 7.2.16 — cli) by Justin Hileman
>>> asset('js/app.js')
=> "http://localhost/js/app.js"

という具合です。

URLのサイトやディレクトリを変えたければ、.envを編集します。

$ cat .env
...
ASSET_URL=https://example.com/assets

と設定すれば、

>>> asset('js/app.js')
=> "https://example.com/assets/js/app.js"

となります。

また、先のレイアウトの出力は、

...
<script src="https://example.com/assets/js/app.js" defer></script>
...
<link href="https://example.com/assets/css/app.css" rel="stylesheet">

となります。

ブラウザのキャッシュをバスト

通常のブラウザでは、HTMLで参照されるファイル名が同じであるとブラウザにキャッシュされます。キャッシュされること自体は転送時間を節約する意味で素晴らしいのですが、app.jsの中身が更新されたときはブラウザにキャッシュされているものを使用してもらいたくありません。

そのようなときに（つまりキャッシュをバストしたいとき）によく使われるのは、URLにPHP関数のtime()をURLに追加することです。

例えば、

<script src="{{ asset('js/app.js').'?'.time() }}" defer></script>

は、

<script src="https://example.com/assets/js/app.js?1570143025" defer></script>

となります。

毎回毎回アクセスする度に、time()の値は変わるのでapp.jsはキャッシュされず、ブラウザはファイルをサーバーから毎回毎回取得します。しかし、これだと困ります。app.jsが更新されるまではキャッシュして欲しいのです。

そこで登場するのが、larave-mixのバージョン機能です。

まず、webpack.mix.jsを編集します。

const mix = require('laravel-mix');                                                                                                                                                                                
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    
mix.js('resources/js/app.js', 'public/js')                                                                                                                                                                         
    .sass('resources/sass/app.scss', 'public/css');                                                                                                                                                                
                                                                                                                                                                                                                   
if (mix.inProduction()) {                                                                                                                                                                                          
    mix.version();                                                                                                                                                                                                 
}

追加したのは最後の3行です。プロダクションの実行のときにバージョン化を行う指定です。

次に、

$ npm run prod

を実行します。app.cssやapp.jsのファイルを生成するとともに、mix-manifest.jsonのファイルをpublicのディレクトリに作成します。

そのファイルの中身には、必要なファイルのバージョン化のためのマップが定義されています。

{
    "/js/app.js": "/js/app.js?id=d1c6ff581391a0e168f2",
    "/css/app.css": "/css/app.css?id=33e746eff21c53ed136b"
}

この情報を使用するには、mix()を使いレイアウトを以下のように編集します。

...
<script src="{{ asset(mix('js/app.js')) }}" defer></script>
...
<link href="{{ asset(mix('css/app.css')) }}" rel="stylesheet">
...

出力は以下となります。

...
<script src="https://example.com/assets/js/app.js?id=d1c6ff581391a0e168f2" defer></script>
...
<link href="https://example.com/assets/css/app.css?id=33e746eff21c53ed136b" rel="stylesheet">
...

先のtime()とは違って、更新されたときのみにidの値が変わり、それまではブラウザにキャッシュされてもOKとなります。

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