Laravel Mix とは何なのか？ - Laravel/Vue 勉強会 #1

Laravel/Vue 勉強会 #1 の発表資料です。

https://connpass.com/event/58157/

Transcript

1. Laravel Mix とは何なのか？
   @Laravel/Vue勉強会#1
   

   View Slide

2. • 岡田 正平（おかだ しょうへい）
   • 株式会社ウィルゲートに15新卒入社
   • 主に PHP (Laravel) を使った社内システムの開発等
   • 最近読んだ本「何となくJavaScriptを書いていた人が
   一歩先に進むための本」
   2
   お ま え だ れ ？
   @okashoi
   

   View Slide

3. • “一人ひとりの『will』を実現する”
   • コンテンツマーケティング事業／メディア事業
   3
   ウィルゲートについて
   

   View Slide

4. 4
   ウィルゲートについて
   

   View Slide

5. 5
   ウィルゲートについて
   

   View Slide

6. Laravel Mix とは何なのか？
   

   View Slide

7. • Laravel Mix とは何なのか 5分
   • 使い方
   • 準備編 2分
   • 実行編
   • Laravel Mix × Vue.js （DEMOあり） 3分
   7
   アジェンダ
   

   View Slide

8. View Slide

9. Laravel Mix provides a clean, fluent API for defining basic
   webpack build steps for your Laravel application.
   9
   Laravel Mix とは
   

   View Slide

10. 10
    Laravel Mix とは
    Laravel Mix provides a clean, fluent API for defining basic
    webpack build steps for your Laravel application.
    

    View Slide

11. • webpack の設定を容易に記述できる
    • Laravel 向けの
    • npm パッケージ
    11
    ようするに？
    

    View Slide

12. • webpack の設定を容易に記述できる
    • Laravel 向けの
    • npm パッケージ
    12
    ようするに？
    

    View Slide

13. • JavaScript をモジュール化
    • 依存関係解決
    • 読み込み用の単一のファイルを生成（ビルド）
    13
    webpack?
    

    View Slide

14. webpack.mix.js
    14
    設定例（デフォルト）
    

    View Slide

15. webpack.mix.js
    15
    設定例（デフォルト）
    ビルド済みファイル出力先
    ビルド元のソースコード
    

    View Slide

16. • webpack の設定を容易に記述できる
    • Laravel 向けの
    • npm パッケージ
    16
    ようするに？
    

    View Slide

17. • 確かに Laravel には向いている
    • どちらかというと Laravel 自体が Laravel に合わせて
    デフォルト設定を提供している様に読みとれる
    • Laravel 以外にも利用可能なのでは？（要検証）
    17
    Laravel向けの（？）
    

    View Slide

18. • 確かに Laravel には向いている
    • どちらかというと Laravel 自体が Laravel に合わせて
    デフォルト設定を提供している様に読みとれる
    • Laravel 以外にも利用可能なのでは？（要検証）
    18
    Laravel向けの（？）
    

    View Slide

19. • webpack の設定を容易に記述できる
    • Laravel 向けの（？）
    • npm パッケージ
    19
    ようするに？
    

    View Slide

20. 20
    npm パッケージである
    (package.json)
    

    View Slide

21. 21
    npm パッケージである
    (package.json)
    

    View Slide

22. • webpack の設定を容易に記述できる
    • Laravel 向けの（？）
    • npm パッケージ
    22
    ようするに？
    

    View Slide

23. • Laravel 5.3 以前は Laravel Elixir
    • Gulp ベース
    23
    ※補足
    

    View Slide

24. 使い方（準備編）
    

    View Slide

25. • npm
    • node package manager
    • PHP でいうところの composer に相当
    • yarn
    • npm 互換のパッケージマネージャー
    • facebook 製
    1. node / npm (yarn) をインストール
    

    View Slide

26. https://yarnpkg.com/en/docs/install
    26
    1. node / npm (yarn) をインストール
    

    View Slide

27. 27
    2. Laravel 5.4 プロジェクトを作成
    

    View Slide

28. 28
    3. npm (yarn) install を実行
    

    View Slide

29. 以上。
    

    View Slide

30. 使い方（実行編）
    

    View Slide

31. 31
    1. 下記コマンドを実行
    

    View Slide

32. 32
    1. 下記コマンドを実行
    

    View Slide

33. 以上。
    

    View Slide

34. Laravel Mix × Vue.js
    

    View Slide

35. 35
    resources/assets/js/app.js
    

    View Slide

36. 36
    resources/assets/js/app.js
    

    View Slide

37. resources/assets/js/components 下に .vue 形式で配置
    37
    カスタムコンポーネント
    (Example.vue)
    

    View Slide

38. DEMO
    

    View Slide

39. Laravel Mix とは
    • webpack の設定を容易に記述できる
    • Laravel 向けの（？）
    • npm パッケージ
    Laravel 5.4 プロジェクトを作成した時点で即利用可能！
    39
    まとめ
    

    View Slide