コンシューマ向けSPA開発から得られた知見
01月 30日

転職にあたって、

この度 SCOUTER に転職することになりました。これまで4年近く(結構長く)在籍させていただいたポノス株式会社でのお仕事をざっと共有させていただきます。

一般的な SPA 構成

結果的に2年ほどの開発・運用を経て最終的に停止判断がなされてしまいました。管理画面、並びにゲーム内のアプリ内ブラウザ等で Laravel を導入しています。

なめすた

使えなくなった vue-strap

パッケージ選定は非常に悩みます。とくに DatePicker で採用、上記の事象が発生して Babelを導入も laravel-mixを更新するも動作しません。メンテ終了となってしまったようで、一時しのぎとして vue2-datepicker を使うよう変更。めぼしいプラグインも見当たらないので、後に自作しています。

vue-strap deprecated

SPAにとり非同期通信は肝

フレームワークの類(Vue CLIやNuxt等)を一切使っておらず、webpackを一から構築しました。今となっては当然のことですが、非同期通信を利用したくまずは新しいES規格を使えるようにするためBabelを導入します。

yarn add babel-core -D
yarn add babel-plugin-transform-runtime -D
yarn add babel-polyfill -D
yarn add babel-preset-env -D
yarn add babel-preset-es2015 -D
yarn add babel-preset-stage-3 -D

以下の通り設定します。

{
  "presets": [
    "env",
    "stage-3"
  ],
  "plugins": [
    [
      "transform-runtime",
      {
        "polyfill": false,
        "regenerator": true
      }
    ]
  ]
}

最低限エンドポイントを叩く際は async/await 単発の場合は、これで充分かと思います。一方でガチャを扱うページでは複数のエンドポイントを叩く必要があり Promise.all 便利ってことに気付かされました。

ちなみに、ゲーム会社らしく (?) ディレクトリ構成はページ単位で行っています。

Atomic Design を採用していません。

components
+- app_notifications
+- browser_notifications
+- gacha_info
+- privacy_policy
+- legal
..

通信処理を各コンポーネントで行うことをせず、予め services ディレクトリに切り直すことをオススメします。細かく言うと以下のように services のインスタンスを作って通信処理専用メソッドを叩けばオケ👌

async fetch() {
    let apiService = new ApiService()
    const contractTagsData = await apiService.fetch()
}

エンドポイントのレスポンスを確認するUnitテストで、この分離が後々楽にさせてくれます😉

あわせてよみたい..