TypeScript

Python の身体を TypeScript の神経に繋ぎ変える — 実践移植録 — YouTube 検索ツールという題材で、喉が嗄れるまで検証したコードを刻む — あなた: Python で歌えるけれど、TypeScript はまだ初めて、という方。TypeScript 5.3 + Node.js 20 の環境で、私の喉が嗄れるまで検証したコードだけを置いていく。 はじめに：楽器が鳴るか、確かめて TypeScript という楽器が、あなたの手元で鳴るか。まずはそこから。 # 1. Node.js 20以上。fetch が標準で使える。これが最低限の身体 node -v # v20.0.0 …

を取得し、クライアント領域（紫）のHomeClient・SpotsListClientにpropsで渡します。MapboxやuseStateなどブラウザ専用の処理（オレンジ）はツリーの末端に置きます">サーバー領域（緑）でgetAllSpots()を実行してSpotを取得し、クライアント領域（紫）のHomeClient・SpotsListClientにpropsで渡します。MapboxやuseStateなどブラウザ専用の処理（オレンジ）はツリーの末端に置きます 以前、fs を使ったらビルドエラーが出た話を書きました。 mojitonews.hateblo.jp あのときは「fs はサーバー専用…

しまなみ海道の観光ガイドサイトをNext.js 15で個人開発する中で、通常のReactの作法——親子の一方向データフロー・ツリー内でのDOM管理——から外れた設計が必要になる場面が3つありました。forwardRef による命令型API・createPortal によるDOMへの脱出・Zustand によるプロバイダーなしの状態管理です。前回の記事（useRef・useCallback・AbortController編）の続きになります。 ランキング参加中プログラミング ランキング参加中旅行ランキング参加中弱小ブロガーズ このサイトでは地図機能を中心に据えており、しまなみ海道 観光マップとし…

しまなみ海道の観光ガイドサイトをNext.js 15で個人開発する中で、Reactの非同期処理まわりで詰まったことを3つのテーマで整理します。「stateに入れない（useRef）」「再生成させない（useCallback）」「止める（AbortController）」——この3軸で読んでいただければと思います。 ランキング参加中プログラミング ランキング参加中旅行ランキング参加中弱小ブロガーズ このサイトでは地図機能を中心に据えており、しまなみ海道 観光マップとしてスマートフォン・デスクトップどちらからでも使えるようにしています。地図上にはホテルと観光スポットのピンをレイヤーで切り替えて表示…

座学だけでは身につかない——実践学習に切り替えた理由 正直に言うと、座学はそれなりにやってきたつもりでした。 ランキング参加中プログラミング ランキング参加中旅行ランキング参加中弱小ブロガーズ JavaScriptの文法、Reactのコンポーネント設計、HTTPの仕組み、DBの正規化……。本を読み、Udemyを視聴し、ハンズオン記事を写経する。一通り「わかった気」になれる体験を繰り返してきました。 でも、ある日ふと気づいてしまいました。「これじゃ何も作れるようにはならない」と。 useEffect の依存配列についてはある程度説明できる。でも「じゃあ実際のプロジェクトで、どこに何を置いて、どう…

はじめに こんにちは！Frontendチームの薄羽です。TypeScript 6.0がリリースされました🎉内部向けに6.0に上げるまでの手順を書こうと思いましたが、せっかくなら詰まったところを全世界に共有した方が良いと思い、テックブログにします。エイプリルフールに執筆していたので、タイトルを「TypeScript 6億」にしようと思いましたが、全然面白くなかったためやめました。あと、タイトルにもありますが上げられなかったです。 TypeScript 6.0とは 詳しくは公式ブログを参照してください！TypeScriptは7.0からGo言語での実装になります。6.0は7.0に移行するためにいくつ…

はじめに 「ユーザーが選んだ日付が、なぜか今日の日付で登録される」 こんなバグ報告を受けたとき、あなたはどこから調査を始めるだろうか。バックエンドのパース処理？データベースのタイムゾーン設定？ 実は今回の原因は、Reactの最も基本的な特性 ── setStateの非同期性 ── にあった。 この記事では、マルチステップフォーム（ウィザード形式のフォーム）で実際に遭遇したバグを題材に、2つの問いを追う。 1つ目は 「なぜこのバグが生まれたのか」 ── Reactの状態更新のメンタルモデルの話。 2つ目は 「なぜテストで防げなかったのか」 ── テストピラミッドの隙間の話だ。 背景・課題 マルチ…