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
tkow-Angular2入門者の会発表資料
Search
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
580
Flipperを使ってみた rntb in Japan 2020/05/27
tkow
1
220
開発環境の切り分け方のベストプラクティスが分からない -andfactory20190917-
tkow
0
190
teratail_study
tkow
0
340
react-beginner
tkow
0
670
Other Decks in Technology
See All in Technology
OCI Data Integration技術情報 / ocidi_technical_jp
oracle4engineer
PRO
1
1.5k
戦略的DDDを実践するための跳躍力 / OOC 2024
pictiny
6
4k
オブジェクトのおしゃべり大失敗 メッセージングアンチパターン集 / messaging anti-pattern collection
ytake
0
330
これまでのキャリアとこれからMLエンジニアとしてどう動くか
masatakashiwagi
0
390
GitHub最新情報キャッチアップ 2024年3月
dzeyelid
16
3.2k
Challenges - Open Farming Hackdays 2024
loleg
0
560
AMLD 2024 - Build Your Own GPT
donlelef
1
260
8週連続ウェビナー_イチから学ぶFivetran
cmsuzu
0
170
Getting started with controlling LEGO using Swift
hcrane
0
130
あらゆる商品を扱う商品データベースを再設計した話 / product db re-architecture
rince
8
3.7k
データマネジメントを支える武器としてのメタデータ管理
10xinc
1
630
長文から長文を生成するLLMツールをオープンソースで作ってみた。
tomohisa
2
140
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
Adopting Sorbet at Scale
ufuk
66
8.5k
BBQ
matthewcrist
78
8.7k
Music & Morning Musume
bryan
39
5.5k
The Cult of Friendly URLs
andyhume
73
5.6k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
1
1.2k
What's new in Ruby 2.0
geeforr
335
31k
Ruby is Unlike a Banana
tanoku
95
10k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
How to train your dragon (web standard)
notwaldorf
71
5.1k
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 ߏͰಈ͘Α͏ʹͨ͠ͷ
[email protected]
: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ΛऴΘΒͤΔ·Ͱ͔͠ग़དྷͳ͔ͬͨͷͰ,࣮ࡍ
ʹϓϩμΫτΛ࡞ΔͷʹͬͯΈ͍ͨ