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
Step Functions First - サーバーレスアーキテクチャの新しいパラダイム
taikis
1
260
MCP とマネージド PaaS で実現する大規模 AI アプリケーションの高速開発
nahokoxxx
1
1.3k
OpenTelemetry の Log を使いこなそう
biwashi
3
920
BEYOND THE RAG🚀 ~とりあえずRAG?を超えていけ! 本当に使えるAIエージェント&生成AIプロダクトを目指して~ / BEYOND-THE-RAG-Toward Practical-GenerativeAI-Products-AOAI-DevDay-2025
jnymyk
4
230
本当にわかりやすいAIエージェント入門
segavvy
10
5.7k
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
230
QAを早期に巻き込む”って どうやるの? モヤモヤから抜け出す実践知
moritamasami
2
170
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
200
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
4
230
Shadow DOMとセキュリティ - 光と影の境界を探る / Shibuya.XSS techtalk #13
masatokinugawa
0
260
The Madness of Multiple Gemini CLIs Developing Simultaneously with Jujutsu
gunta
1
2.4k
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
282
13k
Building Adaptive Systems
keathley
43
2.7k
Rails Girls Zürich Keynote
gr2m
95
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
We Have a Design System, Now What?
morganepeng
53
7.7k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Building Applications with DynamoDB
mza
95
6.5k
Building an army of robots
kneath
306
45k
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勉強会で コードを書いていく!