いがにんのぼやき

WEBエンジニアのブログ。IT、WEB、バンド、アニメ。

Vue.js Tokyo v-meetup #7 に参加してきた

JavaScript Vue.js

Vue.js Tokyo v-meetup #7 に参加してきました。
vuejs-meetup.connpass.com

募集開始が平日の12時で10分で一般参加枠もLT枠も埋まったのを見てVue.jsは人気なんだなと思いました。
しかも参加率99%と昨今のITイベントだと信じられないくらいの参加率・・・。

そんなイベントのレポートを自分なりにまとめたいと思います。

「結局Nuxt.jsってなにがいいの？」に対する回答

「結局Nuxt.jsって何がいいの？」に対する回答 by potato4d

@potato4d フリーランス

あまりはっきりとした回答がネット上に転がっていないのでそこらへんの話をすると

Nuxtとは

ReactでNext.jsがでて、それにインスパイアされてVue.jsでもできないかと開発が始まった
SSRフレームワークを目指して始まった
すでにSSRツールではなく統合開発ツールの面を持つようになっている
WebpackやBabelなどが準備されている

使うべき理由

開発の足回りを楽にすることができる

今からVue.jsの開発を始めるときになんでもできる
BabelやWebpackといったツールの設定、SSR環境などが揃っている

概念的な話

規約をフロントエンドに持ち込んだ

Nuxt.jsに限らない話・・・
「ここにこう配置したらうまくいくよ」ってもの
開発者はアプリケーションの本質だけに目を向けられるように
日本人的には仕組み化と言える
いわゆる ベストプラクティス勝手にやってくれるマン

規約の利点

オレオレアーキテクチャの排除ができる

こう言ったみんな似たようなことをやってるけど煩雑なものが人の手を離れる

コード品質の最低ラインを担保する

便利だからと作ったutilディレクトリとかcomponentのディレクトリの複雑さとか
plugins / middlewareなどを正しく使うことで使う人自身が楽できる設計に
layouts / pages / composnentsで分かれていたりしている

誰かの主観によって作られたルールはいつか壊れるので規約によって秩序を保つ

規約の良さとは、開発において避けられない開発者のレベル差を吸収すること

全くの初心者だけで書けるわけではない
うまくやってくれるから知らなくてもいいわけではない

規約は単なる頻出のベストプラクティス集
あくまで頻出設計を楽にしてくれるもの

React、Vue、Angularとそれぞれの特徴、規模感によっていい悪いと言われることについて

なぜVue.jsは中小規模向けか
フロントエンドにおける「ちゃんとしてないPHP」みたい
自由度が高すぎる

対してAngularは大規模向けか
Angular Wayに乗れば楽ができる
敷居は高いが人員をスケールさせやすい

これはだいたい「強い」規約

Vue.jsに統一規格を入れることによってレベル差を吸収する
= 人員をスケールさせやすい
= ルールに乗るとラクできる
= Vueの手軽さに堅牢性

Nuxt.jsは機能的なところばかり注目されるが、規約が存在する
規約の概念は大きなメリットと小さなデメリットをもたらす
ちゃんとVue.jsに詳しい人も必要
規約はAngularが近い概念だがこれまでなかった
ルール順守の世界観の影響力が強くなる

LT

最初の講演のあとはLTでした。

Vue.js + D3.jsでグラフを描く

Vue.js + D3.jsでグラフを描く // Speaker Deck

@hogesuke_1 さくらインターネット

コンポーネント分割 X軸、Y軸、パスに分けた

パス
SVGの要素をテンプレートに書く(path要素)
computedでD3のライン関数を用いて描画

X/Y軸
同じくテンプレートに書く(g要素) axisBottomやaxisLeftで同じように描画

アニメーション
CSS transitionを使ったがChromeでしか動かなかった
代わりにTweenLiteを使った
pathのd属性に用いることでアニメーション可能

VUE DESIGNER でコンポーネントを GUI で開発する

Vue Designer でコンポーネントを GUI で開発する by katashin

@ktsn

XcodeとかでアプリはGUIで作るけどWebにはないのでそれを作ってみた

VSCodeでコンポーネントで描画されるようなものを作った

github.com

拡大縮小したり文字を書き換えてもリアルタイムに反映されていく
プロパティの値を変えたりすることもできるもの
コンポーネントをドラッグアンドドロップで入れられるようにもした
Chromeのdevツールで色をコピーしていたようなことも簡単にできるようにした

ロードマップ
1.0でエンジニアが使えるように
2.0でデザイナーが使えるように

(とても面白そうなプロジェクトでした！)

VUEX PLUGIN 101

Vueのプラグインを使うがVuexのプラグインを使ってる人は少ないイメージ
Vuexのプラグインは簡単に作れる
actionではミューテーションの更新が3秒待つといった簡単なものを作った
awesome VueのでもVuexのプラグインが紹介されている

SVG makes your components to testable

SVG makes your components to testable // Speaker Deck

@haribote_nobody

テストしているか HTMLを使ったグラフィカルなものは難しい 期待値はなんなのか

SVGはコードであり文字列、つまり期待値を定めやすい

Jestを使ってテストしていく

初回のこれが期待値となる 期待値が満たせるように裏のロジックを実装していく

Nuxt.js ファーストインプレッション

Nuxt.js ファーストインプレッション / Nuxt.js First Impression // Speaker Deck

@y_temp4 ALIS

フロントはReactかVue、おそらくVueになると思うと入社前に言われた
React経験があったのでVueに対して色々不安があった
触って見た結果Nuxt.js(Vue.js)がいいものだと気付いた

starter-templateの質が高い
vue-cliからNuxtの雛形を生成 そのまますぐに開発を始められる

.vueファイルが管理しやすい
HTML/CSS/JSが１つのファイルで触れる 圧倒的に楽

日本語ドキュメントの充実
全部日本語のドキュメントが揃っていて学習コストが低い

結論
Vueを使った新規プロジェクトでNuxtを使わない手はない 想像以上にVue.jsの敷居は低い

最後に
ALISのソースコードをオープンにしている

github.com

Vue.jsにありがとう

Vuejs meetup

@carotene4035

双方向データバインディングやリアクティブシステム
最近詐欺にあいかけてVue.jsも信用できなくなってきた
それの中身を読んで見た

dataオブジェクトはgetterとsetterとdep.notifyで算出プロパティに通知

Vueのコンポーネント実装パターン

Vue コンポーネント実装パターン // Speaker Deck

@sekikazu01 BizReach

Controlled Component
v-modelと:value="value", @input=this.\$emit('input', $event.target.value)と同じ

transparent Wrappers
公式にもラッパーコンポーネントを作れると書いてある

Building Real-time Vue App

Building Real-time Vue App // Speaker Deck

@joe_re ClassDo CTO

Socket.IO
双方向通信をサポートするイベント通信
Rooms and Namespaces
名前空間を機能ごとに実装

SocketIO with Vuex
SocketIOとVuexを組み合わせるプラグインを自作

github.com

最後に

どの発表もとても面白かったです。
懇親会でも話していてVue.jsを実際に使っている方以外にあまり使っていない方も参加していて、Vue.jsは注目されているなと感じました。
また参加したいと思います！