Vue.jsでTypeScriptを使ってみる

Vue.jsでTypeScriptを使ってみる

Transcript

1. Vue.jsでTypeScriptを使ってみる 鈴木孝之
2. "HFOEB ࣗݾ঺հɾձࣾ঺հ
   5ZQF4DSJQUͱ͸ʁ
   7VFKTͰͷಋೖํ๏
3. ࣗݾ঺հɾձࣾ঺հ
4. 1.ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ※ಉ੏ಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹಠཱɻ ɾݱࡏ͸ɺडୗ։ൃΛ΍ΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺ໺ٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,Laravel5, JavaScript,backbone.js,Angular.js
5. 1.ࣗݾ঺հ
6. Copyright Re:Build.inc All Rights Reserved. ձࣾ঺հ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ໨̍̒−̕ ◆ࣄۀ಺༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 7໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪ঑ͯ͠·͢ʂ
7. 5ZQF4DSJQUͱ͸ʁ
8. 5ZQF4DSJQUͱ͸ʁ TypeScript͸2012೥ʹϚΠΫϩιϑτʹΑͬͯ։ൃ͞ΕͨΦʔϓϯιʔεͷϓϩ άϥϛϯάݴޠͰJavaScriptͷεʔύʔηοτʢ্Ґޓ׵ʣͳҐஔ͚ͮͷݴޠͰ ͢ɻ ม਺΍αϒϧʔνϯΛ҆શʹѻ͑Δ੩తܕ෇͖ݴޠͰ͋Δ͜ͱ΍ΫϥεΛ࢖༻Ͱ ͖ΔͳͲJavaScriptͷܽ఺Λิ׬͢Δ͜ͱΛ໨తͱͯ͠։ൃ͞Ε·ͨ͠ɻ TypeScript͸ΫϥΠΞϯταΠυɾαʔόʔαΠυ྆ํͷ։ൃͰར༻͢Δ͜ͱ͕ ՄೳͰɺେن໛ͳΞϓϦέʔγϣϯ։ൃΛߦ͏͜ͱ͕ՄೳͰ͢ɻ https://www.engineer-route.com/column/2679/
9. ϝϦοτɾಛ௃ TypeScriptΛಋೖͨ͠ํ͕ྑ͍έʔε ιʔείʔυ͕๲େͰ ͋Δ৔߹ɺ·ͨෳ਺ͷ ਓ͕ϓϩδΣΫτʹै ࣄ͍ͯ͠Δ৔߹ɺܕγ εςϜ͸໌Β͔ͳΤϥʔ Λ๷͙ͷʹ໾ཱͪ·͢ɻ 1 νʔϜϝϯό΍C#΍ JavaͷΑ͏ͳڧ͍ܕ෇͖ ݴޠͷόοΫάϥ΢ϯυ Λ࣋ͪɺJavaScriptΛͱ ͜ͱΜֶͿؾ͸ͳ͍ͱ͍ ͏৔߹ɺTS͸͍͍୅ସ ҊͩͱࢥΘΕ·͢ɻ 2 TypeScript͸Ϋϥεϕʔεͳ ݴޠͷͨΊɺJavaͳͲͷΦϒ δΣΫτࢦ޲ݴޠಉ༷Ϋϥε Λѻ͏͜ͱ͕Ͱ͖·͢ɻ ίϯετϥΫλɺϝιουɺ ϓϩύςΟͳͲͷϝϯόΛѻ ͏͜ͱ΋΋ͪΖΜՄೳͰ͢ɻ 3 ίʔυαΠζ ϝϯόʔͷաڈͷܦݧ Ϋϥεϕʔεͳݴޠ https://postd.cc/when-should-i-use-typescript/
10. 䡧ಠࣗ ɾܕ஫ऍʢม਺ɺҾ਺ɺ໭Γ஋ͳͲͷܕએݴʣͱ ίϯύΠϧ࣌ͷܕνΣοΫ
    ɾܕਪ࿦, ܕΨʔυ - ifจͷ instanceof ͳͲΛར༻ ͨ͠ܕਪ࿦ ɾΠϯλʔϑΣΠε
    ɾྻڍܕ FOVN ɾMixin ɾδΣωϦοΫ
    ɾ໊લۭؒ ɾλϓϧ ɾڞ༻ମܕ ɾܕΤΠϦΞε ϝϦοτɾಛ௃
11. 7VFKTͰͷಋೖํ๏
12. https://qiita.com/nrslib/items/be90cc19fa3122266fd7 ४උ vue-cli Λར༻͢Δʹ͸ node.js ΛΠϯετʔϧͯ͠ npm Λར༻ͯ͠ vue-cli ΛΠϯετʔϧ͠·͢ɻ
13. https://qiita.com/nrslib/items/be90cc19fa3122266fd7 ४උ ϓϩδΣΫτ͸ vue create ίϚϯυͰ࡞੒͠·͢ɻ ίϚϯυ͸ vue create <project-name> Ͱࢦఆ͠·͢ɻ
14. https://qiita.com/nrslib/items/be90cc19fa3122266fd7 ४උ Typescript Λར༻͢ΔͨΊ ʹ Manually select features Λબ୒͠·͢ɻ
15. https://qiita.com/nrslib/items/be90cc19fa3122266fd7 ४උ Πϯετʔϧ੒ޭʂ
16. https://qiita.com/nrslib/items/be90cc19fa3122266fd7 ४උ ىಈʂ
17. https://qiita.com/nrslib/items/be90cc19fa3122266fd7
18. ॻ͖ํ ɾ.vueϑΝΠϧͰ<script lang="ts">Λ࢖͏ ɾvue-property-decoratorΛ࢖ͬͨσίϨʔλํࣜͷTypeScript ԽΛߦ͏
19. ҧ͍ JS TypeScript
20. ը໘͔Βͷ ೖग़ྗͷܕΛ ୲อ 7VFKTͩͱԿ͕خ͍͠ͷ͔ʁ APIΛୟ͘ࡍͷೖग़ྗ ͷܕΛ୲อ
21. ·ͱΊ ɾιʔείʔυ͕๲େͰ͋Δ৔߹ɺ·ͨෳ਺ͷਓ͕ϓϩδΣΫτʹैࣄ ͍ͯ͠Δ৔߹ɺTypeScriptΛ࢖͏ར఺͕͋Δɻ ɾνʔϜϝϯό΍C#΍JavaͷΑ͏ͳڧ͍ܕ෇͖ݴޠͷόοΫάϥ΢ϯ υΛ͍࣋ͬͯΔ৔߹ɺTS͸͍͍ͱࢥ͍·͢ɻ ɾ։ൃεϐʔυΛগ͠མͱͯ͠΋ݎ࿚ʹ࡞Γ͍ͨ৔߹͸Φεεϝ