スタートアップCTOがNuxtJSとTypeScriptのコーディングレギュレーションを紹介！一本進んだ堅牢開発を解説します😎

├── assets
│   ├── img 画像アセット
│   └── styles SCSSファイル
│      └── global.scss ノーマライズCSS的なグローバルに適用したいスタイル情報
│      └── common.scss 各ページで@importするSCSS、foundation以下のSCSSを全て@import
│      └── foundation
│         └── _fonts.scss フォントのインポート
│         └── _mixin.scss Mixin定義
│         └── _variables.scss 変数定義
├── components
│   ├── button　汎用的なボタンUI
│   ├── card　汎用的なカードUI
│   ├── list　汎用的なリストUI
│   ├── container　各ページで使用する汎用的なレイアウト
│   ├── datadisplay データに依存したUI
│   ├── layouts ヘッダーやフッターなどのレイアウトComponent
│   ├── modal モーダルウィンドウUI
│   └── navigation パンクズやページヘッダーなどのナビゲーションUI
├── definitions
│   └── index.ts 汎用的なTypescriptのtype定義
├── global.d.ts Typescript型情報のグローバル定義
├── jest.config.js
├── layouts
│   ├── default.vue 全ページ共通のレイアウト
│   ├── error.vue エラーページ共通のレイアウト
│   └── maintenance.vue メンテナンスページのレイアウト
├── middleware
│   └── authenticated.ts 認証必須なページの設置するミドルウェア
│   └── unAuthenticated.ts 非認証必須なページの設置するミドルウェア
├── mockdata
│   └── user.ts 開発時に使用するモックデータ
├── nuxt.config.js
├── package.json
├── pages 
├── plugins NuxtJSのプラグイン
├── services 本プロダクトでのみ使用する共通処理
├── static
├── store
├── stylelint.config.yml
├── test Jestのテストファイルを格納
├── tsconfig.json
├── utils 他のプロダクトでも共通利用可能な汎用的な共通処理（Emailのバリデーション等）

// /definitions/index.ts
export enum AntDesignResultStatus {
  'success' = 'success',
  'error' = 'error',
  'info' = 'info',
  'warning' = 'warning',
}

import { Context, Middleware } from '@nuxt/types'
import { getUserId, isAuthenticated } from '~/services/authService'

const myMiddleware: Middleware = async (context: Context) => {
  const { store } = context
  // ユーザーが認証されていない場合はログインページへリダイレクト
  if (!isAuthenticated) return redirect('/login')

  const promise: Promise<Function>[] = []

  // 認証状態かつ現在ログイン中のユーザー情報を未取得の場合は取得
  if (
    isAuthenticated &&
    (store.getters['user/getAbout'] === null ||
      store.getters['user/getAbout'] === undefined)
  )
    promise.push(
      store.dispatch('user/getUserById', {
        Id: await getUserId(),
      })
    )

  // その他認証状態で実行したい処理あればpromise.push

  // 認証状態で実行必須の処理を実行
  await Promise.all(promise)
}

export default myMiddleware

// /mockdata/user.ts
import { User, UserStatus } from '~/definitions';
import moment from 'moment';
import { v4 as uuid } from 'uuid';
export const user: User = {
  Id: uuid(),
  Status: UserStatus.InActive,
  LastLoggedInAt: moment().format(),
  CreatedAt: moment().format(),
  UpdatedAt: moment().format()
}

// /store/user.ts
import { Action, Module, Mutation, VuexModule } from 'vuex-module-decorators'
import { User, GetUserByIdVariables } from '~/definitions';
import * as mockData from '~/mockdata/user';
@Module({
  name: 'user',
  stateFactory: true,
  namespaced: true,
})
export default class UserModule extends VuexModule {
  user?: User | null = null

  get getUser() {
    return this.user
  }

  @Mutation
  setUser(user: User): void {
    this.user = user
  }

  @Action
  async getUserById(
    variables: GetUserByIdVariables
  ): Promise<void> {
    return await new Promise((resolve) => {
      setTimeout(() => {
        this.setUser(mockData.user)
        resolve()
      }, 400)
    })
  }
}

// Bad
let subPriceOfCategory = 0;
products.forEach((item)=>{
  if(item.category === 1) {
    subPriceOfCategory+ = item.price;
  }
});

// Good
import _ from 'lodash';
const products: number = _.chain(products)
                    .filter(item => item.category === 1)
                    .sumBy('price')
                    .value()

// VueファイルJS部分の実装例
<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'
import { Context } from '@nuxt/types'
import PageHeader from '~/components/navigation/PageHeader.vue'
import { productStore } from '~/store'
import { isAuthenticated, getUserId } from '~/services/authService'

@Component({
  components: {
    PageHeader
  },
  async asyncData(context: Context) {
    const { store, route } = context
    const query = { category: route.query.category }
    const promise: Promise<Function>[] = []
    if(await isAuthenticated()) promise.push(
      store.dispatch('userStore/addUserSearchHistory', {
        UserId: await getUserId(),
        Query: query
      }))
    promise.push(store.dispatch('productStore/listProduct', {
        Query: query,
        Limit: 30
      }))
    await Promise.all(promise)
  }
})
export default class Index extends Vue {
  head(){
    return {
      title: '商品一覧',
    }
  }

  get isLoading() {
    return productStore.getIsLoading
  }

  get totalCount() {
    return productStore.getTotalCount
  }

  get productList() {
    return productStore.getProductList
  }
}
</script>

// authService.ts
import { v4 as uuid } from 'uuid'
export const getUserId = async (): Promise<string> => {
  // TODO 認証トークンからuserId(sub)を取得
  return await new Promise((resolve) => {
    setTimeout(() => {
      resolve(uuid())
    }, 400)
  })
}

export const isAuthenticated = async (): Promise<boolean> => {
  // TODO 認証状態を取得
  return await new Promise((resolve) => {
    setTimeout(() => {
      resolve(true)
    }, 400)
  })
}

// Bad
.block .block__elem { color: #042; }
div.block__elem { color: #042; }

// Good
.block__elem { color: #042; }

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo "============================================================="
echo "================== 動作チェックプロセス開始 ================="
echo "=============================================================\n"

echo "1. npmパッケージの初期化開始 🍻🍻🍻"
rm -rf "$(dirname "$0")/../node_modules"
yarn install
echo "npmパッケージの初期化正常終了 ✅\n\n"

echo "2. ビルド試験開始 🚀🚀🚀"
rm -rf "$(dirname "$0")/../dist"
yarn build:dev
echo "✅ ビルド正常終了 ✅\n\n"

echo "3. lint開始 👩‍🔬👩‍🔬👩‍🔬"
yarn lint
echo "lint正常終了 ✅\n\n"