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
Amagi
November 07, 2015
Technology
95
41k
フロントエンドに秩序を取り戻す方法
東京Node学園祭2015
Amagi
November 07, 2015
Tweet
Share
More Decks by Amagi
See All by Amagi
Enchant your website with VFX-JS
fand
0
46
How to hack VS Code: evil ways (Japanese)
fand
5
3.5k
READY FOR THE BATTLE? -Introduction to Live Coding-
fand
1
470
GLSL PostEffect in TouchDesigner
fand
2
1.9k
VEDA GLSL Livecoding workshop
fand
2
5.1k
PWA 方法 無料 今すぐ
fand
3
1.5k
Have you ever heard GPUs cry?
fand
2
3.7k
Real World GLSL
fand
0
240
APIs for VJ-ing
fand
1
6.7k
Other Decks in Technology
See All in Technology
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
4k
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
850
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
200
10分でわかるfreeeのQA
freee
1
3.4k
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
事業者間調整の行間を読む 調整の具体事例
sugiim
0
1.5k
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
210
Java x Spring Boot Warm up
kazu_kichi_67
2
490
Commitment vs Harrisonism - Keynote for Scrum Niseko 2024
miholovesq
6
1.1k
Featured
See All Featured
The Illustrated Children's Guide to Kubernetes
chrisshort
48
48k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Typedesign – Prime Four
hannesfritz
39
2.4k
Designing on Purpose - Digital PM Summit 2013
jponch
115
6.9k
Git: the NoSQL Database
bkeepers
PRO
425
64k
A better future with KSS
kneath
238
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
What's new in Ruby 2.0
geeforr
342
31k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Why Our Code Smells
bkeepers
PRO
334
57k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
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 αʔόଆݴޠͱͷઃܭͷڞ༗ ·ͩ·ͩ ൃల్্
Ί͛ͣʹ վળ͢Δ εϐϦοτ
ྑ͍αʔϏεΛ ࡞͍ͬͯͧ͘ʂ ʂʂʂʂʂʂʂ ʂʂʂʂʂʂʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠
גࣜձࣾͯͳͰ ࠷ߴͷΞʔΩςΫνϟΛࢦ͠ ͋͘ͳ͖୳ٻΛ͚ͭͮΔ ΤϯδχΞΛืू͍ͯ͠·͢ʂ