Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Trying to write a code with Laravel+Vue+TypeScript

arm4
April 20, 2019

Trying to write a code with Laravel+Vue+TypeScript

arm4

April 20, 2019
Tweet

More Decks by arm4

Other Decks in Technology

Transcript

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

    View full-size slide

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

    @plumsa
    2

    View full-size slide

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

    View full-size slide


  4. TypeScript勉強会
    発足!!
    4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. TypeScriptって何?
    7
    デメリット
    後述!

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide