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

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

東京Node学園祭2015

14084b6462b19a8512ce5208a76f8925?s=128

fand/amagitakayosi

November 07, 2015
Tweet

Transcript

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

  2. None
  3. ૣޱͰ͍͖·͢

  4. ࠓ೔࿩͞ͳ͍͜ͱ

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

  6. ࠓ೔࿩͢͜ͱ

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

  8. εϐϦοτ

  9. @amagitakayosi

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

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

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

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

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

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

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

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

  23. +

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

  25. ໰୊ൃੜ

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

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

  28. ໰୊3 ςετෆՄ

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

  30. SPLIT THE
 CODE Mission 1:

  31. ͸ͯͳϒϩάͷJS w 5PUBMMJOFT ࣌఺  w ͦΜͳʹڊେͰ͸ͳ͍͕ʜʜ

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

  33. None
  34. ฤूը໘ͷJS w GPSNΛ؅ཧ͢ΔΫϥε w ه๏͝ͱͷػೳ
 8:4*8:( .BSLEPXO ͸ͯͳه๏  w

    αΠυόʔ౳ͷίϯϙʔωϯτ
  35. ैདྷͷJS෼ׂ w ໊લۭؒͰϞδϡʔϧԽ w ϑΝΠϧΛDPODBUͯ͠഑৴

  36. ໊લۭؒ in JS w ϞδϡʔϧΛ0CKFDUʹ·ͱΊΔ w άϩʔόϧม਺ͷཞ༻Λආ͚Δ
 ݹͷϕετϓϥΫςΟε

  37. ໊લۭؒΛ༻ҙͯ͠

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

  39. JOEFYKT  'PPKT  #BSKT

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

  41. ໰୊ൃੜ

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

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

  44. JOEFYKT  'PPKT  #BSKT

  45. JOEFYKT  #BSKT  'PPKT

  46. JOEFYKT  #BSKT  'PPKT

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

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

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

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

  51. DPODBUͭΒ͍ʜʜ

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

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

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

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

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

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

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

  60. མͱ݀͠

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

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

  63. ڞ௨Խ͸ਖ਼͘͠ߦ͏ w ଞͷ໊લۭؒΛࢀরͯ͠Δͱ
 ෼ׂͮ͠Β͍ w ઌʹϦϑΝΫλϦϯά͢΂͠

  64. ݱࡏͷঢ়گ

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

  66. ʙʙ

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

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

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

  72. KEEP THE
 STYLE Mission 2:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  96. ྫ4JEFCBS

  97. None
  98. Sidebar SidebarButtons Config

  99. 4JEFCBS #VUUPOT $POpH

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

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

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

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

  104. ίϯϙʔωϯτؒͷ΍ΓͱΓ w ্Ґͷ7JFX.PEFMΛͭͬͯ͘
 ΠϕϯτΛൃੜͤ͞Δ w ·ͨ͸$window.trigger()

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

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

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

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

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

    ந৅తͳΠϕϯτ .BSLEPXO 'PUPMJGF ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε &EJUPS
  110. σʔλͱ%0.ͷ ෆ੔߹͸ ى͖ʹ͘͘ͳͬͨʂ

  111. ͕

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

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

  114. WT

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

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

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

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

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

  122. ಋೖ w +49ͷͨΊʹಋೖͱ͍͏ޱ࣮  w TUBHFҎԼ͸࢖༻ېࢭ w ษڧձ JTTVFͰ஌ݟΛγΣΞ

  123. http://azu.github.io/slide-what-is-ecmascript/ ࢀߟ&$."4DSJQUͱ͸Կ͔
 CZ!B[V͞Μ

  124. ࣾ಺ษڧձͷΑ͏͢

  125. None
  126. JTTVFͰ஌ݟΛूΊΔ

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

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

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

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

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

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

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

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

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

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

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

  139. ಋೖͷํ਑ w શͯͷඪ४ϧʔϧͰ
 Τϥʔ͕ग़ΔΑ͏ʹઃఆ w طଘίʔυͰΤϥʔফ͑Δ·Ͱ
 ϧʔϧΛ؇ΊΔ

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

  141. None
  142. ౖΒΕͯศརʂ

  143. TEST THE
 COMPONENT Mission 3:

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

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

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

  147. ʮE2E͔Β࢝ΊΖʯͱݴ͏͚ΕͲ…… w γφϦΦ͕ෳࡶ ʮ͋ΔॱংͰϖʔδભҠͨ࣌͠ʹ
 উखʹλϒ͕ดͯ͡͠·͏ʯ όάͷςετͨ͘͠ͳ͍ʜʜ

  148. ςετ͍ͨ͠ʂ

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

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

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

  152. ཧ૝

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

  154. ݱ࣮

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

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

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

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

  159. Viewͷςετ w &WFOU&NJUUFSͷ͓͔͛Ͱ
 ςετ͠΍͘͢ͳͬͨʂ w Πϕϯτ͸ൃߦ͞ΕΔ͔ʁ w %0.ཁૉ͕ඳը͞ΕͯΔ͔ʁ

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

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

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

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

    #VUUPOT σʔλ൓ө
  164. ςετॻ͚Δ

  165. ςετϑΝΠϧ਺

  166. None
  167. ·ͩ·ͩ ൃల్্

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

  169. ୤CasperJS w 3FBDUΛ࢖͏ͱ
 1IBOUPN+4ͰΤϥʔग़Δʂ w 1IBOUPN+4ɺ೉͍͠

  170. ଞͷखஈΛݕ౼

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

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

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

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

  175. Ұ൪ͷཧ༝ w 4FMFOJVNܥͳͷͰ
 ଞϥΠϒϥϦʹ৐Γ׵͑΍͍͢͸ͣ w 1SPUSBDUPS UFTUJVN౳

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

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

  178. None
  179. ςετಈ͍ͨʂ

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

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

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

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

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

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

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

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

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

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

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