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
Trying to write a code with Laravel+Vue+TypeScript
Search
arm4
April 20, 2019
Technology
0
530
Trying to write a code with Laravel+Vue+TypeScript
arm4
April 20, 2019
Tweet
Share
More Decks by arm4
See All by arm4
Google Data Studio 101
fromarm4
0
150
5 Points Of Customizing Vuetify
fromarm4
4
1.3k
about abstract component design using slots of Vue.js
fromarm4
4
1.5k
laravel_lt_party_with_mokumoku_3
fromarm4
0
390
Make it happen in realtime with Laravel Echo and Pusher
fromarm4
0
980
Create a Laravel notification via Slack when batch jobs are finished
fromarm4
0
780
solving frontend issues
fromarm4
1
1.6k
Popular Vue.js UI Frameworks in 2019
fromarm4
2
870
SKDs対象のWeb API設計概論〜Laravelを添えて〜
fromarm4
0
1.3k
Other Decks in Technology
See All in Technology
Goss: New Production-Ready Go Binding for Faiss #coefl_go_jp
bengo4com
0
1.1k
知られざるprops命名の慣習 アクション編
uhyo
11
2.5k
サービスロボット最前線:ugoが挑むPhysical AI活用
kmatsuiugo
0
190
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.6k
アジャイルテストで高品質のスプリントレビューを
takesection
0
120
攻撃と防御で実践するプロダクトセキュリティ演習~導入パート~
recruitengineers
PRO
2
200
Browser
recruitengineers
PRO
4
330
広島発!スタートアップ開発の裏側
tsankyo
0
240
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
190
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
270
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
23
6.1k
あなたの知らない OneDrive
murachiakira
0
240
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
It's Worth the Effort
3n
187
28k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Git: the NoSQL Database
bkeepers
PRO
431
65k
A better future with KSS
kneath
239
17k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Navigating Team Friction
lara
189
15k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Transcript
Laravel+Vue +TypeScriptで フォームバリデーションを 実装してみた話 @plumsa
自己紹介 株式会社プラムザ Tech Lead ハトヨウコ 公式Twitter ララ・ベル子さんの中の 人 @plumsa 2
3 きっかけ 社内でこんな会話があっ た。
“ TypeScript勉強会 発足!! 4
5 まずは ドキュメントの読み込み 公式ドキュメント(英語) https://www.typescriptlang.org/docs/handbook/basic-types.html js STUDIO https://www.typescriptlang.org/docs/handbook/basic-types.html 日本語に翻訳してくれてるありがたいサイト たまにコードが古かったり、変更になってる文がある。
公式とちゃんと見比べたほうが◯
TypeScriptって何? 6 特徴&メリット • JavaScriptで静的型付けできる! • JavaScriptでペチパーが知ってるような感じで Classが書ける! (※クラス構文自体はES2015で導入されているが、完全一致ではない) •
コンパイルされたあと普通のJavaScriptになる! • おかしなものを変数に入れるとコンパイル時、 またはエディタでリアルタイムに怒ってくれる!
TypeScriptって何? 7 デメリット 後述!
8 基本は何となく 分かったので そろそろ実装したい
実装してみることの意義 ◦ 使い勝手が分かる ◦ 簡単そうに見えていても実際は違うことがある ◦ 座学より遥かに多くの気付きがある ◦ 知識の定着 ◦
応用する力を得られる 9
ざっくり手順 ◦ laravel new laravel-vue-typescript ◦ yarn install ◦ yarn
add vue-class-component --dev ◦ yarn add vue-template-compiler --dev --production=false ◦ tsconfig.jsonを作成 ◦ Webpack.mix.jsを修正 ◦ Bladeにscriptタグを追加 ◦ CSRF Token追加 など 10
Demo &コード解説タイム 11
▼問題 Symfonyがやたらエラーを吐く ▼解決法 tsconfig.jsで対象外にする https://qiita.com/ttwwiitttteerr0/items/5d 4590d37a48d868bd11 ハマり ポイント1 12
ハマり ポイント2 13 ▼問題 Element implicitly has an 'any' type
because type 'Validator' has no index signature. 'Validator'はインデックスシグネチャを持たないため、要素は 暗黙的にany型を持ちます。 というエラーが消えない。 ▼解決法? interfaceを作りインデックスシグネチャを定義する https://qiita.com/Nossa/items/e01d0bce67b760c0bcb9#対策-interface-を定義 してメソッドを定義するオブジェクトに実装する
ハマり ポイント3 14 ▼問題 Element implicitly has an 'any' type
because type 'Validator' has no index signature. というエラーがどうしても消えない。助けてママン。 ▼解決法 無理やり型注釈をつけて乗り切る
ハマり ポイント4 ▼問題 experimentalDecoratorsオプションを設定せ よと言われる ▼解決法 tsconfig.jsで設定する https://www.l08084.com/entry/2018/02/09/154824
16 • 型が間違っている、コードが間違っている時に エディタ上ですぐ分かるのが気持ちよすぎて、 1つでも不可解なエラーが出ていると気になって夜も眠 れなくなる。 • classは結局コンパイル後はprototype拡張式のコード になるためコード量がやや増える •
Importしてるファイルを変更してもwatchしてる状態で それが反映されない。 • 型を指定する部分が本筋と混ざることで複雑なコードの 場合、可読性が下がる デメリット
まとめ 17 • 馴染みのClassでオブジェクト指向的に書けるのはうれし い。すごい楽。 • チーム開発で威力を発揮しそう • ハマると時間がかかる •
全部に型指定する生活を強いられるのがつらい • Componentのtemplateのシンタックスハイライトされ ないのつらい • 実行時ではなくコンパイル時に怒ってくれるから、 上品で気持ちいい!! • 変なことを書いらたすぐ気づける! • コードの堅牢性が上がる
18 型を意識することで PHPなど他の言語使用時やTSで書いてない時も コードの書き方が矯正されると思った! ただ、Vueとの兼ね合いとか ハマるとなかなかコストくうので うちの場合、TSの採用はもうちょっとみんなの知見が 溜まってからのほうが良さそう! 引き続きTypeScript勉強会で コードを書いていく!