はじめに
私は元薬剤師で、実務経験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人でエラーを解決できたのは、過去に同じようなエラーに遭遇し、先輩と一緒に調査して解決できたという経験があったからです。
色々なエラーの解決パターンを蓄積して、自分の中に引き出しを持っておくと、同じようなエラーに遭遇したとき、原因を推測することができるようになるのだと学びました🎉