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 開発や技術ブログの投稿、登壇な... 続きを読む

Reactの状態を理解して適切にHooksを利用する

2024/02/03 89 users hooks コンポーネントベース UIライブラリ 状態 フック

Reactと状態は切っても切れない関係です。なぜなら、Reactは状態に基づいて画面を更新するコンポーネントベースのUIライブラリだからです🤝🏻 そんなReactの状態を管理・操作しやすくしてくれているのが、React 16.8から登場したフックです。それゆえ、フックを正しく利用するにあたってReactの状態の理解は非常に重要であ... 続きを読む

コストをかけずに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 / useHooks】開発不要で使える便利なカスタムフックス20選

2023/09/04 70 users window 自前 ライブラリ カスタムフック フロントエンド

フロントエンドで処理をカスタムフックス化する際、windowの高さを取得するなど、どのプロジェクトでもある程度決まったコードがありますよね。 useHooksはそういったカスタムフックスのライブラリとなっています。カスタムフックは自前で作ってしまうことが多いものの部分的に任せられるかなと思い、useHooksに登録され... 続きを読む

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

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

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

GPTが単純に回答するだけでなく、動的に振る舞えるようになる　Groundingを使ったプロンプティング「ReAct」の流れ

2023/07/23 60 users chatgpt プロンプティング GPT 蒲生 マイクロソフト

ユーザーの立場ではAIネイティブな働き方が身近に迫っており、データサイエンティストやMLエンジニアにとってはGPTを活用した開発を意識する必要が出てくる中、マイクロソフトの取り組みやML開発のパラダイムシフトをご紹介する「ChatGPTによって描かれる未来とAI開発の変遷」。ここで日本マイクロソフト株式会社の蒲生... 続きを読む

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 ... 続きを読む

Vue 2 から 3 へ移行しようとしたらいちばん大変なのが Vuetify 2 から 3 への移行だった話 - spacelyのブログ

2023/06/30 90 users spacely Vue 宮坂 ふだん フロントエンドエンジニア

はじめに 株式会社スペースリー フロントエンドエンジニアの宮坂と申します。 ふだんは3Dビューアやその編集画面のDOM部分をReactやVueで書きつつ、たまにフロントエンド開発環境構築おじさんとして他チームへ出しゃばったりして生きています。 今回はその環境構築に関わるところ、Vue 2 から 3 へ移行しようとしたらい... 続きを読む

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ページを本気で作ってみ... 続きを読む