
[@money166](https://twitter.com/money166)  
[@tatsuo48](https://github.com/tatsuo48)  
と一緒に今年も YO!HEYHEYHEY! として [ISUCON11](https://isucon.net/archives/55706291.html)に参加してきました。

今年も非常に楽しく参加できました。  
運営の皆さま、ありがとうございました！

## 結果
予選の結果は参考スコアで 47258 で全参加チーム598チーム中80位でした。  
[ISUCON11 オンライン予選 全てのチームのスコア（参考値） : ISUCON公式Blog](https://isucon.net/archives/56021246.html)

17:00以降の固定ダッシュボードで25位まで上昇していたので、これは！？と思ったのですが、壁は厚かったです。

<img src="/images/posts/isucon11/dashboard-last-score.jpg" alt="ダッシュボードでの最終スコア" width="1798" height="330" />

5年間毎年参加して、ずっと初期実装のスコアから大きく点数を上げられなかったので、6年目の今年は非常に大きな進歩があって嬉しかったです！

## テーマ
今年のアプリケーションのテーマは自分が持っている椅子の状態を監視するWebサービスでした。  
登録している椅子が定期的にサーバーに自身の状態を送信して、ユーザーはその状態をWebサービスで確認することで椅子の状態を管理できます。

いわゆる IoT です。

サービスの説明からも予想できる通り、今年は常に大量のデーターがサーバーに送信されDBに書き込まれ続けるので、DBのCPU負荷が常に高い状態でした。（ベンチ回したら最初からCPU負荷が150%とか出ていました）  
このDB負荷をどう処理するかが問題のキーとなっている印象でした。

## 振り返り
### 良かった点
- 今年はZoomで繋いでオンラインで作業をしており、画面共有などでチームでの作業がやりやすかった
- ベンチ回して効果が無い場合は前の状態に戻す徹底できたので、アプリケーションが動かなくなる問題が発生しなかった
- 基本は2人以上のペアプロを意識して進めたので、それによって気付ける事が多かった
	- ボトルネックの原因とか
- しっかりマニュアルを読み込んでスコア計算の仕様を意識して対応方針が決められた
- Miroでタスク管理して誰が何をやっているか把握しながら進められた

### 反省点
- Go言語をあまり勉強しておらずアプリケーションの修正に時間がかかった
- 勉強不足で New Relic での DB の監視を導入できなかった
- 全体的にスコア上がってから次の一手が思いつかず頭打ちになった

## チームでやったこと
- インフラ環境の初期構築をしてサーバーを立ち上げ
- 当日マニュアルやアプリケーションマニュアルを熟読
- アプリケーションを実際に動かして機能一覧を把握
- 競技用サーバーへのデプロイ環境の整備
- アプリケーションに New Relic のエージェントを追加
- DBのスキーマ情報を整理
- New Relic のダッシュボードでHTTPリクエストを確認してボトルネックを調査して対応方針を検討
- **==== ↓ ここからボトルネック対応 ====**
- サーバー構成を サーバー1:DB, サーバー2: アプリケーション に変更: 1000 => 8000
- isu テーブルで画像カラムをクエリしない修正を追加: スコア変わらず
- 椅子の状態のデータ送信をサーバー3台に分散: スコア変わらず
- 椅子の状態のDBへの書き込みをバルクインサートに変更: 上手く実装できず
- サーバー構成を サーバー1: DB, サーバー2: アプリケーション, サーバー3: 椅子状態のデータ受信 に変更: スコア変わらず
- 対応方針を再検討
- isu_condition の jia_isu_uuid にインデックスを追加: 8000 => 25000
- isu_condition の timestamp にインデックスを追加: 25000 => 28000
- データを捨てる割合を 90% => 75% に変更: 28000 => 33000
- 画像をクライアントにキャッシュさせる: 対応が上手くできなかった
- Nginx や アプリケーション のデバッグログを停止: 33000 => 35000 （影響あった気がする）
- /api/trend のリクエストもサーバー3に流すように変更: 35000 => 47000

### アプリケーションを実際に動かして機能一覧を把握
今回は例年と比べてアプリケーション規模が小さい？印象だったので、全体の把握がスムーズにできた。  
オープニングでの事前のサービス紹介で概要が掴めたのも大きかった。

### New Relic の Go エージェントの追加
次のドキュメントを参考に echo のミドルウェアとしてエージェントを追加した
- [Go向けNew Relicのインストール \| New Relic Documentation](https://docs.newrelic.com/jp/docs/agents/go-agent/installation/install-new-relic-go/)
- [Goエージェントの互換性と要件 \| New Relic Documentation](https://docs.newrelic.com/jp/docs/agents/go-agent/get-started/go-agent-compatibility-requirements/)

### HTTPリクエストを確認してボトルネックを調査して対応方針を検討
リクエストの大半は `POST /api/condition/:jia_isu_uuid` が占めていた。  
これは椅子の状態を受け取ってDBに書き込むAPIエンドポイントなので、当初の想定通り。

`GET /api/trend` が最大で60sec、平均しても20secのレスポンス時間となっていた。

上記2つのAPIエンドポイントに絞って、実装の詳細を確認しながらボトルネックの調査と対応方針を決めた。

### サーバー構成を サーバー1:DB, サーバー2: アプリケーション に変更: 1000 => 8000
DBのCPU負荷が150~180%とかなり高かったので、サーバー1をDB専用にして、リクエストをサーバー２で捌くように変更した。

7000点ほどスコアが上昇

### isu テーブルで画像カラムをクエリしない
isu_conditions テーブルには画像がバイナリで含まれていた。  
/api/trend では `SELECT * FROM isu` と未使用にも関わらず画像カラムも取得していたので、これで読み込みに時間がかかってレスポンス時間に影響していると予測して、必要なカラムだけをクエリするようにしたが、大きな変化は無かった。

```go
- "SELECT * FROM `isu` WHERE `character` = ?",
+ "SELECT `id`, `jia_isu_uuid` FROM `isu` WHERE `character` = ?",
```

### 椅子の状態のデータ送信をサーバー3台に分散
椅子状態のデータ送信が大量にリクエストされているので、これにより他のリクエストが待機状態で捌かれていないのでは？と思い3台にリクエストを分散してみた。  
あまり効果は無かった。

```go
- postIsuConditionTargetBaseURL string // JIAへのactivate時に登録する，ISUがconditionを送る先のURL
+ postIsuConditionTargetBaseURLs []string // JIAへのactivate時に登録する，ISUがconditionを送る先のURL

=======

- postIsuConditionTargetBaseURL = os.Getenv("POST_ISUCONDITION_TARGET_BASE_URL")
- if postIsuConditionTargetBaseURL == "" {
-	e.Logger.Fatalf("missing: POST_ISUCONDITION_TARGET_BASE_URL")
	return
}

+ postIsuConditionTargetBaseURLs = strings.Split(os.Getenv("POST_ISUCONDITION_TARGET_BASE_URLS"), ",")
+ if postIsuConditionTargetBaseURLs == nil {
+	e.Logger.Fatalf("missing: POST_ISUCONDITION_TARGET_BASE_URLS")
		return
}
```

### サーバー構成を変更
引き続き椅子状態のHTTPリクエストにより /api/trend などの他のリクエストが待ち状態になっていると推測して、POST /api/condition/:jia_isu_uuid へのリクエストだけを全て別サーバーで処理するように変更した。

スコアへの影響は無かったが、CPU負荷は分散された。

- サーバー1: DB
- サーバー2: アプリケーション
- サーバー3: 椅子状態のデータ受信とDBへの書き込み

### 対応方針を再検討
最初に目星をつけた対応を色々と試したが結果が出なかったので、改めて対応方針を検討した。

ベンチマークをログを見ていると「タイムアウトが多く発生しているため、サービスの評判が下がりこれ以上ユーザーは増えません」という怪しげなログを発見。  
ベンチマーク実行後の `user` テーブルを見てみると、ユーザー数が13人しか登録されていなかった。

改めて当日マニュアルのスコア計算の仕様を読み直すと  
> スコアはユーザーがISUのコンディションやスコアを確認すると加点されます。

との事なので、

新規ユーザーは最初にTOPページにアクセスする  
=> TOPページのトレンド情報がリクエストされる  
=> リクエストがタイムアウトしてユーザーが離脱  
=> ユーザー登録されずにユーザーが増えない  
=> スコアが伸びない  

タイムアウトが大量に発生  
=> ユーザーが加点となるリクエストができない  
=> スコアが増えない  

という2つのシナリオを仮定して、スコアを伸ばすためにはユーザーを増やす必要がありそうと判断

そのためには、ログにも出ているタイムアウトを改善する必要があり、タイムアウトとなっているリクエストは明らかに `/api/trend` だったので、このエンドポイントを改善する方針でボトルネック調査を継続

### isu_condition の jia_isu_uuid にインデックスを追加: スコア改善: 8000 => 25000
改めて `/api/trend` のボトルネックを考えていたら `isu_condition` への書き込みが常に発生しているので、テーブルロックが発生して `isu_condition` の読み込みが待ち状態になっている影響で時間がかかっているのでは？と推測

実際に調べてみたら
> InnoDBは行ロックだが、ユニーク制約 or インデックスが張られていないカラムで検索した場合はテーブルロックになってしまう。  

[InnoDBで行ロック/テーブルロックになる条件を調べた \#mysqlcasual Advent Calendar 2013 \- あおうさ＠日記](https://bluerabbit.hatenablog.com/entry/2013/12/07/075759)

という情報を発見  

`/api/trend` は以下のクエリでデータを読み込んでおり、テーブルロックによるりデータの読み込みが待ち状態になっている可能性がありそうだったので、検索カラムにインデックスを追加した。

```sql
SELECT * FROM `isu_condition` WHERE `jia_isu_uuid` = ? ORDER BY timestamp DESC
```

```sql
+ CREATE INDEX jia_isucon_uuid_index ON isu_condition(jia_isu_uuid);
```

この修正 `/api/trend` のレスポンス時間が改善されて、スコアが大幅に上昇した。

### isu_condition の timestamp にインデックスを追加: 25000 => 28000
同様の理由で `isu_condition` の `timestamp` にもインデックを追加して、スコアが上昇

```sql
+ CREATE INDEX jia_isucon_uuid_timestamp_index ON isu_condition(jia_isu_uuid, timestamp);
```

### データを捨てる割合を 90% => 75% に変更: 28000 => 33000
初期実装では受信した椅子の状態の90%を捨てる実装になっていた。

```go
// TODO: 一定割合リクエストを落としてしのぐようにしたが、本来は全量さばけるようにすべき
dropProbability := 0.9
if rand.Float64() <= dropProbability {
	c.Logger().Warnf("drop post isu condition request")
	return c.NoContent(http.StatusAccepted)
}
```

> ISU のコンディション確認（GET /api/condition/:jia_isu_uuid）で、ユーザが前回確認したコンディションより新しいコンディションを確認した際に加点

スコア計算では、ユーザーが新しい状態を確認した時に加点の対象となるため、椅子の状態を捨てていると加点の機会を大きく損なってしまうので、ここの割合を75%に減少させる調整を実施して、スコアが上昇した。

```go
- dropProbability := 0.9
+ dropProbability := 0.75
```

### 画像をクライアントにキャッシュさせる
ここまでの改善で新たに椅子の画像を取得する `GET /api/isu/:jia_isu_uuid/icon` が新たなボトルネックのエンドポイントとして浮上してきた。

ここは明らかにDBにバイナリで画像を保存している事による影響だと考えて、クライアント側に画像をキャッシュさせる対応を試みたが、上手く対応できなかった。

### ログの停止: 33000 => 35000
競技も終盤になっていたので、Nignx や アプリケーションのデバッグログ出力を停止した。  
ちゃんと覚えてないが、スコアが僅かに改善した気がする。

### トレンドのリクエストもサーバー3に流すように変更: 35000 => 47000
全体のCPU負荷を見ていて、サーバー2: アプリケーション のCPU負荷が高く、 サーバー3: 椅子の状態受信 のCPU負荷が低かったので、負荷を分散するために思い切って `/api/trend` のリクエストをサーバー3へリダイレクトする対応を追加

これが見事に成功してCPU負荷が分散されて、スコアが大幅に上昇した。

### 競技終了
17:00で更新が停止された状態でのダッシュボード上での最終スコア  

<img src="/images/posts/isucon11/dashboard-last-score.jpg" alt="ダッシュボードでの最終スコア" width="1798" height="330" />


ISUCON11予選に参加して自己ベストを更新しました


セキュリティ診断で遊ぶために、4つのローカルプロキシツールを比較検討してみました。

## やりたいこと
特定サービスのJSONのAPIレスポンスの一部を改ざんする

※ 攻撃対象のサービスは自身が開発しているサービスの開発環境に対して実施をしています。

## 比較するツール
ツールは全て無料の範囲で比較しています。お試し期間で有料版が使える場合は、お試し期間の有料版の機能でツールを使用した感想を書いています。

比較方法は上に挙げた「APIレスポンスの改ざん」を試した時の肌感で評価しているので、個人の趣向が非常に強く出ています。

- [Fiddler Everywhere](https://www.telerik.com/fiddler/fiddler-everywhere)
- [Burp Suite](https://portswigger.net/burp/communitydownload)
- [Charles](https://www.charlesproxy.com/)
- [mitmproxy](https://mitmproxy.org/)

## Fiddler（Fiddler Everywhere)
元々 Fiddler は Windows のみ対応のツールだったが、2020年頃に Fiddler Everywhere が MacOS, Linux にも対応したツールとして新たにリリースされた。2ヶ月ほどお試し期間としてPRO版（有料）が利用可能だった。

PRO版の料金は月額課金で $12/月 （年契約だと 10$/月）

### 良い点

- UIが見やすい
    - レスポンスのタイプが一目で確認しやすい
    - レスポンスの書き換えのルールなどが直感的に登録できる（PRO版）
- リクエストの一覧をフィルタリングができる
    - キーワード と Headerの値 で絞り込みが可能
- SSL証明書のインストールやプロキシの設定の手間がない
    - 気づいたら使えるようになってた

### 悪い点

- 無料版だとルールで設定できるアクションに制限がある
    - レスポンスの書き換えも無料版だと出来ない（PRO版なら可能）
    - 有料版でルールのアクションが全て開放されいてる状態だと使いやすかった
- サインインが必須
    - Google認証ができるのでアカウント発行の手間はなし

## Burp Suite

有料版ならセキュリティ診断ツールとして色々な機能が使えそうだった。  
SQLインジェクションの診断とかもできそう？だった。（試してないので正確なことは分からない）

### 良い点

- 自動でレスポンスの書き換えができる
    - 部分文字列一致での置換ができる
- レスポンスを書き換えた場合にオリジナルのレスポンスボディと変更後のレスポンスボディの両方が確認できる
- 日本語の情報が多い
- ステータスコードやレスポンスタイプなどによる柔軟なフィルタリングができる

### 悪い点

- UIが見づらい
- 慣れや好みの問題がもありそう
- 自分がJavaのGUI実装がデザインが好きでないので、その影響が大きい
- 無料版だとキーワードのフィルタリングができない
    - 有料版だと可能
- 有料版が $399/年 とかなり高い
    - プライベートやちょっとした開発での利用用途としては辛い
- 自分でPCのネットワーク設定でプロキシ設定をやる必要がある
- SSL証明書のインストールが少し手間
    - safariで特定のURLを開いて証明書をダウンロード
    - 証明書をキーチェーンに追加
    - 証明書を常に信頼するように変更

## Charles

無料版は30分に1度の頻度で強制終了する。

### 良かった点

- UIが見やすい
    - リクエストがドメインでグルーピングされるので、ドメイン単位でリクエストを見つけやすい
- レスポンスの書き替えルールが簡単に登録できる
- 料金が安い
    - $50/license
    - ライセンス購入時のメジャーバージョンしかアップデートができない
    - 新しいメジャーバージョンのライセンス購入は定価の40%OFFで購入可能

### 悪かった点

- フィルタリング機能が弱い
    - キーワードでしか絞り込みができない
- 設定画面の文字入力で日本語入力中に文字化けが発生して入力中の文字が見えない
    - 確定して入力は完了するので、日本語の利用は可能

## mimproxy

OSSのローカルプロキシツールで、他のツールと比較して CLI で使えるのが大きな特徴

Homeblew でインストールが可能

```json
$ brew install mitmproxy
```

ブラウザで Web Interface を使う場合は、次のコマンドを実行して [http://localhost:8081](http://localhost:8081) にアクセスする。

```sh
$ mitmweb
```

HTTPSの通信をキャプチャする場合は `~/.mitmproxy/mitmproxy-ca-cert.cer` をキーチェーンの証明書に登録して信頼する。

### 良かった点
- 無料
- Pythonでスクリプトを書けるので拡張がしやすい

### 悪かった点
- メインはCUIツールのなので覚える事が多く学習コストが高い
    - WebインターフェースもあるがUIがシンプルな作りなので、操作性は高くない
    - 覚えてしまえばCUIで操作が完結するので合う人には凄い合いそうなイメージ
- レスポンスの書き換えも少しだけ書き方にクセがある
    - `/~s/xxxx/yyyy` みたいな形式で modify_body に追加する
    - `~s` は mitmproxy の [filter expression](https://docs.mitmproxy.org/stable/concepts-filters/) でレスポンスのみを対象とするフィルター


## 結論

|ツール|感想|
|--|--|
|Fiddler Everywhere|UIは一番好き。年1万円の出費が許容できるなら検討する価値はありそう|
|Burp Suite|料金が高すぎるので本当に必要な場面が出てこない限りは使わない|
|Charles|一番バランスが良かった。<br>拡張性もありそうなので、お手軽にプロキシツールを使うなら、コレが一番良さそう。<br>我慢すれば無料のままでも使える|
|mitmproxy|使い方を覚えれば簡単なことは一通りできるので、完全無料でツールを探すならコレを使う。<br>拡張性が高いのは魅力的|



4つのローカルプロキシツールを簡単に触って比較してみました。

ローカルプロキシツールの比較

複数行のテキストを `...` で省略する便利なCSSプロパティとして [-webkit-line-clamp](https://developer.mozilla.org/ja/docs/Web/CSS/-webkit-line-clamp) があります。

このCSSプロパティは使用方法に制限があり`display`プロパティに `-webkit-box` or `-webkit-inline-box` を設定して、かつ `-webkit-box-orient`プロパティに `vertical` を設定する必要があります。

```css
/* 大抵はこんな感じで指定する */
{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}
```

ここで指定する `-webkit-box` の正体は `flex` プロパティのベンダープレフィックスです。  
flexが草案時代に WebKit で `flex` を利用するときに使われていたプロパティです。

情報は[WHATWGのページ](https://compat.spec.whatwg.org/#css-keyword-mappings)を参考にしました。


複数行テキストの省略時に使用される-webkit-boxについて簡単に調べました。

複数行テキストの省略と-webkit-boxについて


新センのスタートアップ企業が開発している物理的なキーの配列を自由に変更できる分割キーボード [DUMANG DK6 Ergo](http://www.beyondq.com/%E8%B6%85%E9%85%B7%E7%A7%91%E6%8A%80-%E6%AF%92%E8%9F%92%E9%94%AE%E7%9B%98-%E6%A8%A1%E5%9D%97%E5%8C%96%E9%94%AE%E7%9B%98-dk6-dumang.html) を購入しました。

この分割キーボードを MacOS 上で使う上でいくつか問題があったので、自分が行ったセットアップの手順をまとめています。  
※ この記事は 2021年01月23日 時点で発生した問題について記載しています。対象のキーボードは開発中のためこの記事をお読みになるタイミングでは状況が改善されている可能性があります。

## キーコンビネーション

### 問題

DK6 Ergo は MacOS で動作させると左右のキーボードのキーの組み合わせの入力ができません。Emacs では `Ctrl+N` で下方向へカーソル移動しますが、これは同じ右側のキーボードにあるキーを同時に押す必要があり `左のCtrl + 右のN` という形でキーを押しても反応してくれません。

### 解決

[Karabiner-Elements](https://karabiner-elements.pqrs.org/) をインストールします。特別な設定は不要でアプリケーションを起動するだけで、左右キーボードのキーコンビネーションが動作します。


MacOS で DK6 Ergo をセットアップする


この技術ブログはNetflifyでホスティングをしていますが、前からNetlifyは無料枠だとCDNのエッジサーバーが日本国内にはなくレイテンシーが発生して、遅いという話が気になっていました。

- [Netlifyが日本からだと遅い \- id:anatooのブログ](https://blog.anatoo.jp/2020-08-03)
- [NetlifyからVercelへの移行を検討した話](https://www.suzu6.net/posts/268-blog-server/) 

## 速度検証
同じブログをVercelにもホスティングして、参考記事と同じようにNetlifyとVercelで1.3MBの画像の応答速度を比較してみます。  
※ 検証時間は水曜日の12:00頃に検証しています。

Netlifyは、応答速度: 629ms/req ,転送速度: 2.07MB/sec という結果でした。正直、この数字だけを見ても早いのか遅いのかよく分かっていません。

```
# Netlifyの応答速度（1.3MBの画像をリクエスト）
$ ab -n 10 -c 1 -k https://t-yng.jp/images/posts/nextjs-perf-improvement/bundle-analyzer-result.png

This is ApacheBench, Version 2.3 <$Revision: 1843412 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking t-yng.jp (be patient).....done


Server Software:        Netlify
Server Hostname:        t-yng.jp
Server Port:            443
SSL/TLS Protocol:       TLSv1.2,ECDHE-ECDSA-AES256-GCM-SHA384,256,256
Server Temp Key:        ECDH X25519 253 bits
TLS Server Name:        t-yng.jp

Document Path:          /images/posts/nextjs-perf-improvement/bundle-analyzer-result.png
Document Length:        1337519 bytes

Concurrency Level:      1
Time taken for tests:   6.294 seconds
Complete requests:      10
Failed requests:        0
Keep-Alive requests:    10
Total transferred:      13378950 bytes
HTML transferred:       13375190 bytes
Requests per second:    1.59 [#/sec] (mean)
Time per request:       629.442 [ms] (mean)
Time per request:       629.442 [ms] (mean, across all concurrent requests)
Transfer rate:          2075.71 [Kbytes/sec] received

（省略）
```

Vercelの場合は、応答速度: 172ms/req, 転送速度: 7.5MB/sec となり、Netlifyの約4倍も高速という結果になりました。  
ここまで素直に違いが出ると思わなかったので、驚きました。

```
$ ab -n 10 -c 1 -k https://blog-eta-beryl.vercel.app/images/posts/nextjs-perf-improvement/bundle-analyzer-result.png

This is ApacheBench, Version 2.3 <$Revision: 1843412 $>
Copyright 1996 Adam Twiss, Zeus Technology Ltd, http://www.zeustech.net/
Licensed to The Apache Software Foundation, http://www.apache.org/

Benchmarking blog-eta-beryl.vercel.app (be patient).....done


Server Software:        Vercel
Server Hostname:        blog-eta-beryl.vercel.app
Server Port:            443
SSL/TLS Protocol:       TLSv1.2,ECDHE-RSA-AES256-GCM-SHA384,2048,256
Server Temp Key:        ECDH X25519 253 bits
TLS Server Name:        blog-eta-beryl.vercel.app

Document Path:          /images/posts/nextjs-perf-improvement/bundle-analyzer-result.png
Document Length:        1337519 bytes

Concurrency Level:      1
Time taken for tests:   1.721 seconds
Complete requests:      10
Failed requests:        0
Keep-Alive requests:    10
Total transferred:      13380710 bytes
HTML transferred:       13375190 bytes
Requests per second:    5.81 [#/sec] (mean)
Time per request:       172.050 [ms] (mean)
Time per request:       172.050 [ms] (mean, across all concurrent requests)
Transfer rate:          7594.93 [Kbytes/sec] received

（省略）
 ```

## なぜNetlifyは遅いのか？
最初にも書いたとおり、CDNのエッジサーバーが日本国内になくシンガポールなどの国外のサーバーを経由して配信されるため、その分だけ通信のレイテンシーが発生しているのが原因です。

Netlifyにホスティングしているドメインに対して通信経路を表示してみたら、シンガポールっぽいサーバーにアクセスをしていました。

```zsh
$ traceroute t-yng.jp

traceroute: Warning: t-yng.jp has multiple addresses; using 104.248.158.121
traceroute to t-yng.jp (104.248.158.121), 64 hops max, 52 byte packets
 1  192.168.0.1 (192.168.0.1)  2.072 ms  1.227 ms  1.110 ms
 2  192.168.24.1 (192.168.24.1)  1.391 ms  1.580 ms  1.406 ms
 3  153.153.253.241 (153.153.253.241)  6.315 ms  7.216 ms  7.145 ms
 4  153.153.253.133 (153.153.253.133)  5.132 ms  4.885 ms  5.025 ms
 5  118.23.46.65 (118.23.46.65)  7.509 ms  12.750 ms  8.127 ms
 6  180.8.119.137 (180.8.119.137)  8.569 ms  6.889 ms  5.825 ms
 7  153.149.219.49 (153.149.219.49)  14.854 ms  15.650 ms  20.806 ms
 8  153.149.219.146 (153.149.219.146)  22.481 ms  21.862 ms  27.243 ms
 9  ae-12.r02.osakjp02.jp.bb.gin.ntt.net (61.200.80.9)  15.422 ms  18.149 ms  23.293 ms
10  ae-3.r25.osakjp02.jp.bb.gin.ntt.net (129.250.2.129)  17.947 ms
    ae-2.r25.osakjp02.jp.bb.gin.ntt.net (129.250.7.32)  18.441 ms  19.506 ms
11  ae-9.r22.sngpsi07.sg.bb.gin.ntt.net (129.250.2.66)  84.407 ms  90.269 ms  88.346 ms
12  ae-0.a00.sngpsi07.sg.bb.gin.ntt.net (129.250.2.74)  85.529 ms  87.029 ms
    ae-0.a01.sngpsi07.sg.bb.gin.ntt.net (129.250.2.122)  91.914 ms
13  ae-0.digital-ocean.sngpsi07.sg.bb.gin.ntt.net (116.51.17.166)  86.345 ms
    ae-1.digital-ocean.sngpsi07.sg.bb.gin.ntt.net (116.51.17.194)  86.923 ms  88.386 ms
14  138.197.245.9 (138.197.245.9)  90.475 ms * *
```

## Vercelへの移行
### Netlifyとのインテグレーションを解除
最初にNetlifyへの自動デプロイを停止するため、Githubリポジトリのインテグレーションを削除しました。  
自分のGithubリポジトリに移動して、Settings > Integrations > Netlify を選択して削除を実行する。

### Vercelへデプロイ
Next.jsで実装しているので[Next.jsの公式ドキュメント](https://nextjs.org/docs/deployment#vercel-recommended)を参考にして進める。  
基本的にはVercelのページ上でポチポチしてGithubリポジトリをVercelのプロジェクトとしてインポートするだけです。

### Netlifyのカスタムドメインの登録解除
独自ドメインの向き先を Netlify => Vercel に変更する。  
Netlifyではカスタムドメインを設定する為に、ドメイン管理会社側のネームサーバーを変更する必要があった。変更していたネームサーバーをデフォルトのドメイン管理会社のネームサーバーに戻す作業を実施する。  

### Vercelにカスタムドメインを登録
その後、Vercelでプロジェクトを選択して Settings > Domains からカスタムドメインを追加する。  
カスタムドメインの追加後にDNSレコードの設定情報が表示されるので、ドメイン管理会社側にDNSレコードを登録する。

<img src="/images/posts/netlify-to-vercel/vercel-domains-settings.png" alt="カスタムドメインの設定画像" width="1540" height="832" />

以上で Netlify => Vercel の移行は完了です。

ページ読み込み時の画像表示を含めたページ読み込みの速度が体感として非常に早くなりました！

**Netlify でのページ読み込み**

<img src="/images/posts/netlify-to-vercel/netlify.gif" alt="Netlifyでのページ読み込み" width="1425" height="730" />

**Vercel でのページ読み込み**

<img src="/images/posts/netlify-to-vercel/vercel.gif" alt="Vercelでのページ読み込み" width="1425" height="730" />

技術ブログのホスティングをNetlifyからVercelに移行しました

NetlifyからVercelに移行した


先日、TypeScriptのテンプレートリテラル型を使う機会がありました。

## モチベーション
フロントエンドで i18n を導入するために [i18next/i18next](https://github.com/i18next/i18next) を利用して文字列の辞書対応を進めていました。

辞書ファイルを入れ子のオブジェクトとして定義ができますが、キーを指定する場合は `common.badge.required` と指定する必要があります。TypeScripeで実装をするときの問題として、キーの文字列に対して型チェックが有効にならないため、タイポをしても気づかない問題があります。

```typescript
import { t } from 'i18next';

const translation = {
    common: {
        badge: {
            required: '必須',
            optional: '任意'
        }
    }
}

export const resources = {
    ja: {
        translation: translation,
    },
} as const;

i18n.init({
    lng: 'ja',
    resources: resources,
})

// badge => bage とタイポしているが実行時まで気づけない
console.log(t('common.bage.required'));
```

## テンプレートリテラル型で型定義
この問題はテンプレートリテラル型を活用してオブジェクトからキーを `.` で繋いだリテラル型を生成することで解消することができます。

`FlattenKeyOf` のユーティリティ型は型引数としてオブジェクトの型を受け取り、Mapped Types を利用してキーの一覧を取得します。取得したキーに対応する値の型を Conditional Types で判定しオブジェクト型である場合は、キーを `.` で先頭に結合して、対応する値のオブジェクトを `FlattenKeyOf` の型引数に渡して再帰的に呼び出すことで残りのキーを文字列として結合します。値がオブジェクトでない場合はキーをリテラル型として返します。  

`string & K` と書いている部分は `K` が `string | number | symbol` 型として扱われますが、テンプレートリテラル型が受け付ける型はプリミティブ型となっているため、型のミスマッチが発生してエラーが発生するので、Intersection Types を利用して `string` 型であれば `K` を返し違う場合は `never` を返すようにすることで型のエラーを回避しています。

```typescript
// const translation = { link: { top: 'トップページ' }}
// type keys = FlattenKeyOf<typeof translation> = 'link.top'
// FlattenKeyOf<{link: { top: 'トップページへ' }}> = {
//     ['link']: `link.top` <= `link.${FlattenKeyOf<{top: 'トップページへ'}}`
// }['link']                               ^
//                                         |__ 'top' = FlattenKeyOf<{top: 'トップページへ'}> = { ['top']: 'top' }['top']
type FlattenKeyOf<T extends Record<string, unknown>> = {
    [K in keyof T]: T[K] extends Record<string, unknown> ? `${string & K}.${FlattenKeyOf<T[K]>}` : string & K
}[keyof T]

// common.badge.required | common.badge.optional
type ResourceKeys = FlattenKeyOf<typeof messages>;

// 引数のキー文字列が辞書ファイルのキー文字列のユニオン型に限定されるため、型チェックでエラーとなる。
console.log(t<string, ResouceKeys>('common.bage.required'))
```

TypeScriptのテンプレートリテラル型の利用例を紹介します。

TypeScriptのテンプレートリテラル型の利用例


iOS端末ではフォームの入力要素のフォントサイズが16px未満だと、入力要素にフォーカスした時に自動で拡大する仕様があります。  
自動拡大が発生すると、ユーザーに対して拡大された状態を戻す操作を強いてしまうため、ユーザービリティを考慮するとできる限り避けたいです。

## 対応策
### フォントサイズを16px以上にする
入力要素のフォントサイズを 16px 以上にすることで、ブラウザが自動拡大するのを防ぐことができます。  

```css
input, textarea, select {
  font-size: 16px;
}
```

### viewport を設定する
デザインを考えると入力要素のフォントサイズを 16px 未満にしたい状況は往々にして存在します。  
また、入力要素のフォントサイズを `rem` などの相対値で指定していた場合に基準値を変更して予期せずフォントサイズが 16px 未満になる危険性もあるため、フォントサイズを 16px 以上に設定するのは良い解決策とは思えません。

そこで、別のアプローチとして `viewport` の `maximum-scale=1` を設定する方法があります。  
`maximum-scale` の初期値は `1.6` に設定されているため、この値を `1.0` に変更することで、ブラウザの自動拡大が発生しても最大倍率が1倍となるため、拡大表示を防ぐことができます。

```html
<meta name="viewport" content="initial-scale=1.0, width=device-width, maximum-scale=1.0" />
```

## どちらを使うべきか？
フォントサイズを 16px 以上に設定する対応は暗黙的な仕様となり得るので避けたいです。  
また、個人的に入力要素のフォントサイズを 16px にするのは、サイズ的に大きいと感じるのとデザインに制約が発生するので、基本は viewport を設定する方針がベストの対応かなと思います。


iOS端末でフォームの入力要素にフォーカスした時に発生する自動拡大への対応策をまとめています。

iOS端末でのフォームの拡大表示に対応する


tsconfig.json には [skipLibCheck](https://www.typescriptlang.org/ja/tsconfig#skipLibCheck) という設定オプションがあります。  
このオプションの挙動やどんな時に設定するかについてまとめました。

## skipLibCheckの挙動
このオプションのデフォルト値は false で true を設定することで `*.d.ts` ファイルに対する型チェックをスキップすることができます。

次のようなサーバーのコードを考えてみます。

```typescript
import express from "express";

const app = express();

app.post("/uses/sign_in", (req: express.Request, res: express.Response) => {
    if (req.tokens.includes('abc')) {
        res.sendStatus(200)
    } else {
        res.sendStatus(403);
    }
});

app.listen(3000, () => {
    console.log("Listening on port 3000");
});
```

tsconfig.json では `skipLibCheck` は定義しておらず、デフォルトの false が設定されている状態です。

```json
{
    "compilerOptions": {
        "esModuleInterop": true,
        "typeRoots": [
            "node_modules/@types",
            "types"
        ]
    }
}
```

`req.tokens` は次のような型定義ファイルを作成して、 `express.Request` の型定義を拡張して新たにプロパティを定義しています。この時、 `tokens: Array` とジェネリクスを指定すべき箇所を誤って指定しているため、型定義エラーが発生しています。

```typescript
// types/express/index.d.ts
/// <reference types="express" />

// @see: https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/method-override/index.d.ts
declare namespace Express {
    export interface Request {
        // Interface Array<T>
        // Generic type 'Array<T>' requires 1 type argument(s).ts(2314)
        tokens: Array;
    }
}
```

この状態で、 tsconfig.json にて `skipLibCheck: true` を設定します。

```json
{
    "compilerOptions": {
        "skipLibCheck": true,
        // (省略)
    }
}
```

`*.d.ts` ファイルに対する型チェックがスキップされるのでエラーが消え、正しくない型定義ファイルが存在してもコンパイルエラーが出なくなってしまいました。

```typescript
declare namespace Express {
    export interface Request {
        tokens: Array;
    }
}
```

この状態では `req.tokens` は `any` として解釈されます。

```typescript
// （省略）
app.post("/uses/sign_in", (req: express.Request, res: express.Response) => {
    // (property) Express.Request.tokens: any
    if (req.tokens.includes('abc')) {
        res.sendStatus(200)
    } else {
        res.sendStatus(403);
    }
});
```

## skipLibCheckのメリット
挙動を見る限りでは `skipLibCheck: true` を設定することで、型チェックの精度が下がるデメリットがありましたが `skipLibCheck: true` を設定するメリットは何なのでしょうか？

アプリケーションが中規模、大規模になり依存するパッケージが増えた時に、それに比例して型定義ファイルが増えていきます。 `tsc` のデフォルトの挙動では、TypeScriptをコンパイルするときに `@types/express` などのライブラリの `*.d.ts` に対しても型チェックを実施するため、コンパイル時間が増加します。 `skipLibCheck: true` を設定することで、型チェックの精度を犠牲にする代わりにコンパイル時間を削減できます。

```bash
# skipLibkCheck: false
$ yarn tsc --extendedDiagnostics -p ./
Files:                          88
Check time:                  1.47s
Total time:                  2.51s
✨  Done in 2.85s.

# skipLibCheck: true
$ yarn tsc --extendedDiagnostics -p ./
Files:                         88
Check time:                 0.18s
Total time:                 1.17s
✨  Done in 1.49s.
```

他のシナリオとしては、複数のパッケージが、それぞれが異なるバージョンの型定義ファイルに依存している（別々のパッケージ `@types/react@^16` と `@types/react@^17` に依存しているなど）場合に、同じ型定義ファイルが複数 node_modules にインストールされる場合があります。この時に `error TS2300: Duplicate Identifier` という型定義の重複エラーが発生してコンパイルに失敗します。  

解決策としては、パッケージのバージョンを上げるなどして依存関係を整理して重複を無くす方法があります。しかし、それが難しい場合は  `skipLibCheck: true` を指定することで型定義ファイルの型チェックをスキップすることで、エラーを回避することができます。

## さいごに
`skipLibCheck` は true or false のそれぞれにメリット・デメリットがあるため、プロジェクトで何を優先するかを決めて設定の有無を決めると良いでしょう。


ESLintは毎回プロジェクト開始の最初だけ設定して、その後あまり触ることが無く毎回なんとなくで設定して、新しく設定する時に設定項目を忘れてしまう事が多いので、各設定項目や導入プラグインの目的をちゃんと理解したいと思い、まとめました。

TypeScriptのskipLibCheckを理解する

[ESLint](https://github.com/eslint/eslint) は毎回プロジェクト開始の最初だけ設定して、その後あまり触ることが無く毎回なんとなくで設定して、新しく設定する時に設定項目を忘れてしまう事が多いので、各設定項目や導入プラグインの目的をちゃんと理解したいと思い、まとめました。

## ESLintとは？
ESLint は EcmaScript/JavaScript のリンターツールです。チームでコードの利用規約を決め、各自がルールを守って開発するのは大変です。新しくメンバーが増えたときにも、その人がチームのルールに馴染むまで何度もコードレビューで指摘する必要があるかもしれません。ESLintを導入することで、コードのルールチェックを自動化して、統一性のあるコードを担保することができます。

## ESLintの設定
ESLintは設定ファイルで全てルールのON/OFFなどを設定することができます。ESLintの基本的な設定項目について見ていきます。

[Configuring ESLint - ESLint - Pluggable JavaScript linter](https://eslint.org/docs/user-guide/configuring)

### Rules
`rules` オプションはESLintがどのような構文をエラーとするか無視するかを設定するオプションです。デフォルトで定義されているルールとしては「文末にセミコロンを必須とする」 `semi` などがあります。ユーザーは設定ファイルでこれらのルールを設定することで、自分好みにリンターの挙動をカスタマイズすることができます。  
ルールは `off` or `0` , `warn` or `1` , `error` or `2` を指定することで設定ができます。文字列でも数値でも、どちらを指定しても問題ありません。

ESLintは構文チェックで `error` となるルールが見つかった場合は 0以外のexit code で終了し、 `warn` の場合は警告として出力するが構文チェックとしては通過するようになっています。全てを `error` に設定するのも手ですが、Linterの構文エラーを解消するために思わず時間がかかる場合もあるので、チーム内で相談してルールの厳格性を決めると良いです。

次の例では `"quotes": ["error", "single"]` を指定して `'` を使わない場合に構文エラーとしています。また `"no-unused-var": "warn"` と設定することで、未使用の変数を警告として扱うようにしています。 `off` は次で紹介する `extends` を使った場合などに併用する場合が多いです。

```javascript
// error  Strings must use singlequote  quotes
const name = "taro"
// warning  'age' is assigned a value but never used  no-unused-vars
const age = 10
console.log(name)
```

```json
// .esrintrc
{
	"rules": {
		"quotes": ["error", "single"],
        "no-unused-var": "warn"
    }
}
```

### Extends
`extends` オプションではベースとなる設定を指定することで、その設定を継承することができます。先の `rules` オプションの例では、一つ一つルールを設定していました。しかし、毎回プロジェクトごとにルールを全て設定していくのは大変な作業です。そこで ESLint には公式が推奨しているプリセットが存在します。

`extends` オプションで `eslint:recommended` を指定することで、ベース設定を継承して一括で設定をすることができます。

どのようなルールが設定されるかは [公式ドキュメント](https://eslint.org/docs/rules/) を参照すれば確認することができます。

```json
{
	"extends": "eslint:recommended"
}
```

ベースとなる設定で一部のルールを無効にしたい場合には、先ほど説明した `rules` オプションで `off` を指定することで設定できます。

```json
{
	"extends": [
		"eslint:recommended"
	],
	"rules": {
        "no-ununsed-vars": "off"
    }
}
```

`extends` は配列で複数指定することが可能です。 `no-unsued-vars` などのルール設定が重複していた場合は、後から指定した設定で上書きされます。  
次の例では、 `eslint:recommended` で定義されている設定が  `plugin:react/recommended` で定義されている設定で上書きされます。

```json
{
	"extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ]
}
```

### Parser Options

ESLintはデフォルトでES5の構文をサポートしています。ES6以降の構文やJSXの構文を対象にする場合は `parserOptions` で設定します。

ここでは次の3つの項目について説明します。
- ecmaVersion
- sourceType
- ecmaFeatures 

`ecmaVersion` はEcmaScriptのバージョンを指定します。デフォルトの値は 5 です。  
デフォルトの設定で次のコードを構文チェックした場合は `The keyword 'const' is reserved` という構文エラーが発生します。

```javascript
// error  Parsing error: The keyword 'const' is reserved
const hello = () => {
    console.log("hello");
};
```

`ecmaVersion` のを指定すれば、構文チェックする EcmaScript のバージョンを変更できます。

```json
{
	"parserOptions": {
		"ecmaVersion": 2020
	}
}
```

`sourceType` はモジュールのタイプを指定します。デフォルトの値は `"script"` です。

デフォルトの設定で ESLint を利用すると import/export などのESモジュールを利用すると構文エラーとなります。

```javascript
// 'import' and 'export' may appear only with 'sourceType: module'
import { pick } from 'lodash';
```

import/export を利用する場合は `"module"` を指定します。

```json
{
	"parserOptions": {
		"sourceType": "module"
	}
}
```

`ecmaFeatures` は JavaScript で有効にする追加の構文拡張を指定します。

例えば、JSX は JavaScript の構文拡張のため、デフォルトの設定では構文エラーとなります。

```javascript
// error  Parsing error: Unexpected token <
const Hello = ({ name }) => <div>{name}</div>;
```

`"jsx": true` を指定することで、JSX も構文チェックができます。

```json
{
    "parserOptions": {
        "ecmaVersion": 2020,
        "ecmaFeatures": {
            "jsx": true
        }
    }
}
```

### Parser
ESLintはデフォルトで [Espree](https://github.com/eslint/espree) を構文解析のパーサーとして利用しています。TypeScript を構文チェックする場合に type キーワードなどは ECMAScript の構文ではないなため構文解析に失敗します。そのため、 `Parser` オプションで別のパーサーを指定する必要があります。

```typescript
// error  Parsing error: Unexpected token User
type User = {
    name: String;
}
```

TypeScriptの構文解析する場合は @typescript-eslint/parser をパーサーを指定します。

```bash
$ yann add -D typescript @typescript-eslint/parser
```

```json
{
  "parser": "@typescript-eslint/parser"
}
```

### Processor
一部のプラグインは特定の機能としてプロセッサーを提供しています。プロセッサーは Markdown ファイルから JavaScript のコードを抜き出して ESLint をかけたりできます。  
例えば、特定のファイルパスで一部のプラグインを無効にする [mradionov/eslint-plugin-disable](mradionov/eslint-plugin-disable) では、次のように `processer` オプションでプロセッサーを指定します。

```json
{
    "plugins": ["react", "disable"],
    "processor": "disable/disable",
    "overrides": [
        {
            "files": ["tests/**/*.test.js"],
            "settings": {
                "disable/plugins": ["react"]
            }
        }
    ]
}
```

### Environments
ブラウザや jest などのグローバル変数や関数を定義済みとして認識するための設定です。  
例えば、jest ではグローバル関数として `describe` や `it` などの関数が定義されますが、ESLint はその関数が定義されていることを認識することができません。 `no-undef` のルールを有効にした状態で、jestのコードを構文チェックを未定義のエラーが発生します。

```javascript
// error  'describe' is not defined  no-undef
describe("test", () => {
	// error  'it' is not defined  no-undef
    it("test", () => {});
});
```

```json
{
    "parserOptions": {
        "ecmaVersion": 6
    },
    "rules": {
        "no-undef": "error"
    },
}

```

`env` オプションで `jest` を設定することで `describe` などのグローバル関数が定義済みであることを ESLint に伝えることで、構文エラーを解消することできます。  
設定可能な環境の一覧は [公式のページ](https://eslint.org/docs/user-guide/configuring#specifying-environments) で確認できます。

```json
{
  "env": {
    "jest": true,
  }
}
```

### Globals
環境に依存しない独自に定義したグローバル変数をESLintに認識させるための設定です。  
値として `writable` , `readonly` , `off` が設定できます。

```javascript
// error  'bar' is not defined  no-undef
bar = "bar"
// error  'hoge' is not defined  no-undef
console.log(hoge)
```

```json
{
    "rules": {
        "no-undef": "error",
    "no-global-assign": "error"
    },
    "env": {
        "browser": true
    }
}
```

`writable`, `readonly` は定義済みのグローバル変数に対しての可能な操作を表しています。グローバル変数を上書きする事はほぼ無いのと、そもそも上書き自体がバッドプラクティスなので、基本的には `readonly` を指定すれば大丈夫です。

```javascript
// "readonly" と指定したグローバル変数を上書きしているので、まだ構文エラーが発生している。
// error  Read-only global 'bar' should not be modified  no-global-assign
bar = "bar"
console.log(hoge)
```

```json
// .eslintrc
{
    // (省略)
	"globals": {
		"hoge": "readonly",
		"bar": "readonly"
    }
}
```

上の例では、`no-global-assign` を有効にしている状態で `globals` オプションで `readonly` を設定している `bar` のグローバル変数に対して上書きを実行しており、ESLint の構文エラーが発生しています。  
グローバル変数を上書きする場合は `writable` を指定することで、構文チェックのエラーを解消できます。

```javascript
hoge = 'new hoge'
console.log(hoge)
```

```json
// .eslintrc
{
    // (省略)
	"globals": {
		"hoge": "readonly",
		"bar": "writable"
    }
}
```

### Plugins
ESLintでは「JSX が記述されている場合は React モジュールがインポートされていること」などの独自ルールをプラグインという形で組み込むことができます。  
`plugins` オプションでは利用したいプラグインを配列の形で指定します。また、プラグインを利用する場合は、事前にパッケージとしてインストールしておく必要があります。

例として、React の構文チェックプラグインである [yannickcr/eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) を導入してみます。

最初にプラグインをインストールします。

```bash
$ yarn add -D eslint-plugin-react
```

次にインストールしたプラグインを `plugins` オプションで指定して、使いたいルールを有効化します。
プラグイン名を指定するときに `eslint-plugin` のプレフィックは省略可能です。

```json
{
    // eslint-plugin-react でもOK
	"plugins": ["react"],
	"parserOptions": {
		"ecmaFeatures": {
			"jsx": true
		}
	},
	"rules": {
		"react/jsx-uses-react": "error",
        "react/jsx-uses-vars": "error"
    }
}
```

先の例では `plugins` オプションの例を示すために、敢えて冗長な書き方をしています。プラグインが提供するプリセットの設定をそのまま適用する場合には、次のように `extends` オプションで一括指定することも可能です。

```json
{
	"extends": [
	    "eslint:recommended",
	    "plugin:react/recommended"
    ]
}
```

### Shared Settings
`settins` オプションはESLintのルール実行時に参照される共通の設定値です。独自のカスタムルールから共通の値に参照したい場合などに利用できます。

 [yannickcr/eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react) を利用する場合に次の設定を書く事でReactのバージョンを指定することができます。

```json
{
	"plugins": ["react"],
	"settings": {
		"react": {
			"version": "16.3"
        }
    }
}
```

## Prettierとの併用
Prettier とはコードの自動整形ツールです。

Prettier は `eslint --fix` では整形されないコードも整形してくれるため、ESLint よりも整形ツールとして優れているという利点があります。 次のようなコードは `eslint --fix` は自動整形してくれませんが、 Prettier はコードを自動整形してくれます。

```typescript
// eslint --fix ではこのコードは整形されない
const getAllPostsImpl: GetAllPosts = new GetAllPostsImpl(postsRepository, directoryRepository);
```

```typescript
// prettier だと整形される
const getAllPostsImpl: GetAllPosts = new GetAllPostsImpl(
	postsRepository, 
	directoryRepository
);
```

ESLint と Prettier の併用方法をインターネットで検索すると [eslint-plugin-prettier](https://github.com/prettier/eslint-plugin-prettier) をインストールして、ESLint 上で Prettier を実行する方法を見かけることがあります。しかし、この方法では Prettier を直接実行するよりも処理に時間がかかったり、自動整形されるコードが構文エラーとして表示される問題があり [公式のドキュメント](https://prettier.io/docs/en/integrating-with-linters.html) で非推奨とされています。

対応方法としては [eslint-config-prettier](https://github.com/prettier/eslint-config-prettier) を導入してPrettierと競合するルールをオフにして、`prettier && eslint` と先に Prettier でコードを整形をした後に ESLint で構文チェックを実行します。

```json
{
	"extends": [
		"eslint:recommended",
		"prettier"
	]
}
```

```bash
# 実行
$ prettier && eslint
```

## Reactの設定例
インストールするパッケージ

- [yannickcr/eslint-plugin-react](https://github.com/yannickcr/eslint-plugin-react)
- [eslint-plugin-react-hooks](https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks)

React v17.0 以降を利用する場合は Reactのモジュールをインポートする必要がなくなったので `react/react-in-jsx-scope` を `off` にしておくことをオススメします。

設定ファイル

```json
{
    "plugins": [
        "react-hooks"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
    ],
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 2020
    },
    "env": {
        "browser": true,
        "jest": true
    },
    "rules": {
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "react/react-in-jsx-scope": "off",
        "react/prop-types": "off",
        "react/display-name": "off",
    }
}
```

## TypeScriptの設定例

インストールするパッケージ

- [@typescript-eslint/pareser](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/parser)
- [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/master/packages/eslint-plugin)

```bash
$ yarn add -D @typescript-eslint/parser @typescript-eslint/eslint-plugin
```

設定ファイル

```json
{
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parserOptions": {
        "sourceType": "module",
        "ecmaVersion": 2020
    },
    "env": {
        "browser": true,
        "jest": true
    }
}
```

ESLintをちゃんと理解する


## はじめに
年末年始にこの技術ブログを GatsbyJS から Next.js にリプレースを行っていました。その影響でLighthouseのパフォーマンス結果が低下してしまったので、原因の調査と改善を実施しました。

<img src="/images/posts/nextjs-perf-improvement/lighthouse-result.jpg" alt="改善前のLighthouseの結果" width="1522" height="676" />

## 原因調査
### Lighthouseの結果を考察
Lighthouseの詳細を見てみると 722.4kb という巨大なJSファイルが配信されていました。「Potential Saving 99.8kb」とあるように、このJFファイルの中の大部分が未使用コードになっています。

<img src="/images/posts/nextjs-perf-improvement/lighthouse-unused-js.png" alt="未使用なJavaScript" width="735" height="385" />

また巨大なjsファイルによりJavaScriptの「Script Evaluation」が 1,835ms と、長時間のレンダリングブロッキングが発生していました。

<img src="/images/posts/nextjs-perf-improvement/lighthouse-thread-work.png" alt="メインスレッドの実行時間" width="717" height="406" />

### Webpack Bundle Analyzer
先ほどのLighthouseの結果で問題になっていた、巨大なjsファイルは chunks/pages/post/[slug]-xxx.js でした。これは記事の詳細ページでNext.jsのビルドにより生成されたファイルです。このファイルにバンドルされているモジュールを調査して、jsファイルが巨大化している原因を特定します。

Next.jsは内部でビルドにWebpackを利用しているので、[webpack\-contrib/webpack\-bundle\-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) を使うことで、生成されたJSファイルのバンドル情報を可視化することができます。

Next.js のプラグインとして [@next/bundle-analyzer](https://github.com/vercel/next.js/tree/canary/packages/next-bundle-analyzer) が提供されているので、今回はこちらを導入していきます。

最初にパッケージをインストールします。

```bash
$ yarn add -D @next/bundel-analyzer
```

続いて Next.config.js にプラグインを利用する設定を書いていきます。  
環境変数として `ANALYZE=true` が指定されていた時だけ、bundle-analyzer を実行するようにしています。

```javascript
const withBundleAnalyzer = require('@next/bundle-analyzer')({
    enabled: process.env.ANALYZE === 'true',
});

const config = {
    // 省略
};

module.exports = withBundleAnalyzer(config);
```

次のように実行することで確認ができます。

```bash
$ ANALYZE=true next build
```

今後のことも考えて実行コマンドは package.json に登録しておきます。

```json
{
    "scripts": {
        "bundle-analyzer": "ANALYZE=true next build"
    }
}
```

### Webpack Bundle Analyzer の結果を考察
webpack-bundle-analyzer を実行することで、ビルド中にブラウザに可視化された情報が表示されます。  
可視化された結果をみてみると [refractor](https://github.com/wooorm/refractor) というモジュールが大部分を占めており、このモジュールの読み込みが今回の問題の原因となっていそうです。

<img src="/images/posts/nextjs-perf-improvement/bundle-analyzer-result.png" alt="bundle-analyzerの結果" width="2876" height="1532" />

`yarn.lock` を参照すると、 `refractor` は [react\-syntax\-highlighter/react\-syntax\-highlighter](https://github.com/react-syntax-highlighter/react-syntax-highlighter) から読み込まれていることが分かりました。

```yaml
react-syntax-highlighter@^15.4.3:
  version "15.4.3"
  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.4.3.tgz#fffe3286677ac470b963b364916d16374996f3a6"
  integrity sha512-TnhGgZKXr5o8a63uYdRTzeb8ijJOgRGe0qjrE0eK/gajtdyqnSO6LqB3vW16hHB0cFierYSoy/AOJw8z1Dui8g==
  dependencies:
    "@babel/runtime" "^7.3.1"
    highlight.js "^10.4.1"
    lowlight "^1.17.0"
    prismjs "^1.22.0"
    refractor "^3.2.0"
```

これでパフォーマンス問題の原因が特定できたので、残りはこの問題を改修していきます。

## パフォーマンス改善
`reflactor` には、シンタックスハイライトで利用する言語ごとのjsファイルが含まれており、それらが初回レンダリングのタイミングで全て読み込まれることで、パフォーマンス低下を引き起こしていました。`react-syntax-highlighter` は動的インポートにも対応しているので、今回は動的インポートによりレンダリングブロックをしないように修正をします。

ただ、最終的に読み込むファイルの転送量が多いことに変わりないので、将来的には別のアプローチで解決したいです。

```typescript
// import { Prism as SyntaxHilighter } from 'react-syntax-highlighter';
import { PrismAsync as SyntaxHilighter } from 'react-syntax-highlighter';
```

動的インポートに変更した後の bundle anlyzer の結果をみると、 `refractor-import.xxx.js` として `refractor` の読み込みが新しいチャンクとして切り出されています。`[slug]-xxx.js` のファイルサイズ も 722.4kb から 216.54kb に削減されています。

<img src="/images/posts/nextjs-perf-improvement/dynamic-import-bundle-analyzer-result.png" alt="動的インポートのbundle-analyzerの結果" width="1514" height="1356" />

修正後の `[slug]-xxx.js` の中身を見てみると、新たに別の問題が見えてきました。`react-syntax-highlighter`が全てのテーマファイルを読み込んでいます。

<img src="/images/posts/nextjs-perf-improvement/bundle-analyzer-result-slug.png" alt="[slug]-xxx.jsのbundle-analyzerの結果" width="2876" height="1530" />

この読み込みも不要なので、必要なテーマファイルだけを読み込むように修正します。

```typescript
// import { vscDarkPlus as defaultVscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
import defaultVscDarkPlus from 'react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus';
```

最終的に `[slug]-xxx.js` のファイルサイズが 722.kb から 106.5kb と1/7のサイズ削減できました🎉
これでレンダリングブロッキングの時間が大幅に削減されるので、Ligthouseのパフォーマンス結果も改善されます。

<img src="/images/posts/nextjs-perf-improvement/bundle-analyzer-finally.png" alt="最終的なbundle-analyzerの結果" width="1698" height="1492" />

## さいごに
今回は1番大きな問題を対象として改善策を実施しましたが、画像の最適化や画像の遅延ロード、その他の不要なJavaScriptファイルの削除と改善項目はまだまだ沢山あります。また、Next.jsのリプレースによって新しく導入したライブラリにより意図せずにパフォーマンス低下が起きてしまったので、今後は [GoogleChrome/lighthouse\-ci](https://github.com/GoogleChrome/lighthouse-ci) などを導入して継続的にパフォーマンスなどを計測する仕組みを用意していきたいです。


年末年始にこの技術ブログを GatsbyJS から Next.js にリプレースを行っていました。レプレースを実施した結果、Lighthouseのパフォーマンス結果が低下してしまったので、原因の調査と改善を実施しました。

Next.jsで作ったブログのパフォーマンス改善

神奈川の田舎で働いてるフロントエンドエンジニアのブログ