Days on the Moon

JavaScriptの識別子に中黒が使えるようになった

Fri, 07 Jun 2024 10:21:45 +0900

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プロパティまたはPattern_White_Spaceプロパティを持つ文字を除く（具体的にはⸯ（U+2E2F VERTICAL TILDE）が除かれる）

ID_Continueプロパティ

ID_Startプロパティを持つ文字
一般カテゴリがNonspacing_Markである文字
一般カテゴリがSpacing_Markである文字
一般カテゴリがDecimal_Numberである文字
一般カテゴリがConnector_Punctuationである文字
Other_ID_Continueプロパティを持つ文字
ただしPattern_SyntaxプロパティまたはPattern_White_Spaceプロパティを持つ文字を除く

ここでOther_ID_StartプロパティとOther_ID_Continueプロパティというのは、後方互換性のためにそれぞれID_StartプロパティとID_Continueプロパティに含めるべき文字を表しています。Other_ID_Continueプロパティに中黒（U+30FB）が追加されたことで、巡り巡ってJavaScriptの識別子に中黒が使えるようになったのです。

なお、中黒だけでなくゼロ幅非接合子（U+200C）とゼロ幅接合子（U+200D）も追加されたため、ECMAScript 2024以降では識別子の2文字目以降に使える文字の定義が「UnicodeのID_Continueプロパティを持つ文字または$（U+0024 DOLLAR SIGN）」と簡潔になる予定です。

過去にも識別子に中黒が使えた

ID_Continueプロパティの後方互換性のために中黒が追加されたということは、さらに以前は中黒がID_Continueプロパティに含まれていたのでしょうか？

まさにその通りで、Unicode 4.0.1（2004年5月）以前は中黒の一般カテゴリがConnector_Punctuationになっており、結果としてID_Continueプロパティに含まれていました。Unicode 4.1.0（2005年3月）で中黒の一般カテゴリがOther_Punctuationに変更され、ID_Continueプロパティに含まれなくなっていたのです。

ECMAScript 5.1ではUnicode 3.0以上への適合が求められていたため、ECMAScript 3（1999年12月）～5.1（2011年6月）の間は中黒を識別子に使えた可能性があります。（ECMAScript 2（1998年8月）以前はASCIIの範囲内の文字のみ識別子に使用可能、ECMAScript 2015（ES6、2015年6月）以降はUnicode 5.1.0以上への適合が求められる。）

他のプログラミング言語の識別子

識別子の定義にUAX #31を参照しているのはJavaScriptだけではありません。C、C++、Perl、Python、Rustなど多くのプログラミング言語がUAX #31を参照しています。これらの言語でもそのうち識別子に中黒が使えるようになるでしょう（\p{Word}との共通部分を採用しているPerlを除く）。

なお、JavaScript以外ではID_Start、ID_Continueプロパティではなく、XID_Start、XID_Continueプロパティを参照していることが多いです。これらのプロパティは、ある識別子にUnicode正規化を適用しても識別子として有効であり続けることを保証するため、それぞれID_Start、ID_Continueプロパティからいくつかの文字を除外しています。

参考文献

UAX31: Unicode Identifier の話 | ++C++; // 未確認飛行 C ブログ
UTC #176 properties feedback & recommendations (PDF)——「2.2 Katakana middle dots in XID_Continue」において、中黒が識別子に使えなくなったのは「うっかり（accidentaly）」だったと述べられている。
PropList-4.0.1.txt——中黒（U+30FB）の一般カテゴリがConnector_Punctuation（Pc）であることを確認
PropList-4.1.0.txt——中黒（U+30FB）の一般カテゴリがOther_Punctuation（Po）であることを確認
PropList-15.0.0.txt——Other_ID_Continueプロパティに中黒（U+30FB）が含まれないことを確認
PropList-15.1.0.txt——Other_ID_Continueプロパティに中黒（U+30FB）が含まれることを確認

CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版

Fri, 24 May 2024 09:05:10 +0900

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 type="checkbox">
  <span>...</span>
</label>

<input id="the-radio-1" type="radio">
<label for="the-radio-1">...</label>

/* 組み込みのチェックボックスとラジオボタンを見えなくする */
input[type="checkbox"], input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

input[type="checkbox"] + span { /* 未チェック状態のスタイル */ }
input[type="checkbox"]:checked + span { /* チェック済み状態のスタイル */ }
input[type="radio"] + label { /* 未チェック状態のスタイル */ }
input[type="radio"]:checked + label { /* チェック済み状態のスタイル */ }

この手法は、スタイル指定のためだけのspan要素が必要となる、あるいはinput要素にid属性を指定して明示的にlabel要素と紐づける必要があるという点で、ひと手間かかります。また、アクセシビリティを確保するため、input要素を見えなくするのにはdisplay: none以外の手段を使う必要があります（display: noneを使うと、チェックボックスやラジオボタンをキーボードで操作できなくなります）。

`appearance`プロパティを使う手法

appearanceプロパティを使う場合、HTML側ではlabel要素とinput要素の暗黙的な紐づけを使えます（明示的な紐づけを使っても構いません）。

<label>
  <input type="checkbox">
  ...
</label>

CSS側ではappearance: noneを指定します。これにより、input要素が組み込みのチェックボックスやラジオボタンではなく、単なる「内容が空の要素」として描画されることになります。<span></span>と同じ扱いができるので、背景、ボーダー、影、アニメーション、それに::before、::after疑似要素といったCSSの各種機能をふんだんに使って装飾できます。

外枠の配置

appearance: noneを指定しただけでは内容が空なので何も表示されません。まずは幅と高さを指定してチェックボックスまたはラジオボタンの領域を確保しましょう。幅と高さの指定が確実に効くようにするため、displayプロパティにinline-block、inline-grid、inline-flexなどの値を指定する必要があります。

input[type="checkbox"] {
  -webkit-appearance: none; /* Safari 15.3以下のため */
  appearance: none;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
}

そのままだとブラウザ組み込み（ユーザーエージェントスタイルシート）のスタイルが残ることがあるので、適宜初期化していきます。ブラウザごとの差異を吸収するため、マージンと背景色は常に指定したほうがよいでしょう。em単位を使うのならfont-sizeプロパティを、親要素と同じフォントや文字色（あるいはcurrentcolorキーワード）を使うのならfont-familyプロパティやcolorプロパティを、それぞれ継承させます。

input[type="checkbox"] {
  ...
  margin: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
}

また、気をつけておきたいのが行内での縦位置です。個人的には、チェックボックスおよびラジオボタンの縦中央と、ラベル文字列の縦中央とがそろったほうが収まりがよく感じられます（vertical-align: middleは英小文字の縦中央とそろえるので、日本語文字の縦中央とは少しずれますが……）。

input[type="checkbox"] {
  ...
  vertical-align: middle;
}

外枠の仕上げとしてボーダーを指定します。ラジオボタンの場合はborder-radiusプロパティで円形にするのがわかりやすいでしょう。ボーダーではなく背景画像やグラデーションで外枠を表現することもできます。後述する強制カラーモードへの対応のため、背景画像を使わないときはボーダーを指定することをお勧めします（border: thin solid transparentといった透明のボーダーでも構いません）。

input[type="checkbox"], input[type="radio"] {
  ...
  border: thin solid;
}
input[type="checkbox"], input[type="radio"] {
  ...
  border-radius: 0.2em;
}
input[type="radio"] {
  ...
  border-radius: 50%;
}

ここまでの指定を適用したのが以下の例です。

くだものやさい

りんごみかん

未チェックとチェック済みの切り替え

外枠ができたら次は内側、チェック状態の切り替えを表現していきましょう。::before疑似要素でチェック済みを表す内容を指定しつつ最初は隠しておき、チェック済み状態（:checked疑似クラス）になったらその内容を表示するというパターンが多いです。

以下の例では、ボーダーを使ってチェックボックスのチェックマークとラジオボタンの点を描画しています。ボーダーを使っているのは、後述する強制カラーモードでもチェックマークや点が表示されるようにするためです。また、内容を上下左右とも中央ぞろえするためにグリッドレイアウトを使っています。

input[type="checkbox"],
input[type="radio"] {
  ...
  display: inline-grid;
  place-content: center;
}
input[type="checkbox"]::before {
  content: '';
  width: 0.7em;
  height: 0.3em;
  border-left: 0.3em solid;
  border-bottom: 0.2em solid;
  transform: translateY(-0.1em) rotate(-40deg);
  visibility: hidden;
}
input[type="checkbox"]:checked::before {
  visibility: visible;
}
input[type="radio"]::before {
  content: '';
  border: 0.4em solid;
  border-radius: 50%;
  visibility: hidden;
}
input[type="radio"]:checked::before {
  visibility: visible;
}

くだものやさい

りんごみかん

clip-pathプロパティを使って好きな形に切り抜いたり、背景画像やボーダー画像にグラデーションを使ったりと、自由度の高い表現が可能です。

input[type="checkbox"]::before {
  content: '';
  border: 0.5em solid;
  clip-path: polygon(0% 60%, 0% 45%, 35% 65%, 100% 0%, 100% 15%, 45% 100%, 30% 100%);
  visibility: hidden;
}
input[type="radio"]::before {
  content: '';
  width: 1em;
  height: 1em;
  border: 0.2em solid transparent;
  border-radius: 50%;
  padding: 0.2em;
  background:
    repeating-conic-gradient(from 45deg, #f33 0deg 90deg, #fc6 90deg 180deg) content-box,
    repeating-conic-gradient(from 45deg, #fc6 0deg 90deg, #f33 90deg 180deg) padding-box,
    repeating-conic-gradient(from 45deg, #f33 0deg 90deg, #fc6 90deg 180deg) border-box,
    CanvasText;
  visibility: hidden;
}

くだものやさい

りんごみかん

チェック状態の切り替え時に、フェードイン・フェードアウトや拡大・縮小といったアニメーション効果をつけるのもよいでしょう。

input[type="checkbox"]::before {
  ...
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
input[type="checkbox"]:checked::before {
  opacity: 1;
}

input[type="radio"]::before {
  ...
  scale: 0;
  transition: scale 0.5s ease-out;
}
input[type="radio"]:checked::before {
  ...
  scale: 1;
}

くだものやさい

りんごみかん

強制カラーモードへの対応

強制カラーモードとは、テキストを読みやすくするために、背景色や文字色をコントラストのはっきりした色にする機能のことです。OSのアクセシビリティ機能の一環として提供されることが多く、Windowsなら「ハイコントラスト（Windows 10）」「コントラストテーマ（Windows 11）」という設定を有効にすることで、ブラウザで表示中の文書でも強制カラーモードが有効化されます。

強制カラーモードの主な影響は以下の通りです。詳しくはforced-colorsメディア特性を参照してください。

color、background-color、border-color、outline-color、accent-colorなどは、OSやブラウザ側で決められた色に変更されます。
text-shadow、box-shadowは無視されます。
background-image: linear-gradient(...)などのグラデーションの指定は無視されます。

一般的なテキストと画像に関しては、強制カラーモードを意識せずにスタイルを指定していても、最低限テキストが読める状態になることが多いです。しかし、カスタマイズしたチェックボックスやラジオボタンに関しては、気をつけないと全く表示されず、ユーザーがそれらフォームコントールの存在に気づかないという事態が起こりかねません。

チェック状態に関しても、チェックマークや点を単純にbackground-color: #d51のような背景色だけで表現してしまうと、強制カラーモードではチェック済みかどうか視認できなくなってしまいます。前述のボーダーを使った表現や、または以下に挙げるような表現手法をとる必要があります。

透明なボーダーやアウトライン

背景部分に透明なボーダーやアウトラインを重ねる手法です。強制カラーモードが無効なときは背景がそのまま表示されますし、有効なときはボーダーやアウトラインが塗りつぶされて視認できます。背景部分にアウトラインを重ねるためには、outline-offsetプロパティの値に負数を指定してボックスの内側にアウトラインを配置します。

input[type="checkbox"]::before {
  content: '';
  border: 0.4em solid transparent;
  background-color: #d31;
  visibility: hidden;
}
input[type="radio"]::before {
  content: '';
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background-color: #d31;
  outline: 0.4em solid transparent;
  outline-offset: -0.4em;
  visibility: hidden;
}

くだものやさい

りんごみかん

内向きの影や背景グラデーション

CanvasText（文書の文字色を示す）といったシステム色は、強制カラーモードでも視認できる背景色として使えます。内向きの影（box-shadow: inset ...）は背景の前面に描画されるため、強制カラーモードが無効なら影の色が表示されますが、有効だと背景色が表示されることになります。背景画像としてグラデーションを使った場合も、そのグラデーションは背景色の前面に描画されます。

input[type="checkbox"]::before {
  content: '';
  width: 0.8em;
  height: 0.8em;
  background-color: CanvasText;
  box-shadow: inset 0 0 0 0.4em #d31;
  visibility: hidden;
}
input[type="radio"]::before {
  content: '';
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: linear-gradient(#d31 0% 100%), CanvasText;
  visibility: hidden;
}

くだものやさい

りんごみかん

画像やテキスト

background-image: url(...)やcontent: url(...)で読み込んだ画像、およびcontentプロパティで指定したテキストは、強制カラーモードでもそのまま表示されます。

input[type="checkbox"]::before {
  content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpath%20d%3D%22M%205%2C1%20L%209%2C5%205%2C9%201%2C5%20Z%22%20fill%3D%22%23fda%22%20stroke%3D%22%23f81%22%2F%3E%3C%2Fsvg%3E");
  width: 1.2em;
  height: 1.2em;
  visibility: hidden;
}
input[type="radio"] {
  ...
  display: inline-block;
  text-align: center;
}
input[type="radio"]::before {
  content: '';
  display: block;
  margin-top: -0.2em;
}
input[type="radio"]:checked::before {
  content: '👉';
}

くだものやさい

りんごみかん

ブラウザ組み込みの外観

強制カラーモードではカスタマイズせずに、ブラウザ組み込みの外観を使うのもひとつの手です。forced-colorsメディア特性で強制カラーモードが有効かどうかを判別でき、allプロパティとrevertキーワードの組み合わせでスタイル指定を撤回できます。

@media (forced-colors: active) {
  input[type="checkbox"],
  input[type="checkbox"]::before,
  input[type="radio"],
  input[type="radio"]::before {
    /* 疑似クラスに指定されたスタイル（後述）も撤回したいので!importを指定する。 */
    all: revert !important;
  }
}

くだものやさい

りんごみかん

ここまで書いておいてなんですが、筆者は強制カラーモードを常用しておらず、強制カラーモードでチェックボックスやラジオボタンをカスタマイズしてもよいのかしないほうがよいのかのベストプラクティスを持ち合わせていません。ご存じの方は教えていただけると幸いです。

状態に応じたスタイルの指定

以上で最低限の表示切替ができましたが、ほかにも状態に応じたスタイルを指定できます。

よく使うのはマウスホバー時を表す:hover疑似クラスでしょう。フォームコントロールに対する:hover疑似クラスは、そのフォームコントロールに紐づけられたlabel要素にマウスホバーしているときにも適用されます。

次の例では:hover疑似クラスと:enabled疑似クラスを組み合わせています。:hover疑似クラスを使うのは「今まさにユーザーが操作できる対象を強調したい」という意図であり、無効状態の（操作できない）フォームコントロールに適用してしまうとその意図から外れてしまうからです。

input[type="checkbox"]:enabled:hover,
input[type="radio"]:enabled:hover {
  box-shadow: 0 0 0.3em 0.1em #d31;
}

くだものやさい

りんごみかん

多くのブラウザでは、チェックボックスやラジオボタンにキーボード（Tabキー）でフォーカスしたときに、フォーカスリングが表示されます。このフォーカスリングの表示を変更したいときには:focus-visible疑似クラスを使います。その際には「アクセシビリティの考慮」の項やWCAG 2.1の達成基準1.4.11「非テキストのコントラスト」の解説も参考に、「今まさにユーザーが操作できる対象」が伝わるようにしてください。

以下の例では、影を使ってフォーカスリングを表現しつつ、強制カラーモードに備えて透明のアウトラインを設定しています。単にoutline-color: transparentを指定するだけ（outline-style: autoのまま）だとブラウザによってはアウトラインが見えてしまうことがあるので、outline-style: solidにしています。

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  box-shadow: 0 0 0.3em 0.1em #d31;
  outline: medium solid transparent;
}

くだものやさい

りんごみかん

無効状態の（disabled属性が付与された）チェックボックスやラジオボタンを提供するのなら、:disabled疑似クラスを使います。次の例ではfilterプロパティを使って無彩色にしたうえで、opacityプロパティで色を薄くしています。強制カラーモードで背景が明色になろうと暗色になろうと、半透明なら色が薄くなることに変わりありません。

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  border-style: dashed;
  filter: grayscale(1);
  opacity: 0.6;
}

チェックボックスには未チェックともチェック済みとも言えない未決定状態が存在します。ただし、未決定状態になるのはJavaScriptでinput要素オブジェクトのindeterminateプロパティを設定したときだけです。そのようなJavaScriptの記述がなければ、未決定状態に対するスタイルを指定する必要はありません。そのような記述があるのなら、:indeterminate疑似クラスを使ってスタイルを指定します。

以下の例では「くだもの」グループに属すチェックボックスの一部のみがチェックされているときに、「くだもの」チェックボックスを未決定状態にしています。

input[type="checkbox"]:indeterminate::before {
  width: 0.5em;
  height: 0.5em;
  border: 0.2em dotted;
  transform: none;
  visibility: visible;
}

くだもの

りんごみかんいちご

参考文献

チェックボックスとラジボタンのカスタマイズについて:

Xユーザーのしゃろさん: 「<input type="radio"> や <input type="radio"> を独自にスタイリングするために、次の3つを使用していた。 - いわゆる visually hidden なスタイル - 隣接する label/div/span 要素、または、それらの疑似要素 ::before/::after - 隣接セレクタ + と擬似クラス :checked」 / X
この記事を書くきっかけとなったツイート。返信中に記載された例では、行内での縦位置を揃えるためlabel要素にdisplay: inline-flexを指定している。
Pure CSS Custom Styled Radio Buttons | Modern CSS Solutions
ラジオボタンの装飾方法について。強制カラーモードへの対応や:focus-within疑似クラスを用いたラベルのスタイル指定など。
Pure CSS Custom Checkbox Style | Modern CSS Solutions
チェックボックスの装飾方法について。clip-pathプロパティを用いたチェックマークの作成など。
One last time: custom styling radio buttons and checkboxes | scottohara.me
チェックボックスとラジオボタンの装飾方法について。双方向書字やダークモードなどでの確認を勧める。
Custom Styling Form Inputs With Modern CSS Features | CSS-Tricks - CSS-Tricks
チェックボックスとラジオボタンの装飾方法について。トグルスイッチの例など。

強制カラーモードについて:

アクセシビリティを高めるための、コントラストテーマの基本対応 | 株式会社ヌーラボ(Nulab inc.)
WindowsのコントラストテーマとBacklogでの対応事例。

Perlのレキシカルサブルーチンとperlcritic

Wed, 21 Dec 2022 02:48:02 +0900

この記事は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に以下のプルリクエストを提出しました。

この年末までにこれらの変更がすべて取り込まれたので、perlcritic（とPPI）のバージョンを最新にすれば、心置きなくレキシカルサブルーチンを使えます。

CSSのconic-gradientで直線的な模様を作る

Mon, 19 Dec 2022 11:11:30 +0900

この記事は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-border-width) - var(--inner-border-width)) calc(100% - 2 * var(--outer-border-width)),
    conic-gradient(from 0deg at calc(100% - var(--inner-border-width)) calc(100% - var(--inner-border-width)), var(--inner-border-bottom-right-color) 270deg, transparent 270deg) no-repeat border-box calc(var(--outer-border-width) + var(--inner-border-width)) var(--outer-border-width) / calc(100% - 2 * var(--outer-border-width) - var(--inner-border-width)) calc(100% - 2 * var(--outer-border-width)),
    conic-gradient(from 0deg at calc(100% - var(--outer-border-width)) calc(100% - var(--outer-border-width)), var(--outer-border-bottom-right-color) 270deg, transparent 270deg) no-repeat border-box var(--outer-border-width) 0 / calc(100% - var(--outer-border-width)) 100%;
}

例2. 矢印

「矢印」のデモ

「矢印」のCSSコード

p {
  --arrow-bg-color: #aaa;
  --arrow-color: #ff5;
  --arrow-angle: 120deg;
  --arrow-from-angle: calc(180deg + var(--arrow-angle) / 2);
  --arrow-outer-angle: calc(360deg - var(--arrow-angle));
  --arrow-margin-left: 1em;
  --arrow-width: 2em;
  --arrow-center: calc(var(--arrow-width) / 2);
  --arrow-offset: 1em;
  margin: 0;
  padding: 1em;
  border: solid transparent;
  border-width: 0 0 0 calc(var(--arrow-margin-left) + var(--arrow-width));
  border-radius: 0.5em;
  background: #ddd no-repeat border-box var(--arrow-margin-left) 0 / var(--arrow-width) 100%;
  background-image:
    conic-gradient(from var(--arrow-from-angle) at var(--arrow-center) calc(1 * var(--arrow-offset)), var(--arrow-bg-color) var(--arrow-outer-angle), transparent var(--arrow-outer-angle)),
    conic-gradient(from var(--arrow-from-angle) at var(--arrow-center) calc(2 * var(--arrow-offset)), var(--arrow-color) var(--arrow-outer-angle), transparent var(--arrow-outer-angle)),
    conic-gradient(from var(--arrow-from-angle) at var(--arrow-center) calc(3 * var(--arrow-offset)), var(--arrow-bg-color) var(--arrow-outer-angle), transparent var(--arrow-outer-angle)),
    conic-gradient(from var(--arrow-from-angle) at var(--arrow-center) calc(4 * var(--arrow-offset)), var(--arrow-color) var(--arrow-outer-angle), var(--arrow-bg-color) var(--arrow-outer-angle));
}

例3. 星形

「星形」のデモ

「星形」のCSSコード

p {
  --outer-block-angle: 6deg;
  --outer-inline-angle: 22deg;
  --cone-angle: calc(90deg - var(--outer-block-angle) - var(--outer-inline-angle));
  --cone-top-left-color: #bde;
  --cone-top-right-color: #cae;
  --cone-bottom-right-color: #ecc;
  --cone-bottom-left-color: #ffb;
  margin: 0;
  padding: 2em 3em;
  background:
    conic-gradient(from calc(90deg + var(--outer-block-angle)) at 0 0, var(--cone-top-left-color) var(--cone-angle), transparent var(--cone-angle)) no-repeat 0 0 / 50% 50%,
    conic-gradient(from calc(180deg + var(--outer-inline-angle)) at 100% 0, var(--cone-top-right-color) var(--cone-angle), transparent var(--cone-angle)) no-repeat 100% 0 / 50% 50%,
    conic-gradient(from calc(270deg + var(--outer-block-angle)) at 100% 100%, var(--cone-bottom-right-color) var(--cone-angle), transparent var(--cone-angle)) no-repeat 100% 100% / 50% 50%,
    conic-gradient(from var(--outer-inline-angle) at 0 100%, var(--cone-bottom-left-color) var(--cone-angle), transparent var(--cone-angle)) no-repeat 0 100% / 50% 50%;
}

例4. 吹き出し

「吹き出し」のデモ

「吹き出し」のCSSコード

p {
  --bg-color: #fed;
  --padding: 1em;
  --border-width: 0.5em;
  --border-color: #f93;
  --border-radius: 1em;
  --balloon-tail-angle: 60deg;
  --balloon-tail-from-angle: calc(90deg - var(--balloon-tail-angle) / 2);
  --balloon-tail-width: 2em;
  --balloon-tail-height: calc(1.15470054 * var(--balloon-tail-width)); /* 1.15470054 = 2 / sqrt(3) */
  --balloon-tail-bottom-offset: 1em;
  margin: 0 0 0 var(--balloon-tail-width);
  padding: var(--padding);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  background: var(--bg-color);
}
p::after {
  content: '';
  position: absolute;
  display: block;
  width: calc(var(--balloon-tail-width) + var(--border-width));
  height: var(--balloon-tail-height);
  background:
    conic-gradient(from var(--balloon-tail-from-angle) at calc(2 * var(--border-width)) calc(var(--balloon-tail-height) / 2), var(--bg-color) var(--balloon-tail-angle), transparent var(--balloon-tail-angle)) no-repeat,
    conic-gradient(from var(--balloon-tail-from-angle) at 0 calc(var(--balloon-tail-height) / 2), var(--border-color) var(--balloon-tail-angle), transparent var(--balloon-tail-angle)) no-repeat;
  transform: translate(calc(0em - var(--padding) - var(--balloon-tail-width) - var(--border-width)), calc(var(--padding) + var(--border-width) - var(--border-radius) - var(--balloon-tail-height) - var(--balloon-tail-bottom-offset)));
}

感想

やってはみたもののどうも微妙です。直線的な模様ならだいたいはlinear-gradient関数で表現できますし、要素を切り抜くのならclip-pathプロパティのほうが自由度が高いです。conic-gradient関数を使えば記述量を減らせるかというと、そういうこともそんなになく、やはり目的外の利用はあまりうまくいかないのかもしれません。

今回ひとつ得られた教訓は、背景画像を使って疑似的にボーダーを表現する場合、疑似的なボーダーと同じ大きさの透明なボーダー（border: <border-wdith> solid transparent）を指定したほうがよいということです。そうすることで、overflow: autoで内容がはみ出したときなどにスクロール領域が疑似的なボーダーにかからず、より自然に見えます。

CSSの絶対配置の要素の静的位置矩形

Sun, 11 Dec 2022 12:52:51 +0900

この記事は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プロパティなどで指定されたグリッド領域の位置に置かれます（グリッドアイテムが絶対配置のときのデモ）。

（「グリッドコンテナ」はdisplay: gridまたはdisplay: inline-gridが指定された要素、「グリッドアイテム」はグリッドコンテナの子要素です。）

とはいえ、フレックスボックスやグリッドと絶対配置を組み合わせるとCSSのコードがだいぶ複雑になるので、普段は避けたほうがよいと思います。

PerlのText::Markdown::Discountで囲い付きコードブロックを扱う

Sun, 11 Dec 2022 01:31:47 +0900

この記事は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モジュールでは定数が定義されていていないため、フラグの値である0x02000000を直接指定しています。（定数を定義するpull requestが提出されています。）

MKD_NOHEADERフラグおよびMKD_NOPANTSフラグはmarkdown関数の第2引数を省略したときにデフォルトで適用されるフラグなので、元の挙動を変えずに別のフラグを追加する際には、このふたつのフラグも明示的に指定する必要があります。

MKD_FENCEDCODEフラグを指定しない場合、3つ以上のバッククォートの並びはインラインのコード範囲として解釈されます。

my $html = markdown(<<'MARKDOWN');
```
fenced code block
```
MARKDOWN

<p><code>
fenced code block
</code></p>

`Text::Markdown::Discount` 0.13

特にフラグを指定しなくても、囲い付きコードブロックが有効になっています。

my $html = markdown(<<'MARKDOWN');
```
fenced code block
```
MARKDOWN

<pre><code>fenced code block
</code></pre>

`Text::Markdown::Discount` 0.12以前

囲い付きコードブロックに対応していません。3つ以上のバッククォートの並びはインラインのコード範囲として解釈されます。

CSSでスクロールバーの有無によるがたつきをなくす

Fri, 09 Dec 2022 09:42:57 +0900

この記事は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(dialog:modal) {
  overflow: hidden;
}

クラシックスクロールバーが使われる環境では、文書をスクロールさせないためにoverflow: hiddenを指定すると、スクロールバーが消えて文書の内容ががたついてしまいます。scrollbar-gutter: stableをあらかじめ指定しておけば、スクロールバーが消えてもその分の領域が確保され続けるので、文書の内容ががたつきません。

Perlで配列の先頭何要素か以外を抜き出す

Mon, 05 Dec 2022 01:47:17 +0900

この記事は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でイベントをPromise化する関数の型を定義したい

Sat, 03 Dec 2022 10:41:33 +0900

この記事は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型）のものがオーバーロードされています。型引数が絡んでいなければ、「オーバーロードされた関数型から引数の型や返り値の型を取り出す方法」に書かれているように型を取り出せます。しかし、型引数を持つメソッドがオーバーロードされているときに、意図した型引数が指定された場合の引数や返り値の型を取り出せるのかどうか、私にはわかりませんでした。

結局私にできたのは以下の状態までです（TypeScript Playgroundで確認）。

type EventTypeFor<Target extends EventTarget> = Target['addEventListener'] extends {
  (type: infer T, listener: (e: Event) => void): void;
  (type: string, listener: EventListenerOrEventListenerObject): void;
} ? T : never;

type EventFor<Target extends EventTarget> = Target['addEventListener'] extends {
  (type: string, listener: (e: infer E) => void): void;
  (type: string, listener: EventListenerOrEventListenerObject): void;
} ? E : never;

const eventPromisify = <T extends EventTarget>(
  target: T,
  type: EventTypeFor<T>
): Promise<EventFor<T>> => {
  throw new Error('Not implemented');
}

const p = eventPromisify(document, 'click');
// p: Promise<Event | MouseEvent | UIEvent | ClipboardEvent | AnimationEvent | InputEvent | FocusEvent | ... 11 more ... | WheelEvent>

第2引数をDocument固有のイベント名に限定することはできています。しかしながら、返り値のPromiseの値の型をMouseEventに限定することはできず、Document固有のイベントすべての共用体型となってしまいます。

Perlで配列の先頭何要素かを抜き出す

Fri, 02 Dec 2022 02:16:35 +0900

この記事は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でモーダルダイアログの背景をスクロールさせないようにできるかもしれない

Thu, 01 Dec 2022 01:41:10 +0900

この記事は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標準に対して、モーダルダイアログの背景のスクロールを防止しようという提案があると教えてもらいました。

となっています。上述のCSSコードが将来的にも機能するかどうかは不透明です。

overflow: hiddenを使ってスクロールを防止する方法でも、:has疑似クラスと組み合わせることで、CSSのみでモーダルダイアログの背景のスクロールを防止できるそうです。

HTMLのa要素にはhref属性を指定しなくてもよい

Thu, 20 Oct 2022 23:30:22 +0900

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属性は廃止済みであり指定すべきでないとされています。

私とIEとフィードバック(IE卒業式)

Sun, 19 Jun 2022 12:28:08 +0900

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 Betaへのフィードバック

開発者の支持のないブラウザは廃れるとの思いで、標準準拠路線を進めてきた

「ここが変わった！ IE8 Beta2」(第13回 Admintech.jp勉強会)

筆者もフィードバックに参加
- Web Storageがオリジンごとではなくドメインごと
- Web Storageのイベントが同期的
- 文書間メッセージング(postMessage)のイベントが同期的

[発話] 私がIEにフィードバックするようになったのはIE 8 Betaが出たあたりからです。このころはFirefoxとSafariがIEを追い上げ、GoogleがChromeを発表し、Microsoftとしては非常に危機感を持っていたのではないかと思います。実際に、当時あったイベントでMicrosoftの方が、開発者の支持のないブラウザは廃れるとの思いで標準準拠路線を進めてきたというようなことをおっしゃっていました。このころはWeb Storage APIや文書間メッセージングが新機能としてもてはやされ、私も標準仕様とIEの実装との差異をいくつか報告しています。Web Storage API——localStorageなど——の範囲がオリジンではなくドメインである、すなわちhttpsのページで書き込んだデータをhttpのページで読み込めるというったことがありました。

フィードバックの返礼品

IE 8の工具セット
FirefoxとThunderbirdの傘

[発話] そうしたバグ報告をしているとMicrosoftからメールが来て、グッズを送るから住所を登録してくれと言われました。何かしらと思って住所を入力すると後日IE 8の工具セットが届きました。これでIEを直せということでしょうかね。こうしたノベルティの贈呈はMicrosoft以外のブラウザベンダもやっており、MozillaからはFirefoxとThunderbirdの傘をもらったことがあります。

フィードバックしよう！

個別のブラウザ
ブラウザ間の相互運用性
- web-platform-tests

[発話] 皆さんもどんどんフィードバックしていきましょう。個別のブラウザにフィードバックする以外にも、ブラウザ間の相互運用性を高めるためにweb-platform-testsというものがあります。web-platform-testsにコミットすると各ブラウザで実行され、場合によってはブラウザ側で挙動が変更されることもあります。フィードバックを通じてWebの将来を作っていきましょう。ありがとうございました。

以上が発表内容です。久々の発表、しかもリモートからの参加ということで緊張しましたが、無事終えられてよかったです。

イベント自体は懐かしい機能を思い出したりIEの功績を振り返ったりと、IEの存在感の大きさを改めて感じられるものでした。イベントを企画・運営してくださった方々に感謝します。(IEのケーキが思ったより大きくて、現地で食べてみたかったです。)

IE 6も登場した時点ではそこまで悪いものではなく(個人的にはまだCSS 2ではなくCSS 1なのかと思いましたが……)、開発者の落胆を招いた要因としては、その後5年もメジャーバージョンアップがなかったという部分も大きいかと思います。

発表するにあたって、発表内容で触れた以外にも以下のページを参考にしました。また、窓の杜およびInternet Archiveには当時の記事が多数残っており、調査の大きな助けとなりました。

TypeScript の可変長タプル型における共用体の分配

Thu, 09 Jun 2022 01:29:18 +0900

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 | (略)> 型が T<A> | T<B> | T<C> | (略) 型として扱われる挙動を「共用体の分配 (union distribution)」と呼びます。共用体の分配は条件型 P extends Q ? R : S でも発生しますが (「TypeScriptの型初級 - Qiita」に詳しいです)、可変長タプル型でも発生するのです。

条件型における共用体の分配では、never 型を分配しようとすると展開結果も never 型になります。これは可変長タプル型においても同じです。

type ImpossibleSandwich = Sandwich<never>
// → never

なお、可変長タプル型において any 型は any[] 型に展開されます。unknown 型を展開することはできません。

type AnySandwich = Sandwich<any>;
// → ['bread', ...any[], 'bread']

type UnknownSandwich = Sandwich<unknown>;
// → Error: Type 'unknown' does not satisfy the constraint 'unknown[]'.

可変長タプル型で共用体の分配が発生するというのは、可変長タプル型を導入した pull request の説明に書かれています。私はこの挙動を、type-challenges の回答のひとつをきっかけに知りました (その回答は誤答なのですが)。

When the type argument for T is a union type, the union is spread over the tuple type. For example, [A, ...T, B] instantiated with X | Y | Z as the type argument for T yields a union of instantiations of [A, ...T, B] with X, Y and Z as the type argument for T respectively.

Variadic tuple types by ahejlsberg · Pull Request #39094 · microsoft/TypeScript

HTML のフォームコントロール要素と label 要素の紐づけ

Fri, 24 Dec 2021 21:11:54 +0900

この記事は 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 field = document.getElementById('query-field');

console.assert(label1.control === field, 'control プロパティでフォームコントロールを参照できる (1)');
console.assert(label2.control === field, 'control プロパティでフォームコントロールを参照できる (2)');
console.assert(field.labels[0] === label1, 'labels プロパティで label 要素を参照できる (1)');
console.assert(field.labels[1] === label2, 'labels プロパティで label 要素を参照できる (2)');

あるフォームコントロールにおいて、labels プロパティの返す NodeList オブジェクトは常に同一です。紐づく label 要素に変更があれば、その NodeList オブジェクトの内容が動的に変化します。

const oldLabels = field.labels;
label1.remove();
const newLabels = field.labels;

console.assert(oldLabels === newLabels, 'labels プロパティの値は何度参照しても同一のオブジェクトである');
console.assert(oldLabels.length === 1, 'labels プロパティの値は動的に変化する');

ただし、実際のところひとつのフォームコントロール要素に複数の label 要素を紐づけるような場面はほとんどないと思います。

button 要素にも label 要素を紐づけられます。しかしながら、button 要素の場合は自身の内容がラベルとして扱われるので (<button type="submit">検索する</button> なら「検索する」がそのボタンのラベルになります)、実際のところ button 要素に label 要素を紐づけるような場面はほとんどないと思います。

ラベルは aria-label 属性や aria-labelledby 属性を使って指定することもできます。

<form action="/search">
  <p>
    <input type="search" name="q" aria-label="キーワード">
    <button type="submit" aria-label="検索する">🔍</button>
  </p>
</form>

Days on the Moon

JavaScriptの識別子に中黒が使えるようになった

JavaScriptの識別子

Unicodeの識別子

過去にも識別子に中黒が使えた

他のプログラミング言語の識別子

参考文献

CSSでチェックボックスやラジオボタンをカスタマイズする 2024年版

結論

従来の手法

appearanceプロパティを使う手法

外枠の配置

未チェックとチェック済みの切り替え

強制カラーモードへの対応

透明なボーダーやアウトライン

内向きの影や背景グラデーション

画像やテキスト

ブラウザ組み込みの外観

状態に応じたスタイルの指定

参考文献

Perlのレキシカルサブルーチンとperlcritic

CSSのconic-gradientで直線的な模様を作る

例

例1. 二重のボーダー

例2. 矢印

例3. 星形

例4. 吹き出し

感想

CSSの絶対配置の要素の静的位置矩形

フレックスアイテムが絶対配置のとき

グリッドアイテムが絶対配置のとき

PerlのText::Markdown::Discountで囲い付きコードブロックを扱う

Text::Markdown::Discount 0.14以降

Text::Markdown::Discount 0.13

Text::Markdown::Discount 0.12以前

CSSでスクロールバーの有無によるがたつきをなくす

使用事例

Perlで配列の先頭何要素か以外を抜き出す

TypeScriptでイベントをPromise化する関数の型を定義したい

Perlで配列の先頭何要素かを抜き出す

以前からある方法

CSSでモーダルダイアログの背景をスクロールさせないようにできるかもしれない

HTMLのa要素にはhref属性を指定しなくてもよい

私とIEとフィードバック(IE卒業式)

Web開発者によるフィードバック

個人開発者によるIEへのフィードバック手段

IE 8 Betaへのフィードバック

フィードバックの返礼品

フィードバックしよう！

TypeScript の可変長タプル型における共用体の分配

HTML のフォームコントロール要素と label 要素の紐づけ

`appearance`プロパティを使う手法

`Text::Markdown::Discount` 0.14以降

`Text::Markdown::Discount` 0.13

`Text::Markdown::Discount` 0.12以前