React のルール – React

2024/04/21 136 users セクション アプリケーション 概念 プログラミング言語 ルール

様々な概念を表現する方法がプログラミング言語によってそれぞれ異なるように、React にも、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。 このセクションでは、自然な React コードを書くために従うべきルールを説明します。自然な React コー... 続きを読む

Reactを使ってプロダクト開発している開発者だけでなく、マネージャにも読んでほしい「Fluent React」 - ROUTE06 Tech Blog

2024/03/25 250 users マネージャ フレームワーク ライブラリ プロダクト 技術選定

チームでReactを使って開発していると、コードレビューをする際に、「この書き方はしない方がいいが、それを説明するには800文字くらい必要。図も描きたい。でもそれらを準備する時間はない。」ということが度々ありました。 また、フレームワークやライブラリの技術選定をする際、マネージャに「どうして技術選定が必要... 続きを読む

【2024年】React, Tailwind CSSでメルカリクローンサイトを作ろう【入門】

2024/03/23 317 users Tailwind CSS 入門

メルカリのクローンサイトを作りながら、React・Tailwind CSSが学べる本です。 続きを読む

Reactは悪い意味でも現在のjQueryだし、それを受け止めないと前に進めないということ

2024/03/18 166 users jQuery htmx 珠玉 CEO エッセイ

HTMXのCEOに就任したので[1]、記念に記事を書きたいと思います。 HTMXサイトのエッセイ[2]はどれも珠玉の出来で評判ですが、それらを読んでもわかるとおり、HTMXは「Webはこうあるべき」という主義主張のあるライブラリです。その主義主張のかなり初歩的な前提を書きたいと思います。 Reactはなぜだめか、という話です。... 続きを読む

Reactはなぜそんなに人気なのか？翳りは訪れるのか？

2024/03/03 110 users フレームワーク 好奇心 導入 実際 理由

導入 現在、ReactをはじめとするVueやSvelteなど多様なWebフロントエンドフレームワークが存在しますが、Reactが特に人気を博している理由について、単純な好奇心から自分なりに考察してみることにしました。 Reactの人気 Reactの人気の理由について考察するにあたり、まず、他のフレームワークと比較してReactが実際に... 続きを読む

新しい UI テストの手法を提供するテストライブラリ SafeTest

2024/02/25 100 users angular Jest Svelte playwright

新しい UI テストの手法を提供するテストライブラリ SafeTest 2024.02.25 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの... 続きを読む

フロントエンドを Vue.js から React にリプレイスしたお話 (前編) - NTT Communications Engineers' Blog

2024/02/18 125 users Vue.js フロントエンド Blog 前編

はじめての方、はじめまして。久しぶりの方、お久しぶりです。 イノベーションセンターの何縫ねの。(@nenoMake)です。 普段の業務ではソフトウェアエンジニアとして Node-AI という WEB アプリケーションの開発をしています。 パブリックな活動としては、好きな言語である C# 関係の OSS 開発や技術ブログの投稿、登壇な... 続きを読む

コストをかけずにWebサービスを公開するための構成例 - Qiita

2024/01/21 140 users Qiita Heroku PostgreSQL コスト 構成例

はじめに 個人でフロントエンド(react)、バックエンド(node.js)、データベース(postgreSQL)を利用したWebサービスを公開したいと考えていました。 まずはテスト的に無料で外部公開できるサービスがないか調査しましたが、2022年8月に有料化されたHerokuの記事ばかりヒットしてしました。 結果的には無料で使用できる構成... 続きを読む

useEffect: 基礎から使用すべきでない例まで

2024/01/04 215 users useEffect effect レンダリング 基礎 要素

はじめに useEffect について、きっちり調べようと思い調べてみた。公式ドキュメントのまとめ記事になっている。 useEffect 基礎編 useEffect とは Effect を用いるとレンダリングの後にコードを走らせることができ、React 外のシステムの要素と同期することが可能になる。 なぜ必要か まず、React コンポーネントの二種... 続きを読む

【TypeScript と友達に】Type Challenges を全問解いたのでエッセンスと推し問題を紹介してみる - 前編

2023/12/10 102 users Flutter TypeScript モバイルアプリ 修士

はじめに 自己紹介 初めまして、@kakekakemiya と申します。 現在は東京大学大学院学際情報学府の修士 1 年で、フロントエンドエンジニアとして活動しています（25 卒の就活生です）。TypeScript × React × Next.js が主戦場ですが、Flutter でモバイルアプリを開発するときもあります。 今回は自分の TypeScript 力の向... 続きを読む

ブラックフライデーで差をつける！ Udemyで今年最大級のセールが開催！ 生成AI、React、クリーンコードなど対象講座が1,200円より - はてなニュース

2023/11/17 111 users Udemy chatgpt 知見 生成AI ブーム

世界中を席巻した生成AIは、ブームに終わることなく着実に社会のさまざまな場面で利用が進んでいます。特にChatGPTを始めとするテキスト生成はビジネスシーンですぐに適用可能なケースも多く、使いこなす人とそうでない人には大きな差が生じつつあります。 使いこなすノウハウにも一定の知見が貯まっており、定番となる... 続きを読む

各種Prompt Engineeringの日本語実例集（Zero-CoT、mock、ReAct、ToT、Metacog、Step Back、IEPなど） - Qiita

2023/10/29 190 users tôt mock Qiita IEP cot

各種Prompt Engineeringの日本語実例集（Zero-CoT、mock、ReAct、ToT、Metacog、Step Back、IEPなど）Python機械学習入門ChatGPTLLM CoT、Zero-CoT、ToT、mock、ReAct、Step Back、Metacog、IEPなど、各種Prompt Engineering手法の概説と、日本語での実際のプロンプト例をまとめた記事です。 各種Prompt Engineering手法... 続きを読む

Hono + htmx + Cloudflareは新しいスタック

2023/10/09 179 users CloudFlare hono htmx フレームワー 一部

この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワー... 続きを読む

【永久保存版】0からReactを勉強するならこのロードマップに従え！ - Qiita

2023/10/04 150 users Qiita Sicut_study 独学 フロントエンド 言語

はじめに こんにちは！！@Sicut_studyです！ 最近フロントエンドを学ぶ機会が多く、色々試してみて今後 React が選ばれる場面が増えるのかなと思いました。 そこで初学者の方がJavaScriptの次に学ぶ言語の選択肢になりやすいのではないかと考え今回の記事を作成しました。 私自身、2022年9月に独学で React を学び始めま... 続きを読む

SvelteはなぜReactよりも優れているのか

2023/09/05 170 users Svelte リアクティブ Vue 浮き彫り モチベーション

Svelte は比較的新しいフレームワークです。主に、仮想 DOM の課題が浮き彫りになってきた後で、それを解消しようというモチベーションで開発されています。なぜ Svelte が React や Vue などのように仮想 DOM を採用していにないのかについて、この記事でまとめてみようと思います。 読み書きしやすい：リアクティブな... 続きを読む

Reactの再レンダリングを抑えるシンプルな方法

2023/08/31 129 users useCallback useMemo 再レンダリング 多く

はじめに 「React で再レンダリングを抑えたい...」となった場合、多くの人が React.memo や useMemo、useCallback などのいわゆる 「メモ化」 を思い浮かべることでしょう。 しかし、そういった「メモ化」を用いなくても再レンダリングを抑える方法が実は存在しています。 今回はその代表的な例を２つ紹介していきたい... 続きを読む

CSS・TypeScriptの相性が抜群。vanilla-extractが最高のCSS開発体験をくれた

2023/07/13 116 users vanilla-extract Sass state CSS

私はこれまで、 React ・ Next.js でのスタイリングには、CSS Modules + Sass を使っていましたが、最近は vanilla-extract を使うようになりました。TypeScript との相性が良く、長い間求めていたCSS開発体験が実現できるためです。 vanilla-extract とは、CSS を TypeScript で型安全に書ける CSS in JS です。 State ... 続きを読む

React/Next によるアプリケーション開発のこれから

2023/06/29 289 users NEXT アプリケーション開発

[スタディサプリ] Railsアプリケーションのモジュールとして存在していた Darklaunch (Feature Toggles) を Goアプリケーションとしてフルスクラッチでマイクロサービス化した話 続きを読む

WebRTC と React を組み合わせるなら Flux 設計が有効

2023/06/12 100 users Flux OGP WebRTC 反響 答え

この前ポジショントークしたらそれなりに反響があったので書いてみる。 これまでの人生を振り返ると毎年ラジオや電話や配信サービスを作っている気がするし、なんかそういう仕事が回ってくることが多い気がする。 最近自分なりに答えが出たかなと思ったことがあるので言語化してみようと思う。 OGP は Flux ぽい画像だ。... 続きを読む

コンポーネントベースで開発する時の CSS の書き方とコンポーネントの分類 (自己流)

2023/06/02 106 users コンポーネントベース Twitter Svelte CSS

React や Svelte でコンポーネントベースで開発するとき特有の CSS ノウハウってあんまり効かない気がする Twitter に書いたら反響があったので、自己流だけどまとめておく React Component の管理単位と、CSS としてのレイアウトの管理ポリシーは違うよね、みたいな話をマークアップエンジニアに時折されるが、そんな話... 続きを読む

絶対に画像をダウンロード&スクレイピングさせないWebページを本気で作ってみた

2023/05/26 260 users Webページ 画像 nginx Docker GatsbyJS

potpro (ぽとぷろ)Full-stuck engineer(Not Full-stack) JS/PHP/Go/Docker/Nginxなど。技術または趣味よりの発信ブログです。このブログ自体も自分がnetlify/gatsbyJS/Reactで書いてます。一部の記事はgithubアカウントでコメントできます。 絶対に画像をダウンロード&スクレイピングさせないWebページを本気で作ってみ... 続きを読む

Reactを使うならReact Developer Toolsの再レンダリング時ハイライトくらい設定してくれ

2023/05/21 246 users useState tl;dr モダンフロントエンド 最初 内容

モダンフロントエンドについて初めて書きます。お手柔らかに。 最近 React と Next.js に入門したのですが、入門時点で一番最初に知っておきたかったことについて書きました。 「React 初心者が useState とかを学習する前にまず一番にやることはこれ」っていう内容です。。 タイトルは自分への戒めです。 TL;DR この記... 続きを読む

useEffectをやめて、Suspenseを使おう

2023/05/05 132 users Suspense useEffect SWR データフェッチ

Reactコンポーネントの開発時、データフェッチは欠かせません。 SPAで開発を行う時、あなたも含めてuseEffect()を使ったことがあるはずです。 あなたがSWRやReact Queryの代わりにuseEffect()を使う理由は、いくつかあるのでしょう。 そんな方のために、Reactが提供する<Suspense>を使ってデータフェッチを行う方法を紹... 続きを読む

過激派が教える！　useEffectの正しい使い方

2023/05/03 214 users useEffect フック 筆者 過激派 要素

ReactのuseEffectは、フックの中でも使い方が難しいものの一つです。そこで、この記事では筆者が考えるuseEffectの望ましい使い方を皆さんに伝授します。 基本原則 技術やその要素の使い方を考えるにあたって、筆者が好んでいるのは基本原則を置いてそれに基づいて判断することです。ということで、この記事ではまず筆者... 続きを読む

CSS-in-JSのパラダイムシフト

2023/04/05 119 users CSS-in-JS パラダイムシフト tailwind 筆者

2023年現在、Reactでは多種多様なスタイリング手法が用意されています。 代表どころで言うとCSS ModulesやTailwind、CSS-in-JSなどが有名です。筆者の個人的な好みでは、これらの選択肢の中でもCSS-in-JSを用いたスタイルが特に好きですが、CSS-in-JSライブラリ群の中にはランタイムでスタイリング処理がなされる為にパ... 続きを読む