Frontend Weekly 2024-02-02

2024年2月2日

FigmaのDevモードが正式リリース、Figma Dev mode GA、Learn Testing、Next.js App Router Caching: Explained、Tappyについて紹介する。

Table of Contents

Figma Dev mode GA

FigmaのDevモードが正式リリースされました。無料のベータ版は2024年1月31日に終了したため、Devモードの利用には課金が必須になります。

合わせて、いくつか機能が紹介されています。

アノテーションを利用すれば、簡単にプロパティやデザインの詳細を追加できます。

表示するプロパティは選択でき、変更があれば自動的に反映されます。またアノテーションは、レイヤーに紐づき、デフォルトで表示されているため、コメントより気づきやすくなっています。

annotate

要素間などの大きさを視覚化した上で、位置の調整が出来ます。この値も変更が自動的に反映されます。

measure

2つのフレームを選択した上でcompare changesを押すと、コードとビジュアルで比較することが出来ます。

compare-changes

VSCodeをFigma上で見ることの出来るVSCode for Figmaが再設計されました。以前は大きなキャンバスをそのまま表示していましたが、個々のフレームにフォーカスして表示できるようになりました。

フロントエンドのテスト手法について包括的に学べるコンテンツがweb.devから公開されました。

現在公開されているものは基礎的なものが多いですが、実際のコードや図などを用いて説明しており分かりやすいように思います。また近日中に”自動テストの実践”や”テスト可能なコードの記述**”**コンテンツの追加が予定されているようです。

“Next.js App Router Caching: Explained!”という動画がVercelから公開されました。主にApp Routerでのキャッシュの挙動について網羅的に実際のコードや図を用いて解説しています。

LINEヤフー株式会社は、スマートフォンのタップ操作成功率を可視化するツールTappyを公開しました。URLを入力するだけで、そのページに含まれるボタンやリンクなどタップ可能な要素のタップ操作成功率を推定できる。

成功率の推定方法について、技術ブログで紹介している。