Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

tkow
October 14, 2016

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

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

tkow

October 14, 2016
Tweet

More Decks by tkow

Other Decks in Technology

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 ߏ੒Ͱಈ͘Α͏ʹͨ͠΋ͷ

    [email protected]: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