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
330
エンジニアのキャリア論
bumptakayuki
0
200
地方カンファレンス主催のススメ
bumptakayuki
1
210
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
680
沖縄観光、名物を一挙紹介!
bumptakayuki
2
670
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.8k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
400
Other Decks in Technology
See All in Technology
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
450
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
310
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
150
Language Update: Java
skrb
2
300
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
480
2025年になってもまだMySQLが好き
yoku0825
8
4.8k
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
430
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
220
ハードウェアとソフトウェアをつなぐ全てを内製している企業の E2E テストの作り方 / How to create E2E tests for a company that builds everything connecting hardware and software in-house
bitkey
PRO
1
150
250905 大吉祥寺.pm 2025 前夜祭 「プログラミングに出会って20年、『今』が1番楽しい」
msykd
PRO
1
940
Webアプリケーションにオブザーバビリティを実装するRust入門ガイド
nwiizo
7
830
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Writing Fast Ruby
sferik
628
62k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Statistics for Hackers
jakevdp
799
220k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Raft: Consensus for Rubyists
vanstee
140
7.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
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