Hatena Blog Tags
はてなブログ トップ
react
このタグでブログを書く

react

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

フロントエンド実装のスタート

前回 生成AIを使ってゼロからWebサービスをつくる - 山羊の午後生成AIでゼロからWebサービスを作る、２日目。今日は実装を進めたい。 まずは初めてやるフロントエンドの実装からスタート。とりあえず、ChatGPTに何をしたらいいのか聞く。 UIについて検討しては、というので１日目に決めたMVPの機能リストから、UIのイメージを作ってもらう。 分からないので自分で考えたりはしない。MVPの機能リストはこれ。（これは自分で決めた） ちなみに作るものは「小説のワンシーンを出力する生成AIアプリ」である。 ユーザー入力を受け付けるフォームがある 実行ボタンがある 実行ボタンを押すとバックエンドで処…

#生成AI#react

関連ブログ

Hisakeyのブログ•3日前

TypeScriptのユニオン型で「登録か更新か」を型安全に判別する

はじめに TypeScript の discriminated union（判別可能なユニオン型）を導入することで、条件分岐をより安全かつ明示的に記述できるようになったことに気づいたので、それを共有します。 背景・動機 実務で、ユーザー情報の「登録」と「更新」を同じフォームコンポーネントで扱う場面がありました。 当初は user.id !== undefined のような条件で処理を分けていたのですが、似たような分岐が増えるし、見づらいなあと感じていました。 「このやり方、本当にベストなんだろうか…？」と感じていたある日、同じような実装をしていたシニアの方が、TypeScript の disc…

#typescipt#discriminated union#ユニオン型#react
KENTEM TechBlog•6日前

TypeScriptでZustandを使う方法と注意点

こんにちは。フロントエンドエンジニアのM・Sです。 皆さんは状態管理ライブラリは何を使っていますか？ 私のプロジェクトではZustandを採用しています。 Zustandはシンプルで柔軟な状態管理ライブラリです。 Reactにおけるグローバルな状態の管理に適しており、Reduxのような冗長さを避けつつ、必要な機能を抑えています。 この記事では、TypeScriptでZustandを使う際に最低限知っておくべきことと注意点を紹介します。 基本的な使い方 TypeScriptでの使い方 カリー化について なぜカリー化をする必要がある？ 値を永続化して保持する まとめ おわりに 基本的な使い方 基本…

#フロントエンド#Zustand
KENTEM TechBlog•8日前

Vite × React × TypeScript 開発環境構築ガイド

こんにちは！ 2年目、フロントエンジニアのH.Rです。 今回は、Vite × React × TypeScriptの開発環境構築ガイドを解説していきたいと思います！！ 前提条件 環境 インストール Node.jsのインストール確認 プロジェクトの作成 プロジェクトの作成 TypeScript と TypeScript + SWC の違い プロジェクトの起動 依存パッケージをインストール 開発サーバーを起動 サーバーの停止方法 あとがき 前提条件 Node.jsがインストールされていることを確認してください。 ターミナルで以下のコマンドを実行し、バージョンが表示されなければ公式サイトからインスト…

#フロントエンドエンジニア#環境構築#react
APC 技術ブログ•9日前

DatabricksとDSPyで作る、スケーラブルなAIルーティングエージェントの実践ガイド

※本記事は、Data + AI Summit のセッションを現地で視聴したエンジニアが、内容をできる限り客観的に共有することを目的に、生成AIを活用して作成したものです。 ― エーピーコミュニケーションズ Lakehouse部 Data + AI Summitで発表されたセッション「Route to Success: Scalable Routing Agents With Databricks and DSPy」では、Luis Moros氏が複雑化するAIシステムを統合するための実践的なアプローチを解説しました。本記事では、この講演内容を基に、分散したAIシステムを束ね、保守性と拡張性に優れ…

#Databricks#DAIS2025#DSPy#react#Simba#ベクトル検索#LakeBase
fdm_logのほぼにち日記•11日前

ReactとSpring Bootの連携と新宿の夜・少しだけ「カリオストロの城」の感想：2025年6月26~29日記録

前回から後にした勉強 システム開発 React によって Web アプリケーションのフロントを作成する方法を入門編のみ勉強。具体的な機能を持たせることはできていないが、ともかくページを作る流れは理解できました。今後は並行して各フォルダ構成が持つ役割とバックエンドとの連携について理解していきたいですね。 さらに、バックエンドは Spring Boot で作成。本来は Eclipse という開発ツールを利用して実行するのがメジャーな方法のようですが、普段から使用している VS コードでも拡張機能を利用すれば可能なようなのでそちらを利用しました。YouTube 上でも日本語の入門動画が少ないので本を…

#筋トレ#react#Spring Boot#映画#カリオストロの城
えみろぐ•13日前

Reactで創作漫画のキャラ紹介ページを作ってみた②

前回の記事に引き続き、創作漫画のキャラ紹介ページのアップグレード版を作りました^^ 前回の制作物のアップグレード版。今度はメイン画像をクリックするとモーダル内で画像数枚が一定間隔でスライドするアニメーションをReactで実装しました😊 #プログラミング初心者 https://t.co/SNaWLOyP6B pic.twitter.com/8O9D9fPlYM — えみろぐ (@emy_log) June 26, 2025 今度はメイン画像をクリックすると、モーダル内に複数の画像が一定間隔でスライドするアニメーションをReactで実装しました。 こっちの方が動きがあって楽しい( ＾∀＾) もう少…

#プログラミング#プログラミング初心者#JavaScript
TECHSCORE BLOG•13日前

Next.js App Router の基礎：フロントエンドエンジニアのための入門ガイド（概念とディレクトリ構造編）

1. はじめに 1.1 App Router とは何か Next.js 13.4 で正式リリースされた App Router は、従来の Pages Router に代わる新しいルーティングシステムです。最も重要な特徴は、React Server Components をデフォルトで採用している点にあります。これにより、サーバーサイドでコンポーネントをレンダリングし、必要な部分のみをクライアントに送信することで、パフォーマンスの大幅な向上を実現しています。 App Router は単なるファイル構成の変更ではありません。React 18 の新機能を最大限活用し、サーバーとクライアントの境界をよ…

#Next.js#App Router#フロントエンド#Web開発
プログラミングを頑張る土木系専攻大学院生のブログ•13日前

YouTubeAPIで、再生リストからデータを一覧取得してみた 　FastAPI × React アプリ開発【レシピ提案アプリ⑥】

こんにちは、今回のテーマは 「YouTubeの再生リストからレシピ動画を一括取得」 です！ 前回の記事 ↓ では、Djangoテンプレートでレシピを一覧表示する機能を実装しましたが、今回は レシピを一括追加するための自動化ツール を作っていきます。今回から使用するフレームワークや言語が変わります。 フロントエンド HTML/CSS & JavaScript → Reactバックエンド Django → FastAPI siip.hateblo.jp ランキング参加中プログラミング ランキング参加中Python ランキング参加中大学生 🎯 今回やること 以下のような処理を実装して、YouTube…

#fastapi#react#YouTube#API