坂本酒店のチラシの裏

坂本酒店のチラシの裏

Vue.js Tokyo v-meetup #7 出席メモ

開催要項

†名称・日時・会場・主催
  • 名　称：Vue.js Tokyo v-meetup #7
  • 日　時：2018/05/23(Wed) 19:00 - 22:00
  • 会　場：株式会社ドワンゴ
  • 主　催：Vue.js 日本ユーザーグループ
  • タ　グ：#vuejs_meetup7

概略

Vue.js 日本ユーザーグループに主催による、7回目の MeetUp イベントを開催します！！

2018年度、今年はじめての MeetUp イベントです。

今回のMeetupは本セッションに加えてLT8本のLT大会的なMeetupです！

何か、Vueについて話したいことがありましたら、ぜひLTしましょう！

そして、ぜひ、参加して Vue.js について学び、Vue.js ユーザーと情報交換しましょう！

所感

  • 雨の中での開催。でも100人以上が参加できない大人気な勉強会

  • potatpさんの資料はtwitterにあげてあるよ

  • ★

  • ★

  • ★

メモ

  1. 開始 (オープニング)(@kazupon)
    →7回目。本来は3月に開催したかったが・・・Smart Shoppingとgroovesがスポンサーになる。今回のスポンサー費は次の会の経費になるよ(# 次回出た方がいいのでは??)。

  2. セッション枠: 結局Nuxt.jsって何がいいの？(@potato4d)
    →Hanatani Takumaさんのセッション。Nuxtと言えばの人
    　◆Nuxt.jsとは?
    　　Nuxtは流行っている。SPA/SSRな案件まで対応できるフレームワーク。元々はReact向けのNextにインスパイアされてNuxtが始まったよ。SSRツールでなく統合開発ツールだよね。反論はあれど使う理由はあるよね

　◆Nuxtを使うべき理由【技術的側面】
　　開発環境の足回りが自然に整うよね。BABELとかWEBPACKとか色々やってくれてるよね。ってのはあくまでも一面として正しいよね。→って話は【技術的側面】

　◆Nuxtを使うべき理由【規約的側面】
　　「規約」という概念をフロントエンドに持ち込んだ。「規約」とは?「設定より規約」の概念。→仕組化。コレをベストプラクティス化してくれる。オレオレアーキテクチャの排除ができる。属人化するキメの問題を解決してくれる。
　　またコードの最低品質を担保できる。Componentの肥大化とかも防げるよね。便利機能の使い方やコンポーネント設計を
　　ドキュメンテーションのコストを削減できる。規約のセルフメンテナンスが不要。
　　こういった差異を吸収してくれるのが良さ。
　　誰でも簡単に書ける魔法のツールではない。「うまくやってくれる」から「知らない」ってのが許容されているわけではない。必ず「守破離」は存在する。Nuxtに依存するのではなくほどほどに。→【規約的側面】

　◆Nuxt.jsと規約で変わるフロントエンド
　　React/Vue/Angularの一般論、風潮はあるよね。でも「なんでVue.js」が中小機能向け。自由すぎるからね。対してAngularは堅いから大規模。「統一規格」はレベル差を吸収する。NuxtはVueの自由さにNuxtは堅牢性を与えてくれるのでは??NuxtによってVueの活躍の場が広がるのではないか。

　◆まとめ
　技術的側面と規約的側面から良さあるよね。ただ理解がなくても使えるわけじゃない。Nuxtと規約によってVueがもっと使われるのではないか？？

  1. LT1枠: vue.js + d3.jsでグラフを描く(@hogesuke_1)
    →資料はニコナレに上げてある。VueとD3.jsでグラフを書けるの？→できました！
    　やり方Vueなしで作ってComponentに落とし込む。PathコンポーネントにはSVG要素をTemplateに書いた。描画はd3のline関数で書いている。関数の書き方によってはグラフの描画の種類を変えることも可能。xAxsis関数で軸の目盛の設定を行うことができる。CSSではアニメーションができなかったのでTweenLite.jsを使うことで動的に値を変更してアニメーションを再現した。デモコードはGitHubに上げてあるよ

  2. LT2枠: Vue Designer でコンポーネントを GUI で開発する(@ktsn)
    →guiで見た目を組み立てたい。作ってみたのがVue-Designer。githubにある。mscodeでmdプレビューみたいに使うことができる。リアルタイムにソースと要素を更新できる。エディタとGUI間での相互編集が可能。1.0では開発者が、2.0ではデザイナが使えるようにしたい

  3. LT3枠: Vuexプラグイン101(@c-cho)
    →Vuexのプラグインユーザは少ない。ただ作るのは簡単。storeの一部をこねくり回せば簡単に作ることができる。subscribeAPIを使用するとTODOアプリのundo/redo操作が可能。各操作のスナップショットをとってreplaceすることができる。subounceの考え方をvuexのプラグインとして実装してみた。これを使ってwaitする処理のdemoを作成。awesomeのgithubをみてみると参考資料があるよ

  4. LT4枠: SVG makes your components to testable(@haribote)
    →VueでSVGをテストしてる？テストはちょっと面倒だよね。JestによるSnapshotテストができるよ。最初のスナップショットは期待値になる。期待値を満たすロジックを作らないといけないよね。event bindingのテストが簡単にできる。

  5. LT5枠: Nuxt.js ファーストインプレッション(@y_temp4)
    →ALISというサービスやってる。新卒。smarter-templateの品質が高い。vueファイルの管理が楽。日本語ドキュメントが充実している。VuexやNuxtもドキュメントがわかりやすい。Vueは敷居が低いように感じた。ALISのソースコードはオープンソースで作られてるからGitHUbも参照しよ

  6. LT6枠: Vue.jsにありがとう(@carotene4035)
    →双方向バインディングとかリアクティブシステム便利。ブラックボックスでも動いてくれる。dataオブジェクトのcomuputedにバインディングしてくれるの本当。

  7. LT7枠: Vueコンポーネント実装パターン(@seya)
    →Controlled Component。Toggleをv-modelで実装したい。呼び出し元はシンプルに。子にロジック書いてあげればいいよね。Transparent Wrappersを使う。inheritAttrsをfalseにする。ネイティブっぽく使うこともできる

  8. LT8枠: Building Real-time Vue App(@joe_re)
    →Vueでリアルタイムアプリを作ることができる。socket.IOを使ってevent-baseに実装することができる。複雑な双方向通信の実装もできる。Vuexで使う。vuex-socketio-Pluginを作りました。modulesを使うことでシンプルに書くことができる。

参考文献

以上