Cognitoのマネージドログインをnext.jsで実装 - Qiita
はじめに Cognitoのマネージドログインをnext.jsで実装してみました。next.js初心者なのであまり自信ないですが、参考になれば幸いです。実際のCognitoと連携できるかは確認できていないソースなので注意です。 ソース "use client"; import { useAuth } from "react-oidc-context"; function Page() { const auth = useAuth(); console.log("page.tsx起動"); const signOutRedirect = () => { const clientId = "YOUR_COGNITO_CLIENT_ID"; const logoutUri = "http://localhost:3000"; const cognitoDomain = "YOUR_COGNITO_
Reactチームが見てる世界、Reactユーザーが見てる世界
Reactはシンプルなサイトから複雑なアプリケーションまで、非常に幅広く採用されている人気のフレームワークです。OSS化から10年以上の歴史がありながら、昨今もReact Server Componentsなど革新的なアイディアを我々に提案し続けています。 一方で、React Server Componentsへの批判的意見やBoomer Fetching問題などを見ていると、Reactチームと一部Reactユーザーの間には意見の相違が見て取れます。この意見の相違はそれぞれが置かれた状況の違いから生じるもの、つまり「見てる世界が違う」ことに起因してると筆者は感じています。 本稿では「Reactチームの見てる世界」を歴史的経緯を踏まえながら考察し、Reactの根本にある思想やコンセプトに対する読者の理解を深めることを目指します。 要約 ReactはMetaの大規模開発を支えるべく開発され、シ
Dagger | We Replaced Our React Frontend with Go and WebAssembly
A few weeks ago, we launched Dagger Cloud v3, a completely new user interface for Dagger Cloud. One of the main differences between v3 and its v2 predecessor is that the new UI is written in WebAssembly (WASM) using Go. At first glance, this might seem an odd choice - Go typically isn't the first language you think of when deciding to program a Web UI - but we had good reasons. In this blog post,
Dockerを軽量化するマルチステージビルド(Next.jsとNest.jsのTypeScript開発) - Qiita
Dockerのマルチステージビルドとは Dockerfile内で複数のビルドステージを定義し、軽量な本番用イメージを作成するやり方です。これのおかげで大きなイメージ(例えば1.2GBなど)から、運用に必要な最小限のファイルだけを含む軽量なイメージ（例：100MB）にまで縮小することが可能になります。 Dockerって構築すると容量などが取られるのでそこがネックでしたが、それを解決する手法になりそうです。 メリット 不要なファイルやツールの排除ができ、転送・デプロイが高速になり最終イメージも軽量化できます。 デメリット Dockerfileの複雑化、中間ステージの内容が最終イメージに含まれずデバックが難しくなり、学習コストが増加します。 マルチステージビルドの仕組み 複数のFROM Dockerfile内に複数のFROMを記述することで、複数のステージを作成します。 ビルドステージ コンパイ
フロントエンドエンジニア（フルリモート可・フルフレックス）
フロントエンドエンジニア（フルリモート可・フルフレックス） ちょっと株式会社 @chot TypeScript React Vue.js Angular I want to hear a detailed 仕事概要 弊社はモダンなフロントエンド開発を得意とし、上場企業〜スタートアップまで様々な規模のWebサイトやアプリケーション開発の受託事業を展開しています。 創業から5年、おかげさまで多くのお客様からモダンなフロントエンド開発に強い会社として支持され、案件のご依頼が続いています。お客様のご要望にお答えするため、引き続き体制の強化を行っています。 現在の従業員数は50名。フルリモートの働き方を取り入れているため、従業員の約半分は東京以外の場所に住んでいます。またフルフレックスで自由な時間で働けるのも特徴です。 エンジニアは約30名が在籍しており、そのほとんどがフロントエンド開発を中心とした
ReactとHono.jsでAIチャットアプリを作る - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 0. はじめに この記事では、AIチャットアプリを作成していきます！ 最後まで読むと↓のようなアプリを作れるようになります 👏 工夫したポイント ストリーム形式でレスポンスを受け取る ユーザ体験の向上 ✨ 1. 技術スタック 1.1. Hono.js バックエンド（API）を作成します。 最近耳にする機会が増えたのでこれを機に触ってみたかったので採用しました。 ※フロント側で直接OpenAI APIを呼べばいいので、正直このチャットアプリにAPIは不要ですがHono.js使いたかったんです・・ ChatGPT曰く、以下のような特徴があ
React19のuseOptimisticとDnDを組みせるといい感じ
React19のuseOptimisticの使いどころがそんなにわからないなと思っていた昨今ですが、めっちゃハマる使いどころを見つけたので共有します！ useOptimisticってなに？ 「楽観的更新をするためのHook」と記載されており、「データの更新→ロード→更新されたあとのデータを表示」の動作のロードの部分を割愛するための仕組みで、確実にデータの更新ができるであろうケースに使用するとアプリを高速で操作できるように見せることができるようです。 useOptimisticの使用の有無の比較 なし あり なしのほうがアイテムを離したあとに少しカクついていることがわかります。 DnDでデータを並び替える実装をみる（なし） ドラックアンドドロップ（以下DnD）で操作を行う場合の多くはDropしたときにDBのデータも書き換えたいものだと思います。今回はリストを並び替えるという動作を例にあげます
【図解解説】React19の新機能を使って書籍管理アプリを開発するチュートリアル【Hono/TypeScript/TailwindCSS】 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに ついにReact19が安定版になりました！！！！ React19になったことで「サーバーコンポーネントの正式対応」や「アクションの追加」など大きな変更が入りました。 この変更によってShadcnなど多くのライブラリが対応を頑張っている状況です(おそらく裏では...) 今回はそんなReact19の中でも特に知っておきたい機能を中心に紹介していきます。 ちなみにReact19の機能は実験的に少し前から公開されており、世の中にはすでに多くの記事やYoutube動画があります。 しかしそれらの記事や動画を見て思いました… 自分の能力が
React Server Components を手軽に扱うフレームワーク react-server
React Server Components を手軽に扱うフレームワーク react-server 2025.02.01 react-server は Node.js で JavaScript ファイルを実行するかのように React Server Components を扱うことを目的としたフレームワークです。Next.js の機能が過剰に感じられるような小さなアプリケーションを開発する際に有用です。 2025 年 2 月現在 React Server Components を扱う方法として最も知られているのは Next.js を利用する方法でしょう。実際に Next.js は React Server Components が React の Canary の機能である段階で、すでに安定した機能として提供されていました。このため React Server Components が N
Next.jsのIntercepting RoutesとParallel Routesを使ってモダンなUXを実現する
今回はNext.js 13.3のApp Routerから導入されたIntercepting RoutesとParallel Routesを使用して、モダンなUXを実現する方法を解説します。 実際に動作するデモ https://nextjs-intercepting-routes-example-igz0.vercel.app/articles ※ モバイルでは通常の記事一覧表示になりますが、PCではサイドバーを使ったプレビュー表示になります。 ソースコード 1. はじめに このプロジェクトでは以下のような機能を実装します。 記事一覧ページ PC表示時は2カラムレイアウト 記事一覧の右側にサイドバーで記事プレビューを表示 モバイル表示時は1カラムレイアウト 通常の記事一覧ページを表示 記事詳細ページ PC・モバイルで共通のページ 通常のブログの記事ページのように記事の内容を表示 (1) In
【2025年最新比較】Flutter vs React Native どっちを選ぶ？クロスプラットフォーム開発フレームワーク完全解説 - コハム
Comparing Cross-Platform Frameworks: Flutter vs. React Native in 2025 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 1. はじめに 2025年のモバイルアプリ開発において、クロスプラットフォームフレームワークは、スタートアップから大企業まで、技術スタックの中で確固たる地位を確立しています。最大手のFlutterとReact Nativeは、マルチプラットフォーム開発戦略に関する議論を引き続きリードしています。 このブログでは、パフォーマンス、UI/UX機能、コミュニティサポート、企業での採用状況など、モバイルおよびWebアプリプロジェクト向けのクロスプラットフォームフレームワークを選択する際に重要な要素を検討し、FlutterとReact Nativeを比較します。
バックエンド出身エンジニアがReact/Next.jsに入門してみた話
今日からあなたはフロントエンドエンジニアです！ え、面接でバックエンド・インフラしかやってなかったって言ったのに！？フロント！？どうしよう 😭 [1] どうも、株式会社カナリーでお部屋探しマーケットプレイスの CANARY を開発している shusann です！ 本エントリーでは、 もしあなたが明日から急にフロントエンドエンジニアを任されることになっても困らないよう、私がこの半年間で何をどうやって学んできたかをシェアすることで道しるべとなれることを目指しています。 これから同じ境遇に立つ人やフロントエンド興味あるけど何から手を付ければいいかわからないようなエンジニアにとって、この記事が参考になれば嬉しいです 😍 とはいえ、本エントリーは半自伝的な記事で「ああ、こんなことやってたんだ」という読み物として話半分に読んでいただければ幸いです。 自己紹介 本題の前に、半年前の入社当時の自分の状
Next.js v15からはフォーム内容がリセットされる
最近いろんなプロジェクトをNext.js v14からv15にアップデート作業している@zaruです、こんにちは。 Next.js v15の大きな変更点はリリースノートなどで発表されていますし、アップグレードをサポートする codemod もあり、大半のプロジェクトは npx @next/codemod@canary upgrade latest を実行するだけで自動で修正されます。 しかし、Next.js v15のリリースノートには書かれていない（と思う）のですが、Next.js v15にはフォームをサブミットすると、フォーム内容がリセットされるように変更されています。これはv14とは異なる挙動です。 「フォームをサブミットすると、フォーム内容がリセットされる」とテキストで書くと、それはそうでしょう。なに当たり前のこと言ってるんだ？となるかもしれません。 実際に挙動を確認したほうが早いので
React と Next.js - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? React と Next.js 最近Difyを学習する機会がありました。 せっかくなので、Difyで作成したチャットボットをWebサイトに埋め込もうと思い、 Studio(ノーコードWebサイト開発ツール)で作成したWebサイトにチャットボットを埋め込んだのですが、あまりに大きすぎる... 結果、Next.jsを使ってWebサイトを作成した方が良いという情報があり、使ったこともないNext.jsについて調べ始めました。 Next.jsはReactをベースに開発されたフレームワークということで、Reactも合わせて学習します。 今回の学習
100秒テックの「React 19 がでた」を見たので、チートシートを作成してみました
はじめに 今回は、いつも楽しく拝見させていただいている「100秒テック」のakiさんとコラボしました！ まずは、とにかく動画をご覧ください！ 他にも役立つフロントエンド関連の技術動画がたくさんあるので、いいねとチャンネル登録をよろしくね！（言いたかったｗ） この記事では、タイトル通り、React19のチートシートとして活用いただけるように仕上げました。またサンプルコードは、できるだけ理解しやすいようシンプルにして、React環境にコピー&ペーストするだけで動作するようにしました。 動画と合わせて、この記事もReact 19の理解を深めるのに役立てていただけると嬉しいです。ぜひ、最後までご覧ください！ アクション アクションは、React 19を理解する上で欠かせない重要な概念です。このアクションを基盤として、様々な機能が追加されています。そのため、React 19で追加された機能を活用する
[React][L7] コンポーネン化する(Propsの利用) - Qiita
import { StrictMode } from "react"; import { createRoot } from "react-dom/client"; import { Todo } from "./Todo"; const rootElement = document.getElementById("root"); const root = createRoot(rootElement); root.render( <StrictMode> <Todo /> </StrictMode> ); import { useState } from "react"; import "./styles.css"; export const Todo = () => { const [todoText, setTodoText] = useState(""); const [incom
![[React][L7] コンポーネン化する(Propsの利用) - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/e8886b360d45886041706de805e85d777c901bff/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnNlY3VyZS5ncmF2YXRhci5jb20lMkZhdmF0YXIlMkZjOTQwNTJmNWU4MGEwMGQxZmY3YmM2ZTAyZjBmYTNlOD9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz05ZmUwMGFmY2Y2NDQ2OTRiNjlhNzhmODNmNzkwZmI4Mg%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D2cefb6f724a7fc588340ffcad99a0f49%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCUmVhY3QlNUQlNUJMNyU1RCUyMCVFMyU4MiVCMyVFMyU4MyVCMyVFMyU4MyU5RCVFMyU4MyVCQyVFMyU4MyU4RCVFMyU4MyVCMyVFNSU4QyU5NiVFMyU4MSU5OSVFMyU4MiU4QiUyOFByb3BzJUUzJTgxJUFFJUU1JTg4JUE5JUU3JTk0JUE4JTI5JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9YzkxYWVlZjBmYWQwNmIzNWU3NWVhMThjN2QzMDI2NGU%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDBKb2NodW4mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtcGFkPTAmcz1mZWE5Mjk1NDhhZGJiMDM3ZWEzM2M5YmU1MGZmNzBhMQ%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3Dc7101ba6ab8b9a17cebcd0e7469c772f)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js App Router: 関数宣言とアロー関数、どちらを使うべき？→どちらでもいい - Qiita
Reactでハマッた`&&`の罠 ~JSとJSXを正しく理解しよう~ - Qiita
【React・JavaScript】Reactで必須！配列操作を練習する問題集-filter編 #1 - Qiita
【JavaScript】Reactでも役立つ！mapメソッド練習問題集【基礎～上級】 - Qiita
