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
PRO
October 25, 2019
Technology
0
230
Vue.jsでTypeScriptを使ってみる
Vue.jsでTypeScriptを使ってみる
Takayuki
PRO
October 25, 2019
Tweet
Share
More Decks by Takayuki
See All by Takayuki
Laravel Applications with DDD x Clean Architecture x Vibe Coding
bumptakayuki
PRO
1
98
Laravel × Clean Architecture
bumptakayuki
PRO
1
480
エンジニアのキャリア論
bumptakayuki
PRO
1
240
地方カンファレンス主催のススメ
bumptakayuki
PRO
1
240
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
PRO
2
1.3k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
PRO
0
740
沖縄観光、名物を一挙紹介!
bumptakayuki
PRO
2
730
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
PRO
1
3.1k
flutterでイベントアプリを作ってみた
bumptakayuki
PRO
0
180
Other Decks in Technology
See All in Technology
Tebiki Engineering Team Deck
tebiki
0
24k
プロポーザルに込める段取り八分
shoheimitani
1
570
小さく始めるBCP ― 多プロダクト環境で始める最初の一歩
kekke_n
1
470
超初心者からでも大丈夫!オープンソース半導体の楽しみ方〜今こそ!オレオレチップをつくろう〜
keropiyo
0
120
SRE Enabling戦記 - 急成長する組織にSREを浸透させる戦いの歴史
markie1009
0
140
Embedded SREの終わりを設計する 「なんとなく」から計画的な自立支援へ
sansantech
PRO
3
2.6k
20260208_第66回 コンピュータビジョン勉強会
keiichiito1978
0
180
10Xにおける品質保証活動の全体像と改善 #no_more_wait_for_test
nihonbuson
PRO
2
320
Amazon S3 Vectorsを使って資格勉強用AIエージェントを構築してみた
usanchuu
3
450
レガシー共有バッチ基盤への挑戦 - SREドリブンなリアーキテクチャリングの取り組み
tatsukoni
0
220
配列に見る bash と zsh の違い
kazzpapa3
3
160
Oracle Cloud Observability and Management Platform - OCI 運用監視サービス概要 -
oracle4engineer
PRO
2
14k
Featured
See All Featured
Building the Perfect Custom Keyboard
takai
2
690
Marketing Yourself as an Engineer | Alaka | Gurzu
gurzu
0
130
Max Prin - Stacking Signals: How International SEO Comes Together (And Falls Apart)
techseoconnect
PRO
0
86
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
62
50k
What does AI have to do with Human Rights?
axbom
PRO
0
2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
254
22k
Context Engineering - Making Every Token Count
addyosmani
9
660
Efficient Content Optimization with Google Search Console & Apps Script
katarinadahlin
PRO
1
330
Joys of Absence: A Defence of Solitary Play
codingconduct
1
290
Navigating the moral maze — ethical principles for Al-driven product design
skipperchong
2
250
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
Technical Leadership for Architectural Decision Making
baasie
2
250
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͍͍ͱࢥ͍·͢ɻ ɾ։ൃεϐʔυΛগ͠མͱͯ͠ݎ࿚ʹ࡞Γ͍ͨ߹Φεεϝ