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
Nuxtmeetup#8 Yoshinori Ishii
Search
y.ishii
May 07, 2019
Programming
1
1.2k
Nuxtmeetup#8 Yoshinori Ishii
y.ishii
May 07, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
1から理解するWeb Push
dora1998
7
1.9k
The Past, Present, and Future of Enterprise Java with ASF in the Middle
ivargrimstad
0
170
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
詳解!defer panic recover のしくみ / Understanding defer, panic, and recover
convto
0
250
Ruby×iOSアプリ開発 ~共に歩んだエコシステムの物語~
temoki
0
350
@Environment(\.keyPath)那么好我不允许你们不知道! / atEnvironment keyPath is so good and you should know it!
lovee
0
120
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
470
Improving my own Ruby thereafter
sisshiki1969
1
160
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
570
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
We Have a Design System, Now What?
morganepeng
53
7.8k
GraphQLとの向き合い方2022年版
quramy
49
14k
Typedesign – Prime Four
hannesfritz
42
2.8k
Context Engineering - Making Every Token Count
addyosmani
3
58
How to train your dragon (web standard)
notwaldorf
96
6.2k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Six Lessons from altMBA
skipperchong
28
4k
Optimizing for Happiness
mojombo
379
70k
GitHub's CSS Performance
jonrohan
1032
460k
Documentation Writing (for coders)
carmenintech
74
5k
What's in a price? How to price your products and services
michaelherold
246
12k
Transcript
株式会社アズーム ⽯井良典 Nuxt/Vueのベスト・プラクティスを求めて 〜 みんなどうしてる? 〜
株式会社アズーム https://azoom.jp 略歴 • 2009年設⽴ • 2018年東証マザーズ上場 主な事業 • ⽉極駐⾞場マッチングサイトの運営
carparking.jp → 掲載物件数No.1 (2018年時点) • 屋外広告マッチングサイトの運営 adwall.jp
Nuxt を採⽤した経緯 創業から10年⽬を迎えシステムがレガシー化してきていた ⼗数個のプロジェクトがそれぞれ別の技術要素で構成されている 採⽤する際にレガシーな技術だと優秀な⼈が来ない トレンドの技術要素でリプレース & 新規開発
Why Nuxt ? Vue / React / Angularの3択 React ・エコシステム全体がエンジニア好み過ぎ
・デザイナーや新⼈と共に開発するのが難しい Angular ・⼈気無い Vue ・従来の開発スタイル(サーバーサイトフレームワーク時代)の延⻑線上にあり、学習コストがかから ない。 ・単純に私の好み…。
Nuxt/Vue を採⽤した効果 • トレンド技術の習得を求めてハノイ⼯科⼤学の優秀な学⽣をリ ファーラルで何⼈も採⽤することができた。 • 経験1年のエンジニアやデザイナーと、経験豊富なベトナム⼈ エンジニアが、同じプロジェクトでチーム開発できている。 • 静的なサイトもnuxt
generateの機能を使うなど、多くのプロ ジェクトで共通の技術要素で開発が可能になった。
アズームではエンジニアを募集しています! https://recruit.azoom.jp/ 25才で営業職からWebエンジニアに転職 実務1年で Nuxt / Vue / Laravel /
Node.js / Sass を実務レベルで使い、 現在は社内で利⽤するUIフレームワークの実装をし、 営業の窓⼝、新卒のディレクションをしている。 < 教育実績 >
Q1. Vuex の Actions と Mutations を Pages からどちらも呼び出してOKか? <script>
export default { ...mapMutations([ʻsomeMutation1ʼ, ʻsomeMutation2ʼ]), ...mapActions([ʻsomeActionʼ]) } </script> <⾮同期> <同期>
A. Pagesから呼び出すのはActionsのみ <理由> Pagesはその操作が⾮同期か同期かを知る必要はないから。 <例> • ある操作Aはstateを変更するのみなので、mutationとして呼び 出し • 操作Aでcommitされるデータをサーバーに保存する必要がでて
きて、⾮同期操作が必要になり、actionとしての呼び出しに変 更する → Pagesの処理にとって本質的でない
vuex-pathifyでmutationsの⾃動⽣成 import { make } from 'vuex-pathifyʼ export const state
= () => ({ count: 0 }) export const mutations = { ...make.mutations(state) // SET_COUNTが⽣成される }
Q2. VueのUIライブラリってデザインと構造の分離 ができていない気がするけど、気にならない? <v-btn color="error">Error</v-btn> <button style="color: red">Error</button> Vuetifyの例 ↓これとやってることあまりかわらなくない…?
A. custom elements + sass mixin + rscss <template> <div
class="action-area"> <x-btn class=”button">Some Action</x-btn> </div> </template> <style lang="scss"> .action-area { > .button { @include x-btn-color(" error ") @include x-btn-type("flat") } } </style>
RSCSSとは? https://rscss.io/
BEM RSCSS