JavaScriptのbindとは何なのか

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>

厳密な話を知りたい人はこの辺読んでください。アロー関数の話もしたいね。

第2の料理/ReactのsetStateがワカラナイ

※この記事は『Asahi 極上<キレ味>』を飲んで書かれた。

↑キレ味ってなんだ…?

昨日なんとなく焼きそばに飽きたので今日は鮭の炊き込みご飯を作った。これも僕のレパートリーの1つだが、ご飯を炊くのは時間がかかるので敬遠していた。

作り方はかんたんで、ご飯を炊くときに醤油・鮭・えのき・鮭を一緒に入れるだけだ。こだわるなら昆布も。炊き上がるころには部屋が醤油のいい香りに包まれている。

今日もReactのドキュメントを読んでいた。だいたい理解しながら読み進んでいるが、やはりReactがパフォーマンスを出すために中でゴニョゴニョやっていることを理解するのが難しい。たとえばここ。再描画の回数を減らすためにsetStateは即時に実行されないことがあるという。しかし例示されているコードでどのような不具合が起きる可能性があるのか、failの一言だけではよくわからない。

Because this.props and this.state may 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の値を取得する方法が紹介されているが、これによって何を解決しているのだろうか。

だいたい家にいた/ナウいReact

※この記事は『Asahi 極上<キレ味>』を飲んで書かれた。

強い意思があったわけではないが、今日は夕方に買い物に行った以外は家にいた。

以前からやりたいと思っていた‎@kfurumiyaさんの『正真正銘のReactだけの不純物なしでReact入門』をやった。「不純物なし」というのは意外と厄介で、複雑な状態管理はReduxでやるのが普通なのに対して、このチュートリアルではReactの新しい機能であるHooksを使っている。

Reactは形作りが面倒だが、そこに当てはめていくことで巨大なアプリでも比較的小さい負担で作れるというのがこれまでの認識だった。しかしReactの真価である差分検知システムを効率的に動かすためには無駄な再描画をさせないための工夫が必要らしい。慣れればこれも流れ作業のように書けるのかもしれないが、現時点では難しそうだ。

チュートリアルに沿ってひとりツイッターを作ったあと、本家に近づけるために

  • 空白の投稿はできない
  • 投稿したら入力欄が空白になる
  • 削除できる

の3つの機能を追加してみた。見た感じでは正しく動いている。今後はnodeでなんかいい感じにコンパイルする、テストを書く、Ajax通信するなどをやってみたい。

先輩の金で豚みそ漬けを食べた/Akka HTTP/徳が低い

関連企業に勤めている先輩とご飯に行ってきた(ごちそうになった)。かねてから色々と相談に乗ってもらっており、会社員として無事にスタートを切った姿を見せることができて嬉しい。

入社直後で意識が高まっているので、以前中途半端に勉強してやめたScalaを触っている。具体的にはAkka HTTPで軽めのwebアプリを作ろうとしている。日本語の情報が少ないのは困難だが、Rails(!)のチュートリアルを見て自分の知りたいことを英語で何というのか調べて、それからドキュメントに検索をかけている。

僕は徳が低い男だ。すぐ怒り、間違いを認めず、そのくせ自分のプライドが傷つけられることにばかり敏感で打たれ弱い。新しい環境でこれらの欠点を自覚することが多く嫌になる。だが、道理とは関係なく自分を強く見せて社会的に優位に立とうとするのは、サルとしては自然な行動だ。つまりこういう心のはたらきをなくすことは難しい。人間社会はヒトに厳しいのだ。どうしてこうなってしまったのやら。

住環境に投資する価値を知った

※この記事は『麦とホップ』を飲んで書かれた。

家賃が2倍ほどの家に越してきて1日生活したが、素晴らしい。優れた家の構造はアプリケーション開発に似ている。その心は疎結合だ。

以前住んでいた家は大きめの収納スペースが1箇所あった。これは全ての収納を集約できるというメリットに見えるが、実際は違う。1箇所に収納するモノが増えるほどそこから望みのモノを出し入れする手間は増大する。つまり収納は分散していたほうがいい。

今の家は台所にも洗面所にもそれぞれに収納がある。これがどれほど効果的なのか今日知った。台所で使うものは台所に、洗面所で使うものは洗面所に収納しておくことで探索効率が向上し、さらにモノを持って部屋の間を移動する必要がなくなる。モノを出し入れするコストが低減することでモノを使ってその部屋を手入れすることも簡単になる。台所のことは台所で完結するようになる。モノの場所が複雑に入り組んで生活が崩壊するということがない。

高い家は相応に良い。高い家に住み続けたいし、そうなると借家暮らしよりも持ち家の方が効率的になるかもしれない。

処分

成り行きで学科のPCの処分作業を手伝った。意外とヤバい情報が入っていたのでしっかりと消してから捨てたかったのだが、それが難しかった。Windowsの不自由なPCはOSが入っているドライブのフォーマットができないし、コマンドプロンプトで全消去のコマンドを実行してもOSは無視される。傲慢なWindowsは自らが消去されるべき状況などあるはずがないと考えているのだ。

1台だけUbuntuがあり、念願だったsudo rm -rf / --no-preserve-rootを実行する機会に恵まれた。実際にはなんでも消えるわけではなく、/proc(プロセス?)や/devは消えない。しばらく待つとデスクトップやメニューバーのアイコンが消えていき、おそらくrmコマンドすら消去されて処理が停止する。Ctrl+Cで止めてターミナルにいろいろ打ち込んでみたが、lsbashrebootCommand not foundとなった。

念には念を入れ、電動ドリルでHDDに穴を開けた。弊学科に工作室があり、そこに旋盤やらドリルやらがあることを修了直前に知った。研究というのは同じことをやっているのが世界で数人ということも珍しくなく、デバイスを自作する必要に迫られることがある。僕のArduinoによる圧力センサなどかわいいものだ。

作業の報酬としてプレミアムモルツをもらった。パソコンチョットデキルアピールはしておくものだ。

Mastodon諦めました/Spotify諦めました

今日はコンピュータに嫌われた一日だった。悲しい。

Mastodon

再びマストドン立てようと思ったんだがメールが送れないのと他インスタンスとの通信ができないトラブルを解決できず諦めた。どちらも初めて出くわした。

前者は名前解決なんちゃらのエラー、後者はどうやらSSLと関係があるようだったが僕の知識では理解できなかった。そもそもMastodonは恐ろしく複雑だ。使いやすくする努力はされているが少しでも不具合が起きるとそれを解決するためにはとんでもない知識と労力が必要になる。

Spotify

Spotifyでローカルの音楽ファイルを再生したかったのだが、mp3にしか対応していなかった。そこで急遽音楽フォルダ内を全部掘ってmp3じゃないファイルをmp3に変えるスクリプトを書いた。

しかしそうして生成したファイルをSpotifyで再生しようとすると、再生ボタンを押した瞬間にSpotifyアプリが終了する。ターミナルからアプリを開いているとログが残るが、終了時に表示されるのはこれだ。

[0228/053947.271857:ERROR:input_method_base.cc(146)] Not implemented reached in virtual ui::InputMethodKeyboardController *ui::InputMethodBase::GetInputMethodKeyboardController()Using InputMethodKeyboardControllerStub
Segmentation fault (コアダンプ)

うーん。軽く調べてみるとChromiumのバグの疑いが強く、2018年11月辺りに報告が頻発している。しかしローカルの曲を再生するときだけこうなるのでSpotify側にも問題がありそうだ。

Mastodon再び

ツイッターポリシーのアレでまたMastodonが注目されていたので今度はシングルユーザーで立てようと思ったが、立たない。難しい。Docker用のDocumentがなくなっている。

怪異・妖怪ゼロ食い/fish!!

学部生の授業のために作ったプログラムがどうもおかしいという話なので報告をよーく読んでみたら、0から始まる数列をExcelで読んだときに数値扱いされて左端の0が「食われる」という事件だったようだ。キレそう。Excelを許すな(俺が悪い)。なお検証の過程でJestの使い方を覚えた。でもCDNからモジュールをインポートしていることをJestが気づいてくれなくてエラーが出まくってやっぱりキレそう。

自宅のPCのシェルをfishに変えた。昆虫なので色がきれいなのは好き。欠点はググラビリティ。

TikTokはマジでヤバい

※この記事は『麦とホップ』を飲んで振り回して動画を撮影したあと書かれた。

若い人の流行りの勉強の一環としてTikTokを触ってみた。このアプリはコンテンツの消費と生産の両方をものすごいスピードで加速させる仕組みが備わっている。触ってみてこれまでの「何者にもなれない人間がプリセットに従ってアイドル体験するアプリ」という印象は吹き飛んだ。これはYouTubeのCMも悪いだろうが。

まずひたすら上げられている動画を見ていった。ホーム画面ではスマホの縦画面をフルに使って動画が表示される。これは僕の自分の動画だが、基本的にはレコメンド動画のようだ。大胆に動画の上にUIをオーバーレイ表示していくスタイルはニコニコの遺伝子を感じないでもない。各動画ではLikeと投稿者のフォローが可能だ。おそらくレコメンドにも影響している。

動画の長さの上限は15秒らしい。CM1本分で非常に短い。動画を見終わるか興味がなかったら画面を上にスワイプすると下から次の動画が出てくる。体感できるロード時間はない。即座に次の動画の再生が始まる。動画が短く、次の動画に移動するまでのタイムラグもないので結果としてものすごい数の動画を次々と見ることになる。ここでもうひとつすごいのは、レコメンドで出せるレベルのハイレベルな動画が全く尽きないことだ。純粋なコンテンツ量でも相当すごいのではないか。

ここまでの説明では、なんらかの方法によって大量生産された上質なコンテンツをひたすら消費し続けるアプリに見えてしまうだろう。しかしそれはTikTokの一面でしかない。動画撮影・編集機能も圧倒的だ。まずBGMとして多くの曲、それも最新の曲の中から好きなものを選べる(どうもワーナーと契約しているらしい)。それを聞きながら動画を撮影したら今度は編集だ。編集画面もスマホ向けに洗練されており、動画の時間的編集やエフェクト操作などが効率的に行える(複数のエフェクトが同時に適用できないなど制約はある)。これは触ってみてくれとしか言えない。

TikTokで人気のある動画は2種類。ひとつは単純に出演者がすごいもの。ダンスやスポーツ、歌などはこちらに分類される。YouTubeでもどこでもウケるタイプだ。もうひとつは編集が上手いもの。誰でもTikTokの機能に習熟すれば高いレベルの動画が作れるようになる。結局あちこちで聞く宣伝文句と同じことを言っていて自分でも困っているのだが、「誰でもレベルの高い動画が作れる」というのは「誰でもレベルの高い自己表現ができる」という意味であって「誰でも同じような動画になる」という意味ではない。

冗談抜きで5年後のコンテンツ業界にはTikTokで動画編集のイロハを学んだ世代が猛烈な殴り込みをかけてくるだろう。編集の技術が評価されるというのはニコニコのMAD文化と共通している。ニコニコが育んだ「誰でもクリエイターになれる」という夢を継承してブラッシュアップしたのがTikTokなのだと感じた。これは恐ろしいアプリだ。