はじめに

私は元薬剤師で、実務経験9ヶ月のフロントエンドエンジニアです。
React/TypeScriptを使って開発しています👩‍💻

先日、対応したバグの修正で先輩からお褒めの言葉をいただきました。
自分でも一歩成長を感じることができ、もっと頑張ろうという気持ちが強まりました🔥

先輩の言葉を忘れないように、ここに記録させていただきます。

「なんかバグってるけど、どうしたらいいかわからない」状態から一歩脱却した、素晴らしいパフォーマンスかなと思います！

こんなに嬉しい褒め言葉はありません…😭

この記事では、遭遇したエラーの内容と、解決するまでの自分の思考と動き、そしてそこから得た学びを共有したいと思います。

先に結論として、今回の経験を通じて学んだことを書いておきます。

React Nativeのバグで、OSによって挙動が異なるときはライブラリのバグの可能性もある
ライブラリのバグの場合は、公式リポジトリのIssueから同じエラー内容がヒットするかも
エラーが出たときは先輩に相談する前に、過去の経験から同じようなケースに当てはめて自分で調べてみる

背景

私の会社では、スマホアプリはReact Nativeで開発しています。
先日、プロダクトのスマホアプリに新たに「画像回転機能」を追加することになり、その実装を任されました。

「画像回転機能」を実装するには、大きく4ステップを踏みます。

画面上に表示している画像を回転させる
回転させた画像を書き出す
書き出した画像をアップロードする
アップロードした画像で元画像を置き換える

このうち「2. 回転させた画像を書き出す」について、設計には以下のように書かれていました。

回転した画像データの書き出しにはreact-native-image-resizerを使います。
こちらはすでにインストールされています。

私:「よし、まずは本当にライブラリがインストールされているのか確認しよう！」

確認してみると、v3.0.5が導入されていました。

React Native Image Resizerとは

React Native Image Resizerは、React Nativeアプリケーション内で画像のリサイズを行うためのライブラリです。このライブラリを使用すると画像のサイズを変更し、異なるフォーマットに変換することができます。
パラメータで回転角度（rotation）を指定できるので、回転した画像も書き出すことができます。

エラー遭遇編

私：「使い方は公式のGitHubを見る限りそこまで複雑ではないし、とりあえず書いてみよう🔥」

import ImageResizer from '@bam.tech/react-native-image-resizer'

type Angle = 0 | 90 | 180 | 270

export const generateRotatedImageUri = async (
  imageUrl: string,
  angle: Angle
): Promise<string> => {

// ...各パラメータの組み立ては省略

 const rotatedImage = await ImageResizer.createResizedImage(
    imageUrl,
    rotatedWidth,
    rotatedHeight,
    compressFormat,
    quality,
    angle
  )

 return rotatedImage.uri
}

私：「よし！これを使って引数で回転角度を渡せば、それに応じた画像が書き出されるはず！！動かしてみよう！!o(^-^)o」

🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨
Simulator：「エラー発生」

Simulator:「Code: ImageResizer / Message: Image uri invalid」

🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨🚨

私「......................」

私:「まあまあ落ち着け、慌てるような時間じゃない😇とりあえずエラー文を読もう」

私:「Image uri invalid？？？い〜〜や、元画像のURIをそのまま引数で渡しているんだから、誤っているわけないだろう」

私:「元画像が悪いってこと？試しに同じ画像を使ってAndroidでも動かしてみようか」

私:「((((；ﾟДﾟ)))))))う、動くだと...!?!?」

私:「ま、まさかAndroidでは起きず、iOSでは起こるバグだというのか？？？？？？」

ここで先輩にヘルプを出しかけましたが…

以前、同じくReact Nativeでの開発中に、iOSでは起きず、Androidでは起こるバグに遭遇したことがありました。そのときは先輩にヘルプを求め、一緒に原因を調べました。

先輩はエラー文からキーワードを検索し、導入していたライブラリの公式リポジトリにて、同じエラーの内容がIssueに上がっているのを探し当てました。そして、すでにそのIssueは解決されており、新しいバージョンをインストールすれば良いことがわかりました。

私：「今回のバグももしかしたら同じパターンかもしれない！！まずはあの時の先輩のやり方を真似して自分で調べてみよう!!」

エラー調査編

まずはChatGPTにエラー文を投げてみましたが、有効な回答は得られませんでした。

次にエラー文　「ImageResizer / Message: Image uri invalid」をそのままキーワードとして、Google検索をかけました。

すると、検索のトップに公式リポジトリのIssueがヒットしました。

読んでみると、表示されているエラー画面を含めて私のエラー内容と全く同じでした。

私：「これだ…見つけた！！！絶対このIssueに解決方法が書いてあるはず！！！」

読み進めてみると、こちらのPRで修正が入ったことがわかりました。

内容としては、iOSのみfile://形式の画像のURIのみを許可していたようです。
私が指定していたのはhttps://形式だったので、弾かれてしまっていたということだと思われます。

そして、このPRが取り込まれた内容がv3.0.6としてリリースされていることがわかりました。

プロダクトに導入されていたのはv3.0.5だったので、バージョンをv3.0.6に上げれば解決できそうです🎉

私:「多分これで解決方法は合っているけど、ライブラリのバージョンを上げるのはプロダクト全体に影響するから、一旦先輩に確認を取ってからにしよう！」

エラー解決編

解決の糸口が見えたので、先輩にこれまでの経緯を説明し「ライブラリのバージョンを上げても良いでしょうか？」と相談しました。

先輩から許可をもらったので、コマンドを入力しました。

npm install @bam.tech/react-native-image-resizer@3.0.6
cd ios && pod install

いよいよiOSで緊張の動作確認です。

Simulator：「..........................」

私：「エラー出ない！！！！！！！！！！！！！！！！！！！！！！！！！！！！！」

私：「ｷﾀ━━━ヽ(∀ﾟ )人(ﾟ∀ﾟ)人( ﾟ∀)ノ━━━!!」

これで無事にエラーを解決することができました🎉

学んだこと

今回の経験を通じて以下のことを学びました。

React Nativeのバグで、OSによって挙動が異なるときはライブラリのバグの可能性もある
ライブラリのバグの場合は、公式GitHubリポジトリのIssueから同じエラー内容がヒットするかも
エラーが出たときは先輩に相談する前に、過去の経験から同じようなケースに当てはめて自分で調べてみる

今回自分1人でエラーを解決できたのは、過去に同じようなエラーに遭遇し、先輩と一緒に調査して解決できたという経験があったからです。

色々なエラーの解決パターンを蓄積して、自分の中に引き出しを持っておくと、同じようなエラーに遭遇したとき、原因を推測することができるようになるのだと学びました🎉