Hatena Blog Tags
はてなブログ トップ
react
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

react

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
ENECHANGE Developer Blog•2日前

【AI時代こそ、TanStack Start】TanStack StartとHey APIではじめるスキーマ駆動開発

はじめに TL;DR AI 駆動開発では「型・スキーマ・境界」が AI のガードレールになる。 TanStack Start は createServerFn でサーバー境界を、Hey API は OpenAPI で型を一元化する。 結果として、人間にも AI にも読みやすい SSoT 駆動の開発基盤が手に入る。 こんにちは、ENECHANGEエンジニアの柿です。 今回は、TanStack Start と Hey API を使ったフロントエンド基盤について紹介します。 最近はどこを見ても AI の話題が多く、日々さまざまなアーキテクチャやノウハウが生まれています。どれも有用で、AI を使うなら…

#TanStack Start#TanStack#TypeScript#TanStack Query

関連ブログ

ForgeVision Engineer Blog•20日前

Claude Codeで作ったシミュレーションRPG風ゲームをKiroで再実装してみた～設計のみを流用した仕様駆動開発の品質検証～

こんにちは、こんばんわ！クラウドインテグレーション事業部の魚介系エンジニア松尾です。 今回はClaude Codeで作った某シミュレーションRPG風ゲームをKiroに設計だけ渡してみてどういったものが出来上がるのかを検証してみたので、その際に感じた各ツールの所感について共有させていただきます。 はじめに～なぜ同じゲームを2つの生成AIツールで作ったのか～ 背景 疑問 本記事のゴール Claude Codeで完成したゲームの紹介 ゲーム仕様 最終的な仕上がり Claude Codeでの開発プロセス振り返り 基本的な開発の進め方 Kiroへの移行～設計資産をどう渡したか～ 移行で利用したファイル群…

#Kiro#Claude Code#AWS#AIコーディングツール#ゲーム開発#生成 AI#TypeScript#react#シミュレーションRPG#CDK
My Dev : ただの開発・実験等のメモ•24日前

React（Next.js）にするか Flutter　にするか

アプリを開発するうえでフロントエンドの選択肢として主要な二択となるReact（Next.js）or Flutter 。違いを整理しました。 React（Next.js） vs Flutter 比較 開発元 React：Meta Next.js：Vercel Flutter：Google 比較表 項目 React（Next.js） Flutter 開発元 React：Meta / Next.js：Vercel Google 技術カテゴリ Webフレームワーク（Reactベース） クロスプラットフォームUIフレームワーク 主な用途 Webアプリ、SSRサイト、SEO重視サイト モバイルアプリ（iO…

#Next.js#Flutter
プププなテクブ•24日前

TSRX - AI時代のUIコンポーネント

TSRX（TypeScript Render Extensions）は、宣言的UIを構築するためのTypeScript言語拡張です。 JSXの精神的後継として位置付けられており、構造・スタイリング・制御フローを同一ファイルにまとめて書けるのが特徴です。TypeScriptとの後方互換性も保たれており、.tsrx モジュールはJS・TS・JSX・TSXファイルからそのままインポートできます。 コンパイルターゲットはReact・Preact・Solid・Vue・Rippleに対応しており、フレームワーク非依存です。既存のTypeScript/TSXコードベースとの共存もできるので、プロジェクトの一…

#UI#AI#TypeScript#プログラミング
lelelemon’s blog•25日前

学習記録：React + TypeScript で API 接続の入口 — fetch と状態と境界

日付: 2026-05-02 時間: 約 60 分⚠️鋭意学習中の内容につき、一部誤りのある可能性があります。もし誤っている内容があったらすぐに修正しますので、お気づきの方はそっとご指摘いただけたらとても喜びます🙇 はじめに こんにちは。今回は、Vite + React + TypeScript で外部 API を fetch し、loading / error / 成功を useState で画面に載せるところまでを一通りやりました。今日の学習教材は以下です。github.com 今日やったこと npm create vite@latest … --template react-ts で試作…

#TIL
宅建士の業務ハック•25日前

`useEffect` の第2引数（依存配列）を空にしていい場面・してはいけない場面——しまなみガイドの実装から整理した

はじめに しまなみ海道の観光ガイドサイトを個人で開発しています。カスタムフックを書くたびに useEffect の第2引数（依存配列）をどう書くか迷いました。 useEffect(() => { // 何か処理 }, []) // ← これは正しいのか？ 「とりあえず [] にしとけばいい」と思っていた時期があります。実際には [] が正しい場面と、[] にしてはいけない場面があります。 このサイトで書いたカスタムフックを素材に、4パターンに整理しました。 まず：依存配列とは何か useEffect の第2引数は「この値が変わったときに再実行する」というリストです。 useEffect(() …

#useEffect#TypeScript
宅建士の業務ハック•1ヶ月前

`Promise.all` で複数APIを並列fetchしつつ、1件失敗しても残りを使う設計——しまなみガイドのバス時刻表実装

はじめに しまなみ海道の観光ガイドサイトを個人で開発しています。マップ上にバス停を表示し、タップすると時刻表を見られる機能を実装したとき、Promise.all の使い方でひとつ判断が必要になりました。 このサイトはしまなみ海道エリアをカバーするため、複数のバス事業者の時刻表データを扱います。 中国バス 尾道バス 井笠バス 鞆鉄バス 4事業者それぞれの JSON ファイルを読み込んで、ひとつにマージして使います。このとき「4件を並列で取得したいが、1件が404でも残り3件は表示したい」という要件がありました。 左：バス停レイヤーOFF、右：バス停レイヤーON。4事業者のデータを並列フェッチし、…

#Next.js#TypeScript#非同期処理
宅建士の業務ハック•1ヶ月前

ライブラリなしでスワイプ対応 BottomSheet を React に実装した——CSSトランジションが「一発で動かない理由」と double rAF trick

はじめに：なぜゼロから書いたのか しまなみ海道の観光ガイドサイトを個人で開発しています。マップ上のスポットをタップすると詳細が表示されるモバイルUIを作るため、BottomSheet が必要になりました。 最初は Radix UI の <Dialog> や vaul（Drawer ライブラリ）を試しました。動きはします。ただ、使いながら「なぜこう動くのか」がわからないまま実装が進んでいく感覚に違和感がありました。 ライブラリを使えば1時間で終わる話を、わざわざ自分で書いた理由はそこです。ゼロから書いて中身を理解したかったのです。 結果として、CSSトランジションの落とし穴・スワイプ速度計算・ア…

#TypeScript#Next.js#UI実装
【雑記ブログ】インプット備忘録•1ヶ月前

React Tips

useState Tips useStateの初期値は初回レンダリング時にのみ行われる。以降の更新では実行されない 常に新しい値で演算 conste handleClick = () => { setCount(c=>c+1); setCount(c=>c+1); }; (要確認)子コンポーネントで更新するとき、親コンポーネントからset関数を直接渡すのは避ける オブジェクトを変更 例えば、配列[a,b,c,d] ※a,b,c,dはオブジェクト という状態を管理してるとする このとき、bを新しいオブジェクトに更新するときは 配列自体を新しく作る bを新しく作る。他のa,c,dは同じでOK 上記…

#react