tkow-Angular2入門者の会発表資料

Leverages渋谷ヒカリエオフィスで開催された10/3 Angular2入門者の会で発表させていただいた際の
http://connpass.com/event/40251/
スライドです。

Transcript

1. creative commons by google.inc https://creativecommons.org/licenses/by-sa/3.0/ tutorialΛ௨ͯ͠෼͔ͬͨ Angular2Ͱޮ཰తʹ։ൃ͕։࢝ Ͱ͖ΔΑ͏ʹͳΔͨΊͷ஌ࣝ Takeo Kusama Teratail account : tkow
2. ࣗݾ঺հ ❖ ৘ใܥͷେֶӃੜ म࢜̎೥ ❖ ϑϩϯτΤϯυ/όοΫΤϯυ྆ํ΍Δਓ ❖ ։ൃܦݧ
 C#,C++,C,Java,Python,PHP,javascript,ruby,Swift,julia ❖ SIerͱϕϯνϟʔاۀͰϓϩάϥϚͷमߦΛ1೥൒΄Ͳ ❖ react,Angular1.xܥ͸৮ͬͨࣄ͕͋Γ·͕͢,Angular2͸ࠓճॳΊͯ ❖ དྷ೥͔ΒLeveragesͷࣾһʹͳΓ·͢
3. ஫ҙ ❖ ՄಡੑͷͨΊ,JavascriptίʔυΛҰ෦CoffeeScriptͰ୅ ༻͍ͯ͠·͕ྃ͢͝ঝ͍ͩ͘͞
4. ͳͥ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ͱσʔλߏ଄͕݁ͼ͍ͭͯͳ͍ͷ͕໰୊
5. ͳͥjQueryͰߦ͖٧·Δͷ͔ ៉ྷͳߏ଄ apple = new Apple(‘red’) apple.color = ‘blue’ σʔλͷத਎͕มΘͬͨΒ,ಉ࣌ʹݟͨ໨ʹ΋൓ө͍͕ͨ͠
 جຊతʹjsͰ͸σʔλͷอ࣋ͱViewͷඳը͕෼཭͞Ε͍ͯΔ
6. ͳͥ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΋ߋ৽
7. Angular2ॴײ ❖ Angular2Ͱ͸ϓϩύςΟ·ͰࣗಈͰઃఆɻ ߋ৽༻ͷϝιου΋setter ͷએݴ΋ෆཁ (Ͳ͏ͤ͜͏͍͏σʔλߏ଄ʹ͢ΔͷͰ͜ͷ࣌఺ Ͱ࢖Θͳ͍ཧ༝͕ͳ͘ͳΓ·ͨ͠) ❖ Angular2(TS)ͷΫϥε
8. Angular2ॴײ ❖ typescriptʹΑͬͯ໾ׂຖʹ҆શʹϑΝΠϧΛ෼཭͢Δ͜ͱ͕༰қʹͳͬͨ Ϋϥε σίϨʔλ ΠϯλʔϑΣʔε ؔ਺ Ռͯʹ͸css fileͳͲͰ͑͞ ͋ΒΏΔ ΦϒδΣΫτΛexportͯ͠ pathࢦఆʹΑͬͯ ޷͖ͳ৔ॴͰimportͰ͖Δ
9. Angular2ཧղͷϙΠϯτ ❖ ཧղΛૣΊΔϙΠϯτ:໨త͸ಠཱͨ͠ίϯϙʔωϯτΛ࡞Δ͜ͱ ɹ=>componentʹඞཁͳϑΝΠϧΛू໿ ͢ΔΠϝʔδ Ϟσϧ αʔϏε Ϟδϡʔϧ ίϯϙʔωϯτ ฼ମͷHTML ίϯϙʔωϯτ ϩδοΫ σʔλ ػೳ ϩδοΫͱσʔλͱΠϕϯτ
 ͕؅ཧ͞ΕΔλάͷఆٛ
10. Angular2ཧղͷϙΠϯτ ❖ ཧղΛૣΊΔϙΠϯτ:໨త͸ಠཱͨ͠ίϯϙʔωϯτΛ࡞Δ͜ͱ λά୯ҐͰૄ݁߹ʹͳΔ Ϟσϧૢ࡞Ҏ֎ͷϝιου͸module ΍Ϋϥεͱͯ͠෼཭ ίϯϙʔωϯτͷ୯ҐΛ(js+html+css) ͱͯ͠UIຖʹಠཱʹઃఆ͢Δ͜ͱͰ ޓ͍ʹׯব͠ͳ͍UI͕࡞Γ΍͘͢ͳΔ ίϯϙʔωϯτͰఆٛ͞ΕΔϝιου͸ جຊతʹॳظԽͱΠϕϯτͷΈͰ׬݁͢Δ Ϟσϧૢ࡞ઐ༻ͷΫϥεͰϩδοΫΛ෼཭ σʔλߏ଄ઐ༻ͷΫϥεͰૢ࡞ର৅Λ෼཭ ɹ=>componentʹඞཁͳϑΝΠϧΛू໿ ɹɹɹ͢ΔΠϝʔδ
11. Angular2࣮ફϙΠϯτ ❖ angluar2͸webpackʹΑͬͯtranspileͰ͖ΔͷͰ,ϓϩμΫτ΁ͷҠ২ੑ͕ߴ͍ ؀ڥຖʹઃఆϑΝΠϧ ΛมߋՄೳ ίϯύΠϧͷର৅ϑΝ ΠϧͷઃఆͳͲ webpack.*.js(*=dev౳)Ͱ distʹϑΝΠϧग़ྗઌΛ ࢦఆ͍ͯ͠Δ
12. Angular2࣮ફϙΠϯτ ❖ test͸ઃఆϑΝΠϧ࡞ͬͯ npm testͰ࣮ߦՄೳ karmaͱPhantomJSͷઃఆΛpackage.jsonͰઃఆͰ͖ΔͨΊ,e2eςετ
 ͱ͔؆୯ʹͰ͖ΔͬΆ͍Ͱ͢ɻ
13. Angular2࣮ફϙΠϯτ ❖ webpack ߏ੒Ͱಈ͘Α͏ʹͨ͠΋ͷ
 git@github.com:tkow/angular2_qs_with_webpack.git
 ʢhttps://angular.io/docs/ts/latest/guide/webpack.html
 ɹΛͳͧͬͨ΋ͷʣ
14. Angular2ॴײ ❖ ྑ͔ͬͨ఺ ❖ ComponentͱLayout͕෼཭ग़དྷΔͷͰ࠶ར༻ੑ,มߋʹ͓͚Δॊೈੑ͕ߴ͍ ❖ CSSͷ෼཭͕ྑ͍(શମͷCSSΛ೺Ѳ͠ͳͯ͘΋ྑ͍࢓૊Έ) ❖ ΫϥΠΞϯταΠυRouting͕ڧྗ ❖ TypeScriptͷImport ,Exportͷؔ܎͕Θ͔Γ΍͍͢ͷͰJSϑΝΠϧΛૄ݁߹ʹ͠΍͍͢ ❖ Pipe͕͍͢͝ ❖ γʔϜϨεʹView͕ߋ৽͞ΕΔͷ͕͍͢͝ ❖ react-native + angular2 ͱ͍͏஍ຯʹ͍͢͝ϚϧνϓϥοτϑΥʔϜ։ൃϓϩδδΣΫ τ͕࣮ݱ͍ͯ͠Δ ❖ ng-cli͕͔ͳΓظ଴Ͱ͖Δ(railsίϚϯυฒΈʹศརʹͳΓͦ͏)
15. Angular2ॴײ ❖ ਏ͔ͬͨ఺ ❖ ֶशίετ͸ߴ͍(TypeScript,ಠࣗͷsyntax,ActiveRouter,Component,Decorator,ng~) ❖ ώΞυΩϡϝϯτʹhtml΍cssΛॻ͚ΔͷͰԿ΋ߟ͑ͣʹ࢖͏ͱSyntax΍indent͕ࠅ͍͜ͱʹͳΔ (ϑΝΠϧΛ෼཭͢Δ͜ͱͰղܾ) ❖ *ngForͳͲ,λάͷதʹίʔυΛॻ͘ͷʹҧ࿨ײ(׳Εͷ໰୊ʁ) ❖ ֊૚෼͚ͳͲͷઃఆΛࣗ෼Ͱ͠ͳ͍ͱ,τϥϯεύΠϧϑΝΠϧ͕ࢄΒ͔Δ(webpackͰjsͷग़ྗઌΛ มߋग़དྷͨͷͰ,ࠓޙͷن໿Խ΍CLIʹΑΔࣗಈ֊૚෼͚ʹظ଴ ɻ) ❖ ͋͘·ͰframeworkͳͷͰ,طଘͷprojectʹ͙͢ʹಋೖͰ͖Δ਌࿨ੑ͸͋·Γͳ͍ײ͕ͨ͡͠ (webpack΍ng-cliͳͲͰಠཱͨ͠applicationͱͯ͠طଘͷϓϩμΫτʹͭͳ͙ͷ͸؆୯ͦ͏) ❖ ઃఆϑΝΠϧଟ͗͢໰୊(ng-cliʹࣗಈԽؤுͬͯཉ͍͠) ❖ έόϒέʔεʹҧ࿨ײ ❖ ΠϕϯτϑοΫ΍ΞχϝʔγϣϯΛ෇͚Δํ๏Λ·ͩ׬શʹ೺ѲͰ͖͍ͯͳ͍(CSSϝΠϯͱ͍͏ᷚ)
16. Angular2ॴײ ❖ ·ͱΊ ❖ ؅ཧ͕೉͍͠jsϑΝΠϧΛΧϓηϧԽ͢ΔͨΊςετ΋΍Γ΍͘͢ อकੑ͕ߴ͍ͷͰ৽نϓϩδΣΫτͰ࢖͍͚ͬͯͦ͏ ❖ ng-cli΍npm,webpackͳͲΛಋೖ͢Δ͜ͱͰ,τϥϯεύΠϧ࣌ͷ ϑΝΠϧ؅ཧ΋؆୯ʹͳΓͦ͏ ❖ ϑΝΠϧͷมߋʹରͯ͠,ଈ࣌Ԡ౴ͳͷͰσόοά͠΍͍͢ ❖ ΞϓϦέʔγϣϯͷن໛͕͋·Γେ͖͘ͳ͚Ε͹طଘͷίʔυΛ ॻ͖׵͑Δίετͷํ͕ߴͦ͏ ❖ ͜ΕΛ΋ͬͱԡ͑͞ͱ͚ͱ͍͏͜ͱ͕͋Ε͹ੋඇڭ͍͑ͯͩ͘͞ɻ
17. Angular2ॴײ ❖ ࠓޙظ଴͢Δࣄௐ΂͍ͨࣄ ❖ hamlͱ͔ςϯϓϨʔτΤϯδϯ࢖͍͍ͨ(Emmet͸࢖͑Δ ͚Ͳ) ❖ ઃఆϑΝΠϧͷgenerator͕ྑ͘ͳͬͯ΄͍͠ ❖ ࠓճtutorialΛऴΘΒͤΔ·Ͱ͔͠ग़དྷͳ͔ͬͨͷͰ,࣮ࡍ ʹϓϩμΫτΛ࡞Δͷʹ΋࢖ͬͯΈ͍ͨ