次世代のReact？ Solid.jsについて
最初に Solid.jsとは Solid.jsとはReactに大きく影響を受けたライブラリであり比較的新しいライブラリです。私が興味を持ったのも2021年のState of JSを見て、Solid.jsの満足度が以下の画像のようにReactやSvelteよりも上位であることに驚き、調べたからで、それまでは存在すら知りませんでした。 この記事の目的 Solidについて興味を持ったため簡単にSolidについて調査した結果を書いていこうと思います。また、Solidの認知度が少しでも上がり、開発手段の一つとして名前が上がるようになればと思っています。 SolidとReactの差 今回は主な違いでけを取り上げます。細かく知りたい方は公式サイトをご確認ください。 仮想DOM まず大きな差が仮想DOMを使っているのかどうかです。Reactで仮想DOMを使っているのは有名で、仮想DOMのおかげで高速なSP
Reactで生HTMLを自由自在に加工する
こんにちは。クレイの浅海です。最近の休日は3歳児とマイクラをしています。 さて、業務ではここ1年ぐらい、DocBaseのフロントエンドのフレームワークをBackbone.jsからReact.jsに変更する作業をしていました。 完全に作り直しです。2万行を超えるBackboneのコードとお別れをしました。バイバイバックボーン。 詳細 → DocBaseのフロントエンド改修をどのように進めたか Reactで実装する上で苦労した点 DocBaseにはReactとマッチしない機能もいくつかあり、Reactで実装する上で苦労しました。その一つが、メモの表示です。「メモ」というのは、DocBaseの投稿の単位です。メモは例えばこのような投稿 メモの内容は、ユーザが投稿したmarkdownをサーバでHTMLに変換しデータベースに保存、それを表示時にサーバから受け取ったHTMLをReactが表示することに
React におけるローディングの状態管理について - freee Developers Blog
エンジニアの @_tohashi です。freee developers adevent calender 5 日目をやっていきます。 React などを使用した UI コンポーネントの実装、特に状態をどこで管理するかというのは実装者やアプリケーションの要件によって分かれがちなポイントであると思っていて、例としてはフォームの入力値、ダイアログの開閉、スピナーの表示などが挙げられます。各種ドキュメントや Issue, Example を見ても様々な流派があり、結局のところ Redux の FAQ にもあるようにこれが正解といったものはなくモデリングや要件に応じて適宜判断すべき話ではあるのですが、チーム開発においてはある程度方針を統一しておく必要があるでしょう。 本記事ではそうしたコンポーネントの状態管理のうち、特に非同期処理が絡んできて複雑になりがちなローディングについて自分の経験をもとに実
Enzyme vs React Testing Library結局どっちがいいのか問題に対する個人的な回答 - Qiita
Write tests. Not too many. Mostly integration. * 1 テストを書こう。多く書かなくていい。ほどんどインテグレーションテストでいい。 ReactでコンポーネントのUnit/Integrationテストをする時、現時点で多く使われているのがEnzymeとReact Testing Libraryです。公式Doc上でも両方に言及されていて、どちらか一方が圧倒的な支持を受けている訳でもないです。 この記事では、EnzymeとReact Testing Libraryどっちにしたらいいの？？という問題に対して私なりの回答をまとめていきます。端的に言うと、単純にどちらのライブラリが使いやすいかどうか以上に、テストに対する考え方の問題だと考えています。 Enzymeで書く場合 Enzymeではshallow render機能やDOM query selec
React HooksのuseStateがどういう原理で実現されてるのかさっぱりわからなかったので調べてみた
Reactのhooks、すごいですよね。関数コンポーネントの自由度があがって色々実現できそうです。 私はReactについては2年ぐらい知識止まってるので、かなり衝撃的でした。ContextとかSuspenseとかいろいろ増えてて今更追いつくのは難しいけど、hooksはちょっと使ってみたいなーと感じました。 そんなhooksですが、使い方はそこそこわかるけど動作原理がさっぱりわからなかったので、ちょっと調べてみました。 そもそもHooksってなに hooksは関数コンポーネントからReactのいろいろな機能をフックでき、自分で汚く実装するんじゃなくてReactが面倒見てくれるよーってやつです。useStateで状態を持たせることができ、useEffectでcomponentDidMountみたいなことを実現、あとほかにもuseXXX系がいろいろ、という感じです。 useStateを例に見てみ
React Hooksでデータを取得する方法 - Qiita
Robin Wieruch氏によるHow to fetch data with React Hooks?を著者の許可を得て意訳しました。 誤りやより良い表現などがあればご指摘頂けると助かります。 原文： https://www.robinwieruch.de/react-hooks-fetch-data/ このチュートリアルでは、ステートフックと副作用フックでデータを取得する方法を解説します。テック系の人気記事を取得するためによく使われるHacker News APIを利用します。また、アプリケーション内の任意の場所で再利用したり、スタンドアロンのnodeパッケージとしてnpmに公開したりできるデータ取得用のカスタムフックも実装します。 React のこの新機能が初見であれば、まずReact Hooks入門に目を通してください。完成したプロジェクトでReact Hoos でのデータ取得事例
Fragment をコンポーネントのトップに置くのはアンチパターンではないかと考える | stin's Blog
Fragment をコンポーネントのトップに置くな「Fragment をコンポーネントにトップに置く」というのは下のようなコンポーネントを作成することを指します。 export const MyComponent = () => { return ( <> <h1>This is a sample code.</h1> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Dui
今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界
この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb
ぼくのかんがえたさいきょうの useState + useContext よりも Redux のほうが大抵勝っている
「Redux は学習コストが高い」などと言って useState（または useReducer）と useContext を組み合わせ 劣化 オレオレ Redux を作ってしまうのを見かけます[1]。よくないことだと思いますが、気持ちは非常にわかります。Redux エコシステムがそういう気持ちにさせてしまう部分は大いにあります。 Redux は それ単体なら 学習コストは useReducer + useContext と同等であることを示してこの気持ち（誤解）を解かしつつ、なぜそういう気持ちになってしまうのか考察してみます。 まず useState と useReducer の違いを押さえておく 知っている方はスキップしてください。 useState と useReducer は本質的には同等で、どちらもコンポーネントにステート（状態）を持たせる役割があります。次のようなカウンターアプリ
Reactのレンダリングに関する完全ガイド - Qiita
この記事はComplete Guide to React Rendering Behaviorの翻訳記事になっています。 ご本人(Markさん)にも許可を頂いて翻訳しております。 こちらの記事がReactのレンダリングを理解する上で今までで一番体系的で一番分かりやすかったので、ぜひ紹介したく翻訳させて頂きました。 翻訳ツールにもたくさん助けてもらいながら行い、意訳が出来ていない部分が多々あるかと思いますので修正依頼を出して頂けると幸いです！ Twitterでも、フロントエンドに関する事や、アメリカでのエンジニア経験に関してツイートしているので、よかったらフォローお願いします。 Twitter: @hellokenta_ja 下記から本文です。 Complete Guide to React Rendering Behavior この記事は、Reactレンダリングがどのように振る舞うか、Co
React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する｜ハイクラス転職・求人情報サイト AMBI（アンビ）
React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する React Nativeは、クロスプラットフォーム開発を行うためのツールの1つです。JavaScript言語の中で、UIフレームワークのReactを用いてUIの記述と状態管理を行うことで、アプリの動作を組み立てます。本記事では、React Nativeの導入やモバイルアプリ開発の現場で起きがちな課題を解決する手段としての強みについて解説します。 ReactとReact Native Reactとは／React Nativeとは／React Nativeの正体 React Nativeの環境構築 npm文化圏の流儀にのっとったワークフロー／スタイル定義／npmのライブラリ使用／リッチな機能を追加 広がるReact Nativeの世界 Windows向けのMS公式実装／ブラウザ向けの逆輸入／
Reactの最強フレームワークGatsby.jsの良さを伝えたい！！ - Qiita
Gatsby.jsって？ この記事はGatsby.js Advent Calendar 2019 1日目の記事です。 2日目の記事は@aimofさんのJSの文法すら怪しいフロント初心者がblog用のgatsby starter（っぽいもの）を自作・公開してみたです!! Gatsby.jsはReactで作られた静的サイトジェネレーターです。内部的にGraphQLを用いてデータを取得し、markdownからHTMLを生成、などの処理を簡単に行うことができます。 静的サイトジェネレーターが何かと言うと、何かしらの言語で書かれたソースから、静的なHTML/CSS & JavaScriptを生成するツールのことを言います。 今現在どの静的サイトジェネレーターが人気かというのを一覧で見れるStaticGenサイトもあります。 Starの数を見るとあのnuxtよりも多いんですよね、日本で使っている方をあ
Reactで開発するチームが共通認識しておきたい重要な概念 - KitchHike Tech Blog
SFC, Redux, HOCなどコンポーネント指向とReact開発のキーワード CTOの Shoken です。キッチハイクでは2年前にRailsへのReact導入、1年半前に0ベースからReact Nativeでアプリ開発を始めました。この記事では、React, React Nativeで開発しているチームが共通認識したいReactの重要な概念について紹介します。 2018/11/07 追記（はてブコメントより） Reactリポジトリで名称の変更が行われ、変数名やクラス名が変更されました。いままでの Functional Component が Function Component となり、 Stateless は使わなくなって Function に統一されるようです。 Terminology: Functional -> Function Component #13775 Before
ReactとVueを改善したSvelteというライブラリーについて - Qiita
海外のフロントエンド界隈で話題になっているSvelte 最近海外のフロントエンド界隈でSvelteが少し話題になっています。 この記事では、なんでSvelteが話題になってるのか、そしてReactやVueの代わりに、Svelteを使うメリットについて私が感じたことを共有していけたらと思います。 My talk from @YGLF_IL, 'Rethinking Reactivity', went online yesterday — https://t.co/eoGiBBAkKI. You probably don't have time to watch a 35 minute video though, so I'm going to pull out a few key slides into a quick tweet thread: — Rich Harris (@Rich_H
React+Fluxで正しく設計するためのFlux見直しガイド
Reactの良さを活かしやすいFluxは、Webアプリケーションの設計手法としてずいぶん馴染みのあるものになったように感じます。私もFluxを取り入れた開発を2年近く経験し、知見も溜まり、使い慣れたような気持ちでいました。 が、使い始めた頃はもちろん、今でも何となく分かったつもりでいる部分があったり、複雑な実装が必要な場面で悩むことがあったりします。「Fluxはダメだ！うまく実現できない！」と投げ出したくなるときもありますが、そんなときこそ基礎へ立ち返る機会。 そんなわけでFluxに再入門し、Fluxとは何なのか、どう実装するのが適切なのかを公式ドキュメントに則って整理してみようと思います。 Fluxとは Dispatcher 要件1 イベントが発生したらすべてのCallbackを実行すること 要件2 Callbackの実行順序を制御できること Action Actionに必要なたった2つ
実践: React Hooks - mizchi's blog
hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。 最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useEffect についてはライフサイクルのモデルがぜんぜん違うので、別の説明をする必要があるように感じていました。 で、その結果 React Hooks を理解するには、関数のメモ化を理解するのが最も簡単だと思ったので、その説明をしつつ、イディオムを解説していこうと思います。 最初に: React Hooks は何であり、何ではないか 関数コンポーネントが状態を持てるようにするもので、関数のメモ化のテクニックを多用しま
React/Redux約三年間書き続けたので知見を共有します | Enigmo Life
Enigmo Advent Calendar 2018の4日目の記事です。 この記事の目的 Enigmoが運営しているBUYMAでは古代から運用しているjQueryの他に、2016年頃から一部ページのフロントエンドをReact/Reduxで構築しています。 私自身もEnigmoに入社してからの約三年間でReact/Reduxアプリケーションの開発に多数携わってきましたので、そこで培った知見を共有したいと思います。 React/Reduxの利点 まずはじめに、ReactとReduxを使うメリットを再確認しておきたいと思います。 それぞれのメリットをしっかりと認識しておくことで、実装する際どう書くか迷ってしまった場合などにそのメリットを最大限活かす選択をすることができます。 Reactの利点 コンポーネント化が容易で再利用性が高い 状態をDOMから分離できる(Stateless) Reduxの
React の Higher-order Components の利用方法 - Qiita
前書き この資料は2016/12/15 に行われた【ランサーズ×Mozilla×freee】React実践！勉強会で発表した際の資料を改修したものです。 (qitta に投稿するのが初めての場合、2MBまでしか画像をアップできないので、編集してます) 間違いなどがあれば、コメントや編集リクエストなどをいただければありがたいです。 目次 対象読者 HOC とは何か？ HOC の基礎 実際に利用されているライブラリについて HOC の具体的な実装例 対象読者 Reactを利用してアプリケーションを作成したことがある人 ReduxやFluxなどのフレームワークを利用したことがある人 HOC とは何か？ A higher-order component is just a function that takes an existing component and returns another c
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JSXの中にインラインスクリプトを埋め込む - React | nju33
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
