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
0
82
Kotlin2でdataクラスの copyメソッドを禁止する/Data class copy function to have the same visibility as constructor
eichisanden
1
690
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
4k
トラブルゼロで乗り切ったTypeScript移行/trouble-free TypeScript migration
eichisanden
3
3.4k
スクラム開発チームをLessでスケールさせた話/Scaling Scrum team with Less
eichisanden
0
5.7k
息の長いサービスのフロントエンドを少し改善する営み/frontend-improvement
eichisanden
3
2.8k
実はGitLabで使えるmermaid.js/gitlab-mermaid.js
eichisanden
1
690
楽楽明細でやってるChatOps/Development with ChatOps
eichisanden
0
1.2k
jshell概要
eichisanden
0
95
Other Decks in Programming
See All in Programming
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.9k
中級グラフィックス入門~効率的なメッシュレット描画~
projectasura
3
1.7k
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6.1k
Advanced Micro Frontends: Multi Version/ Framework Scenarios
manfredsteyer
PRO
0
110
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
5
1.2k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
240
PHPUnitの限界をPlaywrightで補完するテストアプローチ
yuzneri
0
350
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
11
2.8k
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
20250708_JAWS_opscdk
takuyay0ne
2
150
MCPで実現できる、Webサービス利用体験について
syumai
7
2.1k
Featured
See All Featured
It's Worth the Effort
3n
185
28k
Designing Experiences People Love
moore
142
24k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
390
Optimizing for Happiness
mojombo
379
70k
Building an army of robots
kneath
306
45k
Faster Mobile Websites
deanohume
308
31k
Facilitating Awesome Meetings
lara
54
6.5k
Statistics for Hackers
jakevdp
799
220k
Being A Developer After 40
akosma
90
590k
Music & Morning Musume
bryan
46
6.7k
Balancing Empowerment & Direction
lara
1
510
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ʹஔ͖͍͑ͯ͘ͷྑ͍͔͠Ε·ͤΜ ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠