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

10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話 #vuejs_meetup6

10年前のレガシーシステムをVue.js TypeScript Elementでフルリニューアルしている話 #vuejs_meetup6

Vue.js Tokyo v-meetup #6 での発表資料です!

github(サンプルプロジェクト)はこちら
https://github.com/maeharin/kotlin-dvd-rental-dev

Hidenori Maehara

December 13, 2017
Tweet

More Decks by Hidenori Maehara

Other Decks in Technology

Transcript

  1. 10年前のレガシーシステムを
    Vue.js TypeScript Elementで
    フルリニューアルしている話
    #vuejs_meetup6
    2017/12/13 Vue.js Tokyo v-meetup #6
    エムスリー株式会社 前原
    @maeharin

    View full-size slide

  2. ● 前原 秀徳
    ● @maeharin(まえはりん)
    ● エムスリー株式会社
    ● エンジニアチームリーダー、グループ会社取締役等を歴任
    ● 好きな言語等:Kotlin、Ruby、Vue.js
    ● 好きな漫画:ベルセルク(心の支え。悩んだら読む)
    ● 自慢:ブログ記事が、はてぶ1200超えた
    ○http://maeharin.hatenablog.com/
    自己紹介

    View full-size slide

  3. 背景
    ● 10年前のレガシーをリニューアル中
    ● 詳しくは以下のスライドをご覧ください!

    View full-size slide

  4. postgresql
    ElasticSearch
    メインサイト
    サテライトサイト postgresql
    管理画面(3種)
    Java
    10年もの
    Java
    7年もの
    生Lucene
    生Lucene
    リニューアル前の技術スタック
    約100
    テーブル
    重複

    View full-size slide

  5. postgresql
    ElasticSearch
    メインサイト
    サテライトサイト postgresql
    管理画面(3種)
    Java
    10年もの
    Java
    7年もの
    生Lucene
    生Lucene
    リニューアル前の技術スタック
    約100
    テーブル
    重複
    廃止
    フルリプレイス

    View full-size slide

  6. postgresql
    ElasticSearch
    メインサイト
    サテライトサイト
    管理画面(3種) APIサーバー
    リニューアル後の技術スタック

    View full-size slide

  7. postgresql
    ElasticSearch
    メインサイト
    サテライトサイト
    管理画面(3種) APIサーバー
    リニューアル後の技術スタック
    今回の話

    View full-size slide

  8. 旧管理画面(10年もの)
    Javaの
    独自FW
    古の技術XSLT…
    旧管理画面(10年もの)
    独自FW・jQuery
    のコンボ...

    View full-size slide

  9. 新管理画面
    新管理画面
    ElementとTypeScriptが活
    躍!
    旧管理画面(10年もの)
    Javaの
    独自FW

    View full-size slide

  10. ● Vue.jsのデスクトップUIフレームワーク
    ● 最新ver: 2.0.8(2017/12/13現在)
    ○ 2017/10/27に2.0.0リリース
    ○ TypeScript型定義がバンドルされた
    ● フォームやボタンなど、大量のUIコンポーネントあり
    Element

    View full-size slide

  11. UIコンポーネントの例

    View full-size slide

  12. 人気
    npmダウンロードトレンド
    Element

    View full-size slide

  13. i18n(日本語対応)

    View full-size slide

  14. Vetur(VSCodeプラグイン)もサポート

    View full-size slide

  15. 個人的に重宝しているパーツ

    View full-size slide

  16. el-dialogの
    visibleに
    booleanのdataを
    バインドするだけ

    View full-size slide

  17. el-date-pickerで
    typeをdaterangeに
    する

    View full-size slide

  18. Select(Option Filtering)

    View full-size slide

  19. el-selectにfilterable
    をつけるだけ

    View full-size slide

  20. rulesに
    バリデーションルールを
    セット

    View full-size slide

  21. バリデーションルールを記載
    * yiminghe/async-validatorの記法

    View full-size slide

  22. 他にも大量のパーツあり!
    ・少ない手数でリッチなUIを実装できる
    ・管理画面の開発にマッチ

    View full-size slide

  23. Vue.js 2.5でTypeScript対応が強化された
    ● Vue.js 2.5(2017/10/13 リリース)
    ● オブジェクト型の構文でもthisの型が推論されるように

    View full-size slide

  24. Vue.js 2.5以前
    ● オブジェクト構文ではthisの型が推論されなかった
    ● vue-class-component等を用いてクラス構文にする必要があった

    View full-size slide

  25. Vue.js 2.5以降
    ● オブジェクト構文でもthisの型が推論される!

    View full-size slide

  26. コミッタの方々、ありがとうございます!

    View full-size slide

  27. 私達のプロジェクト:APIの型定義が欲しい
    ● 業務用管理画面
    ● APIの1エンドポイントのプロパティが50個とか
    ● エンドポイントに対するTypeScript型定義が欲しい
    ○ プロパティの補完・タイポ削減
    APIサーバー
    フロントサーバー
    ※セッションを管理するプロキシとして動
    作。VueとKotlinの間で
    リクエスト内容を変換することはない

    View full-size slide

  28. Kotlin&Spring Boot
    (APIサーバー)
    API定義ファイル(json)
    SpringFoxで
    API定義ファイル生成
    API定義ファイルを利用
    swagger-codegen
    コマンド
    Rubyクライアント
    自動生成
    swagger-codegenで自動生成
    ● SpringFoxでswagger definition(json)を生成
    ● そのjsonをswagger-codegenに食わせる
    TypeScript型定義

    View full-size slide

  29. githubにあげてます
    サンプルプロジェクトあります
    https://github.com/maeharin/kotlin-dvd-rental-dev

    View full-size slide

  30. postgresql
    ElasticSearch
    customer-front
    admin-front
    api
    APIクライアント
    swagger-codegenで自動生成
    サンプルプロジェクトの構成
    API型定義

    View full-size slide

  31. 開発の流れ

    View full-size slide

  32. APIサーバーのエンドポイントを書く

    View full-size slide

  33. swagger-codegenを実行(ビルド時に自動実行)

    View full-size slide

  34. RubyとTypeScriptコードが自動生成される
    Ruby
    * Gem
    TypeScript
    * npmライブラリ

    View full-size slide

  35. Rubyのコードを書く

    View full-size slide

  36. Vue.jsのコードを書く(TypeScript)
    APIのプロパティ
    補完。捗る!

    View full-size slide

  37. ● 特に管理画面の開発で、Elementはよい選択肢と思う
    ● Vue.js 2.5でTypeScript強化されて嬉しみが増した
    ○まだテンプレート部分には型補完が効かない模様
    ○今後効くようになったら最高
    ● swagger-codegenでTypeScriptの型定義生成はあり
    まとめ

    View full-size slide

  38. ご清聴
    ありがとうございました!

    View full-size slide