テストの学習へようこそ！ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必
序文 WebKit と Gecko の内部オペレーションに関するこの包括的な入門情報は、イスラエルのデベロッパー Tali Garsiel 氏による多くの研究の成果です。数年にわたり、ブラウザ内部に関するすべての公開データを確認し、ウェブブラウザのソースコードを読むことに多くの時間を費やしました。彼女は次のように書いています。 ウェブ デベロッパーは、ブラウザ操作の内部構造を学ぶことで、より的確な意思決定を行い、開発のベスト プラクティスの背後にある理由を知ることができます。これはかなり長いドキュメントですが、時間をかけてじっくり読むことをおすすめします。やったら嬉しいよ。 Chrome デベロッパー リレーションズ、Paul Irish はじめに ウェブブラウザは、最も広く使用されているソフトウェアです。この入門編では その仕組みを解説しますアドレスバーに「google.com」と入力し
Stay organized with collections Save and categorize content based on your preferences.
Stay organized with collections Save and categorize content based on your preferences. This course is designed for those new to web performance, a vital aspect of the user experience. It covers key web performance concepts and techniques for improving performance. Go back
CSS subgrid Stay organized with collections Save and categorize content based on your preferences. CSS grid is a very powerful layout engine, but the row and column tracks created on a parent grid can only be used to position direct children of the grid container. Any author defined named grid areas and lines were lost on any other element than a direct child. With subgrid, track sizing, templates
Stay organized with collections Save and categorize content based on your preferences.
How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile Stay organized with collections Save and categorize content based on your preferences. Back/forward cache (or bfcache) is a browser optimization that enables instant back and forward navigation. It significantly improves the browsing experience for users, especially for websites that involve many back and forth naviga
Google I/O で、昨年の I/O での発表以降、ベースラインがどのように進化しているかについてニュースを共有しました。ウェブ プラットフォーム ダッシュボード、RUM Archive との統合、RUMvision との今後の統合についても発表しました。この投稿では、講演で取り上げたすべてのリソースを 1 か所にまとめます。 ウェブ プラットフォーム ダッシュボードは、ウェブ プラットフォーム全体と個々の機能の相互運用性の過程を確認するための新しい方法です。これにより、ベースラインに含まれるようになります。詳細については、ウェブ プラットフォーム ダッシュボードの発表をご覧ください。 Baseline を日常的に使用するツールと統合することは、このプロジェクトのビジョンの一つでした。Google は、ユーザーがブラウザの互換性への対応について、あまり時間をかけて考える必要がないように
web.dev インフラストラクチャの変更 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 こんにちは、Paul です。 このサイトについてお知らせしたいと思います。 私は、GitHub でホストされている CMS のインフラストラクチャを、Google の多くの異なるチーム間で共有されるインフラストラクチャに移行することにしました。これは、サイトに対するユーザーの関わり方に影響します。その点について簡単に説明します。 このサイトを初めて作成したとき、Google は「ウェブ開発の本棚」を作るつもりでした。サイトで重点を置くべきだと Google が考えたものだけを提供するサイトを作成し、Lighthouse と 110 を組み合わせて使用するカスタム インフラストラクチャを構築しました。そのコンセプトは非常に素晴らしいものでした。ユーザーがサイトをどのよ
To test or not to test, a technical perspective Stay organized with collections Save and categorize content based on your preferences. The previous article covered the basics of test cases and what they should contain. This article delves deeper into the creation of test cases from a technical perspective, detailing what should be included in each test and what to avoid. Essentially, you'll learn
light-dark() を使用して CSS のカラーパターンに依存する色を使用する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 システムカラーは、現在使用されている color-scheme 値に反応できます。light-dark() 関数は、同じ機能を作成者に公開します。 CSS のシステムカラー CSS では、多数の色空間のうちの 1 つから多数の色を使用できます。たとえば、名前付きの色、16 進数の色、特定の色空間にリンクされた色関数、より一般的な color() 関数を使用できます。 たとえば、名前の付いた色 cornflowerblue は、#6495ED、hsl(218.54deg 79.19% 66.08%)、color(display-p3 0.43 0.58 0.9) として表すこともできます。 CSS には、これらのさまざまな名前
Interaction to Next Paint is officially a Core Web Vital 🚀 Stay organized with collections Save and categorize content based on your preferences. Interaction to Next Paint is now a stable Core Web Vital metric, replacing First Input Delay. Today's the day! After years of work, we're finally ready to make Interaction to Next Paint (INP) a stable Core Web Vital metric. This marks a significant step
すべてのフロントエンド デベロッパーが知っておくべき 5 つの CSS スニペット（2024 年） コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 すべてのフロントエンド デベロッパーは、:has() が「親セレクタ」以上のものであること、subgrid の仕組みと理由、組み込みの CSS 構文でネストする方法、ブラウザで見出しテキストの折り返しのバランスを取る方法、コンテナクエリ ユニットの使用方法について知っておくべきだと思います。 この投稿は、すべてのフロントエンド デベロッパーが知っておくべき昨年 2023 年の 6 つの CSS スニペットの続きです。 CSS:has(.potential-beyond-being-a-parent-selector) :has() は 2023 年末に、すべての主要なブラウザでリリースされました。この新しいセレ
3 月 12 日に「Interaction to Next Paint」がウェブに関する主な指標に コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 3 月 12 日より、「Interaction to Next Paint」が「Core Web Vitals」として正式に採用され、「First Input Delay」の代わりになります。 Web Vitals プログラムでは、ウェブ デベロッパーがウェブ上のユーザー エクスペリエンスの主要な側面を測定するための指標を提供しています。First Input Delay（FID）はプログラムの応答性の要素を示すものでしたが、時間の経過とともに、FID ではなかったウェブでのインタラクティビティの側面を捉えるには新しい指標が必要であることが次第に明らかになりました。Chrome チームはこのニーズを認識し、20
New to the web platform in May Stay organized with collections Save and categorize content based on your preferences. Discover some of the interesting features that landed in stable and beta web browsers during May 2023. Stable browser releases In May 2023, Firefox 113, Chrome 113, Chrome 114, and Safari 16.5 became stable. Let's take a look at what this means for the web platform. WebGPU Chrome 1
Baseline 2023 Stay organized with collections Save and categorize content based on your preferences. Baseline is coming to caniuse.com! In this post learn about the integration, and also discover some of the features that became part of Baseline in 2023. With the new definition of Baseline, there are two stages in a feature's lifecycle. Firstly, when it becomes newly available, and then when it be
パフォーマンスの学習へようこそ！ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ウェブ パフォーマンスはウェブ開発において非常に重要な要素であり、ページの読み込み速度や、ユーザー入力に対する応答性に重点を置いています。ウェブサイトのパフォーマンスを最適化すると、ユーザー エクスペリエンスが向上します。ユーザー エクスペリエンスの向上は、ウェブサイトの目標を達成するうえで大いに役立ちます。 ウェブ パフォーマンスはニッチなトピックのように思えるかもしれませんが、実際には広範で深いトピックです。ウェブ パフォーマンスに関するコースは、分野としての深さを考えると、親しみやすいものであると同時に、有益でもあることが不可欠です。このコースの初回リリースでは、初心者の方が役立つウェブ パフォーマンスの基礎に焦点を当てています。 このシリーズの各モジュールは、可能な限
JavaScript のインポート地図がクロスブラウザでサポートされるようになりました。 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ES モジュールは、ウェブ アプリケーションに JavaScript コードを含めて再利用する最新の方法です。これらは最新のブラウザでサポートされており、従来の非モジュール式 JavaScript 開発アプローチに比べていくつかの利点があります。 ES モジュールを使用する最新の方法は、<script type="importmap"> タグを使用することです。このタグを使用すると、外部モジュール名とそれに対応する URL のマッピングを定義できます。これにより、コードに外部モジュールを組み込んで使用するのが容易になります。 <script type="importmap"> アプローチを使用するには、まずそれを HTM
バックフォワード キャッシュ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 バックフォワード キャッシュ（bfcache）は、すぐに前後に移動できるブラウザの最適化です。これにより、特に低速のネットワークやデバイスを使用するユーザーのブラウジング エクスペリエンスが大幅に向上します。 このページでは、すべてのブラウザで bfcache を使用するようにページを最適化する方法について説明します。 ブラウザの互換性 bfcache は、パソコンとモバイルの両方で、長年にわたって Firefox と Safari の両方でサポートされています。 Chrome バージョン 86 以降では、ごく一部のユーザーを対象に、Android のクロスサイト ナビゲーション用に bfcache が有効になっています。今後のリリースでは、追加のサポートが段階的にリリースされま
Let's take a closer look at the strategies and learn the meaning behind their names. Determine testing goals: What do you want to achieve with these tests? Before you can start building a good strategy, figure out your testing goal. When do you consider that your application has been sufficiently tested? Achieving high test coverage is often viewed as the ultimate goal for developers when it comes
Yahoo! JAPAN は、検索、ニュース、e コマース、メールなどのサービスを提供している日本の大手メディア企業である LY コーポレーションの一員です。5,500 万人を超えるユーザーが Yahoo!JAPAN のサービスを毎月ご利用いただけます。 e コマースやその他の金銭関連サービスを提供しているため、アカウントのセキュリティが最優先です。セキュリティを強化するため、Yahoo!JAPAN は 2017 年以降、ユーザーのパスワードレス認証への移行を進めています。これには、SMS 認証、パスワード無効化機能、パスキーの導入などが含まれていました。この記事では、Yahoo!JAPAN は、パスキーのユーザー エクスペリエンスと導入率の改善における実績とアプローチを打ち出しています。 パスワードレス認証で成功 パスワードレス認証への移行により、ログイン ID やパスワードの忘れた問い
最近、配列に対して呼び出すことができる新しい相互運用可能なメソッド Array.prototype.with() がブラウザに追加されました。 この記事では、このメソッドの仕組みと、元の配列を変更せずに配列を更新する方法について説明します。 Array.prototype.with(index, value) の概要 Array.prototype.with(index, value) メソッドは、指定された新しい value に index を設定して、呼び出された配列のコピーを返します。 次の例は、年齢層の配列を示しています。配列の新しいコピーを作成し、第 2 の年齢を 15 から 16 に変更します。 const ages = [10, 15, 20, 25]; const newAges = ages.with(1, 16); console.log(newAges); // [1
Changes to the web.dev infrastructure Stay organized with collections Save and categorize content based on your preferences. Hello, Paul here. I wanted to share some news with you about this site. I've taken the decision to move from a GitHub hosted version of the CMS to infrastructure that's shared across a number of different teams in Google. This will have an impact on how people contribute to
Defining test cases and priorities Stay organized with collections Save and categorize content based on your preferences. In the previous post, you learned about testing strategies, the number of tests needed to test an application, and how to find the best fit to gain the most confidence in the results while bearing in mind your resources. However, this only gives us an idea of how much to test.
Compression Streams are now supported on all browsers Stay organized with collections Save and categorize content based on your preferences. The Compression Streams API is for compressing and decompressing streams of data using the gzip or deflate (or deflate-raw) formats. Using the built-in compression of the Compression Streams API, JavaScript applications do not need to include a compression li
Learn JavaScript のご紹介 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 本日は、web.dev に関する最新のコースをご紹介します。Learn JavaScript は、Mat Marquis が作成した新しいコースで、最新の JavaScript について詳しく説明しています。既存のコース、特に「HTML、CSS を学ぶ」の基礎コースと合わせてご利用ください。 web.dev の他のすべてのコースと同様に、コースを最初から最後まで学習する必要はありません。仕様をブラッシュアップするだけの参考資料としてご利用いただけます。 リンクする資料は、他の記事の背景情報としても使用します。 JavaScript の学習がお役に立てば幸いです。 特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用
Effectively loading ads without impacting page speed Stay organized with collections Save and categorize content based on your preferences. In today's digital world, online advertising is a critical part of the free web we all enjoy. However, poorly implemented ads can lead to a slower browsing experience, frustrating users and diminishing engagement. Learn how to effectively load ads without impa
Three common types of test automation Stay organized with collections Save and categorize content based on your preferences. Let's start with the basics! Exploring the two general testing modes and three common types of test automation. We've all been there: what is a recurring coding meme that happens all too often in real life? This meme sums it up quite nicely: each drawer works perfectly well
Web Vitals コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 ウェブに関する指標とは、ウェブ上で優れたユーザー エクスペリエンスを提供するために不可欠なウェブページ品質シグナルに関する統一されたガイダンスを提供する Google の取り組みです。このツールの目的は、利用可能なさまざまなパフォーマンス測定ツールを簡素化し、サイト所有者が最も重要な指標である Core Web Vitals に集中できるようにすることです。 Core Web Vitals Core Web Vitals は Web Vitals のサブセットであり、すべてのウェブページに適用されます。すべてのサイト所有者が測定する必要があり、すべての Google ツールに表示されます。Core Web Vitals は、それぞれユーザー エクスペリエンスの個別の側面を表し、現場で測定
「same-site」と「same-origin」を理解する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 「same-site」と「same-origin」は頻繁に引用されますが、用語は誤解されがちです。たとえば、ページ遷移、fetch() リクエスト、Cookie、ポップアップを開く、埋め込みリソース、iframe のコンテキストで言及されています。 原点 「送信元」は、スキーム（HTTP や HTTPS などのプロトコルとも呼ばれます）、ホスト名、ポート（指定されている場合）を組み合わせたものです。たとえば、URL が https://www.example.com:443/foo の場合、「origin」は https://www.example.com:443 です。 「same-origin」と「cross-origin」 同じスキーム、ホス
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テストの学習へようこそ！ | web.dev
ブラウザの仕組み | Articles | web.dev
Learn JavaScript | web.dev
Learn Performance | web.dev
CSS subgrid | Articles | web.dev
Learn Testing | web.dev
web.dev
How Back/forward Cache Helped Yahoo! JAPAN News Increase Revenue by 9% on Mobile | web.dev
ウェブの最新情報 | Blog | web.dev
web.dev インフラストラクチャの変更 | Blog
To test or not to test, a technical perspective | Articles | web.dev
light-dark() を使用して CSS のカラーパターンに依存する色を使用する | Articles | web.dev
Interaction to Next Paint is officially a Core Web Vital 🚀 | Blog | web.dev
すべてのフロントエンド デベロッパーが知っておくべき 5 つの CSS スニペット（2024 年） | Articles | web.dev
3 月 12 日に「Interaction to Next Paint」がウェブに関する主な指標に | Blog | web.dev
New to the web platform in May | Blog | web.dev
Baseline 2023 | Blog | web.dev
パフォーマンスの学習へようこそ！ | web.dev
JavaScript のインポート地図がクロスブラウザでサポートされるようになりました。 | Blog | web.dev
バックフォワード キャッシュ | Articles | web.dev
Pyramid or Crab? Find a testing strategy that fits | Articles | web.dev
Yahoo!JAPAN、パスキーの導入率を 11% に増やし、SMS OTP の費用を削減 | web.dev
Array.prototype.with による不変の配列の更新 | Blog | web.dev
Changes to the web.dev infrastructure | Blog
Defining test cases and priorities | Articles | web.dev
Compression Streams are now supported on all browsers | Blog | web.dev
Learn JavaScript のご紹介 | Blog | web.dev
Effectively loading ads without impacting page speed | Articles | web.dev
Three common types of test automation | Articles | web.dev
Web Vitals | Articles | web.dev
「same-site」と「same-origin」を理解する | Articles | web.dev