日時：2018/06/30(土) 14:00 〜 17:00
場所：株式会社アイル

Vue.jsの勉強会が大阪で初開催。定員の倍以上の申し込みがあったようで、関心の高さが伺えます。私も申し込んだときにはすでに補欠で数日前にギリギリ繰り上がりました。入門的な話からアーキテクチャの話まで幅広いテーマで内容の濃い勉強会でした。

デザイナーの私が Vue.js を触ってみた

Yasui Risaさん

speakerdeck.com

デザイナーがVueを知るメリット

仕組みを考慮したデザインができる
工数削減に強力できる
仕組みを活かしたデザインが作れる

CodePenを使ってVue.jsを触ってみた

codepen.io

なぜCodePen？

Vueに必要な小難しい環境構築なしでとりあえずさわることができる

公式サイトベースで学習

jp.vuejs.org

買い物リストのサンプルデモ

codepen.io

v-forを使う
- 配列のデータを使う
v-model
- フォームに入力された値を取る
v-on:click
- クリックイベントを取得して処理を呼び出す

まとめ

CodePenを使えばハードルの高い環境構築なしでVueを触ることができる
コードがシンプルでわかりやすい
まずは簡単なことからはじめてみると楽しく学ぶことができる

AVAでのE2Eテストとpuppeteer

豊川泰弘さん

AVAとは

github.com

JavaScriptのテストFW
Pure JavascriptのユニットテストとかE2Eテストで使っている
非同期のテストができる
mochaと比べるとassertの書き方も少し見やすく書きやすくなっている

事前準備

npm install する

AVAのテストコードの例

test('divide function test', async t => {
  t.is(divide(4, 2, 0.5)
})

package.json
"test": "ava --verbose"
"ava": {
  "require": [
    "esm"
  ]
}

そもそもフロントエンド側のテストコードって必要？

品質を担保する一つの手段であるので時間があれば書いたほうが良さそう
Pure javascriptで書かれているロジック部分は「正しく動いているよ」は保証したほうが良さそう
CIで定期的にテストを実行し品質を担保しやすくなる
GitLab CIを使ってGitコマンドでpushされた時に動くようにしている

それ以外でこんなところでテストコードを使ってました

コードレビュー時にテストコードを書く
メソッド共通化の検討時にテストコードを書く

AVAでのE2Eテスト

NUXTの公式ページにあるE2Eテスト内容を試してみた

ja.nuxtjs.org

E2Eのテストコード

test.before でnuxtを起動

AVAでのE2Eテスト

テストが実行されるごとに npm run generate と同じ内容のものが走ってからテストが実行される
ちょっとしたテストでも時間がかかりしんどい
localStorageが定義されていないための参照エラーが出続けてテストが一向に進まなかった

Puppeteer

github.com

Chrome Developer Protocolを使ってブラウザ操作が行えるライブラリ
npm install でインストール
スクレイピングツールとしても使える
スナップショットとかも取れたりできるので便利
Ver.1.0が2018年1月に出ている
Googleが提供
CentOSとかでも利用が可能
資料が多そう？

ちょっとした動作確認用としてTry Puppeteerがある

try-puppeteer.appspot.com

Puppeteerを使わない選択に

ライブラリのインストールに時間がかかりそう
必要なライブラリがインストールできなくなったら本当にGitlab CIで動くのか
Nuxt公式のほうが安心

まとめ

AVAでのテストコードを書くのも良さそう
E2Eテストはそれなりに苦労した
ローカルだけでのE2Eテストの実施だけであればPuupeteerのライブラリを使ってテストとするのも良さそう

※補足：会場のアンケート

普段フロントエンドのテスト書いている人は意外と少ない
mocha派が多い
AVA派は少ない

Clean Architecture with Vue

andoshin11さん

speakerdeck.com

Clean Archtectureの概要

クリーンアーキテクチャ(The Clean Architecture翻訳) | blog.tai2.net

オニオン型のレイヤードアーキテクチャ
各レイヤーの名前は重要ではない
依存性の矢印が単方向であることが大切
内側のレイヤーは外の世界を知らない

アプリケーション実装パターン

MVC
MVVM
DDD
- 業務上の関心事＝ドメイン
- ドメイン単位でデータのふるまいを定義する
- 責務を分離して変更に強い
Flux
- Facebookが提唱
- Redux,Vuexなど
- 単方向データフロー
- CQRS
- Event Sourcing

Vuexを利用したFluxパターンの課題

Actionsにアプリケーションロジックが集約しがち
ドメインモデルをどこに書くか
Storeの構造がViewを意識したものになりがち
Gettersを全てのViewに用意するのは厳しい
Mutationにロジックを書く人が後を絶たない
本当にTestableか

→スケールしなさそう

今回の設計方針

厳密なレイヤー分割
関心ごとの分離（DDDライク）
単方向データフロー（Fluxライク）
依存性も単方向でテスタブル
外部IFに依存しない

→Fluxの良いところを活かしつつDDDの考えも取り込んでスケーラビリティの高いアプリケーションにしたい

github.com

大事なのはレイヤーを増やすことではなくでレイヤーの依存性の方向性

Vue.js / Nuxt.js

後藤知宏さん

Vue.js = Progressive Framework

CDNで呼び出すだけで使える
WebpackなどのNode環境構築が不要
- シンプルな問い合わせフォームやAPIの埋め込みなどに
- Wordpressなどでも使える

Vue.js = data binding tool

データの内容がViewと結びつく
シンプルなアプリケーションから大規模なアプリケーションまで使える
スケールする知識の選択肢になる

Vue.js=custom component loder

Webpackなしでもいける
- .vueファイルでWebpackありだとよりスムーズな開発
Backendアプリケーションなどの大規模なものでもシンプルに管理できる
- タグの部分はバックエンドに任せる

Vue公式でコードを書きながら動作を確認してみると良い

jp.vuejs.org

Vue.js with VueRouter

router.vuejs.org

SPA化する場合などにRouterを導入できる

Vue.js with Nuxt.js

ja.nuxtjs.org

Vue.js
VueRouter
Vuex

Nuxt.jsはVue.jsで作るときに必要となる3つの構成をある程度まとめたFW

ここからLT

Vue.jsでスタイルを動的に変更する3つの方法

qwerty8tさん

クラスのバインディング
- class="{{ className }}"
スタイルのバインディング- インライン
- style="{ color: activeColor}"
スタイルのバインディング- オブジェクト
- style="styleObject"

Stringで"や'を多用する書き方はキモい

クラスのバインディングを使いましょう

※参考

v1-jp.vuejs.org

Vue.jsのmethodsとcomputed

ショウノシオリさん

Vue.jsのmethodsとcomputedって違うの？

Vue.jsのscript要素
読み込むタイミングが違う

書き方はほぼ同じだけど何が違う？

methods
- メソッド
- メソッドなのでhtml上では () が必要
- 毎回呼び出す
- キャッシュされない
computed （算出プロパティ）
- プロパティ
- html上では () なし
- getter/setter が定義可能
- デフォルトはgetterのみ
- 値が変わらなければ呼び出されない
- キャッシュされる