Slide 1
Slide 1 text
Laravel Mix とは何なのか？
@Laravel/Vue勉強会#1
Slide 2
Slide 2 text
• 岡田 正平（おかだ しょうへい）
• 株式会社ウィルゲートに15新卒入社
• 主に PHP (Laravel) を使った社内システムの開発等
• 最近読んだ本「何となくJavaScriptを書いていた人が
一歩先に進むための本」
2
お ま え だ れ ？
@okashoi
Slide 3
Slide 3 text
• “一人ひとりの『will』を実現する”
• コンテンツマーケティング事業／メディア事業
3
ウィルゲートについて
Slide 4
Slide 4 text
4
ウィルゲートについて
Slide 5
Slide 5 text
5
ウィルゲートについて
Slide 6
Slide 6 text
Laravel Mix とは何なのか？
Slide 7
Slide 7 text
• Laravel Mix とは何なのか 5分
• 使い方
• 準備編 2分
• 実行編
• Laravel Mix × Vue.js （DEMOあり） 3分
7
アジェンダ
Slide 8
Slide 8 text
8
Slide 9
Slide 9 text
Laravel Mix provides a clean, fluent API for defining basic
webpack build steps for your Laravel application.
9
Laravel Mix とは
Slide 10
Slide 10 text
10
Laravel Mix とは
Laravel Mix provides a clean, fluent API for defining basic
webpack build steps for your Laravel application.
Slide 11
Slide 11 text
• webpack の設定を容易に記述できる
• Laravel 向けの
• npm パッケージ
11
ようするに？
Slide 12
Slide 12 text
• webpack の設定を容易に記述できる
• Laravel 向けの
• npm パッケージ
12
ようするに？
Slide 13
Slide 13 text
• JavaScript をモジュール化
• 依存関係解決
• 読み込み用の単一のファイルを生成（ビルド）
13
webpack?
Slide 14
Slide 14 text
webpack.mix.js
14
設定例（デフォルト）
Slide 15
Slide 15 text
webpack.mix.js
15
設定例（デフォルト）
ビルド済みファイル出力先
ビルド元のソースコード
Slide 16
Slide 16 text
• webpack の設定を容易に記述できる
• Laravel 向けの
• npm パッケージ
16
ようするに？
Slide 17
Slide 17 text
• 確かに Laravel には向いている
• どちらかというと Laravel 自体が Laravel に合わせて
デフォルト設定を提供している様に読みとれる
• Laravel 以外にも利用可能なのでは？（要検証）
17
Laravel向けの（？）
Slide 18
Slide 18 text
• 確かに Laravel には向いている
• どちらかというと Laravel 自体が Laravel に合わせて
デフォルト設定を提供している様に読みとれる
• Laravel 以外にも利用可能なのでは？（要検証）
18
Laravel向けの（？）
Slide 19
Slide 19 text
• webpack の設定を容易に記述できる
• Laravel 向けの（？）
• npm パッケージ
19
ようするに？
Slide 20
Slide 20 text
20
npm パッケージである
(package.json)
Slide 21
Slide 21 text
21
npm パッケージである
(package.json)
Slide 22
Slide 22 text
• webpack の設定を容易に記述できる
• Laravel 向けの（？）
• npm パッケージ
22
ようするに？
Slide 23
Slide 23 text
• Laravel 5.3 以前は Laravel Elixir
• Gulp ベース
23
※補足
Slide 24
Slide 24 text
使い方（準備編）
Slide 25
Slide 25 text
• npm
• node package manager
• PHP でいうところの composer に相当
• yarn
• npm 互換のパッケージマネージャー
• facebook 製
1. node / npm (yarn) をインストール
Slide 26
Slide 26 text
https://yarnpkg.com/en/docs/install
26
1. node / npm (yarn) をインストール
Slide 27
Slide 27 text
27
2. Laravel 5.4 プロジェクトを作成
Slide 28
Slide 28 text
28
3. npm (yarn) install を実行
Slide 29
Slide 29 text
以上。
Slide 30
Slide 30 text
使い方（実行編）
Slide 31
Slide 31 text
31
1. 下記コマンドを実行
Slide 32
Slide 32 text
32
1. 下記コマンドを実行
Slide 33
Slide 33 text
以上。
Slide 34
Slide 34 text
Laravel Mix × Vue.js
Slide 35
Slide 35 text
35
resources/assets/js/app.js
Slide 36
Slide 36 text
36
resources/assets/js/app.js
Slide 37
Slide 37 text
resources/assets/js/components 下に .vue 形式で配置
37
カスタムコンポーネント
(Example.vue)
Slide 38
Slide 38 text
DEMO
Slide 39
Slide 39 text
Laravel Mix とは
• webpack の設定を容易に記述できる
• Laravel 向けの（？）
• npm パッケージ
Laravel 5.4 プロジェクトを作成した時点で即利用可能！
39
まとめ