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

react

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

生成AIを使ってゼロからWebサービスをつくる

生成AIが何でも教えてくれる世界観がやってきた2025。 世間ではVibe Codingなる概念が誕生し、CodingとはAIがやるもの、という世界が近づいてきています。 でも本当に、全部AIがやってくれるのか？ 実務でAIコーディングを使っている感覚ではだいぶ半信半疑なところもあり、検証もかねてWebサービスを作ってみました。 忙しい人のためのまとめ React+FastAPIのWebサービスを企画～MVPのデプロイまで7日間で達成 勉強になったこと：React, Python（FastAPI, uvicorn）, APIとはなにか（HTTPリクエスト, REST, CORS）, デプロイと…

#生成AI#react#Python

関連ブログ

Hisakeyのブログ•2日前

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

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

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

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

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

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

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

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

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

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のほぼにち日記•10日前

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

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

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

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

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

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

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開発
プログラミングを頑張る土木系専攻大学院生のブログ•12日前

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

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

#fastapi#react#YouTube#API
なんでも書く•12日前

ChatGPT APIを活用したアプリ開発メモ

はじめに ChatGPT APIを使ったアプリを開発したい。 ChatGPT APIの使い方、アプリへの組み込み方のメモ。 前提 ChatGPTのアカウントは作成済み。 Plus版課金済みだが、API利用時はまた別の料金設定のため関係ない。 手順 アカウント作成 APIキーの発行 クレジットカードの登録 手順詳細 アカウント作成 ChatGPTにアクセスする。 chatgpt.com 右上の「無料でサインアップ」をクリックする。 画面の指示に従いアカウントを作成する。 APIキーの発行 ダッシュボードのAPIキー画面にアクセスする。 platform.openai.com 右上の「Create…

#プログラミング#ChatGPT API#ChatGPT#AI開発