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
既存 Web アプリケーションへの React.js 適用/react for web app...
Search
A1
February 19, 2019
Programming
0
1.6k
既存 Web アプリケーションへの React.js 適用/react for web application
2019.2.19 Rakus Meetup Tokyo #2 フロントエンドNight発表資料
A1
February 19, 2019
Tweet
Share
More Decks by A1
See All by A1
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
120
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
3.7k
トラブルゼロで乗り切ったTypeScript移行/trouble-free TypeScript migration
eichisanden
3
3.1k
スクラム開発チームをLessでスケールさせた話/Scaling Scrum team with Less
eichisanden
0
5.2k
息の長いサービスのフロントエンドを少し改善する営み/frontend-improvement
eichisanden
3
2.6k
実はGitLabで使えるmermaid.js/gitlab-mermaid.js
eichisanden
1
500
楽楽明細でやってるChatOps/Development with ChatOps
eichisanden
0
1.1k
jshell概要
eichisanden
0
84
楽楽明細の開発を支える技術
eichisanden
0
580
Other Decks in Programming
See All in Programming
リリース8年目のサービスの1800個のERBファイルをViewComponentに移行した方法とその結果
katty0324
5
3.5k
組織に自動テストを書く文化を根付かせる戦略(2024秋版) / Building Automated Test Culture 2024 Autumn Edition
twada
PRO
10
4.5k
Macとオーディオ再生 2024/11/02
yusukeito
0
150
qmuntal/stateless のススメ
sgash708
0
120
AWS IaCの注目アップデート 2024年10月版
konokenj
3
3.1k
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
240
Identifying User Idenity
moro
6
7.7k
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.2k
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
4
4.3k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
980
Outline View in SwiftUI
1024jp
1
100
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
23
11k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
How to train your dragon (web standard)
notwaldorf
88
5.7k
Testing 201, or: Great Expectations
jmmastey
38
7k
Building Applications with DynamoDB
mza
90
6.1k
Producing Creativity
orderedlist
PRO
341
39k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
790
Why You Should Never Use an ORM
jnunemaker
PRO
53
9k
It's Worth the Effort
3n
183
27k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Transcript
طଘ8FCΞϓϦέʔγϣϯ ͷ3FBDUKTద༻ 3BLVT.FFUVQ5PLZPϑϩϯτΤϯυ/JHIU &JJDIJ.JUB
w&JJDIJ.JUB w" !FJDIJTBOEFO wָָ໌ࡉ։ൃ՝ϦʔυΤϯδχΞೖࣾ w#MPHIUUQTHZP[BCFFS wEFWυϝΠϯങ͍͍ͨ ࣗݾհ
୲αʔϏεͷ͝հ
w ։ൃͨ͠ͷޙͰ͢ w ࠷৽ͷػೳʢIPPLTͳͲʣͷग़͖ͯ·ͤΜ ͡Ίʹ
w ʢͰ͢ɻνʔϜϦʔμʔʣ w 0͞ΜʢϚϚ͞ΜΤϯδχΞ ɻࠓճͷओʣ w 4͞Μʢࠓճಛʹग़൪ͳ͠ʣ ˠͭ·ΓখنͳνʔϜ ࣌ͷνʔϜମ੍
ாථͷϨΠΞτΛϢʔβ͕ઃఆग़དྷΔͱ͍͏ɺ6*͕ ͪΐͬͱෳࡶͳػೳཁ͕͍݅ࠐΜͰ͖·ͨ͠ɻ ֎෦ઃܭΛແࣄऴ͑ɺৄࡉઃܭϨϏϡʔΛ͍ͯͨ͠ ͋Δͷग़དྷࣄʜ ಋೖʹࢸͬͨܦҢ
0͞Μɿ ಋೖʹࢸͬͨܦҢ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ
0͞Μɿ 0͞Μɿ ಋೖʹࢸͬͨܦҢ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ
0͞Μɿ 0͞Μɿ ɿ ಋೖʹࢸͬͨܦҢ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͑ͬʂʁ
0͞Μɿ 0͞Μɿ ɿ 0͞Μɿ ಋೖʹࢸͬͨܦҢ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͑ͬʂʁ
0͞Μɿ 0͞Μɿ ɿ 0͞Μɿ ɿ ಋೖʹࢸͬͨܦҢ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͜ͷIJEEFOʹอଘ͓͖ͯ͠·͢ɻ ͪΐͪΐͪΐʂʁ
͑ͬʂʁ
ͭΒ͍ʢԕ͍ʣ
ࠓ·Ͱͱಉ͡Α͏ʹK2VFSZͰ࣮ͨ͠Β͍༧ײ͔͠ ͠ͳ͍ɻ ͕ͩͦΕK2VFSZ͕ѱ͍༁Ͱͳ͍ɻ ෳࡶͳσʔλΛ%0.ʹ࣋ͨͤΔͷਏ͍͠ɺෳࡶͳ%0. Λૢ࡞͢Δͷ͍͠ʜ ಋೖʹࢸͬͨܦҢ
ਓྨʹ%0.Λѻ͏ͷ͗͢͠Δ
˞ݸਓͷײͰ͢ 3FBDUKTී௨ʹྲྀߦ͍ͬͯͨɻ "OHVMBSKTͱޓੑ͕ͳ͍͕ग़ͯͪΐͬͱख͕ग़͠ʹ͍͘ঢ়گ 7VFKTࠓޙྲྀߦΓͦ͏ͳײͩͬͨ͡ʢ͜͜·ͰྲྀߦΔͱࢥͬͯͳ ͔͕ͬͨʣ ˠݸਓతʹ3FBUKTͷͩͬͨɻ ࣌ͷτϨϯυΛৼΓฦΔͱ ͜ͷࠒ
֮͑Δ͜ͱ͕গͳͯ͘γϯϓϧ +49ͷݟͨͷΠϯύΫτͱཪෲʹɺ ͓͖֮͑ͯ͘ه๏ͳͲ͔ͳΓগͳ͍ɻ ˠطଘͷ+BWB4DSJQUͷ͕ࣝ࠷େݶ׆͔ͤΔɻ 3FBDUKTΛબͨ͠ཧ༝ class App extends Component {
render() { return ( <div> Hello World </div> ) } }
ϚʔΫΞοϓΛγϯϓϧʹอͯΔ ͨͩͰ͑͞ΰνϟ͍͍ͭͯΔKTQʹϑϩϯτΤϯυϥΠϒ ϥϦಠࣗͷه๏Λࠞࡏͤͨ͘͞ͳ͔ͬͨ ˞ίʔυงғؾͰ͢ɻ 3FBDUKTΛબͨ͠ཧ༝ <!doctype html> <html ng-app> <head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.7/angular.min.js"></script> </head> <body> <html:form styleId="" menuConfig="HOGE_LIST" queryString="save" method="post" enctype="multipart/form-data"> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <h1>Hello {{yourName}}! </h1> <c:out value="${foo}"/> </hoge:form> </body> </html>
ྲྀߦ͍ͬͯͨ ϒϩάهࣄͳͲใʹࠔΒͳ͍ɻ ҆ͳཧ༝Ͱ͕͢ɺྲྀߦ͍ͬͯΔͷʹཧ༝͕͋Δɻ ྑ͍ͱࢥ͑ΔͷͳΒ͋͑ͯٯΒ͏ඞཁͳ͍ɻ ؾܰʹ࡞Γ͠Ͱ͖ͳ͍ͷͰʢಛʹUP#ͷαʔϏεͳͷͰʣ ͙͢ഇΕΔͷΛ࠾༻͢Δͷਏ͍ 3FBDUKTΛબͨ͠ཧ༝
3FBDUKTΛ࠾༻͢Δʹ͋ͨͬͯ؆୯ͳνʔϜπʔϧΛ࡞ͬ ͯΈ·ͨ͠ɻ 3FBDUKT͚ͩͩͱࢠͷ$PNQPOFOUؒͷTUBUFͱQSPQTͷ ཧ͕͘͢͝େมͩͬͨͷͰ࠷ॳ͔ΒSFBDUSFEVYΛ͏ ͜ͱΛબɻ ˠখ͘͞࡞ͬͯࢼ͢ͷॏཁ 3FEVYΛબͨ͠ཧ༝
3FBDU3FEVYͰߦͧ͘ʂ
3FBDUͷαϯϓϧίʔυ&4͕ΘΕ͍ͯΔ͜ͱ͕ଟ͍Ͱ ͕͢ɺݩʑ&4ͳݱͳͷͰମܥతʹֶΜͰ͓͍ͨํ͕ޮ͕ ྑ͍ͱߟ͑·ͨ͠ɻ ࣗझຯͰ͍֮͑ͯͨͷͰߨࢣͱͳΓɺ&4ษڧձΛ։࠵ɻ ࣄલ४උʢ&4ͷֶशʣ ӳޠ͕ۤͰͳ͚Εɺ#BCFMͷެࣜυΩϡϝϯτྑ͍͔ͱࢥ͍·͢ -FBSO&4 IUUQTCBCFMKTJPEPDTFOMFBSO ڭࡐʹ8FC %#13&447PMΛ༻
&OIBODFE0CKFDU-JUFSBMT ࣄલʹ͓͍֮͑ͯͨํ͕ྑ͍ϕετ̏ var foo = 0; var obj = {foo};
// {foo: foo} ͱઃఆͨ͠ͷͱಉ͡ // Computed (dynamic) property names var key = "foo"; var obj = { [key]: 0, [key + "_bar"]: 1 };
4QSFBE0QFSBUPS ࣄલʹ͓͍֮͑ͯͨํ͕ྑ͍ϕετ̏ var obj = {a:1, b:2}; var obj2 =
{ ...obj, c: 3 }; // { a:1, b:2, c:3 } var [one, two, three] = [1, 2, 3] %FTUSVDUVSJOH TUBUFΛߋ৽͢Δͱ͖ʹΑ͘ΘΕΔ
0SFJMMZͷʮೖ3FBDUʯΛճ͠ಡΈ͠·ͨ͠ɻ ˞ࠓͱͳͬͯ༰ݹ͍Ͱ͢ɻ࣌͜ͷຊ͔͠ͳ͔ͬͨͱهԱɻ ࣄલ४උʢ3FBDUKTͷֶशʣ ެࣜαΠτ͔ɺ8FCͷهࣄͰྑ͍ͱࢥ͍·͢ɻ
2JJUBͷهࣄΛݟͳ͕Βֶश͠·ͨ͠ 3FEVYೖʲμΠδΣετ൛ʳͰཧղ͢Δ3FEVYͷجૅ IUUQTRJJUBDPNLJJUBJUFNTBGCDGC ࣄલ४උʢ3FEVYͷֶशʣ
ͦͷޙɺͻͨ͢Βάάͬͯௐͨɻ ʢଟɺҰճۙ͘άά͍ͬͯͨʣ ˠมԽ͕ܹ͘͠ݹ͍ใଟ͔ͬͨͷͰෳαΠτͰ֬ ೝ͢Δඞཁ͕͋ΓɺͦΕ͕େมͩͬͨɻ ࣮ࡍʹίʔυΛॻ͖࢝ΊΔ
࣮ࡍͬͯΈͯ
SFOEFS͞Εͳ͍ ɾ$PNQPOFOUͷίϯετϥΫλ͕ຖճݺΕΔͱצҧ͍͍ͯͨ͠ɻ ɾTUBUFΛॻ͖͍͑ͯͨͨΊ࠶SFEOFS͞Εͳ͔ͬͨ ϋϚͬͨ͜ͱ class App extends Component { constructor()
{ super(); this.state = { input: “͜ΜʹͪΘ” }; } componentWillRecieveProps(nextProps) { this.setState({ input : nextProps.input }) } } ίϯετϥΫλҰ͔͠ݺΕͳ͍ͷͰɺ ຖճॲཧ͍ͨ͠ͷϥΠϑαΠΫϧϝιου ʹॻ͔ͳ͍ͱμϝ 4UBUFͷߋ৽TFU4UBUF ΛΘͳ͍ͱμϝ
όάͷΓ͚͕͔ͬͨ͠ ɹಉ͡ඇಉظॲཧ͕̎ճಈ͍ͯ͠·͏͕ൃੜɻ 3FBDU3FEVYͷόάͩͱࢥ͍ͬͯͨΒɺ+BWBଆͷόάͩͬ ͨͱɻ݁ہαʔόαΠυͷॲཧʹ͕͕͋ͬͨɺ 1SPNJTFपΓͷॲཧΛࢄʑٙͬͯ͠·ͬͨɻ ϋϚͬͨ͜ͱ
*&Ͱಈ͔ͳ͍ ͣͬͱ$ISPNFͰσόοά͓ͯ͠Γɺ։ൃޙʹ*&Ͱς ετΛ࢝ΊͨΒಈ͔ͳͯ͘ྦ ˠOPEFMJTUGPS&BDI1SPNJTF͕ରԠ͍ͯ͠ͳ͍ ɹCBCFMQPMZpMMͰࣄͳ͖ΛಘΔɻ ϋϚͬͨ͜ͱ
ηογϣϯ͕ΕΔ αʔόʔଆʹॲཧ͕ඈͳ͍͕͍࣌ؒͨΊɺηογϣ ϯΕʹͳΓ͘͢ฤू༰͕ඈΜͩͱϢʔβ͔Βۤ ͕ʜ 3FBDUͷͰͳ͍Ͱ͕͢ʣ ࣗಈอଘػೳΛΈࠐΈ·ͨ͠ɻ ϋϚͬͨ͜ͱ
✨K2VFSZͱͷڞଘ K2VFSZͷ΄͏͕ศརͳͱ͜Ζͬͨɻ K26FSZ6*ͷ%% ϦαΠζ αϜωΠϧͳͲ ͨ͜͠ͱ
✨ඈͼඈͼʹSFOEFS͍ͨ͠ طଘKTQ෦ͷҰ෦Λ͍͔ͨͬͨͷͰɺϧʔτϨϯμ Ϧϯάͤͣ ɺαϒπϦʔΛ͖ͳͱ͜ʹϨϯμϦϯά͢ Δ3FBDUίϯϙʔωϯτΛ࡞͠·ͨ͠ɻ طଘͷ+41ͷλά෦ͳͲΛ͏ඞཁ͕͋ͬͨͨΊɻ ͪΐͬͱτϦοΩʔͳ͜ͱΛ͍ͯ͠Δɻ ࢀߟ63-IUUQTRJJUBDPNULSLUJUFNTDFBBGFBG ͨ͜͠ͱ
<div> ͜͜Λrender </div> <tag:button hoge=“button”>ADD</button> <!— JSPͷλάΛ͍͍ͨ--> <div> ͜͜Λrender </div>
σʔλཧͷҰݩԽ͕ग़དྷͨ TUBUFʹΑΓσʔλΛҰݩཧͰ͖ͨ͜ͱͰɺՄಡੑɾอ कੑ্͕͕ͬͨ ͬͯΈͯΑ͔ͬͨ͜ͱ
ίϯϙʔωϯτ୯ҐͷઃܭʹϝϦοτ͕͋ͬͨ w ઃܭ͍͢͠ w ίʔυಡΈ͍͢ w ྲྀ༻͍͢͠ w ͕͋ͬͨͱ͖ͷӨڹൣғগͳ͍ ͬͯΈͯΑ͔ͬͨ͜ͱ
όά͕গͳ͔ͬͨ 3FBDUىҼͷຊ൪όάग़͍ͯͳ͍ ͬͯΈͯΑ͔ͬͨ͜ͱ
3FBDUKTͷόʔδϣϯΞοϓͷਵ ࣮·ͩWܥΛ͓ͬͯΓɺ ݱࡏɺWܥͷόʔδϣϯΞοϓରԠதɻ ʢDPNQPOFOU8JMM3FDFJWF1SPQTͳ͘ͳͬͨΓഁյతͳม ߋ͕͋ͬͯগͭ͠Β͍ʣ ࠓޙͷ՝
ଞػೳͷల։ ৽ػೳʹ͍ͭͯ3FBDUΛ͏͖͔ΜͰ͍Δɻ ͦͷޙɺ͞΄ͲෳࡶͰͳ͍ը໘Λ3FBDUΛΘͣʹ࡞ͬ ͕ͨɺऴΘͬͯΈΔͱ3FBDUͬͨํ͕ྑ͔ͬͨͱͷ ࠓޙͷ՝
σ ΟϨΫτϦߏϑΝΠϧߏ ݱঢ়ɺDPNQPOFOUBDUJPOSFEVDFS̍ͭͷKTYϑΝΠϧ ʹॻ͍͍ͯ·͕͢ɺଞػೳʹల։͢ΔͳΒϑΝΠϧΛ ͚ͳ͍ͱ͍͚ͳ͍ ࠓޙͷ՝
ࣗಈςετ 3FBDU$PNQPOFOUࣗಈςετ͍͕ͨ͠ग़དྷ͍ͯͳ͍ ࠓޙͷ՝
ɾࣄલ४උ͋·Γ͍Βͳ͍͕ɺϧʔϧΛ֮͑Δ·Ͱ ͦΕͳΓʹେมͩͬͨ ɾͬͨϝϦοτे͋ͬͨɻ ɾݹ͍γεςϜΛ৽͍ͯ͘͠Ξϓϩʔνͱͯ͠ঃʑʹ 3FBDUʹஔ͖͍͑ͯ͘ͷྑ͍͔͠Ε·ͤΜ ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠