Skip to content

Instantly share code, notes, and snippets.

@azu
Last active May 25, 2022 11:54
Show Gist options
  • Save azu/eec4f71348c3e8bb63176df8b78f6b01 to your computer and use it in GitHub Desktop.
Save azu/eec4f71348c3e8bb63176df8b78f6b01 to your computer and use it in GitHub Desktop.

ツールチェインのベストプラクティス

人による

参考:

Babelが何をやってるか

TypeScriptと同じレイヤー: (未来の可能性を含む構文の)JavaScript to (サポートしたい対象で動く構文の)JavaScriptをする

プラグインでなんでもできるので、なんでもできる変換レイヤーとして使われることがある。 Tool for Tool.

transpiler, polyfill, shim 違い

ユニットテスト

プログラム一般的な話になりそう。

cc @t_wada

CSS

人による

参考: The State of CSS 2020 (地域の偏りが出る)

パフォーマンス最適化

パフォーマンス最適化は人類には早いため、何が最適化を妨げる(deoptimize)のかを意識した方が気持ちが楽。 VSCodeにImport Costを入れたり、 ライブラリを選ぶ時にBundlephobiaにとりあえず入れる癖をつけるとかがコスパが良さそう。

傾向として余計なものが多い = パフォーマンス悪くなる。

JavaScriptのレイヤーでは早いコードはあんまり意識しないほうが良い。 DOM APIのレイヤー(ReactやVueなど)はフレームワークに従いましょう。

巨大なデータを扱うときは別なので、一度に扱うデータを限定(表示領域のみ描画とかStream処理)するとかは考えましょう。 (フロントだと大体固まるだけで終わるので、サーバの方がクリティカルになりやすい)

最適化の方法は必要になったら調べればいい(その時に最適なものを選ぶ)

参考: 超速! Webページ速度改善ガイド ──使いやすさは「速さ」から始まる:書籍案内|技術評論社

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment