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
190
Angularを使ったmodern開発_20180831
※この発表内容は少し古い情報も含まれます。
Takayuki
September 01, 2018
Tweet
Share
More Decks by Takayuki
See All by Takayuki
地方カンファレンス主催のススメ
bumptakayuki
1
110
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
1
360
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
380
沖縄観光、名物を一挙紹介!
bumptakayuki
2
400
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
1k
flutterでイベントアプリを作ってみた
bumptakayuki
0
91
オフショア開発の辛みと学んだ事
bumptakayuki
0
310
ChatGPTにStripeのサンプルコードを書かせてみた
bumptakayuki
1
130
ChatGPTに記事を書かせてみた
bumptakayuki
1
200
Other Decks in Technology
See All in Technology
GraphQL 成熟度モデルの紹介と、プロダクトに当てはめた事例 / GraphQL maturity model
mh4gf
7
1.3k
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
300
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
380
私が trocco を推す理由
__allllllllez__
1
210
開発パフォーマンスを最大化するための開発体制
ham0215
2
260
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
140
どうするコスト最適化のトレードオフ
tetsuyaooooo
1
500
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
160
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
3
550
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
280
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
450
Hands-on Gemini, the Google DeepMind LLM
meteatamel
1
110
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Raft: Consensus for Rubyists
vanstee
132
6.3k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
How GitHub (no longer) Works
holman
304
140k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
60
14k
Designing for humans not robots
tammielis
248
25k
Building Adaptive Systems
keathley
31
1.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Designing Experiences People Love
moore
136
23k
Designing the Hi-DPI Web
ddemaree
276
33k
Gamification - CAS2011
davidbonilla
76
4.6k
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