cari-noフロントエンジニア志望

理屈↔︎感覚→メモリ構造でプログラミング理解🥀 React学習カスタムGPTs語録🐾 Next.js+TypeScript/supabase オリアプ個人開発 コーダー12年/職業訓練Java/インターネットアカデミー/東京デザインプレックス研究所/ShiftB

[cari-noフロントエンジニア志望 @js_carico]

childrenは、2つのカプセル化を同時にやってる。
①Java: クラス隠蔽→React: 他のコンポーネントを閉じ込める
②Java: パッケージ制限→React: 親のタグで挟み込む ReactNodeのおかげ。

[cari-noフロントエンジニア志望 @js_carico]

Reactのchildrenは"特別なプロパティ"で説明されがち。役割は、Javaのprivate × package × implements。 裏で自動で共通interfaceになってるってこと。

[cari-noフロントエンジニア志望 @js_carico]

Reactが特別な機能をもっているというより、結局は昔からあるJava（オブジェクト指向）と同じ。
UIが絡むからあの親子関係になるだけ。
Javaのように抽象を明示的に自分で定義せず、自動でコンポーネントが多態性になる。

[cari-noフロントエンジニア志望 @js_carico]

個人開発中のアプリ、構想は3年前。
自作GPTsをアプリ化し、サービス提供すること。
開発できない時期を挟みつつ、ようやくデプロイ！というところで、本家が提供してると気付く。
勿論、3年前にはなかった。
コンセプト丸かぶり。
https://t.co/W8J3jutzMS
#クックトーク

[cari-noフロントエンジニア志望 @js_carico]

コードを前にしたとき、初学ではこう教わった。

「1行ずつ読むな。塊で見ろ。
何を返しているかを見ろ」

設計レビューでの読み替えは、こうなる。

「1ファイルずつ追うな。
原因と派生を見ろ」

多くのコードは独立した問題じゃない。
1つの設計判断の“影”。
影響（遺伝）を受けて生まれただけ。

[cari-noフロントエンジニア志望 @js_carico]

React内部構造の比喩🧬
FiberTree：細胞ネットワーク（全体構造）
FiberNode：細胞核（状態と設計情報）
memoizedState / memoizedProps：細胞内の記憶
child / sibling / return：神経ネットワーク
Real DOM：人体
React App：脳
※ ReactではFiber（細胞）は考えず、記憶を持ち、基本再利用される。

[cari-noフロントエンジニア志望 @js_carico]

React16以前は、本当にVDOM用のメモリ構造があった。
ReactElementで構成された仮想DOMツリーを毎回生成し、前回の仮想DOMと比較（diff）していた。

React16以降は、VDOM比較専用の独立した領域は持たず、差分評価に必要な情報をFiber内に分散して保持し、評価結果をcommitする設計になっている。

[cari-noフロントエンジニア志望 @js_carico]

ReactはJSエンジン上にFiberTreeという内部データ構造を作り、stateやeffectをFiber（JSHeap上の管理用Node）に保持。
更新はFiberに紐づくHookのqueueに積み、
再レンダー時にHookを順に参照し、各queueのupdateを前のstateに適用し、新しいstateを計算。
VDOMを用いて比較→反映し、Real DOMを更新。

[cari-noフロントエンジニア志望 @js_carico]

仮想DOMの木が内部にあると思ってた🌲
React16以降はVDOMを作って差分を見るというより、
Fiber上で次のUI構造を計算・評価（reconcile）し、
commitでReal DOMに反映する設計。

[cari-noフロントエンジニア志望 @js_carico]

🐰ReactのCBはこう見るウサ🥕
・親が handleClick（CB関数）を書く
・<Child onClick={handleClick} /> でCB付きで子に発注
・子はイベント発生時に props.onClick() を呼んで親に報告（ここでCB発動）
🐱子は呼ぶタイミングが任されているニャ！
🐰state更新＆再レンダは親＋Reactエンジンの仕事ウサ

[cari-noフロントエンジニア志望 @js_carico]

🐱関数が終わったら自動でpopされるニャ
🐰関数を定義した時点でHeapに空の関数オブジェクトが作られ、実行時にStackへ実行コンテキストが積まれ（push）、引数用のメモリが初めて作られ、処理されたらStack領域は破棄（pop）ウサ
🐱GCの出番はHeapだけニャン

[cari-noフロントエンジニア志望 @js_carico]

🐱コールバック関数って、外注に仕事を任せてる感じニャ🧹🍂
・入口の関数だけ書く
・データは外注（APIや外部ライブラリ）が持ってる
・引数の情報も外注がセット
・お仕事終わったタイミングで、こちらの関数をコール
✨️
🐰できあがった関数受け取るだけで良いウッサ🥕
🐱ありがたいニャン🍵

[cari-noフロントエンジニア志望 @js_carico]

🐱React × 外部サービス設計の本質は “責務分離” ニャ✨
useEffect = PM
API/Supabase = 外注
React本体 = エンジニア

PM が「参照を差し替えて」と指示し、
外注はただ 状態を渡すだけ。
UIの更新を決めるのはエンジニア。

🐰状態の実体はReact内のメモリにあるウサ！
構造はとてもシンプルウサー✨

[cari-noフロントエンジニア志望 @js_carico]

転職活動まだしていないのに突然、電話のmessge宛に「データアーキテクト」や「アプリ開発」が盛り込まれたスパムがきた。OpenAIインシデント後にチョロチョロと。やっぱりメタデータが漏れたのではないかと。「日給2〜3万円で月収60万円」の餌。連絡手段が「LINE ID」だけ。迷惑メールで即ブロック。

[cari-noフロントエンジニア志望 @js_carico]

🐱開発でコード保存するたびに500出るニャ…
🐰Next.js(dev)は保存サーバー再起動＆モジュール再読み込みが起きるウサ。その度にnew PrismaClient()大量発生💥→ DB枯渇💀→ Supabase寝る😪→ timeout🔥→500連発ウサ！
🐱地獄ニャ…
🐰Singletonで1個だけ再利用すれば全部解決ウサ✨

[cari-noフロントエンジニア志望 @js_carico]

🐱Supabaseは20分以上起きてられないニャ…すぐ寝ちゃうニャ💤🐰任せろ！アプリ起動後はすぐ起こすウサ☀️/api/warmupをアプリ直下のlayoutで呼ぶウサ🐱それはお家のドア開けた瞬間に暖房🔛みたいなものニャ〜家の中どこでも暖かいニャ〜🔥🐰家の中に入ってから🔛では温まる前に震えるウサ☃

[cari-noフロントエンジニア志望 @js_carico]

🐰fetchはマラソン選手。転び方が2種類ウサ😿走る前に転ぶと通信エラーニャ！例外 throwニャ！🐰try/catchで拾うウサ！😿ゴールして成功ニャ！でも怪我ニャ…🐰それはHTTPエラーウサ！res.okじゃないウサ😿走れないのも悔しいけど、走ってから怪我するのも悲しいニャ🐰2段チェック必要ウサ！

[cari-noフロントエンジニア志望 @js_carico]

OpenAIの件で問い合わせしたり別アカウントの方でクレジット再登録したりAPIキー発行したり時間溶かしたけどまたこのまま開発してく！すべての経験を糧にしてく！

[cari-noフロントエンジニア志望 @js_carico]

リセットされたのではなかった。別アカウントでログインしてた。Googleログインと同じメアドでもパスワード違えば別アカウントとカウントされる。そりゃそうか。

[cari-noフロントエンジニア志望 @js_carico]

11/27 OpneAIからインシデント英文メール
12/3 日本語で同内容のメール受信
公式ではAPIキーや支払い情報は影響なく、リセット不要となってるが↓
❌ APIキー消失でMissing credentialsエラー発生
❌ クレジット残高0でチャージ消失
❌ 使用状況が消失
❌ APIが停止(今日)
OpenAIでリセットした跡

[cari-noフロントエンジニア志望 @js_carico]

今回色々な方法でログインしてみたがアカウントはどれも内部で紐づいていない。当たり前だけどプロジェクトも課金も全部別。アカウント管理ちゃんとしよう。管理って大事。