教えちゃお
1/3（金）
自宅の気温や湿度を表示するwebアプリをいろいろとリファクタリングしていた。APIを叩いたレスポンスには型の保証がないが、 axios.get にジェネリクスを与えておけばその型が来たという想定で書くことができていい感じだった。このコードで渡すジェネリクスを更に外から与えられるT型にしているのは、インフラ層でドメイン層で定義した型を使ってはいけないから（ホンマか？）。
moment.jsはめちゃ便利。JavaScriptの組み込みのURLオブジェクトはパスの結合が便利にできるかと思いきやそうでもない。ホストとパスの結合だけ。
12/18（水）
TypeScript+ReactのプロジェクトにESLintとprettierを入れた。ESLintのプラグインを上手く組み合わせていくテクニックが難しかった。
結論はこんな感じ。
.eslintrc.json
{
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": "tsconfig.json",
"sourceType": "module"
},
"extends": [
"plugin:@typescript-eslint/recommended",
"plugin:prettier/recommended",
"plugin:react/recommended"
]
}yarn lint で能動的にlintを実行できるようにしつつ、lint-stagedとhuskyでcommit時にも仕込んだ。
※この記事は『ほろよい もも』を飲んで書かれた。
月の始めに強い意志で（ほぼ）定時退社。制度上定時はないが自分で11時から20時を勤務時間と決めている。
いろいろな事情でSlackのワークスペースが増えてきたのでLinux用のアプリケーションをインストールしたのだが、ワークスペースにログインできずにいる。ブラウザでログインした後アプリケーションに処理が移らない。
仕事でTypeScriptをやってはいるが、趣味開発で初めて裸のtscコマンドによるコンパイルをやった。コンパイルのバージョンがどうなっているのかよくわからない。前者も後者もコンパイルは通るのに前者しか動かなかったりする。
import * as Hoge from "hoge"; import Hoge from "hoge";
完全に酒に酔って意味不明ムーブ繰り出してる。間違ってaccess tokenをpushしてしまったので定石どおりリポジトリ削除→再作成→pushをやったのだが、修正をaddしないままcommit --amendしていたので無意味だった。やり直し。
※この記事はビールを2本飲んで書かれた。
という気分になっているのだなあ。
今月末を持ちましてドワンゴを退職します。本日が最終出社日ですので、退職エントリを書きました。https://t.co/0AVDqB95lP
— Toshihiro Shimizu (@meso) 2019年6月28日
mesoさんには2017年のインターンのときに初めてお会いした。中間発表会に遅れてきたとき、席は用意してあったのに入り口の近くの床に座っていた。当時人事部長という立場にありながら偉ぶらず人を緊張させない振る舞いとしてとても印象に残った。フランクな人柄と組織の中核としての毅然とした態度の両方を尊敬している。
はてなブログに投稿しました
株式会社ドワンゴを退職します - kmizuの日記 https://t.co/OeorHfRiAm #はてなブログ— Kota Mizushima (@kmizu) 2019年6月28日
kmizuさんは新卒Scala研修の講師だった。Scalaのことなら何でも知っている。言語の第一人者から教わることで、細かな仕様にも妥当性や事情があることがわかった。動けばいいやのアマチュアではなく、隅々まで理解し尽くしたプロとしての仕事を求められることを実感した。
お二人とも新天地でのご活躍を祈っています。
くる人は誰かって？それは僕です。
dアニメストアのプレイヤーはこんな感じで、左下の30秒巻き戻り・30秒早送りボタンにカーソルを乗せると下の図のように10秒か30秒を選べるボックスがポップアップする。
このボックスの当たり判定は下図の緑色の領域であり、困ったことに見た目よりかなり大きい。このポップアップが表示されている間は緑色で囲まれた領域のシークバーをクリックすることはできない。また、カーソルが緑色の領域の外に出ない限りこのポップアップは消えない。
この性質は30秒早送りボタン、音量調節ボタン、設定ボタンの全てに共通している。するとどのような問題が起きるか。
シークしたいときにカーソルをシークバーに乗せようとするのだが、シークバーの当たり判定は非常に細い（下図参照）ので間違ってその下にあるボタンにカーソルを乗せてしまう。
動画にすると以下のようなイライラが発生する。
Netflixにも同じ問題がある。ただし以下の違いによって体験はそれほど悪くない。
AmazonプライムビデオはUIデザインが違うのでこの問題はない。再生エリアの上でマウスを動かすと下図のようにコントロールが画面に重なって表示される。展開を必要とするコントロールは右上にまとめられ、クリックしないと開かない。
操作性は悪くないのだが再生中の動画の上にコントロールが重なって表示されることには賛否があるだろう。僕は嫌いだ。
いずれもコントロールはクリックしないと展開されないようになっている。
明日が初任給だ。まだ年金も健康保険料も住民税も引かれないので額が大きい。考えたら憂鬱になってきた。とは言っても既に健康保険の恩恵はたっぷり受けている。給料を増やすためにスキルアップするか、資本家になるか、革命を起こすか、どれがいいか考えている。
今日もTodoアプリの作業を進めた。customsをlocalStorageに保存しようと思ったのだが、配列を保存しても勝手に文字列に変換されてしまっていた。文字列しか保存できないらしい。Store.jsというライブラリを使う手を教えてもらったが、ごく単純な文字列の配列を保存したいだけだったので配列を.join(',')して保存し、読み出すときに.split(',')している。
Reactはパフォーマンスのためにリストアイテムにユニークなkeyをつけるよう推奨している。困ったのでmapするときのindexをそのままkeyに放り込んだが、それでよかったのだろうか。
抜歯の跡がまだ気になって右でばかり噛んでいる。明日の午前中に歯医者に行って経過を診てもらう予定だ。食事を気にする必要はないと言われたら体に悪いラーメンでも食べに行きたい。左で噛めるようになったら次は右を抜かなきゃいけないわけだが。
しばらくReactのドキュメントを読んでいたのでそろそろ実践しようと思いTodoアプリを作り始めた。帰宅してから何をするかを整理し、実行できたかをチェックできるものにしたい。Custom欄を設け、毎日やりそうなことはCustom欄からAddAllで一括登録できるようにした。Customの内容は今はハードコーディングしているがCookieから読めるようにしたい。
環境構築にcreate-react-appを使った。デフォルトでeslintが入っていてミスや無作法を懇切丁寧に指摘してくれるし、LiveServerを起動しなくても保存するだけで変更が反映される。これがモダンな開発かと感動した。
読むのと作るのでは当然違うのでよくつまづくが、それが勉強というものだ。楽しい。
お気に入りのユーチューバーでありお笑い芸人でもあるガーリィレコードチャンネルの新作動画が面白い。リアルイベントの映像化だ。
デブ3人が面白いことをするのをガリが撮影するというのがガーリィレコードチャンネルのお決まりの流れであり、この動画は隙間を走り抜けるデブ3人をガリが判別するという遊びだ。
詳しくは自分で見てほしいが、走り抜ける3人を頑張って見て当てる（当てられないように速く走る）というルール通りに遊んでいたのは序盤だけで、中盤以降は予想もつかないルール破りがテンポよく飛び出す。そのたびに大声で笑ってしまった（感情がある）。あらかじめ枠を設定しておいて、それを飛び越えると笑いが生じるのだろう。
最近は妙に読者を意識して長いブログを書いてしまっている。時間がかかってしんどい。
Reactのドキュメントで出てきた疑問だが、ReactというよりもむしろJSの知識だ。
同期に教わってみると意外とシンプルだった。bindは何かというよりも、むしろ本当の問題は「thisとはなにか」というところにある。thisは実行時のコンテクスト[note]スコープのようなもの？難しい[/note]であって、関数を呼ぶ方法によって変化する。
class MyClass {
getX() {
return this
}
}
const myclass = new MyClass()
// クラスから呼び出すと、想定通りに動く
console.log(myclass.getX())
// MyClass{}
// 一度関数単体で取り出してしまうと、thisがなんだったか忘れてしまう
const unboundGetX = myclass.getX
console.log(unboundGetX())
// undefined
// bindを使うとthisを指定しながら関数を実行できる
const boundGetX = myclass.getX.bind(myclass)
console.log(boundGetX())
// MyClass{}筆者はPythonを先に学んでいたのでJSの上記の仕様には違和感があった。しかしPythonのクラスのメソッドは常にselfを引数に取る（必ずselfが第一引数として渡される）一方でJSはそうではない。どちらも意図的なデザインなのだろう。
class MyClass:
def getX(self):
return self
myclass = MyClass()
# クラスから呼び出すと想定通り動く
print(myclass.getX())
# <__main__.MyClass object at 0x7f2a12223588>
# 関数単体で取り出しても想定通り動く
unboundGetX = myclass.getX
print(unboundGetX())
# <__main__.MyClass object at 0x7f2a12223588>厳密な話を知りたい人はこの辺読んでください。アロー関数の話もしたいね。
※この記事は『Asahi 極上<キレ味>』を飲んで書かれた。
↑キレ味ってなんだ…？
昨日なんとなく焼きそばに飽きたので今日は鮭の炊き込みご飯を作った。これも僕のレパートリーの1つだが、ご飯を炊くのは時間がかかるので敬遠していた。
作り方はかんたんで、ご飯を炊くときに醤油・鮭・えのき・鮭を一緒に入れるだけだ。こだわるなら昆布も。炊き上がるころには部屋が醤油のいい香りに包まれている。
今日もReactのドキュメントを読んでいた。だいたい理解しながら読み進んでいるが、やはりReactがパフォーマンスを出すために中でゴニョゴニョやっていることを理解するのが難しい。たとえばここ。再描画の回数を減らすためにsetStateは即時に実行されないことがあるという。しかし例示されているコードでどのような不具合が起きる可能性があるのか、failの一言だけではよくわからない。
Because
this.propsandthis.statemay be updated asynchronously, you should not rely on their values for calculating the next state.For example, this code may fail to update the counter:
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
これの解決策としてsetStateに関数を渡すことで確実にsetStateが行われるタイミングでのpropsの値を取得する方法が紹介されているが、これによって何を解決しているのだろうか。