Next.jsにおけるenvのベストプラクティス
Next.js で env をうまく扱うために僕がよく使う手法を紹介します。 Next.js がサポートしている env の扱い Next.js はデフォルトで大きく 2 つの方法で env をサポートしています。 .env ファイルの読み込み next.config.js の env キーに記述する .env ファイルの読み込み Next.js は .env ファイルを配置することで process.env に読み込む機能をデフォルトでサポートしています。なのでプロジェクトのルートに、以下のようなファイルを配置してください。
JavaScriptの ~. 構文って知ってる？ Promise Pipeliningが拓く非同期処理の未来 - Qiita
JavaScriptの ~. 構文って知ってる？ Promise Pipeliningが拓く非同期処理の未来JavaScriptECMAScript PromiseはES2015からJavaScriptに導入された機能で、非同期処理をいい感じに記述できるたいへんありがたいオブジェクトです。実は、Promiseの強化版ともいえる新機能、その名もHandledPromiseが提案されています。また、このHandledPromiseのための新構文~.も同時に提案されています。 例えば、~.を用いて次のようなプログラムを書くことができます。 この記事では、HandledPromiseと~.について概説します。例によって、これらはStage 1プロポーザルです。つまり、「こういうのがあってもいいんじゃない？」と思われている段階であり、具体的な方向性とかは何一つ決まっていないということです。この記事で
Next.js 12について本気出して和訳してみた Next.js 12がリリースされました！！！🎉 公式ページは英語となっておりますので、Next.js 12の内容を和訳していきます。 公式ページは以下となっております。 英語が苦手な方はこの記事を参考にしてください！！！ ※本記事で使用している画像は公式ページのものです。 Next.js 12 2021年10月27日(水) Next.js Confで発表したように、Next.js 12は過去最大のリリースとなります。 Rustコンパイラー: Fast Refreshが3倍、そしてビルドが5倍速くなりました。 ミドルウェア(beta): Next.jsの柔軟性を高めるために、設定よりもコードを優先します。 React 18のサポート: ネイティブのNext.jsのAPIがサポートされ、サスペンスもサポートされています。 <Image /
ヌルヌル動くReactコンポーネントの作り方【入門】 - カミナシ エンジニアブログ
こんにちは、カミナシの浦岡です。 最近、弊社のメンバーとしてUIデザイナーが新たに加わり、プロダクトのUI改善を進めています。 以前は、AntDesignなどUIライブラリーのコンポーネントをそのままプロダクトで使用する機会が多かったのですが、UI改善を行う上で、UIライブラリーそのままでは要件を満たすことが困難なケースも出てきました。 その結果、独自のReactコンポーネントを実装する機会が増えているのですが、 この記事では、その独自コンポーネントを「ヌルヌル動く」仕上がりにするために気をつけている点を架空の題材を使って書きます。 題材 今回、「空を舞うカレンダー」（ペルソナ５風!?）のUIがデザイナーから提示されたと仮定して進めます。 極端な題材ですが、UIライブラリのカレンダーをベースには実現できそうにないので、独自コンポーネントとして作りましょう！ 先に、ヌルヌル動かす上で気をつけ
私が働いているAniqueという会社では、1年前に全てのソフトウェアでTypescriptを採用することにしました。私たちが開発している進撃の巨人のNFTサービス “Attack on Titan: Legacy” でも採用しています。 TypescriptではNestJSという素晴らしいAPIフレームワークを利用することができ、生産性高く開発を続けることができます。また、私たちはフロントエンドでNext.jsを利用しています。言語レベルでのコンテキストスイッチを抑えることで、一人のエンジニアがフロントエンドとバックエンドのどちらもの機能を開発する環境が作れました。 しかし、Nodeならではの作法や設計について、Web上にはたくさんの情報があるものの、あまりにも情報が多すぎて、まとまったプラクティスになかなか出会うことができませんでした。そのため、最初はチーム内での共通認識を作るのに苦労し
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは。今期から Web フロントエンド領域で黒帯を務めることになりました伊藤（@koh110）です。 普段は情報システム本部に所属しチャットなど内製基盤の開発・運用をしつつ、Node.js 言語サポートチームとしてサーバサイド TypeScript の活用や、SSR（Server Side Rendering）、BFF（Backends For Frontends）のチューニング支援なども行っています。 ヤフーには Node.js と JavaScript の言語サポートチームがあります。Node.js サポートチームは主にバックエンドとして、JavaScript サポートチームはフロントエンドとして、それぞれ JavaSc
Vue.jsアプリケーション用のインタラクティブなアニメーションを簡単に実装できるコンポーネントを紹介します。 アニメーションはユーザーの操作をトリガーに動作し、マウスをはじめ、スクロール、ジェスチャー、ジャイロスコープ、オーディオもサポートしています。
フルスタック Web フレームワーク HonoX を使ってみる 2024.02.10 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。Hono が提供するサーバーサイドやクライアントサイドの機能を使いつつ、ファイルベースルーティングや Islands Architecture などの新しい機能を使うことができます。 HonoX は 2024 年 2 月現在アルファステージとなっています。セマンティックバージョンに従わずに破壊的な変更が行われる可能性があります。 HonoX は Hono と Vite をベースにしたフルスタック Web フレームワークです。以下のような特徴があります。 ファイルベースのルーティング 高速な SSR BYOR（Bring Your Own Rerender）：レンダリングエンジンを自由に選択できます island
Tailwind UI - Official Tailwind CSS Components & Templates
Build your next idea even faster.Beautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.
JavaScript の非同期処理は非常に難しく、その難しさの原因は「制御の流れ」が掴みづらいことにあります。 この本では非同期処理を理解するために必要な概念であり、仕組みでもあるイベントループでプロミスチェーンの処理がどのように行われるかをクイズ形式で学ぶことによって、非同期処理の「制御の流れ」を掴めるように訓練します。 知識面については中枢となるイベントループの機構から、実行環境と API、async/await や Promise.all などの一通りの範囲を学習し、最終的には並列化や順序づけて反復処理を行うための制御方法と TypeScript での型注釈までを網羅します。
Next.js 12
As we announced at Next.js Conf, Next.js 12 is our biggest release ever: Rust Compiler: ~3x faster Fast Refresh and ~5x faster builds Middleware (beta): Enabling full flexibility in Next.js with code over configuration React 18 Support: Native Next.js APIs are now supported, as well as Suspense <Image /> AVIF Support: Opt-in for 20% smaller images Bot-aware ISR Fallback: Optimized SEO for web craw
Web制作者が知っておくと便利なCSSの小ネタ
CSSの進化はすごいですね🚀 一昔前はJavaScriptが必要だったり、トリッキーなCSSで記述しないとできなかったことが、1行もしくは数行のCSSで簡単に実装できるようになりました。 Web制作者が知っておくと便利なCSSの小ネタを紹介します。 CSS Tips by Marko Denic 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スムーズなスクロールはたった1行のCSSで CSSだけでテキストを省略 複数行のテキストも省略できます 水平と垂直方向のすべてに中央揃え 影を画像のコンテンツのみに与える CSSでカーソルをSVGに変更 CSSだけでタイピングのエフェクト テキストのハイライトカラーを変更 どんな要素でもサイズを変更 CSSで実装するモーダル サイズ指定にcalc()関数が便利 空の要素をスタイ
なんでbun installは速いのか？
⚡️ 25x faster — Switch from npm install to bun install in any Node.js project to make your installations up to 25x faster. https://bun.sh/docs/cli/install という記述を見かけて直感的に、そうはならんやろと思ったものの実際にベンチマークをしているのでどういうことなのかを気になって調べた。 A global install cache. bun installを実行すると ~/.bun/install/cache/ 以下にnpmレジストリからダウンロードされたファイルの実体が展開されキャッシュされる(--cache-dirでパスを変更できる)。 キャッシュにはパッケージのバージョンごとのディレクトリとlatestのシンボリックリンクがある。こ
同じUIコンポーネントをCSSで静的に、Vue.jsやプレーンのJavaScriptで動的に実装する -Tailwind Starter Kit
最近のWebページやスマホアプリのUIでよく使用されるさまざまなコンポーネントをCSSで静的に、Vue.jsやReact.jsやプレーンのJavaScriptで動的に実装するためのコードをまとめたTailwind Starter Kitを紹介します。 CSSは分かるけど、Vue.jsやReact.jsは苦手という人にもよいと思います。 Tailwind Starter Kit Tailwind Starter Kit -GitHub Tailwind Starter Kitの特徴 Tailwind Starter Kitのデモ Tailwind Starter Kitの使い方 Tailwind Starter Kitの特徴 Tailwind Starter Kitは、WebページやスマホアプリのUIに使用するさまざまな静的・動的コンポーネントをTailwindCSSを使って簡単に実装できま
QuickJS Javascript Engine
News 2021-03-27: New release (Changelog) 2020-11-08: New release (Changelog) 2020-09-06: New release (Changelog) Official GitHub mirror at https://github.com/bellard/quickjs Introduction QuickJS is a small and embeddable Javascript engine. It supports the ES2020 specification including modules, asynchronous generators, proxies and BigInt. It optionally supports mathematical extensions such as big
先月、Node.jsバージョン14がリリースされたこともあり、改めて最新のJavaScriptの書き方を調べてみました。その中でも特に便利だと感じたJavaScriptの書き方や普段の開発でよく利用している記法をまとめています。 アロー関数式 アロー関数式は関数を定義するための構文です。function式よりもアロー関数式の方が記述が短いので読みやすくなります。また、function式で度々問題になるthisが固定されるので混乱を避けることができます。メソッドでない関数はアロー関数式で定義するのがよいと思います。 function式 function name(arg) { return 'foo'; } アロー関数式 const name = (arg) => { return 'foo'; }; async/await async/awaitは非同期処理の構文です。また、asyncは非
![[2020年版] JavaScriptの便利な書き方まとめ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/c6082d053d0b1940e3a9c4d81bf031a09b51ab0c/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2020%2F04%2Fjavascript.png)
若者とプログラミングをしていて非常にショックを受けたのだが「JavaScript 配列 重複 削除」で検索するとfilterとindexOfを使ったアルゴリズムが検索結果上位に出てくる。これはO(N^2)。計算量の概念がないというのはとても恐ろしい。Big Techがアルゴリズム偏重の試験を課すのは合理的だと確信した。 — 父🌒 (@fushiroyama) March 10, 2020 先日このようなツイートが流れてきたので、$O(N^2)$、つまり計算量が $N^2$ に比例するということの恐ろしさを簡単に書きます。 JavaScriptで配列から重複を排除するコード EcmaScript 2015から導入されたSetを使えばものすごく簡単に書けます。 const array1 = [1, 5, 3, 1, 5, 3]; const array2 = Array.from(new S
mutexの桝田です！ Reactのデータフェッチに、Vercel社が提供する「SWR」やTanStackコミュニティが提供する「React Query（TanStack Query）」が使われることが多くなってきています。 これらのライブラリは単なるフェッチだけでなく、キャッシュやデータの更新を担ってくれます。また、Reactが志向する「宣言的」な記述を体現できることも大きなメリットです。 本稿では、（我々が採用する）React Queryにフォーカスし、React Queryを使って実現している状態管理について説明します。SWRを普段お使いの方に関してもかなり共通する部分が多いのではないかと思います。 1. 対象読者 Reactのデータフェッチライブラリの使用を検討している方 普段SWRやReact Queryを使用している方 普段Reactを使用するすべての方
Qiita Night 〜フロントエンド〜 で発表した資料です
jQuery <=> JavaScript全書き換え一覧ではありません jQueryで書いていたコードをvanilla(素のJavaScript)に書き換えたいけど書き方がわからなくて調べ方もピンとこない状態の自分がこれを見ることができたらきっと嬉しいと思ったのでここに供養します。 脳の記憶容量が8バイトくらいしかないので今でもシンプルにJavaScriptの書き方をページ内検索して使ったりしています。 /*----------------------------------- セレクター ------------------------------------*/ //html $("html") document.documentElement; //body $("body") document.body; //id $("#hoge"); document.getElementBy
パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll
Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc
TL;DR 本記事で紹介するのは、Redux や React Router を使った React アプリケーション構築時のベストプラクティスを Next.js に適用した考え方です。 Next.js を外部モジュールと考え、Container/Presentation の Container を Adapter 層と見なす考え方 next/router などの Next.js の組み込みモジュール、Store、SWR（React Query） は Container（Pages） 層で利用する Storybook でコンポーネントを表示する際、Next.js 等のモックをできるだけ作らない 但し、Template 層以下の next/link や next/image への依存は制御できない なお本記事では、Next.js の依存層、Pages 層とTemplate 層という言葉は以下のこ
styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita
styled-components 画像は styled-components ツライっていう顔です。 Angularのようにスタイリングまで面倒を見てくれるUIフレームワークならまだしも、Reactの場合はコンポーネントのスタイリング方法も自身で選択しなければいけません。CSSのスタイリング方法/設計はいくつか存在しますが、どれも一長一短で、やはり銀の弾丸は存在しません。スタイリング方法を選択可能なUIフレームワークは、この混沌とした選択肢の中から価値を見出す必要があるわけです。 僕はBEMによる人力CSS管理（Sass/Less/Stylus）から、 { fontSize: 14 } のようなJSオブジェクト形式のCSS in JS、 styled-components のようなTemplate Stringsを利用したCSS in JS、そしてCSS Modulesまで幅広く公私とも
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
Stripe & Next.js + AWS Amplify で会員 + 定期課金機能 / JP_Stripes20210903
追記) v10.2からデフォルトでGoogle Fontsの最適化が行われるように Next.js v10.2から自動でWebフォントの最適化が行われるようになりました。v10.2時点ではGoogle Fontsにのみ対応しているとのことです。特に設定は不要で、いつも通りGoogle Fontsを読み込めばOKです。 ↓ 詳細 これより下の解説は古い内容になります。実装の参考にしないようお願いします。 以前、Next.jsのリポジトリを眺めていたときにFont Optimizationsというプルリクエストを見つけました。 2020年12月時点ではExperimantalな機能のようですが、v10.0.4で既に使えるようになっていたので試してみました。 :::message alertz Next.js v10.0.4でのドキュメントに則っていない記録になります。 ::: Font Opt
PySpa統合思念体です。あと、 @yosuke_furukawa にも協力いただきました。 基本的に、あまりエラーの種別を細かく判定してあげることはJavaScriptでは今までやってこなかったのですが、ちょっとしたメタデータを乗っけてあげるとか（例えばリトライ回数）、何か凝ったことをしたくなったらこういう方針でやればいいのでは、という試行錯誤録です。 エラーと例外の区別が必要か この手の話になると、エラーと例外の違いとか、こっちはハンドリングするもの、こっちはOSにそのまま流すものとかいろんな議論が出てきます。このエントリーではエラーも例外も差をつけずに、全部例外とひっくるめて説明します。 例外というのはすべて、何かしらのリカバリーを考える必要があります。 ちょっとしたネットワークのエラーなので、3回ぐらいはリトライしてみる 原因: ネットワークエラー リカバリー: リトライ サーバー
The new wave of React state managementUnderstand the core problems state management libraries need to solve. And how the proliferation of modern libraries address them in new ways. IntroductionAs React applications grow in size and complexity, managing shared global state is challenging. The general advice is to only reach for global state management solutions when needed. This post will flesh out
Node.jsのメモリ制限 (2024年版)
Node.jsのメモリ制限については以下の記事に記述があります。 しかし、現在の挙動はやや異なるようです。 結論から言うと デフォルトでは、システム (cgroup等) から取得した制限があればそれがそのまま設定、そうでなければ32bit環境では700MiB, 64bit環境では1400MiBの制限が設定されます。 V8のメモリ制限 Node.jsはJavaScriptエンジンとしてV8を利用しています。 V8のGCは世代別GCになっています。ほとんどのオブジェクトは生成されてすぐに不要となるため、メモリ使用量にはそれほど貢献しません。メモリ使用量に貢献するような長命なオブジェクトは、数回のGCを生き抜いた後old generation領域に移されます。したがって、V8のメモリ使用量の制限は実質的にこのold generation領域のサイズ制限によって決まると考えてよいでしょう。 このo
私も年を取ったと感じるのは、今年Reactが10年目を迎えたからです。 混乱していた開発コミュニティにReactが初めて紹介されてから10年、以来いくつもの進化を遂げてきました。Reactチームは、急進的な改革ということに関しては躊躇しませんでした。問題に対して、より良い解決策が見つかれば、それを実行してきました。 数か月前、Reactチームは最新のパラダイム・シフトであるReact Server Componentsを発表しました。史上初めて、Reactコンポーネントがサーバーでのみ実行できるようになったのです。 このことに関連してオンライン上では、きわめて大きな混乱が起きています。それが何なのか、どのように機能するのか、利点は何か、そしてSSR（Server Side Rendering）などとどのように連携するのか、多くの人が多くの疑問を抱いています。 私はReact Server
2023 年 4 月 18 日にリリースされた Node.js v20 の主な変更点を紹介します。 nodejs.org ファイルのアクセスやプロセスの起動を制限する新しいパーミッションモデル (experimental) --allow-fs-read でファイルの読み込みを許可する --allow-fs-write によるファイル書き込み許可 --allow-child-process による child_process の許可 --allow-worker による Worker Threads の許可 Permission Model の参考記事 V8 11.3 による新しい JavaScript の機能 テストランナー（node:test）が stable に昇格 Single Executable Application JSON の config を使った Blob が必要に
Vanta.js - 3D & WebGL Background Animations For Your Website
Why? Can interact with mouse / touch Customize colors & style to match your brand No pixelation – Canvas runs at full resolution Smaller filesize than background videos and large background images – three.js is ~120kb minified and gzipped Runs fast (60fps) on most laptops/desktops What's the catch? Some WebGL effects are slow on older computers. Don't use more than one or two in a single page! Not
WinBox is a modern HTML5 window manager for the web. Lightweight, outstanding performance, no dependencies, fully customizable, free and open source! Please feel free to support me by making a personal donation which helps me a lot to keep this project alive and also to providing all the contribution to keep WinBox.js on a professional top-end level. Thanks a lot, Thomas (ts-thomas) Load Library (
カルーセルやスライダーをHTMLとCSSだけで実装するテクニックを紹介します。 Flexboxでの横一列配置をはじめ、scroll-snap-typeやscroll-behaviorでスライドのスクロールの挙動を調整でき、自動再生機能もCSSのみで実装できます。 CSS-Only Carousel 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カルーセルをCSSのみで実装するテクニックのまとめ カルーセルやスライドを実装する時、HTMLとCSSだけでどれだけのものが実装できるか知るとあなたは驚くかもしれません。以前に紹介したHTMLとCSSで実装するスライダーを見てましょう。 実装のポイントは、下記の通りです。 スライダーの各パネルは、Flexboxで横一列に設定します。 パネルを1つだけ表示するにはオーバーフローを使用し、-
Enterキーを押すとtextareaのスクロール位置がずれる問題 ふとZennのスクラップのエディターで、Enterキーを押すと、カーソルのあたっている部分のスクロール位置がガタっとずれる問題が発生することに気づきました。 Enterキーを押したタイミングでカーソルの位置がviewportの先頭もしくは末尾にジャンプするようなイメージです。 もう少し調べてみると、Chromeでは問題が発生するものの、FirefoxやSafariでは問題が再現できませんでした。 とりあえずautosize textareaを疑う スクラップのエディターではtextareaの高さがテキストの長さに応じて変わるreact-textarea-autosizeを使っています。最初はこのパッケージを疑ったのですが、HTMLの<textarea>タグに書き換えても問題は解消しませんでした。 Reactのcursor
最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js
マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作している感があって面白いです。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力です。 ScrollMovie.js ScrollMovie.js -GitHub ScrollMovie.jsの特徴 ScrollMovie.jsのデモ ScrollMovie.jsの使い方 ScrollMovie.jsの特徴 ScrollMovie.jsは、ウィンドウをスクロールするときに背景画像をアニメーション化できるバニラJavaScriptのライブラリ
const obj = { hoge: [new Date(2023, 3, 12), 1], fuga: 'foo' }; const objClone = structuredClone(obj); // ディープコピー obj.hoge[1] = 10; console.log(objClone.hoge[1]); // 1 objClone.hoge[0].setFullYear(2050); console.log(obj.hoge[0].getFullYear()); // 2023
ウェブ業界の当たり前だと思っていることでも、同業他社の人には違う常識があるかもしれません。自分が業界多数の傾向と違うところはどこなのか・・・ この連載ではアンケートデータから国内のウェブ業界の傾向を分析します。 連載第5回目となる本記事ではウェブ業界の「フロントエンドエンジニアにとっての2019年」と題してアンケート結果を紹介します。 JSでブラウザ挙動をどうやって防ぐ？ ウェブページでインタラクションを作るときに、ブラウザのデフォルト挙動が邪魔になることがあります。たとえば、aタグのリンクはJavaScriptでキャンセルでき、自前の処理に置き換えることができます。 ブラウザ挙動のキャンセルのやり方にはさまざまな手段があるのですが、主流のやり方はどれでしょうか？ addEventListener()メソッドやonclick属性のイベントについて質問しました。 187票の回答があり「ret
JSer.infoで紹介したサイトのデータをドメイン別で一覧できるサイトを作りました。 JSer.info Watch List JSer.info Watch Listは、次の条件でサイトをドメイン別(または作者別)で一覧できます。 JSer.infoで2年以内に紹介したことがあるサイトが対象 紹介した回数順 GitHubやAmazonなど一部特殊なものは除外 JSer.infoを更新するたびにこのリストも更新されます。 そのため、鮮度を保ちつつ、JavaScriptの情報源となるサイトが一覧できるようになっています。 また、タグでの絞り込みもできるようになっているので、興味があるトピックのサイトやブログなどを調べてみるといいかも知れません。 https://t.co/CXy3hOXJ8q のデータを使ったJavaScript情報源リスト タグでの絞り込みができるようになった。 "per
はじめに Next.jsで一番最初の詰まりどころと言えば、「CSR/SSR/SSG/ISRとあるけどデータ取得はどのやり方でやれば良いか」という点ではないでしょうか。 自分の中でようやくこの辺りの整理ができたので、この記事ではCSR/SSR/SSG/ISRとは何ぞやというところからそれぞれの使い分けについて書いていこうと思います。 CSR/SSR/SSG/ISRとは CSRとは CSRはClient Side Renderingの略で、日本語に訳すとクライアント側でのレンダリングです。 CSRではクライアントのリクエストに対して空のHTMLとJSを返し、クライアント側でJSを実行してレンダリング、及びデータ取得を行います。 Reactのみを使ってSPAを作る場合にuseEffectの中でデータをfetchして結果をuseStateに渡して表示するというお馴染みのやり方です。 全てがクライア
ビジュアルリグレッションテストツール４選！ユーザーが語る各ツールのメリット https://trident-qa.connpass.com/event/308664/ X https://twitter.com/__sakito__
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js 12について本気出して和訳してみた
“Tao of Node - Design, Architecture & Best Practices” 日本語翻訳
ヤフーのフロントエンドと Node.js の関係性
便利なのが登場！Vue.jsでインタラクティブなアニメーションを簡単に実装できる軽量コンポーネント -Kinesis
フルスタック Web フレームワーク HonoX を使ってみる
イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
[2020年版] JavaScriptの便利な書き方まとめ | DevelopersIO
JavaScriptで重複排除を自分で実装してはいけない（Setを使う） - Qiita
【脱Redux】SWRやReact Queryを使った状態管理戦略
これだけは押さえておきたい ES2022の便利機能
【脱jQuery】jQuery <=> vanillaJS 書き換え集
Next.jsに「できるだけ」依存しないReactアプリケーションの構成
Next.jsのFont Optimizations（Webフォントの最適化）を試してみる
JavaScript/TypeScriptの例外ハンドリング戦略を考える - Qiita
The new wave of React state management
React Server Componentsを理解する | POSTD
Node.js v20 の主な変更点 - 別にしんどくないブログ
WinBox - HTML5 window manager
HTMLとCSSだけでカルーセル・スライダーを実装するテクニックのまとめ
【Chrome】textareaの改行時にカーソル位置がガタっとずれる問題の対処法
オブジェクトのクローンにJSON化を使う時代は終わった！【JavaScript】 - Qiita
フロントエンドエンジニアにとっての2019年。アンケート結果から分析するイマドキのウェブ制作 - ICS MEDIA
JavaScript情報の情報源となっているサイトの一覧を作った
もう迷わないNext.jsのCSR/SSR/SSG/ISR
Storybookの実力をフル活用するChromatic