TypeScript + Reactで特定の要素だけを受け付けるコンポーネントを型安全に実装する - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
ブラウザから MCP サーバーに接続する use-mcp React フック
React コンポーネントから MCP サーバーに接続する use-mcp フックを使用したコンポーネントの例を試してみましょう。2025-06-18 バージョンの MCP の仕様ではクライアントとサーバーのトランスポートの方法として stdio と Streamable HTTP が定義されていますが、use-mcp では Streamable HTTP による接続をサポートしています。HTTP もしくは SSE（Server-Sent Events）を使用して MCP サーバーに接続します。 MCP サーバーとして Git MCP を使用します。これは GitHub の任意のレポジトリを MCP サーバーとして利用できるツールです。public なレポジトリであれば認証無しで接続できます。URL はレポジトリの URL の github.com の部分を gitmcp.io に置き換え
Reactコンポーネントのレンダリング最適化（UTS Portalでの具体的事例）
LINEヤフー プロダクトストラテジ部の江口です。普段はバックエンドエンジニアとして業務に関わっていますが、今回はReact.jsについての記事を執筆します。この記事では私たちが開発する「UTS Portal」という社内向けプロダクトで発生していたReact.jsのパフォーマンス悪化問題について原因と改善内容をまとめたものです。 UTS Portalについて まず私たちが開発するUTS Portalについて説明します。 UTS PortalとはUTS（Universal Tracking System）という内製ログトラッキングシステムを利用する際に「どのようなトラッキングログを取得したいか？」を事前に定義・管理しておくためのポータルサイトです。 ログ定義を管理しておくことで、取得するログがユーザーのプライバシー侵害とならないかを事前にレビューする際や実際にログの取得を開始した後のモニタリ
なるべく楽する個人開発 (Claude,MCP Server,Next.js,Vercel,Obsidian)
はじめに こんにちは、BTMの坂本です！ エンジニアの皆さん、日々の開発業務お疲れさまです。 「もっと効率的に開発を進められないか」「面倒な作業を自動化したい」「とにかくもっと楽したい」 そんな風に感じることは多々あると思います。 今回はプロジェクト作成からデプロイまで、なるべく労力をかけない個人開発として、Claude/MCPサーバー/Vercel/Obsidianを使った開発を紹介したいと思います。 作成物 今回作成したもの。 不要ファイルの削除などは手動で行ったりしましたが、基本的に全てClaude経由で実装したものです。 （ファイル消し忘れがところどころに...） ※ リポジトリは予告なく非公開となる可能性があります。ご了承ください。 開発環境 作業フロー 開発シーケンス Windows環境
【初心者完全版】0からReact開発して基礎をマスターできる最強チュートリアル【図解解説】 - Qiita
はじめに こんにちは、Watanabe jinです。 ReactがAIも相まって選択されるケースが増えて学びたいと思っている人も多いかと思います。 私も過去にたくさんのReact教材をやりましたが、本当にやってよかったと思える教材はほぼありませんでした。 最初に選ぶ教材によってはReactの学習スピードは圧倒的に変わりますし、Reactの教材はJavaScriptの非同期処理やmapなどを踏まえて説明する必要があります。 このチュートリアルはそんな駆け出しエンジニアだった私に「これ1本だけやっておけば基礎は終わり」と言えるような完全版を目指して作成しました。JavaScriptがなんとなくという方でも最後まで絶対走りきれるように丁寧に解説しています。 最後までチュートリアルを行うと映画アプリが完成します。 動画教材も用意しています こちらの教材にはより詳しく解説した動画もセットでご用意して
GlueStack・npmパッケージに大規模サプライチェーン攻撃、週間100万DLのReact Nativeライブラリが標的に - イノベトピア
GlueStack・npmパッケージに大規模サプライチェーン攻撃、週間100万DLのReact Nativeライブラリが標的に Last Updated on 2025-06-09 07:57 by admin 2025年6月6日午後9時33分（GMT）、サイバーセキュリティ企業Aikido Securityが、npmとPyPIエコシステムを標的とした大規模なサプライチェーン攻撃を発見した。 攻撃者はGlueStackに関連する17個のReact Nativeパッケージを侵害し、合計で週間約100万回のダウンロード数を記録するこれらのパッケージにマルウェアを注入した。 影響を受けたパッケージには@gluestack-ui/utilsや@react-native-aria/focusなど17個が含まれ、lib/commonjs/index.jsファイルの変更を通じてリモートアクセストロイの木
React Native + Next.jsはいいぞ！（ほぼ）1人でショートドラマのWeb/モバイルアプリを爆速開発した話
こんにちは！テラーノベルでiOS/Android/Webとフロントエンド周りを担当している @kazutoyoです！ 3月に縦型のショートドラマサービス「テラードラマ」を公開しました！ テラードラマは、Web/iOS/Androidのプラットフォームで展開しており、React Nativeで開発しています。 今回はそのテラードラマにおける、React NativeとNext.jsの活用についてお話します。 なぜReact Native + Next.jsを選択したか 今回のテラードラマは、モバイルアプリ（iOS/Android)とWebで展開し、機能的にもほぼ同等で提供する必要がありました。 開発するエンジニアも少人数のため、基本的にはクロスプラットフォームで開発ができることが望ましかったです。 さらに、Webに関してはSEOなども意識して、各ページをサーバーサイドレンダリングする必要があ
How to use forwardRef in React - LogRocket Blog
LogRocket’s Galileo AI watches every session, surfacing impactful user struggle and key behavior patterns. Editor’s Note: This post was last updated by Jude Miracle on 13 August 2024 to introduce the use of the useImperativeHandle React Hook for customizing instance values that are exposed when using refs. It also now covers integrating forwardRef with functional components and class components. I
高品質かつ高速な画像生成AI「FLUX.1 Kontext」が登場したので使ってみた、テキストと画像の入力に対応しアニメ風も実写風も生成可能
画像生成AI「Stable Diffusion」の開発者らが設立したAI企業「Black Forest Labs」が、画像生成AI「FLUX.1 Kontext」を2025年5月29日にリリースしました。同時にBlack Forest Labs製のAIモデルを簡単に試せるウェブアプリ「FLUX Playground」も公開されたので、実際にFLUX PlaygroundにアクセスしてFLUX.1 Kontextを使ってみました。 Introducing FLUX.1 Kontext and the BFL Playground | Black Forest Labs https://bfl.ai/announcements/flux-1-kontext FLUX.1 Kontextは従来の画像生成モデルとは異なり、コンテキスト内で画像を生成するアプローチを採用しているとのこと。これにより、
あなたのReactフォーム、まだsetStateを分けてるの？一括管理の最適解はこれ！ - Qiita
はじめに Reactでフォームを作成する際、複数のinput要素の値を効率的に状態管理するには、handleChange関数をうまく設計することが重要です。本記事では、handleChange関数を使ってformDataの状態を一元的に更新する方法を紹介します。 よくある課題：inputごとに個別のsetState？ フォームに複数の入力欄があると、以下のようにsetState関数をinputごとに分けて書いてしまいがちです。 const [formData, setFormData] = useState({ name: '', email: '' }); const handleNameChange = (e) => setFormData({ ...formData, name: e.target.value }); const handleEmailChange = (e) =>
初めての AWS Amplify：簡単な React アプリを GitHub 経由でデプロイする手順をまとめてみた - Qiita
はじめに この記事では、AWS Amplify を使って React アプリを GitHub 経由でデプロイする方法を紹介します。 簡単に試せる構成になっているので、気になる方はスクロールしてみてください！ 書こうと思ったきっかけ 個人的にずっと使ってみたいと思っていたサービスだったのですが、実際には触れたことがなかったため、休みの日を利用して手を動かしながらキャッチアップしてみました。 構成はこんな感じです 引用画像：https://aws.amazon.com/jp/blogs/news/build-a-graph-application-with-amazon-neptune-and-aws-amplify/ なんとなく「便利そう？」というイメージは以前からあったのですが、実際に使ってみたら本当に超便利で、個人的にとても感動しました。 実際にやってみた 最低限の React + Am
Next.js × Supabase で始める認証付きユーザー管理アプリ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 本記事では、Supabase と Next.js（TypeScript） を組み合わせて、認証機能とプロフィール管理機能を備えたユーザー管理アプリの構築方法を紹介します。 ログイン機能を必要とする様々な Web アプリにおいて、認証基盤のひな型として応用できる内容になっていますので、ぜひ参考にしていただければ幸いです。 また、記事の内容は公式ドキュメントに沿っていますので、こちらも適宜ご参照ください。 本記事の構成 Supabase プロジェクトの作成 API キーの取得 Next.js アプリの構築 認証機能の実装 アプリの起動 1.
React Server Componentsを理解する | POSTD
React Server Componentsを理解する React Server Components（RSC）の登場により、Reactエコシステムにおけるサーバーレンダリングの重要性が高まりました。RSCを使用することで、デベロッパーは一部のコンポーネントをサーバー側でレンダリングしつつ、抽象化によりクライアントとサーバーの隔たりを感じさせないユーザビリティを実現することができます。Client ComponentsとServer Componentsをコード内に混在させることで、すべてのコードが1カ所で実行されているように見せることができます。 しかし、抽象化には常にコストが伴います。そのコストとはどのようなものでしょうか。RSCはいつ「使える」のでしょうか。バンドルサイズが小さくなると、帯域幅も狭まるのでしょうか。RSCを「使うべき」ときはいつでしょうか。RSCを適切に使う上でデベ
React Router の Server Components 対応
React Router の Server Components 対応 React Router はプレビュー版として Server Components に対応しました。これにより loader や actions を使用してデータを返す際にコンポーネント渡したり、Server Components ファーストのサーバーコンポーネントルートを作成できるようになりました。この記事では React Router の Server Components 対応を実際に試してみます。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 React Router はプレビュー版として Server Components に対応しました。これにより以下のような機能が追加されました。 loader や actions を使用してデータを返す際にコンポーネント渡せる
React Router RSC Preview
tl;dr React Router has preview support for RSC! Clone this repo to try it out RSC content from loaders/actions in existing routes RSC-first "Server Component Routes" Client components with "use client" Server Functions with "use server" Check out the demo Live Demo Source Code Middleware for batching and caching queries Stable release blocked by RSC support in Vite The preview uses Parcel Alternat
【図解解説】MCPを実装理解！Next.jsでAIアシスタントを開発するチュートリアル【Hono/TypeScript/Prisma】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに こんにちは、Watanabe Jin(@Sicut_study) です。 私はよくQiitaやZennなど技術記事サイトを見ているのですが、最近はランキングがMCPという技術の記事ばかりで埋まっていることに気づきました。 「MCP？こんなに話題なら勉強しておかないといけない」 解説記事を読んで以下の図をたくさん目にしました。 「なんとなくわかるけど、なんとなくしかわからない！！」 なんとなくイメージはわかるのですが、MCPが何故いいいのか、どのように使えるのかが説明できるレベルにはなれませんでした。 やはり文章の説明だけでなく
GitHub for Beginners: Building a React App with GitHub Copilot
Welcome to the next episode in our GitHub for Beginners series, where we’re diving into the world of GitHub Copilot. This is our sixth episode, and we’ve covered quite a lot of ground. You can check out all our previous episodes on our blog or as videos. Today we’re going to use GitHub Copilot to help us build a frontend project using React. In the previous episode, we created a backend API for t
Next.js を datadogで監視する - Qiita
最近業務でdatadogによる監視を入れてくれ！という依頼があり、Nextjs + Rails(api)という構成のアプリケーションにdatadogを導入しました。 せっかくなのでその手順等を残します。 また、長くなるのでfront・apiで記事を分けます。こちらはNextjsに関する記事です。 概要 まず、「Nextjsにdatadogを導入する」というのは何をすることを指すのか整理します。 datadogの監視ツールでよく利用されるものに、「APM（Application Performance Monitoring ）」や「RUM（Real User Monitoring）」があります。（他もありますが、今回利用するのはこれら二つです） Nextjsはフロントエンドなので、今回は「Nextjsに、datadogが提供するRUMを導入し、ユーザー体験を監視する」ということになりそうです
next.jsのみで簡易的な多言語対応をする - Panda Noir
next.jsのドキュメントには多言語対応のページがあります。 nextjs.org これを参考にすると、LPやホームページ程度であれば十分に多言語対応することができます。 next.jsだけでも出来ること 文字列を翻訳する アクセス時のaccept-languageヘッダーを見て自動的に言語を振り分ける (middleware.js) SSGで英語版、日本語版ページそれぞれ生成する (generateStaticParams()) あとは途中にコンポーネントが挟まるパターンに対応できれば、簡易的な翻訳としては十分です。 足りないもの: 途中にコンポーネントが挟まる翻訳 途中にコンポーネントが挟まるようなコンポーネントは、このようなコンポーネントです。 // 日本語版 <span><a href="http://example.com">解説</a>を読んでください</span> //英語
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React CSSファイルをあてる - Qiita
