mex

Event.currentTargetとEvent.targetの違いを勘違いしていた。
currentTargetはイベントリスナーが紐づいているオブジェクトです。targetは実際にイベントが発火したオブジェクト。
例えば下の例だと灰色の部分(div)にclickイベントが紐づいてるので、ボタンを押した時はEvent.targetはinput要素、Event.currentTargetはdiv要素。
 

エヴァンゲリオン新劇場版序破QをAmazon Primeで観直した。自分はエヴァンゲリオンにそこまで思い入れはなくて、テレビシリーズやAIrは10年前にTUTAYAで借りてこれってどういうことなの?の気持ちで観続けて疑問は何も解消せずに観終わった人間。シン・エヴァンゲリオン劇場版:||(これなんて読むの?)を観ようと思っているけど、まぁよく理解できないまま終わると思う。やっぱりノマドランド観ようかな。
Video preview
最近、やながみゆき(yanagamiyuki)って人をの曲をよく聴いている。いわゆるボカロP、いまでもこんな言い方するのかな。自分は世代的にはボカロ曲がちょうど流行っていた頃に青春を過ごしていたはずだけどほとんど聴いたことがなかった。友人たちから話題をふられたこともなかったから、沖縄までは届いてなかったんだと思う。初音ミクってこんな感じなんですね。
 

実際のところ、政治的なテーマで作品を作っても、作品としてではなくて発言として評価されるようになったからつまんなくなったんでしょうね。今は専門家も自称専門家も批評家も自称批評家もSNSにゴロゴロいるし。2021年に忌野清志郎が原子力はいらねぇって歌ってもマジレスされて終わり。
まぁ一番は政治家よりもこういう人のが心情としては鬱陶しいからだと思う。
 

蒸し牡蠣買ったので届くのが楽しみ。

蒸し牡蠣がめちゃくちゃ気になる。生牡蠣じゃないからノロウィルスの心配もないしうまそう。どっかのタイミングで買うか。
 
暗号戦争についての記事、暗号戦争って言葉をこの記事で知りました。この分野に関してはもうまったく知識がないんですが、リンク先のブログは電子フロンティア財団の記事の和訳で、そこまで難しい言葉を使っていないので理解ができる。
こういう話は無関係ではないので色々興味を持って調べようと思う。

レビュー依頼が多くてだんだんとコミュニケーションが雑になってるというか、コードに対してシビアになりすぎている ここを直すならこっちも直してください。せっかくなのでみたいな。これはあまり良いふるまいではないので気をつける。実装者に余計なプレッシャーを与えるし、実装レベルが急に上がるわけでもないし。レビュアーが気持ち良くなるだけで利がない。
過去に参画していたプロジェクトでレビューの文面や指摘がかなり厳しい人がいて、PRをだすのがとても嫌になった記憶がある。あまりに態度がきついのでレビューとはこういうものなのかと思って調べ、見つけたのが↓の記事。
こっち日本語訳
結局プログラマーは人間でコードレビューはコミュニケーションの延長で、実装者とレビュアーは状況に応じて逆転する。厳しい言葉で殴り合っていたら身が持たない。マウント取るためにレビューしているわけではない。自戒。

スケジュール管理がだるい。二月の初旬〜中旬は体調が優れなかったこともあって予定らしい予定が入れられず、その反動で最近は色々と予定が入っている。といってもこれで多分普通の社会人とどっこいくらいかと思ったけどよう知らん。
最近、家のゴミ箱を新調した。二トリの35Lのやつを使っていたんだけど、リモートワークで家にいることが増えるのに比例して家庭ゴミも増えたので、45Lのやつを買った。これ↓
しっかりしているように見えるけど、実際は意外とペラペラでびっくりしたし蓋の取付づらさにもびっくりした。蓋が本当に取り付けられなくて深夜にうんざりしながら二度と買わないと思った。
ただまぁ完成するとそれなりにしっかりしているように見えるし、二度と買わないは言いすぎたなと思う。ゴミ箱ってこういうものなのかもしれない。でも袋交換するたびにめんどそう。
 

ブログのcssが限界になってきたのでTailwindCssを使ってみた。cssフレームワークをちゃんと使ったことがないせいかもしれないが、htmlのセマンティクスをガン無視して全てcssでスタイルをあてるってのが違和感。要は全部divとspanで書けてしまう。まぁ使用例をみてもそうなので多分そういう指向なんだと思う。
利点は細かいスタイルごとにクラスを提供しているのでカスタマイズしやすい。
Tailwindへの批判記事も貼っておくか。

Cookieの仕様変更のやつ、去年のChromeで実装されて3rdパーティのCookieが軒並み動かなくなるのではと話題になった。それで自分でも調べてたけどちゃんと記事読んでなかったので改めて読んだ。
Cookieを使用した攻撃方法なんかは気になるたびに毎回調べたりしているんだけど、いまだに手法と名前が一致しない。Side Channel Attackってのは初めて知った、Timing Attackやらの類似の手法の総称らしい。
Storage Side Channels Attackっていうのもあるらしく、これはサーバーのレスポンスからユーザーやコンテンツの有無を確かめるっていう手法っぽい。というか自分もスクレイピングを効率よくするためにこういう観点で調べたりする。
 
jsの並行モデルとイベントループについて。この記事だけだと理解が難しい。
これはjsじゃないけどスタックとかフレームとかがいまいちわからんかったので読んだ。細かいところはまったく理解していない。
このサイトだとアニメーションでイメージがしやすい。
これはイベントモデルの欠点を体系的にまとめている論文を紹介したブログ記事。
↓は上の論文の補足的な記事で、結局イベントモデルを実現している実装に問題があるよねみたいなことが書かれている。

もう二月も二週間しかない。
 
一年前くらいからPocketってアプリを使って気になる記事やらなんやらを全部突っ込んでたんですが、そのまま放置していたので一日一記事消化していこうと思った。
今日はこれ。見事に一年前の記事だな。
仮想DOMは本当に"速い"のか? DOM操作の新しい考え方を、フレームワークを実装して理解しよう #エンジニアHub - エンジニアHub|若手Webエンジニアのキャリアを考える!
はじめまして、ダーシノです。さくらインターネットでフロントエンドエンジニアをする傍ら、 NES.css というファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか? そういったフレームワークで使われている、仮想DOMについて知っていますか? 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がいらっしゃると思います。 仮想DOMはJavaScriptフレームワークに隠蔽 (いんぺい) されており、私たち利用者が意識することはほとんどありません。ですが、仮想DOMの仕組みを知り、フレームワークがどのように動いているかを知ることで、解決できる問題がグンと増えます。 当記事は、フロントエンドの初心者〜中級者を対象に、仮想DOMとは何か? 従来のDOM操作との違いは? 仮想DOMを使うメリット・デメリットは? などを、実際にJavaScriptフレームワークを実装しながら解説していきます。 筆者はこれまで 参考記事 にあるように、仮想DOMについて複数の記事をブログで公開してきました。当記事では、これらを元に加筆修正するとともに、新たに仮想DOMのデメリットや、仮想DOMを使わない代替手段にも踏み込んで解説しています。 仮想DOMを語る前に、まずは基本となるDOMについて説明します。 DOMとはDocument Object Modelの略で、簡単に言うと JavaScriptからHTMLドキュメントを操作するためのAPI (インターフェイス)です (正確にはXMLドキュメントも扱えますが、本記事の趣旨を逸脱するため省略します) 。 以下のサンプルコードを例に説明します。 const title = document.getElementById('title'); title.innerHTML = '仮想DOM完全に理解した'; ここではDOMの getElementByIdメソッドを用いて、HTMLドキュメントから#titleのIDを持つ要素を取得します。さらにDOMの innerHTMLプロパティにテキストを代入することで、HTMLドキュメントの h1#title を書き換えることができます。 このように、DOMのおかげでJavaScriptからHTMLドキュメントを操作できます。この他にも、ボタンクリック時のイベント登録や、スタイル・属性の変更、要素のサイズを取得といった処理も、全てDOMのAPIを使います。 このDOMを、仮想DOMと区別するため「 リアルDOM 」と呼ぶこともあります。 DOMツリーでHTML要素を管理する Webブラウザは、HTMLドキュメントの各要素をオブジェクトとして扱い、そのオブジェクトを下図のようにツリー状にして管理しています。 このツリーを、 DOMツリーと呼びます。また、ツリーの要素/オブジェクトひとつひとつを、 Node と呼びます。 詳細は後述しますが、仮想DOMもリアルDOM同様に、Nodeをツリー状にして管理しています。 DOMの話を掘り下げていくと、DOM、Node、Elementという、なんとなく似た使われ方をする単語が頻出します。そのため、これらを混同してしまうことがあります。 現に私も、仮想DOMを勉強する前はDOM≒Node≒Elementだと思っており、雰囲気で使い分けていました。実際には、下図のような継承関係にあります。 Nodeとは 先ほど説明したDOMツリーにおけるひとつひとつの箱 (オブジェクト)が、Nodeです。 firstChildや parentNodeなどのプロパティ、 appendChildや removeChild などのメソッドを提供しています。 Nodeはいくつもの DOM API オブジェクトタイプが継承しているインターフェイスで、それらのさまざまなタイプを同じように扱える (同じメソッドのセットを継承する、または同じ方法でテストできる)ようにします。 Node - Web API | MDN Nodeには、いくつか種類があります。 Elementとは Nodeにはいくつか種類があると説明しました。Elementは、Nodeの中のひとつです。 classListや innerHTMLなどのプロパティ、 getElementByIdや setAttribute ...
仮想DOMは本当に"速い"のか? DOM操作の新しい考え方を、フレームワークを実装して理解しよう #エンジニアHub - エンジニアHub|若手Webエンジニアのキャリアを考える!
typescriptのtype guardって初めて知った
TypeScriptでみかける"is"というキーワードについて - ひと夏の技術
TypeScriptでググっても出てこなくてよくわからないやつ。 他人が書いたTypeScriptのコード見てるとたまに のように「引数 is 型」と書かれたものを見かける。 このコードは引数になんか受け取って、それがstringなのかどうかを判別するくん。 返り値の型に『 arg is string 』と書かれている。 この記事はこれについてのはなし。 この"is"というキーワード、ググラビリティがめちゃくちゃ低くてどうググったらいいかわからないし、ググってもあんまりそれっぽいのがヒットしなくて困る。 What is this "is" keyword? という気持ちになる。isが ゲシュタルト崩壊 。 結論しか書けないけど、type guardに便利な型。 挙動についてはシンプルなものは以下のような振る舞いになる このような挙動になる。 本件の"is"は 演算子とかのページには書かれていなくて、type guard の項目にしれっと書かれている... こんなの見つけられるわけないジャン...... www.typescriptlang.org あるいはスタックオーバーフローのこのスレが一番わかりやすい(このブログよりもね) "is"は型の絞り込みができる ランタイム時にエラーが起こるコードを未然に防げる可能性が上がる 型が確定するので書き味がよい 型が自然言語だからわかりやすい TypeGuardする場面で使っていくといいという話。 スタックオーバーフローのリンク先のほうがコード例わかりやすい気がしてきたのでみなさん最後にこんなこと言ってアレなんですが、スタックオーバーフローのほうも読みましょう😅
TypeScriptでみかける"is"というキーワードについて - ひと夏の技術

昔作った欲しいものリストにある書籍が近隣図書館で貸し出しているかを確認するツールをrustで作り直している。
使っているのはWebdriverでブラウザを操作できる fantoccini ってライブラリです。頑張って一から作ろうと思ったけどさすがにめんどくてやめた。
先週は仕事も自分の作業も何もできていないので今週はちょっと頑張ります。
 
最近SUKISHAをよく聴いてる。twitterで見かけたやつで結構いい。この曲が好き。
 

祝日、かなり天気がいいけど、まだ体調が安定しないので部屋に籠もっています。
ブログにダークモードを付けようと頑張っているけど、最初の頃にめちゃくちゃなstyleを書いてしまったせいで面倒臭くなっている、とか書いてたらできた。
スイッチトグルを作るのがめんどくさかったのでボタンを雑に二つ置いています。適当すぎる。

これ面白そう。コード読んでみようかな
8日に急に38.7℃の熱を出してしまった。2月2日にも熱を出していたので同じ病院へ行って、診察とPCR検査を受けた。検査は明日の昼ごろらしいのでちょっとドキドキしている。
目薬入れるの下手すぎて顔がビシャビシャになってる。

森喜朗の発言でまたtwitterデモが始まったけど、もう日本は国内でやりすぎてて麻痺してる気がする。
あと、ドイツ大使館の#GenderEquality の投稿に「写真に女性職員の方が多い。欧州の男女平等ってこんなんだぜ」みたいなリプライつけて暴れ回っているスペイン語圏の外国人いて笑った。いろいろあるなぁ。
話を変えます
眼精疲労が割と辛いのでMacBookProのディスプレイをやめて、個別のディスプレイを使おうと思っている。ただ、自分はもう10年ほどMacBookProを使い続けていて、どうも他のキーボードとマウスが合わないんですよね。とくにマウスは本当に使うのがだるい。これはもう体がMacBookProに最適化されてしまっている。Appleが出しているキーボードとトラックパッドを買えば解決するのだけど、両方買うと三万円近くかかるので少し躊躇っている。
禁煙をしているし、他にも欲しいものあるし、貯金するか。
あと暇だったので久しぶりに電車に乗った。新宿の紀伊国屋書店に行ってきて岸政彦・柴崎友香共著の「大阪」を買ってきた。本が増えるばかりだ。
なんかこの日記を書いてたら目の調子よくなってきた。前のメガネに戻したからか?
 

今週の中頃は伏せっていたのでもう金曜日なのかと思った。先週も同じようなことを書いた気がする(確認したらtwitterで書いてた)。
最近夜眠れなくて困る。というか全然眠たくないのに床に入るから寝つけないのは当然のような気もする。在宅勤務で日中体を動かしていないのもある。フィットボクシングだけでは負荷が弱いだろうし今週はやれていない。
あとはまぁ早寝早起きしてみる。妻のアラームが朝5時半に鳴るのでそれに合わせて起きるのがいい。どうせ起きるしそのあとしばらくは寝れないから。8時間寝るとすると21時半に寝ればいい。逆に寝れる気がする。

一昨日の夕方、急に発熱してびっくりした。目の痛みと喉の痛みがひどく、さらに妻も発熱したのでこれはコロナウィルスか...とか思っていたら次の日の午前中には熱が治っていた。一応二人とも病院に行ってまぁコロナウィルスではないねとの診断をもらった。自分は目の痛みがまだ少し残っていたので、眼科に行ってみたら結膜炎と疲れ目とドライアイだった。
今は目を使いすぎないようにPCから腕を精一杯伸ばし、ブラウザのズーム機能で倍率を上げて、できるだけ遠くから見るようにしているけど、これ一生治らなかったらマジで困る。メガネの調整とかちゃんとしてみようかな。
体調が芳しくないのでタバコを吸う気にもならないのが唯一の救い。今月から禁煙治療を始めたのでその面では良い滑り出しなんだろう。

自分で禁煙は無理だなと思ったので禁煙外来に行こうと思う。今年こそ禁煙する。金もかかるしいいことない。何かやった後に一服するのが常態化してしまってよろしくない。

Jeff Muellerが去年新作出していたのをinstagramで見かけて、慌ててさがしたら見つけた。どうも本とCDがついているやつらしく、慌てて買ったら本だけのやつを買ってしまい、今キャンセルのメッセージを送った....。馬鹿すぎるぜ。