GraphQLのextendは、既存の型を拡張するためのキーワード spec.graphql.org 既存の型に新しいフィールドを追加したい場合に使う 例 初期のスキーマ type User { id: ID! name: String! } 後からemailフィールドを追加したい場合 extend type User { email: S…
ドラッカー風エクササイズというチームビルディングの手法を知ったので調べてみた 「アジャイルサムライ」の著者 Jonathan Rasmusson氏が提唱したチームビルディング手法 The Drucker Exercise /* */ agilewarrior.wordpress.com このエクササイズは、チーム…
Nodeのバージョンを20系で固定する方法を調べた やり方は簡単で、package.jsonの中にenginesの定義すれば良い 例えば、Node.jsの20系にする場合は以下 { "name": "my-app", "version": "0.0.0", "engines": { "node": ">=20.0.0 < 21.0.0" }, ... } もし、20…
valtioについて調べた github.com valtioは日本人の@daishiさんが作成したProxyベースのシンプルかつリアクティブな状態管理ライブラリ proxyを用いてJavaScriptオブジェクトをラップし、状態の変更を自動的に追跡・通知する仕組みを提供している 生まれた背…
Apollo ClientのLocal-only fieldsについて調べた www.apollographql.com Local-only fieldsとは、サーバー側のスキーマには存在せず、クライアントサイドでのみ存在するフィールドのこと これらは @client ディレクティブを使用して定義される 基本的な使い…
GitHub Actions のワークフローでブランチ名に応じて、codegen用のGraphQL APIエンドポイントを変えたい GraphQL APIエンドポイントは環境変数の値を変えれば良いようになっているので、実際にはブランチ名に応じて環境変数の値を変えれば良い 環境はstaging…
Apollo Client の Reactive variables（リアクティブ変数）について調べた www.apollographql.com Reactive variablesは、Apollo Client が提供する状態管理の仕組みの一つ グローバルなクライアントサイドの状態を管理するために使われる 基本的な使い方 1.…
ReactのForwardRefExoticComponentというのを見かけたので調べた ForwardRefExoticComponent は、React.forwardRef を使用して作成されたコンポーネントの型を表す Reactコンポーネントでどのように使用されるか React では、ForwardRefExoticComponent は主…
MobXのcustom observablesおよびAtomについて調べた mobx.js.org Atomとは？ MobXの低レベルAPIの一つで、リアクティブシステムの中核を成す概念 自作のリアクティブデータソースを作成するために使われ、MobXがリアクティブに状態を追跡・更新できるように…
MobXの@computedと@computed.structの違いついて調べた mobx.js.org @computedと@computed.structはどちらも、MobXで派生データ（他のobservableに基づく値）を効率的に計算・キャッシュするために使用されるデコレータ ただし、@computedの場合、再計算のト…
@actionの他に@action.bound があることを知ったので違いを調べた @action と @action.bound の違い 結論からいうとthisのバインドされるかされないかである @action と @action.boundはどちらも、MobXで状態を変更するメソッドを定義するために使用するが、…
MobXのreaction APIについて調べた reactionとは？ MobXのリアクティビティシステムの一部で、特定のデータ（observable）の変化に反応して副作用を実行するためのAPI 特定の条件に基づいて副作用を発生させたい場合に使用する また、autorunのようにすべて…
Mobxの主要はAPIについて調べた mobx.js.org computed 他のobservableから派生した値を自動的に計算し、キャッシュを提供する 状態に依存する派生値を効率的に計算する import { computed, observable } from 'mobx'; const state = observable({ price: 100…
MobXのサブスクリプションの仕組みを解説する記事を読んだメモ medium.com 概要 MobX には Observable state、Computed values、Reactions、Actions という 4 つの主要な概念がある これらの概念が連携してアプリケーションの状態を更新し、UI をリアクティ…
ReactとMobxを使う上で変更を検知する場合としない場合を理解する このことのヒントは以下に記載がある mobx.js.org 原則observerオブジェクトから値を取るのはできるだけ遅くする Mobxはobserverオブジェクト参照を可能な限り持ち回した方が効果的に機能す…
MobXとReactの統合について mobx.js.org mobx-react-liteライブラリから提供されるobserverを使うことで、必要な変更があった場合にのみ再レンダリングされる 基本的な使い方は以下 import React from "react" import ReactDOM from "react-dom" import { ma…
MobXという状態管理ライブラリについて調べた mobx.js.org MobXは、JavaScriptで状態管理を簡単かつ効率的に行うためのライブラリ リアクティブプログラミングの概念に基づいていて、アプリケーションの状態が変化した際に自動的にUIが更新される仕組みを提…
前回の続きで、@position-tryを使って、Anchor Positioningによって配置された要素が見切れた始めた時に、配置をどうするかを指定することができる uga-box.hatenablog.com 例 例えば、以下のhtmlとcssでこのような動きにすることができる <div class="anchor">⚓︎</div> <div class="infobox"> <p>This is an in</p></div>…
State of CSS 2024 にあった CSS Anchor Positioning について調べた developer.chrome.com CSS Anchor Positioningは、CSSの新しいレイアウト機能で、要素を特定の「アンカー」に基づいて配置することができる 主な用途 ツールチップやポップオーバーの動的…
State of CSS 2024 にあった Stepped Value Functions について調べた web.dev Stepped Value Functions は、与えられた値を別のステップ値に基づいて変換する関数 これにより、滑らかに変化する値を特定の区切りでステップ状に変更できる 主に以下の３つの…
State of CSS 2024 にあった font-display について調べた developer.mozilla.org @font-displayはフォントがダウンロードされ使用可能になるタイミングに基づいて、フォントの表示方法を決定する記述子 指定されたフォントをダウンロードして利用しようとし…
State of CSS 2024 にあったprefers-reduced-motionについて調べた prefers-reduced-motionは前庭運動障害などがある人たちのための機能 前庭運動障害とは、平衡感覚や身体のバランスを保つために重要な役割を果たす前庭系に影響を及ぼす障害を指す これには…
『ドメイン駆動設計をはじめよう』を読んだのでその感想です。 訳者の増田亨さん（@masuda220）から献本頂いた本で、改めてお礼申し上げます。 ドメイン駆動設計をはじめよう ―ソフトウェアの実装と事業戦略を結びつける実践技法作者:Vlad Khononovオライリ…
Node学園で行われたShane Carrさんの「ECMA-402をマスターしよう」の発表が面白かった docs.google.com ECMAScriptにおける I18Nについての話し 例えば、Youtubeのサイトを見ると 3.5Mviews 357万 回視聴 のような、ローカルな表記のブレがある これだけであ…
Nested Navigation について調べた ざっと検索すると、主にネイティブアプリ、特にReact Nativeの文脈での記事を多く見かける 今回は以下の記事を参考にした medium.com Nested Navigation は、複数のナビゲーターを組み合わせて階層を作成し、ユーザーがア…
以前、UUIDv4はランダムで作られるから、大規模データだとパフォーマンスが悪くなるという話で、DBのインデックス構造におけるハッシュとB木（B-tree）の使い方やそのパフォーマンスについてもう少し調べてみた uga-box.hatenablog.com ハッシュインデックス…
RDBの主キーはUUID使った方がいいのかという話 zenn.dev 以前に見た動画につながる話なので読んだ uga-box.hatenablog.com UUIDにも色々あってどれを使うか、そもそもUUIDが良いのかを考える必要がある 記事にもあるが、主キーをDBの自動採番を任せた場合、…
TypeScriptは型安全じゃないとよく言われているけど、それが「すばらしい」と表現しているのが新鮮だったので以下の記事を読んだ mametter.hatenablog.com TypeScriptは静的型付けによってコードの安全性を向上させるが、型安全とは言えない その理由は以下 …
LEADING QUALITYという本を読んでいて、そのうちのセッション３（成長を加速させるチームにする）のメモ LEADING QUALITY (アスキードワンゴ)作者:Ronald Cummings-John,Owais Peer,河原田 政典ドワンゴAmazon 第８章 チームと会社の成長指標 どうしたらQAと…
LEADING QUALITYという本を読んでいて、そのうちのセッション２（戦略的に品質の意思決定を下す）のメモ LEADING QUALITY (アスキードワンゴ)作者:Ronald Cummings-John,Owais Peer,河原田 政典ドワンゴAmazon 第４章 手動テスト自動テスト うまくいっていな…
