どうも、まさとらん（@0310lan）です！ 今回は、JavaScript初心者から中級者までをカバーできる学習コンテンツを厳選してご紹介します。 完全無料で公開されているものばかりを集めており、なおかつ質の高いコンテンツを選んでいますので独学したい方にも最適です。テキスト、動画、本、Webアプリなど、さまざまな種類のコンテンツを楽しみながらぜひ学習に役立ててください！ ■学習を始める前に これからJavaScriptの学習コンテンツについて解説をしていく前に、ひとつだけ以下のサイトをご紹介しておきます。 【 The Modern JavaScript Tutorial 】 これはJavaScriptの基礎構文・DOM操作・非同期処理・サーバ通信など、ほとんどの学習項目を網羅したリファレンスのようなサイトです。海外で作られたサイトですが、うれしいことに日本語化されているので初心者にも扱いや
Three.jsの勉強の仕方 - Qiita
概要 Three.jsの勉強を始めて半年くらいが経過しました。 現在は、以下のようなアプリケーションを作成できるようになりました。 https://nemutas.github.io/r3f-normal-color/ ここまでに至る過程を少しまとめられたらと思います。 React Three Fiber について 私は主に、React Three Fiber（Three.jsをReact用にラッパーしたライブラリ｜以下、R3F）を使用して開発してます。 バニラのThree.jsを触る前に、つまりThree.jsの知識がゼロの状態のときからR3Fを使い始めました。 とてもよく設計されたライブラリで、ほんの数行でBoxを表示することができます。 ただし、よく設計されているということは、それほど抽象化されているということです。学び始めの頃は自分が作りたいシーンを作るために、どのプロパティをいじ
仕様書とテストを用いた「AI駆動開発」
数年前にAIを離れ現在はフロントエンドをやっているのですが、半年くらい前に思い切り引き戻されました。画像生成AIにおけるmidjourneyとstable diffusionの登場です。noteのCTO深津さんが記事を出したと思ったのも束の間、急速に進化を果たしました。 絵柄の固定・ポーズの指定・マシンスペックなど、日々さまざまな問題を解決しながら新たな技を身につけています。 しかし、同等かそれ以上に話題になっているのは大規模言語モデル(Large Language Model)かもしれません。ChatGPTが話題になった思ったら、BingやPerplexity,You.comなど大規模言語モデルを交えたサービスが次々と登場しました。 活用方法もたくさん見つけられており、私は特に以下の二つの記事が好きです。 「感情回路」の記事に入力(プロンプト)でここまで変わるのかと感動したことを覚えてい
Rustの開発環境を2秒で用意、ローカル環境は汚さず。オンライン開発環境のCodeSandboxがRust言語に対応
ここから「React」や「Vanilla」「Vue 3」などを選択すると、すぐにVisual Studio Code互換環境がWebブラウザ上に立ち上がります。 ここではReactを選択しました。エディタにはReactのテンプレートのコードが表示され、右側のプレビュー画面には結果が表示されています。エディタでコードを書き換えて保存すると、変更内容は瞬時にプレビューに反映されます。 このようにCodeSandboxはローカル環境に依存せず、しかも面倒なフレームワークや実行環境、ビルド環境などのインストールもすることなく、オンライン上ですぐにWebアプリケーション開発に取りかかれます。 また、Webブラウザから利用するだけでなく、Visual Studio Codeから利用するための拡張機能と、iOS用のアプリケーションも提供されています。GitHubとの連係も可能です。 CodeSandbo
React でフォームを作るとき「制御・非制御」コンポーネントに関する知識は必須です。デザインシステムを作成するにあたり、どちらを採用するか検討されたこともあるかと思います。 「制御・非制御」コンポーネントの差分を一言でまとめると、次のとおりです。 制御コンポーネントはライブラリ（React）が「入力要素の状態」を管理 非制御コンポーネントは「入力要素の状態」を DOM 自身が保持 「制御・非制御」コンポーネントと Form ライブラリ React Hook Form は、非制御コンポーネントを使うことで、少ないコード量で高パフォーマンスの Form 実装が実現できる人気のライブラリです。「非制御コンポーネント」として作成された<Checkbox>コンポーネントの例を見てみましょう。次の方法で<input type="checkbox" name="test" />がレンダリングされ、Fo
input type=“date” の沼から、ライブラリを導入する意義を考える - Mirrativ Tech Blog
はじめまして！2023年7月からミラティブでフロントエンドインターンをしております、かずえもんと申します😺 今回は、インターンでの作業中にハマってしまった Safari のバグについて調査していたら、なんと10年モノの issue だったことが判明し、ライブラリを導入する意義について考える機会となった話を書いてみたいと思います。 Safari の日付入力欄に無効な日付を入れると起こるバグ onChange が正しく呼ばれないのは Safari が原因？ Safari 17 以降で再現しないので原因は Safari で間違いなさそう Safari 17 以前での解決方法として DatePicker を使ってみる まとめ: ネイティブを補う存在としてのライブラリ We're Hiring!! Safari の日付入力欄に無効な日付を入れると起こるバグ 2023年8月、私はミラティブの管理シス
こんにちは。ぬこすけです。 setInterval などで定期的にブラウザで実行させている処理があったりするでしょう。 例えば、定期的にアクセストークンが有効かチェックし、無効だったら新しいトークンを取得するなど。 ブラウザはページのコンテンツを表示するために JavaScript の実行や UI の更新で忙しいです。 もし定期実行している処理がコンテンツ表示にかかわらない優先度の低い処理なのであれば、 できるだけブラウザの重要なタスクに影響を与えないようにしたい ものです。 この記事では できるだけブラウザの重要なタスクに影響を与えずに定期的に処理を実行させる方法を、アクセストークンのローテーションを例に紹介 します。 実装する機能 この記事で実装する機能は次の通りです。 React の hooks を使って実装します。 ブラウザのアイドル中(暇なとき)にアクセストークンを有効かチェック
React + TypeScript: React Hook Formでフォーム入力値をまとめて簡単に取得・検証する - Qiita
React Hook Formは、フォームの入力データを検証まで含めて、まとめて簡単に扱えるライブラリです。ただ、導入のページ(「はじめる」)にコード例は示されているものの、説明があまりありません。本稿は、その中から基本的なコード例8つを採り上げ、公式ドキュメントの引用やリンクも加えて解説します。コード例はわかりやすい(あるいは動く)ように手直しし、CodeSandboxにサンプルを掲げました。 インストール React Hook Formは、npm installコマンドでつぎのようにインストールします。 アプリケーションを手もとでつくるには、Create React Appを使うのがよいでしょう。本稿のコード例の場合には、TypeScriptのテンプレートを加えてください(「React + TypeScriptのひな形作成とFullCalendarのインストール」参照)。 基本的な使い
ここから下で話す際、主に使う言語・フレームワーク・ツールとしては - Typescript - React (Next.js) - Jest - React Testing Library - ブラウザテストツールとしてPlaywright を前提としています。ただ話す内容の本質的な部分はVueでもSvelteでも、Vitestだろうがあまり変わらないだろうなと思ってます。そう思って見ていただけると助かります。 現代ではReactでUIの単体テスト・インテグレーションテストを書く場合、Jest x React Testing Library を使うのが一般的かと思います。皆さんはJestでUIテストを書いていますか？Jestでコンポーネントの単体テストを書いていると辛いことがたくさんありませんか？例えば 大量のライブラリのモックによる(これってテストやる意味あるの・・・？)と感じる虚無感
はじめに 最近「単体テストの考え方/使い方」を読みました。 普段フロントエンドエンジニアとして実装をしている中で、自分が作っている単体テストについての言語化をサポートしてくれました。 この記事では、フォーム UI の実装を通して、コンポーネントに対する効果的な単体テストについて考察し、具体的なテストの書き進め方の一例を提示してみます。 最終的な成果物 この記事で実装するフォーム UI の最終的な成果物は codesandbox で確認できるようにしています。右のペインの「Tests」をクリックするとテストも実行できます。 注意 この記事は「単体テストの考え方/使い方」（以下、本書）の内容に触れていますが、読んでいなくても理解できるように補足をしているつもりです。それぞれのトピックで、文中に本書の該当ページの番号を「（p123）」のように表示しています（いずれも初版のものです）。 react
React Advent Calendar 2022 2日目の記事です。 本記事はごく簡単なコンポーネントから始めて、react のレンダリングについて学び直す記事です。学び直し(!=入門記事)なので JSX、TS の説明などはしません。 本記事の対象読者 ある程度 react を触っていて、もっとレンダリングについて理解したい人 より良いコンポーネントを書きたい人 本記事のコードについて 特に断らないかぎり、本記事に出てくるコードは以下のコードを省略したものです。実際に動かせる codesandbox も用意したので、そちらも参照ください。 import { createRoot } from 'react-dom/client'; const App = /* 実装 */; createRoot(document.querySelector('#main')).render(<App
はじめに Reactパッケージのコードは難しいらしいのですが、React を利用している人なら誰でも中身を読んでみたい！と思いますよね。 日々 React を使ってコードを書いていますが、function 関数でいい感じ HTML っぽい<p>Hello, World</p>コードを書いて、その後にyarn devしてみただけで、画面にHello, Worldが現れてしまう React なのですが、その動きはまるで魔法みたいだなと思っています。 ということで、React パッケージを読むことに挑戦したお話をさせてください。 本記事では以下について書いていきます。 React を読むにあたって取り組んだ流れ 今回の取り組みで学んだ React 内部の仕組みや API などの紹介やその所感 我々が普段 React を触っている時には全く意識しないけれど、よくよく考えたら魔法みたいに不思議なその
CodeSandbox が Rust や Python など様々な言語に対応したので Qiita に埋め込んでみた - Qiita
Qiita にはさまざまなコンテンツを埋め込み可能です。CodeSandbox も埋め込み可能なコンテンツの一つです。 従来の CodeSandbox はブラウザ上で動作するため React や Vue などのフロントエンドのみ対応していましたが、近年の CodeSandbox は Firecracker の microVM という仮想マシンによる処理の実行が可能になりました。それにより、フロントエンド以外のさまざまな言語の実行が可能となっています。 従来のブラウザ上で React や Vue を動かす sandbox を browser sandbox、最新の microVM で動作する sandbox を cloud sandbox と呼びます。（詳細はリンク先のドキュメントをご確認ください。） この cloud sandbox では、Rust や、 Python が公式にサポートして
ReactコンポーネントをブルブルさせながらReduxのパフォーマンスチューニング - カミナシ エンジニアブログ
はじめに こんにちは、カミナシ社でソフトウェアエンジニアをやっている浦岡です。 我々は「ノーコードでユーザー独自の現場アプリを作成できる」サービスを開発しています。 そのサービスのフロントエンドの開発にはReact×Reduxを使っているのですが、 サービス特性のため「Reduxのstateがファットになりがち」であったり「コンポーネント間のデータの依存関係が多くなりがち」といった状態に陥ります。 その結果、アプリの反応速度が遅くなりがちです... この記事では、上のような状態に陥った「React×Redux」アプリの高速化の一例をサンプルアプリを用いて説明します。 サンプルアプリについて 今回、Reduxのチュートリアルにあるカウンターアプリを改良し、下のような「モンスターの捕獲記録」アプリを作ります。 サンプルアプリについて Version1(コンポーネントをブルブルさせてみる) まず
Reactで作るアナログ時計
Reactで作るアナログ時計以前よりReactの勉強がてら、1時間を40分で区切った36時間時計というのをモクモクと作っています。その中でReact Hooksの使い方などを学んでいるので、今回はよくあるアナログ時計を作りながら勉強メモとして残しておきます。 よくある時計ですね！個人的にはデジタル時計派なのですが、意外と需要があるようなので作ってみることに。ちなみにこれは別に React を使わなくても、素の JavaScript（Vanilla.js）で作成可能です！が、上記36 時間時計を作る中で React コンポーネントとして必要だったので今回は React で挑戦しました。 CSS でベースとなるアナログ時計作りアナログ時計自体は空の div にサイズや position の設定をして作成。時計の角度は rotate プロパティーを使いますが、CSS カスタムプロパティーで初期値
Announcing Sandpack 2.0 and a Node.js runtime for any browser
Today, we are announcing Sandpack 2.0, which introduces Nodebox—a fast Node.js runtime that allows you to run server-side code in any browser. One year ago, we introduced Sandpack, an open-source in-browser bundler that allows you to run live running code examples on your website. We couldn’t have made a better decision. We knew how powerful Sandpack is (it's the bundler that powers CodeSandbox it
render hooks パターンの注意点と対策
以下の記事で紹介されている「render hooks パターン」には注意点があるため、簡単な例と共に注意点についてまとめました。 要約 Custom Hook から Component を返却する render hooks パターンの場合、返却された Component がアンマウントされてしまうことによりバグが発生する恐れがあるので注意が必要です。 Custom Hook から Component を返さずに React element を返す実装にすれば、 アンマウントを回避できます。 Component を返却する render hooks パターンの実装例と問題点 問題の視覚的確認 以下の codesandbox の例の「Open Modal」ボタンを押下してみてください。 Modal コンポーネントが現れるのですが、一定間隔でチカチカしています。 実装例 実装は以下の通りです。
Valibot Schema Driven UI - ユーザーがノーコードで自由に UI を組み立てられるエディタを Next.js と Valibot で構築する - ROUTE06 Tech Blog
近年 Bubble や Webflow、日本だと STUDIO などのノーコードプラットフォームが注目を集めています。これらのツールは、プログラミングの知識がなくてもユーザーが思い思いの UI を構築できる機能を提供し、アプリケーション開発の民主化に貢献しています。 このようなノーコードでユーザーが自由に UI を組み立てる仕組みはどのように構築されているのでしょうか。一見複雑に見えますが、基本的な考え方を理解すれば独自のエディタを構築することも不可能ではありません。アーキテクチャの中核となるのは、動的な UI コンポーネントを表現するスキーマ定義と、それを実際の UI 要素に変換する仕組みです。この過程では、データのバリデーション、データ型の絞り込みと UI コンポーネントの動的生成、そしてそれらの適切な配置が重要な役割を果たします。 本記事では、ユーザーがブラウザ上で UI を自由に構
React18のTransitionの動作確認
React18のTransitionの動作確認をした。 useTransitionを使った例を用意し、React18のAPIを使わず同様の体験を提供すると、どのようになるかを確認する。また、startTransitionやuseDeferredValueでも同じことができるか確認する。 先に結論 Reactの18の新機能を使わずとも似たような表現はできるが体験は提供できない。即応性に大きな差がでる。また、useTransitionではisPendingが用意されているががstartTransitionやuseDeferredValueでもisPendingを実装できることも確認できた。 startTransitionが柔軟で表現力が高く、isPendingが不要ならstartTransitionで表記が単純にになるとも言えるし、isPendingを保持する必要があるためhookにする必要が
デザインチーム内でJavaScript勉強会を開催した話 - 弁護士ドットコム株式会社 Creators’ blog
こんにちは。弁護士ドットコム デザイン部の林（@taka_piya ）です。普段は弁護士向けの業務システムのデザインをしています。 10月から3月まで週1回、デザイン部内でJavaScript勉強会を開催しました。この記事ではその具体的な内容と成果、振り返り、頂いたフィードバックをご紹介します。ぜひ社内勉強会のネタに！ JavaScript勉強会をはじめたきっかけ （1）作るプロトタイプの幅が広がる （2）漏れのないUI設計ができるようになる 勉強会の内容 基礎編 基本を一歩ずつ学ぶ 身近なお題を取り入れた演習をやる 周辺知識にも触れる 応用編 （１）Vue.jsの基本を学ぶ （2）作りたいミニアプリを構想から実装まで一人で作る 成果発表会 みんなのミニアプリを紹介 どのような成果が生まれたか 改善点 想定した期間より長くなってしまった 途中からレベル差が生まれてしまった 双方向のコミュニ
React コンポーネントの定義の仕方によって VSCode の定義元ジャンプの挙動が変わる - mizdra's blog
追記 (2024-05-13) この不具合は #57969 で修正されました。まだ Stable 版には入ってませんが、Nightly 版には既に取り込まれています。実際に TypeScript Playground で Nightly 版を使ってみたところ、コンポーネントを定義している箇所へワンクリックでジャンプできるようになっていました。 TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript この記事は「はてなエンジニア Advent Calendar 2022」の3日目の記事です。2日目は id:pokutuna さんの「Slack チャンネルのロボット帝国化を防ぐ feed-pruning-proxy」でした。 blog.pokutuna.com さて、TypeScr
React の API で、よくわからないしわかる必要性もあんまりない(かもしれない) React Hooks に useSyncExternalStore があります。Redux のように React 外で管理されているステートオブジェクトを React にインテグレートするためのフックということくらいは耳にしたことがあるのではないでしょうか。 そのフックの機能や使い方から主にステート管理ライブラリ開発者向けに用意されていると考えられます。ライブラリ開発者向け API ならアプリレイヤーの開発者には関係ないのではと思われるかもしれません。でも使い方を知っていれば、何か応用する案を思いつくこともあるでしょう。実際、 useSyncExternalStore はブラウザ API との統合にも使うことができるとドキュメントで紹介されています。 この記事では useSyncExternalSto
TanStack Query (react query) でパフォーマンス問題に遭遇したので解決してみた - Techtouch Developers Blog
テックタッチアドベントカレンダー 12 日目を担当する、フロントエンドエンジニアの taka です。 今回は TanStack Query を利用する上でパフォーマンスの問題に遭遇してしまったので、その内容について共有したいと思います。 tl;dr TanStack Query (react query) とは 遭遇したパフォーマンス問題 react query で再描画を抑制するためのポイント object rest destructuring を利用してはいけない プロパティ参照は描画中に行う selector を使って必要なデータのみを参照する おわりに tl;dr useQueryの返り値を非同期処理内で参照してしまっていたのが原因だった react query でパフォーマンス問題に陥らないために、useQuery を利用する際は以下のポイントを抑えておきましょう 返り値のobj
どうも、まさとらん（@0310lan）です！ 今回は、さまざまなWebサービスが提供する「.new」ドメインを用途別にカテゴライズしてご紹介します！ 例えば、Googleであれば「sheets.new」というドメインにアクセスすると、新規のスプレッドシートが作成できます。同じように、他のWebサービスにも多彩な「.new」ドメインが提供されています。Web開発やデザイン、ドキュメント作成など、さまざまなシーンで活用できるものばかりです。 その中でも、本記事ではなるべくログインせず、アクセスするだけで即座に起動できるWebサービスを厳選しています。 ご興味ある方は、ぜひ参考にしてください！ ■「js.new」でJavaScriptによるWeb開発をする！ 【 js.new 】 「js.new」もしくは「ts.new」とブラウザのアドレスバーに入力してアクセスすると、JavaScript /
こんにちは！株式会社 CastingONEの岡本です。 はじめに 弊社のアプリケーションのフロントは現在、Nuxt2 から React(Next.js)にリプレイスを行なっています。移行するにたり、ドラッグ＆ドロップのライブラリを探していたところdnd kitが良さそうということになったので、このライブラリを深く理解するため、社内で勉強会を開催を実施しました。今回は、その勉強会で使用したサンプルを基に、dnd kit の使い方について解説していきます！ dnd kit とは dnd kit は、React のための軽量かつ拡張可能なドラッグ&ドロップのツールキットです。主な特徴は以下の通りです。 豊富な機能 カスタマイズ可能な衝突検出アルゴリズム、複数のアクティベータ、ドラッグ可能なオーバーレイ、ドラッグハンドル、自動スクロール、制約などが含まれる React 専用 useDraggabl
tl;dr ブラウザで文字列を表示する場合画面幅に応じて自動で改行されることがあります。英文などは分かち書きされているためブラウザは単語の区切りなどで改行することができますが、和文は文節が明確ではなく単語の途中で改行されてしまうことがあります。 この記事では、ECMA402 の Intl.Segmenter を用いて和文を分かち書きし、ブラウザに改行可能箇所を教えることでより読みやすいレイアウトを目指します。 (2023/04/14 追記) NPM package として公開しました 🚀 背景 ラテン文字を使用する多くの言語では語と語が空白で区切られていますが(以降分かち書き)、通常、日本語や中国語は分かち書きされていません。 一般的なブラウザでは表示領域(横幅)に対して表示させたい文字列が一行に収まらない場合自動で改行するような挙動になっています。英語のように既に分かち書きされた文の場
こんにちは。ぬこすけです。 皆さんは React でフォームをライブラリを使わずに実装する時にどう実装しますか？ おそらく useState を使いまくっているのではないかと思います。 少し上級者の方は useReducer を使っているかもしれません。 が、そもそも React で状態管理することなくフォームは実装できます 。 実際にコードをお見せしながら紹介しましょう。 ※記事の最後に紹介した全てのコード例を CodeSandbox に載せています。 ありがちな例 コードをお見せする前に、まずはありがちな例から見たいと思います。 （結論のコードだけ知りたい方は読み飛ばして OK です） 簡易的なフォームの例です。 useState を使った実装は次のようになります。 import { useState, ChangeEventHandler, FormEventHandler } fr
Forms are a huge part of the web. Literally every interaction the user takes to make changes to backend data should use a form. Some forms are pretty simple, but in a real world scenario they get complicated quickly. You need to submit the form data the user entered, respond to server errors, validate the user input as they're typing (but not before they've blurred the input please), and sometimes
Stop Re-Rendering. TanStack DB, the Embedded Client Database for TanStack Query | TanStack Blog
Stop Re-Rendering. TanStack DB, the Embedded Client Database for TanStack Query by Kyle Mathews and Sam Willis on July 30, 2025. Your React dashboard shouldn't grind to a halt just because one TODO turns from ☐ to ☑. Yet every optimistic update still kicks off a cascade of re-renders, filters, useMemos and spinner flashes. If you’ve ever muttered “why is this still so hard in 2025?”, same. TanStac
React 18では、アプリケーションのレンダリング方法が根本的に変わる「concurrent（同時）」な機能が導入されました。これらの最新機能がアプリケーションのパフォーマンスにどのような影響を与えるかを探ってみましょう。 まずは、長いタスクと対応するパフォーマンスの測定について基本を理解しましょう。 メインスレッドと長いタスク ブラウザでJavaScriptを実行する際に、JavaScriptエンジンは「メインスレッド」と呼ばれるシングルスレッドの環境でコードを実行します。JavaScriptコードの実行だけでなく、メインスレッドはクリックやキーストロークなどのユーザーの操作、ネットワークイベントの処理、タイマーの実行、アニメーションの更新、ブラウザの再レイアウトや再描画の管理など、他のタスクも処理します。 メインスレッドはタスクを一つずつ処理します メインスレッドはタスクを一つずつ処
React Hook Form を使って、チェックボックスで1つ以上のチェックを必須とするフォームを作ってみよう - ANDPAD Tech Blog
この記事は ANDPAD Advent Calendar 2022 の 22日目の記事です。 はじめまして、私フロントエンドエンジニアのはつし（蓮子）と申します。盟友＆尊敬するマネージャーの櫻井賢司こと KJ からバトンを受け取り、22日目を担当させていただきます。slack上のニックネームは 824 で、メンションつける時は1秒で済むのがメリットです。あだ名を聞かれたら一応「はっちゃん」と呼ばれてましたと言うようにしていますが、ちゃん付けがとても似合わないスキンヘッド＆髭面なので、ヒゲおじさんとかでもOKです。 最近の趣味は、オフィスのある秋葉原で、路地裏の美味しいの食事処を探すことです。仲間募集中。 アンドパッドに2021年12月に入社して、ちょうど1年が経とうとしたタイミングでブログを書くことになったのは何かの縁なのかもしれません。そんな記念すべき日に何を書こうか悩みましたが、まずは
Next.js で next-themes と Tailwind CSS を使って Light/Dark モードを切り替える - Goodpatch Tech Blog
フロントエンドエンジニアの上垣です。 この記事では、Next.js で、next-themes と Tailwind CSS を使って Light/Dark モード切り替え対応する例を紹介しています。 github.com 前提 Tailwind CSS のダークモード Light/Dark モードの判定 Dark モードのスタイル next-themes インストール セットアップ 実行結果 Light/Dark モードの切り替え サンプルアプリケーション 感想 前提 この記事では下記のバージョンのライブラリを利用しています。 Next.js 13.4.12 next-themes 0.2.1 Tailwind CSS 3.3.2 Next.js の AppRouter を利用しています。 この記事で紹介するのは、「Light/Dark モードの切り替え」であり、Dark モード実装の詳
Compound Components In React — Smashing Magazine
A compound component is one of the advanced patterns of React which makes use of an interesting way to communicate the relationship between UI components and share implicit state by leveraging an explicit parent-child relationship. In this article, Ichoku Chinoso will show you one of the advanced patterns of React which is the compound component pattern. It’s an awesome method to build reusable co
この記事は 『React re-renders guide: everything, all at once』 の翻訳記事です。 ご本人( Nadia Makarevich さん)に許可をいただいて翻訳しています。 以下、翻訳記事となります。 React再レンダリングガイド: 一度に全て理解する Reactの再レンダリングを詳細に網羅したガイドです。 このガイドでは、次の内容を説明します。 再レンダリングとは何か？ 必要な再レンダリングと不要な再レンダリングとは何か？ 何がReactコンポーネントの再レンダリングをトリガーするのか？ また、以下の内容を含みます。 再レンダリングを防ぐための最も重要なパターン 不要な再レンダリングと、パフォーマンスの低下につながるアンチパターン すべてのパターンとアンチパターンには、図とコード例が付いています。 この記事のいくつかの章は動画でも見ることができ
JSer.info #632 - ブラウザ上でコード編集とプレビューができるSandpack 2.0がリリースされました。 Announcing Sandpack 2.0 and a Node.js runtime for any browser Sandpack 2.0では、Node.jsのコードをブラウザ上で実行できるNodeboxという機能が追加されています。 先週、APIとして利用できるようになったWebContainersと仕組みは似ています。 WebContainer API is here. Sandpackでは、厳密なNode.jsのエミュレートよりも、Node.jsで書かれたツールやアプリケーションの実行を目的としています。 また、SharedArrayBufferなどcross origin isolationな環境でしか使えないAPIを避けることで、色々な場所で動作す
はじめに 株式会社Awarefyというメンタルヘルス領域のスタートアップでフロントエンドを中心に担当している @nitaking です 2023年4月頃に構築したWEBサイトの構築した際の構成の経緯、技術選定、トラブルシューティングを備忘録として記録しておきます。 すぐ陳腐化する技術の世界なので（もう半年経って状況変わっているし）スナップショットとして活用ください。 また社内ドキュメントにもしてしまおうの趣旨なので、その点をご留意ください 時期 2023年4月頃、Next.js AppRouter(appDir)がbetaだった時期 背景 メインプロダクトはモバイルアプリ（Flutter） バックエンド通信はgRPC 全社的にクリーンアーキテクチャを導入 基本構成 React, TypeScript, Next.js React React・Next.jsの方向性にやや懐疑的な点もあったの
JSer.info #726 - Create React Appが非推奨となりました。 Sunsetting Create React App – React create-react-appは非推奨となり、Reactを使ったフレームワークやVite/Parcel/Rsbuildなどのビルドツールへの移行が推奨されています。 Deno 2.2がリリースされました。 Deno 2.2: OpenTelemetry, Lint Plugins, node:sqlite lintのビルトインルールの追加、JavaScriptで書けるLint Plugin APIの追加、deno taskがwildcard(*)指定に対応しています。 また、deno outdatedにinteractive modeを追加、deno compileの改善なども含まれています。 unstableな機能としてOpe
チュートリアル：三目並べ – React
このチュートリアルは、実践しながら学ぶことを好む方や、今すぐ何か具体的に動くものを作ってみたいと考えている方向けに設計されています。一歩ずつ概念を学びたい場合は、UI の記述から始めてください。 このチュートリアルはいくつかのセクションに分かれています。 チュートリアルのセットアップは、以下のチュートリアルを進めていく出発点です。 概要では、React の基礎であるコンポーネント、props、および state を学びます。 ゲームを完成させるでは、React 開発における最も一般的な手法を学びます。 タイムトラベルの追加では、React の独自の強みに関する深い洞察を得ることができます。 チュートリアルで作成するもの このチュートリアルでは、React を使ってインタラクティブな三目並べゲームを作成します。 完成したときにどのような見た目になるか、以下で確認できます。 import {
Honoでアイランドアーキテクチャを自前実装する
こんにちは。kobakenです。 従来、静的なHTMLをインタラクティブなHTMLにハイドレーションする場合、Next.js, Fresh, HonoX なり、フレームワークにお任せすると思います。 それが正解だと思いつつ、今回、Honoでアイランドアーキテクチャをお試し実装してみた感想を書きます。 わざわざ自前実装をしてみたキッカケは、Honoで小さなアプリケーションを作っている時に、shadcn/uiを利用したくなったのですが、これを動作させるにはハイドレーションが必要になったからです。 この解決のために、フレームワークを上乗せするのは大袈裟に感じられて、自前実装しました。（自前実装は大袈裟ではないのか？というツッコミもありそうですが、気にしないでください😀） 加えて、ガチャガチャ実装を進めていると、ハイドレーション技術はチューニングのしがいがあることに気づき、一度自前実装しておけば
【2026年版】ReactのUIコンポーネントライブラリ23選
【2026年版】ReactのUIコンポーネントライブラリ23選 ReactのUIコンポーネントライブラリは、Reactベースのソフトウェアアプリケーションやウェブサイトの優れたインターフェースを作成するのに役立ちます。 デザインの特徴や機能ごとにコードを記述することもできますが、UIコンポーネントライブラリを活用すれば、作業効率が高まります。 ボタンなどのデザインに必要なパーツを、ゼロから記述することなく使用することができます。 多くの時間と労力を劇的に削減できるだけでなく、より重要な課題への対策を検討し、イノベーションに取り組む機会を与えてくれます。 テーブルやマップのような基本機能、あるいはテーマのような高度なものを追加する際は、毎回、利用可能な選択肢から選ぶだけで、そのままデザインに適用することができます。 その結果、ソフトウェア開発プロセス全体が効率化され、より短い期間で質の高いア
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptを完全無料で学習できる最強の厳選コンテンツを大公開！ -
React コンポーネントの「制御・非制御」を意識しない方法
その処理、 setInterval じゃなくてブラウザが暇な時にやっちゃえば？
Jestのuiテストがつらすぎるので愚痴らせてください。そしてブラウザテストで本質的なuiテストをしよう
React でつくるフォーム UI の単体テストと TDD
<div/> のレンダリングから始める React 学び直し
Reactを読んでまほうの正体を（少し）理解する
【React】matchMedia で理解する useSyncExternalStore
「.new」ドメイン活用術！ログイン不要で即座に起動するWebサービスの厳選まとめ！ -
Reactのドラッグ＆ドロップライブラリ、dnd kitの使い方をユースケースから理解する
Intl.Segmenter で和文の改行をいい感じにしてみる
【React】フォームは状態管理せずに実装できるよ - Qiita
Improve the Performance of your React Forms
React 18によるアプリケーションのパフォーマンス向上について - Vercel
React再レンダリングガイド: 一度に全て理解する - Qiita
2023-02-20のJS: Sandpack 2.0、Safari 16.4 Beta、Reactドキュメンタリー
【Next.js】AppRouter beta時代の技術構成・選定・トラブルシューティングログ
2025-02-24のJS: Create React Appが非推奨に、Deno 2.2、Bun 1.2.3、ESLintのCSSサポート