AbortControllerを知らないなんて - Qiita
多くの開発者がAbortControllerを理解していると思っているかもしれませんが、その機能は基本的な用途をはるかに超えています。たとえば、fetchリクエストのキャンセル、イベントリスナーの管理、Reactフックとの連携などです。 本当にAbortControllerの威力を知っていますか？それでは見てみましょう。 AbortControllerを使ったfetchリクエストのキャンセル AbortControllerをfetchと一緒に使うことは、最も一般的な用途です。 以下は、AbortControllerを使ってキャンセル可能なfetchリクエストを作成する例です： fetchButton.onclick = async () => { const controller = new AbortController(); // キャンセルボタンを追加 abortButton.onc
Reactで大量描画しても60fps出すためのパフォーマンスチューニング術 - SmartHR Tech Blog
こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業員数が多いとブラウザ上での操作が重くなってしまうという問題がありました。 最近「数万人規模の組織図での 60fps」を目指してこの組織図機能の描画パフォーマンス改善を行ったので、その中で実践したフロントエンド開発における大量描画処理の Tips を共有します。(React を前提としています) そもそも問題はどこにあるのか 最近まで、SmartHRの組織図機能は数万人規模の企業で十分に使えるような作りになっていませんでした。というのも、対象従業員数が数万人を超えてくると、いろんな操作が著しく重くなり、実用に耐える操
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
React / Remix への依存を最小にするフロントエンド設計 - 一休.com Developers Blog
CTO 室の恩田(@takashi_onda)です。 一休レストランのフロントエンドアーキテクトを担当しています。 Intro 一休レストランでは、以前ご紹介したようにフロントエンドで React / Remix を利用しています。 user-first.ikyu.co.jp 一方、設計方針としては、React / Remix への依存が最小になるように心掛けています。 今日は、そんな一見矛盾するような設計方針について、ご紹介したいと思います。 この記事を読んでいただき Remix に興味をもたれたら、明後日 2024/8/7(水) 19:00〜 のオンラインイベント offers-jp.connpass.com にもご参加いただけると嬉しいです。 この記事でご紹介している疎結合なフロントエンドアーキテクチャを実現する Remix の魅力についてお話します。 なぜ依存を最小にするのか？ R
テストの学習へようこそ！ | web.dev
このコースでは、ウェブ用のテストの概要と探索について説明します。 このコースで学習する内容は次のとおりです。 テストの基礎 自動テストと手動テスト テストを実施する場所と方法 ベスト プラクティス 何をテストすべきか、誰に責任があるのか、目的そのものとしてではなく、目的を達成するために手段をテストすることを検討する方法など、テストの理念。 このコースには、学習に役立つ簡潔で実用的なサンプルコードも含まれています。 コースのスコープには、Node.js などの環境で実行される、フロントエンドの JavaScript とドキュメント モデル、バックエンドでのライブラリ テストが含まれます。テストの経験はありませんが、JavaScript の基礎知識と Node.js などに関する経験が必要です。初心者にも経験豊富なデベロッパーにも適しています。 ほとんどのテスト フレームワークとツールは共通の
Reactのテストをちょっとよくするかもしれない細いTips
こんにちは。株式会社スペースマーケットでフロントエンドエンジニアをしておりますwado63です。 以前弊社の記事でReactのテストの実践的なTipsを紹介していましたが、もっと細かい、テストをちょっとよくするかもしれないTipsを紹介したいと思います。 Mock関数に型を当てる jestのnamespaceには、jest.MockedFunctionという型があります。 これを使うことでMock関数に元の関数の型を当てることができます。 import { myFunction } from './myFunction' jest.mock('./myFunction', () => ({ myFunction: jest.fn() })) const mockedMyFunction = myFunction as unknown as jest.MockedFunction<typeo
似て非なるCSS Module Scripts
昨年くらいからNext.jsの影響もあり、CSS Modulesの人気がまた高まってるように感じますね。State of CSSのCSS-in-JSランキングでも満足度、興味、利用率、認知度などどれをとっても1~2位に入ってました。 CSS Moduels自体はReactのJSXなどと同様、JSを拡張し利用できる技術です。しかし、このアプローチを有用と思った人たちが「JSやブラウザの仕様としてCSSをimportできたらいいのにね」と思いChromeに実装されつつあるのが「CSS Module Scripts」です。 仕様になったならいい話じゃん！で終わればいいんですが、なんとこの「CSS Module Scripts」、「CSS Modules」と仕様が違うんですね。現状まだwebpackでは「CSS Module Scripts」は未サポートですが、今後サポートするつもりっぽいのでこの
mdxjs.com
Markdown for the component eraMDX lets you use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. 🚀 Continue reading » New: MDX 3!A small major this time, nothing big, which is also nice sometimes! This mainly drops support for old Node (use 16 or later), a
「State of JavaScript 2022」公開。利用率1位のフロントエンドライブラリはReact、レンダリングはNext.js、テストはJestなど、4万人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者3万9472人が回答したアンケートの結果をまとめた「State of JavaScript 2022」が公開されました（日本語訳版が同時公開されています）。 回答者の国別分布を上位5位までを見ると米国が11.9％、ドイツが5.2％、フランスが3.7％、イギリス（UK）が3.6％、そしてインドが3.2％。 言語別の回答者は、英語が69.6％、フランス語が3.4％、ドイツ語が3.1％、スペイン語が3％などとなっており、日本語での回答者は0.4％でした。 アンケートの結果は、ProxyやPromiseなどに関するJavaScriptの新機能がどのくらい使われているか、Service WorkerやWebGLなど新しいブラウザAPIがどのくらい使われているかや、人気のJavaScriptライブラリ、JavaScriptは正しい方向に進化していると思
jQuery不要の最新スライダー［Splide］の使い方と全オプション
今日は最新のJavaScriptスライダー［Splide］を紹介します。 まずは［Splide.js］の特徴をいくつかピックアップします。 jQueryなどのライブラリに依存せず単体で動く 軽量（圧縮版で11kB） IE10以降対応 ブレイクポイントの指定でレスポンシブ対応 マウスのドラッグとタッチスワイプに対応 SEOフレンドリー スライダー、またはスライドショー、カルーセルに必要とされる要素はすべて揃っており、近年評価が高い［swiper.js］や［slick.js］などと肩を並べられるスペックです。 Splide → https://splidejs.com ［Splide］本体ファイルをインストール Splide.jsをウェブサイトにインストールする方法は3つあります。 NPMでダウンロード CDNを利用 Githubからダウンロード 1.NPMの場合 $ npm install
Next.js(React)に最軽量＆高機能スライダープラグインSplideを導入してみる
スライダープラグインは何を使うべきか フロントエンドエンジニアのおとのです🙆♂️ Webサイトに以下のようなスライダーを埋め込む際、Web制作のコーダーやマークアップエンジニア、フロントエンドエンジニアは外部プラグインを利用して実装することが多いかと思われます。 jQueryが全盛期だった時には、Slickが多く利用されていた印象です。あらゆるオプションが用意されており、さまざまなカスタマイズが可能で、私もよく使ってきました。 また、IEのサポートが終了してからSwiperが利用されるようになった印象があります。こちらも複数のオプションがあり、比較的モダンなCSS（flex等）が組み込まれていることから、slickよりもカスタマイズが容易であるように思えます。jQueryに依存していないのも大きなメリットですね。 今までのスライダープラグインの問題 ただ、スライダープラグインは決して容
React、過剰に複雑な代物。 - Qiita
はいさい！ちゅらデータぬオースティンやいびーん！ 今回の記事は筆者に珍しく、技術紹介ではなく、僕の個人的な意見を書きます。あくまでも、自説です。 React自体は画期的で、プログラミング界に貢献したプロジェクトだと思っていますし、完全に否定したいわけではありません。 Reactに対する違和感＝芽生えては大きく育った種 筆者はReactがとても好きでした。JavaScriptが好きになったきっかけもReactでした。何から何までもReactで書き直して、Custom Hooksを作って、refを子部品に渡したり、バリバリ満喫していました。 Vueも仕事の関係で習得せざるを得なくなったのですが、Vueは最高に大嫌いでした。これならReactで書き直してやるぅ！と思ったりも。 Reactについて社内でも導入を推進したり、React入門の勉強会を開いたりもしています。 しかし、そんな筆者は、最近に
Custom Elements Everywhere
Custom Elements Everywhere Making sure frameworks and custom elements can be BFFs 🍻 What's this? Custom Elements are the lynchpin in the Web Components specifications. They give developers the ability to define their own HTML elements. When coupled with Shadow DOM, Custom Elements should be able to work in any application. But things don't always work seamlessly. This project runs a suite of test
【React / TypeScript】ESLint + Prettier を設定する（ESLint 編）
とはいえ, まるっと設定を実施するのでいずれ上記は別の箇所に移動していきます。 ESLint の初期設定 公式の Getting Started を参考に実施していきます。 簡単に eslint --init を使って, 構成ファイル生成とライブラリのインストールをやります。（eslint をグローバルインストールしたくないので, 公式通りに便利な npx で実施していきます） ちなみに, 公式の Getting Started の先頭の npm install eslint --save-dev を飛ばしているのは, eslint --init の最後で npm install に誘導してくれるからです。 ? What type of modules does your project use? … ❯ JavaScript modules (import/export) CommonJ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
web-platform-tests dashboard
React 19を概念から理解する
React
Free Video Conferencing Software for Web & Mobile | Jitsi
2022年に起きたフロントエンドの変化
GitHub - jsx-eslint/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.
