$30 off During Our Annual Pro Sale. View Details »

フロントエンドに秩序を取り戻す方法

 フロントエンドに秩序を取り戻す方法

東京Node学園祭2015

fand/amagitakayosi

November 07, 2015
Tweet

More Decks by fand/amagitakayosi

Other Decks in Technology

Transcript

  1. RESTORE
    THE

    ORDER
    ϑϩϯτΤϯυʹடংΛऔΓ໭͢ํ๏
    @amagitakayosi

    View Slide

  2. View Slide

  3. ૣޱͰ͍͖·͢

    View Slide

  4. ࠓ೔࿩͞ͳ͍͜ͱ

    View Slide

  5. ࠷৽ϥΠϒϥϦͷ࢖͍ํ
    ࠷ߴʹඒ͍͠ઃܭ
    /PEFKTͷ࿩

    View Slide

  6. ࠓ೔࿩͢͜ͱ

    View Slide

  7. ϦϑΝΫλϦϯά
    ίʔυن໛ͱΞʔΩςΫνϟ
    ϑϨʔϜϫʔΫಋೖ
    ςετ؀ڥߏங

    View Slide

  8. εϐϦοτ

    View Slide

  9. @amagitakayosi

    View Slide

  10. View Slide

  11. IUUQCMPHIBUFOBOFKQSFHJTUFS
    !!!!!!!!!!
    ࠓ͙͢ొ࿥ʂ
    !!!!!!!!!!!
    !!!!!!!!!!
    !!!!!!!!!!
    !!!!!!!!!!!
    !!!!!!!!!!

    View Slide

  12. View Slide

  13. ͜͜ʹ4प೥ͷਤΛషΔ
    2015-11-07
    ͸ͯͳϒϩά
    प೥

    View Slide

  14. View Slide

  15. View Slide

  16. View Slide

  17. ͜ͷτʔΫͰ͸
    ฤूը໘ϦχϡʔΞϧʹ൐͏
    +4େվ଄ͷ಺༰Λ
    ঺հ͠·͢ʂʂʂʂ

    View Slide

  18. ͸ͯͳϒϩάͷ
    ઃܭࢥ૝

    View Slide

  19. first commitͷը૾ΛషΔ
    ։ൃ։࢝

    View Slide

  20. ͳΔ΂͘ബ͘
    w 1FSM
    w 1MBDLϕʔε03.ͳ͠
    w +4
    w 7BOJMMB+4

    View Slide

  21. http://www.slideshare.net/cho45/yapc-asia-2011
    ࢀߟݩ૆ઃܭऀͷεϥΠυ

    View Slide

  22. https://speakerdeck.com/hitode909/perlfalseshang-
    nimosan-nian-zututoiketerusabisuwozuo-risok-keruji-shu
    ࢀߟαʔόαΠυઃܭͷ࿩

    View Slide

  23. +

    View Slide

  24. +
    ͦͯ͠4೥͕ܦաͨ͠……

    View Slide

  25. ໰୊ൃੜ


    View Slide

  26. ໰୊1
    ڊେͳ
    ϑΝΠϧ

    View Slide

  27. ໰୊2
    ౷Ұײͷͳ͍
    ελΠϧ

    View Slide

  28. ໰୊3
    ςετෆՄ

    View Slide

  29. ஍ಓʹվળ
    ͍ͯͧ͘͠
    ʂʂʂʂʂ

    View Slide

  30. SPLIT
    THE

    CODE
    Mission 1:

    View Slide

  31. ͸ͯͳϒϩάͷJS
    w 5PUBMMJOFT ࣌఺

    w ͦΜͳʹڊେͰ͸ͳ͍͕ʜʜ

    View Slide

  32. admin-user-blog-edit.js
    ߦ
    ࣌఺

    View Slide

  33. View Slide

  34. ฤूը໘ͷJS
    w GPSNΛ؅ཧ͢ΔΫϥε
    w ه๏͝ͱͷػೳ

    8:4*8:( .BSLEPXO ͸ͯͳه๏

    w αΠυόʔ౳ͷίϯϙʔωϯτ

    View Slide

  35. ैདྷͷJS෼ׂ
    w ໊લۭؒͰϞδϡʔϧԽ
    w ϑΝΠϧΛDPODBUͯ͠഑৴

    View Slide

  36. ໊લۭؒ in JS
    w ϞδϡʔϧΛ0CKFDUʹ·ͱΊΔ
    w άϩʔόϧม਺ͷཞ༻Λආ͚Δ

    ݹͷϕετϓϥΫςΟε

    View Slide

  37. ໊લۭؒΛ༻ҙͯ͠

    View Slide

  38. ໊લۭؒʹಥͬࠐΜͰ

    View Slide

  39. JOEFYKT

    'PPKT

    #BSKT

    View Slide

  40. ฤूը໘ͷ+4
    ෼ׂ͍ͨ͠ʜʜ

    View Slide

  41. ໰୊ൃੜ


    View Slide

  42. ґଘؔ܎Ή͔͍ͣ͠
    w DPODBUͷॱ൪ม͑ͨΒյΕΔ
    w ม਺໊Λม͑ΔͱյΕΔ

    View Slide

  43. Foo͕ະఆٛͩͱ
    Τϥʔ

    View Slide

  44. JOEFYKT

    'PPKT

    #BSKT

    View Slide

  45. JOEFYKT

    #BSKT

    'PPKT

    View Slide

  46. JOEFYKT

    #BSKT

    'PPKT

    View Slide

  47. ະఆٛͷม਺Λݕग़Ͱ͖ͳ͍

    View Slide

  48. ະఆٛͷglobalม਺͸
    lintͰνΣοΫͰ͖Δ͚Ͳ……
    ະఆٛͷม਺Λݕग़Ͱ͖ͳ͍

    View Slide

  49. ໊લۭؒͷத͸
    lintͰνΣοΫͰ͖ͳ͍ʂ
    ະఆٛͷม਺Λݕग़Ͱ͖ͳ͍

    View Slide

  50. ࣮ߦ͢Δ·Ͱ
    όά͕Θ͔Βͳ͍ʂ

    View Slide

  51. DPODBUͭΒ͍ʜʜ

    View Slide

  52. View Slide

  53. browserify
    w $PNNPO+4ܗࣜͰϞδϡʔϧΛ؅ཧ
    w ڝ߹ͱൺ΂ɺγϯϓϧʹ࢖͑Δ
    w 3FRVJSF+4ॻ͖ํ͕໘౗
    w 8FCQBDLେ؋ڊ๒ओٛ

    View Slide

  54. ґଘ؅ཧָ͕ʹͳΔ
    w DPODBUॱΛߟ͑ͳ͍Ͱྑ͍
    w ଘࡏ͠ͳ͍ϑΝΠϧΛϩʔυ͢Δͱ

    Τϥʔు͍ͯ͘ΕΔ

    View Slide

  55. Ϗϧυ࣌ʹΤϥʔग़ͯ͘͠ΕΔʂ

    View Slide

  56. browserifyಋೖ
    w ಋೖ։࢝
    w গͣͭ͠$PNNPO+4ʹม׵
    w Ϗϧυͨ͠+4Λ

    طଘͷ+4ͱDPODBU

    View Slide

  57. $PNNPO+4ܗࣜʹ
    ॻ͖௚ͯ͠

    View Slide

  58. ໊લۭؒʹͭͬ͜ΜͰ

    View Slide

  59. ઓུ
    Ϗϧυͨ͠+4Λ
    ͜Ε·Ͱͷ+4ͱDPODBU
    Ϗϧυͨ͠+4
    ͜Ε·Ͱͷ+4

    View Slide

  60. མͱ݀͠

    View Slide

  61. ڞ௨Խ͸ਖ਼͘͠ߦ͏

    View Slide

  62. ڞ௨Խ͸ਖ਼͘͠ߦ͏

    View Slide

  63. ڞ௨Խ͸ਖ਼͘͠ߦ͏
    w ଞͷ໊લۭؒΛࢀরͯ͠Δͱ

    ෼ׂͮ͠Β͍
    w ઌʹϦϑΝΫλϦϯά͢΂͠

    View Slide

  64. ݱࡏͷঢ়گ

    View Slide

  65. admin-user-blog-edit.js
    ߦ
    ߦ

    View Slide

  66. ʙʙ

    View Slide

  67. View Slide

  68. browserify؅ཧԼͷ
    ϑΝΠϧ਺
    concatͯ͠ΔϑΝΠϧ਺

    View Slide

  69. browserify؅ཧԼͷ
    ϑΝΠϧ਺
    concatͯ͠ΔϑΝΠϧ਺
    ࡉ͔͘ϞδϡʔϧԽ͢Δͱ
    ݩϑΝΠϧΑΓଟ͘ͳΔ

    View Slide

  70. View Slide

  71. browserify؅ཧԼͷ
    ϑΝΠϧ਺
    concatͯ͠ΔϑΝΠϧ਺
    ࡉ͔͘ϞδϡʔϧԽ͢Δͱ
    ݩϑΝΠϧΑΓଟ͘ͳΔ
    Զୡͷઓ͍͸
    ͜Ε͔Βͩ
    ʂʂʂʂʂʂʂ

    View Slide

  72. KEEP
    THE

    STYLE
    Mission 2:

    View Slide

  73. ઃܭελΠϧ
    ίʔσΟϯάελΠϧ

    View Slide

  74. Vanilla

    Architecture
    VanillaJSͰͷίϯϙʔωϯτઃܭ

    View Slide

  75. طଘJSͷ໰୊఺
    w σʔλͱ%0.͕ີ݁߹
    w ίϯϙʔωϯτؒͷ࿈ܞ͕Ϝζ͍
    w αʔόͱͷ࿈ܞ͕μϧ͍

    View Slide

  76. σʔλͱDOM͕ີ݁߹
    w %0.ଐੑʹσʔλΛอଘ
    w ͋ͪͪ͜Ͱ%0.ૢ࡞
    w σʔλؒͷ੔߹ੑ͕յΕ΍͍͢

    View Slide

  77. ίϯϙʔωϯτؒͷ࿈ܞ
    w σʔλϑϩʔʹܾ·Γ͕ͳ͍
    w ॥؀ࢀরͰݺͼ߹ͬͨΓ
    w ࠷ѱ%0.ΠϕϯτΛ࢖͏

    View Slide

  78. αʔόͱͷ࿈ܞ
    w )5.-ߏ଄͔ΒσʔλΛ࡞Δ
    w +40/ͱ͔Ͱ͸ͳ͍
    w %#ߋ৽ͷ౓ʹαʔόଆͰඳը

    View Slide

  79. View Slide

  80. ͜͜ΛΫϦοΫ͢Δͱ
    %#͕ߋ৽͞Εͯ

    View Slide

  81. αʔόͰ)5.-Λඳը͠
    BKBYͰड͚औͬͯ
    SFQMBDF8JUI
    ͢Δ

    View Slide

  82. εςʔτϨεͰ
    ඒ͍͠ઃܭ

    View Slide

  83. +4Ͱඳը͢Ε͹
    ຊདྷ͸ෆཁ

    View Slide

  84. View Slide

  85. VanillaJSͷ··࠶ઃܭ
    w σʔλͱ%0.Λ෼཭
    w ػೳຖʹ7JFX.PEFMΛ࡞Δ
    w ػೳಉ࢜͸ΠϕϯτͰ΍ΓͱΓ

    View Slide

  86. σʔλͱDOMΛ෼཭
    w ॳظԽ࣌ʹσʔλΛશͯ༻ҙ
    w %0.ૢ࡞͸ઐ༻ϝιουͰߦ͏

    View Slide

  87. %0.Λ౎౓͞ΘΒͣʹ

    View Slide

  88. %0.Λ౎౓͞ΘΒͣʹ

    View Slide

  89. ॳظԽ࣌ʹσʔλΛ༻ҙ

    View Slide

  90. View Slide

  91. DOMૢ࡞͸ઐ༻ϝιουͰ
    w +4ͰϨϯμϦϯά
    w σʔλมߋͷ౓ʹશ෦࠶ඳը
    w ੔߹ੑɺϝϯς͠΍͢͞Λ༏ઌ
    w ύϑΥʔϚϯε͸౓֎ࢹ

    View Slide

  92. View Slide

  93. ػೳຖʹViewModel
    w ίϯϙʔωϯτΛ਌ͱࢠʹ෼ׂ
    w 4NBSU%VNC$PNQPOFOU

    View Slide

  94. ਌ίϯϙʔωϯτ
    w σʔλɺϏδωεϩδοΫΛ؅ཧ
    w &WFOU&NJUUFSΛܧঝ
    w %0.&WFOUΛۃྗ͔ͭΘͳ͍ʂ

    View Slide

  95. ࢠίϯϙʔωϯτ
    w ਌΁ͷࢀরΛ࣋ͭ
    w σʔλͷඳըͱΠϕϯτൃߦͷΈ

    View Slide

  96. ྫ4JEFCBS

    View Slide

  97. View Slide

  98. Sidebar
    SidebarButtons
    Config

    View Slide

  99. 4JEFCBS
    #VUUPOT $POpH

    View Slide

  100. 4JEFCBS
    #VUUPOT $POpH
    ϘλϯΫϦοΫ

    View Slide

  101. 4JEFCBS
    #VUUPOT $POpH
    ϘλϯΫϦοΫ
    σʔλมߋ + emit(‘change’)

    View Slide

  102. 4JEFCBS
    #VUUPOT $POpH
    ϘλϯΫϦοΫ
    σʔλ൓ө
    σʔλมߋ + emit(‘change’)

    View Slide

  103. ίϯϙʔωϯτؒͷ΍ΓͱΓ
    Fotolife
    MarkdownEditor

    View Slide

  104. ίϯϙʔωϯτؒͷ΍ΓͱΓ
    w ্Ґͷ7JFX.PEFMΛͭͬͯ͘

    ΠϕϯτΛൃੜͤ͞Δ
    w ·ͨ͸$window.trigger()

    View Slide

  105. ্Ґͷ7JFX.PEFMΛ࡞੒
    Fotolife
    MarkdownEditor
    Editor

    View Slide

  106. &EJUPS
    .BSLEPXO 'PUPMJGF
    'PUP-JTU 'PPUFS
    ϘλϯΫϦοΫ
    ը૾Λૠೖͯ͘͠Ε
    ը૾Λૠೖͯ͘͠Ε
    5FYU"SFB
    ૠೖ

    View Slide

  107. ந৅తͳΠϕϯτ໊ʹ͢Δ
    ' buttonClicked
    ( insertImage

    View Slide

  108. .BSLEPXO 'PUPMJGF
    'PUP-JTU 'PPUFS
    ϘλϯΫϦοΫ
    ը૾Λૠೖͯ͘͠Ε
    ը૾Λૠೖͯ͘͠Ε
    5FYU"SFB
    ૠೖ
    &EJUPS

    View Slide

  109. &EJUPS
    .BSLEPXO 'PUPMJGF
    'PUP-JTU 'PPUFS
    ϘλϯΫϦοΫ
    ը૾Λૠೖͯ͘͠Ε
    ը૾Λૠೖͯ͘͠Ε
    5FYU"SFB
    ૠೖ
    ந৅తͳΠϕϯτ
    .BSLEPXO 'PUPMJGF
    ը૾Λૠೖͯ͘͠Ε
    ը૾Λૠೖͯ͘͠Ε
    &EJUPS

    View Slide

  110. σʔλͱ%0.ͷ
    ෆ੔߹͸
    ى͖ʹ͘͘ͳͬͨʂ

    View Slide

  111. ͕

    View Slide

  112. ͚ͬ͜͏େม
    w ઃܭͷ߹ҙͱΔͷ͕େม
    w %0.ૢ࡞μϧ͍
    w ϥΠϒϥϦʹ΍ͬͯ΄͍͠

    View Slide

  113. 7JFXϑϨʔϜϫʔΫ
    ࢖͍͍ͨʜʜʂ

    View Slide

  114. WT

    View Slide

  115. Vue.js
    ✔ݹ͖ྑ͖7JFX.PEFM
    ✔೔ຊޠυΩϡϝϯτ
    ✗͍ΖΜͳॻ͖ํͰ͖Δ

    View Slide

  116. React
    ✔֮͑Δ͜ͱ͕গͳ͍
    ✔৘ใ͕๛෋
    ✗+49

    View Slide

  117. 1ϲ݄΄Ͳٞ࿦
    w ֶशίετ͸ʁ
    w ඞཁͳ࣌ʹࣺͯΒΕΔ͔ʁ
    w ৽ػೳΛ྆ํͰ࣮૷ͨ͠Γ

    View Slide

  118. View Slide

  119. View Slide

  120. ReactΛ࠾༻
    w ΑΓγϯϓϧʹॻ͚Δ
    w 3FBDUˠ7VF͸؆୯ͦ͏

    View Slide

  121. σβΠφʔ͕৮Εͳ͍ʁ
    w +49͘Β͍৮ΕΔ͸ͣ
    w $44ͰࣗࡏʹελΠϧͰ͖Δ

    Α͍ઃܭΛ໨ࢦ͢

    View Slide

  122. ಋೖ
    w +49ͷͨΊʹಋೖͱ͍͏ޱ࣮

    w TUBHFҎԼ͸࢖༻ېࢭ
    w ษڧձ JTTVFͰ஌ݟΛγΣΞ

    View Slide

  123. http://azu.github.io/slide-what-is-ecmascript/
    ࢀߟ&$."4DSJQUͱ͸Կ͔

    CZ!B[V͞Μ

    View Slide

  124. ࣾ಺ษڧձͷΑ͏͢

    View Slide

  125. View Slide

  126. JTTVFͰ஌ݟΛूΊΔ

    View Slide

  127. React

    Architecture
    React࢖༻࣌ͷίϯϙʔωϯτઃܭ

    View Slide

  128. جຊతͳߟ͑ํ
    w 'MVYϑϨʔϜϫʔΫ͸࢖͍ͨ͘ͳ͍
    w &WFOU&NJUUFS͚ͩͰؤுΔ
    w ن໛ʹΑͬͯɺஈ֊తʹ

    'MVYͬΆ͍ͯ͘͘͠

    View Slide

  129. খ͞ͳػೳͷͱ͖
    w 7JFX.PEFM͚ͩͰ׬݁
    w ҎલͷίʔυͷSFOEFS
    Λ

    ஔ͖׵͑Δ͚ͩ

    View Slide

  130. େ͖ͳػೳͷͱ͖
    w &WFOU&NJUUFSͰ෦෼తʹ'MVY
    w 4UPSF "DUJPO$SFBUPS͕ෳ਺ͳΒ

    %JTQBUDIFSΛಋೖ

    View Slide

  131. .PEFM
    খن໛ : ViewModel
    7JFX.PEFM
    Πϕϯτ
    ൓ө
    σʔλมߋ

    View Slide

  132. "DUJPO
    $SFBUPS
    தن໛ : Flux෩
    Πϕϯτ
    ൓ө
    4UPSF
    Action
    σʔλมߋ

    View Slide

  133. େن໛ : DispatcherΛಋೖ
    Πϕϯτ
    ൓ө
    Action
    σʔλมߋ
    %JTQBUDIFS

    View Slide

  134. Coding

    Convention
    ίʔσΟϯάελΠϧͷνΣοΫ

    View Slide

  135. ैདྷ͸JSHintͰνΣοΫ
    ಠࣗϧʔϧ͸1FSMͰॻ͍ͯͨ
    ✗ϧʔϧΛඍௐ੔͠ʹ͍͘
    ✗+49&4ʹඇରԠ

    View Slide

  136. View Slide

  137. ✔ඪ४ϧʔϧ͕ॆ࣮
    ✔ઃఆ͕ΧελϚΠζ͠΍͍͢
    ✔ಠࣗϧʔϧ͕؆୯ʹॻ͚Δ

    View Slide

  138. https://gist.github.com/fand/c13213f81bfce11f4132
    ࢀߟಠࣗϧʔϧྫ

    View Slide

  139. ಋೖͷํ਑
    w શͯͷඪ४ϧʔϧͰ

    Τϥʔ͕ग़ΔΑ͏ʹઃఆ
    w طଘίʔυͰΤϥʔফ͑Δ·Ͱ

    ϧʔϧΛ؇ΊΔ

    View Slide

  140. ˔ͷ͍ͭͨߦ͸
    શ෦ܯࠂ

    View Slide

  141. View Slide

  142. ౖΒΕͯศརʂ

    View Slide

  143. TEST
    THE

    COMPONENT
    Mission 3:

    View Slide

  144. 4݄·ͰͷJSςετ
    w $BTQFS+4ͷ&&ͷΈ
    w هࣄ౤ߘɺ޿ࠂͷද͚ࣔͩ

    View Slide

  145. JS͕յΕ΍͍͢
    w ϦϑΝΫλϦϯάͰΤϯόά
    w ϦϦʔεޙΤϥʔͰ·ͬͯ͘

    3FWFSUͨ͠ࣄ΋ʜʜ

    View Slide

  146. http://0-9.sakura.ne.jp/pub/frontrend/start.html

    View Slide

  147. ʮE2E͔Β࢝ΊΖʯͱݴ͏͚ΕͲ……
    w γφϦΦ͕ෳࡶ
    ʮ͋ΔॱংͰϖʔδભҠͨ࣌͠ʹ

    উखʹλϒ͕ดͯ͡͠·͏ʯ
    όάͷςετͨ͘͠ͳ͍ʜʜ

    View Slide

  148. ςετ͍ͨ͠ʂ

    View Slide

  149. ୯ମςετ͔Β͸͡ΊΑ͏

    View Slide

  150. Unit Test
    ୯ମςετ؀ڥߏங

    View Slide

  151. http://0-9.sakura.ne.jp/pub/frontrend/start.html

    View Slide

  152. ཧ૝

    View Slide

  153. ςετॻ͘
    ςετམͪͳ͍Α͏ʹ
    ϦϑΝΫλϦϯά

    View Slide

  154. ݱ࣮

    View Slide

  155. ςελϒϧͳઃܭͰ
    ϦϑΝΫλϦϯά
    ςετॻ͘

    View Slide

  156. ςελϒϧͳઃܭΛ৺͕͚Δ
    w ίʔυ෼ׂ͸େલఏ
    w 7JFXૢ࡞͸෼཭͢Δ
    w %0.৮ΔϞδϡʔϧ͸

    ςετͮ͠Β͍

    View Slide

  157. w ݩ͸"OHVMBS༻ͷςετϥϯφʔ
    w ϒϥ΢βΛ࢖ͬͯςετͰ͖Δ
    w ୯ମςετ޲͚
    w ϒϥ΢βૢ࡞͸ॆ࣮͍ͯ͠ͳ͍

    View Slide

  158. গͣͭ͠ςετ૿΍͢
    w ৽͍͠Ϟδϡʔϧ͸ςετඞਢ
    w ϦϑΝΫλϦϯάˠςετ௥Ճ
    w 6UJMܥϞδϡʔϧΛ༏ઌ

    View Slide

  159. Viewͷςετ
    w &WFOU&NJUUFSͷ͓͔͛Ͱ

    ςετ͠΍͘͢ͳͬͨʂ
    w Πϕϯτ͸ൃߦ͞ΕΔ͔ʁ
    w %0.ཁૉ͕ඳը͞ΕͯΔ͔ʁ

    View Slide

  160. 4JEFCBS
    #VUUPOT $POpH
    ϘλϯΫϦοΫ
    σʔλ൓ө
    σʔλมߋ + emit(‘change’)

    View Slide

  161. 4JEFCBS
    #VUUPOT $POpH
    ϘλϯΫϦοΫ
    σʔλ൓ө
    σʔλมߋ + emit(‘change’)
    $POpH
    ϘλϯΫϦοΫ
    Πϕϯτ͕
    ਖ਼͘͠ൃߦ͞ΕΔ͔ʁ

    View Slide

  162. 4JEFCBS
    #VUUPOT $POpH
    ϘλϯΫϦοΫ
    σʔλ൓ө
    σʔλมߋ + emit(‘change’)
    4JEFCBS
    σʔλมߋ + emit(‘change’)
    Πϕϯτʹର͠
    σʔλ͕มߋ͞ΕΔ͔ʁ

    View Slide

  163. 4JEFCBS
    #VUUPOT $POpH
    ϘλϯΫϦοΫ
    σʔλ൓ө
    σʔλมߋ + emit(‘change’)
    σʔλ͸
    ਖ਼͘͠ඳը͞ΕΔ͔ʁ
    #VUUPOT
    σʔλ൓ө

    View Slide

  164. ςετॻ͚Δ

    View Slide

  165. ςετϑΝΠϧ਺

    View Slide

  166. View Slide

  167. ·ͩ·ͩ
    ൃల్্

    View Slide

  168. E2E Test
    E2Eςετ؀ڥͷϦχϡʔΞϧ

    View Slide

  169. ୤CasperJS
    w 3FBDUΛ࢖͏ͱ

    1IBOUPN+4ͰΤϥʔग़Δʂ
    w 1IBOUPN+4ɺ೉͍͠

    View Slide

  170. ଞͷखஈΛݕ౼

    View Slide

  171. &MFDUSPOϕʔεͷεΫϨΠύʔ
    ✔γϯϓϧͳ"1*
    ✗ࡉ͔͍"1*͕଍Γͳ͍
    ✗ϝιουνΣʔϯ͕໘౗

    View Slide

  172. ݩ͸"OHVMBS+4ͷςετ༻
    ✔Ϣʔβʔɺ৘ใ͕ଟ͍
    ✔ಉظతʹॻ͚Δ
    ✗"OHVMBSઐ༻"1*͸ෆཁ
    Protractor

    View Slide

  173. 4FMFOJVNͷόΠϯσΟϯά
    ✔ಉظతʹॻ͚Δ
    ✔ׂͱ
    υΩϡϝϯτॆ࣮
    ♨$-*ςετϥϯφʔ෇͖

    View Slide

  174. 4FMFOJVNͷόΠϯσΟϯά
    ✔ಉظతʹॻ͚Δ
    ✔ׂͱ
    υΩϡϝϯτॆ࣮
    ♨$-*ςετϥϯφʔ෇͖
    ࠾༻

    View Slide

  175. Ұ൪ͷཧ༝
    w 4FMFOJVNܥͳͷͰ

    ଞϥΠϒϥϦʹ৐Γ׵͑΍͍͢͸ͣ
    w 1SPUSBDUPS UFTUJVN౳

    View Slide

  176. &4HFOFSBUPSͰ
    ςετΛॻ͘

    View Slide

  177. &4HFOFSBUPSͰ
    ςετΛॻ͘

    View Slide

  178. View Slide

  179. ςετಈ͍ͨʂ

    View Slide

  180. http://amagitakayosi.hatenablog.com/entry/2015/10/30/083000
    ࢀߟ͓΋͠ΖΤϐιʔυ

    View Slide

  181. RESTORE
    THE

    ORDER
    ϑϩϯτΤϯυʹடংΛऔΓ໭͢ํ๏
    @amagitakayosi

    View Slide

  182. ͔ͯ͘͠
    டং͸
    कΒΕͨ

    View Slide

  183. ࠓ೔࿩ͨ͜͠ͱ
    w ϦϑΝΫλϦϯάצॴ
    w ઴ਐతʹΞʔΩςΫνϟΛਐԽͤ͞Δ
    w ϑϨʔϜϫʔΫಋೖ
    w ςετ؀ڥߏங

    View Slide

  184. ࠓ೔࿩ͨ͜͠ͱ
    w ϦϑΝΫλϦϯάצॴ
    w ઴ਐతʹΞʔΩςΫνϟΛਐԽͤ͞Δ
    w ϑϨʔϜϫʔΫಋೖ
    w ςετ؀ڥߏங
    ྑ͍ઃܭΛ
    ໨ࢦͨ͢Ίͷ
    ౔୆࡞Γ

    View Slide

  185. ࠓ೔࿩͞ͳ͔ͬͨ͜ͱ
    w ඒ͍͠ϥΠϒϥϦઃܭͷڞ༗
    w ඇΤϯδχΞͱͷઃܭ
    w ര଎ͰαʔϏεͭ͘Δ։ൃϑϩʔ

    View Slide

  186. ࠓ೔࿩͞ͳ͔ͬͨ͜ͱ
    w ͸ͯͳϒϩάνʔϜͷ։ൃϑϩʔ
    w ࣾ಺ϥΠϒϥϦͷઃܭํ๏
    w αʔόଆݴޠͱͷઃܭͷڞ༗
    ·ͩ·ͩ
    ൃల్্

    View Slide

  187. Ί͛ͣʹ
    վળ͢Δ
    εϐϦοτ

    View Slide

  188. ྑ͍αʔϏεΛ
    ࡞͍ͬͯͧ͘ʂ
    ʂʂʂʂʂʂʂ
    ʂʂʂʂʂʂʂ

    View Slide

  189. ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide

  190. גࣜձࣾ͸ͯͳͰ͸
    ࠷ߴͷΞʔΩςΫνϟΛ໨ࢦ͠
    ͋͘ͳ͖୳ٻΛ͚ͭͮΔ
    ΤϯδχΞΛืू͍ͯ͠·͢ʂ

    View Slide