株式会社アズーム ⽯井良典 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か？ export default { ...mapMutations([ʻsomeMutation1ʼ, ʻsomeMutation2ʼ]), ...mapActions([ʻsomeActionʼ]) } <⾮同期> <同期>

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ライブラリってデザインと構造の分離 ができていない気がするけど、気にならない？ Error Error Vuetifyの例 ↓これとやってることあまりかわらなくない…？

A. custom elements + sass mixin + rscss .action-area { > .button { @include x-btn-color(" error ") @include x-btn-type("flat") } }

RSCSSとは？ https://rscss.io/

BEM RSCSS