実務経験9ヶ月の私が、React Nativeで発生したエラーを自力で解決し成長を感じた話

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

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

先輩の言葉を忘れないように、ここに記録させていただきます。
> 「なんかバグってるけど、どうしたらいいかわからない」状態から一歩脱却した、素晴らしいパフォーマンスかなと思います！

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

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

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

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

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

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

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

このうち「2. 回転させた画像を書き出す」について、設計には以下のように書かれていました。
> 回転した画像データの書き出しにはreact-native-image-resizerを使います。
こちらはすでにインストールされています。

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

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

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

https://github.com/bamlab/react-native-image-resizer

## エラー遭遇編
_私：「使い方は公式のGitHubを見る限りそこまで複雑ではないし、とりあえず書いてみよう🔥」_
```typescript
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`」**_

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

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

![fge8Wn.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537832/4c88a749-ab7d-058f-a056-e80d1c9ff44f.gif)

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

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

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

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

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

![part1_cat_meme_greenscreen_Complete_collection.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537832/6be08e70-b375-d219-29f9-bebf50f92d0c.gif)

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

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

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

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

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

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

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

https://github.com/bamlab/react-native-image-resizer/issues/328

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

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

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

https://github.com/bamlab/react-native-image-resizer/pull/381

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

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

https://github.com/bamlab/react-native-image-resizer/releases/tag/v3.0.6

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

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

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

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

```bash
npm install @bam.tech/react-native-image-resizer@3.0.6
cd ios && pod install
```
いよいよiOSで緊張の動作確認です。

_Simulator：「..........................」_

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

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

![40_Cat_meme_green_screen.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3537832/7b855f07-0a75-d2c8-a4ae-27d79038ebf1.gif)

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

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

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

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

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