Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Laravel Mix とは何なのか? - Laravel/Vue 勉強会 #1
Search
Shohei Okada
June 21, 2017
Technology
2
4.1k
Laravel Mix とは何なのか? - Laravel/Vue 勉強会 #1
Laravel/Vue 勉強会 #1 の発表資料です。
https://connpass.com/event/58157/
Shohei Okada
June 21, 2017
Tweet
Share
More Decks by Shohei Okada
See All by Shohei Okada
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
270
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
1.4k
パスワードのハッシュ、ソルトってなに? - What is hash and salt for password?
okashoi
3
210
設計の考え方 - インターフェースと腐敗防止層編 #phpconfuk / Interface and Anti Corruption Layer
okashoi
11
3.9k
"config" ってなんだ? / What is "config"?
okashoi
0
1.2k
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
4
1.6k
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
900
PHP における静的解析(あるいはそもそも静的解析とは) / #phpcondo_yasai static analysis for PHP
okashoi
1
610
【PHPカンファレンス沖縄 2023】素朴で考慮漏れのある PHP コードをテストコードとともに補強していく(ライブコーディング補足資料) / #phpcon_okinawa 2023 livecoding supplementary material
okashoi
3
1.9k
Other Decks in Technology
See All in Technology
Claude Code に プロジェクト管理やらせたみた
unson
6
4.6k
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
200
SREのためのeBPF活用ステップアップガイド
egmc
1
170
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
21k
Delta airlines®️ USA Contact Numbers: Complete 2025 Support Guide
airtravelguide
0
340
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
160
事例で学ぶ!B2B SaaSにおけるSREの実践例/SRE for B2B SaaS: A Real-World Case Study
bitkey
1
160
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
390
Coinbase™®️ USA Contact Numbers: Complete 2025 Support Guide
officialcoinbasehelpcenter
0
460
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
490
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
240
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
180
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Balancing Empowerment & Direction
lara
1
430
A Tale of Four Properties
chriscoyier
160
23k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
A better future with KSS
kneath
238
17k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Docker and Python
trallard
44
3.5k
Visualization
eitanlees
146
16k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Transcript
Laravel Mix とは何なのか? @Laravel/Vue勉強会#1
• 岡田 正平(おかだ しょうへい) • 株式会社ウィルゲートに15新卒入社 • 主に PHP (Laravel)
を使った社内システムの開発等 • 最近読んだ本「何となくJavaScriptを書いていた人が 一歩先に進むための本」 2 お ま え だ れ ? @okashoi
• “一人ひとりの『will』を実現する” • コンテンツマーケティング事業/メディア事業 3 ウィルゲートについて
4 ウィルゲートについて
5 ウィルゲートについて
Laravel Mix とは何なのか?
• Laravel Mix とは何なのか 5分 • 使い方 • 準備編 2分
• 実行編 • Laravel Mix × Vue.js (DEMOあり) 3分 7 アジェンダ
8
Laravel Mix provides a clean, fluent API for defining basic
webpack build steps for your Laravel application. 9 Laravel Mix とは
10 Laravel Mix とは Laravel Mix provides a clean, fluent
API for defining basic webpack build steps for your Laravel application.
• webpack の設定を容易に記述できる • Laravel 向けの • npm パッケージ 11
ようするに?
• webpack の設定を容易に記述できる • Laravel 向けの • npm パッケージ 12
ようするに?
• JavaScript をモジュール化 • 依存関係解決 • 読み込み用の単一のファイルを生成(ビルド) 13 webpack?
webpack.mix.js 14 設定例(デフォルト)
webpack.mix.js 15 設定例(デフォルト) ビルド済みファイル出力先 ビルド元のソースコード
• webpack の設定を容易に記述できる • Laravel 向けの • npm パッケージ 16
ようするに?
• 確かに Laravel には向いている • どちらかというと Laravel 自体が Laravel に合わせて
デフォルト設定を提供している様に読みとれる • Laravel 以外にも利用可能なのでは?(要検証) 17 Laravel向けの(?)
• 確かに Laravel には向いている • どちらかというと Laravel 自体が Laravel に合わせて
デフォルト設定を提供している様に読みとれる • Laravel 以外にも利用可能なのでは?(要検証) 18 Laravel向けの(?)
• webpack の設定を容易に記述できる • Laravel 向けの(?) • npm パッケージ 19
ようするに?
20 npm パッケージである (package.json)
21 npm パッケージである (package.json)
• webpack の設定を容易に記述できる • Laravel 向けの(?) • npm パッケージ 22
ようするに?
• Laravel 5.3 以前は Laravel Elixir • Gulp ベース 23
※補足
使い方(準備編)
• npm • node package manager • PHP でいうところの composer
に相当 • yarn • npm 互換のパッケージマネージャー • facebook 製 1. node / npm (yarn) をインストール
https://yarnpkg.com/en/docs/install 26 1. node / npm (yarn) をインストール
27 2. Laravel 5.4 プロジェクトを作成
28 3. npm (yarn) install を実行
以上。
使い方(実行編)
31 1. 下記コマンドを実行
32 1. 下記コマンドを実行
以上。
Laravel Mix × Vue.js
35 resources/assets/js/app.js
36 resources/assets/js/app.js
resources/assets/js/components 下に .vue 形式で配置 37 カスタムコンポーネント (Example.vue)
DEMO
Laravel Mix とは • webpack の設定を容易に記述できる • Laravel 向けの(?) •
npm パッケージ Laravel 5.4 プロジェクトを作成した時点で即利用可能! 39 まとめ