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

Elm 開発サンプル

Yosuke Torii
September 22, 2018

Elm 開発サンプル

「Elm でユーザーストーリーマッピングのツールを作ってみた」の完全版

Yosuke Torii

September 22, 2018
Tweet

More Decks by Yosuke Torii

Other Decks in Technology

Transcript

  1. &MN։ൃαϯϓϧ
    &MNೖ໳ϋϯζΦϯʹͯ
    :PTVLF5PSJJ

    View Slide

  2. ࣗݾ঺հ
    :PTVLF5PSJJ!KJOKPS
    w &MNྺ೥΄Ͳ
    w &MNຊࣥචத
    w *EFJO*ODۈ຿
    ରԠʂʢॏཁʣ

    View Slide


  3. ϋϯζΦϯ͓ർΕ༷Ͱͨ͠

    View Slide

  4. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ

    View Slide

  5. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
    ϥΠϒϥϦͷυΩϡϝϯτ΋ಡΊΔΑ͏ʹͳͬͨ

    View Slide

  6. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
    ϥΠϒϥϦͷυΩϡϝϯτ΋ಡΊΔΑ͏ʹͳͬͨ
    ؆୯ͳ50%0ΞϓϦ͸ॻ͚ͨ

    View Slide

  7. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
    ϥΠϒϥϦͷυΩϡϝϯτ΋ಡΊΔΑ͏ʹͳͬͨ
    ؆୯ͳ50%0ΞϓϦ͸ॻ͚ͨ
    Ͱ΋ʜ

    View Slide

  8. ͩΜͩΜγϯλοΫεʹ׳Ε͖ͯͨ
    ϥΠϒϥϦͷυΩϡϝϯτ΋ಡΊΔΑ͏ʹͳͬͨ
    ؆୯ͳ50%0ΞϓϦ͸ॻ͚ͨ
    Ͱ΋ʜ
    ·ͱ΋ͳΞϓϦ͕׬੒͢ΔΠϝʔδ͕࣋ͯͳ͍

    View Slide

  9. ࠓ೔͓఻͍͑ͨ͜͠ͱ

    View Slide

  10. ࠓ೔͓఻͍͑ͨ͜͠ͱ

    &MNͰී௨ͷΞϓϦ͕ී௨ʹ࡞ΕΔ

    View Slide

  11. ϢʔβʔετʔϦʔϚοϐϯά

    View Slide

  12. &MNͰ
    ϢʔβʔετʔϦʔϚοϐϯά
    ͷπʔϧΛ࡞ͬͯΈͨ

    View Slide

  13. TUPSZOPUFTIFSPLVBQQDPN
    4UPSZ/PUFT .71WFS

    View Slide

  14. TUPSZOPUFTIFSPLVBQQDPN
    4UPSZ/PUFT .71WFS

    ͬ͘͟Γ͍͏ͱɺετʔϦʔʹԊͬͯ
    ΞϓϦέʔγϣϯͷػೳΛݟੵ΋ΔπʔϧͰ͢

    View Slide

  15. ܦҢ

    View Slide

  16. ܦҢ
    w *EFJO*ODͰ։ൃதͷ8FCαʔϏε

    View Slide

  17. ܦҢ
    w *EFJO*ODͰ։ൃதͷ8FCαʔϏε
    w ్த͔ΒεΫϥϜಋೖ

    View Slide

  18. ܦҢ
    w *EFJO*ODͰ։ൃதͷ8FCαʔϏε
    w ్த͔ΒεΫϥϜಋೖ
    w ϢʔβʔετʔϦʔϚοϐϯάͰ΋΍ͬͯΈΔ͔

    View Slide

  19. ܦҢ
    w *EFJO*ODͰ։ൃதͷ8FCαʔϏε
    w ్த͔ΒεΫϥϜಋೖ
    w ϢʔβʔετʔϦʔϚοϐϯάͰ΋΍ͬͯΈΔ͔
    w ୭΋෇ᝦΛݟͳ͘ͳͬͨ
    w ੮͔Βԕ͍ϦϞʔτϫʔΫଟ͍

    View Slide

  20. ܦҢ
    w *EFJO*ODͰ։ൃதͷ8FCαʔϏε
    w ్த͔ΒεΫϥϜಋೖ
    w ϢʔβʔετʔϦʔϚοϐϯάͰ΋΍ͬͯΈΔ͔
    w ୭΋෇ᝦΛݟͳ͘ͳͬͨ
    w ੮͔Βԕ͍ϦϞʔτϫʔΫଟ͍
    w ΦϯϥΠϯͷπʔϧͰ΋࡞ͬͯΈΔ͔
    w ΄΅झຯ

    View Slide


  21. %&.0

    View Slide


  22. ղઆ

    View Slide

  23. ߏ੒
    w %#1PTUHSF42-
    w 4FSWFS/PEFKT &YQSFTT5ZQF4DSJQU

    w 'SPOUFOE&MN

    View Slide

  24. ߏ੒
    w %#1PTUHSF42-
    w 4FSWFS/PEFKT &YQSFTT5ZQF4DSJQU

    w 'SPOUFOE&MN

    View Slide

  25. Ϗϧυ
    w OQNTDSJQUͰେମͲ͏ʹ͔ͳΔ
    w XFCQBDL΋࢖͓͏ͱࢥ͑͹࢖͑Δ
    w EPDLFSDPNQPTF

    View Slide

  26. σϓϩΠɾͦͷଞ
    w )FSPLV
    w $JSDMF$*

    View Slide

  27. $44
    w ී௨ͷ$44ϑΝΠϧ DTT

    w ΠϯϥΠϯΛਪ঑͍ͯ͠ΔΘ͚Ͱ͸ͳ͍
    w είʔϓ͕ཉ͚͠Ε͹FMNDTTͱ͔΋͋Δ

    View Slide

  28. ϩάΠϯ
    w ී௨ͷ0"VUI
    w QBTTQPSUϞδϡʔϧ࢖༻
    w GPSNཁૉͰը໘ભҠ
    w DPPLJF

    View Slide

  29. ಉ࣌ฤू

    View Slide

  30. ಉ࣌ฤू
    .PEFM
    7JFX
    6QEBUF

    View Slide

  31. ಉ࣌ฤू
    %#
    .PEFM
    7JFX
    6QEBUF

    View Slide

  32. ಉ࣌ฤू
    %#
    .PEFM
    7JFX
    6QEBUF
    .PEFM
    7JFX
    6QEBUF

    View Slide

  33. ಉ࣌ฤू
    %#
    .PEFM
    7JFX
    6QEBUF
    .PEFM
    7JFX
    6QEBUF
    1
    1

    View Slide

  34. ಉ࣌ฤू
    %#
    .PEFM
    7JFX
    6QEBUF
    .PEFM
    7JFX
    6QEBUF
    1
    1
    1

    View Slide

  35. ಉ࣌ฤू
    %#
    .PEFM
    7JFX
    6QEBUF
    .PEFM
    7JFX
    6QEBUF
    1
    1
    1
    1

    View Slide

  36. ಉ࣌ฤू
    %#
    .PEFM
    7JFX
    6QEBUF
    .PEFM
    7JFX
    6QEBUF
    1
    1
    1
    1
    1

    View Slide

  37. ಉ࣌ฤू
    %#
    .PEFM
    6QEBUF
    1
    1
    1
    1
    .PEFM
    6QEBUF
    1
    1
    1
    1
    7JFX
    7JFX

    View Slide

  38. ಉ࣌ฤू
    1

    View Slide

  39. ϧʔςΟϯά
    w ϋογϡͰϫʔΫεϖʔε੾Γସ͑
    w Bʜ

    View Slide

  40. ϧʔςΟϯά
    w ϋογϡͰϫʔΫεϖʔε੾Γସ͑
    w Bʜ
    w 3PVUFΛܕͰఆ͓ٛͯ͘͠ͱศར

    View Slide

  41. ϧʔςΟϯά
    w #SPXTFSBQQMJDBUJPOΛ࢖͏

    View Slide

  42. ϧʔςΟϯά
    w #SPXTFSBQQMJDBUJPOΛ࢖͏

    View Slide

  43. ϧʔςΟϯά
    .PEFM
    7JFX
    6QEBUF
    %#

    View Slide

  44. ϧʔςΟϯά
    .PEFM
    7JFX
    6QEBUF
    %#
    PO6SM3FRVFTU

    View Slide

  45. ϧʔςΟϯά
    7JFX
    6QEBUF
    %#
    PO6SM3FRVFTU
    PO6SM$IBOHF
    .PEFM

    View Slide

  46. ϧʔςΟϯά
    7JFX
    6QEBUF
    %#
    PO6SM3FRVFTU
    PO6SM$IBOHF
    .PEFM
    #3322a08…

    View Slide

  47. ϧʔςΟϯά
    7JFX
    6QEBUF
    %#
    PO6SM3FRVFTU
    PO6SM$IBOHF
    .PEFM
    #3322a08…
    Workspace
    “3322a08…”

    View Slide

  48. ϧʔςΟϯά
    .PEFM
    7JFX
    6QEBUF
    %#
    PO6SM3FRVFTU
    PO6SM$IBOHF
    #3322a08…
    Workspace
    “3322a08…”

    View Slide

  49. ϧʔςΟϯά
    .PEFM
    7JFX
    6QEBUF
    %#
    PO6SM3FRVFTU
    PO6SM$IBOHF
    #3322a08…
    Workspace
    “3322a08…”

    View Slide

  50. ϧʔςΟϯά
    .PEFM
    6QEBUF
    %#
    PO6SM3FRVFTU
    PO6SM$IBOHF
    #3322a08…
    Workspace
    “3322a08…”
    7JFX

    View Slide

  51. εΫϩʔϧͷ࣮૷

    View Slide

  52. εΫϩʔϧͷ࣮૷

    View Slide

  53. εΫϩʔϧͷ࣮૷
    6QEBUF
    .PEFM
    scroll = { x = .., y = .. }

    View Slide

  54. εΫϩʔϧͷ࣮૷
    6QEBUF
    .PEFM
    scroll = { x = .., y = .. }

    View Slide

  55. %SBHBOE%SPQͷ࣮૷

    View Slide

  56. %SBHBOE%SPQͷ࣮૷
    6QEBUF
    .PEFM
    type_ = Note 1
    start = { x = .., y = .. }

    current = { x = .., y = .. }

    View Slide

  57. ඳըͷύϑΥʔϚϯεΛߟྀ
    [ viewBackground backgroundState
    , viewNotes notes
    , viewDraggingNote dragState
    ]

    View Slide

  58. ඳըͷύϑΥʔϚϯεΛߟྀ
    [ lazy viewBackground backgroundState
    , lazy viewNotes notes
    , viewDraggingNote dragState
    ]

    View Slide

  59. ඳըͷύϑΥʔϚϯεΛߟྀ
    [ lazy viewBackground backgroundState
    , lazy viewNotes notes
    , viewDraggingNote dragState
    ]
    1VSF$PNQPOFOUXJUIPVUUIF)FBEBDIF

    View Slide

  60. ෳࡶ͞ʹཱͪ޲͔͏

    View Slide

  61. ෳࡶ͞ʹཱͪ޲͔͏

    View Slide

  62. ෳࡶ͞ʹཱͪ޲͔͏

    w ΞΫηε੍ޚ

    View Slide

  63. ෳࡶ͞ʹཱͪ޲͔͏

    w ΞΫηε੍ޚ
    %BUB
    6QEBUF
    JOUFSGBDF

    View Slide


  64. ·ͱΊ

    View Slide

  65. ·ͱΊ
    &MNͰී௨ͷΞϓϦ͕ී௨ʹ࡞ΕΔ
    w Ұൠతͳ41"ʹඞཁͳಓ۩͸͋Δ
    w ྗΛೖΕ͍ͨͱ͜ΖҎ֎͸खΛൈ͍͍͍ͯ

    View Slide

  66. 5IBOLZPV
    !KJOKPS

    View Slide