Angular 2 を利用した開発の実際

12月15日@ヒカラボ
https://career.levtech.jp/hikalab/event/detail/72/
発表スライドです。
Angular 2 の実際についてフレームワークの選定から簡単な事例の紹介まで。

Transcript

1. ANGULAR 2 Λར༻ͨ͠ ։ൃͷ࣮ࡍ 20161215ʛώΧˑϥϘ
2. ABOUT φΧγϚΞΩϥ > ϑϩϯτΤϯυΤϯδχΞ > ݟͨ໨ ʼ JS
3. ΞδΣϯμ 1. ձࣾ঺հ 2. αʔϏε 3. Angular 2 ͷ֓ཁ 4. ϑϨʔϜϫʔΫͷબఆ 5. Angular 2 Λ࢖ͬͨ։ൃͷ࣮ࡍ
5. ΋͏͙͢4೥ ن໛ > ໿ 30 ໊ʢ։ൃɿ໿ 10 ໊ʣ
6. ίΞٕज़ > Text / Data mining > Big Data > Deep Learning etc...
7. αʔϏε঺հ
8. EmotionTech ʹ͍ͭͯ - ސ٬ମݧϚωδϝϯτʹ ࠷దԽͨ͠Ϋϥ΢υγεςϜ - 2016 ೥ 6 ݄͘Β͍͔Βঃʑʹ։ൃ
9. ։ൃମ੍ > ϑϩϯτΤϯυΤϯδχΞɿ3.5 ໊ > αʔόʔαΠυΤϯδχΞɿ4.5 ໊ > ΠϯϑϥΤϯδχΞɹɹ ɿ1 ໊
10. ٕज़ελοΫ > HTML / SCSS / TypeScript > Angular 2ʢ + PrimeNG ʣ > Rails 5 > Docker > AWS
11. ANGULAR 2 ͷ֓ཁ
12. ANGULAR 2 ͷ֓ཁ > ͍ΘΏΔϑϧελοΫϑϨʔϜϫʔΫ > ίϯϙʔωϯτࢦ޲ > TypeScript Ͱͷ։ൃΛਪ঑ > ΫϩεϓϥοτϑΥʔϜ
13. ϦϦʔε·Ͱͷي੻ > 2015-12-15 beta.0 > 2016-05-02 rc.0ɹ > 2016-06-15 rc.2 > 2016-09-13 rc.7 > 2016-09-14 2.0 ϦϦʔε!
14. બఆ࣌ظͷঢ়گ > 6݄͔Βঃʑʹ։ൃ։࢝ > Angular 2 ઈࢍ։ൃத > rc.2 ͘Β͍ͷ࣌ظ > ͳ͘ͳΒͳ͍ BRAKING CHANGES
15. ͳ͔ͳ͔ͷঢ়گͰ͢Ͷ !
16. ϑϨʔϜϫʔΫͷબఆ
17. ީิʹ͕͋ͬͨϞϊ > Angular 1.n > Angular 2 > React / Redux > Vue.js
18. બఆͷલఏͱͯ͠ʜ ANGULAR 1.N Ͱͳ͚Ε͹ ֶशίετ͸͔͔Δ
19. ϙΠϯτ 1. طଘͷ஌ࣝΛ׆͔ͤΔ͔ 2. ؀ڥߏஙͷ͠΍͢͞ 3. ίϛϡχςΟ͕͋Δ͔Ͳ͏͔ 4. ϝϯόʔͷϞνϕʔγϣϯ
20. 1. طଘͷ஌ࣝΛ׆͔ͤΔ͔ > Angular 1.n ͷ஌ࣝ …ͪΐͬͱ͚ͩ > ଞͷݴޠͷ஌ࣝ ҙ֎ʹ΋ Java ΍ AS3 ͷܦݧ͕׆͖Δ
21. 2. ؀ڥߏஙͷ͠΍͢͞ > ϑϧελοΫͷϑϨʔϜϫʔΫͰ͋Δ > େମͷ͜ͱ͸Ұ௨Γఏڙ͞ΕΔ > ϥΠϒϥϦ౳ͷௐࠪɾݕূͷݮগ > angular-cli Λར༻ͨ͠؀ڥͷߏங > खܰʹ؀ڥΛߏஙͰ͖Δʂ
22. ΋͏ϏϧυπʔϧͰ ጧድ͠ͳ͍ !
23. 3. ίϛϡχςΟ ANGULAR JAPAN USER GROUP SLACK GROUP > https://ng-japan-invite.herokuapp.com/ ΠϕϯτɿCONNPASS
24. 4. νʔϜͷϞνϕʔγϣϯ ΠϚΠνʜ!
25. 4. νʔϜͷϞνϕʔγϣϯ ਎΋֖΋ͳ͍ݴ͍ํΛ͢Ε͹ ϓϩμΫτ = ໰୊ͷղܾ ͳͷͰϞνϕʔγϣϯ͸͕͋Βͳ͔ͬͨ !
26. ܾΊख > - ֶशίετ͸มΘΒͳ͍ > ↑ ؀ڥߏஙָ͕ > ↑ ίϛϡχςΟ͕׆ൃ
27. ։ൃͷ࣮ࡍ
28. ։ൃͷ࣮ࡍ > ! Α͔ͬͨ఺ > " ർΕͨ఺ > # ർΕͨ఺ͷղܾ๏
29. ! Α͔ͬͨ఺
30. TYPESCRIPT > ίʔυͷݟ௨͕͍͍͠ > ܕ͕͏Ε͍͠ > ه๏ʹ͋·Γۤ࿑͠ͳ͍
31. ίϯϙʔωϯτࢦ޲ > HTML / CSS / JS ͕·ͱ·͍ͬͯΔ > Ͳ͜ʹॻ͔Ε͍ͯΔͷ͔͙͢Θ͔Δ > CSS ͕ΧϓηϧԽ͞ΕΔ
32. ANGULAR-CLI Ͱ؀ڥߏஙͰጧድ͠ͳ͘ ͯ͢Μͩ
33. ! ർΕͨ఺
34. 1. ֶशίετ͕ߴ͍ લఏ஌ࣝଟ͗͢... > Angular 2 > ES 2015 / ES.next > TypeScript etc...
35. 2. υΩϡϝϯτ͕ඍົ... > େ൒͕ӳޠ > ( RC࣌ ) ެࣜυΩϡϝϯτ͕ ͳ͔ͳ͔Ξοϓσʔτ͞Εͳ͍ > ݕࡧੑͷ௿͞
36. 3. ͳ͘ͳΒͳ͍ BRAKING CHANGES
37. 4. ະରԠ͕ύοέʔδ͕ଟ͍ > Angular 2 ʹରԠ͍ͯ͠Δ ύοέʔδ΍ϥΠϒϥϦ͕গͳ͍ > ରԠͯͯ͠΋ 1 ਓͰ։ൃ͍ͯ͠Δ৔߹΋...
38. ! ർΕͨ఺ͷղܾ๏
39. 1. ֶशίετ
40. ֶशίετͷݏͳ఺! ίετʹ ݟ߹͏Ϧλʔϯ͕ͳ͍ ͜ͱ
41. ANGULAR 2 ͸ WEB ඪ४ͷػೳΛ ઌߦ࣮૷
42. ͭ·Γ ANGULAR 2 Λษڧ͢Δͱ... > ஌ࣝΛ࠷৽ʹΞοϓσʔτͰ͖Δ > ͞Βʹ Web ඪ४ͷઌߦ࣮૷Λࢼ͢͜ͱ΋ʂ
43. ଞʹ΋͋Δ Ϧλʔϯ
44. TYPESCRIPT > ܕ͕͋Δͷ͸΍ͬͺΓ͏Ε͍͠ > ίʔυͷݟ௨͠ͷྑ͞ > ಠࣗͷػೳΛແཧͯ͠ར༻͠ͳͯ͘OK > ΤσΟλͷίʔυิ׬ʹΑΔ։ൃޮ཰ˢ
45. 2. υΩϡϝϯτ͕ඍົ...
46. ެࣜυΩϡϝϯτ > ϦϦʔεޙʹҰؾʹॆ࣮ > ݱࡏ͸ঃʑʹ֦ॆத
47. ݕࡧੑͷ௿͞ ݕࡧ࣌ʹ޻෉͢Δʂ > όʔδϣϯΛೖΕΔ > ظؒΛઃఆ͢Δ
48. 3. ͳ͘ͳΒͳ͍ BRAKING CHANGES
49. 3. ͳ͘ͳΒͳ͍ BRAKING CHANGES > ίϛϡχςΟͰ৽͍͠৘ใʹ৮ΕΔ > angular ؔ࿈ͷϦϙδτϦΛ watch
50. 4. ະରԠ͕ύοέʔδ͕ଟ͍ > issue ΛΈΔ > ϦϙδτϦΛ watch ͢Δ > όʔδϣϯ৘ใΛݟΔ
51. ։ൃͰࠔͬͨ఺
52. ·ͩ·ͩઙ͍ॴͰ࣮૷͍ͯ͠ΔͷͰɺ Angular 2 ͷػೳͰࠔͬͨͱ͍͏ͷ͸গͳ͍... Ͱ͕͢ɺগ͚ͩ͠͝঺հ !
53. MULTIPART/FORM-DATA ະରԠ > http ΫϥεͰ௨৴ͷॲཧΛߦ͏ > multipart/form-data ʹະରԠ͕։ൃதʹ൑໌ > ϑΝΠϧΞοϓϩʔυ͕Ͱ͖ͳ͍ > ݁ہ XHR Ͱ࣮૷͠௚͠ & APIमਖ਼
54. CSS ͕Χεέʔυ͠ͳ͍ > ਌ίϯϙʔωϯτͰఆٛͨ͠ CSS ͸ ࢠͷίϯϙʔωϯτʹҾ͖ܧ͕Εͳ͍ > ίϯϙʔωϯτ͸Ͳ͜Ͱར༻͞ΕΔ͔Θ͔ Βͳ͍ͷͰ౰વ
55. WE ARE HIRING !! Emotion Tech Ͱ͸ɺΠΩΠΩͱಇ͚ΔੈͷதΛ ࡞Γ͍ͨΤϯδχΞΛੵۃืूத! ؾʹͳΔํ͸͝࿈བྷ͍ͩ͘͞ʂ https://www.wantedly.com/companies/emotion-tech
56. THANK YOU!