はてなブックマーク

Webブラウザの進化に伴い、新しい機能や技術が次々と登場しています。しかし、各ブラウザの実装状況や互換性を把握することは、開発者にとって大きな課題でした。この課題を解決するため、2024年に整備が進み、2025年から本格的に活用できる指標が「Baseline」です。本記事では、2024年に大きく進展したBaselineとWeb Platform Status Dashboardについて紹介します。 Baselineのおさらい Safari、Chrome、Edge、Firefoxといった主要なWebブラウザ間での機能の互換性レベルを体系的に定義し、開発者に明確な指標を提供するものです。これにより、クロスブラウザ開発における予測可能性と信頼性が向上します。 開発者向けの主要なリファレンスプラットフォームであるMDNやCan I Useにおいて、各機能のBaselineステータスがラベルとして明

私たちはStorybookとChromaticを活用してデザインシステムを運用しています。本記事では私たちがどのようにStorybookとChromaticを活用しているのか紹介します。 私たちが作ってるデザインシステムに自体ついては下記の記事をどうぞ。 StorybookとChromaticの簡単な紹介 Storybookは、コンポーネントを開発、テスト、管理するためのOSSツールです。私たちは、コンポーネントの動作を確認し、ドキュメンテーションを充実させるために、Storybookを中心に使用しています。Chromaticはこれを補完し、Visual Regression TestingやUIレビューを効率化します。 私たちのデザインシステムでも活用しています。Storybook上でコンポーネントの動作を確認できるため、実環境と分離したコンポーネントの動作確認ができ、コンポーネントのさ

今回はデザイントークンのコミュニティグループ、仕様ドラフトの動きと、その中で説明されているデザイントークンの役割に焦点を当てて紹介します。そしてデザイントークンをより効果的に活用するための便利なツールについても紹介します。 Design Tokens Community Group デザイントークンは色やスペースなどデザインと実装においてそれ以上分解できない核のような存在です。このデザイントークンを利用するために仕様策定をするコミュニティがDesign Tokens Community Groupです。 Design Tokens Community GroupはW3CのCommunity Groupに2020年頃に設立されました。W3CのCommunity Groupはオープンに議論をしていくことを目的とし、W3C COMMUNITY CONTRIBUTOR LICENSE AGREEM

はじめに ここ最近はデザインシステムの構築や支援を行なっています。そこで、デザインシステムを作ることが目的になっていることを感じることがあります。私はデザインシステムは作ることよりも、育てていく考え方が重要だと思っているので、その考えについてお伝えします、どなたかの参考になれば幸いです。 デザインシステムとは？ まずはデザインシステムそのものについてです。デザインシステムの事例から学んでみます。 GoogleのMaterial Designは「チームがより高品質なデジタル体験を各OS上で構築するためのもの」と表しています。 Material is a design system created by Google to help teams build high-quality digital experiences for Android, iOS, Flutter, and the w

どうも、sakitoです。 今回は私の推しフロントエンドディレクトリ構成と気をつけたいポイントを紹介します。ちぇけら！ 2023年5月29日 追記 この記事を読みにきていただきありがとうございます。 私が記事を書いた時期はまだNext.jsのApp Routerが発表されたばかりで、App Routerを使用したディレクトリ構成の考慮はされていません。 先日、App Routerがリリースされ、Next.jsのドキュメントにApp Routerのディレクトリ構成について記事が出ているので、Next.jsを使用されている場合は、まず参照することをオススメします。 はじめに 今回、私の紹介する推し構成は、機能単位で設計するパターンです。 Reactのディレクトリ構成のベストプラクティスを集めたBulletproof Reactで紹介されているパターンにかなり似ています。さらに詳細なプロダクト構

Weekly Frontend News 2022年4月4週目/React Redux v8,Redux v4.2,Nuxt v3 RCなど 自分が今週見たフロントエンド記事のまとめ。 Release v8.0.0 · reduxjs/react-redux React 18対応、内部のTS化によりtypes/react-reduxが不要に、ビルドをES2017にしたのでIE11非対応へ。 Release v4.2.0 · reduxjs/redux createStoreが@deprecatedになり非推奨としてマークされるようになった。そしてlegacy_createStoreが追加された。これは、Redux Toolkitをへの移行を促すためである。 また、Why Redux Toolkit is How To Use Redux Today が追加され、ReduxではなくRedux

Weekly Frontend News 2022年4月3週目/react-testing-libraryにrenderHookが追加、など 寒くなったり暑くなったりして大変ですね。体調にお気をつけて。 自分が今週見たフロントエンド記事のまとめ。 react-testing-libraryにrenderHookの追加、react-hooks-testing-libraryが非推奨へ react-testing-library v13.1でrenderHookが追加された。 これにより、react-hooks-testing-libraryの大部分の機能がカバーされるので、react-hooks-testing-libraryを非推奨としてアーカイブする予定とのこと。 RFC: New Bundler in Gatsby Gatsbyがwebpack以外のバンドラーを模索中とのこと。 さまざ

自分が今週見たフロントエンド記事のまとめ。 Hello, CSS Cascade Layers Cascade Layersの概要と使用例。 もうすぐモダンブラウザで使用できるようになる。 余談だがこの人のCSS記事はとても詳しく面白いものが多い。 Next.js 12.1 Next.js 12.1のリリース。 next/jestにより設定が簡略化できたり、styled-componentsやRalayのSWCサポートなど。 SRのページをrevalidateできる機能がBetaで入っている。 ヤフーのIE11 サポート終了の進め方 ヤフーでIE11のサポートを終了するまでの記事。 ロードマップやアナウンスまで参考になる。 Discover the The State of JS 2021 results JS周りのアンケート、State of JS 2021の結果。 各ライブラリやビルド

Designshipカンファレンスサイト 2021年10月23、24日に「Designship | 業界の壁を越えた、日本最大級のデザインカンファレンス」がオンラインで行われます。 オンラインなのでライブ配信が必要です。 今回はそのライブ配信サイトを自作しました。 Designshipは2020年にもオンラインで開催しており、ライブ配信サイトはその頃に開発し、実際にカンファレンスで使用しています。 2021年の今年もオンライン開催なので、2020年からブラッシュアップを重ねてきました。 こちらがライブ配信画面になります。 実際のライブ配信画面 今回はそのライブ配信サイトを開発した経緯から技術構成まで紹介します。 このご時世なので、まだまだライブ配信が必要なイベントは多いと思います。 参考になれば幸いです。 ライブ配信サイトを自作することになった経緯 ライブ配信サイトを自作するには労力やさま

1末から2月にかけて、:focus-visible周りのブラウザ実装が進んだのでまとめました。 :focus-visibleのおさらい :focus-visibleは、タブ移動時のみ要素のoutlineを表示させることができる疑似クラスです。 :focusだと要素にタブ移動時にフォーカスした際だけではなく、クリック時などにもoutlineが表示されるので、outlineを消しがちだったがそれを避けることができます。 outlineを消しちゃうとアクセシビリティ上よくないので、:focus-visibleを使用します。 Chrome Chromeで:focus-visibleがUA style sheetのデフォルトになります。 この変更はChrome 90から入るようです。 Chrome 86から:focus-visibleは使用できていたが、UA style sheetは:forcusだ

はじめに React を使用したコンポーネントライブラリのコードリーディングをしたいなと思い、Adobe のデザインシステムに組み込まれている React Spectrum を読んでいるので、そのメモを残していく。 1 つの記事にまとめたかったが、コードを読むのに時間がかかるのと、かなり長くなるので分割して残していく。 React Spectrum の概要 本体は Spectrum であり、この思想を生かしたコンポーネントライブラリーとして、React Spectrum がある。 Spectrum の原則は「Rational」、「Human」、「Focused」の 3 つになっており、この原則どおり、アクセシビリティや i18n などを包括的にカバーするように React Spectrum もできている。 React 以外にも CSS だけ取り出してスタイルを当てれるように spectru

10/10 に webpack v5 がリリースされたので、今回は変更点や気をつけたい点をまとめてみました。 プロダクションで使うのはまだ早いかも(2020/10/27時点) webpack v5 のリリースは行われたが、まだバグが多くあり、webpack で使用する loader や plugin は対応が追いついていません。 パッとwebpack 5 関連の Issueを眺めるだけでも、まだ多くの問題があることがわかります。 なので、webpack v5 を使用するのは安全にいきたければ 1,2 ヶ月ほど待ってもよいと思います。 いまはこのバグ対応によりすでに webpack のバージョンは v5.3.0 になっています。 試して見たい方は v4 から v5 へのマイグレーションガイドを参考にするとよいです。 周辺ツールの現状 webpackを使用するにあたって特に重要な webpac

どうも。 普段フロントエンド周りの開発をやっている者です🐶 今回は普段自分がやっている情報収集と学習で使ってるサイトや手法を紹介します。 過去にも何度かこの類の話をしているのですが、2020年版という感じです。 誰かの参考になればいいなと思います。 情報収集 まずは情報収集についてです。 自分の場合は、毎日見るものと週に1度見るものがあります。 daily.dev 普段はこのdaily.devのブラウザ拡張機能を入れて、Chromeのトップ画面で情報を見ています。 新しいタブを開くたびに表示されるので、いつも目に入るのがいいところです。 2021/05/26 追記 Chrome拡張だけではなく、Web アプリケーションもリリースされました🎉 PWAにも対応しているので、デスクトップやモバイルでインストールも可能です！ daily.devは簡単に説明するとさまざまなサイトのRSSリーダー