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
Microsoft Defender XDRで疲弊しないためのインシデント対応
sophiakunii
1
310
OpenTelemetryセマンティック規約の恩恵とMackerel APMにおける活用例 / SRE NEXT 2025
mackerelio
3
2k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Delegating the chores of authenticating users to Keycloak
ahus1
0
190
Talk to Someone At Delta Airlines™️ USA Contact Numbers
travelcarecenter
0
160
SREの次のキャリアの道しるべ 〜SREがマネジメントレイヤーに挑戦して、 気づいたこととTips〜
coconala_engineer
1
4.3k
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
0
300
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
[SRE NEXT] ARR150億円_エンジニア140名_27チーム_17プロダクトから始めるSLO.pdf
satos
5
3k
「現場で活躍するAIエージェント」を実現するチームと開発プロセス
tkikuchi1002
3
300
サービスを止めるな! DDoS攻撃へのスマートな備えと最前線の事例
coconala_engineer
1
180
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
The Language of Interfaces
destraynor
158
25k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Thoughts on Productivity
jonyablonski
69
4.7k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Docker and Python
trallard
45
3.5k
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勉強会で コードを書いていく!