Vue/Nuxtの現場でのあれこれ

UIT meetup Fukuoka vol.1 @masaakikunsan

自己紹介

masaakikunsan (石岡 将明)

株式会社ROXX (旧SCOUTER)

back check PdM / Frontend Engineer

自称フロント界隈1の加藤恵のオタク

VueFesで登壇します

すまん、俺東京の人だ...

宣伝

映画までにアニメを見よう

Agenda

1. 弊社Devチームについて
2. 弊社Devチームの現場のルール
3. さいごに

弊社Devチームについて

back check

オンライン完結のリファレンスチェックサービス

Nuxt + Laravel で実装

Frontend Engineerは4人

3ヶ月ぐらい開発をし1月にβ版をリリース
現在は、本リリースに向けて格闘中

弊社Devチームの現場のルール

Component について

Vue の StyleGuide に準拠している
ex) コンポーネントは複数単語でパスカルケースにする
https://jp.vuejs.org/v2/style-guide/

Atomic Designを採用

- Atoms
  - 他のComponentに依存していない
  - Storeに依存していない
- Molecules
  - Atomsを1つ以上使っている
  - Store依存していない
  - ビジネスロジックを内包していない
- Organisms
  - AtomsかMoleculesを1つ以上使っている or ビジネスロジックを内包している or Storeに依存している

個人的に Atomic Designは人類には早いと思っているのでやりたくない。

ただ、他に明確な指標もないので一旦なんちゃってでやっている

Component について

一度定義し、それ以上上書きしないもの (例えばバリデーションルールなど) は computed を使う。

LocalState と computed について

computed: {
  tableHead: () => [
    {
      key: 'hoge',
      label: 'huga'
    }, {
      key: 'hoge',
      label: 'huga'
    }
  ]
}

<template> 内で式をなるべく書かないようにして、computed, methods に処理を寄せるように。

理由としてはコンポーネントでテストをしやすくするためと、一目で処理を分かりやすくするため。

<template> の債務

いくつかのページで共通化して使える値は定数として定義して同じ値を参照するようにする。

定数は ~/constants 以下に置く。ファイル名はキャメルケース

定数のルール

const USER_STATUSES = {
  CREATED: 'created',
  SENT: 'sent',
}

export default USER_STATUSES

<template> で使う場合、 computed で定数を返すように定義する。このとき、 アロー関数を用いて返すようにする。

細かい話はじまぐさんの過去のスライドを見てくれ
https://slides.com/nakajmg/replace-axios-module#/

API通信について

API通信について

// src/utils/request.js
import axios from 'axios'
const apiRoot = '/api'
 
export default {
  get(url, config = {}) {
    return axios({
      method: 'GET',
      url: `${apiRoot}${url}`,
      ...config
    })
    .then(res => res.data)
    .catch(err => err)
  },
 
  post(url, config = {}) {
    return axios({
      method: 'POST',
      url: `${apiRoot}${url}`,
      ...config
    })
    .then(res => res.data)
    .catch(err => err)
  },
  ...
}

axiosを直接使わずにリクエストだけを行うモジュールを、$axiosと同じようなインターフェースで実装

API通信について

エンドポイントごとに関数化しファイルを分割する

// src/api/getUserData.js
import request from '~/utils/request'
 
function getUserData({ userId }) {
  const path = `/users/${userId}`
  return request.get(path)
}
 
export default getUserData

その他

今はやっていないけどStorybookを導入して便利デバッグツールとして使いたい

(カタログ目的じゃなく開発の効率化のために使う)

Component駆動開発的なイメージでテスト書いていきたい気持ちがある

さいごに

さいごに

back checkチームでの、ルール・やってることを紹介しました。
チームで共通認識を揃えて、ある程度ルールを作成することで、カオスな現場にはなりにくいかなとは思っています。

すぐ現場で使えるものも多いと思うのでいいながあればぜひ使ってみてください。

弊社でこうしているとかあればぜひリプをいただけると！

Made with Slides.com