tekitoumemo’s diary

思ったことを書くだけ。長文版Twitter

e2eにcypressとjest-puppeteer使った

NuxtJS Jest cypress

結論

cypress一択


技術検証＋基盤導入の仕事があってどっちも軽く使ってみた。

cypress

導入まで
npm install cypress --save-dev

package.json

  "scripts": {
    ...
    "test": "jest test", // cypressもテストするのでディレクトリ指定
    "cypress:open": "cypress open",
    "cypress": "cypress run"
  },

.eslintrc.js

  globals: {
    cy: true,
  },

cypress.json

{
    "baseUrl": "http://localhost:3000"
    "video": false // ビデオとかいらないので
}

テストの頭に

// eslint-disable-next-line spaced-comment
/// <reference types="Cypress" />

モック（これがバカ熱い）

cy.route({
  method: 'GET',
  url: `/api/hoge`,
  response: 'fixture:hoge.json'
})

課題

nuxtjsでやったけどカバレッジがjsしか取れなかった。あまり深堀せず。

Good

レンダリング待機とかそこらへんが一切不要。スラスラテストかける。モックかける

Bad

CIがだるい、これ依存しすぎでしょ。

apt-get install libgtk2.0-0 libgtk-3-0 libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2 libxtst6 xauth xvfb

jest-puppeteer

導入まで
npm install --save-dev jest-puppeteer puppeteer jest

.eslintrc.js

  globals: {
     page: true
  },

jest.config.js

preset: 'jest-puppeteer'

package.json

  "scripts": {
    ...
    "test:e2e": "jest e2e"
  },

jest-puppeteer.config.js 

module.exports = {
  launch: {
    headless: true,
    slowMo: 1000 // これアプリケーション起動するまで待機してる感じ。よくないとおもう
  },
  server: {
    command: 'BROWSER=none npm run dev',
    port: 3000,
    launchTimeout: 50000
  }
}

モック。interceptorなの

await page.setRequestInterception(true);
page.on('request', request => {
    if (request.url() === constants.API) {
        request.respond({
            content: 'application/json',
            headers: {"Access-Control-Allow-Origin": "*"},
            body: JSON.stringify(constants.biddersMock)
        });
    }
    else {
        request.continue();
    }
});

課題

jestだからカバレッジ取れるけど統合出来るのかな？

Good

puppeteer使う場面がテストだけじゃないので知識が活かせる

Bad

レンダリング待機したりなどseleniumチックなことをやらなければいけない。モックモナー

結論

cypress一択

NuxtJSでVeeValidate 3.x系を使う

NuxtJS Vue

f:id:tekitoumemo:20200105175103p:plain

前回の記事で書いたプロフィールサイトでお問い合わせ画面を作ってます。
どうせ作るんならフォームバリデーションを追加してみることにします。なのでVeeValidateを使ってみます。
tekitoumemo.hatenablog.com


Nuxtの設定は以下をほぼパクリました設定から「こんぐらい使えれば一通り大丈夫だよね」ってところまで書きます。
Available Rules | VeeValidate

設定

pluginsに以下作成
plugins/vee-validate.js

import { extend } from 'vee-validate'
import { required, email } from 'vee-validate/dist/rules'

// No message specified.
extend('email', email)

// Override the default message.
extend('required', {
  ...required,
  message: 'This field is required'
})

nuxt.config.jsに以下追加

  plugins: ['~/plugins/vee-validate.js'],

で起動すると以下のエラー
f:id:tekitoumemo:20200105181410p:plain
これはvee-validate/dist/rulesがES6なのでBabel で変換しないといけません。
なのでbuild. transpileに以下を追加します。

build: {
    transpile: ['vee-validate/dist/rules'],

    extend(config, ctx) {}
    ...
  }

これでVeeValidateの準備が出来ました。

あとはこんな感じ（いきなり雑）

<ValidationProvider v-slot="{ errors }"  rules="required">
  <input v-model="value" type="text">
  <span>{{ errors[0] }}</span>
</ValidationProvider>
import { ValidationProvider } from 'vee-validate'

export default {
  components: {
    ValidationProvider
  },
}

こんな感じになります。
f:id:tekitoumemo:20200105205042p:plain

emailなど、空白＋アドレスの形式確認みたいな複数条件の場合はパイプでつなげばどちらのバリデーションが有効になります。
rules="required|email"

独自のエラーメッセージを入力したい場合は{_field_}プレースホルダーを使います。

// Override the default message.
extend('required', {
  ...required,
  message: '{_field_}は必須項目です。'
})

こんな感じになります。
f:id:tekitoumemo:20200105210543p:plain

カスタムバリデーション

カスタムバリデーションに引数を渡すことも可能です。rules="max:10"は10文字以上入力された場合、エラーにします。

extend('max', {
  validate: (value, args) => {
    return value.length <= args.length
  },
  message: '{_field_}長すぎやろ',
  params: ['length']
})

どれか１つでもエラーの場合はボタンをdisableにする

ValidationObserverを使います。invalidはどれか１つでも無効の場合にtrueになります。いろいろあるのでここ参考に

<ValidationObserver v-slot="{ invalid }" slim>
    <ValidationProvider
              v-slot="{ errors }"
              name="メールアドレス"
              rules="required|email"
            >
    </ValidationProvider>
    ....
</ValidationObserver>

ここまでできればformについては大体まかなえそう。

まとめ

Angularはreactive-formsがあるからform強いなーと思ってたけど、VeeValidate相当使いやすい。2系は設定がちょっとだるいらしいのでシンプルでよかった。

2019年振り返って

去年もやったので振り返る

2018年振り返り

仕事のこと

最悪な会社へ

昨年はAngular5と.Net Coreをやっていたが、Angularが出来なくなってきたので今年からAngularたまにReactみたいな現場に移動。ガチモンのスペシャリストがいて自分の書いたコードをレビューしてくれるっていう神現場だった。技術的な面で仕事を選んでいたので、多重派遣の会社とは知らずに働くことになり、毎日の報告書や打ち合わせの多さ、身を隠さなきゃいけない辛さなど最悪なことが多すぎた。すんなり辞められるかと思いきや、すげーめんどくさいことになった。最後は揉めて終了。ただ単価は高かった。いい勉強になった。

エージェント介さずに仕事を見つける

なんやかんやあってエージェントも終わってる求人出すことがわかったので、興味のある分野で仕事を探すことに。なんか1社目で決まっちゃった。技術的にもNuxtJSで満足してるし、なんにせよ好きだった店のサービスを運用出来ることが良かった。ダメなパターンが多いかもしれないけど、意外とイケることがわかったのが大きな収穫。直接だとやはり単価は高いがプレッシャーがヤバい。

個人サービスは継続中

一昨年作ったみんなの洋楽ランキングは継続して運用してる。今年はあまり手を付けてないけど大きなところでパフォーマンス改善、React .Net Coreバージョンアップ、レビュー機能追加ぐらい。今年はとにかく流入が良くて平均1万ユーザーの3〜4万PVだった。同時にアドセンスで2万ぐらい売上出た。もうちょいでトントンになるから今年は期待。新卒の頃（7年前）に作ったITunEsTooLが年間10万程度売上出る。1ミリも手を付けてないので、みんなの洋楽ランキングもこの程度になれば御の字。

CSSの技量が上がった

もうほとんど怖くないレベルまで達した。

MacBook Pro買った

30万ぐらいした。ASUSとか買ってubuntu入れれば良いやと思ってたけどMacBookのキーボードの良さやairdropやらいろいろ考えて後悔しないと踏んで購入した。こんな大きな買い物したの車以来。

結構休んだ

一年で3ヶ月ぐらい休んだ。 本当はこんな休む予定じゃなかったけど、最悪な会社と揉めたことによって少し空いてしまった。育児もたんまり出来たし、幸せっちゃ幸せな休暇だったな。

仕事のモチベが上がった

前の現場はインフラ、サーバ、フロントもそのジャンルのプロフェッショナルが多かったのでなかなか介在しづらく、その分野ならプロフェッショナルな人間と仕事できる反面、やりづらさを感じていた。少なからず、フルスタックな感じで働いていたいと思った。アジャイルとかいうならどっちもやりたいよなぁ。

フリーランスの終わりを考えるようのなった

今年で30になり、フリーランスを続けるか正社員に戻るか考えるようになった。年齢的な意味合いと社会人になってほとんど事業会社にいるので業務委託だと入り込みにくい領域が存在することがわかった。フリーランスでいることは技術も向上するし収入も上がるからいいことなのだが、結構な頻度で虚無感が襲ってくる。ビジネス用件でくる仕様って基本同じことの繰り返しだからプロダクトに情熱がないとつまんねぇなぁって感じになる。今は好きな分野なので、そこに情熱が持てるか、やはり正社員でないと入り込めない領域があり虚無感を感じるかを判断したい。

やっぱりRuby on railsは多い

なんとなく感じてたけど、やはりRoRは多い。人数がめちゃくちゃ多いので強強マンじゃない限り参入は厳しそう。機会が少ないけどやるならGoか.Net Core、強いて言うならJavaぐらいかなぁと感じてる。

プライベート

子どもが生まれた

まじで可愛い。本当に宝。産まれる前まで自分の将来ばっか考えてたけど娘が幸せならなんでもいーやって感じになった。さっき虚無感を感じるって書いたけど、娘が幸せならそんなもん我慢して仕事する。

引っ越した

1LDKに住んでいたけど、家族が増えるを機に3LDKに引っ越し。3人でも広すぎるぐらいだけど、家はデカイに越したことないなと思った。

ライターの記事を読むようになった

はてブなど技術系の記事ばっか読んでいたけど、ライターが書いた記事を読むようになった。これは洋楽のバズマーケティングによる時代の傾向を考察した記事になるが、数万文字を超える大作にもかかわらず、すぐ読めてしまった。

これもめちゃくちゃ面白かった

最近小説読んでなかったから忘れてたけど、やっぱはてブとかQuitaは素人なんだなぁと感じた。

車好きになった

年々好きになっててウケる。働くモチベはここもデカイ。今年は絶対ベンツ買ってやる

洋楽は少しだけ

浜崎あゆみとOfficial髭団dismにハマって洋楽は少しだけ聞いた。最近は曲を追加した瞬間に記事が書いてもらえるのであまり情報を仕入れてない。今年一番ハマった曲はこれ

生活が豊かになるアイテムを揃えた

まずは食洗機

原チャ

あとはダイニングテーブルとかソファとか。新婚とはまた違う、大人になった感ヤバい

健康

太りすぎた

いよいよヤバくなってきた。腹出てるどころじゃない。今年は痩せる

ヘルニアになった

太りすぎたせい。なんにもいいことない

睡眠時間減った

定時に帰れてるのに睡眠時間少ない。これは直さないと

入院した

ぶっ倒れた。二週間ぐらい入院した。これを機に完全に健康を意識した生活を始めた。

タバコをやめた

入院して吸えなかったことをいいことにタバコを完全にやめた。めっちゃ吸ってたのにもう二ヶ月も吸ってない。

総括

正直、娘が生まれたこと以外は心技体すべて消耗した年だった。ただ、このつらい経験を踏まえて新しい環境に身を置くことが出来たので去年より悪いことはないだろう。もう12年も吸ってたタバコをやめて、体調もすこぶる良いし健康を意識した生活も出来るだろう。フリーランスになって2年目で辛い状況になったが、不況になったらこんなもんじゃないだろう。今年はとにかく真面目に誠実に生きていくことを目標にしよう。

NuxtJS勉強用にプロフィールサイトを作ってみてる

NuxtJS Vue

次の案件でNuxtJSを使うためプロフィールサイトを作りました（まだ途中）
チュートリアルを一通り終えて、なんとなく理解したものの消化不良感が否めなかったので、フロント、サーバー間を通じて一つのサイトを作れば、それなりの力がつくはずなのでこの冬休みになんとか完成形まで持っていければと思ってます。

早速ですが、作ったサイトはこれです（まだ途中（２度目））。

festive-yonath-a04e1e.netlify.com

必須条件を決める

ただのプロフィールサイトを作っても、ペライチのHTMLで作れてしまうので必須条件を決めました。

フロント、サーバー間で通信する
これがないと基本的なサービスは作れないと思います。なのでmockサーバーをherokuで立てました。私は.net coreが好き（というか他知らない）なので、.net coreをdockerコンテナ化してherokuで運用しています。herokuはクレジットカードを登録すると1000 時間使えますのでmockとしては十分でしょう。こんな感じで作りました。

$curl https://isaito-mock.herokuapp.com/api/profile/socials | python -mjson.tool
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   702    0   702    0     0    981      0 --:--:-- --:--:-- --:--:--   981
[
    {
        "fontawesome": {
            "iconName": "fa-github",
            "name": "github",
            "prefix": "fab"
        },
        "id": 5,
        "name": "Github",
        "url": "https://github.com/ikuosaito1989"
    },
...
]

Vuexを使う
フロントエンドではディファクトスタンダードになってきたFluxアーキテクチャを使います。Flux知らないときついですが、慣れてしまえばちょっと書く行数が多くなるぐらいの感覚になるので慣れるまでやりましょう。Angularでガッツリngrxやってたので苦戦しなかったけど、名前が違ったので戸惑った。

テストカバレッジ100%は絶対
f:id:tekitoumemo:20200102222655p:plain
実務でテストは書くと思うので、思い切ってカバレッジ100%にしましょう。フレームワークはJestを使いました。AngularではJasmineを使っていて、同じくカバレッジ100%にしていたのですがtemplateのカバレッジまでチェック出来なかった（できるかもしれないけど）のでJestめんどくせぇなすごいな、って思いました。

Storybookもちゃんと作る
Storybookもちゃんと作りました。
quirky-hoover-d5f9da.netlify.com
これもめんどいのですが、デザイナと連携することを意識して作っています。knobsはpropsをそのまま入力できるようにするだけだとほかの人が直感的にわかりづらいので、誰でも使えるようにしています。例えば、アイコンであれば「Twitter」を選択するとTwitterのアイコンが出るようにするとか（fontawesomeのclassとか普通知らないしね）Storybookに苦戦すると「なんでこんなことで消耗しなきゃいけんの？」ってなる

ツール系は一通り入れる
ESLint、Stylelint、Prettierを一通り入れました。ここらへんは絶対入れるべきですが、入れてない現場とかいくとストレスがたまるだけなのでまぁとりあえずって感じで入れました。

拡張機能も一通り入れる
エディタはvscodeを使っているのですが、拡張機能は必ず入れましょう。「vue vscode」とか調べるといっぱい出てくるので同じ様に入れとけば間違えないっす。vuex使うならVueJs devtoolは絶対に入れましょう。

お金は一切かけない
github pagesとかherokuとかフロントなら無料で出来ることが多いので、プロフィールサイト程度はお金をかけないようにしました。ネットのエンジニアはgithub pagesが多いですが、netlifyにしました（使ってみたかっただけ）サーバ側もherokuのdynoで20分に１回アクセスしてスリープさせないようにしてます。

あとはゆっくり開発

なんだかんだ去年のクリスマスあたりから１日１時間ぐらいやってますが、あと１週間ぐらいかかりそう。気にしない、どうせ勉強だし。こういうサイト作るあるあるで、大抵cssで消耗するので苦手な人はやらない方が良いかも、レスポンシブにしないとかっこ悪すぎるし。

やってみて

かなり理解が深まった。新しい職場での恐怖心がほとんどなくなった。Angular、Reactは使っていたけどVueは尖っていないというか一番わかりやすい。AngularはObservableがまじむずいし、Reactはjsxが気持ち悪い。AngularはフルスタックでNuxtJSみたいなフレームワークがない？ので「newしてcomponent、serviceどーん！はい！作って！！DI！Module！」って感じなので設計から考えるのが難しかったな。微妙なangularのasync pipeやReact.Fragmentなどvueだとそこらへんの不満がないので「vue最高！」ってなりそうだったけど、まだAngularが好きかなぁ。

車買い替えたいから候補を挙げてく

独り言 車

完全自己満日記。次の車検までに車を買い替えたい。

今乗ってる車

ホンダ フィット Ｇ・スマートセレクション

多分今なら50あれば上等なやつ買える。18からずっと実家の車乗ってて一人暮らししたときの不便に耐えきれず、ふらっと寄った中古車屋でノリで買ってしまった車。当時ハマってたボードも乗るし、なんなら車中泊も出来ると言われ購入。wikiに書いてある車の定義で考えると完璧な車（以下参照）

荷物や人を運べるようにした道具

車体安い、燃費平均16L、五人乗り、車内広い、運転しやすい、パーツ安いとコスパ最強な車。金掛けても田舎のヤンキーみたいな車になって金掛けたくない面白くない車。しかも壊れない壊れない。つまんね。

車好きとしては、これに乗ってられないので次はちゃんとした車に乗ろうと決意したので、候補を挙げてく。ただ、子どもいるし五人は乗れないとダメ+高い車はコスパ悪くて嫌いなのでノリで買える車に限定する。僕は自分で車検行くので攻めた車でもおけ。

5位 日産ムラーノ 初代


SUV好きじゃないんだけど丸っこい感じが好き。ちょうど免許取りたてのときによく走ってて好きだった。未だにカッコいいと思えるからやっぱりデザイン良かったなぁ。２代目になってお決まりの日産顔になっちゃったのが残念。まぁ、80あればそこそこなものを買える。

4位 スバル インプレッサ G4 初代


ハッチバックが好きじゃなくてセダンのスポーツ感が出るのが好き。カスタムするのが楽しそう。安定のインプだから外れがない無難な車な気がする。値段も120ぐらいあればまぁ買えそう。

3位 日産スカイライン


2010年ぐらいのやつ。カッコいいし、カスタムしても楽しそうだし、乗り心地が良いよね。なんとなくスカイラインは赤ってイメージ。クラウンより手頃なのが多くてラグジュアリー感味わえるからいいなと。100前後で結構ゴロゴロあるイメージ。

2位 BMW 3シリーズ


やっぱりいい。バケットシートっぽいところからスポーツ走行するために前後重量配分が50:50になっていて乗って楽しい、見て楽しい車だと思う。一歩間違うとDQNになるけど、安定していいなー。型落ち中古だと100前後で買える。もうちょい出せるなら5シリーズがいいかも。電子制御サスとかいろいろやりすぎ感が出てて最高だった。

1位 メルセデスベンツ Cクラス


ベンツとか全然好きじゃなかったんだけど、乗ったら一気に変わった。ベンツは腐ってもベンツ。スポーツ走行って感じではないけど、1.8Lのスーチャかターボで俺みたいなあまり詳しくないやつでも問題なしで、見た目も乗り心地も申し分なし。ベンツのプレスラインは本当に綺麗。ボンネット内も綺麗に塗装してあって、丁寧な車だなぁと感じる。100前後あれば買える。後期のフォグがカッコいい。ミラーのウィンカーもカッコいい。クラウンとかホンダレジェンドとか比べてやっぱ全然違う。最高アンド最高。

番外編

アウトランダー
三菱の車って純正でいろいろついてるイメージでコスパ良さそう。ランエボ作ってるとこはいい車作りそうって言う勝手なイメージ。

レクサス IS
安定。BM、ベンツと比べるとちょい高め。これなら外車でよくねって感じちゃう。

スズキ キザシ
ギャグ車。パトカーしか見たことねぇ、激レア車。マニアック過ぎて逆にあり。

ベンツ最高過ぎて二回見に行ったからほぼ濃厚な気がしてきた