フロントエンドのビルドも『Laravel』におまかせ！スゴ腕API「Laravel mix」を使いこなそう

エリカ

2018.09.07

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

Laravelを利用するときに、フロントエンド側ってどうしてますか？今回は、何かと便利なLaravel同梱API「Laravel mix」についてご紹介します。

「Laravel mix」とは？
Laravelのセットアップ
「Laravel mix」の利用準備
時計を実装
ブラウザの起動
まとめ

「Laravel mix」とは？

Laravelの公式ドキュメントには、「多くの一般的なCSSとJavaScriptのプリプロセッサを使用し、Laravelアプリケーションために、構築過程をWebpackでスラスラと定義できるAPI」と紹介されてます。

つまり、sassを利用したcssの記述や、分割されたjavascriptファイルの統合およびトランスパイルなど、フロントエンドのサイト作成業務で主に利用するタスクがLaravelに最適化されたものです。昨今、とくにフロントエンドにおいては多種多様なアプローチがある中で、どのツールを選択したらいいか悩んでいる……そんなとき「Laravel mix」が柔軟に解決してくれる、という訳です。

Laravelのことです、きっとこの「Laravel mix」も洗練されているに違いありません。ということで、ためしに「Laravel mix」とReactを利用して時計を表示するページを作ってみたいと思います。

Laravelのセットアップ

導入はここを参考に。LaradockとLaravelをセットアップします。

ここでちょっとおさらいですが、前提として下記が利用できる環境が必要です。ご確認ください。

docker
git
node.js
npm

準備ができたら、適当なディレクトリを用意します。

$ mkdir MyProject && cd MyProject

gitサブモジュールでlaradockを導入するので、gitを利用できるようにします。

$ git init

laravel本体用のディレクトリを作っておきます。

$ mkdir src

laradockを配置します。

$ git submodule add https://github.com/Laradock/laradock.git

laradock/.envを作成します。

$ cp laradock/env-example laradock/.env

laradock/.envを編集します。

###########################################################
###################### General Setup ######################
###########################################################

### Paths #################################################

# Point to the path of your applications code on your host
APP_CODE_PATH_HOST=../

APP_CODE_PATH_HOST=../ を APP_CODE_PATH_HOST=../src/ に変更し、保存します。

nginx を起動します。

$ cd laradock && docker-compose up -d nginx

workspaceコンテナを利用してLaravel本体をインストールします。

$ docker-compose exec workspace composer create-project --prefer-dist laravel/laravel ./

フロントエンドのスキャフォルドをVueからReactに変更します。

$ docker-compose exec workspace php artisan preset react

「Laravel mix」の利用準備

続いて「Laravel mix」の利用準備をします。

Laravel本体がインストールされた MyProject/src/ ディレクトリに移動。「Laravel mix」を利用するうえで必要な各種のモジュールをインストールします。

$ npm install

src/package.json に記述されている依存パッケージがインストールされます。

src/resources/views/welcome.blade.php を調整して、Reactで時計を表示するための場所だけ確保しておきます。

<head>の適当なところに下記を追記します。

<meta name="csrf-token" content="{{ csrf_token() }}">
        <link href="{{ mix('assets/css/app.css') }}" rel="stylesheet" type="text/css"></link>

<body>を下記のように変更します。

<body>
        <div class="flex-center position-ref full-height">
            <div class="content">
                <div id="clock">
                <!-- ここにReactコンポーネントが描画される -->
                </div>
            </div>
        </div>
        <script src="{{ mix('assets/js/app.js') }}"></script>
    </body>

Laravel mix の設定ファイルを変更します。

let mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.browserSync('localhost'); // ブラウザシンクを有効に
mix.version(); // ブラウザキャッシュ回避のためのファイルのバージョ二ングを有効に

mix.react('resources/assets/js/app.js', 'public/assets/js')
   .sass('resources/assets/sass/app.scss', 'public/assets/css');

時計を実装

Reactの導入はここを参考に、時計を表示するためのコンポーネントを作成します。

src/resources/assets/js/compnents/Clock.js

import React, {Component} from 'react';
import ReactDOM from 'react-dom';

export default class Clock extends Component {
    constructor(props) {
        super(props);
        let now = new Date();
        this.state = {
            time: Clock.now(),
            date: now.toLocaleDateString()
        };
    }
    clock() {
        this.setState(() => ({time: Clock.now()}));
    }

    componentDidMount() {
        this.interval = setInterval(() => this.clock(), this.props.refresh);
    }

    render() {
        return (
            <div>
                <h1 className="title">{this.state.time}</h1>
                <h2>{this.state.date}</h2>
            </div>
        );
    }
    
    static now() {
        let now = new Date();

        return now.toLocaleTimeString();
    }
}

// DOMに#clockがあれば、そこにClockコンポーネントを描画する
if (document.getElementById('clock')) {
    ReactDOM.render(<Clock refresh={1000} />, document.getElementById('clock'));
}