Nuxtmeetup#8 Yoshinori Ishii

Transcript

1. 株式会社アズーム ⽯井良典 Nuxt/Vueのベスト・プラクティスを求めて 〜 みんなどうしてる？ 〜
2. 株式会社アズーム https://azoom.jp 略歴 • 2009年設⽴ • 2018年東証マザーズ上場 主な事業 • ⽉極駐⾞場マッチングサイトの運営 carparking.jp → 掲載物件数No.1 (2018年時点) • 屋外広告マッチングサイトの運営 adwall.jp
3. Nuxt を採⽤した経緯 創業から10年⽬を迎えシステムがレガシー化してきていた ⼗数個のプロジェクトがそれぞれ別の技術要素で構成されている 採⽤する際にレガシーな技術だと優秀な⼈が来ない トレンドの技術要素でリプレース & 新規開発
4. Why Nuxt ? Vue / React / Angularの3択 React ・エコシステム全体がエンジニア好み過ぎ ・デザイナーや新⼈と共に開発するのが難しい Angular ・⼈気無い Vue ・従来の開発スタイル(サーバーサイトフレームワーク時代)の延⻑線上にあり、学習コストがかから ない。 ・単純に私の好み…。
5. Nuxt/Vue を採⽤した効果 • トレンド技術の習得を求めてハノイ⼯科⼤学の優秀な学⽣をリ ファーラルで何⼈も採⽤することができた。 • 経験1年のエンジニアやデザイナーと、経験豊富なベトナム⼈ エンジニアが、同じプロジェクトでチーム開発できている。 • 静的なサイトもnuxt generateの機能を使うなど、多くのプロ ジェクトで共通の技術要素で開発が可能になった。
6. アズームではエンジニアを募集しています！ https://recruit.azoom.jp/ 25才で営業職からWebエンジニアに転職 実務1年で Nuxt / Vue / Laravel / Node.js / Sass を実務レベルで使い、 現在は社内で利⽤するUIフレームワークの実装をし、 営業の窓⼝、新卒のディレクションをしている。 < 教育実績 >
7. Q1. Vuex の Actions と Mutations を Pages からどちらも呼び出してOKか？ <script> export default { ...mapMutations([ʻsomeMutation1ʼ, ʻsomeMutation2ʼ]), ...mapActions([ʻsomeActionʼ]) } </script> <⾮同期> <同期>
8. A. Pagesから呼び出すのはActionsのみ <理由> Pagesはその操作が⾮同期か同期かを知る必要はないから。 <例> • ある操作Aはstateを変更するのみなので、mutationとして呼び 出し • 操作Aでcommitされるデータをサーバーに保存する必要がでて きて、⾮同期操作が必要になり、actionとしての呼び出しに変 更する → Pagesの処理にとって本質的でない
9. vuex-pathifyでmutationsの⾃動⽣成 import { make } from 'vuex-pathifyʼ export const state = () => ({ count: 0 }) export const mutations = { ...make.mutations(state) // SET_COUNTが⽣成される }
10. Q2. VueのUIライブラリってデザインと構造の分離 ができていない気がするけど、気にならない？ <v-btn color="error">Error</v-btn> <button style="color: red">Error</button> Vuetifyの例 ↓これとやってることあまりかわらなくない…？
11. 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>
12. RSCSSとは？ https://rscss.io/
13. BEM RSCSS