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

Building native apps with scala.js

Building native apps with scala.js

Shinpei Maruyama

April 03, 2018
Tweet

More Decks by Shinpei Maruyama

Other Decks in Programming

Transcript

  1. CZ͠Μ΃͍BLBೣܕ஝Իػ
    #VJMEJOHOBUJWF
    BQQTXJUI
    4DBMBKT

    View full-size slide

  2. BCPVUNF
    w ג
    ϝσΟϩϜ
    w ීஈ͸4DBMBͱ͔+4ͱ͔೔ຊޠ
    ͱ͔
    w 1FSM 3VCZ΋ͨ͠ͳΉఔ౓ʹ
    w UXJUUFS!TIJOQFJ

    View full-size slide

  3. BCPVUNF
    w 4DBMBKTͱ
    3FBDU/BUJWFc&MFDUSPO
    ࢖ͬͯ
    झຯΞϓϦॻ͍ͨΓͯ͠Δ
    w #BDLMPHΫϥΠΞϯτ &MFDUSPO

    w ίʔυේΤσΟλ 3FBDU/BUJWF

    View full-size slide

  4. લఏ஌ࣝ

    View full-size slide

  5. 4DBMBKT
    w 4DBMBUP+BWB4DSJQUͳτϥϯ
    εύΠϥ
    w ϓϩμΫτͰ࢖͏ͱ͜Ζ͕૿͖͑ͯ
    ͍ͯΔ<ཁग़య>

    View full-size slide

  6. 4DBMBKTϝϦοτ
    w 4DBMBͰ͋Δ͜ͱ
    w ;ͭ͏ʹ4DBMB
    w ҆શ
    w දݱྗߴ͍

    View full-size slide

  7. 4DBMBKTσϝϦοτ
    w 4DBMBͰ͋Δ͜ͱ
    w 4DBMB͔Β+BWB4DSJQUͷੈքΛ
    ৮Ζ͏ͱ͢Δͱ్୺ʹۤ௧͕૿͑Δ
    w ಈతܕ෇͚ϥΠϒϥϦͱ͔ϒϥ΢βͷ
    "1*ͱ͔ʜʜ

    View full-size slide

  8. #VJMEJOHOBUJWF
    BQQTXJUI+4

    View full-size slide

  9. 3FBDU/BUJWF
    w 3FBDUͰωΠςΟϒεϚϗΞϓϦ
    ͕࡞ΕΔ
    w 8FC7JFXͱ͔͡Όͳ͍
    w 3FBDU͕/BUJWFͷϓϨθϯςʔ
    γϣϯ૚Λந৅Խ͍ͯ͠Δ

    View full-size slide

  10. &MFDUSPO
    w +4ͰσεΫτοϓωΠςΟϒΞϓ
    Ϧ͕࡞ΕΔ
    w த਎͸΄΅ϒϥ΢βΈ͍ͨͳ͔Μ͡

    View full-size slide

  11. ϝϦοτ
    w +4Ͱ͋Δ͜ͱ
    w ࢲݟ͚ͩͲɺωΠςΟϒॻ͚ΔϓϩάϥϚΑΓ+4ॻ
    ͚ΔϓϩάϥϚͷ΄͏͕਺͕ଟ͍
    w 6*૊Ήͱ͖ͷ։ൃαΠΫϧ͕ૣ͘ճΔ
    w ׳ΕΔͱωΠςΟϒͷϏϧυ଴͕ͪ࣌ؒΉ͠Ζ͠Μ
    Ͳ͘ͳΔ
    w 91MBUͰ͋Δ͜ͱ
    w ͪΐͬͱਂೖΓ͢Δͱࢮ͵ͷͰ͜ͷ఺͸ແࢹ͠·͢

    View full-size slide

  12. Ϟνϕʔγϣϯ

    View full-size slide

  13. ຊԻ
    w 4DBMBͰωΠςΟϒΞϓϦॻ͖ͨ
    ͍
    w ͳͥͳΒΘΕΘΕ͸4DBMB͕޷͖
    ͔ͩΒ
    w ຊԻͰݴ͏ͱ͜Εׂ͕

    View full-size slide

  14. ݐલ
    w (6*ΞϓϦέʔγϣϯ͸ෳࡶͳঢ়ଶ
    Λ࣋ͭͨΊɺߏங͢Δͷ͕ඇৗʹΉ
    ͔͍ͣ͠
    w ෳࡶͳ໰୊ྖҬʹରͯ͠͸4DBMBͷ
    Α͏ͳڧྗͳݴޠͰཱͪ޲͔͍͍ͨ

    View full-size slide

  15. ϐίʔϯʂ
    4DBMBKTͷػӡʂ

    View full-size slide

  16. ൃ૝
    w +4ͰωΠςΟϒΞϓϦॻ͚ΔͳΒ
    4DBMBKTͰωΠςΟϒΞϓϦॻ͚
    Δ͡ΌΜ
    w ѱຐతͻΒΊ͖ʜʜʂ

    View full-size slide

  17. ཱͪ޲͔͏΂͖น
    ͦͷ

    View full-size slide

  18. ϏϧυपΓͷ໰୊

    View full-size slide

  19. ϏϧυपΓͷ໰୊
    w ͦ΋ͦ΋+4Ͱ͋Δఔ౓Ҏ্ෳࡶͳ
    (6*ΞϓϦΛ࡞ΔͳΒɺXFCQBDL
    ͕લఏͱͳ͍ͬͯΔ
    w 4DBMBKT͸TCUͰϏϧυ͢Δલఏ

    View full-size slide

  20. ϏϧυपΓͷ໰୊
    w 4DBMBKTͷMPBEFS͋Δɻ͋Δʹ
    ͸͋Δ͕ʜʜ
    w ڊେϏϧυγεςϜͱڊେϏϧυγ
    εςϜΛڊେ࿈݁͢Δͷ͸ͪΐͬ
    ͱʜʜʢݸਓͷݟղͰ͢ʣ

    View full-size slide

  21. ཱͪ޲͔͏΂͖น
    ͦͷ

    View full-size slide

  22. ΍ΘΒ͔͘࡞Γ͍ͨ
    ෦෼
    WT
    ߗ͘࡞Γ͍ͨ෦෼

    View full-size slide

  23. ॊΒ͔͍΄͏͕͍͍෦෼
    w ͱ͘ʹ3FBDU/BUJWFͱ͔Ͱ΍ΔͳΒɺ7JFX
    पΓͷίʔυ͸ૉͷ+4ͷ΄͏ָ͕ͩͬͨΓ
    ͢Δ
    w ϓϨʔϯͳΦϒδΣΫτ \lBzlCz^Έ͍ͨ
    ͳ΍ͭ
    ଟ༻͢Δ͠ɺ։ൃͯ͠ΔؒʹΩʔ΋
    ΨϯΨϯมΘΔ
    w ฤू֬ೝͷαΠΫϧΛ͸΍͘ճ͍ͨ͠

    View full-size slide

  24. ߗ͍΄͏͕͍͍෦෼
    w ͱ͸ݴ͑ɺෳࡶͳঢ়ଶ؅ཧ΍ϩδο
    ΫΛ+4Ͱॻ͘ͷ͸ͭΒ͍ɻ4DBMB
    ͳΒͳ͋ʜʜͬͯࢥ͏͜ͱଟ͍

    View full-size slide

  25. ιϦϡʔγϣϯͷ
    ͝঺հ

    View full-size slide

  26. ιϦϡʔγϣϯ
    w 6*૚͸ૉ௚ʹ+4ͷ6*ϑϨʔϜϫʔ
    ΫͰͦͷ··ॻ͘
    w Ϟσϧ૚ҎԼΛ4DBMBKTͰॻ͘

    View full-size slide

  27. TCU

    WVFͩͱ͔KTY
    TDBMB
    JNQPSUͯ͠࢖͏
    DPNQJMFEKT
    DPNQJMF͢Δ
    XFCQBDL

    View full-size slide

  28. .78
    7JFX
    8IBUFWFS
    .PEFM
    6*
    -BZFS
    .PEFM
    -BZFS

    View full-size slide

  29. .78
    7JFX
    8IBUFWFS
    .PEFM
    &MFDUSPO΍Β
    3FBDU/BUJWF΍Βͷ
    ౎߹ʹৼΓճ͞ΕΔ
    ෦෼
    Ͳ͏ͤ
    ࣗ෼Ͱ
    ઃܭͯ͠
    ॻ͘෦෼

    View full-size slide

  30. XJUI4DBMBKT
    7VFPS3FBDU/BUJWF
    .PEFM
    3FBDU
    7VF
    FUDʜ
    4DBMBKT
    $PNNBOE 2VFSZ
    &WFOU

    View full-size slide

  31. 7VFPS3FBDU/BUJWF
    7VFKTXJUI4DBMBKT
    .PEFM 4DBMBKT
    $PNNBOE 2VFSZ
    &WFOU
    JOWPLF
    ෭࡞༻
    3FBDU
    7VF
    FUDʜ

    View full-size slide

  32. XJUI4DBMBKT
    7VFPS3FBDU/BUJWF
    .PEFM
    3FBDU
    7VF
    FUDʜ
    4DBMBKT
    $PNNBOE 2VFSZ
    &WFOU
    XBUDI

    View full-size slide

  33. 7VFPS3FBDU/BUJWF
    3FBDU
    7VF
    FUDʜ
    7VFKTXJUI4DBMBKT
    .PEFM
    $PNNBOE 2VFSZ
    &WFOU
    OPUJGZ
    4DBMBKT

    View full-size slide

  34. 7VFPS3FBDU/BUJWF
    3FBDU
    7VF
    FUDʜ
    7VFKTXJUI4DBMBKT
    .PEFM
    Ͳ͏ͤ
    ࣗ෼Ͱ
    ઃܭͯ͠
    ॻ͘෦෼
    $PNNBOE 2VFSZ
    &WFOU
    GFUDI

    View full-size slide

  35. 7VFPS3FBDU/BUJWF
    3FBDU
    7VF
    FUDʜ
    σʔλϑϩʔ͸୯ํ޲
    .PEFM
    Ͳ͏ͤ
    ࣗ෼Ͱ
    ઃܭͯ͠
    ॻ͘෦෼
    $PNNBOE 2VFSZ
    &WFOU

    View full-size slide

  36. 3FBDU/BUJWF෦෼

    View full-size slide

  37. 3FBDU/BUJWF෦෼

    View full-size slide

  38. 3FBDU/BUJWF෦෼

    View full-size slide

  39. ;ͭ͏ͷ
    3FBDU/BUJWF

    View full-size slide

  40. ;ͭ͏ͷ4DBMB

    View full-size slide

  41. ॴײ
    w ΠϯϑϥετϥΫνϟϨΠϠʔͰ͸4DBMB͔Β
    +4ͷϥΠϒϥϦ΍"1*৮Δͷ͸ආ͚ΒΕͳ͍
    w ͕͚ͬ͜͜͜͏ͭΒ͍
    w ͦ͏ߟ͑Δͱɺ+4ͷ"1*ୟ͖·͘ΔΑ͏ͳ΍ͭ
    ͸ͪΐͬͱਏͦ͏
    w 4DBMBͰΞϓϦॻ͚Δ͜ͱࣗମ͸ͱͯ΋ྑ͍ମ
    ݧΛಘΒΕΔ

    View full-size slide

  42. ॴײ
    w ϓϨθϯςʔγϣϯϨΠϠʔ͸ૉͷ
    +4ɺͦͷԼ͸શ෦4DBMBͱ͍͏ͷ
    ͸͔ͳΓମݧ͕ྑ͍
    w 4DBMBͰωΠςΟϒΞϓϦ͸ॻ͚
    ·͢ʂʂʂʂ

    View full-size slide

  43. ·ͱΊ
    w 4DBMBͰωΠςΟϒΞϓϦ͕࡞Γ͍ͨʂͱ
    ͍͏೤͍ࢥ͍͸࣮ݱՄೳͰ͋Δ͜ͱΛݟ͖ͯ
    ·ͨ͠
    w 6*ʹ͍ۙ෦෼͸ɺ+4ͷ··΍Δͱ͏·͍͘
    ͘͜ͱ͕ଟ͍͜ͱΛݟ͖ͯ·ͨ͠
    w ਖ਼௚͜ͷํ޲ੑ͸͔ͳΓ͋Γͩͱࢥ͏ɺͱ͍
    ͍͏ҙݟΛൃ৴͠·ͨ͠

    View full-size slide