本記事は株式会社ココナラ Advent Calendar 2024 22日目の記事です。
こんにちは！株式会社ココナラで技術戦略室 兼 フロントエンド開発のいっちーと申します！
今回は2024年に Baseline に追加されたWebプラットフォームの機能について紹介していきます。
Baselineとは
BaselineはWebプラットフォーム機能がどの程度広いブラウザでサポートされているのかを示しています。利用しようとしている機能があった場合、Baselineのステージにあるかどうかでその機能の採用判断の参考になります。
Baselineでは下記の主要4ブラウザ（コアブラウザ セット）をターゲットとしています。
- Chrome（PC、Android）
- Edge
- Firefox（PC、Android）
- Safari（macOS、iOS）
Baselineのステージ
BaselineにはLimited availability とNewly available 、Widely available の3つのステージが定義されております。
Limited availability
コアブラウザの最新安定版のうち、一部でのみサポートされている機能です。
このステージの機能についてはまだ「Baselineに追加された」とはいえない状態になります。
Newly available
すべてのコアブラウザの最新安定版においてサポートされている機能です。
ある機能が「Baselineに追加された」というのはこのステージに至ったことを指しています。
Widely available
Newly available に追加されてから30カ月以上が経過した機能です。
開発者はサポートを気にすることなく、ほぼすべてのサイトでその機能を利用できるといえます。
2024年に追加されたBaseline機能
2024年に追加された Baseline機能を数えてみるとなんと51個もありました👏
下記はその一覧になりますが、これを眺めているだけでもウェブの進化が垣間見れてワクワクしてきますね！
これらひとつひとつ、すべてを説明…していきたいところですが、さすがに量が多すぎるので個人的に興味深いものをピックアップしていきます。
Declarative Shadow DOM
Declarative Shadow DOM は2月20日にBaselineに追加されました。
Shadow DOMの新たな作成方法に関する機能で、筆者個人としては今年最もお世話になった機能です🙇
カスタム要素を実装する上で重要な技術要素の１つです。
これまでShadow DOMを作成するにはJavascript APIを利用してクライアントサイドで行う方法しかなく、Cumulative Layout Shift (CLS)[1]の発生によりユーザー体験が損なわれる可能性がありました。
Declarative Shadow DOM がサポートされて以降はサーバーサイドで宣言的にShadow DOMを作成できるようになり、CLSの発生を防ぐことができるようになりました。
弊社ではコンパウンド戦略による複数プロダクトの同時立ち上げに際し、プロダクト間の共通のUIとなるヘッダやフッタの実装にShadow DOMを使ったカスタム要素を採用しておりますが、その技術選定の１つの理由として Declarative Shadow DOM のBaselineへの追加があります。
詳しくはこちらの記事をご覧ください。
Unsanitized HTML parsing methods
Unsanitized HTML parsing methods とは Document.parseHTMLUnsafe や Element.setHTMLUnsafe といったメソッドを指しており、Declarative Shadow DOM 同様にカスタム要素を実装する上で重要な技術要素の１つです。
Baselineには7月9日に追加になりました。
これまで Javascriptで動的なHTMLを挿入する際は Element.innerHTML や Node.insertBefore などを利用していましたが、挿入するコンテンツに Declarative Shadow DOM を含む場合はこれらのメソッドを利用する必要があります。
挿入されるコンテンツはサニタイズされないため、XSS[2]のリスクがあることから、これらのメソッドを利用する場合は注意が必要です。
AVIF
AVIF は1月26日にBaselineに追加されました。
軽量な画像フォーマットで AV1 Image File Format の略称です。
弊社サービスでも一部の画像をAkamaiのImage & Video Manager[3]を利用してAVIFに変換して表示することでパフォーマンスに大きく貢献しています。
詳しくはこちらの記事をご覧ください。
HTTP/3
HTTP/3 は9月16日にBaselineに追加されました。
HTTP/2に続くHTTPの新しいメジャーバージョンです。
HTTP/3ではトランスポート層にTCPの代わりにQUIC[4]を利用することでパフォーマンス上の次の２つの問題を解消しています。
- 3-way ハンドシェイクによる接続遅延
- Head-of-line blockingによるパケットのブロック
パフォーマンスの改善、ひいてはユーザー体験の向上が期待できるため、必要に応じて採用を検討していきたいところです。
light-dark()
light-dark() は5月13日にBaselineに追加されました。
ライトモード、ダークモードの対応を従来のようなメディアクエリを使わずに簡潔に記述できるCSS関数です。
実際の使用例としては下記のように記述できます。
.light-dark-content {
color: light-dark(black, white);
background-color: light-dark(white, black);
}
ライトモード、ダークモードへの対応はまだまだ進んでいない状況ではありますが、こういった機能を活用することで推進していけるのではないかと思っています。
Set Methods
JavascriptのSetオブジェクトに追加された 和集合（union）、積集合（intersection）などを求める、集合操作を行うためのメソッド群を指します。
Baselineには6月11日に追加されました。
フロントエンドの開発においてこれらのメソッドを利用することはあまりないかもしれませんが、覚えておくとふとした時に役に立つかもしれません🤔
最後に
ここまで筆者個人が興味深いと思ったBaseline機能を紹介してきました。
2024年に追加されたBaseline機能はこのほかにも紹介したくても紹介しきれないほどまだまだありますし、2025年以降も新しい機能が追加されていくと思います。
今後もどんな機能が追加されているのかこまめにチェックしながら、フロントエンド開発に役立てていきましょう！
明日は@shimon_yamadaさんによる なぜヤマハなのか？ です。
ココナラでは積極的にエンジニアを採用しています。
採用情報はこちら。
カジュアル面談希望の方はこちら。
株式会社ココナラのテックブログ用アカウントです。 ブログ → zenn.dev/coconala 採用情報はこちら → coconala.co.jp/recruit/engineer
Discussion