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
3.9k
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
どうして手を動かすよりもチーム内のコードレビューを優先するべきなのか
okashoi
3
580
パスワードのハッシュ、ソルトってなに? - What is hash and salt for password?
okashoi
3
110
設計の考え方 - インターフェースと腐敗防止層編 #phpconfuk / Interface and Anti Corruption Layer
okashoi
10
2.9k
"config" ってなんだ? / What is "config"?
okashoi
0
710
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
3
1.1k
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
700
PHP における静的解析(あるいはそもそも静的解析とは) / #phpcondo_yasai static analysis for PHP
okashoi
1
480
【PHPカンファレンス沖縄 2023】素朴で考慮漏れのある PHP コードをテストコードとともに補強していく(ライブコーディング補足資料) / #phpcon_okinawa 2023 livecoding supplementary material
okashoi
3
1.8k
その説明、コードコメントに書く?コミットメッセージに書く? プルリクエストに書く? - #phpconfuk 2023
okashoi
15
5k
Other Decks in Technology
See All in Technology
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
140
re:Invent 2024 Innovation Talks(NET201)で語られた大切なこと
shotashiratori
0
320
レンジャーシステムズ | 会社紹介(採用ピッチ)
rssytems
0
280
2024年にチャレンジしたことを振り返るぞ
mitchan
0
150
podman_update_2024-12
orimanabu
1
290
[JAWS-UG新潟#20] re:Invent2024 -CloudOperationsアップデートについて-
shintaro_fukatsu
0
120
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
3
1.4k
成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results
aiandrox
0
380
生成AIのガバナンスの全体像と現実解
fnifni
1
210
PHPerのための計算量入門/Complexity101 for PHPer
hanhan1978
5
680
事業貢献を考えるための技術改善の目標設計と改善実績 / Targeted design of technical improvements to consider business contribution and improvement performance
oomatomo
0
150
Server-Side Engineer of LINE Sukimani
lycorp_recruit_jp
0
360
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
96
5.2k
How GitHub (no longer) Works
holman
311
140k
Typedesign – Prime Four
hannesfritz
40
2.4k
Visualization
eitanlees
146
15k
A Philosophy of Restraint
colly
203
16k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
Designing on Purpose - Digital PM Summit 2013
jponch
116
7k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
170
Practical Orchestrator
shlominoach
186
10k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.5k
KATA
mclloyd
29
14k
For a Future-Friendly Web
brad_frost
175
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 まとめ