この記事はSupershipグループ Advent Calendar 2022の21日目の記事です。
はじめに
今年取り組んだフロントエンドに関しての内容になります。
WebpackからViteに移行
Viteに移行してビルドが速くなり快適になりました。
Viteのはアプリケーションのソースコード上で使う環境変数はVITE_というプレフィックスを付けてimport.meta.envから読み込むように修正が必要ですが
- 既存の環境変数名を全部修正する必要が出る
- 既存のソースコードの環境変数を参照してる箇所を
import.meta.env経由に修正する必要が出る - 将来的にVite以外のビルドツールに移行した時に
VITE_というプレフィックスを取るのに環境変数名を再度修正する必要が出る
ということもありimport.meta.envを使わない方法を取りました。
import { defineConfig } from 'vite';
export default defineConfig({
define: {
'process.env.API_URL': JSON.stringify(process.env.API_URL),
'process.env.API_TOKEN': JSON.stringify(process.env.API_TOKEN),
}
});
Apollo Clientからgraphql-requestに移行
GraphQLのクライアントとしてApollo Clientを使っていました。
以下の理由からgraphql-requestに移行しました。
-
Apollo Clientのキャッシュを使い込むぐらい使わなかった
-
サーバーがステータスコード200番以外を返した時のエラーハンドリングがonErrorでハンドルすることになるのが扱いずらかった
Sentry
エラー通知にSetnryを活用してまして、使ってみて分かったことです。
tracesSampleRate
tracesSampleRate はドキュメントのサンプルコード通り1.0に設定するのではなく、適切な値を設定するように注意したほうが良さそうです。
実際に tracesSampleRate を1.0にしてみたところ全部サンプリングするという意味になり、Sentryのクオーター上限を超えそうになりました。
ソースマップをSentryにアップロード
https://docs.sentry.io/platforms/javascript/sourcemaps/
ビルドした時のソースマップをSentryにアップロードすることで、JavaScriptのエラーが発生した時に箇所のソースコードがSentryで表示されるようになるので調査しやすくなります。
Auth Token
例えばデプロイ時にSentryのAPIを使ってなにかを行っていた場合にAuth Tokenを個人のアカウントで発行してしまうと、退職や異動などでアカウントを削除した場合に動かなくなってしまうということが起こりえます。
Internal Integrationを使うとorganization単位になり個人に依存しなくなります。
Corepack
Node.js v14.19.0からCorepackが標準バンドルされることになりました。
使うパッケージマネージャーを固定できます。
{
"packageManager": "yarn@1.22.19"
}
$ corepack enable
Reactの気になった話題
Add fetch Instrumentation to Dedupe Fetches
React側でfetchをパッチして、GETかHEADの時はレスポンスをキャッシュするという内容です。
否定的な意見もあるようです。
RFC: First class support for promises and async/await
RFCの段階なので導入されるかは未定ですが、Reactコンポーネントの中でuseというhookにPromiseを渡すと結果を取り出せるという内容です。
今まで他のライブラリにあったuseQueryなどを使わなくても非同期処理を扱いやすくする流れにみえますね。
来年やっていきたいこと
Zero-runtime CSS in JS
CSS in JSをビルド時に静的なCSSを吐き出してレンダリングを高速化するアプローチです。
Linariaやvanilla-extractなどのライブラリが出てきてるので検証してみたいです。
Yarn v3
Zero-installsで使ってるnpmパッケージのcacheファイルをgitリポジトリに含めるのはやりたくなかったのでアップデートしてなかったという経緯です。
いつまでもv1系を使い続けるのもというのがあります。
最後に
Supershipではプロダクト開発やサービス開発に関わる人を絶賛募集しております。
ご興味がある方は以下リンクよりご確認ください。
是非ともよろしくお願いします。