ランサーズ(Lancers)エンジニアブログ > フロントエンド > フロントエンド定例 > ライティングルールによるtextlint適応 iframeとPostMessageを使ったアイランドアーキテクチャぽいやつ フロントエンド定例 2022/10/7

ライティングルールによるtextlint適応 iframeとPostMessageを使ったアイランドアーキテクチャぽいやつ フロントエンド定例 2022/10/7

igarashisho|2022年10月07日
フロントエンド

こんにちは、フロントエンドチームの @syo_igarashi です。
今週のフロントエンド定例の内容を記載します。

フロントエンド定例について、以前の記事(ランサーズのフロントエンドチームが取り組んでいること)でお伝えしたのですが、毎週金曜日に開催しており、実際の業務で取り組んでいることや気になった技術情報等をシェアしあう会になっています。

以下、今週の内容です。

ライティングルールによるtextlint適応

先にzennに仕組みやサンプルのコードを記載しました

ctpやjsx、その他解析対象にしたいファイルなどの拡張子を指定すればcliとVSCode上でも解析対象になります。

今導入可能そうなルールの行の適応をテスト書きながら対応中です。
まだ数百行あるのでめげそう

iframeとPostMessageを使ったアイランドアーキテクチャぽいやつ

個人ブログの話になるのですがパーツをiframeとして呼び出すやり方は複数のReactによるSPAのサイトには有用なやり方なのかなと思いました。

複数のReactのプロジェクトを入れる際、同じReactのバージョンを使用しなくてはいけない制約があるためiframeでそこのパーツで閉じたReactのプロジェクトを動かし、iframeの親のビューに対して動作を促したいときはwindow.postMessageとwindow.addEventListener(“message”, (e) => {})で送受信し合えばいい作り方もありそうと思いました。

ブログのコードでは

iframeの実装

const onClickLink = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
  e.preventDefault();
  const linkElement = e.target as HTMLAnchorElement;
  const href = linkElement.href;

  if (window === window.parent) {
    // iframeとして呼び出されていないとき
    router.push(href);
  } else {
    // iframeとして呼び出しされたときは親の画面側にリンクのURLを送る
    window.parent.postMessage(
      {
        href,
      },
      "*"
    );
  }
};

iframe呼び出し側

const postMessage = useCallback((e: MessageEvent<any>) => {
  const data = e.data;
  if (!data) return;

  // iframeから送信されたリンクのURL
  const href = data.href;

  if (!href) return;
  router.push(href);
}, []);

// @ts-ignore
useEvent(globalThis, "message", postMessage);

今回はiframeが1つだったので簡単な感じになりましたが、複数ある場合のことを考えると取り扱うmessageの情報が多くなるのでtypeなどを送信するようにして場合による型を明確にしておかないと破綻しそうな作りでもあるなと思いました。

 

 

前回の定例内容はこちらから確認可能ですのでご興味いただければ下記のリンクから閲覧いただければと思います。

https://engineer.blog.lancers.jp/?s=フロントエンド定例