見出し画像

Vue.js Tokyo v-meetup #7に行ってきた

Vue.js Tokyo v-meetup #7

開催日:2018年5月23日 19:30~22:00
場所:株式会社ドワンゴ

Vue.js 日本ユーザーグループに主催によるMeetUp イベント

セッション一覧

・結局Nuxt.jsって何がいいの?
・vue.js + d3.jsでグラフを描く
・Vue DesignerでコンポーネントをGUIで開発する
・Vuexプラグイン101
・SVG makes your components to testable
・Nuxt.jsファーストインプレッション
・僕たちが、Vue.jsに対してできるたった一つのこと
・Vueコンポーネント実装パターン
・Building Real-time Vue App

結局Nuxt.jsって何がいいの?に対する回答

Nuxt.jsの良いところ
Vue.jsでの開発に、ベストプラクティスを勝手にやってくれるマンの規約を導入することができ、3つのメリットを得ることができる。

1つ目は、オレオレアーキテクチャの排除することができる。Vue.jsの開発では、Vue.jsが自由すぎることによって起こる問題がたくさんある。Nuxt.jsはpagesディレクトリにいい感じに入れると、いい感じにルーティングをやってくれるなど、複数の規約があるため、オレオレアーキテクチャーを作らなくて済む。

2つ目は、コード品質の最低ラインを担保できることである。Vue.jsユーザは特にレベル感がまちまちであり、Vue.jsは自由すぎるため、すぐにヲワタ状態になってしまう。しかし、規約のおかげでレベル感格差を吸収してくれる。

3つ目は、ドキュメンテーションコストを削減することができる。Nuxt.jsはOfficialに日本語訳が存在するため、規約は調べれば出るので自分たちでドキュメントをメンテナンスする必要がない。

vue.js + d3.jsでグラフを描く

Vue.jsでグラフを描きたくて、D3.jsを使いたかったのでやってみた。まずVueを使わずにD3.jsだけで作成し、それをコンポーネントに落とし込んだ。

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

NativeアプリだとGUIで開発ので、Web開発でも同じような開発体験をしたいから、Vue-Designerというエディターのプラグインを作成しました。

Vuexプラグイン101

Vuexにはpluginプロパティがあって、ロガーとかできたりすごい便利!

SVG makes your components to testable

グラフィカルなコンポーネントのテストは難しいけど、SVGなら文字列だからテストがとても簡単!

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

starter-templateの質が高く、日本語ドキュメントが充実していて、設定もしなくて済むため敷居がめっちゃ低い。

僕たちが、Vue.jsに対してできるたった一つのこと

Vue.jsは本当に便利だけどブラックボックスだから、本当にVue.jsがやっているのか疑問がある。リアクティブとかReactにやらせてるんじゃないのと思い、Vue.jsのソースコードを読んでみた結果、変更の通知・依存関係など全部Vue.jsがやっていた。

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

Nativeっぽいコンポーネントを作ってみた

Building Real-time Vue App

Vue.jsとSocket.ioを組み合わせてサービスを作ってみた。ルームが便利。


所感

potatoさんの『誰かの主観によって生まれたルールは得てして破壊れされるものである』という名言、ktsnさんのVue-Designer、SVGは文字列だからテストできるというのが衝撃的だった勉強会でした。

Vue.js Tokyo v-meetupは、今回が初めての参加だったのですが、雨なのに99%という驚異の参加率なだけあって、雰囲気はとてもフレンドリーな感じでした。参加するには1000円かかることもあって、貧乏精神で懇談会にも参加させて頂いたのですが、僕はコミュ障なので端っこにいるとスタッフの方が話しかけてくださり、輪の中に入れてくれたりボッチコミュ障にも親切な雰囲気です。(Vue.jsはコミュニティの団結力?がとても好きです)

宣伝

ITエンジニア向けの勉強会での記事を投稿しています。
興味がある方はnoteアカウントをフォローして頂けると嬉しいです。
Twitterもよろしくお願いします。@TTrpbm

最後まで見て頂きありがとうございます! フォローやサポートして頂けると、励みになります。