log - mex.busui.org

2021.05.01

GWが始まった。今年もまぁだらだら過ごしていつの間にか終わってるみたいな感じだろうと思っていたが、結構セッションや遊びの予定が入った。ありがたいことですね。

去年はどう過ごしていたのかなと日記を振り返ってみたけれど記録してないし、カレンダーにもジム以外の予定は入っていなかったので本当に何もしていなかったらしい。一回目の緊急事態宣言中だったと思うしそうですね。

ここ最近、仕事以外ではまったくコードを書いていない。これは意識して書かないようにしていて、仕事中にキャッチアップする時間を作ってやっている。これは多分いい傾向だと思っている。まぁやりたくなったらやると思います。

2021.04.26

今まさに自分はコンフォートゾーンにいるわけだけど、こっからどうしたらいいかなという感じである。

2021/04/16 自分があまり苦労しなくても居続けられる場所、いわゆるコンフォートゾーンですが、よく「コンフォートゾーンの外に出ないと成長しない」と言われますよね。確かにそれは同意なのですが、僕はそのコンフォートゾーンの外に上方向と横方向の2種類があって、同じスキルの周辺をもっと強くしていくのが上方向だとすると、別ジャンルに目を向けていくのが横方向だと思っています。 ...

https://l-w-i.net/o/20210416_01.txt

2021.04.16

Bluetile Loungeがデモを一曲bandcampで発表していた。このまま活動を続け2ndも再発して欲しい。

Last Men, by Bluetile Lounge

Last Men by Bluetile Lounge, released 07 April 2021

https://bluetilelounge.bandcamp.com/track/last-men

先ほど見つけたいいバンド。しかしもう解散していそう。人生にはこういったことが多すぎないか。

Good Night & Good Morningの"Key Studies"

曲・5:38・2012 · Apple Musicのサブスクリプションに登録すると利用できます。無料で体験する。

https://music.apple.com/jp/album/key-studies/512644206?i=512644313

最近、日本語歌詞のスロウコアを聴いてみたくて探しています。さっぱり見つかりません。日本のスロウコアバンドです！って明言しているバンドがそもそもなかなかいない。ようやく一つ見つけたと思ったらEnglishで歌っていた。どうもSSWとかエモに全部括られているのではと思っていますが。

2021.04.15

FLoCとかサードパーティクッキーについて調べた。

サードパーティクッキーは、ユーザが閲覧するつもりのないサーバから発行されたクッキーのこと。

例えば、訪問したウェブサイトAがサーバXから画像などのリソースをとってくるようブラウザに指示すると、ブラウザとサーバX間で通信が発生し、サーバXからブラウザへクッキーを発行することができる。この時、サーバXから発行されたクッキーはユーザが閲覧するつもりのないサーバ(ウェブサイト)から発行されたクッキーため、サードパーティクッキーと呼ばれる。

ウェブサイトAを配信しているサーバから発行されたクッキーはユーザが意図して閲覧したウェブサイトなのでファーストパーティクッキーと呼ばれる。

サードパーティクッキーの問題点としては、複数サイトからCookieを付与することでユーザの行動履歴を把握できてしまうこと。例えば、サーバXからウェブサイトA、B、C、Dへサードパーティクッキーを発行していた場合、クッキーの有無で「Aを見た後、C、その後にDを見た」といった形でサーバXは判断できてしまうので、プライバシーリスクがある。

このサードパーティクッキーの仕組みはSafariやFirefoxはデフォルトではブロックされていて、サポートしているのはChromeだけ、それも2022年で終わりみたいです。まぁここまではなんとなく知っていた話。

そんな2020年で終わるサードパーティクッキーの代わりにGoogleが開発しているのがFLoC。

FLoCはFederated Learning of Cohortsの略称で直訳するとコホートの連合学習。

難しいのでどのようなシステムかは以下の記事から引用する。

Googleに騙されてはいけない：FLoCは邪悪なアイデアである | P2Pとかその辺のお話R

ご承知の通り、クッキーの死を嘆く必要など微塵もない。サードパーティクッキーは20年以上に渡り、ウェブ上の不気味で胡散臭い、数十億ドル規模の広告監視産業の要であった。だが、その基盤に暗雲が立ち込めるようになったことで、最大手のプレイヤーはなんとか窮地を脱しようとしている。 ...

https://p2ptk.org/privacy/3290

FLoCを有効にしたブラウザは、ユーザの閲覧習慣に関する情報を収集し、その情報からユーザを「コホート」またはグループに割り当てる。似たような閲覧習慣を持つユーザは「似たような」という定義に沿って同じコホートにグループ化される。各ユーザのブラウザは、どのグループに属しているかを示すコホートIDをウェブサイトや広告主と共有する。この提案によると、少なくとも数千人のユーザが各コホートに所属することになる（が、そのように保証されているわけではない）。

このFLoCも新たなプライバシーリスクをもたらすとして批判されている。どのようなリスクがあるかは説明できる気がしない。上の記事が詳しいのでそちらを参照。まあでもユーザの大規模監視が必要になる可能性が高いらしく、一種のディストピア感がする

引用記事以外の参考

サードパーティークッキー

www.itmedia.co.jp

https://www.itmedia.co.jp/news/articles/1812/13/news016.html

www.law.co.jp

https://www.law.co.jp/%E3%82%AF%E3%83%83%E3%82%AD%E3%83%BC%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF.pdf

FLoC

Googleが開発予定のクッキー代替技術FLoC（フロック）について解説しよう - nununi | awoo Japan

実はこうしたフロックのような連合学習コホート分析は、我々awooの人工知能によってすでに搭載されている。宣伝にはなるが、宣伝すべきものなので紹介したい。プライバシー問題は世界中で話題になっていて、実際に法規制も始まっている。有名なところだとヨーロッパ諸国で対応が始まっているGDPR（General Data Protection ...

https://www.nununi.jp/floc_nocookie_technology/

【一問一答】「連合学習」とは？：プライバシーを重視したウェブ広告技術 | DIGIDAY［日本版］

今日のパブリッシャーと広告主にとって、もっとも緊急かつ避けられない問題は、サードパーティのCookieに依存せずにデジタル広告のエコシステムを再構築する方法を見つけ出すことです。その方法を探る過程で、数多くの回避策や代替技術が登場しました。 Googleは、ウェブの発展を支えてきた広告モデルを維持するため、 ...

https://digiday.jp/brands/what-is-federated-learning/

2021.04.14

Event.currentTargetとEvent.targetの違いを勘違いしていた。

currentTargetはイベントリスナーが紐づいているオブジェクトです。targetは実際にイベントが発火したオブジェクト。

例えば下の例だと灰色の部分(div)にclickイベントが紐づいてるので、ボタンを押した時はEvent.targetはinput要素、Event.currentTargetはdiv要素。

エヴァンゲリオン新劇場版序破QをAmazon Primeで観直した。自分はエヴァンゲリオンにそこまで思い入れはなくて、テレビシリーズやAIrは10年前にTUTAYAで借りてこれってどういうことなの？の気持ちで観続けて疑問は何も解消せずに観終わった人間。シン・エヴァンゲリオン劇場版:||(これなんて読むの？)を観ようと思っているけど、まぁよく理解できないまま終わると思う。やっぱりノマドランド観ようかな。

最近、やながみゆき(yanagamiyuki)って人をの曲をよく聴いている。いわゆるボカロP、いまでもこんな言い方するのかな。自分は世代的にはボカロ曲がちょうど流行っていた頃に青春を過ごしていたはずだけどほとんど聴いたことがなかった。友人たちから話題をふられたこともなかったから、沖縄までは届いてなかったんだと思う。初音ミクってこんな感じなんですね。

yanagamiyuki

twitter / @yanagamiyuki niconico /https://www.nicovideo.jp/mylist/24938656

https://soundcloud.com/yanagamiyuki

やながみゆき

やながみゆき. Tokyo, Japan. https://twitter.com/Yanagamiyuki

https://yanagamiyuki.bandcamp.com/

2021.03.19

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

まぁ一番は政治家よりもこういう人のが心情としては鬱陶しいからだと思う。

2021.03.17

最悪な実装を直していたらもう水曜日になっていた。恐ろしい。3月ももう後半なのでそろそろ今年の目標とかあってもいいのかなと思いました。

去年も目標みたいなのは書いてたんですが、ほぼやらなかったすね。

log

2021.03.17,Logs,最悪な実装を直していたらもう水曜日になっていた。恐ろしい。3月ももう後半なのでそろそろ今年の目標とかあってもいいのかなと思いました。2021.03.10,Logs,蒸し牡蠣買ったので届くのが楽しみ。2021.03.08,Logs,蒸し牡蠣がめちゃくちゃ気になる。生牡蠣じゃないからノロウィルスの心配もないしうまそう。どっかのタイミングで買うか。,【楽天市場】播磨...

https://mex.busui.org/log#2020.04.03

今年はblender再履修しようと思います。去年ちょいちょい手を出してたけど全然うまくいかなかったので再挑戦。

でもまぁここに書くとやらんからな。

これすごい。

Blenderを用いて1週間で完成させた美しく幻想的なVFX作品『Anicca』（アニーチャ） | 特集 | CGWORLD.jp

Short Shorts Film Festival & Asiaをはじめ、国内外の映画祭で7...

https://cgworld.jp/feature/202103-aniccai.html

2021.03.10

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

2021.03.08

蒸し牡蠣がめちゃくちゃ気になる。生牡蠣じゃないからノロウィルスの心配もないしうまそう。どっかのタイミングで買うか。

【楽天市場】播磨灘産　ぷっくり！大粒蒸し牡蠣「珠せいろ」(スチーム牡蠣）】お歳暮　ギフト【カキ】【牡蠣】【かき】【冷凍】お歳暮　ギフト蒸し牡蠣冷凍播磨灘牡蠣珠せいろ牡蠣：吉川水産-魚河岸のれん街-

※ログインすると、登録した都道府県の最安送料が表示されます。 ※最安送料での配送をご希望の場合、注文確認画面にて配送方法の変更が必要な場合があります。 ※離島・一部地域は追加送料がかかる場合があります。 ※東京・神奈川・千葉・埼玉で対象エリア外へのご注文は、毎日 15:00までのご注文で翌日の配達となります（あす楽）。

https://item.rakuten.co.jp/yoshi/4100310/

蒸し牡蠣「珠せいろ」

株式会社マルト水産 2017年グランプリ「生より美味しい！という方がたくさんいます。」　冬になると、播磨灘産の大粒で美味しい牡蠣を求め、各地の牡蠣ファンで賑わう西播磨。広大な森林からミネラルをたっぷり運ぶ清流揖保川、千種川。奇跡のような好環境で、一年ですくすく育つ（一般的には２～３年）ため、柔らかく旨味たっぷり、いくらでも食べたくなる美味しさです。 ...

https://foodselection.jp/prize/?p=2384

『蒸し牡蠣珠せいろ播磨灘産 500g』お試ししました - satira's diary

『蒸し牡蠣珠せいろ播磨灘産 500g』の特長一般的に牡蠣がおいしいとされる、2月以降の播磨灘産の一年珠かきを最新の蒸し器で加工し、急速に凍結しました。一粒づつ冷凍してあるので、使いたい分だけ簡単に取り出せます。加熱済みで安全、調理時間も短縮します。蒸し加工でエキス・旨味が逃げない。味が均一です。さらに詳しい商品情報はこちら蒸し牡蠣.com マルト水産の蒸し牡蠣は、旨味をギュッと閉じ込めた美味しさを提供します。こんな感じで冷凍便で到着しました。箱を開けると... 大量の牡蠣！この量はびびりました。そしてなんといっても大きい！レシピブックもついていました。おしゃれな牡蠣料理♪作ってみたいものばかり...

https://satira114.hatenablog.com/entry/20170501/p1

暗号戦争についての記事、暗号戦争って言葉をこの記事で知りました。この分野に関してはもうまったく知識がないんですが、リンク先のブログは電子フロンティア財団の記事の和訳で、そこまで難しい言葉を使っていないので理解ができる。

こういう話は無関係ではないので色々興味を持って調べようと思う。

ブルース・シュナイアーと語る「暗号戦争」と「暗号化を守んなきゃいけない理由」 | P2Pとかその辺のお話R

以下の文章は、電子フロンティア財団の「 EFF at 30: Saving Encryption, with Technologist Bruce Schneier 」という記事を翻訳したものである。 Electronic Frontier Foundation オンラインの自由を守り続けてきたEFFの30周年を記念して、作家、セキュリティ・テクノロジストで、EFF理事でもある ...

https://p2ptk.org/freedom-of-speech/3278

暗号化と表現の自由を脅かす米EARN IT法案とは何か？ | P2Pとかその辺のお話R

以下の文章は、電子フロンティア財団の「 In 2020, Congress Threatened Our Speech and Security With the "EARN IT" Act 」という記事を翻訳したものである。 Electronic Frontier Foundation ...

https://p2ptk.org/freedom-of-speech/3286

バイデン政権は暗号化政策の方針を転換せよ | P2Pとかその辺のお話R

以下の文章は、電子フロンティア財団の「 Incoming Biden Administration Officials Should Change Course on Encryption 」という記事を翻訳したものである。 Electronic Frontier Foundation ...

https://p2ptk.org/freedom-of-speech/3288

2021.03.03

レビュー依頼が多くてだんだんとコミュニケーションが雑になってるというか、コードに対してシビアになりすぎている　ここを直すならこっちも直してください。せっかくなのでみたいな。これはあまり良いふるまいではないので気をつける。実装者に余計なプレッシャーを与えるし、実装レベルが急に上がるわけでもないし。レビュアーが気持ち良くなるだけで利がない。

過去に参画していたプロジェクトでレビューの文面や指摘がかなり厳しい人がいて、PRをだすのがとても嫌になった記憶がある。あまりに態度がきついのでレビューとはこういうものなのかと思って調べ、見つけたのが↓の記事。

How to Do Code Reviews Like a Human (Part Two)

This is the second half of my article about how to communicate well and avoid pitfalls in code reviews. Here, I focus on techniques to bring your code review to a successful close while avoiding ugly conflict. I laid the groundwork in Part One, so I recommend starting there.

https://mtlynch.io/human-code-reviews-2/

こっち日本語訳

人間らしくコードレビューするには(パート2) | Yakst

この記事はコードレビューの際に落とし穴にはまらずに、どのようにうまくコミュニケーションをとるか、に関する記事の後半部分です。今回はひどい衝突を避け成功裏にレビューを終わらせるテクニックに焦点をあてます。パート1 で基礎的なことを述べましたので、そこから読み始めることをお勧めします。我慢ができない方のために、簡単にお伝えしますと次の通りです: ...

https://yakst.com/ja/posts/4965

結局プログラマーは人間でコードレビューはコミュニケーションの延長で、実装者とレビュアーは状況に応じて逆転する。厳しい言葉で殴り合っていたら身が持たない。マウント取るためにレビューしているわけではない。自戒。

2021.03.02

スケジュール管理がだるい。二月の初旬〜中旬は体調が優れなかったこともあって予定らしい予定が入れられず、その反動で最近は色々と予定が入っている。といってもこれで多分普通の社会人とどっこいくらいかと思ったけどよう知らん。

最近、家のゴミ箱を新調した。二トリの35Lのやつを使っていたんだけど、リモートワークで家にいることが増えるのに比例して家庭ゴミも増えたので、45Lのやつを買った。これ↓

スリム蓋付きゴミ箱タワー | 山崎実業コラム Simple Life Lab.生活雑貨・インテリア・キッチン収納情報

スリムな蓋付きゴミ箱。組み立て簡単！45ℓゴミ袋がぴったりのスリムな蓋付きゴミ箱。 45ℓのゴミ袋がスッポリ入るように設...

https://www.yamajitsu.co.jp/lab/item/%e3%82%b9%e3%83%aa%e3%83%a0%e8%93%8b%e4%bb%98%e3%81%8d%e3%82%b4%e3%83%9f%e7%ae%b1-%e3%82%bf%e3%83%af%e3%83%bc.html

スリム蓋付きゴミ箱タワー | 山崎実業コラム Simple Life Lab.生活雑貨・インテリア・キッチン収納情報

しっかりしているように見えるけど、実際は意外とペラペラでびっくりしたし蓋の取付づらさにもびっくりした。蓋が本当に取り付けられなくて深夜にうんざりしながら二度と買わないと思った。

ただまぁ完成するとそれなりにしっかりしているように見えるし、二度と買わないは言いすぎたなと思う。ゴミ箱ってこういうものなのかもしれない。でも袋交換するたびにめんどそう。

2021.02.21

ブログのcssが限界になってきたのでTailwindCssを使ってみた。cssフレームワークをちゃんと使ったことがないせいかもしれないが、htmlのセマンティクスをガン無視して全てcssでスタイルをあてるってのが違和感。要は全部divとspanで書けてしまう。まぁ使用例をみてもそうなので多分そういう指向なんだと思う。

利点は細かいスタイルごとにクラスを提供しているのでカスタマイズしやすい。

Feature Sections - Official Tailwind CSS UI Components

by the creators of Tailwind CSS Beautiful UI components by the creators of Tailwind CSS

https://tailwindui.com/components/marketing/sections/feature-sections

Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.

Documentation for the Tailwind CSS framework.

https://tailwindcss.com/

Tailwindへの批判記事も貼っておくか。

Tailwind CSSが私には合わなかった理由

Post on:2021年1月29日ここ1,2年で、Tailwind CSSを使用する人が増えてきました。Tailwind CSSはユーティリティファーストのフレームワークで、いくつかのclassを組み合わせることでUIコンポーネントやレイアウトを簡単に実装できます。 Webデベロッパーによる、Tailwind CSSが私には合わなかった理由を紹介します。 Why Tailwind ...

https://coliss.com/articles/build-websites/operation/css/why-tailwind-css-is-not-for-me.html

2021.02.20

Cookieの仕様変更のやつ、去年のChromeで実装されて3rdパーティのCookieが軒並み動かなくなるのではと話題になった。それで自分でも調べてたけどちゃんと記事読んでなかったので改めて読んだ。

Cookieを使用した攻撃方法なんかは気になるたびに毎回調べたりしているんだけど、いまだに手法と名前が一致しない。Side Channel Attackってのは初めて知った、Timing Attackやらの類似の手法の総称らしい。

Cookie の性質を利用した攻撃と Same Site Cookie の効果 | blog.jxck.io

CSRF は、この SNS の場合、別の罠サイトを用意し SNS への正規の投稿と同じリクエストを作り出すことで、ユーザに対して意図しない投稿を行わせるといった攻撃である。例えば、正規の投稿はログイン状態で https://sns.example.com/posts/new にある以下の form から行うものであったとする。この form を submit した時に送信される HTTP Request の概観は以下のようになるだろう POST /posts HTTP/1.1 Host: sns.example.com Cookie: deadbeef Origin: https://sns.example.com Referer: https://sns.example.com/posts/new msg=hello サーバは、 Cookie の正当性を確認し、正ければ投稿を受け付ける。ここで、攻撃者は https://darkside.jxck.io/csrf に以下のような HTML を仕込んだ罠ページを用意する。こんにちはこんにちは post Form の action に URL 全体を入れている点に注目したい。そして、 https://sns.example.com にログイン済みのユーザをこのページに誘導し、なんらかの方法で

https://blog.jxck.io/entries/2018-10-26/same-site-cookie.html

Storage Side Channels Attackっていうのもあるらしく、これはサーバーのレスポンスからユーザーやコンテンツの有無を確かめるっていう手法っぽい。というか自分もスクレイピングを効率よくするためにこういう観点で調べたりする。

owasp.org

https://owasp.org/www-pdf-archive/Side_Channel_Vulnerabilities.pdf

jsの並行モデルとイベントループについて。この記事だけだと理解が難しい。

並行モデルとイベントループ

JavaScriptは、"event loop"に基づく同時実行モデルを持ちます。このモデルはC言語やJavaのような他の言語のモデルとかなり異なっています。後続のセクションでは、理論モデルを説明します。現代のJavaScriptエンジンは、記載されたセマンティクスに従って実装され、また高度に最適化されています。関数呼び出しはフレームのスタックを形成します。 barを呼び出すと、 ...

https://developer.mozilla.org/ja/docs/Web/JavaScript/EventLoop

これはjsじゃないけどスタックとかフレームとかがいまいちわからんかったので読んだ。細かいところはまったく理解していない。

関数実行の流れを紐解く(弊研究室の某課題について考える2日目) - ごちうさ民の覚え書き

この記事は弊研究室の某課題について考える二日目の記事です。今日説明する部分は昨日の記事で説明しなかったmain関数の push 命令の部分です。データ構造としてのスタックを理解していれば読めると信じます。突っ込みは大歓迎です。ここを前回話さなかったのはスタックや関数実行の仕組みにまで踏み込むからです。では行きます。スタックとスタックフレーム(予備知識) ...

https://kataware.hatenablog.jp/entry/2017/12/02/224444

このサイトだとアニメーションでイメージがしやすい。

latentflip.com

http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D

これはイベントモデルの欠点を体系的にまとめている論文を紹介したブログ記事。

イベントはスレッドに比べて何故ダメなのか (Why Events Are A Bad Idea)

並行処理をプログラミングする方法は大別すると、スレッドなどを利用した同期処理的な書き方とイベントを利用した非同期処理的な書き方があります (イベントループ)。最近 C10K問題が有名になったことや、 Node.js が流行っていて Node.js のメリットとしてイベントモデルであるため C10Kが解決されるというのが上げられていたりして、 ...

https://www.yunabe.jp/docs/why_events_are_a_bad_idea.html

↓は上の論文の補足的な記事で、結局イベントモデルを実現している実装に問題があるよねみたいなことが書かれている。

Are events really a bad idea after all?

This week I decided to start investing some time to read all those papers that had slowly accumulated in my bookmark. The first of them was on the topic of event-based systems and why they might not be as beneficial as previous claims argued they were.

https://dimosr.github.io/are-events-bad/

2021.02.18

もう二月も二週間しかない。

一年前くらいからPocketってアプリを使って気になる記事やらなんやらを全部突っ込んでたんですが、そのまま放置していたので一日一記事消化していこうと思った。

Discover stories on Pocket

Discover fascinating stories from all across the web with Pocket.

https://getpocket.com/explore

今日はこれ。見事に一年前の記事だな。

仮想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 ...

https://eh-career.com/engineerhub/entry/2020/02/18/103000

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する場面で使っていくといいという話。スタックオーバーフローのリンク先のほうがコード例わかりやすい気がしてきたのでみなさん最後にこんなこと言ってアレなんですが、スタックオーバーフローのほうも読みましょう😅

https://tech-1natsu.hatenablog.com/entry/2019/02/02/200829

2021.02.15

昔作った欲しいものリストにある書籍が近隣図書館で貸し出しているかを確認するツールをrustで作り直している。

amazonの欲しいものリストにある本が近隣図書館にもあるか調べる

Created: August 10, 2020 2:57 PMLast Edited: October 30, 2020 4:40 AM これが欲しいものリストです。 https://www.amazon.jp/hz/wishlist/ls/1LT97CIJHMD3V コードはここあまり面白いことはしておらず、puppeteerを使ってスクレイピングし、markdownで出力しているだけ。markdownで出力している処理は割と最悪なコードになっている。あと、大田区立図書館資料検索サイトの「もしかして？」の解釈がすごいことになっていて、以下みたいなことになったりしていて、この辺はどうにかできないものか。一覧はここに置いた。概ね欲しいものが得られているが、パワー・エコロジーについては上のような結果なので当然間違っている。まぁよしとします。

https://mex.busui.org/text/8

使っているのはWebdriverでブラウザを操作できる fantoccini ってライブラリです。頑張って一から作ろうと思ったけどさすがにめんどくてやめた。

jonhoo/fantoccini

A high-level API for programmatically interacting with web pages through WebDriver. This crate uses the WebDriver protocol to drive a conforming (potentially headless) browser through relatively high-level operations such as "click this element", "submit this form", etc. Most interactions are driven by using CSS selectors.

https://github.com/jonhoo/fantoccini

先週は仕事も自分の作業も何もできていないので今週はちょっと頑張ります。

最近SUKISHAをよく聴いてる。twitterで見かけたやつで結構いい。この曲が好き。

SUKISHAの"おうちであそぼう (feat. Michael Kaneko)"

曲・3:04・2020 · Apple Musicのサブスクリプションに登録すると利用できます。無料で体験する。

https://music.apple.com/jp/album/%E3%81%8A%E3%81%86%E3%81%A1%E3%81%A7%E3%81%82%E3%81%9D%E3%81%BC%E3%81%86-feat-michael-kaneko/1511930518?i=1511930586

2021.02.11

祝日、かなり天気がいいけど、まだ体調が安定しないので部屋に籠もっています。

ブログにダークモードを付けようと頑張っているけど、最初の頃にめちゃくちゃなstyleを書いてしまったせいで面倒臭くなっている、とか書いてたらできた。

スイッチトグルを作るのがめんどくさかったのでボタンを雑に二つ置いています。適当すぎる。

2021.02.10

これ面白そう。コード読んでみようかな

Express in React! React Backend! Whut?! 🤯

Hey there! One more implemented crazy idea for React So, long time ago when I was researching react custom renderer, I had a crazy idea to use it for Node.js server/backend. Finally, I've decided to try. It's not fully-ready solution (in process) Don't use it for production Yes, I know about scalability, architecture and etc.

https://dev.to/orkhanjafarovr/express-in-react-react-backend-whut-4lkg

8日に急に38.7℃の熱を出してしまった。2月2日にも熱を出していたので同じ病院へ行って、診察とPCR検査を受けた。検査は明日の昼ごろらしいのでちょっとドキドキしている。

目薬入れるの下手すぎて顔がビシャビシャになってる。

2021.02.07

森喜朗の発言でまたtwitterデモが始まったけど、もう日本は国内でやりすぎてて麻痺してる気がする。

あと、ドイツ大使館の#GenderEquality の投稿に「写真に女性職員の方が多い。欧州の男女平等ってこんなんだぜ」みたいなリプライつけて暴れ回っているスペイン語圏の外国人いて笑った。いろいろあるなぁ。

話を変えます

眼精疲労が割と辛いのでMacBookProのディスプレイをやめて、個別のディスプレイを使おうと思っている。ただ、自分はもう10年ほどMacBookProを使い続けていて、どうも他のキーボードとマウスが合わないんですよね。とくにマウスは本当に使うのがだるい。これはもう体がMacBookProに最適化されてしまっている。Appleが出しているキーボードとトラックパッドを買えば解決するのだけど、両方買うと三万円近くかかるので少し躊躇っている。

禁煙をしているし、他にも欲しいものあるし、貯金するか。

MacのためのMagic Trackpad 2（スペースグレイ）を購入

新しいスペースグレイの仕上げで、魔法という名前にふさわしい見た目と使い心地になったMagic Trackpad 2。長時間駆動するバッテリー、感圧タッチテクノロジー、すべてがガラスの表面を持っています。apple.comで今すぐ購入できます。