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

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ΛऴΘΒͤΔ·Ͱ͔͠ग़དྷͳ͔ͬͨͷͰ,࣮ࡍ

    ʹϓϩμΫτΛ࡞Δͷʹ΋࢖ͬͯΈ͍ͨ