Leverages渋谷ヒカリエオフィスで開催された10/3 Angular2入門者の会で発表させていただいた際の http://connpass.com/event/40251/ スライドです。
creative commons by google.inc https://creativecommons.org/licenses/by-sa/3.0/tutorialΛ௨͔ͯͬͨ͠Angular2Ͱޮతʹ։ൃ͕։࢝Ͱ͖ΔΑ͏ʹͳΔͨΊͷࣝTakeo KusamaTeratail account : tkow
View Slide
ࣗݾհ❖ ใܥͷେֶӃੜ म࢜̎❖ ϑϩϯτΤϯυ/όοΫΤϯυ྆ํΔਓ❖ ։ൃܦݧ 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ΛऴΘΒͤΔ·Ͱ͔͠ग़དྷͳ͔ͬͨͷͰ,࣮ࡍʹϓϩμΫτΛ࡞ΔͷʹͬͯΈ͍ͨ