今月、当社のPodcast「ミツエーテックラジオ」で#21「ミツエーリンクスにおけるペアプロの取り組み」を公開しました。
取り組みの背景や取り組んだ効果などについてお話ししましたが、今回はこのエピソード内に入りきらなかった、オンラインでペアプロをやるうえでのTipsについてご紹介いたします。

※今回ご紹介するTipsは主にエディターとしてVS Codeの使用を前提としています。VS Code以外のエディターをお使いの方も類似機能があればぜひ使ってみてください。

W3C Workshop on Wide Color Gamut and High Dynamic Range for the Webというワークショップが7月から9月にかけて、バーチャルイベントとして、主に事前収録されたセッション形式で開催されています。

はじめに、ワークショップの名称になっているWide Color Gamut（WCG）について触れておきたいと思います。

よく知られているように、WebではsRGBの色域で表される色を用いています。これはテレビのハイビジョン規格から派生した、1996年に策定された標準に基づいたものですが、この25年もの間変わることなく使われ続けています。しかしその一方で、技術の進歩はめざましいものがあります。1996年当時に主流だったブラウン管ディスプレイは液晶ディスプレイや有機ELに取って代わり、現在ではスマートフォンのようなデバイスでも動画を楽しめるような世の中になりました。テレビ放送では、アナログ放送がデジタル放送に切り替わり、4K/8K放送も開始されています。モニターの解像度が最もわかりやすい変化ではありますが、より広い色域とダイナミックレンジが扱えるようになってきています。

.vscodeディレクトリとは何か

Visual Studio Code（以下、VSCode）を既に使用されている方ならご存知かと思いますが、作業ディレクトリ固有の設定を行った際に.vscodeというディレクトリが作成されます。 一般的にはsettings.jsonなどが作成され作業ディレクトリの設定が記録されます。

.vscodeディレクトリに関しては.gitignoreなどでgitの管理対象外とする場合もありますが、設定を共有することによるメリットなども存在するため、今回は実例を交えながらメリットについて紹介いたします。

今回ご紹介する内容はVisual Studio Code version 1.59.1 時点の情報をもとに記載しています。

WHATWGとW3Cとの間の覚書（Memorandum of Understanding Between W3C and WHATWG）が結ばれたのが2年前の2019年のことでした。これによってDOM仕様とHTML仕様がWHATWGが発行する仕様に一本化されることになったわけですが、今年9月から有効となるW3CのHTML Working Groupの憲章案（PROPOSED HTML Working Group Charter）によれば、W3C/WHATWG Relationship updateという、覚書の更新が今年6月に行われていたようです。

この覚書の更新を斜め読みしますと、概ね次のことが追加でなされるようです。

以下の仕様はWHATWG仕様か、WHATWG仕様の一部として公開されます。開発形態はHTML仕様やDOM仕様と類似のものになると思われます。

• Web IDL
• HTML Media Capture
• Worklets
• Resource Hints
• Preload
• Media Playback Quality

W3CとWHATWGのコラボレーションの範囲については、HTML仕様およびDOM仕様だけでなく、以下の仕様にも適用範囲を拡大するとのこと。

• WHATWGから事前に通知される、HTML仕様およびDOM仕様から分割された仕様
• Fetch仕様（CORS仕様の後続として）
• Web IDL仕様

個人的な感想としては、Web IDL仕様の開発体制が整えられるというのが大きいのではと思います。Web IDL仕様はDOMインターフェースで定義される属性である、IDL属性の「IDL」を定義するものです（MDNのIDL (インタフェース記述言語)も参照）。ものすごく大雑把に言ってしまえば、HTMLとJavaScriptを結びつけるのがWeb IDLなわけですが、Editor's Draftはhttps://heycam.github.io/webidl/という個人のGitHubのレポジトリーになぜか置かれている状況です（筆者の理解の不足でなぜそういう状況なのかまでは把握できていませんが）。これが相応な場所で開発、公開されるというのが今回の覚書の更新で最も大きなトピックではないかと思っています。

また、W3CとWHATWGのコラボレーション範囲として「HTML仕様およびDOM仕様から分割された仕様」という文言が入っているのも見逃せないところです。具体的なところまではわかりませんが、例えばHTML仕様の一部が切り離されて、HTML仕様が小さくなる可能性もあり、両仕様が再編される可能性があるとも読み取れます。いずれにせよ、最新の仕様がどこに存在しているのかはおさえておきたいところです。

最近はツールやライブラリ自体がTypeScriptで作られ、DefinitelyTypedやパッケージ内部に型定義ファイル（*.d.tsファイル）が含まれることも増えてきました。同時に型定義自体もかなり複雑化してきているように思えます。

基本的には型定義ファイル通りでないTypeScriptコードはコンパイルに失敗するはずですが、型定義自体に穴があるとコンパイルに通るべきでないコードが通ってしまうケースもあります。逆に、型定義が更新されたことにより、これまでコンパイルに成功していたコードが失敗することもあり得ます。実際のコードはもちろん、型定義ファイル自体の精度も落とさないよう工夫が必要になってきています。

とはいえ、テストがない状況で関数などの型定義を変更するのはリスクがあります。そんな時にはMicrosoftが公開しているdtslintが使えるかもしれません。dtslintは、型定義ファイルのリントとテストができるツールです。

Chrome DevToolsにはさまざまな機能が搭載されています。そのうちの1つ「Rendering」には、ページのレンダリングパフォーマンスを視覚化する機能や、さまざまな見え方を疑似的に再現する機能が含まれています。
サイトのレンダリングパフォーマンス改善の取り組みに活用できる、こちらのRenderingタブ内の各機能についてご紹介します。

先日当社のPodcast「ミツエーテックラジオ」で「リンター特集」というエピソードを公開しました。このエピソードでは、社内でよく使われているリンターを紹介しましたが、他にもWeb制作で活用できるリンターはたくさん存在しています。

今回はPodcastではあまり取り上げなかったHTMLのリンターについてご紹介します。