ReactでTodoアプリ/枠を超える笑い/日記が長い

ReactでTodoアプリ

しばらくReactのドキュメントを読んでいたのでそろそろ実践しようと思いTodoアプリを作り始めた。帰宅してから何をするかを整理し、実行できたかをチェックできるものにしたい。Custom欄を設け、毎日やりそうなことはCustom欄からAddAllで一括登録できるようにした。Customの内容は今はハードコーディングしているがCookieから読めるようにしたい。

環境構築にcreate-react-appを使った。デフォルトでeslintが入っていてミスや無作法を懇切丁寧に指摘してくれるし、LiveServerを起動しなくても保存するだけで変更が反映される。これがモダンな開発かと感動した。

読むのと作るのでは当然違うのでよくつまづくが、それが勉強というものだ。楽しい。

枠を超える笑い

お気に入りのユーチューバーでありお笑い芸人でもあるガーリィレコードチャンネルの新作動画が面白い。リアルイベントの映像化だ。

デブ3人が面白いことをするのをガリが撮影するというのがガーリィレコードチャンネルのお決まりの流れであり、この動画は隙間を走り抜けるデブ3人をガリが判別するという遊びだ。

詳しくは自分で見てほしいが、走り抜ける3人を頑張って見て当てる(当てられないように速く走る)というルール通りに遊んでいたのは序盤だけで、中盤以降は予想もつかないルール破りがテンポよく飛び出す。そのたびに大声で笑ってしまった(感情がある)。あらかじめ枠を設定しておいて、それを飛び越えると笑いが生じるのだろう。

日記が長い

最近は妙に読者を意識して長いブログを書いてしまっている。時間がかかってしんどい。

抜かれた歯の気持ち

「今日はどうせ『抜かれた歯の気持ち』とかで日記書くんだろ」と煽られて腹が立ったので、今日は『抜かれた歯の気持ち』で書くことにした。煽った連中は責任を持って最後まで読め。

と言っても、無生物を擬人化するのは得意ではない。というか好きではない。昔はよくやっていた。長く使ったモノを捨てることはモノの「愛」や「信頼」を裏切る行為のように感じていた。このことは以前書いた

ところで動物に人間がアテレコする邪悪テレビ番組があるが、あれは人間の動物への思いを投影しているに過ぎない。同じように、「抜かれた歯の気持ち」と言っても僕の歯への思いを語ることしかできない。

さて、今はモノを捨てることへのためらいは減ったが、身体の一部を捨てるとなるとやはり抵抗はある。本質的な違いはなんだろう。

  1. 生まれたときから持っている
  2. 自己そのものである
  3. 再生不可能

1はあまり本質的とは思えない。生まれたときに包まれていた毛布を今でも持っている人がどれだけいるだろうか。ただ、無理やり持たされていれば身体と同じくらいの愛着は感じるものかもしれない。

2はなかなかおもしろい。デカルトは心身二元論を唱えたそうだが、僕は現代心理学を学んだ人間なので二元論には反対だ。僕が自己=「心」と思い込んでいる情報処理機構は、僕の身体と密接に結びついている。人間の情報処理は感覚入力から運動出力へのマッピングであって、つまり身体と切り離すことはありえない。高齢者の認知能力の低下(に見える現象)は大部分が知覚能力の低下、つまり感覚器官の物理的損耗によるという話もある。そもそも人間の情報処理は全て神経細胞のネットワークによって実現されており、適切に切ったり薬を投与したりすれば、「心」に属するという思われている病気も治ったりする。

書きながら思い出したが、『魔女の宅急便2 キキと新しい魔法』には『中心点行方不明病』という病気が出てくる。カバがライオンに尻尾を食いちぎられたことで心身の不調を訴えるというものだったと記憶している。物理学的にはカバの巨体にとって尻尾の重量など大したことないのだが、ずっとその体で生きてきた本人にとってはそうはいかないということだろう。物理的な損壊が思考の主体である自己すら脅かす。

3も大きなファクターだ。何でもかんでも大量生産されデータ化されている現代では大概のものは捨ててもまた手に入る。だからこそ僕はいろいろなモノをひと思いに捨てることができているが、自分の身体は一度捨てたらもう二度と元通りにはならない。

これは僕にとっては重大な事項なのだが、おそらくヒトにとっては重大ではない。成長や怪我や加齢で身体は絶えず変化し続けているし、それに合わせて常に身体コントロールの調整も行われている。

要は身体に永続性・不変性を求めていることのほうがおかしいのだ。その背景にあるのはいつまでも健康で生きていたいというバカみたいな欲望だ。そういう欲望を持つことと、それが実現しないことは僕が数億年の進化を勝ち抜いてきた生物である以上避けられないことであって、議論するのは無意味だ。存在したいと願った遺伝子が存在している。

医療の発達によって人間はやたらと長生きするようになってしまった。意味ないのに。

アイコンを変えた/明日は抜歯だPart.3

※この記事は『本麒麟』を飲みながら書かれた。

ツイッターなどで使っているアイコンを変えた。就職を機に長く使えてユニーク性の高いものに変えたいと思っていた。また、アイコンに必要なのは何より視認性だ。これらの観点から新アイコンは自分の顔写真をトレスして作った。顔はもちろんユニークだし、流行り廃りもないし、人間は顔に敏感なので視認性も高い(高速で流れるTwitchのチャット欄で顔文字が多用されるのはこれが理由だと思う)。

さて、明日は抜歯だ。今度こそ本当に抜歯だ。そう信じている。

さらざんまいの聖地巡礼をした

アニメ『さらざんまい』が面白い。幾原監督は謎が多い作風であり、2話段階ではどういうアニメなのかもよくわからないが、どうやら3人の少年の「欲望」の話らしい。少年が出てくるアニメは好きだ。

OPを見ればわかるが、浅草アニメだ。近いのでオタクと聖地巡礼に行ってきた。吾妻橋周辺とかっぱ橋(こちらは橋ではない)エリアで2話まではほぼカバーできた。

2019/4/26追記:地図

90分くらいかけて見て回ったあと、さらに2人オタクを召喚して自宅で『さらざんまい』上映会と最近のアニメに関する情報交換をした。僕はdアニメストアとAmazonプライムビデオとNetflixを契約しているので大抵のアニメは配信で見られる。今年は劇場アニメが多い。『君の名は。』以後に作り始めた劇場長編アニメが完成する時期なのだろう。

会社員になったが、本業の忙しさにかまけて趣味をおろそかにしていくと…していくとどうなるんだ?意外と何も起きない気がしてきた。だって趣味だから。

発信は大事/J.S.バッハ『ブランデンブルク協奏曲』第5番

※この記事はゆずサワーと洋梨サワーを飲んで書かれた。

↑薄かった。

会社員になって思うことだが、ブログを通して僕のことをスムーズに知ってもらえるメリットは大きい。発信は大事。

感情はあります。

J.S.バッハの『ブランデンブルク協奏曲』は6曲の合奏協奏曲であり、独特な楽器の組み合わせが面白い。第5番はフルート+ヴァイオリン+チェンバロ+合奏だ。第1楽章の3割(上記音源だと-3:18~)がチェンバロソロという大胆な構成になっている。

少人数のアンサンブルにも大人数のオーケストラにもそれぞれ魅力があるが、僕はこのくらい(各パート1〜3人くらい)の規模の合奏が連携の妙と集合のパワーを両方楽しめると思う。ブランデンブルク協奏曲は他にも9人が全員違うパートを担当する第3番や、ヴァイオリンを抜いて中低音のみで演奏する第6番が好きだ。

ある人の言うところによるとクラシック音楽とは「単純な音のパターンに多くを込める」スタイルだという。ただ一つの音の強さが絶妙であるというだけで泣くほど感動することもある。

感情あるっつてんだろ!酔ってるのでまとまりません!!終了!!解散!!!

注射に耐えた

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

今日は採血があったが辛うじて倒れずにすんだ。自分の体に傷がつくこと、穴を開けて内側と外側の境界を破壊すること。

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>

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

パセリを食べた

昼にとんかつ屋に行った。とんかつとキャベツを食べると皿にはパセリとレモンが残った。僕はパセリを食べるべきか悩んだ。

食べられるものは全て食べるのがポリシーだ。パセリ農家が廃棄率の高さに悲しんでいることも知っている。天皇だって出されたものは全て食べるのがルールだ。普段の僕なら迷いもせずひと思いに食べていただろう。しかし今回は問題があった。

パセリがデカい。

普通添え物として供されるパセリは枝の先の方で切られており、1口で食べられるサイズだ。しかしとんかつ屋で出されたパセリはデカかった。一般添え物パセリの6倍くらいの可食部分があった。

僕は迷った。2度箸を取り、2度下ろした。一口で食べるのは無理だ。かと言って巨大パセリをちぎって1房ずつ食べるか?そんな人は見たことがない。周りに変な目で見られるだろう。常識がないと笑われるかもしれない。そもそもこのサイズのパセリは食べることを想定して出されているのか?昼の混雑時間帯にパセリをのんびり食べている客は店の迷惑ではないか?

だが、自分が変な目で見られることを恐れてパセリの命とパセリ農家の努力の結晶をゴミにして良いのか。自分で決めているルールを曲げて良いのか。食べにくいサイズのパセリを出すこのとんかつ屋はパセリ農家の敵ではないのか。パセリは食べるものではないという人々の思い込みは僕が先頭に立って覆していかねばならないのではないか。

今日僕はとんかつ屋で、パセリとパセリ農家と天皇のことを思いながら、世界の残り全てを敵に回してパセリをちぎってむしゃむしゃ食べた。苦かった。レモンは残した。

第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通信するなどをやってみたい。