パフォーマンス・チューニングには、「こうすれば必ず上手くいく」という方法論や銀の弾丸はなく、地道に試行と計測を繰り返すしかない。 しかしだからこそ、基本的な考え方や仕組みを理解することが大切であり、それがなければ、どのように対処していけばいいのか見当をつけることすら出来ず、的外れな対応をすることにもなりかねない。 React.memoを使った処理の最適化は、React アプリのパフォーマンス改善のための、基本となるテクニックのひとつである。 この記事のコードは React のv16.10.2で動作確認している。 メモ化という概念 React アプリのパフォーマンス最適化を理解するためにはまず、メモ化（Memoization）という概念を把握しておく必要がある。 大雑把に言ってしまうとメモ化とは、何らかの計算によって得られた値を記録しておき、その値が再度必要になったときに、再計算することなく

はじめに 普段はスタートアップでBtoB SaaSの開発をしているtaroと申します。 今回は、Reactのmemo化について考えている中で抱いた 「なんでReactは標準でComponentをmemo化していないんだろう？」 という疑問を解消するために、色々と調べたり考えたりした内容をまとめました！ 途中でrenderのタイミングや、memo化で再renderが抑えられる理由などの前提知識の復習も含めていて、memo化について詳しくない方もmemo化の勉強にもなると思うので、ぜひぜひ読んでみてくださいー！ なぜこんな疑問を抱いたのか？ まずはそもそも僕がタイトルにあるような疑問を抱いた背景です。 疑問を抱くまでの思考プロセスはこんな感じです。 「再renderが余分に走ってて画面が重いから最適化したいなー」 →「React.memo()を使ってComponentをmemo化しよう！」 →

【TypeScript】useContextとuseStateを組み合わせて、子孫コンポーネントから直接先祖コンポーネントのstateを編集するTypeScriptReactreacthooks 実務でReactをいろいろ経験させてもらってから、ようやくReact Hooksの便利さに気づき始めたラスカルです。こんにちは。 今回は、タイトルの通りではあるのですが、useContextとuseStateを組み合わせることで、子孫コンポーネントから、propsのバケツリレーをせずに先祖コンポーネントのstateを更新する実装をTypeScriptで実装したいと思います。 （強調したのは、jsでの実装はあるもののtsでの実装がすぐに見つからなかったからです😩） 前提条件 import React, { useState } from 'react' //親コンポーネント const Paren

こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Stateのアーキテクチャ」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ！ この記事では、今わたしが開発・運用しているアプリケーションのState戦略についてご紹介していきます。 全体像 アプリケーションに存在する状態（State）を以下の3種類に分類し、それぞれのやり方で管理しています。 サーバーデータのキャッシュ Global State Local State 1. サーバーデータのキャッシュ 「SPAで管理する必要のあるGlobal Stateって、そのうちほとんどがサーバーデータのキャッシュだよね。それを取り除けたら、管理する必要のあるGlobal Stateってすごく小さくなるんじゃない？」という主張を私が認識しはじめたのが2020年の初旬でした。おそらく

Next.js 13が発表されましたね！ この記事ではNext.jsの開発方法が大きく変わるポイントとなる以下の3つの新機能について取り上げます。 Layouts React Server Components Streaming それではさっそく試していくことにしましょう！ インストール ウェブアプリの雛形は以下で作成できます。

2022-10-28S3 Object Lambda を使って処方箋プレビューに透かしを入れるこんにちは。医療プラットフォーム本部プロダクト開発室エンジニアの中畑です。主にオンライン診療・服薬指導アプリ CLINICS の開発を担当しています。 今回は CLINICS アプリ内で扱う処方箋プレビューに透かし(watermark)を入れた話を紹介したいと思います。なぜ実施したのか、実装方法、パフォーマンスチューニングの 3 本立てでお送りしたいと思います。 課題と解決方針まず、なぜ処方箋プレビューに透かしを入れることにしたのか。 CLINICS では診察後に患者が希望すると、かかりつけ薬局支援システム Pharms を導入している調剤薬局にてオンライン服薬指導を受けることができます。その際に医療機関から処方箋の画像ファイルや PDF をアップロードし、患者は CLINICS アプリを通じて、

皆さんこんにちは。最近のReact界隈で話題になっているのは次のRFCです。 そこで、この記事ではさっそくRFCを理解することを目指します。 ただし、このRFCはSuspenseに深く関わるものです。SuspenseはReact 18でもう正式リリースされていますから、この記事ではSuspenseは前提知識とします。もしまだSuspenseをよく知らないのであれば、ぜひ次の記事で学習してください。 また、RFCはあくまでReactの新機能のアイデアを公開するものであり、これが必ず実装されるとは限らない点にご注意ください。例えば、過去にはuseEventというRFCが注目を集めていましたが、意見が集まった結果としてそのRFCは実装されずにクローズされました（RFCが無駄だったというわけではなく、再度検討してよりアイデアがブラッシュアップされることになります）。 新しい use API このR

この記事について 以下でReactの再描画の仕組みと抑制方法をスクラップしました。 折角なので、記事にしてまとめておきます。 再描画の確認方法 Chromeデベロッパーツールを使用すると、いつ再描画が行われているか確認することができます。 該当箇所の外枠が発光し、再描画されていることを教えてくれます。また、負荷がかかるほど外枠が黄色に近い色に変わっていきます。 再描画の基本 React Hooksではコンポーネント内で定義されているStateが更新されたとき、そのコンポーネントの再描画が行われます。 そのコンポーネントがいくつかの子コンポーネントを持つとき、それら全てが再描画の対象となります。 Inputコンポーネント 以降で使用しているInputコンポーネントです。 基本的にはinputタグをラップしているだけなので、読み進める分には飛ばしてOKです。 Input.tsx export

JavaScriptは型変換がおもしろいと思うので残しておく JavaScriptの勉強中なので、こうしたほうがいいなどありましたらガンガン言っていただけると喜びます。 基本型から 文字列 と 数値 変換の方法がいくつかあり、それぞれ挙動が違ってきます。 文字列　→　数値 var value = '1234'; // 以下、1234 Number(value); parseInt(value,10); value - 0; +value; value - 0 数値演算のオペランドに文字列値を書くと、暗黙に数値に型変換されます。（+は文字列連結として扱われる） そのため、value - 0 ではnumが暗黙の型変換によって数値になりますが、0を引いても数値は変わらないため型変換だけが行われることになります。 +value また、+演算子を単項演算子で使用すると、正の符号演算になります。正の符

世はまさに、React hooks時代。 React hooks無しにして、Reactは書けない！！という人も多いのではないでしょうか。 その中でも特に「カスタムフック」は、React hooksの便利さをの根幹とも言える、最も重要な機能です。 カスタムフックは自由にカスタマイズできる一方で、設計や実装に悩むことが多くあります。 そんなカスタムフックに、本気で向き合ってみようと思います。 1章 - そもそもカスタムフックとは 自分独自のフックを作成することで、コンポーネントからロジックを抽出して再利用可能な関数を作ることが可能です。 公式ドキュメント: 独自フックの作成 簡単に言うと、React hooksの処理をコンポーネントに直接書くのではなく、 別ファイルに切り出して新しいhooksとして定義した関数のことをカスタムフックと言います。 2章 - カスタムフックを利用するメリット カス

運動不足解消への一歩！スマートウォッチで健康管理明日からできる！自律神経の調整　~睡眠編~'; collapsItems['collapsArch-2024-2:f6e26e8d-6393-4cb9-9713-ac12e77ef6ec'] = 'オスグッド・シュラッター病私の癒しちいかわをご存知か？！'; collapsItems['collapsArch-2024-1:f6e26e8d-6393-4cb9-9713-ac12e77ef6ec'] = '自分探しの旅へ🛩私の好きなもの忍野八海楽しく教えること'; collapsItems['collapsArch-2023-12:f6e26e8d-6393-4cb9-9713-ac12e77ef6ec'] = 'MERRY CHRISTMAS野球を通して学んだこと理学療法士について'; collapsItems['collapsArch-

10/14 の Tech Play での発表資料です https://techplay.jp/event/873259

概要 本記事は、HTTP クライアントライブラリである axios の v1.0.0 が満を持してリリースされたため、何がどう変わったのか、マイグレーションしても良いのかについて個人的に調べてまとめた結果になります。 TL;DR axios の v1.0.0 は、パッケージのモダン化に向けた節目としてのバージョンともいえる v1.0.0 では多数のバグ修正と、いくつかの小規模の機能追加がまとめて取り込まれた 破壊的変更や非推奨化は少なからずあるが、基本的な使い方や挙動を大きく変える規模の変更はない 一方で劇的に良くなる変化もないので、急いであげる理由もない 公式マイグレーションガイドは記事執筆時点では提供されていない axios について axios は、JavaScript 向けの HTTP クライアントライブラリの一種で、この種のパッケージとしては比較的古くから普及している老舗ライブラ

axiosを使ってAPIリクエストを送る際に、前処理を行いたいケースがありました。 リクエストを送る前に毎回処理を記載する方法もあるのですが、interceptorsを使用することで綺麗に書けそうだったので調べてみました。 interceptorsとは interceptは途中で捕まえるといった意味のようです。 You can intercept requests or responses before they are handled by then or catch. リクエストを送る前にログを出してみる interceptorsを使用して、毎回リクエストとレスポンスの前にログを出力させてみます。 import axios from 'axios'; axios.interceptors.request.use(request => { console.log(request.url)

訳：「適切なuseStateの使い方」について 最初に ※タイトルはあまり気にしないで下さい。 useStateを使用する際に気を付けたいポイント 関連する状態はまとめることを検討する 矛盾した状態の宣言を避ける 冗長な使い方をしない 重複した状態の宣言は避ける 1. 関連する状態はまとめることを検討する 例えば下記のようにOnPointerMoveメソッドを使用しXYの座標を保持したいと思います。 const [x, setX] = useState(0); const [y, setY] = useState(0); const handlePointerMove = (e) => { setX(e.clientX); setY(e.clientY); }; return ( <div onPointerMove={handlePointerMove} style={{ width:

「デッドリフトのやり方がわからない...」 「デッドリフトにはどんな効果があるの？」 と感じてはないでしょうか？ デッドリフトは全身の筋肉を一気に鍛えることができる最強の筋トレ種目です。 しかし、初心者の方がフォームや重量設定を間違えると、効果が出ない上に怪我をしてしまう恐れも... 今回は、初心者の方でもマスターできるデッドリフトのやり方について徹底解説していきます！

本記事では、SwaggerのAPI定義を行うSwagger YAMLの記法についてまとめてみました。 使い初めはとっつきにくいSwaggerですが、この記事がSwaggerを使う方の参考になれば幸いです。 Swagger Editorの紹介 Swagger YAMLを書く際には、Swagger Editorがとても便利です。 画面左側がエディター、右側がSwagger UIとなっておりリアルタイムで記法のチェックや定義書を確認できます。 Swaggerを書くエディタはいろいろありますが、気軽に記法を試す際にはSwagger Editorがとても便利です。 ぜひこれから紹介する記法を試す際にも、ぜひ使ってみてください。 初級編 基本の記述 初めにSwagger YAMLを記述するにあたり必須であるswagger, info, pathsについて説明します。 上記の基本的な構成で記述したシンプ

この、ドナルド・クヌース先生の有名な格言について考えてみます。 プログラムのコードをきれいな状態に保つことと、実行速度の向上や必要なリソースの削減といった最適化を図ることとは両立しない場合が多々あります。こうした場合にどちらを優先すべきか？という問いに対し、クヌース先生は「まずコードをきれいにしろ」と答えています。 ソフトウェアのユーザにとって、コードがきれいかどうかは何の価値もありません。対して実行速度などは使いやすさに直結する重要な要素です。それなのになぜ、きれいなコードのほうが優先されるべきなのでしょうか？ きれいなコードとは？ なぜ最適化と両立しない？ まず考える必要があるのは「きれいなコード」とは何か？ということです。 それは、開発者がコードを眺めて「なんて美しいんだ！」と悦に入るためのものではありません。 きれいなコードの条件として、大きく以下の2つが挙げられると思います。 ・