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
340
エンジニアのキャリア論
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
AWSで始める実践Dagster入門
kitagawaz
1
740
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
2
260
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
220
メルカリIBISの紹介
0gm
0
160
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
【NoMapsTECH 2025】AI Edge Computing Workshop
akit37
0
230
データ分析エージェント Socrates の育て方
na0
6
2.4k
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
160
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
380k
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
1.2k
MagicPod導入から半年、オープンロジQAチームで実際にやったこと
tjoko
0
110
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.9k
Rails Girls Zürich Keynote
gr2m
95
14k
Making Projects Easy
brettharned
117
6.4k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Scaling GitHub
holman
463
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Embracing the Ebb and Flow
colly
87
4.8k
Bash Introduction
62gerente
615
210k
The Art of Programming - Codeland 2020
erikaheidi
56
13k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Building Applications with DynamoDB
mza
96
6.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