くらげぐらしのロゴ

Vue.js Tokyo v-meetup 6 に参加しました。

2017/12/13

まだまだVue.js初心者ですが、今日はこちらに行ってきました!

ここ最近のVue.jsの動向と今後について

Embedded content: https://speakerdeck.com/kazupon/future-of-vue-dot-js

  • \爆発した2017年/
  • 初の公式カンファレンス開催
  • vue-cli 3.0 は再設計中
  • 現時点での構想

    • ベースはwebpackテンプレート
    • browsefyは廃止予定
    • vue buildはvue-cliから分離
  • Vue 3.0 は2018 earlyにリリース?
  • 2.x系と互換性を持たせる予定
  • 対象ブラウザはネイティブES2015をサポートするブラウザのみ

    • IE11を対応するかは議論中
  • 3.0で対応するか未定な項目

    • WebComponents対応
    • クラスベースのAPI
    • WebAssembly対応
  • 2018年のカンファレンス

    • 日本も開催に向けて準備中!!
  • そろそろvue-test-utilsが正式リリース予定

eslint-plugin-vueについて

Embedded content: https://docs.google.com/presentation/d/1nJ8gsRr_-lxzCprLu8CU0FwloXSNdU0QKk-kP42k40k/edit#slide=id.p

  • eslint-plugin-vueを作った動機

    • Polymerで開発していた頃、些細なミスで動かないことがよくあった
    • ESLintはReact/JSXについて優れた静的検証ができていた
    • Vueでもこのくらい静的検証したいと思った
  • 単一ファイルコンポーネントを解析するためにvue-eslint-parserを作った

    • <script>部分だけを検証する必要があるため
  • 今後Vue.jsのスタイルガイドに従って検証するようにしたい
  • <template>部分の検証について

    • ASTとは分離されている
    • ASTの仕様を確認する
    • Elementを指定する
    • プロジェクトごとに独自のルールを作ったりすることができるので、生産性が上げていきましょう
    • 自動修正をする時は、fixという関数を渡すことで実現できる
  • eslint-plugin-vueへの Contribute 待ってます!!

vue-test-utils

  • コンポーネントとは?

    • ユーザーと対話するインターフェース
  • なぜテストするか?
  • 何をテストするか?

    • データを正しく表示するか
    • ユーザー対応に応じて想定した挙動をするか
  • 上記の内容に対応したテストができるようなAPIが用意されている
  • データが切り替わった時に、想定通りに表示が切り替わっているか?
  • vue-test-utilsは公式テストライブラリ
  • vue-test-utilsはまだbetaなのでContributeのチャンスがある

Vue.jsとともにいきる

Embedded content: https://docs.google.com/presentation/d/1s1clv2XmtQRI6izjbsWJjpkYrfk0ALUEuKVoaPVwjwg/edit#slide=id.p

  • \世界がバベっていて分かり合えない/

    • デザイナとエンジニアでも言葉が違う
  • jQuery帝国からVue.js王国へ移住してきてほしい!!
  • デザイン現場では誰がこのレイヤーどういう意図で作ったのかわからないことがよくある
  • どこでVue.js使われているの?!(\会場にいっぱいいた/)
  • コンパイル、イベント処理に対するエンジニアとデザイナーとでのイメージの違い
  • 難しい部分はなるべく取り払うようにした

    • なるべく何も書かせないようにした
  • Vue.jsを使うことで将来の見通しがよくなった

    • 追加や改修に強くなった
  • Git/GitHubは使っているが、プルリクエストはさせていない

    • masterブランチへpush
    • まずバージョン管理があればいい状況

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

Embedded content: https://speakerdeck.com/maeharin/10nian-qian-falseregasisisutemuwovue-dot-js-typescript-elementdehururiniyuarusiteiruhua-number-vuejs-meetup6

  • つらいときはベルセルクを読む
  • Java10年物、約100テーブル重複…
  • ElementのUIコンポーネントのvalidationが便利
  • Vue 2.5からTypeScript対応

    • thisの型も推論される
  • Swaggerで独自のAPI定義をして、swagger-codegenを使うと、APIのプロパティ補完が効くので便利

VS Code&TypeScript&Vue.jsでの簡単なライブデモ

  • 最近はMicrosoft社内でもMacを使う人も多い
  • Visual Studio Codeは、2017年10月にGitHub上で最もContiributeされたプロジェクトになっている
  • 「JavaScriptはWebのアセンブリ言語」
  • 生産性を上げるために生まれたTypeScript

    • ES言語仕様を先取りする
  • TypeScript公式にQuick Starterがある
  • Vue.jsにTypeScriptを使って効率よく楽しく開発してくれると嬉しい…!

雑感

  • 改めてVue.jsは熱いフレームワークだなと実感。

    • アップデートも本当に盛ん。
    • 来年の今頃にはどんなVue.jsになっているのか気になる。
  • 確かにシンプルにWebページを納品する、というお仕事ならVue.jsだったりフレームワークとは接点が少ないかもしれない。

    • そんな環境の中、Vue.js王国への移住を目指して行動されているイケメン.jsさん本当にイケメンさんだなと。
  • vue-test-utilsに今のうちに移行するか悩む。

    • 現行のWebpackのboilertemplateで用意されるテストフレームワークを使っているので、手軽に移行できるならしておきたい。
  • Element UIだったりVue.jsのUIライブラリを知ると、今までjQueryとかで作っていたのは何だったんだろうと思うくらいにUIで考えることが減らせると思う。
  • お話聴いている限りだと意外とVue関連のプロジェクトはContributeのチャンスあるのかな?

    • 特にeslint-plugin-vueはとても有難く利用させていただいているので、何か貢献したいところ…!
  • 今のところVue.jsでTypeScriptを使ったことがないものの、サンプルがあったので早速ちょっと取り入れたい。
  • Microsoftさんのオフィスがきれいで広すぎてダンジョンで迷子になるくらい広かったです。ご提供有難うございました!
  • あらためて、今回のイベントに関わられたみなさま、有難うございました!

プロフィール

minamo
主にWeb開発をしているITエンジニア。旅行、写真撮影、読書などが趣味。
© 2020 minamo173