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
パスワードのハッシュ、ソルトってなに? - What is hash and salt for password?
okashoi
3
69
設計の考え方 - インターフェースと腐敗防止層編 #phpconfuk / Interface and Anti Corruption Layer
okashoi
9
2.4k
"config" ってなんだ? / What is "config"?
okashoi
0
570
ファイル先頭の use の意味、説明できますか? 〜PHP の namespace と autoloading の関係を正しく理解しよう〜 / namespace and autoloading in php
okashoi
3
930
MySQL のインデックスの種類をおさらいしよう! / overviewing indexes in MySQL
okashoi
0
580
PHP における静的解析(あるいはそもそも静的解析とは) / #phpcondo_yasai static analysis for PHP
okashoi
1
400
【PHPカンファレンス沖縄 2023】素朴で考慮漏れのある PHP コードをテストコードとともに補強していく(ライブコーディング補足資料) / #phpcon_okinawa 2023 livecoding supplementary material
okashoi
3
1.8k
その説明、コードコメントに書く?コミットメッセージに書く? プルリクエストに書く? - #phpconfuk 2023
okashoi
14
4.8k
いろいろなフレームワークの仕組みを index.php から読み解こう / index.php of each framework
okashoi
2
2.5k
Other Decks in Technology
See All in Technology
【完全版】Dify - LINE Bot連携 考え方と実用テクニック
uezo
1
300
LINE-ChatGPT 倫理問題を整理する全力肯定彼氏くん [LuC4]に訪れたサービス開始以来の最大の危機
o_ob
1
120
Oracle Database 23ai 新機能#4 Application Continuity
oracle4engineer
PRO
0
120
【shownet.conf_】AI技術とUX監視の応用でShowNetの基盤を支えるモニタリングシステム
shownet
PRO
0
380
それでもやっぱり ExpressRoute が好き!
skmkzyk
0
270
tenntennはなんでnewmoにnew社したの? - YAPC::Hakodate 2024
tenntenn
PRO
0
250
ドキュメントとの付き合い方を考える
leveragestech
1
140
How CERN serves 1EB of data via FUSE
ennael
PRO
0
16k
【shownet.conf_】ローカル5Gを活用したウォーキングツアーの体感向上
shownet
PRO
0
350
受託開発でもアジャイル開発できました / Agile in Contract Development
takaking22
8
3.9k
AWSの初級者向けAI・ML資格『AWS Certified AI Practitioner』の傾向と対策/So You Want To Pass AWS Certified AI Practitioner
quiver
0
370
【shownet.conf_】多様化するネットワーク環境を柔軟に統合するルーティングテクノロジー
shownet
PRO
0
390
Featured
See All Featured
RailsConf 2023
tenderlove
28
840
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
Visualization
eitanlees
143
15k
How GitHub (no longer) Works
holman
311
140k
What's in a price? How to price your products and services
michaelherold
243
11k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
25
660
Making the Leap to Tech Lead
cromwellryan
131
8.8k
Designing on Purpose - Digital PM Summit 2013
jponch
114
6.9k
GitHub's CSS Performance
jonrohan
1030
450k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Design by the Numbers
sachag
278
19k
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 まとめ