Slide 1

Slide 1 text

ANGULAR 2 Λར༻ͨ͠ ։ൃͷ࣮ࡍ 20161215ʛώΧˑϥϘ

Slide 2

Slide 2 text

ABOUT φΧγϚΞΩϥ > ϑϩϯτΤϯυΤϯδχΞ > ݟͨ໨ ʼ JS

Slide 3

Slide 3 text

ΞδΣϯμ 1. ձࣾ঺հ 2. αʔϏε 3. Angular 2 ͷ֓ཁ 4. ϑϨʔϜϫʔΫͷબఆ 5. Angular 2 Λ࢖ͬͨ։ൃͷ࣮ࡍ

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

΋͏͙͢4೥ ن໛ > ໿ 30 ໊ʢ։ൃɿ໿ 10 ໊ʣ

Slide 6

Slide 6 text

ίΞٕज़ > Text / Data mining > Big Data > Deep Learning etc...

Slide 7

Slide 7 text

αʔϏε঺հ

Slide 8

Slide 8 text

EmotionTech ʹ͍ͭͯ - ސ٬ମݧϚωδϝϯτʹ ࠷దԽͨ͠Ϋϥ΢υγεςϜ - 2016 ೥ 6 ݄͘Β͍͔Βঃʑʹ։ൃ

Slide 9

Slide 9 text

։ൃମ੍ > ϑϩϯτΤϯυΤϯδχΞɿ3.5 ໊ > αʔόʔαΠυΤϯδχΞɿ4.5 ໊ > ΠϯϑϥΤϯδχΞɹɹ ɿ1 ໊

Slide 10

Slide 10 text

ٕज़ελοΫ > HTML / SCSS / TypeScript > Angular 2ʢ + PrimeNG ʣ > Rails 5 > Docker > AWS

Slide 11

Slide 11 text

ANGULAR 2 ͷ֓ཁ

Slide 12

Slide 12 text

ANGULAR 2 ͷ֓ཁ > ͍ΘΏΔϑϧελοΫϑϨʔϜϫʔΫ > ίϯϙʔωϯτࢦ޲ > TypeScript Ͱͷ։ൃΛਪ঑ > ΫϩεϓϥοτϑΥʔϜ

Slide 13

Slide 13 text

ϦϦʔε·Ͱͷي੻ > 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 ϦϦʔε!

Slide 14

Slide 14 text

બఆ࣌ظͷঢ়گ > 6݄͔Βঃʑʹ։ൃ։࢝ > Angular 2 ઈࢍ։ൃத > rc.2 ͘Β͍ͷ࣌ظ > ͳ͘ͳΒͳ͍ BRAKING CHANGES

Slide 15

Slide 15 text

ͳ͔ͳ͔ͷঢ়گͰ͢Ͷ !

Slide 16

Slide 16 text

ϑϨʔϜϫʔΫͷબఆ

Slide 17

Slide 17 text

ީิʹ͕͋ͬͨϞϊ > Angular 1.n > Angular 2 > React / Redux > Vue.js

Slide 18

Slide 18 text

બఆͷલఏͱͯ͠ʜ ANGULAR 1.N Ͱͳ͚Ε͹ ֶशίετ͸͔͔Δ

Slide 19

Slide 19 text

ϙΠϯτ 1. طଘͷ஌ࣝΛ׆͔ͤΔ͔ 2. ؀ڥߏஙͷ͠΍͢͞ 3. ίϛϡχςΟ͕͋Δ͔Ͳ͏͔ 4. ϝϯόʔͷϞνϕʔγϣϯ

Slide 20

Slide 20 text

1. طଘͷ஌ࣝΛ׆͔ͤΔ͔ > Angular 1.n ͷ஌ࣝ …ͪΐͬͱ͚ͩ > ଞͷݴޠͷ஌ࣝ ҙ֎ʹ΋ Java ΍ AS3 ͷܦݧ͕׆͖Δ

Slide 21

Slide 21 text

2. ؀ڥߏஙͷ͠΍͢͞ > ϑϧελοΫͷϑϨʔϜϫʔΫͰ͋Δ > େମͷ͜ͱ͸Ұ௨Γఏڙ͞ΕΔ > ϥΠϒϥϦ౳ͷௐࠪɾݕূͷݮগ > angular-cli Λར༻ͨ͠؀ڥͷߏங > खܰʹ؀ڥΛߏஙͰ͖Δʂ

Slide 22

Slide 22 text

΋͏ϏϧυπʔϧͰ ጧድ͠ͳ͍ !

Slide 23

Slide 23 text

3. ίϛϡχςΟ ANGULAR JAPAN USER GROUP SLACK GROUP > https://ng-japan-invite.herokuapp.com/ ΠϕϯτɿCONNPASS

Slide 24

Slide 24 text

4. νʔϜͷϞνϕʔγϣϯ ΠϚΠνʜ!

Slide 25

Slide 25 text

4. νʔϜͷϞνϕʔγϣϯ ਎΋֖΋ͳ͍ݴ͍ํΛ͢Ε͹ ϓϩμΫτ = ໰୊ͷղܾ ͳͷͰϞνϕʔγϣϯ͸͕͋Βͳ͔ͬͨ !

Slide 26

Slide 26 text

ܾΊख > - ֶशίετ͸มΘΒͳ͍ > ↑ ؀ڥߏஙָ͕ > ↑ ίϛϡχςΟ͕׆ൃ

Slide 27

Slide 27 text

։ൃͷ࣮ࡍ

Slide 28

Slide 28 text

։ൃͷ࣮ࡍ > ! Α͔ͬͨ఺ > " ർΕͨ఺ > # ർΕͨ఺ͷղܾ๏

Slide 29

Slide 29 text

! Α͔ͬͨ఺

Slide 30

Slide 30 text

TYPESCRIPT > ίʔυͷݟ௨͕͍͍͠ > ܕ͕͏Ε͍͠ > ه๏ʹ͋·Γۤ࿑͠ͳ͍

Slide 31

Slide 31 text

ίϯϙʔωϯτࢦ޲ > HTML / CSS / JS ͕·ͱ·͍ͬͯΔ > Ͳ͜ʹॻ͔Ε͍ͯΔͷ͔͙͢Θ͔Δ > CSS ͕ΧϓηϧԽ͞ΕΔ

Slide 32

Slide 32 text

ANGULAR-CLI Ͱ؀ڥߏஙͰጧድ͠ͳ͘ ͯ͢Μͩ

Slide 33

Slide 33 text

! ർΕͨ఺

Slide 34

Slide 34 text

1. ֶशίετ͕ߴ͍ લఏ஌ࣝଟ͗͢... > Angular 2 > ES 2015 / ES.next > TypeScript etc...

Slide 35

Slide 35 text

2. υΩϡϝϯτ͕ඍົ... > େ൒͕ӳޠ > ( RC࣌ ) ެࣜυΩϡϝϯτ͕ ͳ͔ͳ͔Ξοϓσʔτ͞Εͳ͍ > ݕࡧੑͷ௿͞

Slide 36

Slide 36 text

3. ͳ͘ͳΒͳ͍ BRAKING CHANGES

Slide 37

Slide 37 text

4. ະରԠ͕ύοέʔδ͕ଟ͍ > Angular 2 ʹରԠ͍ͯ͠Δ ύοέʔδ΍ϥΠϒϥϦ͕গͳ͍ > ରԠͯͯ͠΋ 1 ਓͰ։ൃ͍ͯ͠Δ৔߹΋...

Slide 38

Slide 38 text

! ർΕͨ఺ͷղܾ๏

Slide 39

Slide 39 text

1. ֶशίετ

Slide 40

Slide 40 text

ֶशίετͷݏͳ఺! ίετʹ ݟ߹͏Ϧλʔϯ͕ͳ͍ ͜ͱ

Slide 41

Slide 41 text

ANGULAR 2 ͸ WEB ඪ४ͷػೳΛ ઌߦ࣮૷

Slide 42

Slide 42 text

ͭ·Γ ANGULAR 2 Λษڧ͢Δͱ... > ஌ࣝΛ࠷৽ʹΞοϓσʔτͰ͖Δ > ͞Βʹ Web ඪ४ͷઌߦ࣮૷Λࢼ͢͜ͱ΋ʂ

Slide 43

Slide 43 text

ଞʹ΋͋Δ Ϧλʔϯ

Slide 44

Slide 44 text

TYPESCRIPT > ܕ͕͋Δͷ͸΍ͬͺΓ͏Ε͍͠ > ίʔυͷݟ௨͠ͷྑ͞ > ಠࣗͷػೳΛແཧͯ͠ར༻͠ͳͯ͘OK > ΤσΟλͷίʔυิ׬ʹΑΔ։ൃޮ཰ˢ

Slide 45

Slide 45 text

2. υΩϡϝϯτ͕ඍົ...

Slide 46

Slide 46 text

ެࣜυΩϡϝϯτ > ϦϦʔεޙʹҰؾʹॆ࣮ > ݱࡏ͸ঃʑʹ֦ॆத

Slide 47

Slide 47 text

ݕࡧੑͷ௿͞ ݕࡧ࣌ʹ޻෉͢Δʂ > όʔδϣϯΛೖΕΔ > ظؒΛઃఆ͢Δ

Slide 48

Slide 48 text

3. ͳ͘ͳΒͳ͍ BRAKING CHANGES

Slide 49

Slide 49 text

3. ͳ͘ͳΒͳ͍ BRAKING CHANGES > ίϛϡχςΟͰ৽͍͠৘ใʹ৮ΕΔ > angular ؔ࿈ͷϦϙδτϦΛ watch

Slide 50

Slide 50 text

4. ະରԠ͕ύοέʔδ͕ଟ͍ > issue ΛΈΔ > ϦϙδτϦΛ watch ͢Δ > όʔδϣϯ৘ใΛݟΔ

Slide 51

Slide 51 text

։ൃͰࠔͬͨ఺

Slide 52

Slide 52 text

·ͩ·ͩઙ͍ॴͰ࣮૷͍ͯ͠ΔͷͰɺ Angular 2 ͷػೳͰࠔͬͨͱ͍͏ͷ͸গͳ͍... Ͱ͕͢ɺগ͚ͩ͠͝঺հ !

Slide 53

Slide 53 text

MULTIPART/FORM-DATA ະରԠ > http ΫϥεͰ௨৴ͷॲཧΛߦ͏ > multipart/form-data ʹະରԠ͕։ൃதʹ൑໌ > ϑΝΠϧΞοϓϩʔυ͕Ͱ͖ͳ͍ > ݁ہ XHR Ͱ࣮૷͠௚͠ & APIमਖ਼

Slide 54

Slide 54 text

CSS ͕Χεέʔυ͠ͳ͍ > ਌ίϯϙʔωϯτͰఆٛͨ͠ CSS ͸ ࢠͷίϯϙʔωϯτʹҾ͖ܧ͕Εͳ͍ > ίϯϙʔωϯτ͸Ͳ͜Ͱར༻͞ΕΔ͔Θ͔ Βͳ͍ͷͰ౰વ

Slide 55

Slide 55 text

WE ARE HIRING !! Emotion Tech Ͱ͸ɺΠΩΠΩͱಇ͚ΔੈͷதΛ ࡞Γ͍ͨΤϯδχΞΛੵۃืूத! ؾʹͳΔํ͸͝࿈བྷ͍ͩ͘͞ʂ https://www.wantedly.com/companies/emotion-tech

Slide 56

Slide 56 text

THANK YOU!