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

本稿は「アーキテクチャを突き詰める Online Conference」における発表「なぜDependency Injectionなのか？　～関心の分離と疎結合～」の登壇原稿となります。 発表時の動画アーカイブは後日公開されたタイミングでリンクを追加いたします。 また、本稿のサンプルコードとPower PointはGitHubで公開しています。 「CC BY-SA 4.0」で公開していますので、気に入っていただけたら営利目的含め、ライセンスの範囲で自由に利用していただいて問題ありません。 https://github.com/nuitsjp/WhyDependencyInjection というわけで、本稿の目指すゴールはこちら。 今日は、この場にいる皆さんが「なぜDependency Injectionを利用するのか？」ということを、理解いただくのが本日のゴールとなります。 というわけで本

AboutAnimista is a place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use. Animista started out as a small side-project of mine. As I was increasingly using CSS animations, I thought it would come in handy to have them organised in a meaningful and accessible way so that they can be easily reused on different projects. The idea wa

仮想DOMは本当に“速い”のか？ DOM操作の新しい考え方を、フレームワークを実装して理解しよう 最近のJavaScriptフレームワークで利用される「仮想DOM」について、リアルDOMの違い、メリット・デメリット、仮想DOMを使ったフレームワーク開発などを、ダーシノ（bc_rikko）さんが解説します。 はじめまして、ダーシノ（@bc_rikko）です。さくらインターネットでフロントエンドエンジニアをする傍ら、NES.cssというファミコン風CSSフレームワークを開発しています。 さっそくですが、皆さんは、ReactやVue.jsといったJavaScriptフレームワークを使ったことがありますか？ そういったフレームワークで使われている、仮想DOMについて知っていますか？ 「聞いたことない」「聞いたことはあるけど、どう実装されているかは知らない」「熟知している」。いろいろなレベルの方がい

create-react-app で作成した React のプロジェクトでは SVG ファイルを ReactComponent としてインポートすると inline-svg (<svg></svg>) として出力できるので path に CSS を当てたい場合などに便利です。 今回 Vite で作成した React (TypeScript) のプロジェクトで同じことをしようとしたのですがデフォルトの状態では SVG を ReactComponent として import できませんでした。 vite-plugin-svgr を使う 内部的に svgr という SVG を ReactComponent に変換できるツールを使っている vite-plugin-svgr プラグインがあったのでこちらを使うことにしました Then SVG files can be imported as Reac

弊社では2022年11月頃からGreefile.work入退場の機能刷新プロジェクトを進めており、1月下旬に初回リリースをしました。 【2023年1月24日更新】【入退場管理】入退場管理の画面表示を刷新しました（他6件）（元請向け） | Greenfile.work｜安全書類(グリーンファイル)・施工体制台帳電子化サービス 平素よりGreenfile.work（グリーンファイルドットワーク）をご利用いただき、誠にありがとうございます。この度、入退場管理において、複数の機能の改善、および画面表示の変更を行いましたのでお知らせいたします。入退場管理をご契約いただい...

RSSリーダーというものがある。多分同年代にはほとんど伝わらなくて、まあ簡単に言うと、Youtubeのチャンネル登録 + 登録チャンネルの動画を新しい順に並べるというのをWebページでやってくれる。自分が読みたいと思うWebページのRSSを購読 (Subscribe) して、そのページの最新の投稿はRSSリーダーを使って見つける&読むという感じになる。 お察しの通り、2023年においてRSSリーダーなんてものはいらない。企業の最新情報はその企業の広報ブログやPRTimesではなくて公式Xアカウントのポストで知ることになるし、今世間で話題となっていることは中身の伴っていないコメントと一緒にTLに流れてくる。それでも自分がRSSリーダーを使う理由は今のXだったり、自身のおすすめTLをKawaii Pictureで埋め尽くしておきたいという欲求がある。ニュースと一緒に流れてくるキモ＝オタクの芯を

[Docker] M1 Macで「 no matching manifest for linux/arm64/v8 in the manifest list entries」のエラーの対処法MacDockerarm64M1

1.はじめに まず，拙作ですが以下の作品を見てください． この作品，実は完全なバニラのMinecraftで動いています．（リソースパックをバニラと言うならだけど） 防具立ての頭にかぶせたモデルを良い感じに動かして，モンスターに見えるようにしています． 実はMinecraft ver1.19.4から追加されたitem_displayというEntityのおかげで，今では非常に簡単にこんなボスが作れるようになりました． 本記事では，「Animated Java」というBlockBenchのアドオンと，Minecraftのデータパックを組み合わせたモンスターの作り方を説明します． この記事では、BlockBenchとコマンドを使って実際にモンスターを作ってみます。みんな大好き空の王者を作りながら解説するので，一緒に学んでいきましょう！ 2.前提知識 本記事ではあくまで「モンスターの作り方」について

実行環境 macOS: Ventura13.4 node:     v18.16.0 やったこと Javascriptでコーディングをしており、入出力値を確認したかったので、以下のコマンドを実行したところ、エラーが出力されました。 実行コマンド node code4-1.js 出力内容 node:internal/modules/cjs/loader:1078 throw err; ^ Error: Cannot find module '/Users/kurino/work/study/TIL/js/code4-1.js' at Module._resolveFilename (node:internal/modules/cjs/loader:1075:15) at Module._load (node:internal/modules/cjs/loader:920:27) at Fun