「vueで中規模以上のフロントエンドを組んでいて役に立ったtips」に参加してきた!
はじめに
久しぶりにサポーターズの勉強会に参加してきました。
場所が変わってて迷った...
いつも通り、メモだけ。
講師
【張 たいよ】 プログラミング自体は中学生のころからやっていましたが、自前のパソコンが手に入ったのが大学だったので、ずっと環境構築の不要なJavaScriptをやっていました。大学に進学したあとは、学園祭の情報部門で、後輩の指導を行ったり、知人の立ち上げたベンチャーでフロントエンドを書いています。現在は大学の4年生で、今は院試の勉強中です!
概要
vueでAPIエンドポイントが3桁くらいあったり、ページが50くらいあったりする、比較的大きなアプリケーションを組もうとして、コードがこんがらがってしまうことがあると思います。
そんなときに、vueだとreactに比べて、「こんなふうに状態を管理するとやりやすい」といった具体的なノウハウがあんまりネットに無いように思います。
そんな中で、手探りで実際に上のようなアプリを作ろうとして役に立ったこと、そして実際にやってみて気をつけたほうがいいことを伝えたいと考えました。
こんな話をします
無秩序だったvueプロジェクトを大幅にリファクタリングした話
API通信を一本化した話
atomic designを導入した話
vuexとnormalizrを使ってデータの記録方法を統一した話
vuexでのAPIに由来するデータとviewの状態に由来するデータの書き分け
これらの点を実際にやってみてよかったところ
講演
スライド
メモ
まだVueを始めて間もないので、知らなかったものをメモ。
Vuex
Vuex は Vue.js アプリケーションのための 状態管理パターン + ライブラリ
Swagger
SwaggerでAPIドキュメントを作っているので、これからVue側の関数を自動生成した。
Atomic Design
Nuxt.js
感想
「悩んで行き着く先は似てるね。」ってすごく思った。