JavaScript/Webコンポーネント
コンポーネントと聞いて何を思い浮かべるのかはその人の専門分野によって違うと思いますが、基本的に一つの基本がまとまった部品くらいの意味合いだと思います。私の場合、コンポーネントといえばWin32でフォームにペタペタ張り付けていく構成要素として初めて知った言葉でした。同じ機能は同じ部品として実装するのが正しい時代でした。メモリの豊かな現代とは正義も異なっていたのです。とはいえ、その根っこの思想は別に悪いものではなく、保守性や合理性からの要請で、使いまわせる部品が望まれることは多いはずです。Web製作においても当然それは当てはまるわけで、例えばReactなんかで多くの人はコンポーネント（部品）を作ってるんだろうと思います。（私は何というかJSXっていうファイルがあんまり好きになれなくて、率先してReactを選択しないんですが、人気過ぎてやらざるを得ないです。classNameって何だよってぼやきながら）それとは別にWebコンポーネントっていう技術がありまして、これだとフレームワーク非依存で部品としてカプセル化できたりします。2020年代になってようやくブラウザの足並みが揃ってきたそうで、使っていってよさそうな技術にみえます。
Webコンポーネント用のAPIがあるぞって話ではなく、主に3つの機能を併用して、部品化カプセル化を実現しているようです。
- Custom Elements - 独自のHTMLタグ（例:
）を定義できる。 - Shadow DOM - 素の内部構造を隠蔽し、スタイルをカプセル化する。
- HTML Templates - 描画されるまで使われない再利用可能なコード片を作成する。
これができたらとてもHTMLがすっきりしそう！いろんなフレームワークがHTMLをどんどん汚くしていくのに、こいつは違うかも！？と思って調べ始めた記録です。