JavaScriptの識別子（変数名、関数名、プロパティ名など）の2文字目以降に中黒「・」（U+30FB KATAKANA MIDDLE DOT）が使えるようになりました。以下のコードはChrome 124では構文エラーになりますが、Chrome 125では問題なく実行できます。const シン・ゴジラ = 2016;JavaScriptの識別子中黒が使えるようになったのは、JavaScript（ECMAScript）の仕様が変わったからではありません。変わったのはUnicodeの仕様のほうです。Unicode 15.1.0（2023年9月）においてOther_ID_Continueプロパティ（を持つ文字の集まり）に中黒が追加されました。そもそもJavaScriptの識別子に使える文字は、Unicodeを参照して定義されています。ECMAScript 2023（2023年6月）では以下のようになっています。識別子の1文字目に使える文字 UnicodeのID_Startプロパティを持つ文字 $（U+0024 DOLLAR SIGN） _（U+005F LOW LINE） 識別子の2文字目以降に使える文字 UnicodeのID_Continueプロパティを持つ文字 $（U+0024 DOLLAR SIGN） ゼロ幅非接合子（U+200C ZERO WIDTH NON-JOINER） ゼロ幅接合子（U+200D ZERO WIDTH JOINER） （いわゆるアンダースコア「_」はID_Continueプロパティを持つため、2文字目以降にも使えます。）Unicodeの仕様も毎年のように改定されますが、ECMAScript仕様ではUnicodeの「最新バージョン」が参照されています。Unicodeの識別子UnicodeのID_Start、ID_Continueプロパティは、各種の「識別子」に使える文字として推奨されるものを表しており、UAX #31 Unicode Identifiers and Syntaxで以下の文字を含むものとして定義されています。ID_Startプロパティ 一般カテゴリがLetterである文字 一般カテゴリがLetter_Numberである文字 Other_ID_Startプロパティを持つ文字 ただしPattern_SyntaxプロパティまたはPat

HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。結論従来の手法appearanceプロパティを使う手法外枠の配置未チェックとチェック済みの切り替え強制カラーモードへの対応 透明なボーダーやアウトライン 内向きの影や背景グラデーション 画像やテキスト ブラウザ組み込みの外観 状態に応じたスタイルの指定参考文献結論単に色調を整えられればよいという場合は、accent-colorプロパティを使います。input[type="checkbox"], input[type="radio"] { accent-color: #d31;} くだもの やさい りんご みかん Windows 11 Firefox Nightly 128.0a1での表示accent-colorプロパティは継承するので、body要素などに指定してその子孫のフォームコントロールに一律に適用することもできます。自由に装飾したい場合は、input要素にappearance: noneを指定したうえで、未チェック状態とチェック済み状態のスタイルを指定していきます。::before、::after疑似要素も使えます。input[type="checkbox"] { -webkit-appearance: none; /* Safari 15.3以下のため */ appearance: none; border: thin solid;}input[type="checkbox"]::before { content: '✔'; visibility: hidden;}input[type="checkbox"]:checked::before { visibility: visible;} くだもの やさい Windows 11 Firefox Nightly 128.0a1での表示従来の手法これまでチェックボックスやラジオボタンをCSSで装飾したい場合は、input要素自身ではなくその直後に置いたspan要素やlabel要素を装飾するのが一般的でした。<label> <input

この記事はPerl Advent Calendar 2022の21日目の分です。Perlでは、関数内で定義した関数も外部から見えてしまいます。use feature 'say';sub foo { sub bar { say 'bar'; } bar();}# foo関数の外でもbar関数を呼び出せる。bar();特定のスコープでのみ参照できる関数を定義したいときは、関数定義をsubではなくmy sub（またはstate sub）から始めます。この機能はレキシカルサブルーチン（lexical subroutines）と呼ばれます。use feature 'say';sub foo { my sub bar { say 'bar'; } bar();}# 未定義の関数呼び出しによる例外が発生する。bar();ちょっとした処理をまとめるのに便利なレキシカルサブルーチンですが、perlcriticとの組み合わせに難がありました。レキシカルサブルーチンを使ったコードをperlcriticにかけると、Subroutines::ProhibitNestedSubsポリシーとSubroutines::ProhibitBuiltinHomonymsポリシーのエラーが出てしまうのです。（perlcriticはPerl向けのリンターです。詳しくは「perlcriticとのつきあい方 - 私が歌川です」などを参照してください。）Subroutines::ProhibitNestedSubsポリシーは関数の入れ子を禁止します。入れ子の内側の関数が意図せず外部に公開されるのを避けるためのものなので、もともと外部に公開されないレキシカルサブルーチンに対しては禁止する意味がありません。Subroutines::ProhibitBuiltinHomonymsポリシーは組み込み関数と同名の関数を禁止します。perlcriticの内部で使われるで使われるPPIモジュールの不具合により、レキシカルサブルーチンの名前は常にsubであるとみなされていました。これらの問題を解決するため、昨年perlcriticとPPIに以下のプルリクエストを提出しました。Allow lexical subroutines to be inside subroutines by nanto · Pull Request #97

この記事はCSS Advent Calendar 2022の19日目の分です。CSSのconic-gradient（扇形グラデーション）関数を使うと、円グラフや集中線のような表現ができます。ここであえて扇形の中心角の部分に注目し、直線的な模様を作ってみることはできないでしょうか？ いくつか試してみました。例例1. 二重のボーダー「二重のボーダー」のデモ「二重のボーダー」のCSSコードp { --outer-border-width: 1em; --inner-border-width: 1em; --outer-border-top-left-color: #1bf; --inner-border-top-left-color: #35b; --inner-border-bottom-right-color: #dc6; --outer-border-bottom-right-color: #3a8; margin: 0; padding: 1em; border: calc(var(--outer-border-width) + var(--inner-border-width)) solid transparent; background: conic-gradient(from 180deg at var(--outer-border-width) var(--outer-border-width), var(--outer-border-top-left-color) 270deg, transparent 270deg) no-repeat border-box 0 0 / calc(100% - var(--outer-border-width)) 100%, conic-gradient(from 180deg at var(--inner-border-width) var(--inner-border-width), var(--inner-border-top-left-color) 270deg, transparent 270deg) no-repeat border-box var(--outer-border-width) var(--outer-border-width) / calc(100% - 2 * var(--outer-bo

この記事はCSS Advent Calendar 2022の11日目の分です。CSSでpositoin: absolute（絶対配置）の要素の位置を指定するときには、top、left、right、bottomプロパティ（またはこれらを一括指定するinsetプロパティ）がよく使われます。もし絶対配置の要素にそれらのプロパティが指定されていなかったら、その要素の位置はどこになるでしょうか？その場合、絶対配置の要素は原則として「その要素がpositoin: static（静的配置）だった場合の位置（静的位置矩形; static-position rectangle）」に置かれます。絶対配置の要素の親要素がインライン要素だった場合、絶対配置の要素自身がdisplay: inline（インライン要素）かdisplay: block（ブロック要素）かによって位置が異なってくることになります（インライン要素の子要素が絶対配置のときのデモ）。この挙動をうまく利用すれば、絶対配置の要素の親要素にposition: relativeをつけて回らなくても、絶対配置の要素を期待する位置に置けることがあります。その場合、細かな位置の調整にinsetプロパティなどを使うことはできないので、transform: translate(...)やmarginプロパティを使うことになります。フレックスアイテムが絶対配置のとき「原則として」というからには例外もあります。絶対配置のフレックスアイテムでinsetプロパティなどが指定されていないものは、フレックスコンテナの位置に置かれます。（「フレックスコンテナ」はdisplay: flexまたはdisplay: inline-flexが指定された要素、「フレックスアイテム」はフレックスコンテナの子要素です。）グリッドアイテムが絶対配置のときグリッドアイテムが絶対配置のときはちょっと複雑です。グリッドコンテナが静的配置なら、絶対配置のグリッドアイテムでinsetプロパティなどが指定されていないものは、グリッドコンテナの位置に置かれます。グリッドコンテナが静的配置でないなら、絶対配置のグリッドアイテムでinsetプロパティが指定されていないものは、gridプロパティなどで指定されたグリッド領域の位置に置かれます（グリッドアイテムが絶対配置のときのデモ）。（「グ

この記事はPerl Advent Calendar 2022の11日目の分です。PerlのText::Markdown::Discountモジュールを使うと、MarkdownをHTMLに変換できます。use feature qw(say);use Encode qw(encode_utf8);use Text::Markdown::Discount qw(markdown);say encode_utf8 markdown(<<'MARKDOWN');こんにちは、世界。* 順序* なし* リストMARKDOWN<p>こんにちは、世界。</p><ul><li>順序</li><li>なし</li><li>リスト</li></ul>オリジナルのMarkdownにはありませんが、CommonMarkおよびその拡張であるGitHub Flavored Markdownなどには囲い付きコードブロック（fenced code block）が存在します。3つ以上のバッククォート（`）の並びまたはチルダ（~）の並びで囲んだ部分が、HTMLのpre要素とcode要素を使って出力されるというものです。Text::Markdown::Discountモジュール（の内部で使われているDiscountというMarkdown処理系）でも囲い付きコードブロックに対応していますが、扱い方がバージョンによって異なります。Text::Markdown::Discount 0.14以降囲い付きコードブロックを有効にするには、markdown関数の第2引数にMKD_FENCEDCODEフラグ（0x02000000）を指定します。my $html = markdown(<<'MARKDOWN', Text::Markdown::Discount::MKD_NOHEADER | Text::Markdown::Discount::MKD_NOPANTS | 0x02000000);```fenced code block```MARKDOWN<pre><code>fenced code block</code></pre>MKD_FENCEDCODEフラグはDiscount処理系で定義されているものの、Text::Markdown::Discountモジュールでは定数が定義されていていないため、フラグの値である

この記事はCSS Advent Calendar 2022の9日目の分です。CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー（スクロールバーが常に表示されるようなもの）が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときでもスクロールバーと同じだけの領域が確保され、内容の幅はその分狭くなります。左右中央に配置したいのにスクロールバーの領域の分だけずれて困るというときは、scrollbar-gutter: stable both-edgesを指定することで、左右どちらにもスクロールバーと同じだけの領域が確保されます。scrollbar-gutterプロパティの各値を指定した例（上図はWindows 10 Firefox nightly 109.0a1での表示）scrollbar-gutterプロパティはoverflow: hiddenな要素にも適用されますが、overflow: visibleな要素には適用されません。また、scrollbar-gutterプロパティの効果は、縦スクロールバー（縦書きなら横スクロールバー）にのみ影響します。オーバーレイスクロールバーが使われる環境では、scrollbar-gutter: stableの効果はありません。使用事例使用事例としては、@about_hiroppyさんの紹介している「HTMLのdialog要素によるモーダルダイアログが開いているときに、背景の文書をスクロールさせない」というのが考えられます（scrollbar-gutterプロパティを指定した例と指定しなかった例）。html { scrollbar-gutter: stable;}html:has(d

この記事はPerl Advent Calendar 2022の5日目の分です。Perlで配列の先頭n要素以外を抜き出したい——例えば配列('a', 'b', 'c', 'd', 'e')から先頭2要素以外を抜き出して配列('c', 'd', 'e')を得たい——とき、最近はList::Utilモジュールのtail関数を使えます。tail関数は配列の末尾n要素を抜き出す関数ですが、抜き出す要素数として負数-mを指定すると、先頭m要素以外の要素を返します。use List::Util qw(tail);my @array1 = qw(a b c d e);my @array2 = tail -2, @array1;# @array2の内容は('c', 'd', 'e')List::Utilモジュールはコアモジュール（Perl本体と一緒にインストールされるモジュール）であり、Perl 5.28以降なら追加のモジュールインストールなしにtail関数を使えます。それより古いPerlでは、List::Utilの新しいバージョン（1.50以降）をインストールする必要があります。以前からある方法として、配列スライスを使うこともできます。my @array1 = qw(a b c d e);my @array2 = @array1[2 .. $#array1];# @array2の内容は('c', 'd', 'e')

この記事はTypeScript Advent Calendar 2022の3日目の分です。「addEventListenerでリッスンしているイベントをPromise化する」という記事で、イベントをPromiseで受け取る関数が紹介されています。Node.jsのeventsモジュールのevents.onceメソッドと同じ機能を実現するものですね。Webブラウザ組み込みのDOMでも同じ機能を提供しようという提案もなされています。最初の記事では余談として今回紹介したeventPromisifyはTypeScriptで書こうとすると型の定義が難しいなと思いましたと書かれています。例えばeventPromisify(document, 'click')と呼び出したら返り値の型がPromise<MouseEvent>になってほしいのですが、そのような型定義を記述できるでしょうか？ （以下、TypeScript 4.9を想定しています。）イベントが発生する対象（target）とイベント名（type）を決め打ちできるのなら、type EventForDocumentClick = typeof document.addEventListener<'click'> extends (type: 'click', listener: (event: infer E) => void) => void ? E : never;// = MouseEventのように、documentと'click'からMouseEventを導出できます。しかし、変数documentではなくDocument型だけが与えられているとき、Document['addEventListener']<'click'>のように型引数を指定することはできません。またDocument型におけるaddEventListenerメソッドの定義は、イベント名がDocument固有（keyof DocumentEventMap型）のものとイベント名が文字列全般（string型）のものがオーバーロードされています。型引数が絡んでいなければ、「オーバーロードされた関数型から引数の型や返り値の型を取り出す方法」に書かれているように型を取り出せます。しかし、型引数を持つメソッドがオーバーロードされているときに、意図した型引数が指定された

この記事はPerl Advent Calendar 2022の2日目の分です。Perlで配列の先頭n要素を抜き出したいとき、最近はList::Utilモジュールのhead関数を使えます。use List::Util qw(head);my @array1 = qw(a b c d e);my @array2 = head 3, @array1;# @array2の内容は('a', 'b', 'c')List::Utilモジュールはコアモジュール（Perl本体と一緒にインストールされるモジュール）であり、Perl 5.28以降なら追加のモジュールインストールなしにhead関数を使えます。それより古いPerlでは、List::Utilの新しいバージョン（1.50以降）をインストールする必要があります。以前からある方法配列スライスを使うこともできますが、抜き出す要素数から1引いた値を指定することになって、ちょっと紛らわしいです。my @array1 = qw(a b c d e);my @array2 = @array1[0 .. 2];# @array2の内容は('a', 'b', 'c')また、元の配列の要素数が抜き出す要素数より少ないときは、不足分がundefで埋められてしまいます。my @array1 = qw(a);my @array2 = @array1[0 .. 2];# @array2の内容は('a', undef, undef)undefで埋められたくなければ、min関数を使うなどひと工夫する必要があります。use List::Util qw(min);my @array1 = qw(a);my @array2 = @array1[0 .. min(2, $#array1)];# @array2の内容は('a')splice関数を使うこともできますが、元の配列も変更されてしまいます。my @array1 = qw(a b c d e);my @array2 = splice @array1, 0, 3;# @array1の内容は('d', 'e')# @array2の内容は('a', 'b', 'c')

この記事はCSS Advent Calendar 2022の1日目の分です。HTMLのdialog要素を使うとモーダルダイアログを表現できます（使い方によってはモードレスダイアログも表現できます）。ただし、そのままだとモーダルダイアログを開いているときに、マウスホイールなどによってダイアログの背景（文書全体）までスクロールしてしまいます。モーダルダイアログの背景をスクロールさせたくない場合、これを書いている現在のCSS仕様草案によれば、以下の記述で実現できるはずです（デモ）。dialog { overscroll-behavior: contain;}しかしながら、この方法はChrome canary 110では期待通り動作しますがマウスホイールによるスクロールは防げますが、矢印キーやPageUp/PageDownキーによるスクロールは防げず、Firefox nightly 109では動作しません。このあたりの事情はちょっと複雑で、CSS仕様草案によれば、overflow: autoな要素においてはスクロール可能な領域がないときもoverscroll-behaviorプロパティが適用されるはず。 CSS Overscroll Behaviorモジュール草案によれば、スクロールコンテナに対してoverscroll-behaviorプロパティが適用される。 CSS Overflowモジュール草案によれば、overflow: autoな要素（およびoverflow: hiddenな要素）はスクロール可能な領域がないときもスクロールコンテナである。 各ブラウザ（少なくともChromeの場合とFirefoxの場合）は、あえて仕様草案を無視し、スクロール可能な領域がないときにoverscroll-behaviorプロパティを適用しない。 しかし、Chromeはなぜか、dialog要素においてはスクロール可能な領域がないときもマウスホイールによるスクロールに関してはoverscroll-behaviorプロパティを適用する模様（そうなっている経緯は未調査）。 CSS仕様草案に対して、スクロール可能な領域がないときはoverscroll-behaviorプロパティが適用されないようにしよう（仕様側を現状のブラウザ実装に合わせよう）という提案がなされている。 HTML標準に対して、モ

HTMLのa要素はハイパーリンクを表す要素であり、リンク先のURLをhref属性に指定します。しかし、a要素の役割はそれだけではありません。HTML標準によれば、a要素は「リンクとなりうる箇所のプレースホルダー」として使うこともできます。この場合はhref属性を指定しません。リンクとなりうる箇所の例として、ナビゲーションやタブUI、パンくずリストなどでの「現在の項目」があります。<nav> <ul> <li><a href="/">ホーム</a></li> <li><a>最新記事</a></li> <li><a href="/archives">アーカイブ</a></li> <li><a href="/settings">設定</a></li> </ul></nav>ReactなどJSXでa要素を生成する場合、href属性を指定しないためにはhrefプロパティにundefinedを指定します。import React from "react";type Item = { label: string; url: string; isCurrent: boolean;};type Props = { items: readonly Item[];};const Navigation: React.FC<Props> = ({ items }) => ( <nav> <ul> {items.map((item) => ( <li> <a href={item.isCurrent ? undefined : item.url}> {item.label} </a> </li> ))} </ul> </nav>);リンクのプレースホルダーとしてのa要素は、うまく使えばテンプレートやCSSの記述を簡潔にできます。覚えておいて損はないでしょう。なお、a要素にhref属性を指定しないと聞いてname属性を指定するのかと思った人もいるでしょうが、現在のHTML標準ではa要素のname属性は廃止済みであり指定すべきでないとされています。

2022年6月16日に開催された「IE卒業式」というイベントで、「私とIEとフィードバック」という発表(5分間のライトニングトーク)をしてきました。以下に話した内容を掲載します。 私とIEとフィードバック 2022-06-16 nanto_vi (株式会社はてな) Web開発者によるフィードバック 標準準拠 相互運用性の向上 ➜ より開発しやすく ブラウザベンダが不具合に気づくことを期待するという受身の立場から、積極的に熱心でいる(自らバグを報告する)ことへの移行は、信じられないほど多くの力をあなたにもたらします。 John Resig [発話] ソフトウェアを作るうえでも使う上でもフィードバックは重要ですね。Webブラウザの場合、Web開発者からのフィードバックによって標準準拠の度合いが進んだり、ブラウザ間の相互運用性が向上したりして、Web開発者にとってはより開発しやすくなります。John Resigさん——jQueryを作った方です——も、バグが直るのを待つのではなく自らバグを報告するとめっちゃええことあるというようなことをおっしゃっています。 個人開発者によるIEへのフィードバック手段 IE 7以前: 主にニュースグループ microsoft.public.windows.inetexplorer.* IE 7以降: 主にMicrosoft Connect バグトラッキングシステム go to http://131.107.85.110/msdn/bugreports/ to report issues Internet Explorer 5.5 Preview [発話] 個人がIEにフィードバックする手段は、IE 7の前後で大きく変わっています。IE 7以前はニュースグループ——掲示板やメーリングリストのようなものです——が中心でした。IE 7以降はMicrosoft Connectというサービスを使うようになっています。Microsoft Connectにはバグトラッキングシステムが備わっており、他人の登録したバグを検索したり、自分の登録したバグの状態を知れたりと、バグ報告者からすると使いやすくなっています。ちなみに、IE 5.5 Previewのときにはバグ報告用のURLがIPアドレス丸出しで、のどかな時代だったんだなというのを感じさせます。 IE 8

TypeScript の可変長タプル型 (variadic tuple types) とは、配列型やタプル型を展開して別のタプル型の一部として使える機能のことです (「TypeScript 4.0で導入されるVariadic Tuple Typesをさっそく使いこなす - Qiita」に詳しいです)。記法としては、展開する型の直前に三連続のドット ... を記述します。例えば、type Sandwich<Fillings extends unknown[]> = ['bread', ...Fillings, 'bread'];のように具材 (filling) をパン (bread) で挟む Sandwich 型があったとき、Sandwich<['ham']> 型は ['bread', 'ham', 'bread'] 型に展開されます。type HamSandwich = Sandwich<['ham']>;// → ['bread', 'ham', 'bread']type BLTSandwich = Sandwich<['bacon', 'lettuce', 'tomato']>;// → ['bread', 'bacon', 'lettuce', 'tomato', 'bread']type RichHamSandwich = Sandwich<'ham'[]>;// → ['bread', ...'ham'[], 'bread']type TwoSlicesOfBread = Sandwich<[]>;// → ['bread', 'bread']ここで型引数 Fillings に共用体型 (縦線 | で区切った複数の型のうちのいずれかを表す型) を渡すとどうなるでしょうか。具材がハムか卵なら、できあがるのはハムサンドか卵サンドになります。つまり、Sandwich<['ham'] | ['egg']> 型は Sandwich<['ham']> | Sandwich<['egg']> 型と同等に扱われます。type HamOrEggSandwich = Sandwich<['ham'] | ['egg']>;// → ['bread', 'ham', 'bread'] | ['bread', 'egg', 'bread']このように、T<A | B | C |

この記事は HTML アドベントカレンダーの 24 日目の分、兼 JavaScript アドベントカレンダーの 24 日目の分です。HTML のフォームコントロール要素 (input、textarea、select、button 要素など) には、label 要素を使ってラベルを指定できます。ここでいうラベルとは、そのフォームコントロールに何を入力するか・そのフォームコントロールで何ができるのかの簡単な説明であり、人間が読んで理解できるようなフォームコントロールの名前です。ある label 要素の子孫にフォームコントロール要素が存在すれば、その label 要素の内容が、そのフォームコントロール要素のラベルとなります。そうでない場合、label 要素の for 属性にフォームコントロール要素の ID (id 属性の値) を指定する必要があり、その label 要素の内容が、その ID を持つフォームコントロール要素のラベルとなります。このフォームコントロール要素と label 要素との紐づきは JavaScript を使って参照できます。フォームコントロール要素オブジェクトの labels プロパティはそのフォームコントロール要素と紐づく label 要素の一覧 (NodeList オブジェクト) を返し、label 要素オブジェクト (HTMLLabelElement オブジェクト) の control プロパティはその label 要素に紐づくフォームコントロール要素を返します。labels プロパティの名前が複数形なのは、ひとつのフォームコントロール要素に対して複数の label 要素を紐づけられるからですね。<label id="query-label-1" for="query-field">キーワード</label><label id="query-label-2" for="query-field">URL</label><input id="query-field" type="search" name="q">const label1 = document.getElementById('query-label-1');const label2 = document.getElementById('query-label-2');const fie