Upgrade to Pro — share decks privately, control downloads, hide ads and more …

5000行のUITableViewを差分更新する / Difference update UITableView with 5000 rows

5000行のUITableViewを差分更新する / Difference update UITableView with 5000 rows

iOSDC Japan 2018s
2018/09/01 14:20〜 Track A レギュラートーク(30分)

CfP: https://fortee.jp/iosdc-japan-2018/proposal/530b6839-cc50-452c-9682-897afa9db18c

YouTube Archive: TBA

ばんじゅん🍓

September 01, 2018
Tweet

More Decks by ばんじゅん🍓

Other Decks in Technology

Transcript

  1. ͹Μ͡ΎΜ!CBOKVO
    J04%$+BQBO
    ߦͷ6*5BCMF7JFXΛࠩ෼ߋ৽͢Δ

    View full-size slide

  2. ͹Μ͡ΎΜ!CBOKVO
    ࣗݾ঺հ
    'MJDL4,,4,,ΩʔϘʔυ J04

    -PWF-JWFSϥΠϒϑΥτੜ੒ NBD04

    1IPUP4UVEJP1MBZFS

    ϥΠτχϯάΫϩϚΩʔΩϟϓνϟ NBD04


    ΞΠϚεϋοΧιϯɾϓϦοΧιϯ
    NBD04ʙ
    ͱ͔

    View full-size slide

  3. ͓͠͝ͱ
    ͋ΒΏΔϞϊͷ؅ཧΛࢧԉ͢ΔΫϥ΢υαʔϏε
    ୨Է͠ ିग़͠ 1PDLFU

    View full-size slide

  4. https://nrstudy.connpass.com
    ΋͘΋͘ձ΍ͬͯ·͢ ฏ೔໷ ݄

    View full-size slide

  5. ࠓ೔࿩͢͜ͱ
    ୈ̍෦

    6*5BCMF7JFXͰࠩ෼ߋ৽
    ୈ̎෦

    ύϑΥʔϚϯεղੳ

    View full-size slide

  6. ࠓ೔࿩͢͜ͱ
    "5BCMF7JFXࠩ෼ߋ৽΍ͬͯΔ
    "6*ͷࠩ෼ߋ৽ͬͯͲΜͳ΋ͷ͔஌ͬͯΔ 

    ࡢ೔ͷࠩ෼ߋ৽ͷ࿩͖͍ͨ
    ͦͷલʹɾɾɾ͢͜͠Ξϯέʔτ

    View full-size slide

  7. 6*5BCMF7JFXͰࠩ෼ߋ৽Λ࢖͓͏
    ୈ̍෦

    View full-size slide

  8. 6*5BCMF7JFX
    ߦ਺͕ͨ͘͞Μʹͳͬͯ΋଎͍
    6*7JFXγϦʔζͷͳ͔Ͱ͍ͪ͹Μ޷͖

    View full-size slide

  9. 6*5BCMF7JFXͷߋ৽खஈ
    શ෦ߋ৽ ࠩ෼ߋ৽
    reloadData()
    deleteRows(at:with:)
    insertRows(at:with:)
    ʹ࢖͑Δϝιου
    [IndexPath]
    ͔ΜͨΜʂ
    Ξχϝʔγϣϯͳ͠ʂ
    ͍ͨ΁Μ

    View full-size slide

  10. reloadData()
    શ෦ߋ৽ ࠩ෼ߋ৽
    deleteRows(at:with:)
    insertRows(at:with:)

    View full-size slide

  11. ࠩ෼ߋ৽ΛͲ͏࣮ݱ͢Δ͔
    ࠩ෼ͷ[IndexPath]Λৗʹਖ਼֬ʹࢦఆ͢Δ͚ͩɾɾɾ
    ࡟আૢ࡞ͨ͠ߦ

    ϑΟϧλʔͰফ͑ͨߦ

    ϑΟϧλʔղআͰ࠶౓දࣔ͢Δߦ
    ߋ৽લޙͷσʔλͷEJGGΛऔΕΔͳΒɺ΋ͬͱͣͬͱ؆୯ʹͳΔ

    View full-size slide

  12. ࠩ෼ߋ৽ΛͲ͏࣮ݱ͢Δ͔
    ࠩ෼ͷ[IndexPath]Λৗʹਖ਼֬ʹࢦఆ͢Δ͚ͩɾɾɾ
    ࡟আૢ࡞ͨ͠ߦ

    ϑΟϧλʔͰফ͑ͨߦ

    ϑΟϧλʔղআͰ࠶౓දࣔ͢Δߦ

    EJGGΛ࢖͓͏
    લޙͷσʔλΛΈͯɺEJGGͰ<*OEFY1BUI>ग़͢

    View full-size slide

  13. EJ⒎ͱQBUDIBQQMZ
    insertRows(…)
    deleteRows(…)
    EJGG
    QBUDIBQQMZ
    old new



    +
    %BUB4PVSDF

    View full-size slide

  14. ࠩ෼ߋ৽͸͕͍͍͜͜
    ΩϨΠͰ෼͔Γ΍͍͢Ξχϝʔγϣϯ
    σʔλૢ࡞Ͱ*OEFY1BUIΛؾʹ͠ͳ͍ͰࡁΉ


    View full-size slide

  15. طଘΞϓϦࠩ෼ߋ৽
    ଟ਺ߦΛѻ͏طଘΞϓϦ΋ɺ

    ͦΖͦΖࠩ෼ߋ৽ʹͯ͠ɺ

    ָͯ͠ΩϨΠʹΞχϝʔγϣϯ͍ͨ͠ʂʂʂ

    View full-size slide

  16. طଘΞϓϦ˞Πϝʔδ
    ฤूͰ͖Δ

    ը໘
    ௥ՃͰ͖Δ

    ը໘

    View full-size slide

  17. ࠩ෼ߋ৽͍ΕͯΈͨ
    private var filteredSections: [Section] = [] {
    didSet {
    tableView.reloadData()
    }
    }

    View full-size slide

  18. ࠩ෼ߋ৽͍ΕͯΈͨ
    private var filteredSections: [Section] = [] {
    didSet {
    tableView.animateRowAndSectionChanges(
    oldData: oldValue,
    newData: filteredSections)
    }
    }

    View full-size slide

  19. ߦͰ࡟আͱϑΟϧλʔ
    ಛʹϑΟϧλʔ஗͗͢ͳ͍ɾɾɾ
    P0 ͖ͬ͞ͷ͸ເͩͬͨͷ͔

    ࠩ෼ߋ৽͍ΕͯΈͨ

    View full-size slide

  20. SFMPBE%BUBͷ΄͏͕Ϛγ
    ʜͱݴΘΕͳ͍ͨΊʹ

    View full-size slide

  21. ύϑΥʔϚϯεղੳ͠Α͏
    ୈ̎෦

    View full-size slide

  22. ύϑΥʔϚϯεղੳ͠Α͏
    "
    "
    #
    /4-PH
    $
    צ

    View full-size slide

  23. ύϑΥʔϚϯεղੳ͠Α͏
    ܭଌͰ͖ͳ͍΋ͷ͸վળͰ͖ͳ͍

    View full-size slide

  24. 5JNF1SPpMFSΛ͔ͭ͏

    View full-size slide

  25. 5JNF1SPpMFSͰΘ͔Δ͜ͱ
    ΞϓϦ࣮ߦதͷ$16ෛՙͷ࣌ܥྻͷάϥϑ
    ֤εϨουͰɺͲͷఔ౓ͷෛՙ͕͔͋ͬͨ
    ελοΫτϨʔεͷ֤ஈͷෛՙ ͔͔ͬͨ࣌ؒ

    View full-size slide

  26. 5JNF1SPpMFSͰΘ͔Δ͜ͱ
    ΞϓϦ࣮ߦதͷ$16ෛՙͷ࣌ܥྻͷάϥϑ
    ֤εϨουͰɺͲͷఔ౓ͷෛՙ͕͔͋ͬͨ
    ελοΫτϨʔεͷ֤ஈͷෛՙ ͔͔ͬͨ࣌ؒ

    View full-size slide

  27. 5JNF1SPpMFSͰΘ͔Δ͜ͱ
    ΞϓϦ࣮ߦதͷ$16ෛՙͷ࣌ܥྻͷάϥϑ
    ֤εϨουͰɺͲͷఔ౓ͷෛՙ͕͔͋ͬͨ
    ελοΫτϨʔεͷ֤ஈͷෛՙ ͔͔ͬͨ࣌ؒ

    View full-size slide

  28. ߋ৽׬ྃ·Ͱͷ߹ܭ࣌ؒ
    UPUBMT
    EJGG QBUDI
    ˞3FMFBTFCVJME
    ߦˠߦ

    View full-size slide

  29. ߋ৽׬ྃ·Ͱ վྑޙ

    UPUBMT
    EJGG QBUDI
    ˞τϨʔυΦϑ͋Γ
    ߦˠߦ

    View full-size slide

  30. ͲΕ͘Β͍ɺ஗͍
    ׈Β͔ͳΞχϝʔγϣϯ GQT
    T

    'JSFCBTFͷʮ஗͍ϨϯμϦϯάʯT ͕Ҏ্

    'JSFCBTFͷʮϑϦʔζͨ͠ϑϨʔϜʯT ͕Ҏ্

    T

    T

    ͜ͷ͋ͨΓʹऩΊ͍ͨ

    View full-size slide

  31. ࠩ෼ߋ৽ϥΠϒϥϦ
    ػೳɾ଎౓ɾطଘઃܭ΁ͷӨڹ౓͕ҟͳΔ
    %XJGGUʜɹɹߦن໛Ͱ͸ϝϞϦ֬อͰ͖ͳ͍
    %JGGFSʜɹɹEJGG଎౓͕΍΍஗͍
    )FDLFM%JGG
    %FFQ%JGG
    %BUB4PVSDFT
    3Y%BUB4PVSDFT
    ϚϧνηΫγϣϯඇରԠ
    ઃܭมߋ͕ඞཁ

    View full-size slide

  32. $PMMFDUJPOJOEFY
    struct Section: Collection {
    var header: String?
    var items: [Item]
    // Diffable
    var diffIdentifier: AnyHashable
    // Collection
    var startIndex: Int {return items.startIndex}
    var endIndex: Int {return items.endIndex}
    subscript(position: Int) -> Item {return items[position]}
    func index(after i: Int) -> Int {return items.index(after: i)}
    }

    View full-size slide

  33. $PMMFDUJPOJOEFY
    ruct Section: Collection {
    var header: String?
    var items: [Item]
    // Diffable
    var diffIdentifier: AnyHashable
    // Collection

    View full-size slide

  34. $16΄΅ͰT௒͑
    $PMMFDUJPOJOEFY

    View full-size slide

  35. *OTUSVNFOUTجຊίϚϯυ
    ➡ɹ⬇ɹ➡ɹ⬇ɹ➡ɹ⬇ɹ➡ɹ⬇ɹ
    $PMMFDUJPOJOEFY

    View full-size slide

  36. JOEFYऔಘʹNJOɾɾɾ⁉
    $PMMFDUJPOJOEFY

    View full-size slide

  37. $PMMFDUJPOJOEFYͷܭࢉྔ
    JOEFY͸3BOEPN"DDFTT$PMMFDUJPOͳΒఆ਺࣌ؒ0

    ͦ͏Ͱͳ͚Ε͹ઢܗ࣌ؒ0 /

    /// - Complexity: O(1) if the collection conforms to
    /// `RandomAccessCollection`; otherwise, O(*k*), where *k* is the
    absolute
    /// value of `distance`.
    func index(_ i: Index, offsetBy distance: Int) -> Index
    swift/stdlib/public/core/Collection.swift

    View full-size slide

  38. 3BOEPN"DDFTT$PMMFDUJPOΛ࢖͓͏
    ˠUPUBMTऑʹͳΔ ͍͍ͩͨഒߴ଎Խ

    extension Section: RandomAccessCollection {}

    View full-size slide

  39. 4FDUJPO*UFN&RVBUBCMF
    struct Section: RandomAccessCollection {
    var header: String?
    var items: [Item]
    // Diffable
    var diffIdentifier: AnyHashable
    // Collection
    var startIndex: Int {return items.startIndex}
    var endIndex: Int {return items.endIndex}
    subscript(position: Int) -> Item {return items[position]}
    func index(after i: Int) -> Int {return items.index(after: i)}
    }

    View full-size slide

  40. $PMMFDUJPO@GBJM&BSMZ3BOHF$IFDLͰ
    ➡ɹ⬇ɹ➡ɹ⬇ɹ➡TXJGU@HFU(FOFSJD.FUBEBUB
    4FDUJPO*UFN&RVBUBCMF

    View full-size slide

  41. $PMMFDUJPO@GBJM&BSMZ3BOHF$IFDLͰ
    ➡ɹ⬇ɹ➡ɹ⬇ɹ➡TXJGU@HFU(FOFSJD.FUBEBUB
    4FDUJPO*UFN&RVBUBCMF

    View full-size slide

  42. (FOFSJDTΛআڈ͠Α͏
    ˠUPUBMTʹͳΔ ͍͍ͩͨഒߴ଎Խ

    @GBJM&BSMZ3BOHF$IFDL͸ؙ͝ͱফ͑Δ ಾ

    struct Section: RandomAccessCollection {

    View full-size slide

  43. QBUDIBQQMZ
    ͜Ε·Ͱͷख๏ͰɺQBUDIͷ࣌ؒ͸มԽ͠ͳ͍
    T T T
    ߦ਺มԽ
    T
    T
    ख๏
    Gen
    Rnd
    Gen
    Rnd
    Gen
    Rnd
    Gen
    Rnd

    View full-size slide

  44. QBUDIBQQMZ
    ͜Ε·Ͱͷख๏ͰɺQBUDIͷ࣌ؒ͸มԽ͠ͳ͍
    ߦ


    Խ

    ͷ
    EJGG

    ϥΠ
    ϒϥ
    Ϧ

    View full-size slide

  45. ࡟আΞχϝʔγϣϯੜ੒
    @TFUVQ"OJNBUJPOT'PS%FMFUFE$FMMT͕ϘτϧωοΫʹͳΓ͕ͪ
    ΞχϝʔγϣϯແޮԽͰ͸ޮՌ͕ͳ͍
    ❌QFSGPSN8JUIPVU"OJNBUJPO❌EJTBCMF"DUJPOT

    View full-size slide

  46. ࡟আΞχϝʔγϣϯੜ੒
    @TFUVQ"OJNBUJPOT'PS%FMFUFE$FMMT͕ϘτϧωοΫʹͳΓ͕ͪ
    ΞχϝʔγϣϯແޮԽͰ͸ޮՌ͕ͳ͍
    ❌QFSGPSN8JUIPVU"OJNBUJPO❌EJTBCMF"DUJPOT

    View full-size slide

  47. ૠೖ਺࡟আ਺
    ૠೖ਺͸૿͑ͯ΋଎౓ʹ
    Өڹ͠ͳ͍
    ࡟আ਺͕૿͑Δͱ஗͍
    ߦʙΛѻ͏ͷ͸

    ͦ΋ͦ΋ݫ͍͠

    View full-size slide

  48. SFMPBE%BUBͷ΄͏͕ྑ͍ͷͰ͸
    ʜͦ͏͍͏ʮͱ͖ʯ΋͋Δ

    View full-size slide

  49. ࠩ෼ߋ৽ͱଟ਺ߦ࡟আͷڞଘ
    ΄ͱΜͲͷࠩ෼ߋ৽ϥΠϒϥϦʹద༻Մೳ
    JOUFSSVQUΫϩʔδϟͰ෼ذͰ͖ΔϥΠϒϥϦ΋͋Δ
    EJGG QBUDIBQQMZ
    SFMPBE%BUB
    ଟ਺࡟আ

    View full-size slide

  50. ࠩ෼ߋ৽ͱଟ਺ߦ࡟আͷڞଘ
    ಘΔ΋ͷ
    ᮢ஋Λ௒͑ͨͱ͖ͷ
    QBUDIͷ଎౓T ഒߴ଎Խ

    ˰UPUBMT ഒߴ଎Խ

    ࣦͳ͏΋ͷ
    ᮢ஋Λ௒͑ͨͱ͖ͷ
    Ξχϝʔγϣϯ

    View full-size slide

  51. ࣍ͷεςοϓ
    "࠷ѱϛϦඵͳΒ0,ͱ͢Δ
    #EJGGΛ΋ͬͱ଎͘͢Δ
    $ϑΥʔϧόοΫͷӨڹΛݮΒ͢
    ͦ͏͍͏ϥΠϒϥϦ͕

    ͋Ε͹ʜ

    View full-size slide

  52. EJ⒎Λ΋ͬͱ଎͘͢Δ
    %JGGFSͷEJGGΑΓ)FDLFMΞϧΰϦζϜ͕଎͍ͷ͸෼͔͍ͬͯΔ
    ϚϧνηΫγϣϯͷѻ͍͸஫ҙ
    ࠩ෼ߋ৽ͭ͘ΔͳΒʜ

    View full-size slide

  53. ϑΥʔϧόοΫͷӨڹΛݮΒ͢
    ςʔϒϧશମͰʮࠩ෼ߋ৽PSreloadDataʯ
    ΑΓ΋
    ηΫγϣϯ͝ͱʹʮࠩ෼ߋ৽PSreloadSectionsʯ
    ଟ਺࡟আͷηΫγϣϯʹר͖ࠐ·Εͣࠩ෼ߋ৽Ͱ͖Δ
    ͜Ε΋஗͘ͳΒͳ͍

    View full-size slide

  54. ηΫγϣϯ͝ͱʹSFMPBEGBMMCBDL͢Δ

    ࠩ෼ߋ৽ϥΠϒϥϦ
    ҆қʹGBMMCBDL͢Δίϯηϓτ࣮૷CBOKVO#JH%JGGFS
    ηΫγϣϯ͝ͱʹEJGG ηΫγϣϯ·͕ͨͳ͍

    ߋ৽લʹදࣔ͞Ε͍ͯͳ͍ηΫγϣϯ͸SFMPBE4FDUJPOT
    -JTU%JGGͰEJGGܭࢉ )FDLFM

    ଟ਺࡟আ͕͋ΔͳΒSFMPBE4FDUJPOT

    View full-size slide

  55. ߋ৽׬ྃ·Ͱ վྑޙ

    UPUBMT
    EJGG QBUDI
    ߦˠߦ
    EJGG QBUDI
    ߦˠߦ
    UPUBMT

    View full-size slide

  56. ·ͱΊ
    ࠩ෼ߋ৽͸Ξχϝʔγϣϯ΋ϩδοΫ΋ΩϨΠ
    كʹɺ͘͢͝஗͍έʔε͕͋ΔͷͰ஫ҙ
    ਺ߦͷ௥Ճ࡟আ͚ͩͰ͸ͳ͘ʮ΄ͱΜͲ࡟আʯ΋ݟ͓ͯ͜͏
    EJGGΛ଎͘ɺQBUDIBQQMZΛ஗ͤͣ͘ɺշదͳࠩ෼ߋ৽

    View full-size slide