# v-sendai #3 ざっくりまとめ [v-sendai Vue.js/Nuxt.js meetup #3 - connpass](https://v-sendai.connpass.com/event/142100/) ## Session1. Progressiveにvueを導入した話 ### 背景 入社当初背景: AWS, go+revel, jQuery jQuery … ビジネスロジックとDOMが混在. モジュール化はしていたものの複雑… => Vueを導入する流れ ### Why Vue.js? ガイドラインを見たところ使いやすそう SFCとデザイナーの親和性の高さ jsxはちょっととっつきずらそう ほんの出来心(重要) ### 方針 * Drasticに変えていく * 短期決戦 * ある程度のバグを許容必要あり * Progressiveに変えていく * 長期戦 * バグは抑えていく => プロダクトの特性と組織の特性 #### クラウドサインの場合… * プロダクトの特性: 仮にサービスが落ちると顧客の契約作業ができない. : 影響範囲を狭く, 問題を起こさないように * 組織の特性 : フロント一人. 思いっきり変えるにはリソース不足 #### 特性に応じた道しるべ Vue.jsでフルリリース <- 責務の譲渡 <- 導入範囲の拡大 <- メンバ増やす <- 画面の一部 結果: Vuexは使わない, routerはrevelにまかせるなどで導入 現状を理解した上で最適解を得るためにあえて使わないという選択肢は大いにあり. 段階に応じて(プログレッシブに)導入できるのがVue.js ### Practice #### マウントするコンポーネントの粒度 **ビジネスロジックごとに分けると省エネ** what is 省エネ : コンポーネント粒度を最大にしてみると.. 画面全体にマウントすると労力が… コンポーネント粒度の最小にしてみると… 中間に謎なモジュールが生まれる. 粒度はこの中間くらいで, ビジネスロジック一つにコンポーネント一つくらいがちょうどよかった #### ビジネスロジックごとに分けると問題を局所化できる #### 子コンポーネントの粒度 * 部分部分に適応している場合… 子コンポーネントを共通化してしまうと, その子コンポーネントに最適されたコンポーネントができてしまう <- 再利用しづらい. * ので, 段階的に導入中は一時的にファットコンポーネントを許容したほうがいいのでは ### まとめ Vueはprogressiveに導入できる 道しるべの立て方が大事 Vuexがデファクトだよねーなどのいけいけを優先すると... ## Typescriptを活用してサービス構築頑張ってみた話 ### 技術的背景 Front: Vue.js + TS backend: Express + TS on AWS Open API 技術選定以前の話… ここまで仕様等を決めてissue化できればあとは誰かがやってくれる.という状態に #### なぜこの技術選定? 条件によって変わる 今回の場合, 副業の人でも入りやすいように * よく使われるフレームワーク * Vueでレールに乗りつつ, 学習コストを下げる * 実行時エラーよりもコンパイルエラー * TSによる型サポート * ドキュメンテーションの充実 * Atomic Design + Storybookでコンポーネントをカタログ化 **大事なのは決めること** * 間違っているなら間違っていると指摘される状態に ### これあったら便利(ないとだめ)系 #### 1. Code Formatter Prettier #### 2. TypeScript OpenAPIとの組み合わせで方の変更を検知できるので, 一週間後に着手した場合でもインターフェースの変更によるエラーを自動で判別してくれる #### 3. Open API 型情報を d.ts ファイルに変換してくれるツールがある ### まとめ 決めていくことで物事が進む 共通認識を持つ仕組みを持っていく ## Nut.jsとFirebaseで2日でWebアプリ作った話 2nd アラバキ2019のタイムテーブルアプリ(PWA) 今回: 北海道のrock festival ### GAS を使ったスクレイピング アーティスト情報等をjsonで取得してタイムテーブル表示. <- 手作業で画像をjsonに. (つらみ Google App Script スプレッドシートに書いた日付がきたらSlackに通知など 今回.. Google App Scriptでwebsiteからスクレイピングしてきて, spread sheetに. あとはcsv にして, jsonに変換 ### Vue Draggable ドラック&ドロップが簡単にできるライブラリ ``` <draggable></draggable> ... import Draggable from "Draggable" ``` のみ ### データ構造 はソフトにしましょう ## [LT] Vue + Web Componentsの話 ### What is Web Components ライブラリ無しでHTMLコンポーネント(例えば`<my-button></my-button>`)を定義できる scriptで読み込んで, 利用するだけ ### Vueとの関連性は? **相性抜群** Web componentsをVueで利用できるだけでなく VueからWeb componentsを作ることも メリット: どんなフレームワークでも使えるコンポーネントが作れる #### Vueで使うには? ``` import './components/my-button.js'; ``` #### VueをWebComponentsにする vue cli buildでwc指定するだけ ## [LT] VeeValidateの穴を踏み抜いた話 TS, Firebase, Auth0とかやってる VeeValidateとは.. Template based validation framework `<input validate=“”>` でvalidationしてくれる が, 不正なメールアドレスが登録されていた… メールのRFCを見てみると,アドレスに実はマルチバイト文字使える VeeValidateの穴なのか仕様なのかはよくわからないが, 有名ライブラリでも過信はできない