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 ● 型が間違っている、コードが間違っている時に エディタ上ですぐ分かるのが気持ちよすぎて、 １つでも不可解なエラーが出ていると気になって夜も眠 れなくなる。 ● classは結局コンパイル後はprototype拡張式のコード になるためコード量がやや増える ● Importしてるファイルを変更してもwatchしてる状態で それが反映されない。 ● 型を指定する部分が本筋と混ざることで複雑なコードの 場合、可読性が下がる デメリット

まとめ 17 ● 馴染みのClassでオブジェクト指向的に書けるのはうれし い。すごい楽。 ● チーム開発で威力を発揮しそう ● ハマると時間がかかる ● 全部に型指定する生活を強いられるのがつらい ● Componentのtemplateのシンタックスハイライトされ ないのつらい ● 実行時ではなくコンパイル時に怒ってくれるから、 上品で気持ちいい！！ ● 変なことを書いらたすぐ気づける！ ● コードの堅牢性が上がる

18 型を意識することで PHPなど他の言語使用時やTSで書いてない時も コードの書き方が矯正されると思った！ ただ、Vueとの兼ね合いとか ハマるとなかなかコストくうので うちの場合、TSの採用はもうちょっとみんなの知見が 溜まってからのほうが良さそう! 引き続きTypeScript勉強会で コードを書いていく！