2024
ken7253話したこと
色んなところで話したことをメモしておく
ken7253新しい書き方と古い書き方の同居について
プロジェクトに新しいルールが導入されたり、よりよい書き方を見つけたりした場合に
プロジェクトのコード内に新しい書き方と従来の書き方が同居してしまうことがある。
この状態が中途半端で嫌だという人がいるがこの考えは正しいのだろうか。
おそらく、これに関して対応策は３つあると思っている。
- 新しいルールに合わせてすぐに全てのコードを書き換える。
- 後で書き換える
- 同居することを許容する
最初に 2. は永遠に訪れない。そして訪れたとしても 2. で進める場合は、定期的にプロダクトをフルリプレイスする必要があるため現実的な選択ではない。
残りは 1. か 3. になるが、 1. でやろうとする場合まとまった時間が必要になる。
また、全ての改善が一度にできるとは限らないためそもそも現実的な対応として 3. しか残っていないという状況になる。
参考資料
ken7253Linterについて
Linterまわりのメモ
やり方は決まってないがやりたいこと
また、できるかはわからないがルールを利用してディレクトリを制限したい。
-
libというフォルダはsrc/lib以外に作ってはいけない。 -
apiというフォルダはsrc/api以外に作ってはいけない。
フォルダは作れるがインポートできなくなるとかでもOK
ken7253strict-dependencies
やりたいこと
-
**/util/**では型を除いて全てのインポートを禁止 -
**/lib/**ではライブラリと型を除く全てのインポートを禁止 -
**/components/**から../component/**のインポートを禁止 -
**/types?/**では全てのインポートを禁止
理由
**/util/**では型を除いて全てのインポートを禁止
utilにドメインロジックが混入するのを防ぐため
このルールと合わせて、utilには純粋関数のみを格納してテストを必ず書くというルールにする
**/lib/**ではライブラリと型を除く全てのインポートを禁止
libはライブラリをラップした関数、クラスを置くため。
**/components/**から../component/**のインポートを禁止
コンポーネント同士で依存したり、依存関係のネストが深くなることを防ぐため
**/types?/**では全てのインポートを禁止
typesに格納する型定義は自分で書く必要がある。
ken7253eslint-plugin-react
**/*.tsxのみ
ken7253eslint-plugin-react-hooks
**/*.tsxのみ
ken7253eslint-plugin-jest
**/*.test.tsx?のみ
ken7253eslint-plugin-storybook
**/*.stories.tsxのみ
ken7253eslint-plugin-functional
主に値のイミュータブルを担保するため。
no-classesを採用した場合、独自エラー定義のためsrc/util/errorは除外する。
ken7253eslint-plugin-import
要調査
ken7253通常のルールについて
eqeqeq
foo == nullは除外する。
require-unicode-regexp
radix
prefer-template
no-plusplus
camelcase
snakeToCamel/camelToSnakeなどの変換関数のみを除外設定に加える。
ken7253@typescript-eslint/eslint-plugin
ken7253WDC
ken7253AVIF
- 新しい画像フォーマット
- webpの後続的な立ち位置
- AV1という動画用のコーデックの画像版
- WebPもVP8の画像版なので近い立ち位置
- アルファチャンネルあり、アニメーションも可能、HDR対応、色深度は8,10,12bit対応で圧縮率も高い
- Edgeが対応したのがわりと最近でのChromeとの差異として例に使われがちだった（n=1）
最近の画像として欲しい機能は大抵あるし、メジャーブラウザは対応してるので基本的にはAVIFでOK
ただ、win10などのデフォルトの画像ビュワーとかPhotoshopとかではデフォルトでは開けないのでダウンロードして貰う想定の画像ファイルには使わないのがベター
ken7253
ken7253
ken7253
ken7253
ken7253一応AVIFにはlossless/lossyの両方があるみたいだけど基本的にはlossyを使ったほうがよさそう?
ken7253
ken7253