最近のフロントエンド活動

フロントエンド開発に関わるメンバーが増え、賑やかになってきています！
技術的な負債解消活動にて erb で記述されていた既存画面を徐々に Vue.js 化しています
デザイナーを中心として作られているデザインシステム（norman）におけるコンポーネント設計と実装が進んでいます
Storybook のバージョンを 6.3 から 6.5 へアップデートしました
- 関連記事：Vue3 での Storybook v6.3.13 から v6.5.14 にアップデートする
前年に webpack へ移行した結果、フロントエンド関連を Rails のディレクトリから分離できました
- app/javascript ディレクトリから typescript 以下に移し、Rails に対して依存しないような構成になっています
- ビルド対象の依存関係が単純に記述でき、CI や Linter の設定もすっきりしました
Markuplint を Storyshots に適用しました (crowdworks.jp のフロントエンド活動を振り返る 2022 にありますが詳細は後述)
フロントエンドではありませんが、フロントエンドで先行していた OpenAPI の定義を Rails のバックエンド開発でも活用しました
- Request Spec の中で committee-rails による型チェックを行うようにしました

Markuplint を Storyshots に適用しました

フロントエンド活動のうち、Markuplint を Storybook の Storyshots に適用した件を詳細に紹介いたします。

名前の通りマークアップに対する汎用的な Linter です。こちらは 2021 年よりプロダクト開発で導入されています。

crowdworks.jp では WAI-ARIA の属性や入れ子関係のチェックの他に、以下のハウスルールを運用しています。

Storybook にて Jest の Snapshot テストが実行できるアドオンです。公式から推奨されています。

こちらで各 Story に対して Snapshot テストにて DOM レベルの同一性を確認する自動テストを行っています。

Snapshot はほとんどの場合 HTML としてそのまま解釈が可能です。

しかし、中身が空でないことがある (non-void) HTML Element で Self-closing syntax (<div /> のような表現) が使われたときに問題が発生していました。

これは HTML 的には正しくない記述なので、Linter の挙動としては問題ではありません。しかし Jest の生成する Snapshot では使われているのでエラーになりました。

Jest のシリアライザの変更でこの問題を回避できるのかも知れませんが、良い対応方法を見つけることができませんでした。もし、より良い方法があれば教えていただけると幸いです。

この問題点を解決するために、独自プラグインを作成しました。

Snapshot をあらかじめ一定のルールで変換してから @markuplint/html-parser で処理をおこないます。
正規表現により、行数は変えずに Self-closing syntax を置き換えています。
- 一定の表現は変換不能になっています。(属性に複数行かつ <>/ が含まれているとき)。
- これは運用でカバーします。そのためこのプラグインは一般に公開できるレベルには達していません。