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.8k
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
"config" ってなんだ? / What is "config"?
okashoi
0
220
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
2
580
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
270
PHP における静的解析(あるいはそもそも静的解析とは) / #phpcondo_yasai static analysis for PHP
okashoi
1
190
【PHPカンファレンス沖縄 2023】素朴で考慮漏れのある PHP コードをテストコードとともに補強していく(ライブコーディング補足資料) / #phpcon_okinawa 2023 livecoding supplementary material
okashoi
3
1.6k
その説明、コードコメントに書く?コミットメッセージに書く? プルリクエストに書く? - #phpconfuk 2023
okashoi
3
1.2k
いろいろなフレームワークの仕組みを index.php から読み解こう / index.php of each framework
okashoi
1
2k
「登壇しているひとは偉い」という話
okashoi
0
36
ISUCON 11 参考実装 PHP 移植の苦労?話
okashoi
0
30
Other Decks in Technology
See All in Technology
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
240
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
3
810
「手動オペレーションに定評がある」と言われた私が心がけていること / phpcon_odawara2024
blue_goheimochi
2
320
エンタープライズ環境下での Active Directory の運用 TIPS
tamaiyutaro
1
1.6k
入社後初めてのタスクでk8sアップグレードした話.pdf
kkato1
1
380
Algyan イベント振り返り
linyixian
0
190
OpenTelemetry を使ったトレースエグザンプラーの活用 / otel-trace-exemplar
k6s4i53rx
2
640
Terraformあれやこれ/terraform-this-and-that
emiki
5
470
「共通基盤」を超えよ! 今、Platform Engineeringに取り組むべき理由
jacopen
25
5.9k
カオナビの利用実績をアウトカムへつなげる旅 / example-of-data-management-startup-in-kaonavi
kaonavi
0
120
DevOpsDays History and my DevOps story
kawaguti
PRO
8
1.6k
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
2
2.9k
Featured
See All Featured
YesSQL, Process and Tooling at Scale
rocio
163
13k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
Six Lessons from altMBA
skipperchong
20
3k
The Pragmatic Product Professional
lauravandoore
24
5.8k
The Cost Of JavaScript in 2023
addyosmani
14
3.8k
Designing for Performance
lara
601
67k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
Designing on Purpose - Digital PM Summit 2013
jponch
110
6.4k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Fireside Chat
paigeccino
20
2.6k
Teambox: Starting and Learning
jrom
128
8.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 まとめ