フロントエンド関連で今日学んだことを共有https://bcrikko.github.io/https://bcrikko.github.io/til/posts/2021-04-16/pulldown-dropdown/https://bcrikko.github.io/til/posts/2021-04-16/pulldown-dropdown/dropdownはMicrosoft発で一般的に使われている。pulldownはApple発Fri, 16 Apr 2021 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-04-04/valueasnumber-valueasdate/https://bcrikko.github.io/til/posts/2022-04-04/valueasnumber-valueasdate/input要素で入力されたものをinput#valueで取得すると、すべて文字列になってしまう。ただ<input type="number">や<input type="date">の場合は、文字列ではなく数値や日付オブジェクトとして取得したい。そのときにvalueAsNumberやvalueAsDateを使うことで、数値や日付オブジェクトとして取得できる。Mon, 04 Apr 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-04-05/css-cascade-layers/https://bcrikko.github.io/til/posts/2022-04-05/css-cascade-layers/CSS Cascade Layersが使えるようになると、CSSフレームワークを利用するときに詳細度の関係でカスタムスタイルが当たらないような状況に悩まされずにすむ。Tue, 05 Apr 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-04-15/dialog-backdrop/https://bcrikko.github.io/til/posts/2022-04-15/dialog-backdrop/Safari 15.4がdialog要素と::backdrop疑似要素をサポートし、全モダンブラウザで利用可能になった。dialog.style.display = "none" や dialog.style.display = "block" のようなスタイルの変更を行わずに、ダイアログの背景を制御できるようになった。Fri, 15 Apr 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-04-23/type-on-playground/https://bcrikko.github.io/til/posts/2022-04-23/type-on-playground/TypeScript Playgroundででコードを書く際、インライン表示したい形の下に^?をコメントすることで、マウスオーバーしなくても型情報が表示される。スクショを撮るときに便利！Sat, 23 Apr 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-05-11/trigonometric-function-with-web-animation/https://bcrikko.github.io/til/posts/2022-05-11/trigonometric-function-with-web-animation/Web Animations APIを使うことで簡単にアニメーションを管理できる。CSSの@keyframesで10°ずつ座標を書き表すことは大変だが、JavaScriptを使うことでより柔軟にアニメーションを制御できる。Wed, 11 May 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-05-12/web-animation-api/https://bcrikko.github.io/til/posts/2022-05-12/web-animation-api/Web Animations APIを使うことで、UI上での複雑なアニメーションを管理しやすくなった。"Thu, 12 May 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-06-13/typeguard/https://bcrikko.github.io/til/posts/2022-06-13/typeguard/TypeScriptでは、Type Predicateの引数に複数値を渡すことで型を検査できる。Mon, 13 Jun 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-07-07/css-masonry/https://bcrikko.github.io/til/posts/2022-07-07/css-masonry/Masonryレイアウト（組積レイアウト）をするにはJavaScriptが必須（jQueryのプラグインとか）だったが、Gridレイアウトの機能でCSSだけで実現できるようになった。Thu, 07 Jul 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-07-08/fullmarathon-in-browser/https://bcrikko.github.io/til/posts/2022-07-08/fullmarathon-in-browser/CSSではユニットにcm（センチメートル）を使用できる。ただし、ブラウザのheightの限界は18.94kmなので、ハーフマラソンもできない。Fri, 08 Jul 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-07-13/range-in-javascript/https://bcrikko.github.io/til/posts/2022-07-13/range-in-javascript/10〜20の範囲の数値をループで処理したい、みたいなケースがある。for文を使うことで実装可能だが、もっとわかりやすくするためにジェネレータを使ってrange関数を実装する。Wed, 13 Jul 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-07-19/solid-in-react/https://bcrikko.github.io/til/posts/2022-07-19/solid-in-react/主にオブジェクト指向プログラミングの文脈において語られるSOLID原則のエッセンスを、Reactを使ったフロントエンド開発に適用するヒント。Tue, 19 Jul 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-07-21/private-constructor/https://bcrikko.github.io/til/posts/2022-07-21/private-constructor/TypeScriptでconstructorをprivateにすることで、目的別にインスタンスを生成できる。Thu, 21 Jul 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-07-22/srp-storategy/https://bcrikko.github.io/til/posts/2022-07-22/srp-storategy/「単一責任の原則（Single Responsibility Principle）」は聞いたことあったが、「単一責任“選択”の原則」は初耳だった。簡単に説明すると「同じ条件分岐を書くなら処理をまとめること」を指している。Fri, 22 Jul 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-08-03/deep-property/https://bcrikko.github.io/til/posts/2022-08-03/deep-property/分割代入を使うことで、オブジェクトのプロパティを変数として抜き出せる。深いところにあるプロパティを取得するためには、分割代入のときに同じような階層をつくる。Wed, 03 Aug 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-08-04/typescript-result-type/https://bcrikko.github.io/til/posts/2022-08-04/typescript-result-type/Result型とは、成功と失敗の両方を表現できる型で、それぞれのハンドリングがしやすくなる。ただし、パターンマッチが使いたくなる。Thu, 04 Aug 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-08-23/multiple-type-guard/https://bcrikko.github.io/til/posts/2022-08-23/multiple-type-guard/TypeScriptのタイプガードは、基本1つのパラメータのみを扱うが、オブジェクトとして渡すことで複数個同時に型を絞ることができる。Tue, 23 Aug 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-08-27/type-guard/https://bcrikko.github.io/til/posts/2022-08-27/type-guard/TypeScriptで複数の状態を持つEntityクラスを管理する際に、Type Guardしないと扱えないようにする。Sat, 27 Aug 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-08-29/bad-smell-css/https://bcrikko.github.io/til/posts/2022-08-29/bad-smell-css/私がCSSのコードレビューをする際、何を頼りにアタリをつけているかを言語化してみる。Mon, 29 Aug 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-08-30/min-max-widths/https://bcrikko.github.io/til/posts/2022-08-30/min-max-widths/min-widthとmax-widthが同時に設定されており、かつその値に矛盾が生じている場合がある。（CSSを掃除しない人がやりがち）Tue, 30 Aug 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-08-31/accessible-file-input/https://bcrikko.github.io/til/posts/2022-08-31/accessible-file-input/SpinnerやLoaderを実装するとき、ローディングを表現するHTML要素がないのでspanやdivでマークアップすることが多い。ただ、そのままではスクリーンリーダーにとっては何も伝わらないのでアクセシブルな実装方法を考える。Wed, 31 Aug 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-08-31/accessible-spiner/https://bcrikko.github.io/til/posts/2022-08-31/accessible-spiner/SpinnerやLoaderを実装するとき、ローディングを表現するHTML要素がないのでspanやdivでマークアップすることが多い。ただ、そのままではスクリーンリーダーにとっては何も伝わらないのでアクセシブルな実装方法を考える。Wed, 31 Aug 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-08-31/avoid-margin-top/https://bcrikko.github.io/til/posts/2022-08-31/avoid-margin-top/marginは相殺が発生するプロパティなため、margin-topとmargin-bottomが混在しているとCSSのメンテがつらくなる。私はmargin-bottom教信者なので、それを布教したい。Wed, 31 Aug 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-09-01/memory-in-js/https://bcrikko.github.io/til/posts/2022-09-01/memory-in-js/JavaScriptでクラスを使うときに、メンバ変数やStatic Classなどの使い方によっては無駄にメモリを消費してしまうことがある。以下のように大量のインスタンスを生成しテストを行い、ヒープメモリの使用量を調査した。Thu, 01 Sep 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-09-02/modern-frontend-design/https://bcrikko.github.io/til/posts/2022-09-02/modern-frontend-design/レガシーなウェブUIは、リクエストが完了してから画面をレンダリングするため、ローダーやスピナーなどを表示して、レスポンスがあるまで待たなければならない。GitHubをはじめ、昨今のUIでは非同期で更新し、表示内容は即反映。リクエストに失敗したら元に戻す戦略を取っているサイトが多い。Fri, 02 Sep 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-09-05/sethtml-sethtmlunsafe/https://bcrikko.github.io/til/posts/2022-09-05/sethtml-sethtmlunsafe/Chrome 105からのExperimentalな機能としてElement#setHTML()が提供された。※2025-01-06現在は、Element#setHTMLUnsafe()に変わっている。昨今、ReactやVueなどのJavaScriptライブラリ/フレームワークを使う事が多いので、文字列をそのままHTMLとして扱うことはほとんどないと思う。ただし、レガシーなシステムでは今でも危険な実装が残っているかもしれないため、注意が必要だ。Mon, 05 Sep 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-09-13/interface-name/https://bcrikko.github.io/til/posts/2022-09-13/interface-name/私が元C#erなので、Microsoftっぽい命名規則に則ってInterfaceの名前を決めることが多い。単一メソッドを定義する場合、自分以外を操作するメソッド、または複数メソッドを提供する場合、標準的なクラス操作をする場合Tue, 13 Sep 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-09-14/overscroll-behavior/https://bcrikko.github.io/til/posts/2022-09-14/overscroll-behavior/overscroll-behaviorを使うことで、スクロール可能な要素が重なっているときにポインターのある要素以外のスクロールを防ぐことができる。たとえばウェブサイトの右下にチャットボットを表示するとき、過去の会話を見ようとスクロールするとメインコンテンツまでスクロールしてしまう、という現象を防ぐことができる。Wed, 14 Sep 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-09-15/broadcast-channel-api/https://bcrikko.github.io/til/posts/2022-09-15/broadcast-channel-api/Broadcast Channel APIを使うことで、同一デバイス、同一オリジンにおいて任意のチャンネル名を指定し閲覧コンテキスト間（※）で相互通信ができる。※閲覧コンテキストとは、ウィンドウ、タブ、フレーム、iframwのこと。たとえば、ユーザーが別タブで別アカウントでログインしたことを検知してメッセージを表示するなどができる。Thu, 15 Sep 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-09-21/frontend-developers-point-of-view/https://bcrikko.github.io/til/posts/2022-09-21/frontend-developers-point-of-view/フロントエンドエンジニアが、デザイナーのつくったUIデザインを見たときの頭の中を整理してみる。私は、このUIデザインを見たときに「見た目」ではなく「構造」に着目して、どのような要素が含まれているか考える。できればこのレベルのことをデザイナーにもやってもらって、統一感のあるUIデザインをしてほしい。Wed, 21 Sep 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-09-28/anemic-domain-model/https://bcrikko.github.io/til/posts/2022-09-28/anemic-domain-model/ひとからDDDの話を聞くと、だいたい語られる「ドメインモデル貧血症」が起こる瞬間を体験した。ドメインモデルがただのデータの塊になってしまい、ふるまい（ビジネスロジック）がほとんど含まれない状態が大量発生した。ただのgetter/setterを持つだけのデータクラスで、「コストは、データベースのマッピング」と書かれているとおり、思いっきりそのコストを払わされている。 Wed, 28 Sep 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-09-30/typescript-satisfies/https://bcrikko.github.io/til/posts/2022-09-30/typescript-satisfies/TypeScript 4.9 betaでsatisfies演算子が導入された。このようにして、`as const`と`Record<K, V>`のいいとこどりができるようになった。Fri, 30 Sep 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-10-21/copy-and-paste-with-style/https://bcrikko.github.io/til/posts/2022-10-21/copy-and-paste-with-style/GitHubでコミットやIssueのリンクをコピー（Ctrl+C/Command+C）して、テキストエリアに貼り付ける（Ctrl+V/Command+V）と[リンクテキスト](URL)のような形式で貼り付けられる。他にもWebページの要素をコピーして、リッチテキストエディタなどに貼り付けるとスタイルも一緒に貼り付けられる。これらはClipboardEvent#clipboardDataのデータを読み取ることで実現可能だ。Fri, 21 Oct 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-10-21/properties-union/https://bcrikko.github.io/til/posts/2022-10-21/properties-union/オブジェクトのプロパティを連結して`Foo | Foo.Bar | Foo.Bar.Baz`のようなUnion Typeがほしいときがある。Fri, 21 Oct 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-10-25/reading-club/https://bcrikko.github.io/til/posts/2022-10-25/reading-club/DDD読書会を開催するにあたり、いろいろな読書会スタイルについて調べた。本物のカフェのようにリラックスした雰囲気の中で、テーマに集中した対話を行います。Tue, 25 Oct 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-10-27/h1-in-section/https://bcrikko.github.io/til/posts/2022-10-27/h1-in-section/昔々、まだHTML5の頃には、section要素で区切れば1ページ内で複数h1要素を使っても良いという仕様があった。HTML5が廃止され、HTML Living Standardが採用された現在では、h1要素はページに1つだけになっている。Thu, 27 Oct 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-10-29/encapsulation/https://bcrikko.github.io/til/posts/2022-10-29/encapsulation/プログラミングにおけるカプセル化と情報隠蔽は、同じ意味として使われることが多い。しかし、厳密にはちょっとだけ異なる。Sat, 29 Oct 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-11-07/typescript-4.9-rchttps://bcrikko.github.io/til/posts/2022-11-07/typescript-4.9-rcTypeScript 4.9にクラス内自動アクセサが追加された。以下のようにクラスのメンバ変数にaccessorをつけることで、getterとsetterを自動で生成される。accessorが追加された背景には、TypeScript 5.0で追加されるデコレータに必要になるらしい。Mon, 07 Nov 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-11-11/dual-package/https://bcrikko.github.io/til/posts/2022-11-11/dual-package/rollupを使ってデュアルパッケ―ジを作る方法を紹介する。Fri, 11 Nov 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2022-12-09/chatgpt-talk/https://bcrikko.github.io/til/posts/2022-12-09/chatgpt-talk/Web Speech APIを使うことで、ChatGPTを簡単に喋らせることができる。Fri, 09 Dec 2022 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-01-11/ddd/https://bcrikko.github.io/til/posts/2023-01-11/ddd/ドメイン駆動設計（エヴァンス本）の要点Wed, 11 Jan 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-01-19/valueobject/https://bcrikko.github.io/til/posts/2023-01-19/valueobject/ValueObjectには複数の意味がある。DDDの文脈に限ると「属性を表現するためのオブジェクトがValueObject」となる。Thu, 19 Jan 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-01-24/what-users-want/https://bcrikko.github.io/til/posts/2023-01-24/what-users-want/ユーザーの満足度が高いモノ、低いモノTue, 24 Jan 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-01-30/typescript-5.0-betahttps://bcrikko.github.io/til/posts/2023-01-30/typescript-5.0-betaTypeScript 5.0 Betaがリリースされた。Mon, 30 Jan 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-02-08/immutable-array-methods/https://bcrikko.github.io/til/posts/2023-02-08/immutable-array-methods/EMCAScript proposalが更新され、Arrayにイミュータブルメソッドが生えてくるらしい。Wed, 08 Feb 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-02-10/readable-test/https://bcrikko.github.io/til/posts/2023-02-10/readable-test/ユニットテストでリテラルを使うか変数を使うか問題。いろいろ話を聞いて考えた結果をまとめる。Fri, 10 Feb 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-02-14/autofocus/https://bcrikko.github.io/til/posts/2023-02-14/autofocus/<dialog>でマークアップされていればautofocus属性があってもなくても関係なく最初のfocusableな要素にフォーカスされるみたいなので、現時点ではまだ考えなくても良さそう。Tue, 14 Feb 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-02-17/japanese-programming/https://bcrikko.github.io/til/posts/2023-02-17/japanese-programming/我々日本人に英語文化のプログラミングは読みづらい。日本語でわかりやすくプログラミングしたい！Fri, 17 Feb 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-02-27/accessible-form/https://bcrikko.github.io/til/posts/2023-02-27/accessible-form/1つのinputフィールドに対してラベル、説明、エラーを紐づける方法。Mon, 27 Feb 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-03-02/existentialism/https://bcrikko.github.io/til/posts/2023-03-02/existentialism/同僚に教えてもらった資料に実在主義とモデリングの関連性が語られていた。Thu, 02 Mar 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-03-03/filtered-type/https://bcrikko.github.io/til/posts/2023-03-03/filtered-type/TypeScriptの型も、配列のようにフィルターしたい。Fri, 03 Mar 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-03-10/multi-ref/https://bcrikko.github.io/til/posts/2023-03-10/multi-ref/ときどき複数のrefを使いたいことがあるが、コンポーネントに渡せるrefはひとつだけなのでちょっとした対応が必要。Fri, 10 Mar 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-03-13/avoid-utilities-helper/https://bcrikko.github.io/til/posts/2023-03-13/avoid-utilities-helper/Utilities、Helpers、"その他" は極力避けるべきだ。Mon, 13 Mar 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-03-13/cannot-do/https://bcrikko.github.io/til/posts/2023-03-13/cannot-do/「できないこと」を調べるのは悪魔の証明と同様に難しい。Mon, 13 Mar 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-03-14/ubiquitous-language/https://bcrikko.github.io/til/posts/2023-03-14/ubiquitous-language/Ubiquitous Language and Naming · Enterprise CraftsmanshipTue, 14 Mar 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-03-23/ts-decorator-measure/https://bcrikko.github.io/til/posts/2023-03-23/ts-decorator-measure/TypeScript 5.0で追加されたDecoratorでパフォーマンス計測する。Thu, 23 Mar 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-03-23/ts-decorator-memo/https://bcrikko.github.io/til/posts/2023-03-23/ts-decorator-memo/TypeScript 5.0で追加されたDecoratorでメモ化する。Thu, 23 Mar 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-03-27/content-model/https://bcrikko.github.io/til/posts/2023-03-27/content-model/「ブロックレベル要素」「インライン要素」という概念が必要か、それとも不要かという議論があった。Mon, 27 Mar 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-03-30/range-syntax/https://bcrikko.github.io/til/posts/2023-03-30/range-syntax/Safari 16.4がサポートしたことで、Range Syntaxが全主要ブラウザで利用可能になった。Thu, 30 Mar 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-03-30/search/https://bcrikko.github.io/til/posts/2023-03-30/search/search要素が追加されたことで、ARIAランドマークロールがすべて揃った。Thu, 30 Mar 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-03-30/ts-createprogram/https://bcrikko.github.io/til/posts/2023-03-30/ts-createprogram/TypeScriptのモジュールを使って80個ほどの型定義を作成しようとしたとき、パフォーマンスがかなり悪かった。Thu, 30 Mar 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-04-03/css-property/https://bcrikko.github.io/til/posts/2023-04-03/css-property/@propertyは、CSS Houdiniの一種で、Custom Propertyに制約を追加するための機能。Mon, 03 Apr 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-04-03/storybook-migration/https://bcrikko.github.io/til/posts/2023-04-03/storybook-migration/普通にマイグレーションしようとするとエラーになることが多いので、storybook関連のパッケージを削除して再度 init処理をするのがオススメMon, 03 Apr 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-04-05/css-nesting/https://bcrikko.github.io/til/posts/2023-04-05/css-nesting/Chrome 112でついに待望のCSS Nestingが使えるようになった。Wed, 05 Apr 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-04-07/inert/https://bcrikko.github.io/til/posts/2023-04-07/inert/inert属性が全主要ブラウザで利用可能になった。Fri, 07 Apr 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-04-11/text-wrap/https://bcrikko.github.io/til/posts/2023-04-11/text-wrap/text-wrap: balanceを使うことで、<wbr>を使うことなく日本語をいい感じに折り返し処理してくれる。Tue, 11 Apr 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-04-17/storybook-github-pages/https://bcrikko.github.io/til/posts/2023-04-17/storybook-github-pages/Storybookで生成したファイルをGitHub Pagesでホストするとエラーになる。Mon, 17 Apr 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-04-17/translate/https://bcrikko.github.io/til/posts/2023-04-17/translate/translate="no"をつけることで固有名詞やコードをページ翻訳の対象からはずせる。Mon, 17 Apr 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-04-18/css-trigonometric-function/https://bcrikko.github.io/til/posts/2023-04-18/css-trigonometric-function/いつも「将来使わないから学ぶ必要ない」と言われがちな三角関数がCSSで使えるようになった。Tue, 18 Apr 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-04-20/style-queries-container/https://bcrikko.github.io/til/posts/2023-04-20/style-queries-container/Chrome111/Edge111でStyle Queriesが使えるようになった。Style Queriesを使うことでコンテナ要素のスタイルを評価できる。Thu, 20 Apr 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-04-24/animation-function/https://bcrikko.github.io/til/posts/2023-04-24/animation-function/アニメーションのeasing-functionでlinear()が使えるようになった。Mon, 24 Apr 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-04-24/media-update/https://bcrikko.github.io/til/posts/2023-04-24/media-update/@media (update: …)を使うことでユーザーの使用デバイスにあわせてアニメーションをリッチにしたり、止めたりできる。Mon, 24 Apr 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-05-11/algebraic-effects/https://bcrikko.github.io/til/posts/2023-05-11/algebraic-effects/2019年時点でAlgebraic Effectsをサポートした言語はごく一部で広く使えるものではない。Thu, 11 May 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-05-11/nth-child-of-selector/https://bcrikko.github.io/til/posts/2023-05-11/nth-child-of-selector/:nth-childのof SelectorがFirefox113に実装されたことで、全主要ブラウザで利用可能になった。Thu, 11 May 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-05-16/debug-shared-worker/https://bcrikko.github.io/til/posts/2023-05-16/debug-shared-worker/SharedWorkerはそのままだとWorker内で発生したエラーやconsole.log()が見れない。Tue, 16 May 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-05-30/popover-dialog/https://bcrikko.github.io/til/posts/2023-05-30/popover-dialog/Popover APIがChrome114/Edge114にExperimentalとして実装された。Popover APIはセマンティクスを提供しない（あくまで属性のひとつ）。Tue, 30 May 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-06-16/anti-design-thinking/https://bcrikko.github.io/til/posts/2023-06-16/anti-design-thinking/最近、デザイン思考に対して批判的な記事を見かけることが多くなってきた。Fri, 16 Jun 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-06-19/cookie-store-api/https://bcrikko.github.io/til/posts/2023-06-19/cookie-store-api/Cookie Store APIがChrome、Edge、Safariで使えるようになった。Mon, 19 Jun 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-07-06/web-scraping/https://bcrikko.github.io/til/posts/2023-07-06/web-scraping/経済産業省が持続化給付金、家賃支援給付金、一時支援金、月次支援金における不正受給者の公表についてという不正受給者リストを公開していた。Thu, 06 Jul 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-07-12/cite/https://bcrikko.github.io/til/posts/2023-07-12/cite/引用するときに<cite>を使って引用元を明示するが、ここには著作物の名前（書籍、論文、詩、絵画などのタイトル）を入れるもので、作者名（著作者）を入れるものではない。Wed, 12 Jul 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-07-12/mix-blend-mode/https://bcrikko.github.io/til/posts/2023-07-12/mix-blend-mode/mix-blend-modeを使うと要素を重ねたときにペイントツールのレイヤー合成モードのような表現ができる。 Wed, 12 Jul 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-07-13/flip-animation/https://bcrikko.github.io/til/posts/2023-07-13/flip-animation/FLIPテクニックと呼ばれるもので、First、Last、Invert、Playの4つのステップでアニメーションを実装する方法だ。Thu, 13 Jul 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-07-18/array-group-to-map/https://bcrikko.github.io/til/posts/2023-07-18/array-group-to-map/lodashのGroupByのようなメソッドで簡単にグループできるProposalが提案されている。Tue, 18 Jul 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-07-18/google-review/https://bcrikko.github.io/til/posts/2023-07-18/google-review/Googleが公開しているエンジニアプラクティスのドキュメントにコードレビューについて書かれている。Tue, 18 Jul 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-07-21/accessible-canvas/https://bcrikko.github.io/til/posts/2023-07-21/accessible-canvas/Canvas要素の内容はスクリーンリーダーに読み上げられないため、なんらかの対策が必要。Fri, 21 Jul 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-07-25/scroll-driven-animation/https://bcrikko.github.io/til/posts/2023-07-25/scroll-driven-animation/Chrome115/Edge115でCSSだけでスクロール駆動アニメーションができるようになった。Tue, 25 Jul 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-07-27/view-transitions-api/https://bcrikko.github.io/til/posts/2023-07-27/view-transitions-api/View Transitions APIを使うことで、ページ遷移やDOMをいじったときに自動でアニメーションを追加してくれる。Thu, 27 Jul 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-08-01/animation-composition/https://bcrikko.github.io/til/posts/2023-08-01/animation-composition/animation-compositionが使えるようになった。Tue, 01 Aug 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-08-01/openapi-type/https://bcrikko.github.io/til/posts/2023-08-01/openapi-type/Open APIのスキーマ定義からメソッドごとにパスを取得する型Tue, 01 Aug 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-08-01/slice-splice-with-tospliced/https://bcrikko.github.io/til/posts/2023-08-01/slice-splice-with-tospliced/Array#with()とArray#toSpliced()が追加されたTue, 01 Aug 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-08-07/lumine/https://bcrikko.github.io/til/posts/2023-08-07/lumine/ルミネの広告みたいに、ちょっとポエミーなLGTMを書くことがある。Mon, 07 Aug 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-08-29/nested-border-radius/https://bcrikko.github.io/til/posts/2023-08-29/nested-border-radius/要素を入れ子にする場合、親と子で同じ値のborder-radiusを設定すると視覚的に微妙になってしまう。Tue, 29 Aug 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-09-01/ability-skill-capability/https://bcrikko.github.io/til/posts/2023-09-01/ability-skill-capability/Ability、Skill、Capabilityの違いFri, 01 Sep 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-09-04/blur-backdrop/https://bcrikko.github.io/til/posts/2023-09-04/blur-backdrop/モーダル表示時に::backdropを黒い半透明にすることが多い。だが、そのままだと背景が見えてしまい、モーダルの内容が見づらくなることがある。Mon, 04 Sep 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-09-15/div/https://bcrikko.github.io/til/posts/2023-09-15/div/HTML Living Standardが「divは他に適切な要素がない場合の最後の手段」と強く推奨している。Fri, 15 Sep 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-09-19/header-hgroup/https://bcrikko.github.io/til/posts/2023-09-19/header-hgroup/<header>と<hgroup>の使い分けTue, 19 Sep 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-09-19/menu-history/https://bcrikko.github.io/til/posts/2023-09-19/menu-history/HTMLの<menu>要素は廃止されたり、復活したりしている。Tue, 19 Sep 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-09-20/cyclomatic-complexity/https://bcrikko.github.io/til/posts/2023-09-20/cyclomatic-complexity/循環的複雑度（Cyclomatic Complexity: CC）は、客観的尺度を提供するために設計されたコードレベルのメトリクスだ。Wed, 20 Sep 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-09-25/budoux/https://bcrikko.github.io/til/posts/2023-09-25/budoux/Googleが開発しているBudouXを使うと、日本語のテキストに分かち書きできる。Mon, 25 Sep 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-09-29/form-sizing/https://bcrikko.github.io/til/posts/2023-09-29/form-sizing/field-sizingを使うと、入力内容によって<textarea>のheightが自動調整できる。Fri, 29 Sep 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-10-11/import-attributes/https://bcrikko.github.io/til/posts/2023-10-11/import-attributes/TypeScript 5.3で最新のImport Attributes（with）をサポートした。Import AttributesのProposalで紆余曲折あり、with { type: ... }に決まりそうだ。Wed, 11 Oct 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-10-19/copyright/https://bcrikko.github.io/til/posts/2023-10-19/copyright/<small>はHTMLの要素で、スタイルの表現とは独立して、著作権表示や法的表記のような、注釈や小さく表示される文を表します。Thu, 19 Oct 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-10-20/eslint-unicorn/https://bcrikko.github.io/til/posts/2023-10-20/eslint-unicorn/eslint-plugin-unicornは、古い書き方を推奨される新しい書き方に変えるプラグイン。ただし、宗教戦争になりそうなルールがあるので導入は難しそう。Fri, 20 Oct 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-10-25/cleaning-css/https://bcrikko.github.io/til/posts/2023-10-25/cleaning-css/CSSは常に掃除し、過不足なく実装しなければすぐ負債化する。Wed, 25 Oct 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-10-25/what-i-think-about-ui/https://bcrikko.github.io/til/posts/2023-10-25/what-i-think-about-ui/私が何を考えながらUI開発をしているか、言語化してみる。Wed, 25 Oct 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-11-01/eslint-deprecating-formatting-rules/https://bcrikko.github.io/til/posts/2023-11-01/eslint-deprecating-formatting-rules/ESLint v8.52でスペースやセミコロンなどの67のルールが一括非推奨になったWed, 01 Nov 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-11-13/css-exponential-functions/https://bcrikko.github.io/til/posts/2023-11-13/css-exponential-functions/CSSでpow()、sqrt()、log()、hypot()が使えるようになった。既存のsin()やcos()などと組み合わせることで、より柔軟なアニメーションが書きやすくなる。Mon, 13 Nov 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-11-21/markdown-alert/https://bcrikko.github.io/til/posts/2023-11-21/markdown-alert/GitHub Flavored Markdownでアラート記法が使えるようになった。Tue, 21 Nov 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-11-27/dynamic-css/https://bcrikko.github.io/til/posts/2023-11-27/dynamic-css/CSSStyleSheetとdocument#adoptedStyleSheetsを使うと、JavaScriptからCSSを動的に追加できる。Mon, 27 Nov 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-11-30/programming/https://bcrikko.github.io/til/posts/2023-11-30/programming/プログラミングの原則：構造化テキストを文字列結合で作らない、置換でいじらないThu, 30 Nov 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-11-30/ui-guideline/https://bcrikko.github.io/til/posts/2023-11-30/ui-guideline/一般的なUIコンポーネントごとにどんな名前が使われているか、関連コンポーネントはなにか、Propsはどんなものがあるか、HTMLはどのように書かれているかがまとまっているのでUIコンポーネントデザイン・開発するときに参考になりそう。Thu, 30 Nov 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-12-11/js-formatter/https://bcrikko.github.io/til/posts/2023-12-11/js-formatter/ESLint v8.53からスタイル関連のルールが非推奨になり、別途Formatterが必要になるのでいろいろ調べてみた。Mon, 11 Dec 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-12-12/details/https://bcrikko.github.io/til/posts/2023-12-12/details/details要素にname属性をつけるとグループ化することができるようになった。Tue, 12 Dec 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-12-14/baseline/https://bcrikko.github.io/til/posts/2023-12-14/baseline/2023年はCSS進化の年だといっても過言ではない。Thu, 14 Dec 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-12-14/data-oriented-programming/https://bcrikko.github.io/til/posts/2023-12-14/data-oriented-programming/DOPの原則は、昨今のソフトウェア設計におけるベストプラクティスと合致しているのでアリより。Thu, 14 Dec 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2023-12-26/intl-segments/https://bcrikko.github.io/til/posts/2023-12-26/intl-segments/Intl.Segmentsを使うことで、3rdパーティライブラリを使わなくても分かち書きできるようになった。Tue, 26 Dec 2023 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-01-11/google-login/https://bcrikko.github.io/til/posts/2024-01-11/google-login/母に「Googleアカウントでログインして」と言ったところつまずいたページ。Thu, 11 Jan 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-01-25/103-early-hints/https://bcrikko.github.io/til/posts/2024-01-25/103-early-hints/データをレスポンスする前に、必要なリソースをあらかじめブラウザに伝えることで表示速度を向上させることができる。Thu, 25 Jan 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-01-25/has-class/https://bcrikko.github.io/til/posts/2024-01-25/has-class/Firefox121が:has()をサポートしたことで、全主要ブラウザで利用可能になThu, 25 Jan 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-01-29/typespec/https://bcrikko.github.io/til/posts/2024-01-29/typespec/TypeSpecはAPI定義言語で、OpenAPIのスキーマ定義やクライアント、ドキュメントなどを生成できる。Mon, 29 Jan 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-01-30/typescript-5.4https://bcrikko.github.io/til/posts/2024-01-30/typescript-5.4TypeScript 5.4 betaがリリースされた。Tue, 30 Jan 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-01-31/hr-in-select/https://bcrikko.github.io/til/posts/2024-01-31/hr-in-select/いままでWebでは<select>内に区切り線を入れることができず、代替手段として<optgroup>が使われていたが、HTMLの仕様としてselect要素にhr要素を含められるようになったWed, 31 Jan 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-02-02/cap-height/https://bcrikko.github.io/til/posts/2024-02-02/cap-height/capという単位を使うと、アルファベットのベースライン〜キャップラインの高さを表現することができる。Fri, 02 Feb 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-02-02/eslint-cache/https://bcrikko.github.io/til/posts/2024-02-02/eslint-cache/ESLint実行時に—cacheフラグをつけることで、.eslintcacheが作成され変更があったファイルのみチェックするようになるので実行時間が短くなる。Fri, 02 Feb 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-02-05/aspect-ratio/https://bcrikko.github.io/til/posts/2024-02-05/aspect-ratio/aspect-ratioは画像に適用するイメージが強いけど、普通の要素でも使える。 Cardコンポーネントやタイル型UIで、width/heightに絶対値を指定するような方法より直感的でわかりやすい。Mon, 05 Feb 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-02-13/autofill/https://bcrikko.github.io/til/posts/2024-02-13/autofill/:autofillを使うことで、自動入力されたフィールドかどうかを判定できる。Tue, 13 Feb 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-02-15/fit-content/https://bcrikko.github.io/til/posts/2024-02-15/fit-content/fit-contentを使うことで、block要素でも中身のサイズに合わせてwidthが変わる。Thu, 15 Feb 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-02-15/fragment/https://bcrikko.github.io/til/posts/2024-02-15/fragment/DocumentFragmentを使うことで余計なcontainer要素を抑制できるThu, 15 Feb 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-02-16/color-font/https://bcrikko.github.io/til/posts/2024-02-16/color-font/Reactで`<title>`を変更する方法。Fri, 16 Feb 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-02-16/multi-state/https://bcrikko.github.io/til/posts/2024-02-16/multi-state/typeによって複数の状態を表現する方法で、react-router-domの実装を参考にしてみる。Fri, 16 Feb 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-02-16/react-title/https://bcrikko.github.io/til/posts/2024-02-16/react-title/Reactで`<title>`を変更する方法。Fri, 16 Feb 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-02-21/es2024/https://bcrikko.github.io/til/posts/2024-02-21/es2024/ES2024に追加される新機能が決まったWed, 21 Feb 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-02-28/mouseevent-touchevent-pointerevent/https://bcrikko.github.io/til/posts/2024-02-28/mouseevent-touchevent-pointerevent/Mouse Event、Touch Event、Pointer Event の違いWed, 28 Feb 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-02-28/set-pointer-capture/https://bcrikko.github.io/til/posts/2024-02-28/set-pointer-capture/Element#setPointerCapture()を使うと、Element#releasePointerCapture()が実行されるかpointerupされるまでキャプチャし続ける。Wed, 28 Feb 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-01/inherit-backdrop/https://bcrikko.github.io/til/posts/2024-03-01/inherit-backdrop/::backdropがスタイルを継承するようになったため、:rootで宣言した変数が使えるようになった。Fri, 01 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-04/vitest-usefaketimers/https://bcrikko.github.io/til/posts/2024-03-04/vitest-usefaketimers/useFakeTimersを使うと`Error: Test timed out in 5000ms.」となる。Mon, 04 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-05/engineer/https://bcrikko.github.io/til/posts/2024-03-05/engineer/「アジャイルサムライ」「リーダブルコード」「リーン」「エッセンシャル思考」「失敗の科学」「プログラマー脳」「ヘルシープログラマー」などの本を1冊にまとめたような本。一部「ん？ホンマか？」となる部分もあったが、読んでおいて損はない。Tue, 05 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-06/checkbox-switch/https://bcrikko.github.io/til/posts/2024-03-06/checkbox-switch/Safari TP 185でCheckboxのスイッチ化ができるようになった。Wed, 06 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-06/css-function-mixin/https://bcrikko.github.io/til/posts/2024-03-06/css-function-mixin/CSSでもSassの@functionや@mixinを使えるようにしようぜという議論がGitHubでされている。Wed, 06 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-06/scoped-css/https://bcrikko.github.io/til/posts/2024-03-06/scoped-css/Safari TP 185がCSS Scopingをサポートした。Wed, 06 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-07/flexbox-safe/https://bcrikko.github.io/til/posts/2024-03-07/flexbox-safe/safeキーワードを使うとコンテナ要素からはみ出した場合に「文章の先頭だけ表示」ができるようになる。Thu, 07 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-11/tdd/https://bcrikko.github.io/til/posts/2024-03-11/tdd/過去の自分は、テスト駆動開発（TDD）＝テストファーストという間違った認識をしていた。そこでテスト駆動開発 / Kent BecKを読んで認識が変わった。Mon, 11 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-14/efficient-css/https://bcrikko.github.io/til/posts/2024-03-14/efficient-css/ECSSとは、OOCSS、BEM、SMACSS、FLOCSSなどクラス名をどう命名するかに着目したCSS設計とはちょっと違っていて、どちらかというとコーディングガイドラインみたいなルール。Thu, 14 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-14/textarea-with-field-sizing/https://bcrikko.github.io/til/posts/2024-03-14/textarea-with-field-sizing/CSS4のfield-sizing()を使うことで、忌々しいtextareaの高さ問題を自動調整できるようになる。Thu, 14 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-15/json-canvas-format/https://bcrikko.github.io/til/posts/2024-03-15/json-canvas-format/JSON Canvas Formatとは、ObsidianのCanvas用に作られたJSONフォーマット。Fri, 15 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-15/tab-memo/https://bcrikko.github.io/til/posts/2024-03-15/tab-memo/contenteditable属性を使うことで、ブラウザのタブを簡易メモ帳にできる。Fri, 15 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-18/disital-ui-design-history/https://bcrikko.github.io/til/posts/2024-03-18/disital-ui-design-history/スキューモーフィズム、フラットデザイン、ニューモーフィズムMon, 18 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-21/css-variable-group/https://bcrikko.github.io/til/posts/2024-03-21/css-variable-group/Sassの.Block { &__Element: ... }のように&でCSSカスタムプロパティを拡張するCSS Variable Groupという提案がなされている。Thu, 21 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-27/focus-within/https://bcrikko.github.io/til/posts/2024-03-27/focus-within/:focus-withinを使うと、その要素、または子要素にフォーカスが当たったときにスタイルを当てられる。Wed, 27 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-28/chromenfriends/https://bcrikko.github.io/til/posts/2024-03-28/chromenfriends/Chrome系ブラウザ（ChromiumをベースとしたChromeをはじめ、Edge、Braveなどのブラウザを指す）Thu, 28 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-28/light-dark/https://bcrikko.github.io/til/posts/2024-03-28/light-dark/light-dark()を使うことで、ユーザー環境のカラースキームによって色が自動で切り替わる。Thu, 28 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-03-29/system-color/https://bcrikko.github.io/til/posts/2024-03-29/system-color/system-colorはユーザーエージェントが提供しているカラーパレットで、Windowのハイコントラストモードにすると強制色モードが有効になりsystem-colorが変わる。Fri, 29 Mar 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-04-05/divitis-divsoup/https://bcrikko.github.io/til/posts/2024-04-05/divitis-divsoup/divdivしたHTMLのことを軽蔑的な意味を込めてdivitis、またはdiv soupと呼ぶ。Fri, 05 Apr 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-04-18/align-content/https://bcrikko.github.io/til/posts/2024-04-18/align-content/flexやgrid用のコンテナを用意しなくてもalign-contentだけで上下中央揃えができるようになった。Thu, 18 Apr 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-04-18/ecmascript-stage4/https://bcrikko.github.io/til/posts/2024-04-18/ecmascript-stage4/ECMAScript Stage 4 になった仕様Thu, 18 Apr 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-04-23/html-test-with-css/https://bcrikko.github.io/til/posts/2024-04-23/html-test-with-css/CSSでHTMLをテストするTue, 23 Apr 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-04-26/popover-api-and-css-anchor-positioning/https://bcrikko.github.io/til/posts/2024-04-26/popover-api-and-css-anchor-positioning/Popover API + CSS Anchor Positioningでツールチップを表示する。Fri, 26 Apr 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-04-26/typescript-5.5https://bcrikko.github.io/til/posts/2024-04-26/typescript-5.5TypeScript 5.5 betaがリリースされた。Array#filter()で除外したはずの型が残るせいで不要なキャストが必要だったのが改善された。いままでもちょっとはチェックしてくれていたけど、基本的なチェックは全部やってくれるようになった。Fri, 26 Apr 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-07/node-v22/https://bcrikko.github.io/til/posts/2024-05-07/node-v22/Node.js v22がリリースされた。Tue, 07 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-09/return-element-react/https://bcrikko.github.io/til/posts/2024-05-09/return-element-react/<InfoMessage />というコンポーネントがあったとして、そのコンポ―ネントがInformationメッセージだけを返すのか、<p>でくくって返すのか利用者からはわからない。Thu, 09 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-09/web-platform-2024-04/https://bcrikko.github.io/til/posts/2024-05-09/web-platform-2024-04/2024年4月 全主要ブラウザで使えるようになった機能Thu, 09 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-13/nonexistent-type/https://bcrikko.github.io/til/posts/2024-05-13/nonexistent-type/不要な状態ができないような型を作るアプローチは良い、古事記にもそう書かれている。Mon, 13 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-14/css-logical-properties/https://bcrikko.github.io/til/posts/2024-05-14/css-logical-properties/margin-block/margin-inlineはLogical Properties（論理プロパティ）と呼ばれ、ブロックの先頭、インラインの末尾のような意味的な場所に対応している。 そのため、writing-modeがvertical-lrでもvertical-rlでも使える。Tue, 14 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-17/font-size/https://bcrikko.github.io/til/posts/2024-05-17/font-size/ブラウザの最小フォントサイズは10pxだったが、0pxまで表示できるようになっている。VisuallyHiddenの代わりに使えるかも知れない。Fri, 17 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-21/starting-style/https://bcrikko.github.io/til/posts/2024-05-21/starting-style/`@starting-style`を使うと、トランジション開始時のスタイルを定義できる。Tue, 21 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-21/url-parse/https://bcrikko.github.io/til/posts/2024-05-21/url-parse/URL.parse()を使うと、URL.canParse()とnew URL()を一度に行うことができる。Tue, 21 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-22/what-is-architecture/https://bcrikko.github.io/til/posts/2024-05-22/what-is-architecture/すべてのアーキテクチャ・設計手法は「関心の分離」を実現するための手段Wed, 22 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-23/attribute-driven-styling/https://bcrikko.github.io/til/posts/2024-05-23/attribute-driven-styling/BEMでいうところのModifierをclas に含めず、属性で表現しスタイリングすること。Thu, 23 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-24/dialog-inherit-color/https://bcrikko.github.io/til/posts/2024-05-24/dialog-inherit-color/dialog要素はコンテキストが切り替わるので、単純にcolor: inheritをしてしまうと直前の要素に指定されたcolorを継承してしまうからやっちゃダメかも。Fri, 24 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-28/architecture-conference/https://bcrikko.github.io/til/posts/2024-05-28/architecture-conference/全体的に「関心の分離をどうするか」をいろんな視点・手法で発表するカンファレンスだった。 Tue, 28 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-29/wake-lock/https://bcrikko.github.io/til/posts/2024-05-29/wake-lock/Screen Wake Lock APIは電子書籍を読んでいるときやレシピを見ているときなど、操作してないけど暗転されると困るときに使う。Wed, 29 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-05-30/slow-types/https://bcrikko.github.io/til/posts/2024-05-30/slow-types/Slow typesを書くとTypeScriptの型チェックが遅くなることがある。そのため、人間やブラウザだけでなく、コンパイラに優しいコードを書くことが求められる。Thu, 30 May 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-03/css-scroll-bar/https://bcrikko.github.io/til/posts/2024-06-03/css-scroll-bar/あらかじめスクロールバー分のスペースを確保することで、要素が増えスクロールバーが表示されてもガタつかないようにできる。Mon, 03 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-04/playwright-axe-accessibility-check/https://bcrikko.github.io/til/posts/2024-06-04/playwright-axe-accessibility-check/ReactやVueなどでコンポーネントを分割しながら開発していると、文書全体の整合性チェックができない。そのため、E2Eテストに組み込むことでレンダリング後のHTMLを確認する。Tue, 04 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-06/dont-dry-your-code-prematurely/https://bcrikko.github.io/til/posts/2024-06-06/dont-dry-your-code-prematurely/DRY原則は、「コード」ではなく「知識」の重複を防ぐこと。コードが重複しているから共通化しようと考えてはならない。Thu, 06 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-06/node-arg/https://bcrikko.github.io/til/posts/2024-06-06/node-arg/引用符なしの場合、src/**/*.js が文字列としてではなく、このパターンに一致するパスが引数に渡ってしまう。そのため「ダメな例」で target を出力すると src/**/*.js ではなく src/index.jsという文字列になる。Thu, 06 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-07/new-set-methods/https://bcrikko.github.io/til/posts/2024-06-07/new-set-methods/ES2025で追加予定（現在Stage4）の新しいSetメソッドを使うとArray#filter()の実装が楽になる。Fri, 07 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-12/dialog-focus/https://bcrikko.github.io/til/posts/2024-06-12/dialog-focus/dialog要素を表示したときに、ブラウザのデフォルトの挙動でフォーカスが当たる場所が微妙なので考えてみる。Wed, 12 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-13/d-ts/https://bcrikko.github.io/til/posts/2024-06-13/d-ts/以下のような*.d.tsファイルはプロジェクト内限定の参照専用型定義ファイルのため、distディレクトリには出力されない。Thu, 13 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-14/clipboard-api/https://bcrikko.github.io/til/posts/2024-06-14/clipboard-api/Firefox127がClipboard APIのRead/Writeをサポートしたことで、全モダンブラウザで利用可能になった。Fri, 14 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-17/joint-itelation/https://bcrikko.github.io/til/posts/2024-06-17/joint-itelation/Joint Itelationは2つ以上のイテレータ（配列など）を同時にループしたいときに使える。Mon, 17 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-17/promise-try/https://bcrikko.github.io/til/posts/2024-06-17/promise-try/関数には同期的な処理と非同期的な処理がある。関数利用者はいまから使う関数がPromiseを返すかどうか知りたくない。Mon, 17 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-21/state-of-js-2023/https://bcrikko.github.io/til/posts/2024-06-21/state-of-js-2023/個人的にState of JSをライブラリ選定の基準にするのは危険だと思っている。Fri, 21 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-24/close-watcher-api/https://bcrikko.github.io/til/posts/2024-06-24/close-watcher-api/CloseWatcherAPIを使うとPCのESCキー、スマホの戻るボタンを押したことを検知して処理できるため、マルチデバイス対応が容易になる。Mon, 24 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-26/css-anchor-positioning/https://bcrikko.github.io/til/posts/2024-06-26/css-anchor-positioning/CSS Anchor Positioningを使うとターゲット要素（アンカー要素）の位置を簡単に取得できるため、JavaScriptを使わずネットワーク図のような複雑なGUIを作ることができる。Wed, 26 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-06-28/class-type-predicate/https://bcrikko.github.io/til/posts/2024-06-28/class-type-predicate/自身の型を絞り込むために`T is U`のようなtype predicateを実装する場合、classとtypeでは挙動が異なるので注意が必要。Fri, 28 Jun 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-01/height-transition/https://bcrikko.github.io/til/posts/2024-07-01/height-transition/通常height:0→autoのトランジションはできないが、calc-size()が実装されたら使えるようになるMon, 01 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-02/css-property/https://bcrikko.github.io/til/posts/2024-07-02/css-property/を使うことで、JavaScriptからCSSカスタムプロパティを参照したときに正しい値を取得できるようになる。Tue, 02 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-10/scroll-in-modal/https://bcrikko.github.io/til/posts/2024-07-10/scroll-in-modal/Popover APIまたはdialog#showModal()で表示したdialog要素、::backdrop疑似要素はともにposition: fixedなのでBootstrapのようなスクロールができない。Wed, 10 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-12/css-if/https://bcrikko.github.io/til/posts/2024-07-12/css-if/Inline conditionals（if()）が CSS Values Module Level 5 の仕様に追加される。Fri, 12 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-18/setInterval-setTimeout-eval/https://bcrikko.github.io/til/posts/2024-07-18/setInterval-setTimeout-eval/setInterval()、setTimeout()は内部的にeval()を使っている（場合もある）Thu, 18 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-19/node-v225/https://bcrikko.github.io/til/posts/2024-07-19/node-v225/Node.js v22.5がリリースされた。Fri, 19 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-24/font-size-adjust/https://bcrikko.github.io/til/posts/2024-07-24/font-size-adjust/font-size-adjustに係数を指定することで、フォントのサイズ感を調整できる。Wed, 24 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-24/shikanoko-markov/https://bcrikko.github.io/til/posts/2024-07-24/shikanoko-markov/「しかのこのこのここしたんたん」をマルコフ連鎖でつくる動画をみたので実装してみる。Wed, 24 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-25/target-blank/https://bcrikko.github.io/til/posts/2024-07-25/target-blank/rel="noopener noreferrer"を使うようになったのは2016年7月頃にtarget="_blank"のセキュリティリスクに関する記事を読んだからだ。Thu, 25 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-25/view-transition/https://bcrikko.github.io/til/posts/2024-07-25/view-transition/Chrome126/Edge126で@view-transitionが使えるようになった。Thu, 25 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-26/curl/https://bcrikko.github.io/til/posts/2024-07-26/curl/コマンドラインからAPIを直接叩くときにcurlコマンドを使うFri, 26 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-26/setup-python/https://bcrikko.github.io/til/posts/2024-07-26/setup-python/Pythonの開発環境を構築する機会があったのでメモとして残す。Fri, 26 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-27/optimize-google-font/https://bcrikko.github.io/til/posts/2024-07-27/optimize-google-font/このページをLighthouseで計測すると、以下のような警告が表示される。Sat, 27 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-30/safari-17.6https://bcrikko.github.io/til/posts/2024-07-30/safari-17.6Safari 17.6がリリースされたことでflexboxのsafeキーワードが利用可能になった。Tue, 30 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-07-30/typescript-5.6https://bcrikko.github.io/til/posts/2024-07-30/typescript-5.6先日、TypeScript 5.6 Betaがリリースされた。Tue, 30 Jul 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-08-01/react-autofocus/https://bcrikko.github.io/til/posts/2024-08-01/react-autofocus/ReactではautoFocus: booleanというインターフェースを持ちながら、なぜか属性が削除されてしまうというバグ？仕様？がある。Thu, 01 Aug 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-08-01/vitest-migration/https://bcrikko.github.io/til/posts/2024-08-01/vitest-migration/Vitestを1.xから2.xにアップグレードしたところ、testing-library/jest-domが提供するtoBeInTheDocumentやtoHaveAttribute、toHaveClassなどが見つからないというエラーになった。Thu, 01 Aug 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-08-05/focusable-scroller/https://bcrikko.github.io/til/posts/2024-08-05/focusable-scroller/スクロール可能な要素にフォーカスできるようになったことで、dialog要素のどこにフォーカスを当てればよいか考えるで紹介しているフォーカスワープがなくなり、ユーザビリティが向上する。Mon, 05 Aug 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-08-07/node-22.6.0https://bcrikko.github.io/til/posts/2024-08-07/node-22.6.0Node.js v22.6.0で実験的にTypeScriptがサポートされた。Wed, 07 Aug 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-08-07/ruby-align/https://bcrikko.github.io/til/posts/2024-08-07/ruby-align/Chrome128でruby要素が改行可能になり、ルビの配置を制御できるようになった。Wed, 07 Aug 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-08-12/comma-operator/https://bcrikko.github.io/til/posts/2024-08-12/comma-operator/カンマ演算子とは、演算対象を左から順に評価し最後の値を返す演算子のこと。Mon, 12 Aug 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-08-23/node-22.7.0https://bcrikko.github.io/til/posts/2024-08-23/node-22.7.0Node.js v22.7.0で--experimental-transform-typesが追加されたことでenumsやnamespaceといったTypeScriptの構文がJavaScriptに変換されるようになった。Fri, 23 Aug 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-08-27/intl-durationformat/https://bcrikko.github.io/til/posts/2024-08-27/intl-durationformat/Chrome 129 BetaでIntl.DurationFormatがサポートされた。現時点ではSafari 16.4のみサポート済み。Intl.DurationFormatは国際化APIの一部で、時分秒の多言語対応とフォーマットができるようになる。Tue, 27 Aug 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-08-27/scheduler-yield/https://bcrikko.github.io/til/posts/2024-08-27/scheduler-yield/Chrome 129 Betaでscheduler.yield()がフラグなしで使えるようになった。scheduler.yield()を使うことで、長い処理の中に割り込むことができる。Tue, 27 Aug 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-08-28/th-scope/https://bcrikko.github.io/til/posts/2024-08-28/th-scope/th要素にはscope属性をつけることができる。基本的には気にしなくて良いが昨今のWebUIではテーブル自体が拡張され複雑化することが多く、マークアップだけでは適切に紐づけることができないため有用になるケースもある。Wed, 28 Aug 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-08-30/vscode-rename/https://bcrikko.github.io/til/posts/2024-08-30/vscode-rename/VSCodeのリファクタリング機能（F2）を使ってリネームすると、JavaScriptやTypeScriptの変数、関数名などを一括変更できる。しかし、リネームした後にエイリアスされ変更前の名前が保持されてしまう。Fri, 30 Aug 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-03/ecmascript-process/https://bcrikko.github.io/til/posts/2024-09-03/ecmascript-process/ECMAScriptはEcma Internationalによって標準化されている仕様で、その標準化プロセスはStage 0からStage 4までの6つの段階に分かれている。各Stageの意味と移行条件 Stage 0 新しい機能のアイデア段階。このProposalがなぜ有用なのか説明が必要するリポジトリの作成と、Champion（旗振り役）が決まったらStage 1に進む。Tue, 03 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-04/details-name/https://bcrikko.github.io/til/posts/2024-09-04/details-name/Firefox 130でdetails要素のname属性がサポートされたことで、全主要部（Chrome120、Edge120、Firefox130、Safari17.2）で使えるようになった。details要素にname属性をつけることでグループ化ができ、アコーディオンの開閉制御を排他的に行うことができるようになった。Wed, 04 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-05/namespace-separator/https://bcrikko.github.io/til/posts/2024-09-05/namespace-separator/CSSで見かけないセレクタ（|）があった。「|」はNamespace Separator（名前空間セパレータ）と呼ばれるもので、セレクタと名前空間（@namespace）を分離するために使われる。Thu, 05 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-05/place-items/https://bcrikko.github.io/til/posts/2024-09-05/place-items/place-itemsプロパティを使うとグリッドやフレックスボックスなどにおいて、align-itemsとjustify-itemsを1行で指定できる。Thu, 05 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-09/call-this-operator/https://bcrikko.github.io/til/posts/2024-09-09/call-this-operator/Call-This OperatorというProposalが提案されており、これを使うとオブジェクト指向プログラミング（OOP）と関数型プログラミング（FP）の良いとこ取りができる。Call-This Operatorを簡単に紹介すると、Function.property.call(this, ...args)を、~>を使ってthis~>fn(...args)のように表現することができる。※何年もStage 1のままで動きがないので、実際使えるようになるかはわからない。Mon, 09 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-12/scroll-gutter/https://bcrikko.github.io/til/posts/2024-09-12/scroll-gutter/コンテンツの増減によりスクロールバーが表示されたり消えたりするときに、レイアウトがガタつくことがある。これを防ぐためにscroll-gutterプロパティを使うことができる。Safari TP 203が対応したことで、近い将来全主要ブラウザで利用可能になる。Thu, 12 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-12/set-custom-validity/https://bcrikko.github.io/til/posts/2024-09-12/set-custom-validity/HTML標準のバリデーションでは、たとえばrequired属性を指定した場合は「このフィールドを入力してください。」というメッセージが表示される。HTMLInputElement:setCustomValidity()メソッドを使うことで、メッセージを変更できる。Thu, 12 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-17/customizable-select/https://bcrikko.github.io/til/posts/2024-09-17/customizable-select/Chrome Canary 130がカスタマイズ可能なselect要素を実験的にサポートした。フロントエンドエンジニア大歓喜。chrome://flagsで#experimental-web-platform-featuresを有効にすることでselect要素のカスタマイズができるようになる。Tue, 17 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-18/lightbox-ui/https://bcrikko.github.io/til/posts/2024-09-18/lightbox-ui/画像をクリックすると拡大表示される機能をLightboxと呼ぶ。:target擬似クラスを使うことで、JavaScriptなしでも実装できる。Wed, 18 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-18/text-spacing-trim/https://bcrikko.github.io/til/posts/2024-09-18/text-spacing-trim/日本語では「」や【】などの括弧や、や。などの句読点を使うことが多い。ただ、それらは全角扱いなので先頭が揃わない、文中に余分なスペースが生まれるなどの弊害があった。text-spacing-trimを使うことで、先頭や文中の括弧や句読点のスペースを調整することができる。Wed, 18 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-19/previous-siblings/https://bcrikko.github.io/til/posts/2024-09-19/previous-siblings/Selecting Previous Siblingsで:has()擬似クラスを使って、前の兄弟要素を選択する方法が紹介されていた。:has(+ &)は、「マウスオーバーした要素（&）が次にくる要素」を指している。正規表現の肯定先読みのようなもの。Thu, 19 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-20/box-decoration-break/https://bcrikko.github.io/til/posts/2024-09-20/box-decoration-break/inline要素（インラインボックス）を改行すると、以下のようにborderが途中で切れたり、paddingを使うと前の行と要素が重なってしまったり、いろいろな問題があった。box-decoration-breakプロパティは、改行されたinline要素のすべての行にスタイルを適用でき、これらの問題を解決することができる。Fri, 20 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-09-24/jis-z8031-2019/https://bcrikko.github.io/til/posts/2024-09-24/jis-z8031-2019/サーバ？サーバー？コンピュータ？コンピューター？外来語の末尾長音は、以前のJIS規格では省略して書くことが推奨されていた。しかし、JISZ8031:2019では、原則長音をつける方針になった。Tue, 24 Sep 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-10-01/line-clamp/https://bcrikko.github.io/til/posts/2024-10-01/line-clamp/Safari TP 204がリリースされ、line-clampプロパティが使えるようになった。他のブラウザは未対応のため、-webkit-ベンダープレフィックス付きのプロパティをいくつか使う必要がある。Tue, 01 Oct 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-10-02/image-rendering/https://bcrikko.github.io/til/posts/2024-10-02/image-rendering/ピクセルアート（ドット絵）やQRコードのような小さな画像を拡大表示するとアンチエイリアスによって輪郭がぼやけてしまう。image-renderingで画像の拡大縮小時のアルゴリズムを指定することでアンチエイリアスを無効化できる。Wed, 02 Oct 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-10-04/vscode-minimap-label/https://bcrikko.github.io/til/posts/2024-10-04/vscode-minimap-label/VSCode には Minimap というファイル全体をプレビューする機能がある。// MARK: や // #region などを使うことでミニマップにラベル（目印）を表示できる。Fri, 04 Oct 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-10-16/iterator-helpers/https://bcrikko.github.io/til/posts/2024-10-16/iterator-helpers/2025年〜2026年のECMAScript界隈はイテレータ元年になりそうなほどIterator関連のProposalが承認された。そのなかでES2025の仕様に追加されることになったIterator Helpersについて学ぶ。Wed, 16 Oct 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-10-17/http-query-method/https://bcrikko.github.io/til/posts/2024-10-17/http-query-method/新しいHTTPリクエストメソッドのQUERYメソッドのドラフト仕様が公開された。QUERYメソッドは、データ取得やクエリの実行時など安全で冪等なクエリを実行するために使用される。クエリパラメータが大量に必要になる場合、GETメソッドではURIの長さ制限に引っかかり正確なリクエストができないことがある。慣習的にPOSTメソッドのリクエストボディを使ってリクエストすることがあるが、そもそもPOSTメソッドは冪等でない。Thu, 17 Oct 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-10-17/iterator-sequencing/https://bcrikko.github.io/til/posts/2024-10-17/iterator-sequencing/2024年10月にIterator SequencingがStage2.7にアップデートされた。Iterator SequencingはArray#concat()のように複数のイテレータを合成し、新しいイテレータを返す。この他のIterator関連のメソッドはIterator Helpersを参照。Thu, 17 Oct 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-10-29/dont-use-optional-property/https://bcrikko.github.io/til/posts/2024-10-29/dont-use-optional-property/私は、数年来のOptional Propertyアンチ、Optional Property撲滅委員会 会長を務めている。なぜそこまでOptional Propertyを嫌うのか、その理由を説明し世の中から不要な?をなくしたい。Tue, 29 Oct 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-08/find-scrollable-element/https://bcrikko.github.io/til/posts/2024-11-08/find-scrollable-element/ChromeのDevTools（Elementsタブ）に、新たにscrollバッジが追加された。ElementsタブでHTMLを確認すると、スクロールできる要素の隣に(scroll)というバッジが表示されるようになった。UI開発でよくある2重スクロールや範囲外スクロールなどの調査が容易になった。Fri, 08 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-08/text-indent/https://bcrikko.github.io/til/posts/2024-11-08/text-indent/国語の授業では「段落の1行目は1文字下げて書きましょう」と習った。これをCSSで実現するにはtext-indentを用いる。サンプルではemを使ったが、英語ならch（0の大きさ）、日本語ならic（水の大きさ）という単位を使うことで、文字サイズに応じて文字下げの量を調整できる。Fri, 08 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-11/typescript-5.7https://bcrikko.github.io/til/posts/2024-11-11/typescript-5.7TypeScript 5.7 RCがリリースされた。初期化されていない変数のチェック ES2024をサポート、Node.js v22の新しいAPIを用いたコンパイルキャッシュ、クラス内のメソッドでComputed Property Namesをサポート、tsconfig.jsonの所有権チェックMon, 11 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-15/import-attributes/https://bcrikko.github.io/til/posts/2024-11-15/import-attributes/ECMAScirpt 2025に追加予定のimport属性（import attributes）はなぜ必要なのか。import構文はブラウザで実行されるため、参照したファイルの中身が読み込むまでわからない。拡張子が*.jsonだからと言って本当にJSONである保証はない。改ざんされて悪意のあるコードが含まれるJavaScriptファイルという可能性もある。Fri, 15 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-15/width-without-scrollbar/https://bcrikko.github.io/til/posts/2024-11-15/width-without-scrollbar/100vw - 100cqwでスクロールバーの幅がわかる。vw: ウェブページの表示領域（viewport）のwidthを100としたときの単位。cqw: クエリコンテナのwidthを100としたときの単位Fri, 15 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-18/20000000000000000000000000000000000/https://bcrikko.github.io/til/posts/2024-11-18/20000000000000000000000000000000000/ ロシアの裁判所、Googleに対し20000000000000000000000000000000000ドルを賠償請求か ロシアの裁判所がとんでもない額（200溝ドル = 2*10^34）という賠償請求を命じた。JavaScriptで安全に扱える数はNumber.MAX_SAFE_INTEGERの値である9007199254740991（2^53-1）までだ。なので、200溝ドルという桁を扱うためには、BigIntを使う必要がある。BigIntを使うにはBigIntコンストラクタを使うか、数値リテラルの末尾にnをつけて表現する。Mon, 18 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-18/astro-baseline/https://bcrikko.github.io/til/posts/2024-11-18/astro-baseline/当ブログでは、一部ブラウザでしか使えないような機能を取り扱うことがある。毎回「対応状況: Chrome123, Edge, Safari, Firefox」みたいなことを書いていたのだが、手動で更新し続けるには限界がある。そこで、W3C WebDX Community Groupが公開しているbaseline-statusというWeb Componentsを使用する。Mon, 18 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-18/logical-border/https://bcrikko.github.io/til/posts/2024-11-18/logical-border/Logical Propertiesのひとつであるborder-blockを使うことで、論理的なブロック方向にボーダーを引くことができる。「論理的なブロック方向」とは縦書き、横書き、右から読む、左から読むなど言語によってwriting-modeが異なっても、意味的に正しい方向を指す。Mon, 18 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-19/amazon-bookmarklet/https://bcrikko.github.io/til/posts/2024-11-19/amazon-bookmarklet/検索結果を「販売元: Amazon」に限定する。マーケットプレイスで商品を出品している中華系企業は、ごくごく一部を除き出品ガイドラインを守っていない。商品ページのURLからクエリストリングを削除する。Amazon内ではユーザーの行動をトラッキングするために様々なクエリストリングがURLに付与される。Tue, 19 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-20/how-to-study/https://bcrikko.github.io/til/posts/2024-11-20/how-to-study/2019年頃から新しい技術（フレームワーク、ライブラリ、ツールなど）を積極的に追うことをやめた。フロントエンドエンジニアとして働く上で新しい技術を学ぶことは重要だし、学ぶことをやめたらエンジニアとして生きていけないとも思っている。しかし、界隈の流行り廃りは激しく、5年後に使える技術は数えるほどしか残らない。どんなに学んでも常に飢えている状態だった。有限な時間を有効活用するために新しいだけの技術には飛びつかず戦略的に学習することにした。Wed, 20 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-20/toggle-event/https://bcrikko.github.io/til/posts/2024-11-20/toggle-event/ToggleEventを使うことで、Popoverの開閉を検知することができる。ToggleEventのoldState/newStateプロパティで、open/closedの状態を取得できる。dialog#showModal()を使った場合、ブラウザによってToggleEventが発火しないことがある。Wed, 20 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-21/misunderstanding-about-dry/https://bcrikko.github.io/til/posts/2024-11-21/misunderstanding-about-dry/下手に共通化するくらいなら重複したままのほうがマシだ。プログラミングの原則の中で、初心者が最初に触れるであろう「DRY原則（※）」は誤解されやすく、適用の容易さから乱用されやすい。Thu, 21 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-21/show-picker/https://bcrikko.github.io/til/posts/2024-11-21/show-picker/type='date'やtype='color'属性を指定したinput要素を、HTMLInputElement#showPicker()メソッドを使うことでJavaScriptから表示できる。同じようにselect要素のドロップダウンメニューをHTMLSelectElement#showPicker()メソッドを使って表示することもできる。Thu, 21 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-22/issue-scavenger/https://bcrikko.github.io/til/posts/2024-11-22/issue-scavenger/誰もやりたがらないIssueは、誰もやらないまま残り続け、やがてゴミになる。例を挙げるとすれば以下のようなものだ。リファクタリングなど、成果が見えづらいIssue。ライブラリアップデートなど、面倒臭いIssue。納期があるからと後回しにしたIssueFri, 22 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-22/previous-siblings/https://bcrikko.github.io/til/posts/2024-11-22/previous-siblings/:has()擬似クラスと兄弟セレクタ（次兄弟結合子）を使うことで、兄要素が取得できる。Fri, 22 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-22/text-decoration-skip-ink/https://bcrikko.github.io/til/posts/2024-11-22/text-decoration-skip-ink/text-decorationのunderlineを使うことで、<strong>の文字にマーカーのようなunderlineを引ける。使うプロパティは以下の通り。text-decoration.<a>やリンクのようなunderlineのスタイルを指定するプロパティ。text-underline-offset。underlineの位置を調整するプロパティ。text-decoration-skip-ink。アルファベットのunderlineが途切れないようにするプロパティFri, 22 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-22/text-underline-offset/https://bcrikko.github.io/til/posts/2024-11-22/text-underline-offset/主にリンクに使われるtext-decorationの下線の位置をtext-underline-offsetを使うことで調整できる。pxやemなどの<length>や<percentage>の値を指定できる。また、負の値も指定できる。Fri, 22 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-23/quality-of-code/https://bcrikko.github.io/til/posts/2024-11-23/quality-of-code/コードの品質を測るためには、さまざまな品質評価指標がある。この「実装のしやすさ」は実に厄介だ。Sat, 23 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-23/who-dont-work/https://bcrikko.github.io/til/posts/2024-11-23/who-dont-work/仕事をしてない人がやっている仕事Sat, 23 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-24/trigonometric-functions-in-css/https://bcrikko.github.io/til/posts/2024-11-24/trigonometric-functions-in-css/CSSで三角関数（sin()、cos()など）が使えるようになった。社会では役に立たないと言われがちな三角関数だが、全然そんなことない。JavaScriptのMath.sin()やMath.cos()では、引数をラジアン（弧度法）に変換しなければならないのだが、CSSの三角関数は優秀で角度（度数法）のdegを渡すだけでよい。Sun, 24 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-25/engineers-i-respect/https://bcrikko.github.io/til/posts/2024-11-25/engineers-i-respect/みなさんは身近に尊敬できる、または目標している人はいるだろうか？私には2人いる。1人は前職でお世話になったリーダー。もう1人は現職の上司だ。Mon, 25 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-25/navigator-online/https://bcrikko.github.io/til/posts/2024-11-25/navigator-online/Navigator#onLineプロパティを使うことで、ブラウザからインターネット接続の状態を取得できる。online/offlineイベントをリスンすることで、インターネット接続の状態が変化したときに処理を実行できる。Mon, 25 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-26/favourite-books/https://bcrikko.github.io/til/posts/2024-11-26/favourite-books/エンジニアにとってこれまでに読んできた本は、その人のマインドセットを知るうえで重要な情報源だ。なので、まずは自分から 「なぜ今のような考え、思想に至ったか」「その根底にあるはなにか」 を説明するために、過去に読んできた250冊以上の技術書やビジネス書の中から、とくに影響を受けた3冊の本を紹介する。Tue, 26 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-27/a-boring-answer/https://bcrikko.github.io/til/posts/2024-11-27/a-boring-answer/A. 場合による。こんな曖昧な答えに物足りなさを感じる。特に、明確な回答を求めている質問者にとっては不満に思えるかもしれない。しかし、経験を積んだ人ほど「場合による」と言いがちだ。Wed, 27 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-28/communication-cost/https://bcrikko.github.io/til/posts/2024-11-28/communication-cost/コミュニケーションは面倒だ。やりとりにかかる時間だけでなく、何度も質問したり確認したりすることは心理的にもハードルが高い。なので心優しい人は相手の負担にならないように、気持ちを想像して仕事をしようとする。Thu, 28 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-28/conflict-eslint-between-tslint/https://bcrikko.github.io/til/posts/2024-11-28/conflict-eslint-between-tslint/VSCodeでeslintをtypescript-eslintを使っているとき、switch文のindentで2つのルールがコンフリクトして上書き合戦がはじまってしまう。eslintからformatter関連の機能が削除されたため、stylisticで代用する。Thu, 28 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-29/development-of-fantasy/https://bcrikko.github.io/til/posts/2024-11-29/development-of-fantasy/「いまあるものを活かしながら手直ししていく方法だと２年かかります。イチからつくり直していいのであれば、半年でやります。」任天堂の元社長であり、天才プログラマーと呼ばれた岩田聡氏が、MOTHER2の開発が行き詰まっているときに糸井重里氏に放った言葉だ。技術的負債が詰まったプロジェクトに参画したプログラマーなら誰もが「イチからつくり直したほうが速い」と考えるだろう。しかし、「イチからつくり直す」という選択肢は理想に見えるが、現実は残酷だ。Fri, 29 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-11-29/vitest-auto-awaits/https://bcrikko.github.io/til/posts/2024-11-29/vitest-auto-awaits/Promise returned by expect(actual).resolves.toEqual(expected) was not awaited. Vitest currently auto-awaits hanging assertions at the end of the test, but this will cause the test to fail in Vitest 3. Please remember to await the assertion. VitestでPromiseを返すメソッドをテストするときに、上記のような警告がでる。要約すると「Vitest@2では自動でawaitするけど、Vitest@3になったら失敗するよ」という内容。Fri, 29 Nov 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-02/fetch-keepalive/https://bcrikko.github.io/til/posts/2024-12-02/fetch-keepalive/Firefox 133がサポートしたことで、全主要ブラウザでFetch APIのkeepaliveオプションが使えるようになった。keepaliveオプションを使うことで、ページを閉じたり離脱したりしたあとでもレスポンスを適切に扱える。Mon, 02 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-03/publish-npm-package-using-github-actions/https://bcrikko.github.io/til/posts/2024-12-03/publish-npm-package-using-github-actions/npm publishを手作業でやるのは大変なので、GitHub Actionsを使ってやってみる。Tue, 03 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-04/dont-say-sanitize/https://bcrikko.github.io/til/posts/2024-12-04/dont-say-sanitize/SNSを見ていたら「サニタイズ言うなキャンペーン」が2000年代に行われていたことを知る。高木さんの記事を読んでみても、当時の状況を知らない私にとってはいまいちピンとこなかったので、思考をまとめる意味でも書き出してみる。Wed, 04 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-05/attr-fallback/https://bcrikko.github.io/til/posts/2024-12-05/attr-fallback/Safari TP 208でattr()のフォールバックをサポートした。2024年12月現在では、Safari TPとFirefoxでのサポートしている。CSS Variablesのフォールバックのようにattr(attribute-name[, <fallback>])のように指定できる。Thu, 05 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-05/remarking-work/https://bcrikko.github.io/til/posts/2024-12-05/remarking-work/担当者が変わったタイミングで、いままで使っていたサービスや技術スタック、制度、人事などをまるっと変わることがある。技術スタックで言えば昔の某技術知識共有サービスとか。私はそれを「前任者の臭いを消す仕事」と呼んでいる。と同時に、自分を絶対正義とする政治臭・宗教臭がするからあまり好きじゃない。Thu, 05 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-09/ecmascript-proposal-updates/https://bcrikko.github.io/til/posts/2024-12-09/ecmascript-proposal-updates/先日105回目のミーティングで、ECMAScriptの各種プロポーザルがアップデートされた。New Proposals Sync Imports: stage 1 Stabilize: stage 1 More Currency Display hoices: stage 2 Updated Proposals Immutable ArrayBuffers: stage 1→2 Error.isError: stage 2.7→3 Intl.DurationFormat: 3→4Mon, 09 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-12/underline-element/https://bcrikko.github.io/til/posts/2024-12-12/underline-element/u要素は、もともとunderline要素と呼ばれ下線を引くために用いられてきたが、HTML4で非推奨となった。しかし、HTML5では「固有名詞に注釈をつける」「スペルミスを表現する」などの意味になって復活した。Thu, 12 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-13/detect-overflow/https://bcrikko.github.io/til/posts/2024-12-13/detect-overflow/Scroll-Driven Animationの機能を使うことで、CSSだけでOverflowやスクロールバーの表示を検出できる。Scroll-Driven Animation（スクロール駆動アニメーション）のサポート状況は、以下の通り。Fri, 13 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-13/node-23.4.0https://bcrikko.github.io/til/posts/2024-12-13/node-23.4.0Node.js 23.4.0がリリースされ、その中でassert.partialDeepStrictEqualが実験的に導入された。よくあるdeepStrictEqualとの違いは、テストの中で追加、または変更されたプロパティだけをテストできるという点である。Fri, 13 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-16/background-clip-border-area/https://bcrikko.github.io/til/posts/2024-12-16/background-clip-border-area/Safari 18.2でbackground-clip: border-areaがサポートされた。background-clipを使うことで、background-imageなどで指定した背景を切り抜き、表示することができる。Mon, 16 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-17/sql-injection/https://bcrikko.github.io/til/posts/2024-12-17/sql-injection/SQL Injectionとは、データベース操作を悪用するサイバー攻撃のひとつ。攻撃者が不正なSQLコードを入力フォームやクエリパラメータなどに挿入してデータベースを不正に操作することで、秘匿情報の取得（情報漏えい）や破壊、不正な変更をする攻撃だ。Tue, 17 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-19/details-content/https://bcrikko.github.io/til/posts/2024-12-19/details-content/details要素に関連して::details-content疑似要素がサポートされはじめている。執筆時点では、Chrome、Edge、Safari TP 210でサポートしている。Thu, 19 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-20/at-page/https://bcrikko.github.io/til/posts/2024-12-20/at-page/Safari 18.2がサポートしたことで、全主要ブラウザで@pageが使えるようになった。@media printは印刷用に変更するスタイル（サイドバーを消す、色をモノクロにするなど）を設定するためのもので、@page`は印刷時のページサイズ（A4、B5など）や向き（縦、横向き）、さらに左上にページ番号を振る、というような印刷オプションを設定するためのものだ。Fri, 20 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-20/target-text/https://bcrikko.github.io/til/posts/2024-12-20/target-text/https://example.com#:~:text={target}という該当テキストの選択箇所へリンクする方法がある。そのときにどの部分が選択されているかを指すための::target-textという疑似要素が、全主要ブラウザで利用可能になった。Fri, 20 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-21/creative-border/https://bcrikko.github.io/til/posts/2024-12-21/creative-border/グラデーション関連のCSS関数に、conic-gradient()がある。この関数は放射状のグラデーションを作ることができ、応用することで円グラフがCSSだけで簡単に作れる。Sat, 21 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-24/query-container/https://bcrikko.github.io/til/posts/2024-12-24/query-container/ブログやニュースサイトなど、トップページに記事が並んでいるデザインを作るときに、クエリコンテナ単位やaspect-ratioを使うと、最小のCSSでレスポンシブなページを実装できる。Tue, 24 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-25/cross-site-request-forgery/https://bcrikko.github.io/til/posts/2024-12-25/cross-site-request-forgery/Cross-Site Request Forgery（CSRF）とは、意図しないリクエストを別のウェブアプリケーションに送信させる攻撃手法のこと。被害者が認証済みのセッションを保持している場合に、攻撃者が被害者の権限を悪用して不正な操作を実行させる可能性がある。Wed, 25 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-25/css-grid-graph/https://bcrikko.github.io/til/posts/2024-12-25/css-grid-graph/CSS Grid Layoutが全主要ブラウザで利用可能になったことで、いままでCanvasやSVGでがんばっていたグラフ描画も、HTMLとCSSだけで簡単に実装できるようになった。HTMLでグラフが書けるメリットは、レスポンシブで、かつアクセシビリティに有効であるという点に尽きる。Wed, 25 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-26/css-light-dark/https://bcrikko.github.io/til/posts/2024-12-26/css-light-dark/light-dark()は、2つの色を関数にわたすことで、ユーザー環境に合わせてテーマカラーを変えることができる。また、メディアクエリのprefers-color-schemeを使わなくてもテーマを変更できる。Thu, 26 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-27/importmap/https://bcrikko.github.io/til/posts/2024-12-27/importmap/昨今のフロントエンド開発は、バンドル前提が主流になっている。外部パッケージを含めたすべてのコードを、ひとつ、ないし数個のファイルにまとめて提供することで、依存関係の管理が容易になる。反面、頻繁に変更が入るコードとそうでないコードがひとつのファイルとして扱われるため、キャッシュができず、毎回大きなファイルを読み込むため、パフォーマンスが悪化するというデメリットがある。Fri, 27 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2024-12-28/dear-browsers/https://bcrikko.github.io/til/posts/2024-12-28/dear-browsers/Firefoxって現代のIEだよねw冗談で言ったことが引用され「ダーシノさんが言っていた」とFirefoxのサポートをやめたいという主張の根拠として扱われてしまうことがあった。不用意な発言に反省しつつ、ブラウザの多様性について向き合ったので、せっかくなので昨今のブラウザ事情とその重要性について語りたい。（※私が感じている状況なので、実際とは異なるかもしれません）Sat, 28 Dec 2024 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-14/directory-traversal/https://bcrikko.github.io/til/posts/2025-01-14/directory-traversal/Directory Traversalとは、攻撃者がWebアプリケーションの不適切な入力処理を悪用して、通常はアクセスが許可されていないサーバー上のファイルやディレクトリにアクセスする攻撃手法のこと。Traversalとは「横断」という意味なので、ディレクトリを横断して本来アクセスできないディレクトリやファイルにアクセスすることを指す。Tue, 14 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-15/insecure-deserialization/https://bcrikko.github.io/til/posts/2025-01-15/insecure-deserialization/Insecure Deserializationとは、信頼できないデータをデシリアライズする際に発生する脆弱性を利用した攻撃手法のこと。攻撃者はデータを改ざんし、不正なオブジェクトを生成して悪用することが可能になる。Wed, 15 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-16/disable-scrolling-dialog/https://bcrikko.github.io/til/posts/2025-01-16/disable-scrolling-dialog/<dialog>要素（モーダルダイアログ）を表示するときに注意したいのが、元の要素のスクロール。 overscroll-behaviorで対処できなくはないが、カーソルが外れるとダイアログの裏側要素がスクロールされてしまう。Thu, 16 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-16/text-box-trim/https://bcrikko.github.io/til/posts/2025-01-16/text-box-trim/日本語では気になる場面は少ない。しかし、英語の場合は、テキストの上下のスペースにより中心線がズレて見えたり、スペースのリズムが崩れているように見えたりする。text-boxプロパティを使うことで、開発者自身がテキストの上下のスペースをカスタマイズできるようになった。Thu, 16 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-17/regexp-pattern-modifiers/https://bcrikko.github.io/til/posts/2025-01-17/regexp-pattern-modifiers/2024年10月にRegExp Modifiersの提案がStage 4に更新された。おそらくECMAScript 2025に含まれることが予想される。正規表現のフラグはすべてに適用されてしまう。RegExp Modifiersのパターン修飾子を使うと、iなどのフラグを一部にだけ適用することができる。Fri, 17 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-20/the-common-test-for-university-admissions/https://bcrikko.github.io/til/posts/2025-01-20/the-common-test-for-university-admissions/2025年1月18日（土）、19日（日）の2日間にわたり、令和7年度の大学入学共通テストが行われた。著者は、現役プログラマとしてキャリアを積んでいるので「情報I」程度の問題は全問正解できないといけないので、実際に解いてみた。ついでに自分自身の振り返りも兼ねて解説してみた。Tue, 21 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-22/cross-site-scripting/https://bcrikko.github.io/til/posts/2025-01-22/cross-site-scripting/{ページの概要}Thu, 01 Jan 1970 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-23/chown/https://bcrikko.github.io/til/posts/2025-01-23/chown/chown（CHange OWNer）とは、ファイルやディレクトリの所有者情報を変更する際に使用するコマンドである。ユーザやグループ単位でファイル/ディレクトリのパーミッションを管理することができる。区切り文字をドットやコロンを使うことがある。Thu, 23 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-24/counter-style/https://bcrikko.github.io/til/posts/2025-01-24/counter-style/@counter-styleを使うことで、カウンターによってリストマークをカスタマイズすることができる。同じようにリストマークを変更するlist-styleプロパティもあるのだが、こちらはすべてのリストマークが変更されてしまう。（※nth-childなどを使えば1つずつ変更できないこともない）Fri, 24 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-28/brandnew-attr/https://bcrikko.github.io/til/posts/2025-01-28/brandnew-attr/attr()という要素の属性の値を受け取ってCSS内で使用できる機能が進化して、<color>や<length>などを受け取れるようになった。この仕様は、CSS Values and Units Module Level 5のWOrking Draftで策定されている。Tue, 28 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-28/xml-external-entity/https://bcrikko.github.io/til/posts/2025-01-28/xml-external-entity/XML External Entity（XXE）とは、XMLドキュメントのEntity定義を悪用し外部のファイルを参照することでサーバー内などにある機密情報を抜き取ったり、External Entityを利用したDoS攻撃を行う攻撃手法のこと。Tue, 28 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-29/cickjacking/https://bcrikko.github.io/til/posts/2025-01-29/cickjacking/Clickjackingとは、攻撃者がユーザーに意図しないクリックをさせる攻撃手法のこと。攻撃者は透明な要素（transparentやopacity:0など）や偽装した要素を画面上に配置し、ユーザーが意図しないボタンやリンクをクリックさせるように誘導する。海外のちょっとアレなサイトを見ているときによく遭遇するやつだ。Wed, 29 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-29/text-stroke/https://bcrikko.github.io/til/posts/2025-01-29/text-stroke/text-strokeとpaint-orderを使うことで、いままで文字が潰れてしまっていた縁取り文字や袋文字がCSSだけで表現できるようになった。Wed, 29 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-30/typescript-5.8https://bcrikko.github.io/til/posts/2025-01-30/typescript-5.8TypeScript 5.8の主なアップデートをまとめました。Thu, 30 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-01-31/os-command-injection/https://bcrikko.github.io/til/posts/2025-01-31/os-command-injection/OS Command Injectionとは、アプリケーションがOSコマンドを実行する機能を提供したり、同等の機能を実装したりする際に、悪意のあるコマンドを実行させる攻撃手法のこと。攻撃者がサーバー上で任意のコマンドを実行し、管理権限を奪ったり、データを盗んだり、破壊したり、さらなる攻撃の踏み台にされたりすることが可能になる。Fri, 31 Jan 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-01/header-injection/https://bcrikko.github.io/til/posts/2025-02-01/header-injection/Header Injectionとは、HTTPヘッダを用いて任意のデータを送信する攻撃手法のこと。Sat, 01 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-01/open-redirection/https://bcrikko.github.io/til/posts/2025-02-01/open-redirection/Open Redirectionとは、任意のURLにリダイレクトさせる攻撃手法のこと。リダイレクトの仕組みを用い、ユーザーの秘匿情報の盗取やマルウェア配布などを行うことができる。Sat, 01 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-12/javascript-temporal/https://bcrikko.github.io/til/posts/2025-02-12/javascript-temporal/FirefoxがTemporalオブジェクトをExperimentalとしてリリースした。Temporalオブジェクトを使うことで、JavaScriptによる日付・時刻操作が大幅に簡素化され、dayjs、date-fns（やmoment.js）などのライブラリを使わなくても、同様な機能をネイティブがサポートしてくれるようになる。Wed, 12 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-13/over-reaction/https://bcrikko.github.io/til/posts/2025-02-13/over-reaction/現職では、2016年からリモートワークが導入され、コロナ禍を経て、現在では推奨される働き方になっている。リモートワークにおける生産性やコミュニケーションについては多くの議論があるが、ここでは「オンラインミーティング」に絞って語りたい。Thu, 13 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-14/be-favorably/https://bcrikko.github.io/til/posts/2025-02-14/be-favorably/意見があわない相手とのコミュニケーションは、大きなストレスになる。ちょっとしたすれ違いが積み重なり、相手の思想や人格まで嫌になってしまうこともある。私自身、その許容量が少ないため、すぐに人を遠ざけてしまいがちだ。Fri, 14 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-15/vector/https://bcrikko.github.io/til/posts/2025-02-15/vector/妥協しないデータ分析のための 微積分+線形代数入門で微積分・線形代数の学び直しをしている。その中で学んだことを忘れないように自分の言葉でまとめたい。ベクトル（Vector）とは、値が並んでいるものを指す。そして、その値の個数が次元と呼ばれる。Sat, 15 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-16/astro-math/https://bcrikko.github.io/til/posts/2025-02-16/astro-math/当ブログはAstroというSSG（静的サイトジェネレータ）を使っている。また、記事はMarkdownを拡張したMDXというフォーマットを用いて書いている。数学で学んだことを記事にする際、プレーンテキストでは微積分や行列などの数式を表現することが難しい。そのため、KaTeX（LaTeXのJavaScriptライブラリ）の記法を使ってコードブロック内に数式を表現したい。Sun, 16 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-18/canvas-linebreak/https://bcrikko.github.io/til/posts/2025-02-18/canvas-linebreak/Canvas APIは、ブラウザでゲーム開発や画像生成をするためには必要不可欠なAPIだ。しかし、テキストを描画するCanvasRenderingContext2D#fillText()には、自動改行できないという弱点がある。第3引数でmaxWidthを指定できるのではみ出すことはないが、改行ではなく文字列が圧縮されてしまう。そこでCanvasRenderingContext2D.measureText()を使って、文字列の幅を計測し、maxWidthに到達しそうになったら改行するという処理が必要になる。Tue, 18 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-19/scale-vs-zoom/https://bcrikko.github.io/til/posts/2025-02-19/scale-vs-zoom/いままでCSSで要素や画像を拡大・縮小するにはtransform: scale()を用いるのが一般的であったが、2024年に新たにzoomプロパティがBaselineに追加された。この2つの機能の違いについてまとめる。Wed, 19 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-21/the-law-of-leaky-abstractions/https://bcrikko.github.io/til/posts/2025-02-21/the-law-of-leaky-abstractions/先日、同僚との会話のなかで「漏れのある抽象化の法則」が話題にあがった。 初耳法則だったので、原文を読み自分なりの言葉でまとめたい。※原文と異なる解釈があるかもしれないので、Joel氏の記事を読むことをオススメする。Fri, 21 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-22/position-fixed/https://bcrikko.github.io/til/posts/2025-02-22/position-fixed/position: fixed;を指定すると、ドキュメントフローから除外され、Initial Containing Block（最初の包含ブロック ≒ viewport ≒ ブラウザの表示領域）を基準に配置される。通常は親要素を基準にしたposition: fixedは使用できない。対策として以下の2つがある。transformプロパティを使ったCSSハック。containプロパティを使った制御（推奨）。Sat, 22 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-22/scrollend-event/https://bcrikko.github.io/til/posts/2025-02-22/scrollend-event/scrollendイベントを使うことで、スクロールが完了したタイミングを検知できる。スクロールによるアニメーションやロードなどが使われるようなウェブサイトで効果を発揮する。Sat, 22 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-26/aposd-vs-clean-code/https://bcrikko.github.io/til/posts/2025-02-26/aposd-vs-clean-code/Clean Codeの著者:Robert C.Martin氏（以下、UBと呼ぶ）とA Philosophy of Software Designの著者:John K. Ousterhout氏（以下、JOHNと呼ぶ）の対談がGitHubで公開されていた。そこで、両者の言い分を整理してみる。Wed, 26 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-02-27/h1-font-size/https://bcrikko.github.io/til/posts/2025-02-27/h1-font-size/階層が深くなるにつれ、h1要素のfont-sizeがどんどん小さくなり、3階層目にはh1要素とh2要素のfont-sizeが逆転してしまう。実際にHTML Living Standardの仕様を見てみると以下のようになっていた。Thu, 27 Feb 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-03-01/monthly-letter/https://bcrikko.github.io/til/posts/2025-03-01/monthly-letter/2025年2月に投稿された記事をHTML、CSS、JavaScript、その他のカテゴリごとにまとめて紹介する。各記事の要点を簡潔に要約し、最新の技術動向や知見を振り返る。Sat, 01 Mar 2025 00:00:00 GMTGitHub Copilothttps://bcrikko.github.io/til/posts/2025-03-01/web-communities/https://bcrikko.github.io/til/posts/2025-03-01/web-communities/ウェブに関する団体はいくつもあり、どこで何をやっているのか、我々フロントエンドエンジニアにどんな影響があるのか、簡単にまとめる。Sat, 01 Mar 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-03-06/firefox-with-ai/https://bcrikko.github.io/til/posts/2025-03-06/firefox-with-ai/Firefox 136がリリースされた。今回のリリースの目玉機能は「Sidebar tooles include an AI chatbot」だ。FirefoxのサイドバーにChatGPTやGeminiなどを表示し、ブラウザで表示している内容を渡して処理できるという機能である。この機能を使うことで、ページに表示されている文章をそのままAIに渡して、要約や説明、クイズ作成などができる。Thu, 06 Mar 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-03-07/imposter-syndrome/https://bcrikko.github.io/til/posts/2025-03-07/imposter-syndrome/インポスター症候群とは、自分の成果や能力が過剰に評価されているのではないか？と自身の力を信じられない心理状態を指す。とくに令和のエンジニアバブルでは、引く手あまたで能力以上の報酬が提示されたり、逆に相場上昇のせいで今の年収と比べて自分には能力がないと思ってしまう、そんな人が多いのではないだろうか？Fri, 07 Mar 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-03-08/internet-survival/https://bcrikko.github.io/til/posts/2025-03-08/internet-survival/ありがたいことに定期的にツイートや記事を拡散していただいて、賛否はあれど私の主張が多くの人に届くことは素直に嬉しい。ただ、拡散度合いが一定ラインを超えると急激に怖い人が増えてくる。Sat, 08 Mar 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-03-11/popover-hint/https://bcrikko.github.io/til/posts/2025-03-11/popover-hint/Popover APIの新しいモードとしてhintが導入されようとしている。デフォルトのpopover=autoの場合、popoverで表示した要素が排他的に制御されるため、一度に複数のポップオーバーを表示することができない。popover=hintを使うことで、popoverメニューを表示しながらツールチップを表示するという処理が実現できる。Tue, 11 Mar 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-03-12/parse-dont-validate/https://bcrikko.github.io/til/posts/2025-03-12/parse-dont-validate/Parse, don’t validateを読んだので、そこで理解した内容をまとめる。Parse, don’t validateとは、データを単に検証（validate）するのではなく、解析（parse）して適切なデータ型や構造に変換しようという考え方だ。Wed, 12 Mar 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-03-20/haskell/https://bcrikko.github.io/til/posts/2025-03-20/haskell/JavaScriptのなんちゃって関数型プログラミングではなく、純粋な関数型プログラミングのエッセンスを学びたくてHaskellを選び、過去3回入門したが3回破門されたので、今度こそ免許皆伝したい。普段はTypeScriptで開発を行っているので、Haskellと比較しながら学んでいきたい。Thu, 20 Mar 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-03-24/invoker-commands-api/https://bcrikko.github.io/til/posts/2025-03-24/invoker-commands-api/Popover APIのように、インタラクティブ要素と操作対象の要素をHTML属性で紐づけ、操作することができるInvoker Commands APIが、主要ブラウザに実験的に実装されている。Invoker Commands APIでは、それらの属性の代わりにcommand属性とcommandfor属性を使って、より宣言的にわかりやすい紐づけができるようになる。Mon, 24 Mar 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-03-26/relative-colors/https://bcrikko.github.io/til/posts/2025-03-26/relative-colors/Relative Colorsを使うことで、オリジナルの色に対して、rgba、hsl、lchなどのカラー関数を適用できるようになった。デザイントークンなどhexで定義された色を、hsl関数を用いて彩度や輝度のみを変更したり、rgb関数のRed要素だけを変更したりできる。 アニメーションや:hoverや:activeなどのバリエーション作成に便利。Wed, 26 Mar 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-03-27/named-capturing-group/https://bcrikko.github.io/til/posts/2025-03-27/named-capturing-group/ある文字列から正規表現でマッチした部分を抽出する際、String#match()を使う。普通に使うと以下のようにmatch[n]という非常にわかりづらいコードになる。分割代入（Destructuring）を使うことで、ちょっとはわかりやすくなるが、それ以上に名前付きキャプチャグループが使いやすい。Thu, 27 Mar 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-03-27/treeview-by-details/https://bcrikko.github.io/til/posts/2025-03-27/treeview-by-details/listitem要素とdetails要素を使うことで、HTMLだけでTreeView UIを実装できる。details要素のname属性を使うことで、排他的な開閉処理も可能だ。Thu, 27 Mar 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-04-01/monthly-letter/https://bcrikko.github.io/til/posts/2025-04-01/monthly-letter/2025年3月に公開した記事のまとめ。HTML、CSS、JavaScript、Web、マインドセット、プログラミングなど幅広いトピックをカバー。各記事の要点を簡潔に紹介する。Tue, 01 Apr 2025 00:00:00 GMTGitHub Copilothttps://bcrikko.github.io/til/posts/2025-04-03/text-autospace/https://bcrikko.github.io/til/posts/2025-04-03/text-autospace/国際化対応（Internationalization/i18n）の機能のひとつにtext-autospaceがある。このプロパティは、日本語のように複数の文字体系（漢字、英語、数字など）を混在させて使う言語において、その間にスペースを開けることができる。Thu, 03 Apr 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-04-04/dining-philosophers-problem/https://bcrikko.github.io/til/posts/2025-04-04/dining-philosophers-problem/食事する哲学者の問題 / Dining Philosophers Problemとは、デッドロックに関する問題をわかりやすくモデル化した問題のことだ。テーブルには哲学者の間に1本ずつ、計5本のフォークが置かれている。食事をするには、隣接する2本のホークが必要。哲学者はスレッド、フォークは共有リソースのメタファーで、哲学者が全員同時に左のフォークを手に取ると、誰も右のフォークが取れず、デッドロックが発生する。Fri, 04 Apr 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-04-07/what-is-mcp/https://bcrikko.github.io/til/posts/2025-04-07/what-is-mcp/最近、AIアシスタントの文脈で「MCP」や「MCPサーバー」という用語を聞くようになった。Model Context Protocolとは、AIとアプリケーションとの間で情報を効率的にやり取りするためのプロトコル。 簡単に説明すると、AIが自分の作ったアプリケーションを操作できるように、データを提供したり、機能を公開したりして、扱いやすくするための方法を定義したもの（プロトコル）。MCPを使うことで、AIがアプリケーションのコンテキストを理解できるようになる。 たとえば、いままで手動でデータを貼り付けたり、プロンプトを書いてコンテキストを補っていたりしたものが、AIが直接アプリケーションから取得できるようになる。Mon, 07 Apr 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-04-08/print-color-adjust/https://bcrikko.github.io/til/posts/2025-04-08/print-color-adjust/print-color-adjustプロパティを使うことで、出力端末上での外観を最適化できる。よくあるウェブサイトのスタイルに「目に優しくするために背景色に真っ白（#fff）を避ける」というものがある。当TILブログも同様に真っ白を避け#fafafaを使っている。ただ、そういったページを印刷すると無用なインクを消耗してしまう。そういったことに対処するためにprint-color-adjustプロパティがある。Tue, 08 Apr 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-04-11/manga-effect/https://bcrikko.github.io/til/posts/2025-04-11/manga-effect/CSSのconic-gradientプロパティを使うことで、簡単にマンガ風の集中線エフェクトをつけることができる。repeating-conic-gradientプロパティを用い、0deg→10degは隙間（transparent）、次の1degに線を指定し、それが一回転するまで繰り返すことで、集中線をつくることができる。角度を調整すればもっと密度の高い集中線も作れる。Fri, 11 Apr 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-04-15/prefer-grid-to-flex/https://bcrikko.github.io/til/posts/2025-04-15/prefer-grid-to-flex/先日、Grid First, Flex Thirdという記事を読んだ。要約すると「レイアウトを行う際は grid > block > flex の順で使うべき」という主張がなされている。並びのレイアウトはFlexbox、格子状に区切ってどこに何を配置するかはGridを使う派だったのだが、Gridの有用性を再認識した。Tue, 15 Apr 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-04-16/worth-teaching/https://bcrikko.github.io/til/posts/2025-04-16/worth-teaching/「教えがいのある人間になる」という目標を立てて行動している。いままでは、情報を集め、自分で噛み砕いて実践するという独学スタイルでやってきた。しかし、昨今の世の中の変化はあまりにも早く、自分ひとりで学ぶには限界を感じるようになった。そこで考えたのが「人から教えてもらう」ことだ。Wed, 16 Apr 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-04-17/scrollbar/https://bcrikko.github.io/til/posts/2025-04-17/scrollbar/ボタン付きのスタック型のコンポーネントで、スタック要素にスクロールバーが表示されるとき、OSの外観設定によってスタイルが崩れてしまう。以下のようにスクロールバーが表示されることで、Scrollable AreaとButtonの幅がズレてしまう。Thu, 17 Apr 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-04-18/translator-custom-gpts/https://bcrikko.github.io/til/posts/2025-04-18/translator-custom-gpts/ChatGPTの活用として、チーム共通の翻訳機をカスタムGPTを作って使用している。開発では、ユビキタス言語（用語の和名/英名、意味などがまとまった辞書）をCSVで管理していたので、そのまま「知識」としてアップロードして利用した。Fri, 18 Apr 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-04-22/theme-image/https://bcrikko.github.io/til/posts/2025-04-22/theme-image/画像とサイトの背景色の色が同じ時にどこから画像かわからないなど、ダークモードとライトモードで画像を変えたいときがある。picture要素のmedia属性を使うことで、モードに応じた画像を表示できる。Tue, 22 Apr 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-05-01/monthly-letter/https://bcrikko.github.io/til/posts/2025-05-01/monthly-letter/2025年4月に公開した記事のまとめ。CSSやHTML、AI、プログラミング、マインドセットなど幅広いトピックをカバー。各記事の要点を簡潔に紹介する。Thu, 01 May 2025 00:00:00 GMTGitHub Copilothttps://bcrikko.github.io/til/posts/2025-05-08/hyphenate-limit-chars/https://bcrikko.github.io/til/posts/2025-05-08/hyphenate-limit-chars/英語の1単語が長く折り返しが発生する場合に、hyphensプロパティを使うことでハイフネーションができる。さらにhyphenate-limit-charsプロパティを使うことで、ハイフネーションを許可する単語の長さや、ハイフン前後の最小文字数を指摘できる。Thu, 08 May 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-05-08/hyphenation-does-not-work/https://bcrikko.github.io/til/posts/2025-05-08/hyphenation-does-not-work/hyphenate-limit-charsでハイフネーションされる文字数を制御するの記事を書いているときに、hyphensプロパティを使ってもハイフネーションされないことがあった。Thu, 08 May 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-05-13/astro-mermaid/https://bcrikko.github.io/til/posts/2025-05-13/astro-mermaid/当ブログはAstro + mdxで構成されている。図解するとき、いままではプレーンテキストでAAのような書き方をしていたが、Mermaid記法を使いたい。Tue, 13 May 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-05-14/regexp-escape/https://bcrikko.github.io/til/posts/2025-05-14/regexp-escape/RegExp.escape()がBaseline 2025になり、全主要ブラウザで使えるようになった。RegExp.escape()を使うことで、正規表現のパターンをエスケープできる。いままでのバックスラッシュを使ったエスケープよりパターンの可読性が上がる。Wed, 14 May 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-05-14/ssh-keygen/https://bcrikko.github.io/til/posts/2025-05-14/ssh-keygen/SSHキーの作成と暗号化アルゴリズムの種類Wed, 14 May 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-05-16/margin-trim/https://bcrikko.github.io/til/posts/2025-05-16/margin-trim/margin-trimを使うことで、コンテナ要素の先頭と末尾のmarginを削除できる。p要素のように上下にmarginを持つ要素を並べるとき、marginの向きを一方向に制限し、かつmargin-topを使うなら先頭の要素の、margin-bottomを使うなら末尾の要素のmarginをresetする必要があった。margin-trimを使うとblock、またはinline方向の最初と最後のmarginを削除できる。Fri, 16 May 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-05-20/accessible-dpub/https://bcrikko.github.io/til/posts/2025-05-20/accessible-dpub/Digital Publishing WAI-ARIA Module 1.1では、長文ドキュメント内で容易にナビゲートするための仕様や方法が定義されている。長文ドキュメントの典型であるマニュアルなどはコンテンツの上部に目次があり、そこから各見出しにジャンプできる。単純にidとhrefを使うだけでなく、アクセシビリティの観点も考慮する必要がある。Tue, 20 May 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-05-20/overflow-block/https://bcrikko.github.io/til/posts/2025-05-20/overflow-block/内包するコンテンツが溢れたときにスクロール or 非表示にするときにはoverflowプロパティを使うのが一般的である。しかし、overflowプロパティは視覚的にX軸またはY軸のどちらかを指定してスクロールを発生させるため、横書きと縦書きコンテンツの両方に対応できない。（対応する場合は2パターン用意する必要がある）overflow-blockやoverflow-inlineは、従来のoverflowプロパティと同様にコンテンツが溢れたときにスクロール or 非表示を設定できる。さらに、論理的プロパティなのでwrithing-modeが変わっても対応できる。Tue, 20 May 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-05-22/overflow-hidden-vs-clip/https://bcrikko.github.io/til/posts/2025-05-22/overflow-hidden-vs-clip/overflowプロパティにはhiddenとclipという似たような挙動をする値がある。どちらもコンテンツが溢れたときに非表示にする値だが、ユースケースは異なる。Thu, 22 May 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-05-23/broken-image/https://bcrikko.github.io/til/posts/2025-05-23/broken-image/img要素の読み込みに失敗すると、ブラウザが壊れが画像アイコンとともにalt属性に設定してあるテキストを表示してくれる。img要素にfont-styleなどを指定することで、alt属性のテキストを他の文章と区別できる。Fri, 23 May 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-05-26/transition-behavior/https://bcrikko.github.io/til/posts/2025-05-26/transition-behavior/displayプロパティを使った表示/非表示時のアニメーションは、transitionプロパティの対象にならずフェードイン・フェードアウトができなかった。アニメーションするにはJavaScriptでOpacityを変更し、時間経過でdisplayを切り替える必要があった。現在は、@starting-styleやtransition-behaviorを使うことで、CSSだけでフェードイン・フェードアウトのアニメーションが可能になった。Mon, 26 May 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-05-30/contrast-color/https://bcrikko.github.io/til/posts/2025-05-30/contrast-color/contrast-color()を使うことで、背景色にあわせてコントラスト比が適切な色（黒 or 白）を取得できる。WCAG（Web Content Accessibility Guidelines）に、2色のコントラスト比を計算する方法が書かれている。Fri, 30 May 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-06-01/monthly-letter/https://bcrikko.github.io/til/posts/2025-06-01/monthly-letter/2025年5月に公開した記事のまとめ。CSSやJavaScriptの最新機能、アクセシビリティ、HTMLの実践的な知見を中心に解説。Sun, 01 Jun 2025 00:00:00 GMTGitHub Copilothttps://bcrikko.github.io/til/posts/2025-06-03/treegrid/https://bcrikko.github.io/til/posts/2025-06-03/treegrid/TreeViewを実現する際、Table要素では行の入れ子構造ができない。そのため、WAI-ARIAとJavaScriptを使って実装する。なお、Table構造にする必要がない場合は、HTMLのみでTreeView UIをつくる のようにdetails要素を使うのが簡単だ。Tue, 03 Jun 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-06-06/ecmascript-proposal-updates/https://bcrikko.github.io/til/posts/2025-06-06/ecmascript-proposal-updates/先日108回目のミーティングで、ECMAScriptの各種プロポーザルがアップデートされた。New Proposals, Inspector: Statge 1, More Random Functions: Stage 1, Updated Proposals, Math.clamp: Stage 1→2, SeededPRNG: Stage 1→2, Error.isError: Stage 3→4Fri, 06 Jun 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-06-10/visited-link/https://bcrikko.github.io/til/posts/2025-06-10/visited-link/Chrome 136で:visitedのプライバシー保護が強化された。背景と問題点:visitedは閲覧済みリンクを視覚的に区別するために使用されてきた。しかし、この機能をつかって悪意あるサイトが「ユーザーの閲覧履歴を推測する」ことが可能だったため、以前から問題視され、さまざまな対策が講じられてきた。Tue, 10 Jun 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-06-20/css-lang/https://bcrikko.github.io/til/posts/2025-06-20/css-lang/:lang()擬似クラスを使うことで、要素に適用されている言語（<p lang=ja>など）に基づいてスタイルを変更できる。複数の言語を扱うウェブサイトで、言語ごとにテキストに関するスタイル（text-spacing-trimやtext-autospaceなど）を変更したり、言語切替に対応しているウェブサービスのUIを調整したりできる。Fri, 20 Jun 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-06-25/width-stretch/https://bcrikko.github.io/til/posts/2025-06-25/width-stretch/width:100%とmarginを組み合わせたときに、親要素の幅を超えてしまうことがある。その場合、margin分を減算してwidthに設定する必要がある。そんなときにwidth:stretchを使うと、marginの計算なしで親要素の幅に合わせられる。ただし、執筆時点ではChrome 138/Edge 138のみサポートしている。Firefoxは-moz-available、Safariは-webkit-fill-availableのベンダープレフィックス付きのキーワードが必要。Wed, 25 Jun 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-06-28/js-is-pass-by-sharing/https://bcrikko.github.io/til/posts/2025-06-28/js-is-pass-by-sharing/プログラミング初心者がつまづきやすい値渡しと共有渡しの言葉を、そのままJavaScriptの文脈で使われることがある。しかし、仕様書を読むとJavaScriptのそれは「共有渡し（Pass-by-Sharing）」であり、「参照渡し（Pass-by-Reference）」とは言えない。※ECMAScriptの言語仕様書には「共有渡し(Pass-by-Sharing)」という用語は明示的に定義されていない。引数の渡し方を説明するために使われる概念的な用語であり、日本語では「オブジェクト参照の値渡し」と呼ばれることもある。Sat, 28 Jun 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-07-01/monthly-letter/https://bcrikko.github.io/til/posts/2025-07-01/monthly-letter/2025年6月に公開した記事のまとめ。HTML/CSS/JavaScriptの最新トピックや実践的な知見を紹介。Tue, 01 Jul 2025 00:00:00 GMTGitHub Copilothttps://bcrikko.github.io/til/posts/2025-07-01/oop-inheritance/https://bcrikko.github.io/til/posts/2025-07-01/oop-inheritance/オブジェクト指向プログラミング（Object-Oriented Programming）を学ぶと、以下の3つを特徴だと説明される。カプセル化（隠蔽）多態性（ポリモーフィズム）継承.しかし、インターネットでは「継承を使うな」と言われることが多い。 なぜなのか、その理由を考えてみる。Tue, 01 Jul 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-07-02/javascript-using/https://bcrikko.github.io/til/posts/2025-07-02/javascript-using/JavaScriptはガベージコレクションを備えているため、スコープを外れると自動的にメモリから解放される。しかし、非メモリリソース（データベースやファイルストリームなど）を扱う場合は、明示的な解放（cleanup）をしないとリソースリークが発生してしまう。Wed, 02 Jul 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-07-09/quantity-queries/https://bcrikko.github.io/til/posts/2025-07-09/quantity-queries/Quantity Queriesとは、「特定の要素がいくつあるか？」によってスタイルを切り替えるテクニックを指す。たとえば、Gridレイアウトにおいて要素数によって以下のようにスタイルを変えたいことがある。Wed, 09 Jul 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-07-10/custom-highlight-api/https://bcrikko.github.io/til/posts/2025-07-10/custom-highlight-api/CSS Custom Highlight APIを使うことで、JavaScriptで範囲を指定し、任意のスタイル（ハイライトなど）を適用できる。マウスで選択した部分のスタイルを変更する::selectionや、#:~:text=***のようにURLのハッシュを使って特定のテキストの選択してスタイルを変更する::target-textのような強調表示のぎ疑似要素を拡張して、任意の範囲をハイライトするためのAPIである。Thu, 10 Jul 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-07-14/vector-search/https://bcrikko.github.io/til/posts/2025-07-14/vector-search/検索機能を強化する「RAG」について学びたいが、具体的にどのような仕組みで動いているか理解できていない。そこで、まずは生成AIの基礎知識を身につけるためにすべて人力でモデル作成、ベクトル変換、ベクトル検索を行うことで仕組みを理解したい。Mon, 14 Jul 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-07-15/modern-monetary-theory/https://bcrikko.github.io/til/posts/2025-07-15/modern-monetary-theory/現代貨幣理論（MMT、Modern Monetary Theory）は、政府が自国通貨を発行できるかぎりは財政赤字が増えてもインフレが制御されていれば問題にならないという考え方で、まさに日本は「円」という自国通貨を発行できるのでMMTの前提条件を満たしており、理論的には採用可能である。Tue, 15 Jul 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-07-16/treewalker/https://bcrikko.github.io/til/posts/2025-07-16/treewalker/TreeWalkerオブジェクトでNodeFilterを使うことでDOMツリーを効率的に走査できる。以下のサンプルではNodeFilter.SHOW_ELEMENTでElementノードのみを走査している。Wed, 16 Jul 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-07-17/element-closest/https://bcrikko.github.io/til/posts/2025-07-17/element-closest/Element.closest()を使うことで、現在の要素から親方向に向かって検索し、CSSセレクターに一致するノードを取得する。親方向に向かって検索するための機能なので、#current → .ancestor → .parent:last-child のような兄弟要素や .parent:has(.xxx) のような自身の祖先以外の要素は取得できない。Thu, 17 Jul 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-07-18/how-i-learn-with-ai/https://bcrikko.github.io/til/posts/2025-07-18/how-i-learn-with-ai/ChatGPT や GitHub Copilot、Claude Code、Google NotebookLM などさまざまなAIツールが登場し、日々の学び方も変わってきたのでどのように活用しているかをまとめておくFri, 18 Jul 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-07-23/sibling-index-and-count/https://bcrikko.github.io/til/posts/2025-07-23/sibling-index-and-count/sibling-indexとsibling-countを使うと、CSSで兄弟要素の全数とその中での位置を取得できる。要素の全数と位置を取得できるので、たとえば角度の計算が必要なリングメニューのようなUIを簡単に実装できる。Wed, 23 Jul 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-07-29/font-size/https://bcrikko.github.io/til/posts/2025-07-29/font-size/ページ全体のフォントサイズを設定する際、ブラウザのデフォルト値（16px）を使うのが一般的だ。しかし、ブラウザのユーザー設定フォントサイズは9〜24pxと幅広く、推奨値以外を設定した場合、デザインが崩れたり、ユーザー体験が損なわれたりする可能性がある。Tue, 29 Jul 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-07-30/open-source-intelligence/https://bcrikko.github.io/til/posts/2025-07-30/open-source-intelligence/OSINT（Open Source Intelligence）とは、誰でもアクセスできる公開情報を収集し、分析することで、特定の目的に役立つ情報を得る手法である。個人に焦点を当てると、SNSのプロフィールや投稿、ブログ、論文、地図情報、GitHubリポジトリや会社のオウンドメディア投稿など、それぞれは独立した情報に見えても、断片を組み合わせることで個人の行動パターンや主義主張などを明らかにできる。もちろん合法的な情報Wed, 30 Jul 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-08-01/monthly-letter/https://bcrikko.github.io/til/posts/2025-08-01/monthly-letter/2025年7月に投稿した記事をタグごとにまとめ、要点を簡潔に紹介する。CSSやJavaScript、AI、セキュリティなど幅広いトピックをカバー。Fri, 01 Aug 2025 00:00:00 GMTGitHub Copilothttps://bcrikko.github.io/til/posts/2025-08-06/url-pattern/https://bcrikko.github.io/til/posts/2025-08-06/url-pattern/URL Pattern APIを使うことで、URLのパーツ（プロトコル、ホスト名、パス、クエリパラメータ、ハッシュなど）をパターンマッチングで抽出できる実験的なWeb APIである。このWeb APIを使うことで、URLパターンマッチングがやりやすくなるので、ルーティングやアクセス制御などURLを扱う処理が簡潔に書けるようになる。Wed, 06 Aug 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-08-19/just-world-hypothesis/https://bcrikko.github.io/til/posts/2025-08-19/just-world-hypothesis/良いことをした人は報われてほしいし、悪いことをした人には相応の罰を受けてほしい。そう思うのは、善人側にいる人にとっては自然だろう。しかし、現実は必ずしもそうではないし、そういった思考が認知の歪みを生むこともある。Tue, 19 Aug 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-08-26/3d-layered-text/https://bcrikko.github.io/til/posts/2025-08-26/3d-layered-text/テキスト用の要素を複数個用意し、1つずつtranslateZ()で奥方向（Z軸方向）にずらしていくことで、CSSだけでワードアートのような3Dテキスト表現が実現できる。Tue, 26 Aug 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-08-27/propmpt-orchestration-markup-language/https://bcrikko.github.io/til/posts/2025-08-27/propmpt-orchestration-markup-language/主流なAI（GPT）では、プロンプト（指示）を自然言語で与えて、タスクを実行させる。ただし、誰もが一度は「自然言語を使った指示はあいまいで、実行ごとに結果が困って困る」「利用者によってプロンプトのフォーマットが異なるので管理しづらい」と思ったことがあるだろう。Wed, 27 Aug 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-08-29/open-details/https://bcrikko.github.io/til/posts/2025-08-29/open-details/details要素を使うことで、アコーディオンメニューのようなものが簡単に実装できる。ただし、details要素を開いた状態にするにはopen属性を付ける必要があり、内包される情報が隠蔽されてしまう。Fri, 29 Aug 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-09-01/monthly-letter/https://bcrikko.github.io/til/posts/2025-09-01/monthly-letter/2025年8月に公開した記事のまとめ。フロントエンド技術やAI、認知バイアスなど幅広いトピックを解説。Mon, 01 Sep 2025 00:00:00 GMTGitHub Copilothttps://bcrikko.github.io/til/posts/2025-09-02/self-handicapping/https://bcrikko.github.io/til/posts/2025-09-02/self-handicapping/久しぶりにオモコロチャンネルを見たときに 「【実体験】これだけは気をつけた方がいいことを話します」 という動画を見つけた。この動画では、過去の失敗をもとに気をつけた方が良いことが語られている。たとえば「最初に作った銀行口座は一生使うことになる」「銀行印は特別だから絶対になくすな」「通帳をディズニーのデザインにしたら失くした」みたいなことが挙げられていた。Tue, 02 Sep 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-09-04/scrollbar-color/https://bcrikko.github.io/til/posts/2025-09-04/scrollbar-color/scrollbar-colorプロパティを使うことで、スクロールバーの色を変更できる。Safari TP 227でサポートされたので、近々全主要ブラウザで利用可能になりそうだ。Thu, 04 Sep 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-09-08/youtube-seekbar/https://bcrikko.github.io/til/posts/2025-09-08/youtube-seekbar/YouTubeのサムネには、動画をどこまで見たかわかるように赤色のシークバーが表示されている。しかし、「赤」は警告色で人の目を引くため、クリック率を増やしたい動画投稿者はサムネに赤色の枠をつけることが多々ある。そのため、YouTubeのシークバーがとサムネの色が被ってしまい、見えなくなる。Mon, 08 Sep 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-09-19/interpolate-size-vs-calc-size/https://bcrikko.github.io/til/posts/2025-09-19/interpolate-size-vs-calc-size/CSSアニメーションの鬼門に、height: autoのトランジションがうまくできない問題がある。height:0→autoをトランジションするでは、Experimentalなcalc-size()という関数をつかって実現していた。interpolate-sizeプロパティは、アニメーションやトランジションを行うときに、実際のheightなどのサイズとauto、fit-content、max-content などの内在サイズを補間するために使用する。Fri, 19 Sep 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-09-30/claude-code-with-ai-engine/https://bcrikko.github.io/til/posts/2025-09-30/claude-code-with-ai-engine/Claude Codeは基本有料でPro/Maxプランでないと使えない。そのため利用を躊躇していた。そんな中、Claude Code Router を使うことで、自分の好きなプロパイダーで Claude Code を使えると知った。また、つい先日リリースされたさくらのAI Engineは、1ヶ月3,000リクエストまで無料で使えるということで、Claude Code Router + さくらのAI Engineを使ってAgentic Codingを体験してみた。Tue, 30 Sep 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-10-01/monthly-letter/https://bcrikko.github.io/til/posts/2025-10-01/monthly-letter/2025年9月に公開された記事のまとめ。HTML、CSS、JavaScript、その他のトピックをタグごとに分類して紹介します。Wed, 01 Oct 2025 00:00:00 GMTGitHub Copilothttps://bcrikko.github.io/til/posts/2025-10-21/vincent-van-gogh/https://bcrikko.github.io/til/posts/2025-10-21/vincent-van-gogh/2025/09/12 〜 2025/12/21、上野の東京都美術館でゴッホ展 家族がつないだ画家の夢が開催されている。画家ゴッホを懇親的に支えた弟テオや、画家として評価されるよう奔走したテオの妻ヨーなど、ゴッホの家族にフォーカスして絵画や手紙を展示する展覧会だ。筆者は、ゴッホについて「ひまわり」「星月夜」「自画像」など有名作品程度しか知らないので、展覧会を楽しむためにも予習したい。Tue, 21 Oct 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2025-11-01/sakura-internet/https://bcrikko.github.io/til/posts/2025-11-01/sakura-internet/2025年11月1日、さくらインターネットにフロントエンドエンジニアとして入社してから10年がたった。これまでに失敗したことや迷惑をかけたことも多々あったが、振り返ってみると求められている以上の成果を出せたのではないかと自負している。ということで、この10年間で取り組んできた活動を振り返る。Sat, 01 Nov 2025 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-01-19/geolocation/https://bcrikko.github.io/til/posts/2026-01-19/geolocation/JavaScriptのGeolocation APIよりも権限要求や位置情報取得の実装が簡略化された。Geolocation APIでは予期せぬタイミングで権限要求のダイアログが表示されたり、ブラウザがブロックしたり、ユーザー体験が阻害されるケースがあったが、<geolocation>要素ではユーザーの明示的な操作により開始されるので意図とタイミングが明確になった。Mon, 19 Jan 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-02-20/promise-static-methods/https://bcrikko.github.io/til/posts/2026-02-20/promise-static-methods/JavaScriptで非同期処理に使うPromiseオブジェクトには、以下のような静的メソッドがある。Promise.all()はよく使うものの他はあまり使ったことがないので、すぐ使い方を忘れてしまう。そこで、ユースケースと視覚的にわかりやすく解説する。Fri, 20 Feb 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-03-06/map-get-or-insert/https://bcrikko.github.io/til/posts/2026-03-06/map-get-or-insert/UpsertのプロポーザルがStage 4に到達し、Map#getOrInsertやMap#getOrInsertComputedが主要ブラウザで利用できるようになった。 Map内にキーが存在すればその値を返し、存在しなければデフォルト値を返すメソッドだ。キャッシュや遅延初期化などで活用できる。Fri, 06 Mar 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-03-10/set-html/https://bcrikko.github.io/til/posts/2026-03-10/set-html/Element#innerHTMLは、文字列をHTMLとして解釈してDOMに反映するプロパティで、ユーザー入力などをそのまま反映させるとクロスサイトスクリプティング（XSS）攻撃のリスクがある。テキストノードであればNode#textContentのように安全に反映できるプロパティができたが、いまだにHTMLとしてそのまま使いたいユースケースもある。そこでFirefoxが先行してElement#setHTML()という安全に文字列をDOMに反映するための新しいメソッドを実装した。Tue, 10 Mar 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-03-12/show-picker/https://bcrikko.github.io/til/posts/2026-03-12/show-picker/showPicker()でinput要素のDatePickerやSelect要素のドロップダウンメニューを表示するで紹介したHTMLInputElement#showPicker()でdatalist要素のドロップダウンメニューも表示できるようになった。執筆時点ではFirefox 149（beta）でサポートされていたので、もう少しで全主要ブラウザで利用可能になる。Thu, 12 Mar 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-03-13/multi-columns/https://bcrikko.github.io/til/posts/2026-03-13/multi-columns/CSS multi-column layoutは、コンテンツを新聞や論文のように複数段に分割したり、段数、幅、間隔、区切り線、分割などを制御する仕組みだ。Grid LayoutやFlexboxなどを使わずに自動的に段組みレイアウトをつくることができ、見出しや段落の制御が容易になる。ただし、コンテナーの高さや行数を固定すると文章が読みづらくなることがあるため、アクセシビリティの観点から注意が必要だ。Fri, 13 Mar 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-03-16/resize-observer/https://bcrikko.github.io/til/posts/2026-03-16/resize-observer/ResizeObserverは、要素サイズの変化を監視して変更が発生したらcallbackを呼び出すオブジェクトだ。Canvas APIは、Canvas要素のサイズ（widthやheight）が変更されても再描画しないため、正しく描画されない。そんなときにResizeObserverを使ってCanvas要素のサイズが変更されたら再描画する処理を実装できる。Mon, 16 Mar 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-03-17/astro-pagefind/https://bcrikko.github.io/til/posts/2026-03-17/astro-pagefind/当ブログも記事が増えてきた。GitHub上で検索できるけどより簡単な方法を提供するためにPagefindを導入した。Pagefindは、クライアントで動作するStaticな検索ライブラリ。Astroのような静的サイトジェネレーター（SSG）との相性がよく、ページをビルドしたあとにインデックスを生成し、クライアントでそれを使って検索を行う。Tue, 17 Mar 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-03-18/why-i-keep-writing-tech-blog/https://bcrikko.github.io/til/posts/2026-03-18/why-i-keep-writing-tech-blog/私は2013年にテックブログを立ち上げて以来、記事を書き続けている。全盛期には月8〜10万PVあり、AdSenseの広告料だけで毎月1万円ほどの収入があった。現在は、1〜2万PVまで落ち込み広告料も月1.5ドルになっているので、ブログを書く理由が「お金」にあったら続けていないと思う。いまでも続けているのは、当初の目的に加え新たな理由ができたからだ。Wed, 18 Mar 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-03-19/open-pseudo-class/https://bcrikko.github.io/til/posts/2026-03-19/open-pseudo-class/いままで要素が開いている状態かどうかは、details[open]やdialog[open]のように属性セレクターを使って判定してきた。そのため、select要素やinput（カラーピッカー）のような入力フォームでは開いた状態をCSSから選択する方法がなく、JavaScriptでクラスを付け替える実装に頼るしかなかった。そこで登場したのが:open擬似クラス。 :open擬似クラスは開閉状態を持つ要素のうち、現在開いているものを選択するための新しいCSS擬似クラスだ。Thu, 19 Mar 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-03-20/at-supports/https://bcrikko.github.io/til/posts/2026-03-20/at-supports/ブラウザがCSSの特定の機能をサポートしているか確認するために@supportsが提供されている。 @supportsはfeature queries（機能クエリー）と呼ばれ、プログレッシブエンハンスメントが実現できる。Fri, 20 Mar 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-03-23/history-of-web-navigation/https://bcrikko.github.io/til/posts/2026-03-23/history-of-web-navigation/Webのナビゲーションは単なる技術的な進化ではなく、ユーザー体験と開発モデルの変化とともに再設計されてきた。URLや履歴、画面状態をどのように一致させるかという問題への解答の変遷だ。Mon, 23 Mar 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-03-25/heading-pseudo-classes/https://bcrikko.github.io/til/posts/2026-03-25/heading-pseudo-classes/ページのベースとなるスタイルをつくるときに、見出しを :is(h1, h2, h3, h4, h5, h6) { ... } のようにまとめてスタイルを当てることがある。それをシンプルかつ、詳細度を制御してスタイリングするために、:heading擬似クラスと:heading()関数という新しいCSSセレクターが検討されている。2026年3月の執筆時点では、Firefox NightlyやSafari TPのみで利用可能。Wed, 25 Mar 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-04-01/meter-element/https://bcrikko.github.io/til/posts/2026-04-01/meter-element/progress要素に似た見た目のmeter要素がある。meter要素は、範囲内の数値を表すための要素で、highやlow属性を使うことで自動的にメーターの色を変えられる。progress要素は見た目が似ているが、タスクの進捗状況を表す要素なので、low/highのような範囲を指定するような属性はない。Wed, 01 Apr 2026 00:00:00 GMTダーシノhttps://bcrikko.github.io/til/posts/2026-04-03/war-of-words/https://bcrikko.github.io/til/posts/2026-04-03/war-of-words/小さい頃から言葉をぶつけ合うのが怖くて、対立構造にならない立ち回りをしてきた。思いやりのある言葉で、お互いを尊重しあい、意見はするが折れるところは折れる。たとえ相手の意見が間違っていたとしても一旦受け止めて、優しく返す。そんな穏やかな議論がしたい。しかし、言葉を選ばない人たちは一定数いる。Fri, 03 Apr 2026 00:00:00 GMTダーシノ