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

東京Node学園祭2015

Transcript

1. RESTORE THE
 ORDER ϑϩϯτΤϯυʹடংΛऔΓ໭͢ํ๏ @amagitakayosi
3. ૣޱͰ͍͖·͢
4. ࠓ೔࿩͞ͳ͍͜ͱ
5. ࠷৽ϥΠϒϥϦͷ࢖͍ํ
   ࠷ߴʹඒ͍͠ઃܭ
   /PEFKTͷ࿩
6. ࠓ೔࿩͢͜ͱ
7. ϦϑΝΫλϦϯά
   ίʔυن໛ͱΞʔΩςΫνϟ
   ϑϨʔϜϫʔΫಋೖ
   ςετ؀ڥߏங
8. εϐϦοτ
9. @amagitakayosi
11. IUUQCMPHIBUFOBOFKQSFHJTUFS !!!!!!!!!! ࠓ͙͢ొ࿥ʂ !!!!!!!!!!! !!!!!!!!!! !!!!!!!!!! !!!!!!!!!!! !!!!!!!!!!
13. ͜͜ʹ4प೥ͷਤΛషΔ 2015-11-07 ͸ͯͳϒϩά प೥
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 5PUBM
    
    MJOFT
    ࣌఺
    w ͦΜͳʹڊେͰ͸ͳ͍͕ʜʜ
32. admin-user-blog-edit.js ߦ ࣌఺
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ͭΒ͍ʜʜ
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. ʙʙ
68. browserify؅ཧԼͷ ϑΝΠϧ਺ concatͯ͠ΔϑΝΠϧ਺
69. browserify؅ཧԼͷ ϑΝΠϧ਺ concatͯ͠ΔϑΝΠϧ਺ ࡉ͔͘ϞδϡʔϧԽ͢Δͱ
    ݩϑΝΠϧΑΓଟ͘ͳΔ
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 %#ߋ৽ͷ౓ʹαʔόଆͰඳը
80. ͜͜ΛΫϦοΫ͢Δͱ
    %#͕ߋ৽͞Εͯ
81. αʔόͰ)5.-Λඳը͠
    BKBYͰड͚औͬͯ
    SFQMBDF8JUI ͢Δ
82. εςʔτϨεͰ
    ඒ͍͠ઃܭ
83. +4Ͱඳը͢Ε͹
    ຊདྷ͸ෆཁ
85. VanillaJSͷ··࠶ઃܭ w σʔλͱ%0.Λ෼཭
    w ػೳຖʹ7JFX.PEFMΛ࡞Δ
    w ػೳಉ࢜͸ΠϕϯτͰ΍ΓͱΓ
86. σʔλͱDOMΛ෼཭ w ॳظԽ࣌ʹσʔλΛશͯ༻ҙ
    w %0.ૢ࡞͸ઐ༻ϝιουͰߦ͏
87. %0.Λ౎౓͞ΘΒͣʹ
88. %0.Λ౎౓͞ΘΒͣʹ
89. ॳظԽ࣌ʹσʔλΛ༻ҙ
91. DOMૢ࡞͸ઐ༻ϝιουͰ w +4ͰϨϯμϦϯά
    w σʔλมߋͷ౓ʹશ෦࠶ඳը
    w ੔߹ੑɺϝϯς͠΍͢͞Λ༏ઌ
    w ύϑΥʔϚϯε͸౓֎ࢹ
93. ػೳຖʹViewModel w ίϯϙʔωϯτΛ਌ͱࢠʹ෼ׂ
    w 4NBSU
    
    %VNC
    $PNQPOFOU
94. ਌ίϯϙʔωϯτ w σʔλɺϏδωεϩδοΫΛ؅ཧ
    w &WFOU&NJUUFSΛܧঝ
    w %0.
    &WFOUΛۃྗ͔ͭΘͳ͍ʂ
95. ࢠίϯϙʔωϯτ w ਌΁ͷࢀরΛ࣋ͭ
    w σʔλͷඳըͱΠϕϯτൃߦͷΈ
96. ྫ
    4JEFCBS
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 ৽ػೳΛ྆ํͰ࣮૷ͨ͠Γ
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. ࣾ಺ษڧձͷΑ͏͢
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
     ʹඇରԠ
137. ✔
     ඪ४ϧʔϧ͕ॆ࣮
     ✔
     ઃఆ͕ΧελϚΠζ͠΍͍͢
     ✔
     ಠࣗϧʔϧ͕؆୯ʹॻ͚Δ
138. https://gist.github.com/fand/c13213f81bfce11f4132 ࢀߟ
     ಠࣗϧʔϧྫ
139. ಋೖͷํ਑ w શͯͷඪ४ϧʔϧͰ
 Τϥʔ͕ग़ΔΑ͏ʹઃఆ
     w طଘίʔυͰΤϥʔফ͑Δ·Ͱ
 ϧʔϧΛ؇ΊΔ
140. ˔ͷ͍ͭͨߦ͸
     શ෦ܯࠂ
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. ςετϑΝΠϧ਺
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. &4
     HFOFSBUPSͰ
     ςετΛॻ͘
177. &4
     HFOFSBUPSͰ
     ςετΛॻ͘
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. גࣜձࣾ͸ͯͳͰ͸
     ࠷ߴͷΞʔΩςΫνϟΛ໨ࢦ͠
     ͋͘ͳ͖୳ٻΛ͚ͭͮΔ
     ΤϯδχΞΛืू͍ͯ͠·͢ʂ