Fumiのブログ

「vueで中規模以上のフロントエンドを組んでいて役に立ったtips」に参加してきた!

はじめに

久しぶりにサポーターズの勉強会に参加してきました。
場所が変わってて迷った...

supporterzcolab.com

いつも通り、メモだけ。

講師

【張 たいよ】 プログラミング自体は中学生のころからやっていましたが、自前のパソコンが手に入ったのが大学だったので、ずっと環境構築の不要なJavaScriptをやっていました。大学に進学したあとは、学園祭の情報部門で、後輩の指導を行ったり、知人の立ち上げたベンチャーでフロントエンドを書いています。現在は大学の4年生で、今は院試の勉強中です!

twitter.com

github.com

qiita.com

connpass.com

概要

vueでAPIエンドポイントが3桁くらいあったり、ページが50くらいあったりする、比較的大きなアプリケーションを組もうとして、コードがこんがらがってしまうことがあると思います。

そんなときに、vueだとreactに比べて、「こんなふうに状態を管理するとやりやすい」といった具体的なノウハウがあんまりネットに無いように思います。

そんな中で、手探りで実際に上のようなアプリを作ろうとして役に立ったこと、そして実際にやってみて気をつけたほうがいいことを伝えたいと考えました。

こんな話をします

無秩序だったvueプロジェクトを大幅にリファクタリングした話

API通信を一本化した話

atomic designを導入した話

vuexとnormalizrを使ってデータの記録方法を統一した話

vuexでのAPIに由来するデータとviewの状態に由来するデータの書き分け

これらの点を実際にやってみてよかったところ

講演

スライド

speakerdeck.com

メモ

まだVueを始めて間もないので、知らなかったものをメモ。

Vuex

Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリ

vuex.vuejs.org

Swagger

SwaggerでAPIドキュメントを作っているので、これからVue側の関数を自動生成した。

qiita.com

news.mynavi.jp

www.openapis.org

Atomic Design

design.dena.com

qiita.com

uxdaystokyo.com

Nuxt.js

qiita.com

感想

「悩んで行き着く先は似てるね。」ってすごく思った。