第70回 HTML5とか勉強会「開発環境」

2018/09/05参加

長期運用サービス改善のために構築した開発環境の話

長期サービスありがちな
・既存のものはそのまま
・ブロック単位で改修
・vue.jsは学習コスト低くていいよ！
UIインベントリ作成→スタイルガイド→
slack、figma(パーツの共有。xdみたいなこともできる!)、storybook
アトミックコンポーネント 粒度>カテゴリ>コンポーネント
カプセル化することによってのびのびコーディング
★運用ルールは守るけど、守ることが目的にならないようにする

noteのフロントエンド刷新中の開発環境

Ruby、coffee、AngularJS→nuxt.jsに刷新
・明確なコーディング規約がない→eslint,prettier,nuxtによってもたらされた規約
・コンポーネント設計のルールがない→atomic designを使用。粒度に名前があるのべんり。
typeScript

開発環境構築に時間をかけない

ボイラープレート(Gitに環境置いといてクローンする、ツールは賢すぎないものを)/プリセット(eslint-config-xxx)/ゼロコンフィグのツール(bili.js,poi.js)
★vue.js入門

ServiceWorker Side Mock / Transpile

service worker side(合法ローカルプロキシ)
ie11だけ未対応！
マウス乗せただけでリンク先を先読みーとか、workbox
透過的pwa
積極的pwa

visual studio live share
リモートで入った人全員でさわれる。カーソルの位置もわかる。リモートでデバッグができる、ブレークポイント貼ったもの共有
共有はコードだけじゃない！