Patterns.dev

Patterns.dev は、Web アプリを作るための JavaScript のデザインパターンと性能のパターンを解説するサイトである¹。Lydia Hallie と Addy Osmani が作り、書いている。同じ内容は書籍『Learning Patterns』としても無料で読める²。

内容

サイトは、素の JavaScript と Node.js、React と Next.js、Vue.js の3つに分かれている¹。

JavaScript のパターン

Singleton、Proxy、Prototype、Observer、Module、Mixin、Mediator、Flyweight、Factory の各パターンを、Web アプリでの使い方とともに解説している¹。

性能のパターン

読み込みの順序の最適化、静的と動的な import、表示や操作を待って読み込む import、ルートごとのコード分割を扱う。PRPL パターン、Tree Shaking、Preload と Prefetch、サードパーティの読み込み、リストの仮想化、JavaScript の圧縮も扱う。View Transitions API を使ったページ遷移のアニメーションの解説もある¹。

Vue のパターン

コンポーネント、非同期のコンポーネント、Composables、Container と Presentational の分離、Provide と Inject、Renderless のコンポーネント、状態の管理などを扱う¹。

出典

1. 「Patterns.dev」。 ↩ ↩² ↩³ ↩⁴ ↩⁵

2. 「About us」Patterns.dev。 ↩