ほんとうは恐ろしいImage.network

ほんとうは恐ろしい Image.network @hummer / はまあ（SESフリーランスエバンジェリスト）

自己紹介

Yuji Yamamoto (@hummer/はまあ) ・朝起きて飯食ってコード書いて飯食って コード書いて寝てたら 24年経過 ・サラリーマン、起業を経て、 紆余曲折の 末、現在は SESフリーランス 8期目 ・推しは React/Flutter/Firebase/AWS ・PoC開発とエンジニア教育 の日々

本題

ほんとうは恐ろしい Image.network

ある日 Swiftエンジニアは 思った

ひたすら猫画像を 見るアプリを作ろう

いまどきなら ＋ でしょ？

UITableView みたいに表示したいなぁ🤔

ListView

配列で並べるだけ！ なんて簡単！

ネットから画像を 非同期で表示するには？🤔

Swiftなら だけど...

Image.network(String url)

つまり、こうじゃろ？

ほぼ完成では？

ちょっと デザイン 直したいな？🤔

ちょっと直して

Hot Reload!

すごい！ すぐに反映されてる！

ちょっと直して

Hot Reload!

ちょっと直して

Hot Reload!

ちょっと直して

Hot Re...

�

� ええ加減にせえよ？

�

�

� リクエスト 多すぎやねん、ワレ

原因

原因 1. Image.network()はキャッシュしない

原因 1. Image.network()はキャッシュしない 2. ListView()は全部レンダリングする

原因 1. Image.network()はキャッシュしない 2. ListView()は全部レンダリングする 3. Hot Reloadで気軽に再実行

� Hot Reloadのたんびに なんぼリクエストすりゃ 気が済むねんな？

対策

対策.1 ❌Image.network()ではなく ⭕CachedNetworkImage()を使え

対策.1 ❌Image.network()ではなく ⭕CachedNetworkImage()を使え →Urlから取得した画像をキャッシュしてくれる

対策.2 ❌ListView()ではなく ⭕ListView.builder()を使え

対策.2 ❌ListView()ではなく ⭕ListView.builder()を使え →表示している領域＋ αだけレンダリングしてくれる

用法、用量を守って お使いください

用法、用量を守って お使いください