私が歌川です

@utgwkk が書いている

ペアプロ活動パターン

仕事でよくペアプロでコードを書くのですが、気をつけていることがいくつかあるので共有します。みなさまは何に気をつけていますか?

考えていることを声に出す

  • やりたいことが実現できずに詰まっていると黙りがち
    • どうやったらいいか分からず困っている・違う結果になる、みたいなのを口に出す
    • ペアの人が解決方法を知っているかもしれない
    • クマさんデバッグみたいな効果もありそう
      • ところで「クマさんデバッグ」って一般に通じる言葉なんですか?
  • 書いているコードの自己評価を行う
    • 最高のアルゴリズムになった、とか、これは一時しのぎです、みたいな
  • 認識がずれていないかの確認をする
    • 「こう思っているけどそれで合ってますか?」

こまめにcommitする

  • こまめにセーブするイメージ
  • git diffを確認したら、どこまでできているのかを見れる
  • いざとなったらgit resetで戻れる
  • ひと通りできあがってからちょっとずつcommitするよりは、こまめにcommitしたほうが、どこまでstageするのかとか考えなくて済む

エディタだけでなくブラウザの様子も見せる

  • リファレンスを参照している様子とか、やり方が分からないのでググっている様子とかも見せる
  • 知見共有みたいな側面が強い
    • こうやって調べてるのか〜みたいなのが伝わるとよさそう
    • ナビゲーターをやるときは、こういうページを参照したり検索したりしてみるといいかも、というヒントを思い付いたら伝えている
  • 映り込むとまずいタブは予め閉じておくか、ウィンドウを分けておきましょう

「クマさんデバッグ」について

ペアプロ活動パターン - 私が歌川です

くまのぬいぐるみについて <a href="https://toya.hatenablog.com/entry/2015/07/09/133609" target="_blank" rel="noopener nofollow">https://toya.hatenablog.com/entry/2015/07/09/133609</a>

2021/06/05 09:21
b.hatena.ne.jp

toya.hatenablog.com

「プログラミング作法」こんど読んでみます。

fetch APIにおけるHTTPリクエストの中断・タイムアウト

AbortControllerを使うことで実現できる。

MDNにも書いてあるけど、以下の操作でfetch APIによるHTTPリクエストを中断できる。

  1. fetch() の第2引数のオブジェクトの signal フィールドに AbortController.signal を渡す
  2. AbortController.abort() を呼ぶ

HTTPリクエストが中断されると、 fetch() が返すPromiseはrejectされる。

ユーザー操作でリクエストを中断する

MDNのサンプルコードデモを参照。

タイムアウトさせる

window.setTimeout() のコールバック関数内で AbortController.abort() を呼ぶとできる。 タイムアウトを過ぎなかったときのために window.clearTimeout() しているけど、いらないかもしれない。

const invokeAPI = async (url) => {
  const controller = new AbortController();
  const timer = window.setTimeout(() => {
    controller.abort();
  }, 1000);
  const response = await fetch(url, {
    signal: controller.signal,
  });
  window.clearTimeout(timer);
  return resp;
};

Promise.race() でタイムアウトさせる場合との違い

Promise.race()fetch() とタイムアウトさせるPromiseを並走させてもタイムアウトは実現できそうに見える。

const timeout = (msec) => {
  return new Promise((_, reject) => {
    window.setTimeout(() => reject('timeout'), msec);
  });
};

await Promise.race([fetch(...), timeout(1000)]);

たしかにタイムアウトできているように見えるけど、AbortControllerを使った場合と違ってHTTPリクエスト自体はキャンセルされない。

一方axiosでは

cancel tokenという仕組みでHTTPリクエストをキャンセルできる。また、リクエストに対してタイムアウトを設定できる

cancel tokenはcancelable PromiseというECMAScriptのproposalに基づいて実装されたらしいけど、このproposalは取り下げられた。Promiseをキャンセルしたいという欲求がありそう。

健全なる精神は、健全なる住環境に宿る

引っ越した当初から自宅に洗濯機が置いてあったのだけれど、脱水の効きが悪すぎて、洗濯物がびちょびちょな状態で出てきていた。マンションに共用のコインランドリーがあったので、自宅の洗濯機は物置代わりにしてコインランドリーを使っていたのだけれど、洗濯するために小銭を用意する必要があって面倒だった。

脱水の効きが悪いのは古い洗濯機だからか、買い替える必要があるのか……と思いながらも脱水が効きにくい原因と対策についてインターネットで調べていたら、どうやら洗濯漕クリーナーを使うとマシになる場合があるらしいと知った。こういうときは一番効きそうなやつだろう、と塩素系の洗濯漕クリーナーを買って使った。

めちゃくちゃ白い塊が浮かんでくるし、効いていてほしいな~と思いながら実際に洗濯してみると、脱水の効きが良くなっているのを実感できた。コインランドリーを使った場合と同じくらいには脱水されている。これなら買い替える必要はまだなさそうだと、ヨドバシカメラの洗濯機の商品ページを全部閉じた。

大学に進学した頃からずっと同じ部屋に住んでいて、家賃も安く部屋の質も相応という感じだった。日々の暮らしはできているけどさすがに狭いしもっといい部屋に引っ越したい、ドラム式洗濯機が置ける部屋だといいかも、しかし家賃がめっちゃ上がる……と思っていたけど、引っ越ししたさがちょっと薄れた。洗濯のために小銭をかき集めるとか、自販機でジュースを買うみたいなことを考える必要がなくなったのが大きいと思う。日々の暮らしの思考コストを下げられれば、そのぶんだけ本質的な課題に集中できると思う。しかし良い部屋への願望は尽きないであろう。

突然ですがここでグッバイ宣言を聞いてください。一日の中に、このポーズを取る時間があってもいいと思う。

www.youtube.com

JavaScriptで [0, 1, ..., N - 1] という配列を得る

小ネタです。

課題

JavaScriptで [0, 1, ..., N - 1] みたいな、要素数Nの配列が欲しくなった。本番環境に使う用のコードではなく、とりあえず開発用に動けばよい、ぐらい。

new Array(N) で長さNの配列が得られるから、mapすれば得られるはず……と思って new Array(N).map((_, i) => i) って書いたけどうまくいかなかった。得られるのは length がNの配列で、要素は詰まっていないみたいな感じ。

> new Array(10)
[ <10 empty items> ]
> new Array(10).map((_, i) => i).forEach((x, i) => console.log(i. x))
undefined

MDNを見るとそれっぽいことがそれとなく書いてあった。言われてみれば確かに、とは思うもののびっくりする。

arrayLength
Array コンストラクターに渡された唯一の引数が 0 から 232-1 の間 (両端を含む) の整数であった場合は、新しい JavaScript の配列を返し、その length プロパティがその値になります (注: これは arrayLength 個の空のスロットを持つ配列であり、実際に undefined の値が入ったスロットではありません)。この引数がそれ以外の数値であった場合は、 RangeError 例外が発生します。

developer.mozilla.org

実現方法

fillする

要素が詰まってないので詰めましょう、みたいな感じ。なんでもよいので .fill(0) とかするとタイプ数が減る。

> new Array(10).fill(0).map((_, i) => i)
[
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]

なんとしてでも要素数Nの配列を作る

mapするところは同じだけど、要素数Nの配列を作るために文字列をrepeatしてspreadする。

> [...'a'.repeat(10)].map((_, i) => i)
[
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]

Array.from を使う

Slackでこの方法を教えてもらった。fillするよりもこっちの方がもうちょっと素直そう。

> Array.from(new Array(10), (_, i) => i)
[
  0, 1, 2, 3, 4,
  5, 6, 7, 8, 9
]

developer.mozilla.org

rangeを得るメソッドのproposalがある

NumberBigInt に、範囲を表すイテレータを返すメソッドを生やすproposalがあることを教えてもらった。使い心地はちょうどPythonの range 関数みたいな感じ。polyfillもある。

github.com

[...Number.range(100)] みたいに書くと所望の配列を得られそう。

Kindleポイント半額還元キャンペーンで買った漫画

百合姫コミックス向けのキャンペーンが行われているのかと思ったけど、そういうわけではなかった。

ふたりエスケープ

顔が良い無職の先輩と漫画家の後輩が二人で現実逃避をしまくる。いきなり生ハムの原木を買ったり、〆切直前に北陸旅行に行ったりする。頑張る自分へのご褒美も、単なる逃避もある。全力で逃げるのがいい。

「白いワンピースを着た乙女」という夏の共通幻想はどこから生まれたのだろうか。

徒然日和

のんびりした日常の中に甘いひとときがある。それは子どもも大人もそうなのだろう。夏を満喫したい気がしてきた。

電車のことを汽車と呼んだことがない。

アルコール百合アンソロジー・ストロング!

ストロング缶は最近ぜんぜん飲んでない。2週間ぐらい飲酒してなくてかつてない出来事だと思う、急に個人の日記になってすいません。

ユリキュール アルコール百合アンソロジー

ストロング! に比べてマイルドかというと、必ずしもそういう話ばかりではなかった。