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
Angularを使ったmodern開発_20180831
Search
Takayuki
September 01, 2018
Technology
0
220
Angularを使ったmodern開発_20180831
※この発表内容は少し古い情報も含まれます。
Takayuki
September 01, 2018
Tweet
Share
More Decks by Takayuki
See All by Takayuki
Laravel × Clean Architecture
bumptakayuki
0
280
エンジニアのキャリア論
bumptakayuki
0
190
地方カンファレンス主催のススメ
bumptakayuki
1
200
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
650
沖縄観光、名物を一挙紹介!
bumptakayuki
2
640
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.6k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
390
Other Decks in Technology
See All in Technology
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
150
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
120
Connect 100+を支える技術
kanyamaguc
0
200
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
560
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
130
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
visional_engineering_and_design
3
7.5k
Claude Code に プロジェクト管理やらせたみた
unson
6
4k
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
27k
PO初心者が考えた ”POらしさ”
nb_rady
0
210
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
340
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Typedesign – Prime Four
hannesfritz
42
2.7k
For a Future-Friendly Web
brad_frost
179
9.8k
Producing Creativity
orderedlist
PRO
346
40k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Unsuck your backbone
ammeep
671
58k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Become a Pro
speakerdeck
PRO
29
5.4k
Transcript
Angularを使ったmodern開ൃ 鈴木孝之 2018/08/31
"KFOEB ࣗݾհ "OHVMBSͷ֓ཁ "OHVMBSͷϝϦοτɾಛ %&.0
0.ࣗݾհ ◆໊લ ླ ೭(Suzuki Takayuki) ※ಉಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾհ ɾ1990ɺਆಸݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015ʹϑϧεϐʔυʹೖࣾ͠ɺ2017ʹಠཱɻ
ɾݱࡏɺϑϦʔϥϯεͰϊϚυϫʔΧʔΛΓͭͭɺ ىۀʹ͚ͨۀܥͷWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,JavaScript,backbone.js,Angular.js,Java
Copyright Re:Build.inc All Rights Reserved. ձࣾհ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ̍̒−̕
◆ࣄۀ༰ ɾۀʹ͓͍ͯͷϑʔυϩεΛແ͘͢ ࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 4໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
1.Angular4ͷ֓ཁ ɾAngular4ɺGoogle͕։ൃΛओಋ͢ΔʮϞμϯWebʯͷͨΊͷΞ ϓϦέʔγϣϯ։ൃϑϨʔϜϫʔΫɻ ɾAngularJSͱݺΕ͍ͯͨόʔδϣϯ1ʢAngularJS 1ʣ͔Βɺόʔ δϣϯ2Ͱେ͖͘มߋ͞ΕͯɺҎ߱AngularͱݺΕ͍ͯ·͢ɻ ɾ20173݄ʹϦϦʔεɻAngularࠓޙɺ͓͓ΉͶ6Χ݄͝ͱͷϝ δϟʔΞοϓσʔτ༧ఆ͕Ξφϯε͞Ε͍ͯΔɻ ࠓޙ֤όʔδϣϯɺҎલͷϦϦʔεͱԼҐޓੑ͕͋Δͱଋ͞ Ε͍ͯ·͢ɻ
ɾv4ظαϙʔτରɺ201810݄·Ͱ1ɻ(LTS) v4Angular͕ఏڙ͢Δ࠷ॳͷLTSͱͳΔ ɾAngular1ܥͱ΄΅ผɻɻ
ݬͷόʔδϣϯ3 ɾόʔδϣϯ3Λඈͨ͠ཧ༝@angular/routerͷӨڹɻ ͜ͷύοέʔδ͚ͩطʹόʔδϣϯ3.3·Ͱ্͕͍ͬͯͯɺ ࠞཚ͕ى͖ͦ͏ͩͬͨͷͰangularࣗମͷόʔδϣϯΛ4ʹ ͋͛ͨɻ
Angular5γϯϓϧԽͱ εϐʔυʹྗ༧ఆ ᶃAngularΞϓϦέʔγϣϯͷίϯύΠϧΛΑΓ γϯϓϧʹ͢ΔɻJITίϯύΠϥ͚ͩͰͳ͘AHTί ϯύΠϥʢA head of timeɿࣄલίϯύΠϥʣΛ ࠾༻͕ͨ͠ɺ͜ͷ2͕ͭ͋Δͱࠞཚ͢Δ͜ͱ͋ ΔɻࠓޙAHTίϯύΠϥΛσϑΥϧτʹ͢Δ͜
ͱͰϏϧυͷखॱΛҰຊԽ͠ɺ༨ܭͳ࡞ۀΛݮΒ ͍ͯͭ͘͠Γͩɻ ᶄεϐʔυͱαΠζͷྗɻMaterialIonicΛ ར༻ͨ͠ͱ͖ͳͲͰ࠷దʹѻ͑ΔΑ͏ʹ͢Δɻ
ֶशίετߴ͍ ֶशίετ͍ ॏྔͰϑϧελοΫ ܰྔͰ൚༻ੑ͋Γ ֤ϑϨʔϜϫʔΫͷൺֱ
ʙੈքతͳτϨϯυʙ 1.Angularͷ֓ཁ
ʙσΟϨΫτϦߏʙ 1.Angularͷ֓ཁ ɾcomponent UIͷ෦ͳͲɻ͜ͷޙͷεϥΠυͰઆ໌ɻ ɾconstant ఆͳͲͷఆٛΛ·ͱΊΔɻ ɾdirective HTMLΛแ͢ΔΑ͏ͳͷɻ jQueryͱͷڝ߹ͳͲΛ͛Δɻ ɾentity
ͷड͚͠Λߦ͏ΦϒδΣΫτJavaͰ͍͏DTOEntityΈ͍ͨͳͷɻ ɾservice αʔόαΠυͱͷAjax௨৴Λߦ͏ɻ ɾutil ڞ௨Ͱ͏Α͏ͳॲཧΛ·ͱΊΔɻ
ʙ֤σΟϨΫτϦͷׂ(PHPͱjsͷWebΞϓϦέʔγϣϯ)ʙ WebΞϓϦέʔγϣϯͰAjax௨৴͢ΔࡍͷॲཧͷྲྀΕ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service Entity
Util Directive Ajax௨৴ Entity Cons tant ඞཁʹԠͯ͡͏ ඞཁʹԠͯ͡͏
ɾUIͷ෦ΛComponent ͱׂ͍ͯͯ͘͜͠͠ͱ ͰɺෳࡶͳΞϓϦΑΓ ݟ௨͠ͷΑ͘ɺอक͠ ͍͢ίʔυʹ͢Δ͜ͱ͕ Ͱ͖Δɻ ɾ੩తܕ͚͕Ͱ͖Δɻ ɾJavaΈ͍ͨʹॻ͚Δɻ ɾอकੑ͕ߴ·Δ ɾ෦ԽΛਐΊΔͱ໘ʹͳͬ
ͯ͘ΔґଘΫϥεͷཧΛ༰ қʹ͢Δɻ ίϯϙʔωϯτࢤ ґଘੑͷೖ 2.ϝϦοτɾಛ TypeScript͕ਪ͞ΕͯΔ 1 3 2 ʙϝϦοτʙ
Collection 2.ϝϦοτɾಛ ʙίϯϙʔωϯτࢤʙ ίϯϙʔωϯτ1 HTML CSS TypeScript ίϯϙʔωϯτ2 HTML CSS
TypeScript ίϯϙʔωϯτ3 HTML CSS TypeScript
2.ϝϦοτɾಛ ʙίϯϙʔωϯτࢤʙ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ ίϯϙʔωϯτ
MainComponent SummaryComponent GraphComponent ListComponent 2.ϝϦοτɾಛ ʙίϯϙʔωϯτࢤʙ
䡧ಠࣗ ɾܕऍʢมɺҾɺΓͳͲͷܕએݴʣͱ ίϯύΠϧ࣌ͷܕνΣοΫ ɾܕਪ, ܕΨʔυ - ifจͷ instanceof ͳͲΛར༻ ͨ͠ܕਪ
ɾΠϯλʔϑΣΠε ɾྻڍܕ FOVN ɾMixin ɾδΣωϦοΫ ɾ໊લۭؒ ɾλϓϧ ɾڞ༻ମܕ ɾܕΤΠϦΞε 2.ϝϦοτɾಛ ʙTypeScriptʙ
2.ϝϦοτɾಛ TypeScriptΛಋೖͨ͠ํ͕ྑ͍έʔε ιʔείʔυ͕େͰ ͋Δ߹ɺ·ͨෳͷ ਓ͕ϓϩδΣΫτʹै ࣄ͍ͯ͠Δ߹ɺܕγ εςϜ໌Β͔ͳΤϥʔ Λ͙ͷʹཱͪ·͢ɻ 1 νʔϜϝϯόC#
JavaͷΑ͏ͳڧ͍ܕ͖ ݴޠͷόοΫάϥϯυ Λ࣋ͪɺJavaScriptΛͱ ͜ͱΜֶͿؾͳ͍ͱ͍ ͏߹ɺTS͍͍ସ ҊͩͱࢥΘΕ·͢ɻ 2 Angular ࣗମ͕ TypeScript Ͱ هड़͞Ε͓ͯΓɺϓϩμΫγϣ ϯίʔυͷهड़ TypeScript ͕ਪ͞Ε͍ͯΔɻ 3 ίʔυαΠζ ϝϯόʔͷաڈͷܦݧ AngularΛ͏߹
2.ϝϦοτɾಛ ʙґଘੑͷೖ(DI)ʙ ίϯϙʔωϯτ HTML CSS TypeScript ґଘΫϥεͷ Πϯελϯε ґଘΫϥεͷ Πϯελϯε
ґଘΫϥεͷ Πϯελϯε DI DI DI ɾॳΊͯݺͼग़͞Εͨ࣌ʹ ΫϥεͷΠϯελϯεԽΛߦ͏ɻ ɾίϯϙʔωϯτͷੜɾഁغͷ αΠΫϧʹؔΘΒͣΠϯελϯεΛ อ࣋͢Δɻ ɾґଘੑͷೖΛߦ͏͜ͱͰ ΠϯελϯεԽʹ͕͔͔࣌ؒΔͷΛ ճආ͠ɺύϑΥʔϚϯεΛ ্͛ΒΕΔɻ
Componentͷςετશମߏ ϑϩϯταΠυ αʔόαΠυ Component HTML CSS TypeScript Service Entity Util
Ajax௨৴ Cons tant Base Service http Service ܧঝ DI Service Mock DI ຌྫ ࣮ࡍͷιʔε Mockͷιʔε ·ͨ ͳͲ
ʙDSPͱʙ AD SSP DSP1 DSP3 DSP2 ϝσΟΞ RTB CPMΦʔΫγϣϯ DSP1
80ԁ DSP2 110ԁ DSP3 100ԁ ᶃΠϯϓϨογϣϯൃੜ ᶄDSPೖࡳϦΫΤετ ᶅDSP͕݅ʹԊͬͯೖࡳ ᶆΦʔΫγϣϯ։࠵ ᶇࠂ৴
ʙAdMatrixDSPͰߦ͍ͬͯΔࣄʙ AD SSP AdMatrix DSP ϝσΟΞ CPMΦʔΫγϣϯ DSP1 80ԁ DSP2
110ԁ DSP3 100ԁ ᶃΠϯϓϨογϣϯൃੜ ᶄDSPೖࡳϦΫΤετ ᶅDSP͕݅ʹԊͬͯೖࡳ ᶆΦʔΫγϣϯ։࠵ ᶇࠂ৴ 䡧ཧը໘Ͱओʹߦ͏ૢ࡞ ɾେྔͷࠂϨϙʔτͷ֬ೝ ɾࠂͷ࡞ɾฤू ɾ৴ϢʔβͷλʔήςΟϯά ͳͲ RTB
ɾେྔͷσʔλΛѻ͏ɻ ɾϨϙʔτσʔλͷάϥϑԽɻ ɾϞʔμϧͷىಈɾ̎ॏىಈɻ ɾ༧ࢉͳͲΛදࣔ͢ΔҝɺͷදهͰ όά͕ग़Δͱக໋తɻ ɾւ֎ల։͍ͯ͠Δձࣾͷ߹ɺଟݴޠରԠɻ ࠂཧը໘ͷಛ
WWW.SITE2MAX.PRO Free PowerPoint & KeyNote Templates 3 DEMO TwitterใΛੳ͢Δ Twitter
Analysis Twitter Analysis
ʙ༻͍ͯ͠Δٕज़ʙ ϑϩϯταΠυ αʔόαΠυ ϏϧυɾλεΫཧ ɾऔಘσʔλͷՃ 3 DEMO API