Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。

いろいろなHTMLのリンター

UI開発者 加藤

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

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

source要素にwidth/height属性を指定して各画像のアスペクト比の維持とCLSの改善を図る

UI開発者 橋本

Google Chrome 90からsource要素におけるwidth属性、height属性の指定がサポートされました。
これまでpicture要素で表示する画像のアスペクト比は、picture要素に含まれるimg要素に指定されたwidth属性、height属性から計算されていましたが、source要素に指定したwidth属性、height属性からもアスペクト比が計算されるようになります。

Vue Test Utilsで始めるスナップショットテスト

UI開発者 加藤

みなさんはフロントエンドのテストはどのように行っていますか?

昔は「フロントエンドのテストって何をやればいいの?」ということをよく見聞きし、実際私もそう思っていました。しかし、JavaScriptのモジュール化が一般的になり、ここ数年でフロントエンドのテストについての情報もかなり増えてきたように感じます。
とはいえ、周囲の開発者にテストについて聞いてみると「どこからやればいいのか分からない、難しい」という認識はやはり拭い切れていないのが正直なところです。

そんな時にまずおすすめしたいのが「スナップショットテスト」です。スナップショットテストとは、ざっくりいえば変更前の出力結果と変更後の出力結果を見比べて、差分がないこと(もしくはあること)を確認するテストです。

スナップショットテストはその性質上、テストコードが非常にシンプルで導入も簡単なため、テストのとっつきにくさみたいなものを払拭する効果もあると思っています。

今回はVue.jsコンポーネントのテストを題材に、スナップショットテストの手軽さをお伝えしたいと思います。

第3期のMath Working Groupが始動した話

アクセシビリティ・エンジニア 中村(直)

1年半ほど前にWebにおける数式と数式の読み上げを取り巻く環境についてという記事を書いていたのですが、MathML 3を勧告、ISO化を見届けて休止していたMath Working Group(以下、Math WG)が今月初頭に再始動しました。現在のMath WGのホームページは、Team ContactsがCSS Working Group(CSSWG)のメンバーでもあるBert Bos氏ということもあって、CSS WGのホームページとそっくりな作りになっています。

さて、このMath WGは、MathML 3仕様で認識されている問題に対処すべく、Math MLの改訂を始めるために設立されたMathML Refresh Community Group(以下、CG)が前身となっています。Charter(憲章)のScopeによれば、CGが取り組んできた活動をさらに前進させることを目的としています。MathML WGが特に取り組む目標は以下の3つとされています。

  • プレゼンテーショナル要素のコアセットをブラウザーで広く採用することで、数式の表示を外部ライブラリーに依存することなく、どのブラウザーでも同じように表示されることを著者に保証できるようにする。
  • 数式と化学式の両方を対象としたPresentation MathMLのアクセシビリティの向上。数学的な意図を指定する手段を提供するとともに、追加情報がない場合のPresentation MathMLの解釈に関するガイドラインを提供する。
  • 数式の検索性の向上。

そして、MathML WGは3つの仕様の開発を予定しています。1つはMathML Core Level 1です。これは、CGによって現在のWebプラットフォームの機能とほぼ一致させ、現在のCSSおよび基本的なDOMとの統合を含むMathMLのレンダリングを定義し、テストとバグの公開を行うという初期の働きが既に行われていますが(MathML Core Draft Community Group Report)、徹底的にレビュー、テストしていくとのことです。

もう1つはMathML Core Level 2になります。これは、時間や実装上の制約のためにLevel 1から除外された機能を扱うもので、進化するWebプラットフォーム内でMathMLを改善し、Shadow DOM、Custom Elements、CSS Layout APIやその他Houdini APIなどの技術を使用して、一般的にMathMLをポリフィルまたは拡張する際の記述を強化するためのガイダンスを提供するとのことです。また、要素や属性のアクセシビリティマッピングの提案を通じて、リンクやアクセシビリティなどの問題にも対応していくようです。これらMathML Core仕様は、すべての主要なブラウザーエンジンで実装されている、あるいは実装されるだろうMathMLの部分のみを定義することを目的としています。

最後はMathML 4です。これは、既存のMathML 3仕様を見直して、MathML Core Level 1に基づいて再構築することをうたっています。また、これまで使用されず、今後も使用されない見込みの機能を廃止し、削除すると同時に、数学のアクセシビリティと検索性を高めるために、Presentation MathML要素に数学的な意図の指定を可能にする属性が追加されるとのことです。

また、関連するW3C Note等も発行する予定だそうで、MathML Accessibility Techniqueノートや、MathML出力にアクセシビリティや検索性のためのアノテーションを組み込んだTeX-MathML変換ツールあたりが個人的に興味をひきました。

CharterのタイムラインとしてはMathML Core Level 1のCandidate Recommendation(勧告候補)は2022年1月を目標とするとのことです。この予定のとおり進めば、来年にはブラウザーのためのリフレッシュされたMathML Core仕様の大枠が固まっていることになります。HTML5の一部であるにも関わらず、仕様面でこれまで欠けていたピースがはまるのもいよいよ現実味を帯びてきたと言えるでしょう。

React Native + ExpoでWindowsからHello World

UI開発者 橋本

React NativeはJavaScriptを使ってiOSやAndroidなどクロスプラットフォームでアプリ開発ができる優れものですが、iOSアプリ開発はmacOSでしかできない、という課題があります。
今回はそんな課題を解決するExpoを使ってWindowsで環境構築からHello Worldを実機で確認するまでをご紹介します。

新しいGitHubベースシステムにおけるMDN日本語版の翻訳が凍結解除

アクセシビリティ・エンジニア 中村(直)

先月にMDN日本語版の覚え書きでMDNの翻訳版が凍結されていたことをお伝えしましたが、先週末にMozilla HacksのMDN localization in March -- Tier 1 locales unfrozen, and future plansという記事で、日本語版を含むいくつかの翻訳版の凍結が解除されましたことがアナウンスされています。

MDN日本語版の覚え書き

アクセシビリティ・エンジニア 中村(直)

Web技術にまつわるさまざまなドキュメンテーションが集約されているMDN Web Docs(以下MDN)にお世話になっている方が多いと思います(筆者もその1人です)が、このBlog記事の執筆時点でそのMDNの日本語版の編集ができない状況であることをご存じでしょうか。

最近のMDN関連の話題としては、昨年夏にMozillaが新型コロナウイルスに端を発した財政状況の悪化からMDNのスタッフを含む大規模な解雇を行ったこと、今年に入ってMDNの支援を行うことを1つの目的とするOpen Web Docsの設立の話題をご存じの方もいるかと思います(ウェブプラットフォームのドキュメンテーションを支援する「Open Web Docs」立ち上げ--MSやグーグルら - CNET Japan