2020年今年買ってよかったもの

今年はテレワークが始まって家から出ないで1日パソコンし続けることが多かったので,
気になってた HHKB を買ってみようと思い,初めての HHKB を購入。
www.pfu.fujitsu.com

最初は US キー配列と Fn を使ったキー操作に慣れず,しっくりきてませんでした。二週間ぐらい使い続けてからようやっと馴染んできた感じです。
もともと買うと思った理由が,10年ぐらいはてブ読んでた中で,一部の変なおじさんが持ってるやつっていうイメージで気になってたのが一つと,
「矢印キーを操作しようとする際に一々右手を移動して,戻す場合にホームポジションを確認する」のが面倒だったから,という感じです。
前者は別として,後者の移動に関しては移動量が減って個人的には楽で,次にキーボードを買うとしたら同じようなのが欲しいかな,と思うようになってます。

次は一人暮らしで机がない状態で,ずっとこたつでパソコンしてたら姿勢がしんどくなったので,机と椅子をサンワサプライで購入しました。
direct.sanwa.co.jp direct.sanwa.co.jp

机は特にこだわりはないけどある程度の幅が欲しいというので幅120cm,あとはモニターアームにも興味あったので,念の為対応を謳ってるのが欲しいと思って決めました。 実際サイズとしては余裕がある大きさだったのでこれで正解でした。

その次はモニターアームを買おうと思い,買った上でやってみたかったのが画面を縦にすることでした。
もともと24インチのモニターを2枚使用していたので,回転ができそうなものとして以下のものを購入。 www.green-house.co.jp

結果としてディスプレイを横縦配置で常用してます。 縦にすることでリファレンスが読みやすかったり,Chrome の開発ツールを下部に表示しても楽だったり,ちょっと楽という感じです。

あとは年末に気になってて勢いで買った ERGO M575 www.logicool.co.jp

トラックボール自体初めてだったので慣れるか若干不安でしたが,親指で操作できるのは結構楽かもしれません。
使用環境が Mac なので Bluetooth で使用できるのが条件だったので丁度いいタイミングでした。
使用した最初の頃は混線してるのか,カーソルが飛んだりしていましたが Unifying レシーバーを試したりしたところ,今のところ違和感なく利用できてます。
マウスと比べて一部使いづらいところは,項目を選択する際の若干ずらす操作がトラックボールだと難しく,そういうものなのかと割り切って使ってます。

他には Raspberry Pi 4 を買って実験マシンとして眠ってるのと,iPhone 7 から iPhone 12 Pro に買い替えたぐらいですかね。
それと,今まで iPad mini 4 を使ってたのですが,色々電子書籍で技術書を買うとパソコンで見ればいいのもあるのですが,mini で見ると小さくて,やっぱり大きい方がいいと思って iPad 8 を購入したぐらいです。

お題「#買って良かった2020

Promise.all について使い方のメモ

tl;dr;

複数の Promise を使用するときは Promise.all で解決すると待たなくて済む


事の発端として,複数の http リクエストを送る場合に,前のリクエストが完了するまで処理が進まなかった。 どうやったら前処理を待たずに擬似マルチで処理ができるのかなと思って手を動かして納得できたのでメモ。

検証準備

Promise を複数使用して試したい場合は単純に

new Promise(setTimeout(() => {}), 1000)

とかで十分検証できるとは思うけど,ちょっと味気ないので (勉強も兼ねて) 適当な express サーバーを立てて検証

サーバー側

ルートに対して timeout のクエリを指定すると,指定秒数待機してからレスポンスを返す簡単なサーバーを立てます。

import express from 'express'

const app = express()
const port = 3000

app.get('/', (req, res) => {
  const log = (type: string, time: number) => {
    console.log(`${Date()}: ${type} - ${time}`)
  }

  const timeout: number = parseInt(req.query.timeout as string)
  log('Request', timeout)

  setTimeout(() => {
    res.send(`waited ${timeout}`)
    log('Response', timeout)
  }, timeout * 1000 || 0)
})

app.listen(port, () => {
  console.log('start server')
})

クライアント側

import axios from 'axios'
import assert from 'assert'

axios.defaults.baseURL = 'http://localhost:3000'

const request = async (time: number) => {
  console.log(`timeout: ${time}`)
  assert.strictEqual(
    (await axios.get('/', { params: { timeout: time } })).data,
    `waited ${time}`
  )
}

axios で GET リクエストを送って,念の為 assert でチェックします。


単純に await を並べて書くと以下のような結果になります。

// Case A
const caseA = async () => {
  console.time('request')
  console.log('start')

  await request(3)
  await request(5)

  console.log('done')
  console.timeEnd('request')
}
start
timeout: 3
timeout: 5
done
request: 8.025s

これでは前のリクエストが完了するまで次の処理に進めないため時間がかかってしまいます。

次は Promise.all で解決する場合。

// Case B
const caseB = async () => {
  console.time('request')
  console.log('start')

  await Promise.all([request(3), request(5)])

  console.log('done')
  console.timeEnd('request')
}
start
timeout: 3
timeout: 5
done
request: 5.016s

以上のように待たずに同時に処理を開始することができました。

今回の検証では全てのリクエストに成功していましたが,一部で失敗してしまうと,reject を返してしまうそうです (まだ追えてないので後で調べる)。

Promise.all()#Promise.allのフェイルファストの挙動

メモ: shallowMount したコンポーネントから emit イベントを発火させる

単純に vm.$event を叩いてイベント発火させればいいだけだったけど,気付いてメモしておきたかったのでメモ


<template>
  <div>
    <some-component
      @input="$emit('input', 'Bye Friend!')"
      @calculate="calculate"
    />
  </div>
</template>

<script>
import Vue from 'vue'

Vue.component('SomeComponent', {
  render(h) {
    return h('div')
  }
})

export default {
  data() {
    return {
      result: 12
    }
  },
  methods: {
    calculate() {
      this.result = 4 * 4
    }
  }
}
</script>
import Child from '@/components/Child'
import { shallowMount } from '@vue/test-utils'

test('emit from stubbed-component', () => {
  const wrapper = shallowMount(Child)

  const someComponent = wrapper.find('some-component-stub')
  someComponent.vm.$emit('input', 'Hi Friend!')
  expect(wrapper.emitted().input[0]).toStrictEqual(['Bye Friend!'])

  someComponent.vm.$emit('calculate')
  // expect(wrapper.vm.$data.result).toBe(12)
  expect(wrapper.vm.$data.result).toBe(16)
})