🏄
Matsuri-tech Frontend Weekly 2024-02-02

hrdtbs

hrdtbs

2024年2月2日
MFWFigma

社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。

社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# Figma Dev mode GA

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

開発モードの次のステップ:アノテーション、変更内容の比較、プラグインなど | Figma Blog開発モードが無料ベータ版から移行する際の改善点を1月31日(PST)に公開します。開発モードの次のステップ:アノテーション、変更内容の比較、プラグインなど | Figma Blog

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

# アノテーション機能

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

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

annotate

# メジャー機能

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

measure

# 変更の比較

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

compare-changes

# VSCode for Figma

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

Figma for VS Code - Visual Studio MarketplaceExtension for Visual Studio Code - Bring Figma into the text editor. Inspect designs, receive notifications, and get code suggestions.Figma for VS Code - Visual Studio Marketplace

# Learn Testing

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

テストの学習へようこそ!  |  web.devソフトウェア テストに関する詳細なコース。テストの学習へようこそ!  |  web.dev

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

# Next.js App Router Caching: Explained

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

Next.js App Router Caching: Explained!Learn how to fetch, cache, and revalidate data using the Next.js App Router.0:00 – Introduction0:24 – Demo1:20 – Caching overview2:06 – Foundations6:10 – Sta...Next.js App Router Caching: Explained!

# Tappy

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

Tappy - Yahoo!デベロッパーネットワークスマホのウェブ画面上のボタンやリンクなどの大きさを分析し、タップの成功率を表示するツールです。Tappy - Yahoo!デベロッパーネットワーク

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

スマホのタップ操作の成功率を算出するモデル ~ UIデザインにおけるユーザビリティの推定ボタンやリンクの大きさからタップ成功率を推定するモデルについて解説します。データに基づいてタッチUIの画面構成を考える支援をしています。スマホのタップ操作の成功率を算出するモデル ~ UIデザインにおけるユーザビリティの推定