React 使いじゃなくても知っておきたい教養としての ReactWake Career 主催「夏の『りあクト！』勉強会〜教養としてのReact／React Nativeのすすめ〜」のセッションで使用したスライドです。
Go言語で学ぶWebアプリケーション開発1：[React + Vite + Go]
はじめに Go言語は、その高速な実行速度とシンプルな文法から、Webアプリケーション開発に非常に適したプログラミング言語です。 特にGoは、サーバーサイドのバックエンドやAPIサーバーの構築に高いパフォーマンスを発揮します。 また、React + Viteなどを使うことで、モダンなフロントエンドも簡単に構築できます。 今回は、Goをバックエンド、React + Viteをフロントエンドにし、簡単なフルスタックアプリの作成手順を解説します。 対象読者 GoでWebアプリを作ったことがない方 Reactを使ったフロントエンドの連携を体験したい方 シンプルなフルスタックアプリをで作成してみたい方 目次 開発環境の構築 バックエンド(Go+Gin)の作成 ルーティングの設定 CRUD APIの実装 CORS対応の設定 フロントエンド(React + Vite)の作成 Reactプロジェクトのセット
![Go言語で学ぶWebアプリケーション開発1：[React + Vite + Go]](https://cdn-ak-scissors.b.st-hatena.com/image/square/f8e56b79e629c0b9811ccc14743f69087ade76b0/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--TkJIhZEQ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3AGo%2525E8%2525A8%252580%2525E8%2525AA%25259E%2525E3%252581%2525A7%2525E5%2525AD%2525A6%2525E3%252581%2525B6Web%2525E3%252582%2525A2%2525E3%252583%252597%2525E3%252583%2525AA%2525E3%252582%2525B1%2525E3%252583%2525BC%2525E3%252582%2525B7%2525E3%252583%2525A7%2525E3%252583%2525B3%2525E9%252596%25258B%2525E7%252599%2525BA1%2525EF%2525BC%25259A%25255BReact%252520%25252B%252520Vite%252520%25252B%252520Go%25255D%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3AHiroki%252520Urabe%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzI4NmEwZTdkZjMuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
React デザインパターン
はじめに 長らくReactを雰囲気で書いてきました。コンポーネントを作り、propsを渡し、状態を管理する基本的な概念は理解していたものの、より体系的なアプローチや設計パターンについては深く考えずにコードを書いていました。しかし、より大規模で保守性の高いアプリケーションを構築するにつれ、単なる「動くコード」を超えた、堅牢な設計原則の必要性を痛感するようになりました。 この記事は、私自身の再学習を共有するものです。 ※2025/04/21時点、私が関わっているプロダクトのCrowd AgentのReactのバージョンは"18.3.1"です。 目次 Reactデザインパターンとは HOC (高階コンポーネント) パターン[※React18以降では、カスタムフック推奨] Provider パターン Presentational と Container コンポーネントパターン React Hook
【図解解説】これ1本12分でReactのコンセプト全20種を理解できる教科書 - Qiita
はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 ReactはAIブームなども相まって人気のJavaScriptフレームワークです。今後も更にReactを利用したアプリケーションは増えることが想像できます。 Reactのコンセプト(基礎)をしっかりと理解することは、効率的で保守性の高いアプリケーション開発において不可欠です。今回はそのなかでも特に大切なものを20個解説していきます。 この記事を読むことで Reactの基礎から応用までの体系的な知識を一箇所で習得できる コンポーネント設計やステート管理など、直面する課題に対する解決策を理解できる パフォーマンス最適化やエラー処理などアプリケーション開発に必要な知識を得られる 最新機能（React 19、Suspenseなど）について学び取り入れられる 面接や技術的な議論の場で、Reactについて自信を持って説明
React Three Fiber入門 - ReactとThree.jsで始める3D表現 - ICS MEDIA
「React Three Fiber」は、Three.jsをReactで扱うためのライブラリです。Reactの特徴である再利用可能なコンポーネントを活かしながら、宣言的に3Dシーンを構築できるのが大きな魅力です。 通常のThree.jsでは、メッシュの作成、マテリアルの適用、シーンへの追加などひとつひとつの処理を命令的に記述する必要があります。しかしReact Three Fiberを使えば、裏側の複雑な処理をライブラリ側が担ってくれるため、作りたいシーンをコンポーネントとして宣言でき、処理の流れがわかりやすいコードが書けます。 ▼ 通常のThree.jsで立方体メッシュを記述する例 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshNormalMaterial(); const box = n
Reactで大量描画しても60fps出すためのパフォーマンスチューニング術 - SmartHR Tech Blog
こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業員数が多いとブラウザ上での操作が重くなってしまうという問題がありました。 最近「数万人規模の組織図での 60fps」を目指してこの組織図機能の描画パフォーマンス改善を行ったので、その中で実践したフロントエンド開発における大量描画処理の Tips を共有します。(React を前提としています) そもそも問題はどこにあるのか 最近まで、SmartHRの組織図機能は数万人規模の企業で十分に使えるような作りになっていませんでした。というのも、対象従業員数が数万人を超えてくると、いろんな操作が著しく重くなり、実用に耐える操
良いReactを書くことは凡事徹底だと考えている話 - カミナシ エンジニアブログ
カミナシで、Webフロントエンドエンジニアをしている osuzu です。 これまでフロントエンド専門外のエンジニアからReactを学ぶ良い方法やお勧めドキュメントを聞かれる度に、 公式ドキュメント のリンクを貼る日々を過ごしてきましたが、何かすごい上達方法がないものかと普段意識していることをこの記事で書き起こしてみました。 文字にした結果、中身になにか特別なことや魔法のテクニックは一つもなく、むしろプログラミング一般に通ずる話ばかりになりましたが、（自戒も込めて）凡事徹底することの難しさもあると感じておりその一助になれば幸いです。 ※ 凡事徹底：平凡なことを非凡なほどに実行すること。一つ一つの理解や実行は平易でも、それを実践し続けるのは難しい。 React Server Component（以下RSC）を採用するかで変わる部分もありますが、記事の例はClient Componentの話が中
【図解解説】これ1本12分でReact Hooks 全20種を理解できる教科書 - Qiita
はじめに こんにちは、@Sicut_studyです。 Reactを勉強するとまず最初に勉強するのがuseStateなどのHooksだったと思います。 useStateやuseEffectなどは利用する場面が多く慣れている方も多いと思いますが、その他のHooksはどうでしょうか？そもそも名前すら知らないというHooksがたくさんあるかと思います。 その中には利用することでパフォーマンスを向上させたり、ステートを簡単に扱えるようになるものなど便利なものがたくさん用意されています。 React19の登場でuseActionStateやuseOptimisticなど絶対に覚えて活用していきたい重要なHooksも登場しております。 この記事ではそんなReactで用意されている全てのHooksを12分で読める内容にして紹介していきます。 最後まで読めばどのタイミングでどのHooksを選択すればよいかわ
Create React Appが非推奨となり、これからは主にフレームワークを利用することになりそうなので軽くおさらいしてゆく
Create React Appが公式で非推奨となりました 2010年代の後半から長らくReact環境構築のデファクトとなっていた% create-react-appですが、先日（2025-01-29）に公式で非推奨となりました。 2016年頃に、webpack(+dev-server, style-loader), Babel, ESLintといったモダンフロントエンド開発で必須となる静的解析ツール+コンパイラの環境構築を誰でも簡単に構築できるようFacebookから公開されたのが初めてで、現在は アクティブなメンテナが不在であること 各フレームワークなどでそれぞれ環境構築が提供されていること といったような理由から非推奨となったようです。 今回は、これからの代替となりそうなフレームワークやライブラリのおさらいを改めて行いたいと思います。
Dockerでバインドマウントするのやめません？もうCompose Watchでいいでしょ？Docker composeの新機能を使い倒そう
はじめに Docker × VueやReactなどを使用して開発を行う方は多いかと思いますが、その際結構ハマるのがnode_modulesあたりではないでしょうか？ 特にnode_modulesをバインドマウントすることによって、ホスト側のnode_modulesが空になったり色々とややこしいですよね。沢山の賛同の声ありがとうございます！そうですよね！(🤔) 実はDocker compose 2.22.0以降で使用可能となったCompose Watchの機能を使えば、ややこしいバインドマウントのことを考えなくても良くなったりします。 またnode_modulesに焦点を当てていますが、Compose Watchで以下のことが可能なので多くの人のためになるかと思います！ ホスト側のファイルの変更をコンテナに反映させる package.jsonに変更が入ると自動で再buildしてくれる ぜひ
React19のuseOptimisticとDnDを組みせるといい感じ
React19のuseOptimisticの使いどころがそんなにわからないなと思っていた昨今ですが、めっちゃハマる使いどころを見つけたので共有します！ useOptimisticってなに？ 「楽観的更新をするためのHook」と記載されており、「データの更新→ロード→更新されたあとのデータを表示」の動作のロードの部分を割愛するための仕組みで、確実にデータの更新ができるであろうケースに使用するとアプリを高速で操作できるように見せることができるようです。 useOptimisticの使用の有無の比較 なし あり なしのほうがアイテムを離したあとに少しカクついていることがわかります。 DnDでデータを並び替える実装をみる（なし） ドラックアンドドロップ（以下DnD）で操作を行う場合の多くはDropしたときにDBのデータも書き換えたいものだと思います。今回はリストを並び替えるという動作を例にあげます
フロントエンドの定番ライブラリ「React 19」の新機能を紹介──新しいAPI
対象読者 新バージョンでReactを体験してみたい方 すでにReact開発に従事していて、新機能を知りたい方 Reactの最新動向を追っておきたい方 なお、本記事はReact 18で導入された「トランジション」や「Suspense」に関して基本知識があることを前提としています。 前提環境 記事のサンプルコードは、以下の環境で動作を確認しています。 Ubuntu 22.04 React 19.0.0 Node.js v22.7.0 Google Chrome 130.0.6723.92 サンプルコードを実行するには、サンプルのフォルダーでnpm installコマンドを実行してライブラリーをダウンロードした後、npm startコマンドを実行し、 https://localhost:3000 をWebブラウザーで表示します。本記事内ではReact 19の新機能に関する本質的な部分を抽出して説
フロントエンドの定番ライブラリ「React 19」の新機能を紹介──アクションによる非同期処理の進化
はじめに Reactは、2024年12月にリリースされたバージョン19（以下「React 19」）において、非同期処理に関して大きな進化を遂げました。ReactはMeta社（旧Facebook）とオープンソースコミュニティによって開発されており、動的なWebページのインターフェースを構築するためのJavaScriptライブラリーです。 2022年3月にリリースされた前バージョンReact 18では、「並行レンダリング」や「トランジション」「Suspenseの拡充」など、どちらかというとレンダリング性能の改善にフォーカスしたものが多かったのに対し、React 19では「非同期処理」、特に「フォーム送信」や「データ更新」にフォーカスしているようです。 React 19の概要は、公式ブログ記事で紹介されています。 React 19 RC の公式ブログ記事 本記事では、React 19の新機能のう
【Vite + React】3分で使えるようになるVite + React入門（初心者向け）
この記事の筆者：三好アキ 🟢 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。 🟢『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／*韓国でも出版）』著者。 ▼ Amazon著者ページはこちら amazon.co.jp/stores/author/B099Z51QF2 ★ 本記事の最終更新日：2025年6月9日 本記事は、1年以上にわたりGoogle検索で公式ページよりも上位（or 次位）に表示されている記事です。非常に多くの人に読まれているため、常に最新の情報へとアップデートを重ねています。ぜひ活用してください。 それでは以下、本編です。 create-react-appとVite + React 私は2021年から、React
100秒テックの「React 19 がでた」を見たので、チートシートを作成してみました
はじめに 今回は、いつも楽しく拝見させていただいている「100秒テック」のakiさんとコラボしました！ まずは、とにかく動画をご覧ください！ 他にも役立つフロントエンド関連の技術動画がたくさんあるので、いいねとチャンネル登録をよろしくね！（言いたかったｗ） この記事では、タイトル通り、React19のチートシートとして活用いただけるように仕上げました。またサンプルコードは、できるだけ理解しやすいようシンプルにして、React環境にコピー&ペーストするだけで動作するようにしました。 動画と合わせて、この記事もReact 19の理解を深めるのに役立てていただけると嬉しいです。ぜひ、最後までご覧ください！ アクション アクションは、React 19を理解する上で欠かせない重要な概念です。このアクションを基盤として、様々な機能が追加されています。そのため、React 19で追加された機能を活用する
【図解解説】これ1本でGraphQLをマスターできるチュートリアル【React/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)です。 今回はGraphQLの初心者向けチュートリアルを行っていきます。 REST APIと肩を並べて知られるGraphQLですが、なかなかイメージがしづらく初心者には難しいものです。私も駆け出しの頃に勉強しましたが全然身につけることができませんでした。 GraphQLのクエリのイメージがしづらい DBとGraphQLをどう接続すればいいかわからない 実際にアプリケーションと組み合わせる方法がわからない このように教材をやりながら感じていました。 GraphQLはふわっとし
【図解ハンズオン】たった60分でReactを使った音楽プレイヤーを作ろう！【TypeScript/Shadcn/TailwindCSS】 - Qiita
はじめに こんにちは、Watanabe Jin(@Sicut_study)です。 普段はReactを使った実践的なハンズオンを投稿しています。 今回はApple Musicのようなかっこいい音楽プレイヤーを作成したいと思います。 実際にデプロイすればオンラインで音楽を聞くことができる実用的なものになっているので、ぜひハンズオンをして学んでみてください。 動画で解説 この記事よりももっと細かいところまで知りたい方は動画教材もあります。 もしReactやTypeScriptに不安がある方、やったことがない方は以下の動画をみてください！ 対象者 Reactを初めてやる HTMLの経験がある JavaScriptをもっと学びたい TypeScirptを学んでみたい 今回のハンズオンはReactの基本が学べるので、Reactを全くやったことがない人におすすめです。 1. Reactの環境構築 Rea
業務システムのモダナイズを始めました〜RoRからFastAPI × next.jsへ
はじめに この記事では、詳細な技術の話は割愛しています。 「なぜモダナイズをやろうと思ったのか?」 「どんな課題意識があったのか?」 「具体的にどうプロジェクトを進めてきたのか?」 といった、課題設定・意思決定のプロセスに重点を置くことで、同じような境遇にあるチームの意思決定の材料になればと思っております。 RoRの限界...? ダイレクト出版の業務システムはRoR(v6.1)で動いてきました。リリースから6年ほど経っているでしょうか。このシステムは何をするものかというと、例えば、 商品を管理する 顧客を管理する 注文内容を設定する 一斉配信メールを送信する マーケティングオートメーションを設定する 各種分析を行う など、業務に関わるありとあらゆることを行っています。ソースコードは10万行程度で、中堅システムといった具合でしょうか。 実はこのシステム、そこまでレガシーというわけではなく、テ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactの内部構造を知っておく (React Tokyo #6 - @calloc134)
徹底解剖！ 医療業務システムのReactコンポーネント設計 / Deep Dive into React Component Design for Medical Systems
