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
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
380
🔨 小さなビルドシステムを作る
momeemt
3
670
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
440
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
300
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Laravel Boost 超入門
fire_arlo
2
210
為你自己學 Python - 冷知識篇
eddie
1
350
rage against annotate_predecessor
junk0612
0
160
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
630
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
210
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
560
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
280
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Designing Experiences People Love
moore
142
24k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
A Modern Web Designer's Workflow
chriscoyier
696
190k
GraphQLとの向き合い方2022年版
quramy
49
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Optimizing for Happiness
mojombo
379
70k
Rails Girls Zürich Keynote
gr2m
95
14k
The Cult of Friendly URLs
andyhume
79
6.6k
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