Upgrade to Pro — share decks privately, control downloads, hide ads and more …

SPEEDAでマイクロフロントエンド開発をして学んだこと

Naoki Tomita
October 03, 2022
230

 SPEEDAでマイクロフロントエンド開発をして学んだこと

SPEEDAでいくつかのマイクロフロントエンド開発を行ってきました。
その中で、モノリスでの開発との違いやマイクロフロントエンドで開発するコツなどを学んできたので共有します。

Naoki Tomita

October 03, 2022
Tweet

Transcript

  1. どんなマイクロフロントエンドがあるのか どんなマイクロフロントエンドがあるのか 23 • 8プロジェクト + α(開発中の機能もあります) ◦ 大半は1プロジェクトにつき、5画面以上ある ◦

    Web Componentsはそのうち1プロジェクトのみ ▪ IEがなくなったのでようやく採用できました 🎉 • 2017年以降に開発された新規機能は全てマイクロフロントエンドを採用 • Angular Dart, Angular, Vue.js, Svelte, litなどを採用
  2. マイクロフロントエンドのこれから 32 Web Componentsでやっていく プロダクト間でマイクロフロントエンドを共有していきたい iframeしか選択できない時代は終わりました。Web Componentsであればiframeの使いづらい部分 もカバーできることが多いので、Web Componentsに移行していきたいです。 プロダクト内や社内で使うCMSでマイクロフロントエンドを共有し、部品として利用してきまし

    た。これをプロダクト間に広げ、新たな機能やプロダクトの立ち上げをもっと早くできるようにして いきたいと考えています。もしかするともっと先には外部の方にマイクロフロントエンドを利用して もらうということもあるかもしれません。 マイクロフロントエンドのこれから 既存の機能をマイクロフロントエンドで置き換えていきたい 既存の機能はまだまだモノリスに埋まったままのものが多く、修正するとなると大変な面も多いで す。ですが、マイクロフロントエンドで置き換えられればもっとフットワーク軽く改善のサイクルを 回していくことができます。
  3. 開発時の注意点 39 E2Eテストがちょっと複雑になる ・SPEEDAではSelenide(WebDriver)を使ってE2Eテストを書いている ・iframe内を操作するにはiframeにフォーカスしないといけない/iframe外を操作するにはモノリス にフォーカスしないといけない ・Web Componentsの場合はShadow DOMを通じてエレメントを操作しないといけない 開発時の注意点

    プロダクトの全体的なデザインの修正が大変 ・マイクロフロントエンド全てのスタイルを修正しなければならない ・開発中のマイクロフロントエンドなら担当チームにお任せできるが、開発してないものは難しい ・デザインを統一できるCSSフレームワークのようなものがあればいいかも
  4. iframe or Web Components 40 iframeとは? ・Webページ内に別のWebページを埋め込むことができる技術 ・Google Map、YouTube、Twitterのタイムラインなど、埋め込んで表示できるウィジェットで利 用されていることが多い

    Web Components(カスタムエレメント)とは? ・独自のHTMLタグを定義できる ・利用側はJSをロードしてHTMLタグを埋め込みたいところに書くだけでよい 以下のような記述でランダムに画像を表示するコンポーネントが表示されます。 iframe? Web Components?