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
1k
Nuxtmeetup#8 Yoshinori Ishii
y.ishii
May 07, 2019
Tweet
Share
Other Decks in Programming
See All in Programming
Let's learn code review
riofujimon
2
570
AmperとFleetを使ったAndroidアプリ
yoppie
0
250
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.1k
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
500
try! Swift Tokyo 初参加報告LT
hinakko2
0
230
PHPはいつから死んでいるかの調査
chiroruxx
2
420
Site Reliability Engineering for GMO
pyama86
8
1.1k
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
380
Deep Dive into React Stream/Serialize
mugi_uno
3
660
Fast JSX: Don't clone props object #28768
yossydev
1
180
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
220
Fragment Composition of GraphQL
quramy
13
1.4k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Building Flexible Design Systems
yeseniaperezcruz
320
37k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Designing with Data
zakiwarfel
96
4.8k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
How GitHub (no longer) Works
holman
305
140k
A Philosophy of Restraint
colly
197
16k
Infographics Made Easy
chrislema
238
18k
Into the Great Unknown - MozCon
thekraken
14
1k
Writing Fast Ruby
sferik
622
60k
Unsuck your backbone
ammeep
663
57k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
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