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

Angular歴3ヶ月がAngularと本気で向き合ってみた

279a52e5e2cdc94d2079b1fb9fba7553?s=47 yae
December 07, 2019

 Angular歴3ヶ月がAngularと本気で向き合ってみた

【We Are JavaScripters! 3周年記念】 WeJS Festival ! (2019/12/07)の登壇資料です。

279a52e5e2cdc94d2079b1fb9fba7553?s=128

yae

December 07, 2019
Tweet

Transcript

  1. Angularྺ3ϲ݄͕Angularͱ޲͖߹ͬͯΈͨ WeJS Festival! (2019.12.07) Emi Yaegashi

  2. About me • Name: Emi Yaegashi • Softwere Engineer (Python,

    Rails, Angular) • Organizer of We are Javascripters! • Twitter: @yae19921110 • Favorite: United Kingdom, Disney (Donald Duck), Travel✈, Japanese Sake • Today is the first LT in WeJS!!
  3. Agenda • Angularͷҹ৅(νʔϜϝϯόʔɺstack overflowͷsurvey) • ࠓͷϓϩδΣΫτʹೖͬͯ಄Λ๊͑ͨ͜ͱ2બ • ࠓͷϓϩδΣΫτͰAngularͷྑ͞Λ׆͔͢ʹ͸ • ࠷ޙʹ

  4. Angularͷҹ৅

  5. Angularͷҹ৅(νʔϜϝϯόʔ) • ϝϯλʔ (from India) Angular͍ͬͯΖΜͳॴʹίʔυ͕ࢄΒ͹Δ͔Βۤखɻ৽ نػೳ͸Vueʹ͍ͨ͠ͳ͋ɻ • ྡͷ੮ͷνʔϜϝϯόʔ (from

    Philippine) Angularܦݧ͋ΔΑʂ݁ߏίʔυ͕ࠞͬͪ͟Ό͏͔Β೉͠ ͍ΑͶɻ
  6. Angularͷҹ৅(Stack OverflowͷSurvey) • Stack Overflowͷ޷͖ͳwebϑϨʔϜϫʔΫ2019೥൛ ग़య: https://insights.stackoverflow.com/survey/2019#key-results

  7. *PJʹؔͯ͠ิ଍ ɾը໘͸਺छྨ͔͠ͳ͍(େن໛Ͱ͸ͳ͍) ɾڞ௨͢Δύʔπ͕গͳ͍(࠶ར༻Λੜ͔ͤΔ෦෼͕গͳ͍) ͳͥ͜ͷPJ͸AngularΛ࢖͍ͬͯΔΜͩ?

  8. ࠓͷϓϩδΣΫτʹೖͬͯ಄Λ๊͑ͨ͜ͱ2બ

  9. ίʔυ͕ࢄΒ͔͍ͬͯΔ ਌ίϯϙʔωϯτ ࢠίϯϙʔωϯτA ๮άϥϑ1දࣔ Data A Data B Data(API͔ΒҰׅͰऔಘ) Data

    A άϥϑ1༻Option ࢠίϯϙʔωϯτB ๮άϥϑ2දࣔ Data B άϥϑ2༻Option ࢠίϯϙʔωϯτC جຊ৘ใΛදࣔ Data C Data C
  10. ϥΠϒϥϦ͕ࠞࡏ(Angular༻ίϯϙʔωϯτͱૉͷJS) ਌ίϯϙʔωϯτ ࢠίϯϙʔωϯτA NVD3 (d3.jsΛѻ͍΍ͨ͘͢͠ϥΠϒϥϦ) *Angulary༻ίϯϙʔωϯτΛ࢖༻ ଙίϯϙʔωϯτa ๮άϥϑ1 ଙίϯϙʔωϯτa ๮άϥϑ2

    ࢠίϯϙʔωϯτB D3.jsͷϨʔμʔνϟʔτ༻ͷϥΠϒϥϦ *ૉͷJSϥΠϒϥϦΛ࢖༻ ଙίϯϙʔωϯτ Ϩʔμʔνϟʔτ NVD3ͷAngular༻WrapperϥΠϒϥϦ: https://github.com/krispo/ng2-nvd3 D3.jsͷϨʔμʔνϟʔτϥΠϒϥϦ: https://github.com/alangrafu/radar-chart-d3
  11. ࠓͷϓϩδΣΫτͰAngularͷྑ͞Λ׆͔͢ʹ͸

  12. ϓϩδΣΫτͰ಄Λ๊͑ͨ͜ͱ ʮίʔυ͕ࢄΒ͔͍ͬͯΔʯ΁ͷରԠ 1. ڞ௨ύʔπͱͯ͠ѻ͑ͳ͍͔ݕ౼͢Δ 2. ਌ίϯϙʔωϯτ͔Β౉͢σʔλΛ੔ཧ͢Δ ਌ίϯϙʔωϯτ ࢠίϯϙʔωϯτA άϥϑ1දࣔ Data

    A Data B Data(API͔ΒҰׅͰऔಘ) Data A άϥϑ1༻Option ࢠίϯϙʔωϯτB άϥϑ2දࣔ Data B άϥϑ2༻Option ࢠίϯϙʔωϯτC جຊ৘ใΛදࣔ Data C Data C 1 άϥϑ1༻Option? άϥϑ2༻Option? 2
  13. ϓϩδΣΫτͰ಄Λ๊͑ͨ͜ͱ ʮϥΠϒϥϦ͕ࠞࡏʯ΁ͷରԠ 1. Angularͷίϯϙʔωϯτ͕͋Δɺ༷ʑͳνϟʔτλΠ ϓʹରԠͨ͠ϥΠϒϥϦͷ࢖༻Λݕ౼͢Δ ྫ: NG2 Charts (https://github.com/valor-software/ng2-charts) 11

    Angular Component Libraries You Should Know In 2019Ͱ΋঺հ͞Ε͍ͯΔ (https://blog.bitsrc.io/11-angular-component-libraries-you-should-know-in-2018-e9f9c9d544ff) ਌ίϯϙʔωϯτ ࢠίϯϙʔωϯτA NVD3 (d3.jsΛѻ͍΍ͨ͘͢͠ϥΠϒϥϦ) *Angulary༻ίϯϙʔωϯτΛ࢖༻ ଙίϯϙʔωϯτa ๮άϥϑ1 ଙίϯϙʔωϯτa ๮άϥϑ2 ࢠίϯϙʔωϯτB D3.jsͷϨʔμʔνϟʔτ༻ͷϥΠϒϥϦ *ૉͷJSϥΠϒϥϦΛ࢖༻ ଙίϯϙʔωϯτ Ϩʔμʔνϟʔτ 1
  14. ࠷ޙʹ

  15. AngularͷJob Offer͸ଟ͍Β͍͠(2019೥৘ใ) ग़య: https://programmingwithmosh.com/javascript/what-javascript-framework-you-should-learn-to-get-a-job-in-2019/

  16. Thank you for listening!