log - mex.busui.org

2021.06.18

昨日のエラーについて根本的な原因はわからんけども直接の原因と回避策はわかった。別のissueとQiita記事がヒントになった。

Protocol error (Runtime.callFunctionOn): Target closed. · Issue #6610 · puppeteer/puppeteer

Steps to reproduce Tell us about your environment: Puppeteer version: 5.5.0 Platform / OS version: macOS 10.15.7 URLs (if applicable): - Node.js version: v14.15.0 What steps will reproduce the problem? Please include code that reproduces...

https://github.com/puppeteer/puppeteer/issues/6610

Puppeteerで次ページへの遷移を待つ - Qiita

Puppeteer で次ページへの遷移を待つ場合の書き方について。新規ウインドウが開かないような通常の遷移を待つ場合、以下の書き方が決まり文句だという認識です。ページ遷移を待ち受けてからページ遷移を実行して両方の完了を待つ、という処理です。 Promise.all() を使わない変形として次のような書き方も可能です（私は最初の例の方が見やすいと思いますが）。 ...

https://qiita.com/hnw/items/a07e6b88d95d1656e02f#%E6%AC%A1%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E8%A6%81%E7%B4%A0%E3%81%AE%E5%87%BA%E7%8F%BE%E3%82%92%E5%BE%85%E3%81%A4

ページ遷移の際、page.waitForSelectorを使い、次のページにしかない要素の出現を待って遷移が完了したかどうかを確認しているのだけど、このときに Protocol error (Runtime.callFunctionOn): Target closed.が発生しているようにみえた。

要は↓のような感じのコード。page.gotoだけじゃなくてclickで画面遷移する場合も同様に発生する。


await page.goto("https://......");
await page.waitForSelector("#kokonisikanaiID"); //ここでエラー

エラーになっていたコード

↓のようにすると Protocol error (Runtime.callFunctionOn): Target closed. は発生しなくなる。なぜこれでエラーがでなくなるのかはさっぱりだが、Promise.allで解消するところをみるとおそらく実行順序が原因なのだと思う。この辺のテストを見ても参考になりそう


await Promise.all(
	page.goto("https://......"),
	page.waitForSelector("#kokonisikanaiID")
);

対策を施したコード

検証はここ終わりです。なぜなら今朝になって元のコードでもテストが落ちなくなったからです。レスポンスの遅延か？また発生したらまとめます。

2021.06.17

最近悩まされているエラー。issueに解消方法書いてあるがこれではちょっと解決しなかった。

Error: Protocol error (Runtime.callFunctionOn): Target closed. · Issue #1175 · puppeteer/puppeteer

I'm running into this error after 22 intervals. Node.js 8 + Puppeteer on Debian. try { await page.evaluate(async () => ( new Promise((resolve, reject) => { try { const maxScroll = Number.MAX_SAFE_INTEGER; let lastScroll = 0; const interv...

https://github.com/puppeteer/puppeteer/issues/1175

2021.06.15

そういえばNotion APIが公開されていた。このブログではNotion内のコンテンツを取得するのにsplitbee社が作った非公式なAPIを使っている。まぁもともとNotionのAPIをこっそり叩く方法はみんな知っていたし、notion-blogとかもそういう類だったと思う。

Start building with the Notion API

Connect Notion pages and databases to the tools you use every day, creating powerful workflows. Get started Aggregate data from many sources into your team's workspace. Spend less time context switching, and increase visibility across the software and services you rely on.

https://developers.notion.com/

splitbee/notion-api-worker

A serverless wrapper for the private Notion API. It provides fast and easy access to your Notion content. Ideal to make Notion your CMS. We provide a hosted version of this project on https://notion-api.splitbee.io . You can also host it yourself. Cloudflare offers a generous free plan with up to 100,000 request per day.

https://github.com/splitbee/notion-api-worker

さらに言えばsplitbeeは上述のAPIと組み合わせてreact-notionという簡単にNotionっぽく作れちゃうreact componentを提供しているので、公式のAPIを使うには自前でデザインとか色々凝ってやったるでっていうモチベーションが必要になってくるのだった。

splitbee/react-notion

A React renderer for Notion pages. Use Notion as CMS for your blog, documentation or personal site. react-notion was developed by Splitbee. Splitbee is a fast, reliable, free, and modern analytics for any team. This package doesn't handle the communication with the API. Check out notion-api-worker for an easy solution.

https://github.com/splitbee/react-notion

話を変えます。

最近はすこぶる仕事が捗っている。どんどんとタスクを消化している。緊急な仕事をやりつつ重要な仕事も進めている。優秀ですね。理由はわかっていてあんまりおおっぴらに書けないですが、まぁとにかくめちゃくちゃ気持ちよく仕事ができています。お仕事楽しい。

そしてここ２、３日、屁がすごいでる。なんかの病気か？本当に尋常じゃなくてずっとブーブーやってます。リモートワークで本当によかった。

2021.06.09

最近は電子音楽をよく聴いている。よかったやつを載せておきます。多いけどこれでも絞った感じです。Bandcampサイコー。

thecollectionartaud.bandcamp.com

https://thecollectionartaud.bandcamp.com/album/tca-50-idmmxxi-l

Drone Studies 3, by peeq / nankotsuteacher

Drone Studies 3 by peeq / nankotsuteacher, released 11 April 2021 1. Sea of Tranquility 2. Sea of Dreams Experiments on overtone structure based on several ratios. This album is a sequel to "Drone Studies" & "Drone Studies 2". https://nankotsuteacher.bandcamp.com/album/drone-studies https://nankotsuteacher.bandcamp.com/album/drone-studies-2

https://nankotsuteacher.bandcamp.com/album/drone-studies-3

June 2021, by TOKINOGAKE

June 2021 by TOKINOGAKE, released 04 June 2021 1. 062_[057_pq+035_kh]_fd-edit 2. 033_nz 3. 053_pq29_ay31_fd42_a043_pq50_ik-edit 4. 039_035_kh_a0-edit 5. 052_035_kh_nz-edit 6. 064_kg 7. 038_033_nz_kh-edit 8. 061_a0 9. 046_044_026_pq_me-edit_me-edit 10. 059_036_sf_fd-edit 11. 051_027_ik[+028+030+031+032]me-edit(all) 12. 063_[26_32_33_35_36_37_40_56_57_61]_ik-edit 13. 047_037_nz_fd-edit 14.

https://tokinogakecollective.bandcamp.com/album/june-2021

Adolescence and Old, by Shota Okubo

Adolescence and Old by Shota Okubo, released 10 May 2021 1. Bustle 2. Adolescence and Old 3. Respond to his own feeling 4. Around the Underpass 5. Reveal 6. Toy Piano 7. Zingibar

https://waveformant.bandcamp.com/album/adolescence-and-old

Phrases, by Eventless Plot

Phrases by Eventless Plot, released 10 March 2021 1. side A 2. side B 3.

https://eventlessplot.bandcamp.com/album/phrases

Totem, by Matt Atkins

Totem by Matt Atkins, released 06 June 2021 1. Totem 1 2. Totem 2 3. Totem 3 Matt Atkins is an improvising percussionist and visual artist who uses electronics, objects and tape loops in his work.

https://falt.bandcamp.com/album/totem

Music for Acoustic Instruments & Feedback, by Vanessa Amara

Music for Acoustic Instruments & Feedback by Vanessa Amara, released 28 May 2021 1. Bells 2. Piano & Accordion I 3. Accordion 4. Piano & Two Tape Loops 5. Pipe Organ 6. Piano & Accordion II 7. Cembalo & Carillon 8.

https://vanessaamara-poshisolation.bandcamp.com/album/music-for-acoustic-instruments-feedback

Holy Endings, by Lighght

Holy Endings by Lighght, released 26 March 2021 1. there are parts of my soul i don't dare speak 2. And The Snow Decided To Stop Falling And Instead Rise For We Were Not Deserving 3. care2kno 4. sought, kept 5. St. Bliss 6.

https://lighghtmusic.bandcamp.com/album/holy-endings

2021.06.06

今日で三十歳になりました。とくに感慨はないです。

二十五歳を超えてから時間の経つスピードが増しているように思ったけど、二度の転職、結婚、引越しをやっているのでそのせいかもしれない。

三十歳になる直前に電動シェーバーが壊れたので今髭が伸びまくっている。妻に縄文人みたいだねって言われた。

警察は別に好きじゃないんだけど刑事ドラマは結構好き。最近は警視庁捜査一課長やってると観てしまう。熱心なファンではないので食卓についたときにやってたら観るみたいな感じ。たいてい犯人の登場シーンは見逃しているから、クライマックスで犯人がでてきても誰かわからない。だから驚きも爽快感もない。じゃあなんで観ているかというと泥臭い人海戦術でしらみつぶしに手掛かりを捜すシーンが好きだから。様式美があり、あのシーンが出てくるとああもう終わりだなと思う。あと内藤剛志が帰宅して妻とのやりとりの最中(もしくは猫の様子から)、ハッとなにか思いつくのも好き。

木曜ミステリー『警視庁・捜査一課長season5』｜テレビ朝日

2021年4月8日（木）スタート【毎週木曜】よる8:00～放送　テレビ朝日木曜ミステリー『警視庁・捜査一課長season5』公式サイト。"叩き上げの男"大岩純一捜査一課長と熱き刑事たちが被害者の無念を晴らすため、東京全土を疾走する！シリーズ誕生10年目、《魂の訓示》《東京一斉大捜査》などシリーズの醍醐味はそのままに――最強ミステリーが木曜よるに帰って来る！

https://www.tv-asahi.co.jp/ichikacho5/

2021.06.02

アップダウン奏法についての動画みている。こういうのちゃんと意識したことなかった。意識しろよ。近所にスタジオ見つけたので練習します。

アップダウン奏法の練習法【BPM200の壁を越えたい人向け】

こんにちは。ドラム講師の山北弘一です。ご視聴誠にありがとうございます。《ドラムレッスン動画を無料プレゼント中》こちらから受け取れます。→https://stickcontrol.jp/lp/ドラムの上達に欠かせない「脱力」と「スピードアップのコツ」について、55分間におよぶ動画の中でわかりやすく学ぶことができます...

https://www.youtube.com/watch?v=oIhGg-pJhQ8

ユリイカがレイハラカミ特集をやってたので買って読んでいる。

www.seidosha.co.jp

http://www.seidosha.co.jp/book/index.php?id=3567

特集と関係ない「新しい動物文学の誕生」っていう記事が面白かった。大江健三郎の「飼育」、「人間の羊」を引用して、人間を動物のように表現する技法が生み出す効果について紹介している。物語を食べるっていうシリーズで赤坂憲雄って人がやってるらしい。

2021.06.01

コンビニを利用しまくっている。夕ご飯以外はコンビニで買ったものを飲み食いしていてほぼコンビニ人間になっている。マネーフォワードを見ると一日2~3回ほど利用していて一度で300~800円くらい使っていた。節約しよう。

とりあえず6月はコンビニの利用回数を減らします。タバコをやめたので抵抗がすくない。一週間くらい続けてみてどれくらい節約できたかチェックしてみます。

アイスコーヒやアイスティー、麦茶は作り置きしておく。

朝昼晩はできるだけ作る。朝は喫茶店のモーニングでもよい。

話を変えます。

先日、ファミコン探偵倶楽部消えた後継者クリアしました。久々にゲームを頭からケツまでやった。すげー長く感じた。

ファミコン探偵倶楽部消えた後継者 | Nintendo Switch | 任天堂

2021年5月14日(金)発売、Nintendo Switch『ファミコン探偵倶楽部消えた後継者』の公式サイトです。

https://www.nintendo.co.jp/switch/aw3ca/famitan1/index.html

後半。登場人物が手紙を書くシーンがあるんですが、その手紙を読み上げるセリフに合わせて手紙を書く手が動いたり止まったりしてめっちゃ凝ってんなと感動しました。まぁゲームめっちゃやってる人からしたら当たり前かもしれないですが。あとシナリオも面白い。

2021.05.29

Rustの本を読んでいる。トレイトって馴染みないなぁ。

実践Rustプログラミング入門

Amazonで初田直也, 山口聖弘, 吉川哲史, 豊田優貴, 松本健太郎, 原将己, 中村謙弘, フォルシア株式会社の実践Rustプログラミング入門。アマゾンならポイント還元本が多数。初田直也, 山口聖弘, 吉川哲史, 豊田優貴, 松本健太郎, 原将己, 中村謙弘, フォルシア株式会社作品ほか、お急ぎ便対象商品は当日お届けも可能。また実践Rustプログラミング入門もアマゾン配送商品なら通常配送無料。

https://www.amazon.co.jp/dp/4798061700/

以下は雑なメモ。

RustはGCを持たない。所有権、借用、ライフタイムとプログロミング言語でメモリ管理を行う。

スコープを出た途端に破棄することを言語レベルでサポートしていることです。

Rustのメモリ管理って面白い - Qiita

Rust という言語に初めて触れてみて、これのメモリ管理戦略って面白いなと思ったのでちょっと書いてみます。まだ真剣に見始めて実質1日くらいなので大いに勘違している可能性もありますが、自分の理解のためにもまとめてみます。なお、言語の成り立ちとか特徴とかはググると色々出てくると思いますが、個人的に乱暴にまとめてしまうと ...

https://qiita.com/ksato9700/items/312be99d8264b553b193#%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%97%E3%81%A8%E5%80%A4%E3%81%AE%E5%AF%BF%E5%91%BD

ゼロコスト抽象化を追求、抽象化の機能を追加のコストなく使用できる(静的ディスパッチ)。

hacolab.hatenablog.com

https://hacolab.hatenablog.com/entry/2019/07/12/235747

関連関数は型から関数を呼ぶ形式で定義される関数のこと。

The Rust Programming Language 日本語版

メソッドは関数に似ています: fnキーワードと名前で宣言されるし、引数と返り値があるし、どこか別の場所で呼び出された時に実行されるコードを含みます。ところが、メソッドは構造体の文脈(あるいはenumかトレイトオブジェクトの。これらについては各々第6章と17章で解説します)で定義されるという点で、関数とは異なり、最初の引数は必ず self になり、これはメソッドが呼び出されている構造体インスタンスを表します。 Rectangleインスタンスを引数に取る area関数を変え、代わりに Rectangle構造体上に area メソッドを作りましょう。リスト5-13に示した通りですね。ファイル名: src/main.rs #[derive(Debug)] struct Rectangle { width: u32, height: u32, } impl Rectangle { fn area(&self) -> u32 { self.width * self.height } } fn main() { let rect1 = Rectangle { width: 30, height: 50 };

https://doc.rust-jp.rs/book-ja/ch05-03-method-syntax.html#%E9%96%A2%E9%80%A3%E9%96%A2%E6%95%B0

2021.05.28

React Hook APIの不満について述べた記事。依存関係が変更されたかどうかを参照でしか比較しないのが不満らしい。個人的には基本型以外をhook内で扱わないようにしています。特定の関心事に集中できていればローカル変数がCustom Hook内で登場してもあまり気にならない...と思うけど、続きの記事を読んでいくにつれて何を問題としているのかよくわからなくなってきた。

Frustrations with React Hooks - LogRocket Blog

Before I detail my frustrations with React Hooks, I want to state for the record that I am, for the most part, a fan of React Hooks. I often hear that the main reason for the existence of Hooks is to replace class components.

https://blog.logrocket.com/react-hooks-frustrations/

続きの記事

Solutions to frustrations with React Hooks - LogRocket Blog

One of my previous posts, Frustrations with React Hooks, got an incredible amount of views and topped hacker news at one point. The post also got lots of comments, some of which have changed how I view Hooks and given me a completely new and positive way of viewing them.

https://blog.logrocket.com/solutions-to-frustrations-with-react-hooks/

Solutions to frustrations with React Hooks - LogRocket Blog

正直、現状のReact Hook APIにはかなり満足していて記事で述べられている問題点に関してはあまり意識できない。ただこれは自分がプログラミングパラダイムへの理解が浅いことにあるかもしれない。のでその辺勉強しようと思います。

2021.05.27

ぼけと利他という連載を読んでいます。おもしろい。

答えを手放す（村瀨孝生） | みんなのミシマガジン

おもしろいを1日1本！　ミシマ社のウェブ雑誌「みんなのミシマガジン（通称ミシマガ）」。村瀨孝生／伊藤亜紗の『ぼけと利他』のページです。

https://www.mishimaga.com/books/boketorita/002547.html

2021.05.26

最近読んだ本。マインドフルネス系の書籍はいままで忌避していたんですが、そろそろ三十路になるし食わず嫌い減らしたいなと思って手を出した。Kindle Unlimitedだったし......。

ブッダの言葉みたいなくだりはへぇ〜だったけど、かるい瞑想のやり方みたいなのも書いてありそれがとてもよかった。本書は欲望は人間の業からくる妄想と定義していて行動する前に心を整理しましょうねぇ、最近はコンプレックスや競争心、承認欲求が刺激される機会が多いですけど全部それあなたの妄想ですよねぇみたいな感じです。

反応しない練習あらゆる悩みが消えていくブッダの超・合理的な「考え方」

Amazonで草薙龍瞬の反応しない練習あらゆる悩みが消えていくブッダの超・合理的な「考え方」。アマゾンならポイント還元本が多数。一度購入いただいた電子書籍は、KindleおよびFire端末、スマートフォンやタブレットなど、様々な端末でもお楽しみいただけます。

https://www.amazon.co.jp/dp/B012EU8CD0

社会人になりたてくらいの頃、誕生日に母親からアドラー心理学の本を5、6冊送られたことがあって当時はまぁげんなりしつつ読んでたんですが、アドラー心理学は我慢せずに辛い現状から逃げようぜ！みたいな感じなので、マインドフルネス系の書籍はなんか本当に読む人の現状によって評価変わるなと思いました。

次は意識高めの自己啓発系ビジネス書でも読むか、世界のエリートはなんちゃら〜みたいな本。

2021.05.23

Blender全然やらんからとりあえずやってみたいチュートリアルをピックアップして年内にやるみたいな感じにするか。やる気がないな本当に。

2021.05.20

ducks module patternのいいところはめちゃくちゃ単純でわかりやすいっていうのにある。弊社のアプリケーションでも採用していてまぁうまくいっている。redux-toolkitのcreateSlice関数同様、ポータブルに扱えるのは機能を優先できるので重宝されるのだと思う。

erikras/ducks-modular-redux

I find as I am building my redux app, one piece of functionality at a time, I keep needing to add {actionTypes, actions, reducer} tuples for each use case. I have been keeping these in separate files and even separate folders, however 95% of the time, it's only one reducer/actions pair that ever needs their associated actions.

https://github.com/erikras/ducks-modular-redux

気になるところをあげるとするならば、あまりにもわかりやすくて簡単なので本来propsで渡せばいいのにわざわざstoreを経由していたり、ReactのContext APIで解決できるシーンでstoreをつかって結果としてContext APIを使うためのノウハウなんかが身につかないとかです。前者はレビューで指摘すればいいし、後者はContext API使うのを諦めたらいい。

Context APIは使用するコンポーネント(Consumer)を明示的に制限できるのが利点。これreduxのstoreに置くのは大袈裟だよな〜っていうstateを管理するのに使えるんですが、結構考慮することが多くて、弊社のアーキテクト的な人もあんまり理解できていないと思う。

余談ですが、Context API vs Reduxみたいな記事でContext APIは簡単！ProviderとuseContextわかれば使える！ってたまに見かけるんですが、前述のとおりContext APIをreduxのように使うのはいろいろと考慮が必要なのであれは嘘です。

2021.05.19

去年くらいからBlenderで3DCGをやっています。やったりやらなかったりしています。まぁ当然門外漢なので理解が及ばないところが多くて手が詰まりがちになるし、他にもやることがあるのでなんともいえない感じになっている。

3DCGを始めた目的は自分が音楽を作るにあたって良さげなアートワークが欲しいと思ったからなので、それを基にゴールを決めておく。

ぱっと見リアルな建物を作れるようになる

ぱっと見リアルな機械？っぽいものを作れるようになる

四角とか球体とかをモチーフにしない

2021.05.18

田村正和が亡くなってショックです。大学生のころに古畑任三郎シリーズを全部観てめちゃくちゃおもろかった。

コードインタビューというものを知った。一行ごとにどのような目的でこのコードを書いたのか、説明を求められるらしい。本来はコーディング試験で行うらしいが、自分のコードを人に質問する際にこれを意識しておこうと思う。

Get ready for your React Interview

All interviews are daunting. I know how do you feel searching for every possible interview tips and expected questions. After a few interviews, I got my first dev job, and I want to share what I've learned throughout the journey. I hope it helps.

https://dev.to/hannahchoi/prepare-your-first-react-interview-57b6

Angular開発者からReactを使ってみた感想記事。これを見るとReactはやはりフレームワークではなくてライブラリなのだなと思う。ディレクトリ構成に悩むところとか、学習曲線が小さいところとか。ルーティングなんかはNext.js使ってればいいとは思う。

コンポーネントの粒度を細かくしようとすると途端に難しくなる。Atomic Designを使うにしてもちょっと工夫しないと難しそう。そもそもAtomic DesignをReactで使うとなるとcssは使えないのでデザイナーさんとの調整をしないといけない(css modulesを使えばいいのか?)。

React: thoughts from an Angular developer

After two years working with Angular I was assigned to a project where the frontend stack was React, Next.js and Chakra UI. I started without any prior React experience nor knowledge. After three months in this project I've decided to put my thoughts of this technology change into a post.

https://dev.to/cloudx/react-thoughts-from-an-angular-developer-hbb

Redux ToolKitを実は一度も使ったことがない。user guideを軽くさらってみたら非同期処理はMiddlewareに任せる(redux-thunkを使ってる)らしいとかしかわからなかった。createSlice関数とかはいまいちよくわからん。というかhookでいいんじゃんかなぁ。なんかアプリケーション作るか。

Usage Guide | Redux Toolkit

The Redux core library is deliberately unopinionated. It lets you decide how you want to handle everything, like store setup, what your state contains, and how you want to build your reducers. This is good in some cases, because it gives you flexibility, but that flexibility isn't always needed.

https://deploy-preview-1016--redux-starter-kit-docs.netlify.app/usage/usage-guide

Get to know Redux in 2021

Redux is something you really need to know if you are going to do anything professionally with JS and especially React. For some time it seemed quite complex with a lot of boilerplate so I mostly used MobX and more recently React context.

https://dev.to/semirteskeredzic/get-to-know-redux-in-2021-226c

幽霊屋敷の恐怖血を吸う人形を観ながらいろいろ作業している。この時代のホラー邦画の音楽はドローンっぽくていいですね。吸血鬼？役の女性はウルトラマンセブンにも出演してたりするらしい。

幽霊屋敷の恐怖血を吸う人形

https://www.amazon.co.jp/gp/video/detail/B00L7OE4RI/ref=atv_dp_share_cu_r

2021.05.13

Bandcamp Fridayの日本人アーティスト特集を聴いています。Satomimagae、Mikazuki Bigwaveが登場していて嬉しい。あと一番最初に載っているeffe、初めて聴いたけどかっこいい。

Support Japanese Artists on Bandcamp This Friday: May 2021 Edition - OTAQUEST

Bandcamp 's decision to waive their revenue shares on the first Friday of every month (meaning creators get all the sales from their offerings on the platform over a day-long period) started over a year ago, when COVID-19 morphed into a pandemic and disrupted nearly every society on the planet.

https://www.otaquest.com/support-japanese-artists-on-bandcamp-this-friday-may-2021-edition/

Bandcamp Friday自体は多分5月7日で終わりだったらしい。まぁあんまり気にせずに購入していたけれどまた再開したら嬉しい。Bandcamp偉大だわ。

void city, by effe

void city by effe, released 25 April 2021 1. a certain song 2. void city 3. sayo no uta (feat. sea-no) 4. diary of amber 5. record : area00XX (feat. sea-no) 6. waning moon 7. anonymous toys 8. retroposon (2021 remake ver.) 9. spider's thread 10. bouquet to nothingness (feat.

https://effexxx.bandcamp.com/album/void-city-2

Hanazono, by Satomimagae

Hanazono by Satomimagae, released 23 April 2021 1. Hebisan 2. Manuke 3. Suiheisen 4. Tsuchi 5. Houkou 6. Uzu 7. Kaze 8. Numa 9. Ashi 10. Ondo 11. Kouji 12. Uchu 13. Dango (Bonus Track) Satomimagae's Hanazono is an invitation to revel in your immediate and imagined surroundings, to make time and space for guileless curiosity and garden variety enchantment.

https://satomimagae.bandcamp.com/album/hanazono

魔法戦線 METROPOLIS.exe - Album, by ミカヅキBIGWAVE

魔法戦線 METROPOLIS.exe - Album by ミカヅキBIGWAVE, released 10 April 2021 1. METROPOLIS.exe 2. 電月街夜 Neon Light 3. 愛 2 MUCH 4. Route 134 5. I'll Never Stop 6. Cyber Patrol 7. Mystica 8. Please Call Me 9. Never Forget You 10. Final Shot!! 11. 魔法戦線 CODE:MKZK 12.

https://mikazukibigwave.bandcamp.com/album/metropolis-exe-album

話変えます。これ今日知って衝撃だった。

Index as a key is an anti-pattern

So many times I have seen developers use the index of an item as its key when they render a list. todos.map((todo, index) => ( ));} It looks elegant and it does get rid of the warning (which was the 'real' issue, right?). What is the danger here?

https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318

こっちは日本語

Reactのkey propに配列のindexを使うことが良くない理由

Reactの mapを使う時、 keyエラーをなくすため index を使ったことがあります。しかし最近それがanti-patternだということを知りましたので、その理由をまとめました。そういえばそもそもkeyって何で必要だったけ... ？と、ふいと思ってしまいました。何となくは知ってますが、明確にしたいのでこの部分から始めましょう。まずはこのサンプルコードをご覧ください。 fruitsという配列を map メソッドを使ってpタグに入れてる簡単なコードです。これだけ見たら問題なさそうに見えますし、画面にもちゃんとでます。しかし、console窓を確認したらこういうエラーが起きてました。 Warning: Each child in a list should have a unique "key" prop.

https://zenn.dev/luvmini511/articles/f7b22d93e9c182#2.-index%E3%81%8C%E5%8D%B1%E9%99%BA%E3%81%AA%E7%90%86%E7%94%B1

この辺はマジでちゃんと調べてなかったので次から気をつけます。Reactの公式ドキュメントもっとちゃんと読もう。

差分検出処理 - React

React は、各更新で実際に何が変更されるべきかを人間が心配する必要がないように、宣言型の API を提供しています。これによりアプリケーションの作成が大幅に容易になるわけですが、React の中でこの処理がどのように実装されているのかはよく分からないかもしれません。この章では React の "差分" アルゴリズムについて、コンポーネントの更新を予測可能なものとしながら、ハイパフォーマンスなアプリケーションの要求を満たす速度を得られるように、私たちが行った選択について説明します。 React を使う際、 render() 関数をある時点の React 要素のツリーを作成するものとして考えることができます。次回の state や props の更新時には、 render() 関数は React 要素の別のツリーを返します。React はそこから直近のツリーに合致させるように効率よく UI を更新する方法を見つけ出す必要があります。あるツリーを別のものに変換するための最小限の操作を求めるというアルゴリズム問題については、いくつかの一般的な解決方法が存在しています。しかし、最新のアルゴリズムでもツリーの要素数を n として O(n 3) ほどの計算量があります。 React でそのアルゴリズムを使った場合、1000 個の要素を表示するのに 10 億といったレベルの比較が必要となります。これではあまりに計算コストが高すぎます。代わりに、React は 2 つの仮定に基づくことで、ある程度近い結果を得ることができる O(n) ほどの計算量のアルゴリズムを実装しています。異なる型の 2 つの要素は異なるツリーを生成する。開発者は key プロパティを与えることで、異なるレンダー間でどの子要素が変化しない可能性があるのかについてヒントを出すことができる。実際に、これらの仮定はほとんど全ての実践的なユースケースで有効です。

https://ja.reactjs.org/docs/reconciliation.html#keys

2021.05.12

ストリート・ピアノについて感じていること｜Hitomi Nishiyama 西山瞳｜note

こんな記事を読みました。ストリート・ピアノが流行し出してから、ずっとうっすらと思っていることを書きます。まず、ストリート・ピアノについて、駅や様々なところに文化的なものが置いてあることは素晴らしいことだと思います。 ...

https://note.com/hitominishiyama/n/n820a287f4c41

こういった文章を読むたびに音楽家は音楽を過大評価しすぎなのではと思ってしまう。音楽が単なるエンターテイメントコンテンツとしての振る舞いを求められる場面は多々あり、ストリートピアノもその一つで公園に置かれた遊具と変わらないと個人的には思っている。本来、駅はホームレスに庇を貸すための施設ではなく、駅を利用している人間の大多数はホームレスではない。大多数に向けてのサービスを展開されるたびに毎回毎回ホームレスへの配慮を求めるようになると結果的に駅構内からのホームレス排除につながるのでは。客ではないので。

まぁ実際のところ馬車道駅は去年の夏頃から「周辺住民の苦情」を基に駅構内にホームレス排除の張り紙なんかをしているみたいなので、駅とかストリートピアノとか関係なくてそういう地域性なんだと思います。

ホームレス「排除」の張り紙　馬車道駅、揺らぐ人権意識　 | カナロコ by 神奈川新聞

社会 | 神奈川新聞 | 2020年7月23日(木) 05:00 ...

https://www.kanaloco.jp/news/social/entry-418649.html

2021.05.08

昨日の夜から愛知県に来ています。友人宅からこの日記を書いている。昨晩は土曜ロードショーのタイタニック(前編)を見つつ酒を飲んで終わった。

今朝は近所の喫茶店にモーニングを食べにいきました。小倉トーストは食わず、バターが塗られた普通のトーストを食べました。あとなぜか茶碗蒸しも付いてきた。喫茶店に分煙は存在していなかったが、コロナウイルス対策で入り口のドアも窓もすべて開放していて煙はあまり気にならなかった。壁紙は天井に近づくほど分厚く黄ばんでいて趣がありました。

隣席の高齢者は昔はこんな集まれるとこなかったからいいわよねぇ犬山は名古屋で勤めている人たちには人気なんですみたいな話をしていて、前の席の高齢者はコロナウイルスワクチン接種の予約をガラケーでしていた。隅の席で陣取るヤンキーっぽい感じのお兄ちゃんたちはタバコ片手にソシャゲの話で盛り上がっていて、なんかメデューサがどうとか灼熱で森を焼くとかマーマンをゾンビでぶっ倒したと大声で喋っていた。盛り上がりすぎて店員のお婆さんが若干機嫌悪くなってました。

今、自分は昼寝から起き、友人は二日酔いでダウンしていました。そろそろ名古屋に向かおうと思います。