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
140
5 Points Of Customizing Vuetify
fromarm4
4
1.3k
about abstract component design using slots of Vue.js
fromarm4
4
1.4k
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
770
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
Backlog ユーザー棚卸しRTA、多分これが一番早いと思います
__allllllllez__
1
150
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
ビギナーであり続ける/beginning
ikuodanaka
3
750
面倒な作業はAIにおまかせ。Flutter開発をスマートに効率化
ruideengineer
0
250
Flutter向けPDFビューア、pdfrxのpdfium WASM対応について
espresso3389
0
130
What’s new in Android development tools
yanzm
0
300
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
180
CDKTFについてざっくり理解する!!~CloudFormationからCDKTFへ変換するツールも作ってみた~
masakiokuda
1
130
生成AI開発案件におけるClineの業務活用事例とTips
shinya337
0
250
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
9k
Beyond Kaniko: Navigating Unprivileged Container Image Creation
f30
0
130
改めてAWS WAFを振り返る~業務で使うためのポイント~
masakiokuda
2
250
Featured
See All Featured
Become a Pro
speakerdeck
PRO
29
5.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Site-Speed That Sticks
csswizardry
10
690
Large-scale JavaScript Application Architecture
addyosmani
512
110k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Unsuck your backbone
ammeep
671
58k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Raft: Consensus for Rubyists
vanstee
140
7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
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勉強会で コードを書いていく!