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

react

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

Renderにフロントアプリをデプロイする

生成AIを使ってゼロからWebサービスをつくる - 山羊の午後５日目！ ローカルでフロントとバックの繋ぎこみができたので、いよいよ本番環境にデプロイしていきます。と、書きましたが、そもそもWebサービスを公開するってなに？？？というところから何もわかっていないので、まずは何をしたら良いのかChatGPTに聞きます。その結果、デプロイという作業が必要なことを把握しました。 デプロイ。かっこいいやん、よし、やってこー。無料でWebサービスをホストしてくれるサービスについてWeb検索してもらいながらChatGPTに解説してもらいます。 その結果、Vercel、Render、Herokuなどのサービス…

関連ブログ

山羊の午後•1日前

フロントとバックの繋ぎこみ：CodeSpaceでのCORS設定

生成AIを使ってゼロからWebサービスをつくる - 山羊の午後４日目。フロントとバックをつないで動かすぞ、という日。 これが、、、大変だった。ローカルで二つアプリを実行して通信させるだけ、なのですが。 ですが、ネットワーク知識があまりないので、都度ChatGPTに聞きながら、現象を理解しつつエラーを解消していく、というのがなかなか手間でした。そして、今回、開発環境としてGitHub Codespaceを利用しました。 これがなかなか罠だった。半クラウド環境というか、ローカルとは違って開発環境とリモートで繋がったWeb画面IDEで作業しているので、ネットワーク環境が複雑なんですな。。。上手くいっ…

#生成AI#Codespaces
山羊の午後•8日前

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

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

#生成AI#react
山羊の午後•9日前

生成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のブログ•11日前

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

#プログラミング#プログラミング初心者#JavaScript