その処理、 setInterval じゃなくてブラウザが暇な時にやっちゃえば？
こんにちは。ぬこすけです。 setInterval などで定期的にブラウザで実行させている処理があったりするでしょう。 例えば、定期的にアクセストークンが有効かチェックし、無効だったら新しいトークンを取得するなど。 ブラウザはページのコンテンツを表示するために JavaScript の実行や UI の更新で忙しいです。 もし定期実行している処理がコンテンツ表示にかかわらない優先度の低い処理なのであれば、 できるだけブラウザの重要なタスクに影響を与えないようにしたい ものです。 この記事では できるだけブラウザの重要なタスクに影響を与えずに定期的に処理を実行させる方法を、アクセストークンのローテーションを例に紹介 します。 実装する機能 この記事で実装する機能は次の通りです。 React の hooks を使って実装します。 ブラウザのアイドル中(暇なとき)にアクセストークンを有効かチェック
結局useMemoはいつ使えばいいの？ 僕の決定版 - Qiita
皆さんこんにちは。筆者の以前の記事では、ReactのuseMemoを無駄に使うことによるレンダリング速度のオーバーヘッドがどれくらいかをベンチマークによって示しました。 それによれば、スマートフォンを想定したとしても、useMemoだけで描画に目に見える影響を与える（16msくらいの遅延を発生させる）には万のオーダーのuseMemoが必要なことが分かります。 速度ではなくuseMemoを使うことによるメモリ消費量の増加を気にする声も聞かれましたが、すみませんが筆者はそこまでメモリクリティカルなアプリをReactで書いたことがなく知見に乏しいため、今回はこの記事の対象外となります。 この結果が出たことでuseMemoをいつ使うのかなどという議論には終止符が打たれたかと思いきや、上記の記事の感想などを見ているとまだ喧々囂々です。 そこで、この記事では筆者の考えを皆さんに共有し、いよいよもってこ
Astroで始める爆速個人サイト開発
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Reactのプロジェクトをカスタムドメインを使用してGitHubPagesで公開する方法 - Qiita
今回はReact(TypeScriptベースでも構いません)のプロジェクトをGitHubPageで公開する方法を記事にまとめたいと思います。 ※レンタルサーバーなどは利用しません。 ※この記事を読む前にドメインを取得しているとスムーズに進みます。（ステップ4） ※今回ドメインの取得はムームードメインにて行いました。 （別のサービスでも同様にできるかと思います） なぜこの記事を書こうとしたか 自分なりに色々と調べましたが、中々良い記事が見つからず、解決するまで約5日ほどかかってしまったからです。 また、日本語でReactのプロジェクトをGitHubPagesで公開するやり方をまとめた記事が少なかったことも理由となります。 早速始めましょう🔥 環境 Editor VSCode React 18.2.0 node 16.14.0 npm 8.7.0 yarn 1.22.17 MacOS Mon
フロントエンドで 良いコードを書くために
Keeping it simple: Cilium Mesh - networking for multi-cloud Kubernetes and beyond
Refineでココナラ法律相談管理画面を作り直した話
こんにちは。 ココナラ法律相談という弁護士の先生方と相談したい悩みのあるユーザーのマッチングサービスを担当しているエンジニアの高崎と申します。 法律相談開発チームでは、一般に公開されているユーザーの利便性向上はもちろんのこと、社内のメンバーが利用する管理画面への継続的な改善を行っています。 ココナラ法律相談開発チームでは、RefineというReactベースの管理画面構築用フレームワークを利用して、ココナラ法律相談の管理画面を効率よく再構築しました。 その結果リプレイス作業を通して様々なメリットがあったので、共有したいと思います。 リプレイスの背景 ココナラ法律相談は、2016年にリリースされ、サービス開始から早7年が経過しました。お陰様で順調にユーザー数を増やし、現在では全社の約10%の利益を生み出すサービスに成長することが出来ました。 引用: 2022年8月期通期決算説明資料 ビジネス面
React で作るゆっくり解説 feat. Remotion
export const FirstVideoConfig: VideoConfig = { sections: [ { title: 'イントロダクション', bgmSrc: '/audio/bgm/honobono-wartz.wav', backgroundVideo: '/video/cyber-bg.mp4', afterMovie: '/video/yukkuri-opening.mp4', talks: [ { text: 'ねえねえ魔理沙', speaker: 'reimu', id: '59f8c2cd81334be5ab5cdc7899fad286', audioDurationFrames: 25, }, { text: 'なんだ霊夢', speaker: 'marisa', id: '0ba332a465c3404a870de15cad021407', audioD
文化祭で滞在状況記録システムを運用しました
文化祭からはや 3 ヶ月。ずっと書きたいとは思っていたんですが、すぐ定期試験がやってきたり修学旅行に行ったりしてるうちにズルズル来てしまいました。このまま年を越すわけには行かないので、重い腰を上げて書き上げてしまおうと思います。 文章力が皆無なので読みづらい箇所があったらごめんなさい。質問等ございましたらお気軽にどうぞ！ 1. システム概要 感染症対策の一環として、主に各展示の同時滞在者数の抑制を目的として導入したシステムです。 文化祭への来場者全員にリストバンドを配布します。各リストバンドには個別の QR コードがプリントされており、各展示の入室時及び退室時に、展示のスタッフが Web アプリ上でスキャンを行い、来場者の入退室時間を記録します。 主な機能として以下が挙げられます。 同じ時間に同じ教室にいたのがどのリストバンドをつけていた来場者であるかが分かるため、万が一新型コロナウイルス
Next.jsで戻る厨を満たすrecoil-sync-next
以前、Next.jsのスクロール位置復元について記事を書きました。 上記記事でSPAとMPA(Multi Page Application)における、ブラウザバック/フォワード時のスクロール位置復元について言及しました。 MPAではスクロール位置がブラウザによって復元されることがある(ブラウザの実装に依存) SPAではこれらが軽視されがち Next.jsにおいても、デフォルトでは復元されない(ChromeでSSGページなど一部条件下では復元される) Next.jsではexperimental.scrollRestorationを有効にするとスクロール位置をsession storageに保存し復元する これらと同様に、ブラウザバック/フォワード時のUI復元についても軽視されがちなものの1つです。最近もこの手のUI体験の悪さについて、問題提起がされ話題になりました。 ブラウザバック/フォワー
個人開発してるサービスをExpressからNext.jsにしたり、BusBoyを使った話しなど - maru source
2017年から個人で開発しているTrickleというサービスがある。最近、これのバックエンド構成を変えたり、新機能追加などをした。技術的に目新しいものや凄いものはないけど、頑張ったのでその時の話を残しておく。 バックエンド Express → Next.js Multer → BusBoy Web版 GAE → Cloud Run クライアントアプリ React Nativeのアップグレード react-native-image-crop-picker → react-native-image-picker ソーシャルログイン アイコン変更 バックエンド Express → Next.js これまではExpressでモバイルアプリ向けのWeb APIを作っていたが、今回Web版も作るにあたり、Next.jsに移行した。 まずはこれまでのモバイルアプリ向けAPIをNext.jsのAPI Ro
非同期処理に疲れた方に、ReactQueryの処方箋
この記事について 本記事は、下記のReactQuery公式ドキュメントの内容をベースに、自分なりに噛み砕いてまとめたものになります。 ReactQuery公式ドキュメント サンプルコードの一部は公式サイトから引用しています。 前置き 【呼称について】 ReactQueryはSolidやVue、Svelteへの対応を進めており、現在の正式な名称はTanStackQueryになっています。 ReactQueryの方が耳馴染みのある方も多いため、この記事では、ReactQueryと呼ぶことにします。 【内部実装のイメージについて】 以下、「内部実装のイメージ」となっているアコーディオンの箇所は、ReactQueryの内部実装が実際にそうなっているということではなく、 「こういうふうなコードをイメージすると理解しやすそう」という意図で書いています。 基本的には読み飛ばしていただいても大丈夫な箇所で
Container Componentに書いていたlogicをCustom Hooksに書いてみる
はじめに みなさんは、Reactを使用して開発する時、Componentで使用するlogicをどこに実装していますか？ 私はComponentをContainer ComponentとPresentational Componentの二つに分けて、Container Componentにlogicを書いてました。 しかし、Custom Hooksを使用することでわざわざComponentを分けなくても良い、ということを最近知りました。 本記事は、それを実践してみよう、というものです。 まず用語を簡単に確認してから、サンプルコードを用いてCustom Hooksを実装していきたいと思います。 Container Componentとは Dan Abramov氏のブログから引用します。 You’ll find your components much easier to reuse and r
【保存版】「そのuseEffectの使い方あってる？」と言われる前に
参考 目的 プロジェクトで使用されている不適切なuseEffectを減らす 本題 Reactの公式ドキュメントにuseEffectは必要ないかもしれない，というようなページがありとても勉強になったので記事にしようと思いました． データフェッチング アプリのデータフェッチングをuseEffect内で行うのはよく知られている方法です． Bad 💣 function SearchResults({ query }) { const [results, setResults] = useState([]); const [page, setPage] = useState(1); useEffect(() => { // 🔴 Avoid: クリーンアップなしでのフェッチング fetchResults(query, page).then(json => { setResults(json); }
Next.jsのスタンドアロンモードでビルドしたイメージを Cloud Run へデプロイする
module.exports = { - experimental: { - outputStandalone: true, - }, + output: 'standalone', } Next.js の experimental features のひとつに、スタンドアロンモードがあります。 通常モードでは、本番リリース可能なビルドを用意する場合、yarn build による .next/ ディレクトリとあわせて node_modules も含めます。依存関係を解決するために必要ですね。一方スタンドアロンモードを有効にした上で yarn build するとビルド結果が異なります。.next/ディレクトリが作られる点は同じですが、そこにstandaloneディレクトリが追加されます。ここにはアプリを動かすためのファイルが依存関係も含めてすべて入っていて、.next/standalone/
Next.js に Service層 を導入する
本稿は、Next.js で「getServerSideProps や API Routes」を利用するアプリケーション向け内容になります。重厚な作りになるので、要件に適合する・しないはあると思いますので、あしからず。 Next.js は薄いフレームワーク Next.js は SPA 配信の最適化にフォーカスしており、Backend の機能面が十分とは言えません。pages の Page コンポーネントや API Routes は、controller としての機能を提供するのみです。ドキュメントを見てもわかるとおり、一連処理はあらかじめ middleware やラッパー関数を用意するのが常套手段かと思います。 NestJS にあるような Service 層が欲しい Node.js Backend フレームワークとして、NestJS は有力な候補かと思います。レイヤーやモジュール・DI の構
React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita
Reactが好きです。 Reactが好きです。コンポーネントを関数として扱うのが好きです。 SolidJSはReactそっくりの書き心地(DX)を保ちつつ、Reactに足りない要素を兼ね備えた期待の新人です。 コードの比較 React const Counter = () => { const [count, setCount] = useState(0) useEffect(() => { console.log(`Count: ${count}`) }, [count]) return ( <div> <div>{count}</div> <button onClick={() => setCount(prev => prev + 1)}>Add</button> </div> ) } const Counter = () => { const [count, setCount] =
Next.jsアプリのローカライゼーション | POSTD
クイックサマリー ‐ 国際化ルーティングは、厳密にはNext.jsの新機能ではありません。（v.10以降搭載されています。）この記事では、この機能のメリットだけではなく、こうした機能を利用して最高のユーザ体験と円滑な開発者体験を実現する方法についても見ていきます。自己文書化コードやバンドルサイズの削減、さらにはランタイムエラーではなくコンパイル時エラーに興味のある方は、是非このまま読み進めてください。 開発中のアプリにおいて、ロケール（または国、あるいは両方）ごとにルートを設定したい場合、Next.jsで簡単に対応できるようになりました。プロジェクトのrootディレクトリにnext.config.jsがない場合、新たに作成してください。このスニペットからコピーしても構いません。 /** @type {import('next').NextConfig} */ module.exports
Reactのベストプラクティスとコード削減パターン - パート1
本記事は React best practices and patterns to reduce code を提供元の事前許可を得たうえで翻訳したものです。 元の記事に従いタイトルに「ベストプラクティス」と含んでいますが、実際にはベストプラクティスは規模や状況によって大きく異なります。 チームの状況にあわせて参考にしていただければと思います。 ===== これは全3パート中の第1パートとなる記事です。 パート1（この記事）パート2パート3 私は数年に渡っていくつかのプロジェクトで、React.jsを使った取り組みに参加してきました。様々なプロジェクトに取り組む中でいくつかの共通するパターンを見出したため本ブログでご紹介いたします。それではいきましょう。 1. reduxのactionsとdispatcherのためにカスタムフックを作成する私はreduxを使うことを好んではいませんが、いくつ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Visual testing & review for web user interfaces
Next.js の「next start・next dev」挙動差分一覧
