カテゴリー: 技術

投稿日:

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

ReactでTodoアプリ

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

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

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

枠を超える笑い

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

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

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

日記が長い

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

投稿日:

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で止めてターミナルにいろいろ打ち込んでみたが、lsもbashもrebootもCommand 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に変えた。昆虫なので色がきれいなのは好き。欠点はググラビリティ。