Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
フロントエンドに秩序を取り戻す方法
Search
fand/amagitakayosi
November 07, 2015
Technology
95
41k
フロントエンドに秩序を取り戻す方法
東京Node学園祭2015
fand/amagitakayosi
November 07, 2015
Tweet
Share
More Decks by fand/amagitakayosi
See All by fand/amagitakayosi
How to hack VS Code: evil ways (Japanese)
fand
5
3.4k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
460
GLSL PostEffect in TouchDesigner
fand
2
1.9k
VEDA GLSL Livecoding workshop
fand
2
5k
PWA 方法 無料 今すぐ
fand
3
1.4k
Have you ever heard GPUs cry?
fand
2
3.6k
Real World GLSL
fand
0
230
APIs for VJ-ing
fand
1
6.6k
Style your Components with styled-component!
fand
1
630
Other Decks in Technology
See All in Technology
[2024最新版]AWS Control Towerを使ったセキュアなマルチアカウント環境の作り方
hiashisan
0
270
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
260
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
地理情報とAPIのトレンド
nagix
0
160
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
「単なる OAuth 2.0 を認証に使うと、車が通れるほどのどでかいセキュリティー・ホールができる」のか検証してみた
terara
0
380
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
310
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
360
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
開発と事業を繋ぐ!SREのオブザーバビリティ戦略 ~ Developers Summit 2024 Summer ~
leveragestech
0
620
Featured
See All Featured
A Philosophy of Restraint
colly
200
16k
Six Lessons from altMBA
skipperchong
24
3.2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
Agile that works and the tools we love
rasmusluckow
325
20k
Designing for humans not robots
tammielis
247
25k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
121
18k
Gamification - CAS2011
davidbonilla
78
4.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
23
1.9k
Typedesign – Prime Four
hannesfritz
37
2.2k
How to name files
jennybc
67
96k
Transcript
RESTORE THE ORDER ϑϩϯτΤϯυʹடংΛऔΓ͢ํ๏ @amagitakayosi
None
ૣޱͰ͍͖·͢
ࠓ͞ͳ͍͜ͱ
࠷৽ϥΠϒϥϦͷ͍ํ ࠷ߴʹඒ͍͠ઃܭ /PEFKTͷ
ࠓ͢͜ͱ
ϦϑΝΫλϦϯά ίʔυنͱΞʔΩςΫνϟ ϑϨʔϜϫʔΫಋೖ ςετڥߏங
εϐϦοτ
@amagitakayosi
None
IUUQCMPHIBUFOBOFKQSFHJTUFS !!!!!!!!!! ࠓ͙͢ొʂ !!!!!!!!!!! !!!!!!!!!! !!!!!!!!!! !!!!!!!!!!! !!!!!!!!!!
None
͜͜ʹ4पͷਤΛషΔ 2015-11-07 ͯͳϒϩά प
None
None
None
͜ͷτʔΫͰ ฤूը໘ϦχϡʔΞϧʹ͏ +4େվͷ༰Λ հ͠·͢ʂʂʂʂ
ͯͳϒϩάͷ ઃܭࢥ
first commitͷը૾ΛషΔ ։ൃ։࢝
ͳΔ͘ബ͘ w 1FSM w 1MBDLϕʔε03.ͳ͠ w +4 w 7BOJMMB+4
http://www.slideshare.net/cho45/yapc-asia-2011 ࢀߟݩઃܭऀͷεϥΠυ
https://speakerdeck.com/hitode909/perlfalseshang- nimosan-nian-zututoiketerusabisuwozuo-risok-keruji-shu ࢀߟαʔόαΠυઃܭͷ
+
+ ͦͯ͠4͕ܦաͨ͠……
ൃੜ
1 ڊେͳ ϑΝΠϧ
2 ౷Ұײͷͳ͍ ελΠϧ
3 ςετෆՄ
ಓʹվળ ͍ͯͧ͘͠ ʂʂʂʂʂ
SPLIT THE CODE Mission 1:
ͯͳϒϩάͷJS w 5PUBMMJOFT ࣌ w ͦΜͳʹڊେͰͳ͍͕ʜʜ
admin-user-blog-edit.js ߦ ࣌
None
ฤूը໘ͷJS w GPSNΛཧ͢ΔΫϥε w ه๏͝ͱͷػೳ 8:4*8:( .BSLEPXO ͯͳه๏ w
αΠυόʔͷίϯϙʔωϯτ
ैདྷͷJSׂ w ໊લۭؒͰϞδϡʔϧԽ w ϑΝΠϧΛDPODBUͯ͠৴
໊લۭؒ in JS w ϞδϡʔϧΛ0CKFDUʹ·ͱΊΔ w άϩʔόϧมͷཞ༻Λආ͚Δ ݹͷϕετϓϥΫςΟε
໊લۭؒΛ༻ҙͯ͠
໊લۭؒʹಥͬࠐΜͰ
JOEFYKT 'PPKT #BSKT
ฤूը໘ͷ+4 ׂ͍ͨ͠ʜʜ
ൃੜ
ґଘؔΉ͔͍ͣ͠ w DPODBUͷॱ൪ม͑ͨΒյΕΔ w ม໊Λม͑ΔͱյΕΔ
Foo͕ະఆٛͩͱ Τϥʔ
JOEFYKT 'PPKT #BSKT
JOEFYKT #BSKT 'PPKT
JOEFYKT #BSKT 'PPKT
ະఆٛͷมΛݕग़Ͱ͖ͳ͍
ະఆٛͷglobalม lintͰνΣοΫͰ͖Δ͚Ͳ…… ະఆٛͷมΛݕग़Ͱ͖ͳ͍
໊લۭؒͷத lintͰνΣοΫͰ͖ͳ͍ʂ ະఆٛͷมΛݕग़Ͱ͖ͳ͍
࣮ߦ͢Δ·Ͱ όά͕Θ͔Βͳ͍ʂ
DPODBUͭΒ͍ʜʜ
None
browserify w $PNNPO+4ܗࣜͰϞδϡʔϧΛཧ w ڝ߹ͱൺɺγϯϓϧʹ͑Δ w 3FRVJSF+4ॻ͖ํ͕໘ w 8FCQBDLେ؋ڊ๒ओٛ
ґଘཧָ͕ʹͳΔ w DPODBUॱΛߟ͑ͳ͍Ͱྑ͍ w ଘࡏ͠ͳ͍ϑΝΠϧΛϩʔυ͢Δͱ Τϥʔు͍ͯ͘ΕΔ
Ϗϧυ࣌ʹΤϥʔग़ͯ͘͠ΕΔʂ
browserifyಋೖ w ಋೖ։࢝ w গͣͭ͠$PNNPO+4ʹม w Ϗϧυͨ͠+4Λ طଘͷ+4ͱDPODBU
$PNNPO+4ܗࣜʹ ॻ͖ͯ͠
໊લۭؒʹͭͬ͜ΜͰ
ઓུ Ϗϧυͨ͠+4Λ ͜Ε·Ͱͷ+4ͱDPODBU Ϗϧυͨ͠+4 ͜Ε·Ͱͷ+4
མͱ݀͠
ڞ௨Խਖ਼͘͠ߦ͏
ڞ௨Խਖ਼͘͠ߦ͏
ڞ௨Խਖ਼͘͠ߦ͏ w ଞͷ໊લۭؒΛࢀরͯ͠Δͱ ׂͮ͠Β͍ w ઌʹϦϑΝΫλϦϯά͢͠
ݱࡏͷঢ়گ
admin-user-blog-edit.js ߦ ߦ
ʙʙ
None
browserifyཧԼͷ ϑΝΠϧ concatͯ͠ΔϑΝΠϧ
browserifyཧԼͷ ϑΝΠϧ concatͯ͠ΔϑΝΠϧ ࡉ͔͘ϞδϡʔϧԽ͢Δͱ ݩϑΝΠϧΑΓଟ͘ͳΔ
None
browserifyཧԼͷ ϑΝΠϧ concatͯ͠ΔϑΝΠϧ ࡉ͔͘ϞδϡʔϧԽ͢Δͱ ݩϑΝΠϧΑΓଟ͘ͳΔ Զୡͷઓ͍ ͜Ε͔Βͩ ʂʂʂʂʂʂʂ
KEEP THE STYLE Mission 2:
ઃܭελΠϧ ίʔσΟϯάελΠϧ
Vanilla Architecture VanillaJSͰͷίϯϙʔωϯτઃܭ
طଘJSͷ w σʔλͱ%0.͕ີ݁߹ w ίϯϙʔωϯτؒͷ࿈ܞ͕Ϝζ͍ w αʔόͱͷ࿈ܞ͕μϧ͍
σʔλͱDOM͕ີ݁߹ w %0.ଐੑʹσʔλΛอଘ w ͋ͪͪ͜Ͱ%0.ૢ࡞ w σʔλؒͷ߹ੑ͕յΕ͍͢
ίϯϙʔωϯτؒͷ࿈ܞ w σʔλϑϩʔʹܾ·Γ͕ͳ͍ w ॥ࢀরͰݺͼ߹ͬͨΓ w ࠷ѱ%0.ΠϕϯτΛ͏
αʔόͱͷ࿈ܞ w )5.-ߏ͔ΒσʔλΛ࡞Δ w +40/ͱ͔Ͱͳ͍ w %#ߋ৽ͷʹαʔόଆͰඳը
None
͜͜ΛΫϦοΫ͢Δͱ %#͕ߋ৽͞Εͯ
αʔόͰ)5.-Λඳը͠ BKBYͰड͚औͬͯ SFQMBDF8JUI ͢Δ
εςʔτϨεͰ ඒ͍͠ઃܭ
+4Ͱඳը͢Ε ຊདྷෆཁ
None
VanillaJSͷ··࠶ઃܭ w σʔλͱ%0.Λ w ػೳຖʹ7JFX.PEFMΛ࡞Δ w ػೳಉ࢜ΠϕϯτͰΓͱΓ
σʔλͱDOMΛ w ॳظԽ࣌ʹσʔλΛશͯ༻ҙ w %0.ૢ࡞ઐ༻ϝιουͰߦ͏
%0.Λ͞ΘΒͣʹ
%0.Λ͞ΘΒͣʹ
ॳظԽ࣌ʹσʔλΛ༻ҙ
None
DOMૢ࡞ઐ༻ϝιουͰ w +4ͰϨϯμϦϯά w σʔλมߋͷʹશ෦࠶ඳը w ߹ੑɺϝϯς͢͠͞Λ༏ઌ w ύϑΥʔϚϯε֎ࢹ
None
ػೳຖʹViewModel w ίϯϙʔωϯτΛͱࢠʹׂ w 4NBSU%VNC$PNQPOFOU
ίϯϙʔωϯτ w σʔλɺϏδωεϩδοΫΛཧ w &WFOU&NJUUFSΛܧঝ w %0.&WFOUΛۃྗ͔ͭΘͳ͍ʂ
ࢠίϯϙʔωϯτ w ͷࢀরΛ࣋ͭ w σʔλͷඳըͱΠϕϯτൃߦͷΈ
ྫ4JEFCBS
None
Sidebar SidebarButtons Config
4JEFCBS #VUUPOT $POpH
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλมߋ + emit(‘change’)
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλө σʔλมߋ + emit(‘change’)
ίϯϙʔωϯτؒͷΓͱΓ Fotolife MarkdownEditor
ίϯϙʔωϯτؒͷΓͱΓ w ্Ґͷ7JFX.PEFMΛͭͬͯ͘ ΠϕϯτΛൃੜͤ͞Δ w ·ͨ$window.trigger()
্Ґͷ7JFX.PEFMΛ࡞ Fotolife MarkdownEditor Editor
&EJUPS .BSLEPXO 'PUPMJGF 'PUP-JTU 'PPUFS ϘλϯΫϦοΫ ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε 5FYU"SFB <img>ૠೖ
நతͳΠϕϯτ໊ʹ͢Δ ' buttonClicked ( insertImage
.BSLEPXO 'PUPMJGF 'PUP-JTU 'PPUFS ϘλϯΫϦοΫ ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε 5FYU"SFB <img>ૠೖ &EJUPS
&EJUPS .BSLEPXO 'PUPMJGF 'PUP-JTU 'PPUFS ϘλϯΫϦοΫ ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε 5FYU"SFB <img>ૠೖ
நతͳΠϕϯτ .BSLEPXO 'PUPMJGF ը૾Λૠೖͯ͘͠Ε ը૾Λૠೖͯ͘͠Ε &EJUPS
σʔλͱ%0.ͷ ෆ߹ ى͖ʹ͘͘ͳͬͨʂ
͕
͚ͬ͜͏େม w ઃܭͷ߹ҙͱΔͷ͕େม w %0.ૢ࡞μϧ͍ w ϥΠϒϥϦʹͬͯ΄͍͠
7JFXϑϨʔϜϫʔΫ ͍͍ͨʜʜʂ
WT
Vue.js ✔ݹ͖ྑ͖7JFX.PEFM ✔ຊޠυΩϡϝϯτ ✗͍ΖΜͳॻ͖ํͰ͖Δ
React ✔֮͑Δ͜ͱ͕গͳ͍ ✔ใ͕๛ ✗+49
1ϲ݄΄Ͳٞ w ֶशίετʁ w ඞཁͳ࣌ʹࣺͯΒΕΔ͔ʁ w ৽ػೳΛ྆ํͰ࣮ͨ͠Γ
None
None
ReactΛ࠾༻ w ΑΓγϯϓϧʹॻ͚Δ w 3FBDUˠ7VF؆୯ͦ͏
σβΠφʔ͕৮Εͳ͍ʁ w +49͘Β͍৮ΕΔͣ w $44ͰࣗࡏʹελΠϧͰ͖Δ Α͍ઃܭΛࢦ͢
ಋೖ w +49ͷͨΊʹಋೖͱ͍͏ޱ࣮ w TUBHFҎԼ༻ېࢭ w ษڧձ JTTVFͰݟΛγΣΞ
http://azu.github.io/slide-what-is-ecmascript/ ࢀߟ&$."4DSJQUͱԿ͔ CZ!B[V͞Μ
ࣾษڧձͷΑ͏͢
None
JTTVFͰݟΛूΊΔ
React Architecture React༻࣌ͷίϯϙʔωϯτઃܭ
جຊతͳߟ͑ํ w 'MVYϑϨʔϜϫʔΫ͍ͨ͘ͳ͍ w &WFOU&NJUUFS͚ͩͰؤுΔ w نʹΑͬͯɺஈ֊తʹ 'MVYͬΆ͍ͯ͘͘͠
খ͞ͳػೳͷͱ͖ w 7JFX.PEFM͚ͩͰ݁ w ҎલͷίʔυͷSFOEFS Λ ஔ͖͑Δ͚ͩ
େ͖ͳػೳͷͱ͖ w &WFOU&NJUUFSͰ෦తʹ'MVY w 4UPSF "DUJPO$SFBUPS͕ෳͳΒ %JTQBUDIFSΛಋೖ
.PEFM খن : ViewModel 7JFX.PEFM Πϕϯτ ө σʔλมߋ
"DUJPO $SFBUPS தن : Flux෩ Πϕϯτ ө 4UPSF Action σʔλมߋ
େن : DispatcherΛಋೖ Πϕϯτ ө Action σʔλมߋ %JTQBUDIFS
Coding Convention ίʔσΟϯάελΠϧͷνΣοΫ
ैདྷJSHintͰνΣοΫ ಠࣗϧʔϧ1FSMͰॻ͍ͯͨ ✗ϧʔϧΛඍௐ͠ʹ͍͘ ✗+49&4ʹඇରԠ
None
✔ඪ४ϧʔϧ͕ॆ࣮ ✔ઃఆ͕ΧελϚΠζ͍͢͠ ✔ಠࣗϧʔϧ͕؆୯ʹॻ͚Δ
https://gist.github.com/fand/c13213f81bfce11f4132 ࢀߟಠࣗϧʔϧྫ
ಋೖͷํ w શͯͷඪ४ϧʔϧͰ Τϥʔ͕ग़ΔΑ͏ʹઃఆ w طଘίʔυͰΤϥʔফ͑Δ·Ͱ ϧʔϧΛ؇ΊΔ
˔ͷ͍ͭͨߦ શ෦ܯࠂ
None
ౖΒΕͯศརʂ
TEST THE COMPONENT Mission 3:
4݄·ͰͷJSςετ w $BTQFS+4ͷ&&ͷΈ w هࣄߘɺࠂͷද͚ࣔͩ
JS͕յΕ͍͢ w ϦϑΝΫλϦϯάͰΤϯόά w ϦϦʔεޙΤϥʔͰ·ͬͯ͘ 3FWFSUͨ͠ࣄʜʜ
http://0-9.sakura.ne.jp/pub/frontrend/start.html
ʮE2E͔Β࢝ΊΖʯͱݴ͏͚ΕͲ…… w γφϦΦ͕ෳࡶ ʮ͋ΔॱংͰϖʔδભҠͨ࣌͠ʹ উखʹλϒ͕ดͯ͡͠·͏ʯ όάͷςετͨ͘͠ͳ͍ʜʜ
ςετ͍ͨ͠ʂ
୯ମςετ͔Β͡ΊΑ͏
Unit Test ୯ମςετڥߏங
http://0-9.sakura.ne.jp/pub/frontrend/start.html
ཧ
ςετॻ͘ ςετམͪͳ͍Α͏ʹ ϦϑΝΫλϦϯά
ݱ࣮
ςελϒϧͳઃܭͰ ϦϑΝΫλϦϯά ςετॻ͘
ςελϒϧͳઃܭΛ৺͕͚Δ w ίʔυׂେલఏ w 7JFXૢ࡞͢Δ w %0.৮ΔϞδϡʔϧ ςετͮ͠Β͍
w ݩ"OHVMBS༻ͷςετϥϯφʔ w ϒϥβΛͬͯςετͰ͖Δ w ୯ମςετ͚ w ϒϥβૢ࡞ॆ࣮͍ͯ͠ͳ͍
গͣͭ͠ςετ૿͢ w ৽͍͠Ϟδϡʔϧςετඞਢ w ϦϑΝΫλϦϯάˠςετՃ w 6UJMܥϞδϡʔϧΛ༏ઌ
Viewͷςετ w &WFOU&NJUUFSͷ͓͔͛Ͱ ςετ͘͢͠ͳͬͨʂ w Πϕϯτൃߦ͞ΕΔ͔ʁ w %0.ཁૉ͕ඳը͞ΕͯΔ͔ʁ
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλө σʔλมߋ + emit(‘change’)
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλө σʔλมߋ + emit(‘change’) $POpH ϘλϯΫϦοΫ
Πϕϯτ͕ ਖ਼͘͠ൃߦ͞ΕΔ͔ʁ
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλө σʔλมߋ + emit(‘change’) 4JEFCBS σʔλมߋ
+ emit(‘change’) Πϕϯτʹର͠ σʔλ͕มߋ͞ΕΔ͔ʁ
4JEFCBS #VUUPOT $POpH ϘλϯΫϦοΫ σʔλө σʔλมߋ + emit(‘change’) σʔλ ਖ਼͘͠ඳը͞ΕΔ͔ʁ
#VUUPOT σʔλө
ςετॻ͚Δ
ςετϑΝΠϧ
None
·ͩ·ͩ ൃల్্
E2E Test E2EςετڥͷϦχϡʔΞϧ
CasperJS w 3FBDUΛ͏ͱ 1IBOUPN+4ͰΤϥʔग़Δʂ w 1IBOUPN+4ɺ͍͠
ଞͷखஈΛݕ౼
&MFDUSPOϕʔεͷεΫϨΠύʔ ✔γϯϓϧͳ"1* ✗ࡉ͔͍"1*͕Γͳ͍ ✗ϝιουνΣʔϯ͕໘
ݩ"OHVMBS+4ͷςετ༻ ✔Ϣʔβʔɺใ͕ଟ͍ ✔ಉظతʹॻ͚Δ ✗"OHVMBSઐ༻"1*ෆཁ Protractor
4FMFOJVNͷόΠϯσΟϯά ✔ಉظతʹॻ͚Δ ✔ׂͱ υΩϡϝϯτॆ࣮ ♨$-*ςετϥϯφʔ͖
4FMFOJVNͷόΠϯσΟϯά ✔ಉظతʹॻ͚Δ ✔ׂͱ υΩϡϝϯτॆ࣮ ♨$-*ςετϥϯφʔ͖ ࠾༻
Ұ൪ͷཧ༝ w 4FMFOJVNܥͳͷͰ ଞϥΠϒϥϦʹΓ͍͑ͣ͢ w 1SPUSBDUPS UFTUJVN
&4HFOFSBUPSͰ ςετΛॻ͘
&4HFOFSBUPSͰ ςετΛॻ͘
None
ςετಈ͍ͨʂ
http://amagitakayosi.hatenablog.com/entry/2015/10/30/083000 ࢀߟ͓͠ΖΤϐιʔυ
RESTORE THE ORDER ϑϩϯτΤϯυʹடংΛऔΓ͢ํ๏ @amagitakayosi
͔ͯ͘͠ டং कΒΕͨ
ࠓͨ͜͠ͱ w ϦϑΝΫλϦϯάצॴ w ਐతʹΞʔΩςΫνϟΛਐԽͤ͞Δ w ϑϨʔϜϫʔΫಋೖ w ςετڥߏங
ࠓͨ͜͠ͱ w ϦϑΝΫλϦϯάצॴ w ਐతʹΞʔΩςΫνϟΛਐԽͤ͞Δ w ϑϨʔϜϫʔΫಋೖ w ςετڥߏங ྑ͍ઃܭΛ
ࢦͨ͢Ίͷ ࡞Γ
ࠓ͞ͳ͔ͬͨ͜ͱ w ඒ͍͠ϥΠϒϥϦઃܭͷڞ༗ w ඇΤϯδχΞͱͷઃܭ w രͰαʔϏεͭ͘Δ։ൃϑϩʔ
ࠓ͞ͳ͔ͬͨ͜ͱ w ͯͳϒϩάνʔϜͷ։ൃϑϩʔ w ࣾϥΠϒϥϦͷઃܭํ๏ w αʔόଆݴޠͱͷઃܭͷڞ༗ ·ͩ·ͩ ൃల్্
Ί͛ͣʹ վળ͢Δ εϐϦοτ
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
גࣜձࣾͯͳͰ ࠷ߴͷΞʔΩςΫνϟΛࢦ͠ ͋͘ͳ͖୳ٻΛ͚ͭͮΔ ΤϯδχΞΛืू͍ͯ͠·͢ʂ