Elm 開発サンプル

Dc32f175bec875eed2147b404f9bdc5a?s=47 Yosuke Torii
September 22, 2018

Elm 開発サンプル

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

Dc32f175bec875eed2147b404f9bdc5a?s=128

Yosuke Torii

September 22, 2018
Tweet

Transcript

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

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

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

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

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

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

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

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

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

  10. ࠓ೔͓఻͍͑ͨ͜͠ͱ &MNͰී௨ͷΞϓϦ͕ී௨ʹ࡞ΕΔ

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

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

  13. TUPSZOPUFTIFSPLVBQQDPN 4UPSZ/PUFT .71WFS

  14. TUPSZOPUFTIFSPLVBQQDPN 4UPSZ/PUFT .71WFS ͬ͘͟Γ͍͏ͱɺετʔϦʔʹԊͬͯ ΞϓϦέʔγϣϯͷػೳΛݟੵ΋ΔπʔϧͰ͢

  15. ܦҢ

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

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

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

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

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

    ੮͔Βԕ͍ ϦϞʔτϫʔΫଟ͍ w ΦϯϥΠϯͷπʔϧͰ΋࡞ͬͯΈΔ͔ w ΄΅झຯ
  21. %&.0

  22. ղઆ

  23. ߏ੒ w %#1PTUHSF42- w 4FSWFS/PEFKT &YQSFTT 5ZQF4DSJQU  w 'SPOUFOE&MN

  24. ߏ੒ w %#1PTUHSF42- w 4FSWFS/PEFKT &YQSFTT 5ZQF4DSJQU  w 'SPOUFOE&MN

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

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

  27. $44 w ී௨ͷ$44ϑΝΠϧ DTT  w ΠϯϥΠϯΛਪ঑͍ͯ͠ΔΘ͚Ͱ͸ͳ͍ w είʔϓ͕ཉ͚͠Ε͹FMNDTTͱ͔΋͋Δ

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

  29. ಉ࣌ฤू

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

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

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

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

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

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

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

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

    1 1 1 1 7JFX 7JFX
  38. ಉ࣌ฤू 1

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

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

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

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

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

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

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

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

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

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

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

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

  51. εΫϩʔϧͷ࣮૷

  52. εΫϩʔϧͷ࣮૷

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

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

    = .. }
  55. %SBHBOE%SPQͷ࣮૷

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

    x = .., y = .. }
 current = { x = .., y = .. }
  57. ඳըͷύϑΥʔϚϯεΛߟྀ [ viewBackground backgroundState , viewNotes notes , viewDraggingNote dragState

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

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

    viewDraggingNote dragState ] 1VSF$PNQPOFOUXJUIPVUUIF)FBEBDIF
  60. ෳࡶ͞ʹཱͪ޲͔͏

  61. ෳࡶ͞ʹཱͪ޲͔͏ wܕ

  62. ෳࡶ͞ʹཱͪ޲͔͏ wܕ w ΞΫηε੍ޚ

  63. ෳࡶ͞ʹཱͪ޲͔͏ wܕ w ΞΫηε੍ޚ %BUB 6QEBUF JOUFSGBDF

  64. ·ͱΊ

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

  66. 5IBOLZPV !KJOKPS