サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
掃除・片付け
web.dev
安定版ブラウザのリリース 2023 年 10 月に、Firefox 119、Safari 17.1、Chrome 118、Chrome 119 が安定版になりました。この投稿では、ウェブ プラットフォームへの影響について説明します。 Firefox 119 の JavaScript の機能 Firefox 119 では、JavaScript 配列のグループ化に Object.groupBy と Map.groupBy の静的メソッドが使用されています。
4 月にウェブ プラットフォームを初めて導入 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 安定版ブラウザのリリース 2024 年 4 月に、Firefox 125 と Chrome 124 が安定版になりました。この投稿では、ウェブ プラットフォームに追加された新機能を紹介します。 4 つの新機能がベースラインに導入 Firefox 125 では、新たに利用可能になったベースラインに 4 つの新機能が追加されました。Popover API、Intl.Segmenter、align-content(ブロック レイアウト用)、content-box 値と stroke-box 値(transform-box 用)。 Popover API Popover API を使用すると、さまざまな種類の非モーダル ポップアップを作成できます。これには、ツールチップ、
Popover API lands in Baseline Stay organized with collections Save and categorize content based on your preferences. It's happening! One of the features I am most hyped about has just landed across all modern browsers and is officially a part of Baseline 2024. And this feature is the Popover API. Popover provides so many awesome primitives and developer affordances for building layered interfaces
タブ コンポーネントの作成 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 この投稿では、レスポンシブで、複数のデバイス入力をサポートし、複数のブラウザで機能するウェブ用の Tabs コンポーネントの作成に関する考えを共有したいと思います。デモをお試しください。 デモ 動画をご覧になる場合は、この投稿の YouTube バージョンをご覧ください。 概要 タブはデザイン システムの一般的なコンポーネントですが、さまざまな形態があります。まず、デスクトップ タブは <frame> 要素で構築されていましたが、現在は物理特性に基づいてコンテンツをアニメーション化するモバイル コンポーネントが用意されています。皆同じこととして、スペースの節約を目指しています。 現在、タブのユーザー エクスペリエンスに不可欠なのは、ディスプレイ フレーム内のコンテンツの表示を切り替
Learn JavaScript へようこそ! コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 JavaScript はウェブページの「インタラクティブ レイヤ」を担い、マークアップによって提供される「構造」レイヤと CSS によって提供される「プレゼンテーション」レイヤを補完します。JavaScript を使用すると、デベロッパーはユーザー操作と内部ロジックのあらゆる組み合わせに応じてマークアップとスタイルを追加、削除、変更し、ページの構造や表示方法を変更できます。JavaScript を使用すると、ウェブページのレンダリングと動作を細かく制御できます。ブラウザの組み込み動作の一部を変更することもできます。 このコースでは、言語の記述方法を決める基本的なルールから、JavaScript が提供する組み込みのメソッドやプロパティまで、JavaScript
Learn JavaScript のご紹介 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 本日は、web.dev に関する最新のコースをご紹介します。Learn JavaScript は、Mat Marquis が作成した新しいコースで、最新の JavaScript について詳しく説明しています。既存のコース、特に「HTML、CSS を学ぶ」の基礎コースと合わせてご利用ください。 web.dev の他のすべてのコースと同様に、コースを最初から最後まで学習する必要はありません。仕様をブラッシュアップするだけの参考資料としてご利用いただけます。 リンクする資料は、他の記事の背景情報としても使用します。 JavaScript の学習がお役に立てば幸いです。 特に記載のない限り、このページのコンテンツはクリエイティブ・コモンズの表示 4.0 ライセンスにより使用
Stay organized with collections Save and categorize content based on your preferences.
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
userVerification の詳細 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このドキュメントでは、WebAuthn の userVerification と、パスキーの作成時または認証時に userVerification が指定された場合のブラウザの動作について説明します。 WebAuthn の「ユーザー確認」とは何ですか? パスキーは公開鍵暗号に基づいて構築されています。パスキーを作成すると、公開鍵 / 秘密鍵のペアが生成され、秘密鍵はパスキー プロバイダによって保存されます。公開鍵は証明書利用者(RP)サーバーに返され、保存されます。サーバーは、ペアの公開鍵を使用して、同じパスキーで署名された署名を検証することで、ユーザーを認証できます。公開鍵認証情報の「ユーザー表示」(UP)フラグは、認証中に誰かがデバイスを操作したことを証明します。
ブラウザはウェブページを解析し、画像、スクリプト、CSS などのリソースの検出とダウンロードを開始すると、最適な順序でリソースをダウンロードできるように、フェッチ priority を割り当てます。これらの優先順位は、リソースの種類とドキュメント内の場所によって異なります。たとえば、ビューポート内の画像の優先度は High で、<head> の <link> による早期読み込みのレンダリング ブロック CSS の優先度は Very High にすることができます。ブラウザは、適切な優先度を割り当てるのが得意ですが、すべてのケースで最適であるとは限りません。 この記事では、Fetch Priority API と fetchpriority HTML 属性について説明します。この属性を使用すると、リソースの相対的な優先度(high または low)をヒントにすることができます。Fetch P
Navigation Timing と Resource Timing で現場での読み込みパフォーマンスを評価する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Navigation API と Resource Timing API を使用して現場の読み込みパフォーマンスを評価するための基礎を学びます。 ブラウザのデベロッパー ツール(または Chrome の Lighthouse)で接続スロットリングを使用して読み込みパフォーマンスを評価したことがある方は、パフォーマンスの調整にこれらのツールがいかに便利であるかをご存知でしょう。安定した安定したベースライン接続速度で、パフォーマンスの最適化による影響をすばやく測定できます。唯一の問題は、これが合成テストであり、フィールド データではなくラボデータが生成されることです。 合成テストは本質的に悪いことで
ベースライン 2023 年 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 caniuse.com にベースラインが登場します。この投稿では、このインテグレーションの概要と、2023 年に Baseline に追加されたいくつかの機能について説明します。 ベースラインの新しい定義では、機能のライフサイクルには 2 つのステージがあります。1 つ目は、リリースが開始されてから、30 か月後に一般公開された時点です。機能は、以下のブラウザで相互運用可能になると、新たにベースラインに組み込まれます。 Safari(macOS と iOS) Firefox(パソコンと Android) Chrome(パソコン、Android) Edge(デスクトップ) ベースラインは使用可能 機能の可用性を明確にするための次のステップとして、ベースラインは本日より [Can I
最近、配列に対して呼び出すことができる新しい相互運用可能なメソッド 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
日本語キーワードによるハッキングを解決する コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 このガイドは、日本語のテキストを自動生成するタイプのハッキング(以下、日本語キーワードによるハッキング)を対象として作成されています。一般的なコンテンツ管理システム(CMS)のユーザーを対象としていますが、CMS を使用しなくてもこのガイドは役立ちます。 このガイドがお役に立てば幸いです。 フィードバックをお寄せください。機能の改善に役立てさせていただきます。 このタイプのハッキングを特定する 一般的に、日本語キーワードによるハッキングでは、ランダムに生成されたディレクトリ名(http://example.com/ltjmnjp/341.html など)で、自動生成された日本語テキストを含む新しいページがサイト上に作成されます。このようなページは、偽ブランド品を販売
Immutable array updates with Array.prototype.with Stay organized with collections Save and categorize content based on your preferences. Browsers recently gained a new interoperable method that you can call on Arrays: Array.prototype.with(). This article explores how this method works and how to use it to update an array without mutating the original array. Intro to Array.prototype.with(index, val
イラストレーターのためのウェブの力: ウェブ技術を活用した pixiv の描画アプリ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 pixiv は、イラストレーターやイラストの愛好家がコンテンツを通じて交流できるオンライン コミュニティ サービスです。独自のイラストを投稿できます世界中に 8,400 万人以上のユーザーがおり、2023 年 5 月時点で 1 億 2,000 万を超えるアート作品が投稿されています。 pixiv スケッチは pixiv が提供しているサービスの一つです。指やタッチペンを使用してウェブサイト上にアートを描画するために使用されます。豊富な種類のブラシ、レイヤ、バケット ペイントなど、魅力的なイラストを描画するためのさまざまな機能がサポートされています。また、描画プロセスをライブ配信することもできます。 このケーススタディでは、p
どこでもグッドノート コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 過去 2 年間、Goodnotes のエンジニアリング チームは、成功した iPad のメモ作成アプリを他のプラットフォームに導入するプロジェクトに取り組んできました。このケーススタディでは、2022 年の iPad アプリが、ウェブ テクノロジーを基盤とするウェブ、ChromeOS、Android、Windows に実装され、チームが 10 年以上にわたって取り組んできた同じ Swift コードを再利用した WebAssembly について説明します。 ウェブ、Android、Windows に Goodnotes が登場した理由 2021 年、Goodnotes は iOS と iPad 向けのアプリとしてのみ提供されていました。Goodnotes のエンジニアリング チームは、Go
ソフトウェアを作成するときは、テストによって正しく動作することを確認できます。テストは、ソフトウェアが意図したとおりに動作することを確認するために、特定の方法でソフトウェアを実行するプロセスとして広く定義できます。 テストを成功させることで、新しいコードや機能を追加したり、依存関係をアップグレードしたりしても、作成済みのソフトウェアが想定どおりに動作し続けることを確信できます。また、テストにより、思いがけないシナリオや予期しない入力からソフトウェアを保護できます。 テストするウェブの動作の例を以下に示します。 ボタンがクリックされたときにウェブサイトの機能が正しく動作することを確認する。 複雑な関数が正しい結果を生成することを確認する。 ユーザー ログインが必要なアクションを完了する。 不正な形式のデータが入力された場合に、フォームにエラーが適切に報告されることを確認する。 ユーザーの帯域
HTML のパフォーマンスに関する一般的な考慮事項 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 読み込みの早いウェブサイトを作成するには、まず、ページの HTML に対するレスポンスをサーバーからタイムリーに受け取る必要があります。ブラウザのアドレスバーに URL を入力すると、ブラウザは GET リクエストをサーバーに送信して取得します。ウェブページに対する最初のリクエストは、HTML リソースのリクエストです。HTML が最小限の遅延ですばやく到着できるようにすることは、重要なパフォーマンス目標です。 HTML に対する最初のリクエストでは、いくつかのステップを経て、それぞれのステップに時間がかかります。各ステップに費やす時間を短縮することで、最初のバイトまでの時間(TTFB)が短縮されます。ページの読み込み速度に関して、TTFB は唯一の指標では
動画のパフォーマンス コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 前のモジュールでは、画像に関連するパフォーマンス手法をいくつか学びました。画像とは、ウェブ上で広く使用されているリソースタイプで、画像を最適化してユーザーのビューポートを考慮に入れないと、大量の帯域幅を消費する可能性があります。 しかし、ウェブ上で一般的に見られるメディアタイプは画像だけではありません。動画も、ウェブページでよく使用される一般的なメディアタイプです。可能な最適化について確認する前に、まず <video> 要素の仕組みを理解することが重要です。 動画ソースファイル メディア ファイルを操作する場合、オペレーティング システム(.mp4、.webm など)で認識されるファイルはコンテナと呼ばれます。コンテナには 1 つ以上のストリームが含まれます。ほとんどの場合、これは動画と
ウェブデザインと開発の主要なテーマに関するコース(随時追加予定)をご確認ください。Chrome チームのメンバーの支援を受け、業界のエキスパートが各コースを作成しました。モジュールを順番に受講するか、最も興味のあるトピックを受講してください。
Interop 2024 Stay organized with collections Save and categorize content based on your preferences. Following on from the success of Interop 2022 and Interop 2023, we are excited about the opportunity to collaborate once again with all key browser vendors and other relevant stakeholders. Our shared objective is to enhance interoperability between web platforms, thereby simplifying the work of deve
戦略を詳しく見て、名前の背後にある意味を学びましょう。 テストの目標を決定する: テストで何を達成したいか? 優れた戦略を立てる前に、テストの目標を明確にしましょう。アプリケーションが十分にテストされたと思うのはいつ頃ですか? 高いテスト カバレッジを達成することは、テストに関するデベロッパーの最終的な目標と見なされがちです。しかし、これは常に最適なアプローチでしょうか?テスト戦略を決定する際は、ユーザーのニーズに応えるという重要な要素があります。 デベロッパーは他にも多くのアプリケーションやデバイスを使用しています。この点に関して、あなたは「正常に動作する」ためにこれらのすべてのシステムに依存しているユーザーです。それに伴い、無数のデベロッパーに頼って、アプリケーションやデバイスを機能させるために最善を尽くしています。元の状況に戻すために、デベロッパーである皆さんも、この信頼に応えるよう
Interaction to Next Paint(INP) コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 Interaction to Next Paint(INP)は、Event Timing API のデータを使用してページの応答性を評価する安定版の Core Web Vitals 指標です。INP は、ページに対するすべてのクリック、タップ、キーボード操作のレイテンシをモニタリングし、外れ値を無視して最長の継続時間を報告します。INP が低いということは、ページが大多数のユーザー インタラクションに一貫してすばやく対応できることを意味します。 応答性の良さとは、ページの操作にすばやく反応することを意味します。ページが操作に応答すると、ブラウザはレンダリングする次のフレームに視覚的フィードバックを表示し、操作が成功したことを示します。たとえば、次の
Interaction to Next Paint becomes a Core Web Vital on March 12 Stay organized with collections Save and categorize content based on your preferences. Interaction to Next Paint will officially become a Core Web Vital and will replace First Input Delay on March 12. The Web Vitals program provides metrics to help web developers measure key aspects of the user experience on the web. First Input Delay
テスト項目とアプローチ コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。 何を何をテストするかではなく、何をテストするかは、すべてのチームにとって重要な質問です。テストは目的達成のための手段であり、コードベースのさまざまな部分でテストの優先順位を決めることは、困難な場合があります。 優先順位を付ける最良の方法は、コードベースとチームの目標に基づいて決定します。ただし、多くのコード カバレッジを持つ小規模なテスト(単体テストなどのテストピラミッドの下部)を大量に作成するのに時間と帯域幅はかかりませんが、必ずしもプロジェクトの全体的なリスクが軽減されるわけではありません。 単体テストを単独では役に立たない例。 アプリ、ウェブサイト、ライブラリの主なユースケースを検討することで、最初に何をテストするかを選択できます。たとえば、サイトの重要な部分(ユーザー エクスペ
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
次のページ
このページを最初にブックマークしてみませんか?
『Home | web.dev』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く