🎉

つまずきニュースレター（2024-03-14号)

yoshino

2024/03/14に公開

はじめに

こんにちは。ファンタラクティブのyoshinoです。

ファンタラクティブのエンジニアチームはMob.*（モブアスタリスク）という取り組みを毎週行っており、それぞれのメンバーがどのような開発に取り組んでいるか・業務でつまずいたことを社内で共有しています。

このニュースレターでは、その中でも実際の業務で起きたつまずきをピックアップし、まとめています。

存在しないはずのエレメントが表示されてつまずいた！

背景
カレンダー形式のコンポーネントを作成中の話です。
データ上は問題ないが、存在しない日付に枠が表示されてしまう現象に遭遇しました。

原因
配列データを loop 参照して枠を表示し、key には日付 field を指定していました。
この際、日付 field をHH:mm形式のフォーマットしていたため、別日の同時刻でも key が重複してしまう事で存在しないはずのエレメントが表示されてしまっていました。

対応
HH:mm形式の date から YYYY-MM-DDTHH:mm:ss.SSSZ 方式の date に変更しました。
キーが重複しないよう工夫することで、予期せぬエレメントのレンダリングを起こさないよう調整することができました。

参考

GitHub Actions の実行時間制限でつまずいた！

背景
GitHub Actions で急に Job がキャンセルされてしまいました。
特に Job の内容に不備があるわけではなく、ランダムな位置で処理が落ちてしまうようでした。

原因
1 つの Job につき、5 分かかってしまっていたためにエラーが起きてしまっていました。Job のログではなく、actions の Annotations を見てみると以下のエラーが表示されていました。

The job running on runner GitHub Actions XX has exceeded the maximum execution time of 5 minutes.

timeout-minutes を 5 で設定しているのを見落としていました。

対応
timeout-minutes を変更することで解消しました。

jobs:
  deploy:
    runs-on: ubuntu-latest
    timeout-minutes: 10 #任意の分を設定

参考

decalre module してるのに型がうまく効かない現象につまずいた！

背景
declare module を用いて FastifyRequest にカスタムプロパティを追加したかったが、type キーワードを使用した時に期待通りに型が機能しませんでした

原因
type は既存の型やインターフェースに対してプロパティを追加することはできないのが原因でした

対応
interface キーワードで既存のインターフェースに対してプロパティを追加することができました

import "fastify";
import type { JwtPayload } from "jsonwebtoken";

// ❌
declare module "fastify" {
  type FastifyRequest = {
    adminUser?: JwtPayload & {
      userName?: string;
      email?: string;
    };
  };
}

// ⭕️
declare module "fastify" {
  interface FastifyRequest {
    adminUser?: JwtPayload & {
      userName?: string;
      email?: string;
    };
  }
}

折り返しを許容するテキスト末尾に表示するアイコンの縦方向位置調整につまずいた！

背景
以下のような HTML 構造で、折り返しを許容するテキストの末尾に表示するアイコンをテキスト最終行に対して縦方向中央揃えにしたかった。

<span>
  <span>text with wrap</span>
  <svg>icon</svg>
</span>

対応
アイコン部分にマージンを指定して微調整しました

他の案について
- 「absolute」案に関しては、今回の表示要素の右にも要素があり、折り返さない場合に表示が重なることがあったため、採用を断念しました
  - span に relative、svg に absolute および right:-8px を指定して、最後の要素に対してつけていくイメージ

WebView 環境で関数実行の確認をする方法につまずいた！

背景
WebView の環境では、通常の Web ブラウザのように直接コンソールログにアクセスしたり、アラートを表示させたりすることができないため、関数の実行を確認するための別の方法を見つける必要があります。

原因
WebView 環境は、ネイティブアプリケーション内で Web コンテンツを表示するためのものであり、Web ブラウザとは異なる挙動をするため、Web ブラウザで用いられるデバッグ手法が直接適用できないことがあります。

対応
関数が正しく実行されたことを確認するために、その関数内で**postMessage**メソッドを用いて外部にメッセージを送信します。

postMessageによって送信されたメッセージを受信するために、React Native ではonMessageイベントリスナーを設定します。

文字列の Unicode 正規化形式でつまずいた！

背景
検索ワードを送信する API で、検索ワードに濁点が含まれる時に API リクエストが失敗することがありました。

原因
「にんべん」の「べ」が URL エンコード時に「へ」＋「濁点記号」に分解されてしまうことが原因でした。

対応
String.prototype.normalize()メソッドを使用して Unicode 正規化形式 C（NFC）に変換することで対応しました。

// 検索ワードをNFC形式に正規化する
const searchWord = "にんべん".normalize("NFC");

おまけ 🍪

時間が経つのは早いもので、前回から日が経ってしまいましたが、新たに更新しました！
記事作成にあたって、それぞれのつまずきの内容を Notion の DB で管理しているのですが、
Notion の API や Zenn CLI を使用して記事の作成・公開を楽にできないか企み中です。
もしできたらその過程も記事にしたい！次回もよろしくお願いします。

最後に

ファンタラクティブではフロントエンド・バックエンド問わず絶賛エンジニア募集中です！
気になる方は下のリンクをクリック！

ファンタラクティブテックブログPublication

ユーザーファーストなサービスを伴に考えながらつくる、デザインとエンジニアリングの会社です。エンジニア積極採用中です！hrmos.co/pages/funteractive/jobs