Trying to write a code with Laravel+Vue+TypeScript

Transcript

1. Laravel+Vue
   +TypeScriptで
   フォームバリデーションを
   実装してみた話
   @plumsa
   

   View Slide

2. 自己紹介
   株式会社プラムザ
   Tech Lead
   ハトヨウコ
   公式Twitter
   ララ・ベル子さんの中の
   人
   @plumsa
   2
   

   View Slide

3. 3
   きっかけ
   社内でこんな会話があっ
   た。
   

   View Slide

4. “
   TypeScript勉強会
   発足!!
   4
   

   View Slide

5. 5
   まずは
   ドキュメントの読み込み
   公式ドキュメント(英語)
   https://www.typescriptlang.org/docs/handbook/basic-types.html
   js STUDIO
   https://www.typescriptlang.org/docs/handbook/basic-types.html
   日本語に翻訳してくれてるありがたいサイト
   たまにコードが古かったり、変更になってる文がある。
   公式とちゃんと見比べたほうが◯
   

   View Slide

6. TypeScriptって何？
   6
   特徴＆メリット
   ● JavaScriptで静的型付けできる！
   ● JavaScriptでペチパーが知ってるような感じで
   Classが書ける！
   (※クラス構文自体はES2015で導入されているが、完全一致ではない）
   ● コンパイルされたあと普通のJavaScriptになる！
   ● おかしなものを変数に入れるとコンパイル時、
   またはエディタでリアルタイムに怒ってくれる！
   

   View Slide

7. TypeScriptって何？
   7
   デメリット
   後述！
   

   View Slide

8. 8
   基本は何となく
   分かったので
   そろそろ実装したい
   

   View Slide

9. 実装してみることの意義
   ◦ 使い勝手が分かる
   ◦ 簡単そうに見えていても実際は違うことがある
   ◦ 座学より遥かに多くの気付きがある
   ◦ 知識の定着
   ◦ 応用する力を得られる
   9
   

   View Slide

10. ざっくり手順
    ◦ 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
    

    View Slide

11. Demo &コード解説タイム
    11
    

    View Slide

12. ▼問題
    Symfonyがやたらエラーを吐く
    ▼解決法
    tsconfig.jsで対象外にする
    https://qiita.com/ttwwiitttteerr0/items/5d
    4590d37a48d868bd11
    ハマり
    ポイント1
    12
    

    View Slide

13. ハマり
    ポイント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-を定義
    してメソッドを定義するオブジェクトに実装する
    

    View Slide

14. ハマり
    ポイント3
    14
    ▼問題
    Element implicitly has an 'any' type because type
    'Validator' has no index signature.
    というエラーがどうしても消えない。助けてママン。
    ▼解決法
    無理やり型注釈をつけて乗り切る
    

    View Slide

15. ハマり
    ポイント4
    ▼問題
    experimentalDecoratorsオプションを設定せ
    よと言われる
    ▼解決法
    tsconfig.jsで設定する
    https://www.l08084.com/entry/2018/02/09/154824
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide