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
実践アプリケーション設計 ③ドメイン駆動設計
recruitengineers
PRO
13
4k
Browser
recruitengineers
PRO
8
2.1k
Language Update: Java
skrb
1
120
【Grafana Meetup Japan #6】Grafanaをリバプロ配下で動かすときにやること ~ Grafana Liveってなんだ ~
yoshitake945
0
220
衝突して強くなる! BLUE GIANTと アジャイルチームの共通点とは ― いきいきと活気に満ちたグルーヴあるチームを作るコツ ― / BLUE GIANT and Agile Teams
naitosatoshi
0
290
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
150
Flutterでキャッチしないエラーはどこに行く
taiju59
0
210
クラウドセキュリティを支える技術と運用の最前線 / Cutting-edge Technologies and Operations Supporting Cloud Security
yuj1osm
2
250
絶対に失敗できないキャンペーンページの高速かつ安全な開発、WINTICKET × microCMS の開発事例
microcms
0
360
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
910
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
170
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
0
140
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
KATA
mclloyd
32
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Navigating Team Friction
lara
189
15k
Music & Morning Musume
bryan
46
6.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6.1k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
A Tale of Four Properties
chriscoyier
160
23k
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勉強会で コードを書いていく!