ほんとうは恐ろしいImage.network
496 Views
November 19, 24
スライド概要
Swiftエンジニアが猫画像を表示するアプリを開発する様子を紹介しています。アプリは簡単に実装できると思ったが、実際にはImage.network()がキャッシュしないことや、ListViewが全てをレンダリングするため、急激なリクエストが発生してしまいました。解決策として、CachedNetworkImageを用いたキャッシュ処理やListView.builderを使った効率的なレンダリングを提案しています。
コードを書いて28年 KDDI DIGITAL GATEにパートナーとして参画中。 訃報自動送信/生存確認プラットフォーム 「tayorie」のco-founder。
関連スライド
各ページのテキスト
ほんとうは恐ろしい 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()を使え →表示している領域＋ αだけレンダリングしてくれる
用法、用量を守って お使いください
用法、用量を守って お使いください