教えちゃお
※この記事は『のどごしZERO』を飲んで書かれた。
次は何を勉強しようかと同僚に相談したらサーバ立てろと言われたのでラズパイでサーバ立ててる。と言ってもネットの契約上グローバルIPを割り当てられていないので、外からアクセスできるサーバは立てられない。せいぜい定期的にどこかに情報を送るとか、ローカルのファイルサーバとかそのくらいだろう。
秋葉原でラズパイを買ってきた。が、まだ起動してない。書いてあるとおりにやっているのにssh接続が全く通らない。wifiの機械的故障を疑っている。
そもそも学習用のくせにOSのプリインストールがないのはどうなんだ。絶対OS入れる段階で3割くらい脱落してるぞ。
なんて書きながら適当に電源抜き差ししてたら通った。なんじゃこりゃ。
※この記事は『のどごしZERO』を飲んで書かれた。
↑所詮発泡酒だが『ぐい麦』に比べればはるかにマシ。甘い香りがある。
Ubuntuでマウスやらキーボードやらを使うときはlibinputとかevdevがドライバとして動いている。それを消すとどうなるかというと、マウスもキーボードも使えないのでログイン画面で詰む。
発端はマウスの不調（体感）だ。カーソルが跳ねたり動きが鈍かったりということがなんとなく増えた気がしていたが、たまに起きるだけだから測定も原因特定もできずにいた。でも何か対策っぽいことをせずにはいられずにドライバ周りをいじっているうちにうっかりevdevを消したままrebootをかけてしまったらログインできなくて詰んだ。
sshでコマンドを実行できないかとか、リカバリーモードなら起動できないかとかいろいろ案はあったが、どれも成功せず（sshはsshdがないからだがなぜリカバリーモードに入れないのか）結局SSDをバックアップしたうえでUbuntu18.04を再インストールした。
一応バックアップはしたが設定は自力で再調整するのが楽しいし、作業用の環境なんかはほとんどクラウドにあるので何も輸送する必要はないかもしれない。いい時代だ。
dアニメストアのプレイヤーはこんな感じで、左下の30秒巻き戻り・30秒早送りボタンにカーソルを乗せると下の図のように10秒か30秒を選べるボックスがポップアップする。
このボックスの当たり判定は下図の緑色の領域であり、困ったことに見た目よりかなり大きい。このポップアップが表示されている間は緑色で囲まれた領域のシークバーをクリックすることはできない。また、カーソルが緑色の領域の外に出ない限りこのポップアップは消えない。
この性質は30秒早送りボタン、音量調節ボタン、設定ボタンの全てに共通している。するとどのような問題が起きるか。
シークしたいときにカーソルをシークバーに乗せようとするのだが、シークバーの当たり判定は非常に細い（下図参照）ので間違ってその下にあるボタンにカーソルを乗せてしまう。
動画にすると以下のようなイライラが発生する。
Netflixにも同じ問題がある。ただし以下の違いによって体験はそれほど悪くない。
AmazonプライムビデオはUIデザインが違うのでこの問題はない。再生エリアの上でマウスを動かすと下図のようにコントロールが画面に重なって表示される。展開を必要とするコントロールは右上にまとめられ、クリックしないと開かない。
操作性は悪くないのだが再生中の動画の上にコントロールが重なって表示されることには賛否があるだろう。僕は嫌いだ。
いずれもコントロールはクリックしないと展開されないようになっている。
※この記事は『BREWDOG INDIE』を飲んで書かれた。
最近はお金のことばかり考えている。どのような税金が引かれているのか、確定拠出年金はやるべきか、学生納付特例で払わなかった年金は追納すべきか、貯金は普通預金か投資信託か。正しい戦略を立てないとこれからの人生で大きなロスをしてしまうという危機感がある。
なおこの記事やリンク先の記事の正しさは保証しない。その能力が僕にないので。
やる。今年は様子見で小さい額にしたが、来年からはできる最大額を突っ込むつもりだ。自分で運用するのと大きく違うのは節税効果であり、確定拠出年金への拠出は所得控除の対象となり課税されない（所得税・住民税）。拠出した額の3割くらいの節税になる。
やらない。年金制度が現状維持すると仮定してもそれほどインパクトのあるメリットは出てこないし、現状維持できるとも思えない。
あてにしちゃダメって言われても年金天引きされてるんですが…
以下参考。お金の話ではポジショントークではない文章を探す方が難しく信頼性の低い記事だが、知識のない僕が自分で考えるよりはマシだった。
運用は投資信託を考えているが、これは長期的にやるものであっていつでも引き出して生活資金に充てられるものではない。調べていくうちに生活防衛資金という言葉を知った。とりあえず貯金用の普通預金口座（元本割れがなくいつでも引き出せることが重要）を作り、そこに月収の６ヶ月分の貯金を作れたら余剰金で投資信託を始めようと思う。６ヶ月分というのは感覚で決めたが、歳を取って健康のリスクが増大したら増やす必要があるだろう。
Dota2の情報サイトにOPENDOTAというのがある。オープンソースだ。そこに日本語訳の不十分な箇所や間違っている箇所があったのでプルリクエストを送ったところ、すんなりマージされた。日本語話者にとって翻訳の修正というのは最も手っ取り早くOSSに貢献できる方法だろう。機能面でも改善できる箇所があるのでこの調子でやっていきたい。
普通のソース焼きそばに飽きてきたのでオイスターソース焼きそばを作ろうと思ってツイートしたら、ゆーちきプロから怪文書が送られてきた。
オイスターソース <: ソース
--------------------------------------------
オイスターソースやきそば <: ソースやきそば— ゆーちき (@yuchiki1000yen) May 12, 2019
これはプログラミングにおける共変という概念だ。「A <: B」はAがBを継承していることを表す。大雑把に言えばAの代わりにBを使えるという意味だ（実際はこの文脈ではオイスターソースはソースの下位分類ではないが、それは忘れよう）。横棒は上ならば下という前提条件を表す。
さて、上記ツイートは妥当だろうか。つまりソースの種類と、それを使った焼きそばは共変だろうか。（なんでもいいから）ソースを求められた場面でオイスターソースを使うことはできる。何でもいいからソースがかかった焼きそばを出せと言われたときにオイスターソース焼きそばを出してもまあいいだろう。だから共変。
反変という概念もある。オイスターソースがソースを継承しているという前提条件はそのままに、オイスターソース舐め妖怪とソース舐め妖怪の関係を考えてみる。
このとき、どちらがどちらの代わりになれるだろうか。もちろん「ソース舐め妖怪がオイスターソース舐め妖怪の代わりになれる」が正しい。つまりソース舐め妖怪はオイスターソース舐め妖怪を継承している（と解釈して問題が生じない）。
オイスターソース <: ソース
---------------------------
ソース舐め妖怪 <: オイスターソース舐め妖怪前段と後段で継承関係が入れ替わるのだ。
本質はなにか。オイスターソース焼きそばは客にソースの情報を提供する側だが、オイスターソース舐め妖怪はソースの情報を受け取る側。たぶんそういうことだと思う。具体例をつかってイメージするのは大事。
今日の日記長すぎない？
明日が初任給だ。まだ年金も健康保険料も住民税も引かれないので額が大きい。考えたら憂鬱になってきた。とは言っても既に健康保険の恩恵はたっぷり受けている。給料を増やすためにスキルアップするか、資本家になるか、革命を起こすか、どれがいいか考えている。
今日も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の値を取得する方法が紹介されているが、これによって何を解決しているのだろうか。
※この記事は『Asahi 極上<キレ味>』を飲んで書かれた。
強い意思があったわけではないが、今日は夕方に買い物に行った以外は家にいた。
以前からやりたいと思っていた@kfurumiyaさんの『正真正銘のReactだけの不純物なしでReact入門』をやった。「不純物なし」というのは意外と厄介で、複雑な状態管理はReduxでやるのが普通なのに対して、このチュートリアルではReactの新しい機能であるHooksを使っている。
Reactは形作りが面倒だが、そこに当てはめていくことで巨大なアプリでも比較的小さい負担で作れるというのがこれまでの認識だった。しかしReactの真価である差分検知システムを効率的に動かすためには無駄な再描画をさせないための工夫が必要らしい。慣れればこれも流れ作業のように書けるのかもしれないが、現時点では難しそうだ。
チュートリアルに沿ってひとりツイッターを作ったあと、本家に近づけるために
の3つの機能を追加してみた。見た感じでは正しく動いている。今後はnodeでなんかいい感じにコンパイルする、テストを書く、Ajax通信するなどをやってみたい。
関連企業に勤めている先輩とご飯に行ってきた（ごちそうになった）。かねてから色々と相談に乗ってもらっており、会社員として無事にスタートを切った姿を見せることができて嬉しい。
入社直後で意識が高まっているので、以前中途半端に勉強してやめたScalaを触っている。具体的にはAkka HTTPで軽めのwebアプリを作ろうとしている。日本語の情報が少ないのは困難だが、Rails（！）のチュートリアルを見て自分の知りたいことを英語で何というのか調べて、それからドキュメントに検索をかけている。
僕は徳が低い男だ。すぐ怒り、間違いを認めず、そのくせ自分のプライドが傷つけられることにばかり敏感で打たれ弱い。新しい環境でこれらの欠点を自覚することが多く嫌になる。だが、道理とは関係なく自分を強く見せて社会的に優位に立とうとするのは、サルとしては自然な行動だ。つまりこういう心のはたらきをなくすことは難しい。人間社会はヒトに厳しいのだ。どうしてこうなってしまったのやら。