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
470
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
2
1.6k
パスワードのハッシュ、ソルトってなに? - What is hash and salt for password?
okashoi
3
270
設計の考え方 - インターフェースと腐敗防止層編 #phpconfuk / Interface and Anti Corruption Layer
okashoi
11
4.5k
"config" ってなんだ? / What is "config"?
okashoi
0
1.4k
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
4
1.8k
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
1k
PHP における静的解析(あるいはそもそも静的解析とは) / #phpcondo_yasai static analysis for PHP
okashoi
1
690
【PHPカンファレンス沖縄 2023】素朴で考慮漏れのある PHP コードをテストコードとともに補強していく(ライブコーディング補足資料) / #phpcon_okinawa 2023 livecoding supplementary material
okashoi
3
2k
Other Decks in Technology
See All in Technology
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
takaking22
7
4k
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
240
綺麗なデータマートをつくろう_データ整備を前向きに考える会 / Let's create clean data mart
brainpadpr
3
370
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
200
Uncle Bobの「プロフェッショナリズムへの期待」から学ぶプロの覚悟
nakasho
2
100
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
300
いまさら聞けない ABテスト入門
skmr2348
1
230
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
170
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
78k
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
120
やる気のない自分との向き合い方/How to Deal with Your Unmotivated Self
sanogemaru
0
450
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Large-scale JavaScript Application Architecture
addyosmani
514
110k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Language of Interfaces
destraynor
162
25k
Navigating Team Friction
lara
189
15k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
970
Building Adaptive Systems
keathley
43
2.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
YesSQL, Process and Tooling at Scale
rocio
173
14k
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 まとめ