Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
tkow-Angular2入門者の会発表資料
tkow
October 14, 2016
Technology
1
13k
tkow-Angular2入門者の会発表資料
Leverages渋谷ヒカリエオフィスで開催された10/3 Angular2入門者の会で発表させていただいた際の
http://connpass.com/event/40251/
スライドです。
tkow
October 14, 2016
Tweet
Share
More Decks by tkow
See All by tkow
React NativeでCross Platform対応を頑張る話
tkow
1
370
Flipperを使ってみた rntb in Japan 2020/05/27
tkow
1
170
開発環境の切り分け方のベストプラクティスが分からない -andfactory20190917-
tkow
0
170
teratail_study
tkow
0
310
react-beginner
tkow
0
610
Other Decks in Technology
See All in Technology
JAWS-UG 朝会 #36 登壇資料
takakuni
1
570
AWS Step Functions を用いた非同期学習処理の例
hacarus
0
100
Continuous Architecture Design for Modernization
humank
3
500
金融領域のマルチプロダクトを効率よく開発・運用するためのシステム基盤と組織設計について / 2022-07-28-multi-product-platform
stajima
0
150
20220803投資先CXO候補者向け 会社紹介資料_合同会社BLUEPRINT
hik
0
380
You're M̶u̶t̶e̶d̶ Rooted
patrickwardle
1
5.8k
Istioを活用したセキュアなマイクロサービスの実現/Secure Microservices with Istio
ido_kara_deru
3
430
セキュキャンを卒業してその後
kurochan
0
580
聊聊 Cgo 的二三事
david74chou
0
330
合同IT企業説明会から学ぶエンジニア向けの広報戦略
nagutabby
1
240
cobra は便利になっている
nwiizo
0
140
Sysdig Secure/Falcoの活用術! ~Kubernetes基盤の脅威モデリングとランタイムセキュリティの強化~
owlinux1000
0
270
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
47
7.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
316
19k
Visualization
eitanlees
125
12k
Become a Pro
speakerdeck
PRO
3
910
Building Better People: How to give real-time feedback that sticks.
wjessup
344
17k
Making the Leap to Tech Lead
cromwellryan
113
7.4k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
A Modern Web Designer's Workflow
chriscoyier
689
180k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
Building Adaptive Systems
keathley
25
1.2k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
570
Transcript
creative commons by google.inc https://creativecommons.org/licenses/by-sa/3.0/ tutorialΛ௨͔ͯͬͨ͠ Angular2Ͱޮతʹ։ൃ͕։࢝ Ͱ͖ΔΑ͏ʹͳΔͨΊͷࣝ Takeo Kusama
Teratail account : tkow
ࣗݾհ ❖ ใܥͷେֶӃੜ म࢜̎ ❖ ϑϩϯτΤϯυ/όοΫΤϯυ྆ํΔਓ ❖ ։ൃܦݧ C#,C++,C,Java,Python,PHP,javascript,ruby,Swift,julia ❖
SIerͱϕϯνϟʔاۀͰϓϩάϥϚͷमߦΛ1΄Ͳ ❖ react,Angular1.xܥ৮ͬͨࣄ͕͋Γ·͕͢,Angular2ࠓճॳΊͯ ❖ དྷ͔ΒLeveragesͷࣾһʹͳΓ·͢
ҙ ❖ ՄಡੑͷͨΊ,JavascriptίʔυΛҰ෦CoffeeScriptͰ ༻͍ͯ͠·͕ྃ͢͝ঝ͍ͩ͘͞
ͳͥjQueryͰߦ͖٧·Δͷ͔ Γ͕ͪͳμϝͳίʔυ $lists = $(this).parents(‘ul’).children(‘li’) $(this).parents(‘#user_wrap’).find(‘title’).val(‘hoge’) $(this).parents(‘#user_wrap’).find(‘description’).val(‘f’) $(‘#post’).children(‘#post_text’).val(‘fuga’) ΩϟογϡͳͲͰ࠷దԽ͠ͳ͍ͱຖճͳDOMࠪΛ͢Δ Ұ؏ੑͷͳ͍selectorؒͷஔؔΛѲͮ͠Β͍(thisͱpostͷҐஔؔͳͲ)
ύϥϝʔλΛมߋ͢Δ͚ͩͳͷʹίʔυ͕͘ͳΔ ݁ہ,DOMͱσʔλߏ͕݁ͼ͍ͭͯͳ͍ͷ͕
ͳͥjQueryͰߦ͖٧·Δͷ͔ ៉ྷͳߏ apple = new Apple(‘red’) apple.color = ‘blue’ σʔλͷத͕มΘͬͨΒ,ಉ࣌ʹݟͨʹө͍͕ͨ͠
جຊతʹjsͰσʔλͷอ࣋ͱViewͷඳը͕͞Ε͍ͯΔ
ͳͥjQueryͰߦ͖٧·Δͷ͔ ❖ ͔ͭͯҰ؏ੑͷͳ͍selectorʹۤ͠ΊΒΕͨܦݧ͔Βಘͨݟ UIຖʹΫϥεΛ ࡞ΓೖͱDOMͷ มߋΛಉ࣌ʹ ߦ͏Α͏ʹͰ͖Δ … $(this).parents(‘#user_wrap’).find(‘title’).val(‘Hello’) $(this).parents(‘#user_wrap’).find(‘description’).val(‘World’)
… user1 = new UseWindow(form,1) … user1.title = ‘Hello’ user1.description = ‘World’ … ೖ࣌ʹupdate(Property) ϝιουʹΑͬͯDOMߋ৽
Angular2ॴײ ❖ Angular2ͰϓϩύςΟ·ͰࣗಈͰઃఆɻ ߋ৽༻ͷϝιουsetter ͷએݴෆཁ (Ͳ͏ͤ͜͏͍͏σʔλߏʹ͢ΔͷͰ͜ͷ࣌ ͰΘͳ͍ཧ༝͕ͳ͘ͳΓ·ͨ͠) ❖ Angular2(TS)ͷΫϥε
Angular2ॴײ ❖ typescriptʹΑׂͬͯຖʹ҆શʹϑΝΠϧΛ͢Δ͜ͱ͕༰қʹͳͬͨ Ϋϥε σίϨʔλ ΠϯλʔϑΣʔε ؔ Ռͯʹcss fileͳͲͰ͑͞ ͋ΒΏΔ
ΦϒδΣΫτΛexportͯ͠ pathࢦఆʹΑͬͯ ͖ͳॴͰimportͰ͖Δ
Angular2ཧղͷϙΠϯτ ❖ ཧղΛૣΊΔϙΠϯτ:తಠཱͨ͠ίϯϙʔωϯτΛ࡞Δ͜ͱ ɹ=>componentʹඞཁͳϑΝΠϧΛू ͢ΔΠϝʔδ Ϟσϧ αʔϏε Ϟδϡʔϧ ίϯϙʔωϯτ ମͷHTML
ίϯϙʔωϯτ ϩδοΫ σʔλ ػೳ ϩδοΫͱσʔλͱΠϕϯτ ͕ཧ͞ΕΔλάͷఆٛ
Angular2ཧղͷϙΠϯτ ❖ ཧղΛૣΊΔϙΠϯτ:తಠཱͨ͠ίϯϙʔωϯτΛ࡞Δ͜ͱ λά୯ҐͰૄ݁߹ʹͳΔ Ϟσϧૢ࡞Ҏ֎ͷϝιουmodule Ϋϥεͱͯ͠ ίϯϙʔωϯτͷ୯ҐΛ(js+html+css) ͱͯ͠UIຖʹಠཱʹઃఆ͢Δ͜ͱͰ ޓ͍ʹׯব͠ͳ͍UI͕࡞Γ͘͢ͳΔ ίϯϙʔωϯτͰఆٛ͞ΕΔϝιου
جຊతʹॳظԽͱΠϕϯτͷΈͰ݁͢Δ Ϟσϧૢ࡞ઐ༻ͷΫϥεͰϩδοΫΛ σʔλߏઐ༻ͷΫϥεͰૢ࡞ରΛ ɹ=>componentʹඞཁͳϑΝΠϧΛू ɹɹɹ͢ΔΠϝʔδ
Angular2࣮ફϙΠϯτ ❖ angluar2webpackʹΑͬͯtranspileͰ͖ΔͷͰ,ϓϩμΫτͷҠ২ੑ͕ߴ͍ ڥຖʹઃఆϑΝΠϧ ΛมߋՄೳ ίϯύΠϧͷରϑΝ ΠϧͷઃఆͳͲ webpack.*.js(*=dev)Ͱ distʹϑΝΠϧग़ྗઌΛ ࢦఆ͍ͯ͠Δ
Angular2࣮ફϙΠϯτ ❖ testઃఆϑΝΠϧ࡞ͬͯ npm testͰ࣮ߦՄೳ karmaͱPhantomJSͷઃఆΛpackage.jsonͰઃఆͰ͖ΔͨΊ,e2eςετ ͱ͔؆୯ʹͰ͖ΔͬΆ͍Ͱ͢ɻ
Angular2࣮ફϙΠϯτ ❖ webpack ߏͰಈ͘Α͏ʹͨ͠ͷ git@github.com:tkow/angular2_qs_with_webpack.git ʢhttps://angular.io/docs/ts/latest/guide/webpack.html ɹΛͳͧͬͨͷʣ
Angular2ॴײ ❖ ྑ͔ͬͨ ❖ ComponentͱLayout͕ग़དྷΔͷͰ࠶ར༻ੑ,มߋʹ͓͚Δॊೈੑ͕ߴ͍ ❖ CSSͷ͕ྑ͍(શମͷCSSΛѲ͠ͳͯ͘ྑ͍Έ) ❖ ΫϥΠΞϯταΠυRouting͕ڧྗ ❖
TypeScriptͷImport ,Exportͷ͕ؔΘ͔Γ͍͢ͷͰJSϑΝΠϧΛૄ݁߹ʹ͍͢͠ ❖ Pipe͕͍͢͝ ❖ γʔϜϨεʹView͕ߋ৽͞ΕΔͷ͕͍͢͝ ❖ react-native + angular2 ͱ͍͏ຯʹ͍͢͝ϚϧνϓϥοτϑΥʔϜ։ൃϓϩδδΣΫ τ͕࣮ݱ͍ͯ͠Δ ❖ ng-cli͕͔ͳΓظͰ͖Δ(railsίϚϯυฒΈʹศརʹͳΓͦ͏)
Angular2ॴײ ❖ ਏ͔ͬͨ ❖ ֶशίετߴ͍(TypeScript,ಠࣗͷsyntax,ActiveRouter,Component,Decorator,ng~) ❖ ώΞυΩϡϝϯτʹhtmlcssΛॻ͚ΔͷͰԿߟ͑ͣʹ͏ͱSyntaxindent͕ࠅ͍͜ͱʹͳΔ (ϑΝΠϧΛ͢Δ͜ͱͰղܾ) ❖ *ngForͳͲ,λάͷதʹίʔυΛॻ͘ͷʹҧײ(׳Εͷʁ)
❖ ֊͚ͳͲͷઃఆΛࣗͰ͠ͳ͍ͱ,τϥϯεύΠϧϑΝΠϧ͕ࢄΒ͔Δ(webpackͰjsͷग़ྗઌΛ มߋग़དྷͨͷͰ,ࠓޙͷنԽCLIʹΑΔࣗಈ֊͚ʹظ ɻ) ❖ ͋͘·ͰframeworkͳͷͰ,طଘͷprojectʹ͙͢ʹಋೖͰ͖Δੑ͋·Γͳ͍ײ͕ͨ͡͠ (webpackng-cliͳͲͰಠཱͨ͠applicationͱͯ͠طଘͷϓϩμΫτʹͭͳ͙ͷ؆୯ͦ͏) ❖ ઃఆϑΝΠϧଟ͗͢(ng-cliʹࣗಈԽؤுͬͯཉ͍͠) ❖ έόϒέʔεʹҧײ ❖ ΠϕϯτϑοΫΞχϝʔγϣϯΛ͚Δํ๏Λ·ͩશʹѲͰ͖͍ͯͳ͍(CSSϝΠϯͱ͍͏ᷚ)
Angular2ॴײ ❖ ·ͱΊ ❖ ཧ͕͍͠jsϑΝΠϧΛΧϓηϧԽ͢ΔͨΊςετΓ͘͢ อकੑ͕ߴ͍ͷͰ৽نϓϩδΣΫτͰ͍͚ͬͯͦ͏ ❖ ng-clinpm,webpackͳͲΛಋೖ͢Δ͜ͱͰ,τϥϯεύΠϧ࣌ͷ ϑΝΠϧཧ؆୯ʹͳΓͦ͏ ❖
ϑΝΠϧͷมߋʹରͯ͠,ଈ࣌ԠͳͷͰσόοά͍͢͠ ❖ ΞϓϦέʔγϣϯͷن͕͋·Γେ͖͘ͳ͚ΕطଘͷίʔυΛ ॻ͖͑Δίετͷํ͕ߴͦ͏ ❖ ͜ΕΛͬͱԡ͑͞ͱ͚ͱ͍͏͜ͱ͕͋Εੋඇڭ͍͑ͯͩ͘͞ɻ
Angular2ॴײ ❖ ࠓޙظ͢Δࣄௐ͍ͨࣄ ❖ hamlͱ͔ςϯϓϨʔτΤϯδϯ͍͍ͨ(Emmet͑Δ ͚Ͳ) ❖ ઃఆϑΝΠϧͷgenerator͕ྑ͘ͳͬͯ΄͍͠ ❖ ࠓճtutorialΛऴΘΒͤΔ·Ͱ͔͠ग़དྷͳ͔ͬͨͷͰ,࣮ࡍ
ʹϓϩμΫτΛ࡞ΔͷʹͬͯΈ͍ͨ