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
   

   View Slide

2. ࣗݾ঺հ
   ❖ ৘ใܥͷେֶӃੜ म࢜̎೥
   ❖ ϑϩϯτΤϯυ/όοΫΤϯυ྆ํ΍Δਓ
   ❖ ։ൃܦݧ

   C#,C++,C,Java,Python,PHP,javascript,ruby,Swift,julia
   ❖ SIerͱϕϯνϟʔاۀͰϓϩάϥϚͷमߦΛ1೥൒΄Ͳ
   ❖ react,Angular1.xܥ͸৮ͬͨࣄ͕͋Γ·͕͢,Angular2͸ࠓճॳΊͯ
   ❖ དྷ೥͔ΒLeveragesͷࣾһʹͳΓ·͢
   

   View Slide

3. ஫ҙ
   ❖ ՄಡੑͷͨΊ,JavascriptίʔυΛҰ෦CoffeeScriptͰ୅
   ༻͍ͯ͠·͕ྃ͢͝ঝ͍ͩ͘͞
   

   View Slide

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ͱσʔλߏ଄͕݁ͼ͍ͭͯͳ͍ͷ͕໰୊
   

   View Slide

5. ͳͥjQueryͰߦ͖٧·Δͷ͔
   ៉ྷͳߏ଄
   apple = new Apple(‘red’)
   apple.color = ‘blue’
   σʔλͷத਎͕มΘͬͨΒ,ಉ࣌ʹݟͨ໨ʹ΋൓ө͍͕ͨ͠

   جຊతʹjsͰ͸σʔλͷอ࣋ͱViewͷඳը͕෼཭͞Ε͍ͯΔ
   

   View Slide

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΋ߋ৽
   

   View Slide

7. Angular2ॴײ
   ❖ Angular2Ͱ͸ϓϩύςΟ·ͰࣗಈͰઃఆɻ
   ߋ৽༻ͷϝιου΋setter
   ͷએݴ΋ෆཁ
   (Ͳ͏ͤ͜͏͍͏σʔλߏ଄ʹ͢ΔͷͰ͜ͷ࣌఺
   Ͱ࢖Θͳ͍ཧ༝͕ͳ͘ͳΓ·ͨ͠)
   ❖ Angular2(TS)ͷΫϥε
   

   View Slide

8. Angular2ॴײ
   ❖ typescriptʹΑͬͯ໾ׂຖʹ҆શʹϑΝΠϧΛ෼཭͢Δ͜ͱ͕༰қʹͳͬͨ
   Ϋϥε
   σίϨʔλ
   ΠϯλʔϑΣʔε
   ؔ਺
   Ռͯʹ͸css fileͳͲͰ͑͞
   ͋ΒΏΔ
   ΦϒδΣΫτΛexportͯ͠
   pathࢦఆʹΑͬͯ
   ޷͖ͳ৔ॴͰimportͰ͖Δ
   

   View Slide

9. Angular2ཧղͷϙΠϯτ
   ❖ ཧղΛૣΊΔϙΠϯτ:໨త͸ಠཱͨ͠ίϯϙʔωϯτΛ࡞Δ͜ͱ
   ɹ=>componentʹඞཁͳϑΝΠϧΛू໿
   ͢ΔΠϝʔδ
   Ϟσϧ αʔϏε Ϟδϡʔϧ
   ίϯϙʔωϯτ
   ฼ମͷHTML
   ίϯϙʔωϯτ
   ϩδοΫ
   σʔλ ػೳ
   ϩδοΫͱσʔλͱΠϕϯτ

   ͕؅ཧ͞ΕΔλάͷఆٛ
   

   View Slide

10. Angular2ཧղͷϙΠϯτ
    ❖ ཧղΛૣΊΔϙΠϯτ:໨త͸ಠཱͨ͠ίϯϙʔωϯτΛ࡞Δ͜ͱ
    λά୯ҐͰૄ݁߹ʹͳΔ
    Ϟσϧૢ࡞Ҏ֎ͷϝιου͸module
    ΍Ϋϥεͱͯ͠෼཭
    ίϯϙʔωϯτͷ୯ҐΛ(js+html+css)
    ͱͯ͠UIຖʹಠཱʹઃఆ͢Δ͜ͱͰ
    ޓ͍ʹׯব͠ͳ͍UI͕࡞Γ΍͘͢ͳΔ
    ίϯϙʔωϯτͰఆٛ͞ΕΔϝιου͸
    جຊతʹॳظԽͱΠϕϯτͷΈͰ׬݁͢Δ
    Ϟσϧૢ࡞ઐ༻ͷΫϥεͰϩδοΫΛ෼཭
    σʔλߏ଄ઐ༻ͷΫϥεͰૢ࡞ର৅Λ෼཭
    ɹ=>componentʹඞཁͳϑΝΠϧΛू໿
    ɹɹɹ͢ΔΠϝʔδ
    

    View Slide

11. Angular2࣮ફϙΠϯτ
    ❖ angluar2͸webpackʹΑͬͯtranspileͰ͖ΔͷͰ,ϓϩμΫτ΁ͷҠ২ੑ͕ߴ͍
    ؀ڥຖʹઃఆϑΝΠϧ
    ΛมߋՄೳ
    ίϯύΠϧͷର৅ϑΝ
    ΠϧͷઃఆͳͲ
    webpack.*.js(*=dev౳)Ͱ
    distʹϑΝΠϧग़ྗઌΛ
    ࢦఆ͍ͯ͠Δ
    

    View Slide

12. Angular2࣮ફϙΠϯτ
    ❖ test͸ઃఆϑΝΠϧ࡞ͬͯ npm testͰ࣮ߦՄೳ
    karmaͱPhantomJSͷઃఆΛpackage.jsonͰઃఆͰ͖ΔͨΊ,e2eςετ

    ͱ͔؆୯ʹͰ͖ΔͬΆ͍Ͱ͢ɻ
    

    View Slide

13. Angular2࣮ફϙΠϯτ
    ❖ webpack ߏ੒Ͱಈ͘Α͏ʹͨ͠΋ͷ

    git@github.com:tkow/angular2_qs_with_webpack.git

    ʢhttps://angular.io/docs/ts/latest/guide/webpack.html

    ɹΛͳͧͬͨ΋ͷʣ
    

    View Slide

14. Angular2ॴײ
    ❖ ྑ͔ͬͨ఺
    ❖ ComponentͱLayout͕෼཭ग़དྷΔͷͰ࠶ར༻ੑ,มߋʹ͓͚Δॊೈੑ͕ߴ͍
    ❖ CSSͷ෼཭͕ྑ͍(શମͷCSSΛ೺Ѳ͠ͳͯ͘΋ྑ͍࢓૊Έ)
    ❖ ΫϥΠΞϯταΠυRouting͕ڧྗ
    ❖ TypeScriptͷImport ,Exportͷؔ܎͕Θ͔Γ΍͍͢ͷͰJSϑΝΠϧΛૄ݁߹ʹ͠΍͍͢
    ❖ Pipe͕͍͢͝
    ❖ γʔϜϨεʹView͕ߋ৽͞ΕΔͷ͕͍͢͝
    ❖ react-native + angular2 ͱ͍͏஍ຯʹ͍͢͝ϚϧνϓϥοτϑΥʔϜ։ൃϓϩδδΣΫ
    τ͕࣮ݱ͍ͯ͠Δ
    ❖ ng-cli͕͔ͳΓظ଴Ͱ͖Δ(railsίϚϯυฒΈʹศརʹͳΓͦ͏)
    

    View Slide

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ϝΠϯͱ͍͏ᷚ)
    

    View Slide

16. Angular2ॴײ
    ❖ ·ͱΊ
    ❖ ؅ཧ͕೉͍͠jsϑΝΠϧΛΧϓηϧԽ͢ΔͨΊςετ΋΍Γ΍͘͢
    อकੑ͕ߴ͍ͷͰ৽نϓϩδΣΫτͰ࢖͍͚ͬͯͦ͏
    ❖ ng-cli΍npm,webpackͳͲΛಋೖ͢Δ͜ͱͰ,τϥϯεύΠϧ࣌ͷ
    ϑΝΠϧ؅ཧ΋؆୯ʹͳΓͦ͏
    ❖ ϑΝΠϧͷมߋʹରͯ͠,ଈ࣌Ԡ౴ͳͷͰσόοά͠΍͍͢
    ❖ ΞϓϦέʔγϣϯͷن໛͕͋·Γେ͖͘ͳ͚Ε͹طଘͷίʔυΛ
    ॻ͖׵͑Δίετͷํ͕ߴͦ͏
    ❖ ͜ΕΛ΋ͬͱԡ͑͞ͱ͚ͱ͍͏͜ͱ͕͋Ε͹ੋඇڭ͍͑ͯͩ͘͞ɻ
    

    View Slide

17. Angular2ॴײ
    ❖ ࠓޙظ଴͢Δࣄௐ΂͍ͨࣄ
    ❖ hamlͱ͔ςϯϓϨʔτΤϯδϯ࢖͍͍ͨ(Emmet͸࢖͑Δ
    ͚Ͳ)
    ❖ ઃఆϑΝΠϧͷgenerator͕ྑ͘ͳͬͯ΄͍͠
    ❖ ࠓճtutorialΛऴΘΒͤΔ·Ͱ͔͠ग़དྷͳ͔ͬͨͷͰ,࣮ࡍ
    ʹϓϩμΫτΛ࡞Δͷʹ΋࢖ͬͯΈ͍ͨ
    

    View Slide