Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue.jsでTypeScriptを使ってみる
Search
Takayuki
October 25, 2019
Technology
0
200
Vue.jsでTypeScriptを使ってみる
Vue.jsでTypeScriptを使ってみる
Takayuki
October 25, 2019
Tweet
Share
More Decks by Takayuki
See All by Takayuki
地方カンファレンス主催のススメ
bumptakayuki
1
100
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
1
350
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
380
沖縄観光、名物を一挙紹介!
bumptakayuki
2
400
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
1k
flutterでイベントアプリを作ってみた
bumptakayuki
0
89
オフショア開発の辛みと学んだ事
bumptakayuki
0
310
ChatGPTにStripeのサンプルコードを書かせてみた
bumptakayuki
1
130
ChatGPTに記事を書かせてみた
bumptakayuki
1
200
Other Decks in Technology
See All in Technology
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
100
Delivering Millions of Messages within seconds @ Duolingo
pelelgrino
0
340
PHPカンファレンス小田原2024
ysknsid25
3
660
AIQ株式会社 エンジニア向け会社紹介資料
aiqlab
0
380
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
100
2024/4/26 コンピュータ歴史博物館解説告知
toshi_atsumi
0
200
SREとその組織類型
tatsuo48
8
1.5k
シン・Kafka / shin-kafka
oracle4engineer
PRO
7
2.7k
小さな開発会社がWebサービスを作る理由
polidog
PRO
1
160
Cloud Native Java with Spring Boot (CNCF Aarhus, April 2024)
thomasvitale
1
130
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
Oracle Cloud Infrastructure:2024年4月度サービス・アップデート
oracle4engineer
PRO
1
110
Featured
See All Featured
Navigating Team Friction
lara
177
13k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Making Projects Easy
brettharned
108
5.5k
BBQ
matthewcrist
80
8.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
354
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
990
For a Future-Friendly Web
brad_frost
171
8.9k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
Music & Morning Musume
bryan
41
5.6k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
15
1.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Transcript
Vue.jsでTypeScriptを使ってみる 鈴木孝之
"HFOEB ࣗݾհɾձࣾհ 5ZQF4DSJQUͱʁ 7VFKTͰͷಋೖํ๏
ࣗݾհɾձࣾհ
1.ࣗݾհ ◆໊લ ླ ೭(Suzuki Takayuki) ※ಉಉ໊ଟͯ͘ࠔͬͯ·͢ɻɻɻ ◆ࣗݾհ ɾ1990ɺਆಸݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015ʹϑϧεϐʔυʹೖࣾ͠ɺ2017ʹಠཱɻ
ɾݱࡏɺडୗ։ൃΛΓͭͭɺࣗࣾWebαʔϏεΛ։ൃதɻ ◆झຯ ίεϓϨɺԻָϥΠϒɺϚϥιϯେձʹग़Δɺٿ؍ઓ ◆εΩϧ PHP,Symfony2,CakePHP3,Laravel5, JavaScript,backbone.js,Angular.js
1.ࣗݾհ
Copyright Re:Build.inc All Rights Reserved. ձࣾհ ◆ձ໊ࣾ גࣜձࣾRe:Build ◆ॅॴ ԭೄݝԭೄࢢதԝ̍ஸ̍̒−̕
◆ࣄۀ༰ ɾࣗࣾWEBαʔϏεͷاըɾ։ൃɻ ɾडୗ։ൃ ◆ࣾһ 7໊ ◆ΤϯδχΞͷಇ͖ํ ϦϞʔτϫʔΫՄೳͳࣗ༝ͳಇ͖ํΛਪͯ͠·͢ʂ
5ZQF4DSJQUͱʁ
5ZQF4DSJQUͱʁ TypeScript2012ʹϚΠΫϩιϑτʹΑͬͯ։ൃ͞ΕͨΦʔϓϯιʔεͷϓϩ άϥϛϯάݴޠͰJavaScriptͷεʔύʔηοτʢ্ҐޓʣͳҐஔ͚ͮͷݴޠͰ ͢ɻ มαϒϧʔνϯΛ҆શʹѻ͑Δ੩తܕ͖ݴޠͰ͋Δ͜ͱΫϥεΛ༻Ͱ ͖ΔͳͲJavaScriptͷܽΛิ͢Δ͜ͱΛతͱͯ͠։ൃ͞Ε·ͨ͠ɻ TypeScriptΫϥΠΞϯταΠυɾαʔόʔαΠυ྆ํͷ։ൃͰར༻͢Δ͜ͱ͕ ՄೳͰɺେنͳΞϓϦέʔγϣϯ։ൃΛߦ͏͜ͱ͕ՄೳͰ͢ɻ https://www.engineer-route.com/column/2679/
ϝϦοτɾಛ TypeScriptΛಋೖͨ͠ํ͕ྑ͍έʔε ιʔείʔυ͕େͰ ͋Δ߹ɺ·ͨෳͷ ਓ͕ϓϩδΣΫτʹै ࣄ͍ͯ͠Δ߹ɺܕγ εςϜ໌Β͔ͳΤϥʔ Λ͙ͷʹཱͪ·͢ɻ 1 νʔϜϝϯόC#
JavaͷΑ͏ͳڧ͍ܕ͖ ݴޠͷόοΫάϥϯυ Λ࣋ͪɺJavaScriptΛͱ ͜ͱΜֶͿؾͳ͍ͱ͍ ͏߹ɺTS͍͍ସ ҊͩͱࢥΘΕ·͢ɻ 2 TypeScriptΫϥεϕʔεͳ ݴޠͷͨΊɺJavaͳͲͷΦϒ δΣΫτࢦݴޠಉ༷Ϋϥε Λѻ͏͜ͱ͕Ͱ͖·͢ɻ ίϯετϥΫλɺϝιουɺ ϓϩύςΟͳͲͷϝϯόΛѻ ͏͜ͱͪΖΜՄೳͰ͢ɻ 3 ίʔυαΠζ ϝϯόʔͷաڈͷܦݧ Ϋϥεϕʔεͳݴޠ https://postd.cc/when-should-i-use-typescript/
䡧ಠࣗ ɾܕऍʢมɺҾɺΓͳͲͷܕએݴʣͱ ίϯύΠϧ࣌ͷܕνΣοΫ ɾܕਪ, ܕΨʔυ - ifจͷ instanceof ͳͲΛར༻ ͨ͠ܕਪ
ɾΠϯλʔϑΣΠε ɾྻڍܕ FOVN ɾMixin ɾδΣωϦοΫ ɾ໊લۭؒ ɾλϓϧ ɾڞ༻ମܕ ɾܕΤΠϦΞε ϝϦοτɾಛ
7VFKTͰͷಋೖํ๏
https://qiita.com/nrslib/items/be90cc19fa3122266fd7 ४උ vue-cli Λར༻͢Δʹ node.js ΛΠϯετʔϧͯ͠ npm Λར༻ͯ͠ vue-cli ΛΠϯετʔϧ͠·͢ɻ
https://qiita.com/nrslib/items/be90cc19fa3122266fd7 ४උ ϓϩδΣΫτ vue create ίϚϯυͰ࡞͠·͢ɻ ίϚϯυ vue create <project-name>
Ͱࢦఆ͠·͢ɻ
https://qiita.com/nrslib/items/be90cc19fa3122266fd7 ४උ Typescript Λར༻͢ΔͨΊ ʹ Manually select features Λબ͠·͢ɻ
https://qiita.com/nrslib/items/be90cc19fa3122266fd7 ४උ Πϯετʔϧޭʂ
https://qiita.com/nrslib/items/be90cc19fa3122266fd7 ४උ ىಈʂ
https://qiita.com/nrslib/items/be90cc19fa3122266fd7
ॻ͖ํ ɾ.vueϑΝΠϧͰ<script lang="ts">Λ͏ ɾvue-property-decoratorΛͬͨσίϨʔλํࣜͷTypeScript ԽΛߦ͏
ҧ͍ JS TypeScript
ը໘͔Βͷ ೖग़ྗͷܕΛ ୲อ 7VFKTͩͱԿ͕خ͍͠ͷ͔ʁ APIΛୟ͘ࡍͷೖग़ྗ ͷܕΛ୲อ
·ͱΊ ɾιʔείʔυ͕େͰ͋Δ߹ɺ·ͨෳͷਓ͕ϓϩδΣΫτʹैࣄ ͍ͯ͠Δ߹ɺTypeScriptΛ͏ར͕͋Δɻ ɾνʔϜϝϯόC#JavaͷΑ͏ͳڧ͍ܕ͖ݴޠͷόοΫάϥϯ υΛ͍࣋ͬͯΔ߹ɺTS͍͍ͱࢥ͍·͢ɻ ɾ։ൃεϐʔυΛগ͠མͱͯ͠ݎ࿚ʹ࡞Γ͍ͨ߹Φεεϝ