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.8k
既存 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
プロダクトのことは何でもNotebookLMに聞こう / NotebookLM for on boarding
eichisanden
1
95
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
780
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
4k
トラブルゼロで乗り切ったTypeScript移行/trouble-free TypeScript migration
eichisanden
3
3.5k
スクラム開発チームをLessでスケールさせた話/Scaling Scrum team with Less
eichisanden
0
5.8k
息の長いサービスのフロントエンドを少し改善する営み/frontend-improvement
eichisanden
3
2.9k
実はGitLabで使えるmermaid.js/gitlab-mermaid.js
eichisanden
1
720
楽楽明細でやってるChatOps/Development with ChatOps
eichisanden
0
1.2k
jshell概要
eichisanden
0
95
Other Decks in Programming
See All in Programming
Swift Concurrency - 状態監視の罠
objectiveaudio
2
430
Build your own WebP codec in Swift
kishikawakatsumi
2
870
クラシルを支える技術と組織
rakutek
0
190
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
140
NetworkXとGNNで学ぶグラフデータ分析入門〜複雑な関係性を解き明かすPythonの力〜
mhrtech
3
950
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
1.5k
Current States of Java Web Frameworks at JCConf 2025
kishida
0
580
CSC509 Lecture 01
javiergs
PRO
1
430
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
2
310
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
720
defer f()とdefer fの挙動を 誤解していた話
kogamochiduki
2
160
Your Perfect Project Setup for Angular @BASTA! 2025 in Mainz
manfredsteyer
PRO
0
110
Featured
See All Featured
RailsConf 2023
tenderlove
30
1.2k
4 Signs Your Business is Dying
shpigford
185
22k
How STYLIGHT went responsive
nonsquared
100
5.8k
Being A Developer After 40
akosma
91
590k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
For a Future-Friendly Web
brad_frost
180
9.9k
Rails Girls Zürich Keynote
gr2m
95
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
A Tale of Four Properties
chriscoyier
160
23k
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ʹஔ͖͍͑ͯ͘ͷྑ͍͔͠Ε·ͤΜ ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠