こんにちは、フロントエンドチームの @syo_igarashi です。
今週のフロントエンド定例の内容を記載します。
フロントエンド定例について、以前の記事（ランサーズのフロントエンドチームが取り組んでいること）でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。
以下、今週の内容です。
マイクロフロントエンドと向きあってみる
現状のランサーズ上のフロントエンド実装
上記はマイページの仕事管理画面になりますがCakePHPのテンプレートをベースにして表示したいReactのリソースを読み込んだり、CSSを読み込んで部分的にフロントエンドの実装を進めています。
複数のReactのプロジェクトを適応する都合上、Invalid Hook Call Warning を引き起こす可能性とreactとreact-domのライブラリだけで50〜100KBあるためwebpackのDllPluginでreactとreact-domなどの共通のライブラリをまとめて参照するような実装にしています。
今後の対応検討
現在はwebpackのDllPluginでまとめていますがwebpack5以降にあるModuleFederationPluginやwebpackのexternalsでライブラリをCDN参照させるとかsingle-spaといったマイクロフロントエンドライブラリの導入など他のVueのようなUIライブラリ・viteなどのビルドツールも意識したものの導入も考えましたが導入の概念が現在と異なってくるなというのがあって今後もDllPluginによるReactプロジェクトを作っていこうと思います。
もしくはUIライブラリもIEサポートもなくなったのでWeb ComponentsのCustom ElementsやShadow DOMの出力実装が楽そうなものを取り入れて他のUIライブラリでも使用できるものを採用してみるというの考えていたりします。
今のところ自分の有力候補としてSvelteによるWeb Components実装をやってみようかなと思います。
サーバ側の実装の都合や他のサービスで使いたい都合の場合はiframeでも良さそうというのは今でも思ってたりします。
ライティングルールによるtextlint適応 iframeとPostMessageを使ったアイランドアーキテクチャぽいやつ フロントエンド定例 2022/10/7
Web Componentsとは
https://developer.mozilla.org/ja/docs/Web/Web_Components
https://caniuse.com/?search=web%20components
ブラウザ標準でサポートされている機能で主にCustom Elements、Shadow DOMが魅力的だと思いますのでこの2点について記載します。
Custom Elements
Window.customElementsによるCustom Elementsを実装した後に使用したい箇所でCustom Elementsを呼び出すことだけで使用可能になるので再利用性が高いものになると思います。
Shadow DOM
Element.attachShadowによるShadow DOM実装をし、Shadow DOM内にスタイルの定義をするとそのShadow DOMのみにスタイルの適応が可能などCSS Modulesのような運用が可能です。
https://zenn.dev/uhyo/articles/next-gen-css-in-js
uhyoさんの記事をみて僕もなんとなくCustom ElementsとShadow DOMが密になるようなUI実装にするべきなのかなと最近思ってたりします。
前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。