宣言的UIとは何か、皆さんは答えられるでしょうか。 「あーあの、DOM更新を直接プログラムに書くんじゃなくて、JSXとかであるべき状態を宣言したらライブラリが自動的に差分適用とかでDOMを更新してくれるやつでしょ？」 もちろん、このような答えは間違いではありません。しかし、特にAsync Reactの時代においては、Reactの考えはさらに先を行っているようです。 究極的には、宣言的UIは、やりたいことをロジックとして記述するだけで、具体的なことや細かい最適化はよしなにやってくれるものだという考えが伝わってきます。上述のようなDOMの更新の話はその一例にすぎません。 やりたいこと: 特定の形のDOMを画面に表示したい。 具体的なこと: Reactランタイムがコンポーネントツリーを実行してDOMを更新する。 最適化: DOMをいい感じに差分更新する。 また、useStateなどといったステー
はじめに この記事のゴール Reactを使っていると、useStateやuseEffectを「こう書けば動く」という形で覚えていることが多いのではないでしょうか。 const [count, setCount] = useState(0); useEffect(() => { console.log(count); }, [count]); このコードは動きます。しかし、なぜ動くのかを説明できるでしょうか。 なぜuseStateは配列を返すのか なぜsetCountを呼ぶと再レンダリングされるのか なぜuseEffectの依存配列に値を入れると、その値が変わったときだけ実行されるのか なぜHooksを条件分岐の中で呼んではいけないのか この記事では、これらの疑問に答えるために、Hooksの仕組みを実際に実装しながら学んでいきます。最終的には、Hooksが「魔法」ではなく、JavaScrip
Zennでは、「記事」や「本のチャプター」のMarkdownエディタのベースにCodeMirrorというライブラリを使っています。これまではCodeMirrorのv5を使っていた（正確にはv5に依存するラッパーライブラリを使っていた）のですが、古いバージョンを使い続けるリスク解消と更なるエディタの拡張性を得るため、CodeMirrorのv6にアップグレードすることにしました。 本記事では、CodeMirror v6の基本的な知識部分から、ZennのMarkdownエディタを実装するまでのカスタマイズ方法を紹介します。 CodeMirrorの基礎知識 はじめに CodeMirrorはWeb上にコードエディタを実装するためのライブラリです。標準で多くのプログラミング言語に対応したシンタックスハイライトや入力補完、折りたたみ、キーマップ、マルチカーソルなど、モダンなコードエディタに必要な機能を備
ハイクラス求人TOPIT記事一覧React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ React 18とSuspenseの基本 ─ フレームワークの選択やReact Server Componentsなど新しいベストプラクティスを学ぶ 群雄割拠のフロントエンドフレームワーク界でも、一歩抜きん出た存在として常に注目を集めてきたReact。2022年3月にリリースされたバージョン18では、Suspenseの安定化やStreaming SSRのサポートなど数々の新機能を取り入れて話題になりました。本記事では、React／TypeScriptのスペシャリストとして幅広く活躍されているuhyoさんが、現時点におけるReactのベストプラクティスについて解説します。 Reactは、Meta社により開発・公開
こんにちは、フロリアでQAエンジニアをやっている中園です。 現在サイボウズではkintoneのフロントエンドリアーキテクチャプロジェクト（フロリア）と称して、Closure Tools から React へと置き換えるプロジェクトが進行中です。 今回は、フロリアのチームの1つであるMiraチームのテスト手法について紹介します。 フロリアの詳細については次の記事をご覧ください。 フロリアについて フロリアでは、次のような構成でそれぞれのチームがオーナーシップを持って活動しており、テストの方針はチームごとに決めています。 プロダクトオーナー: 1名 エンジニア: 3-4名 QA: 1名 スクラムマスター: 1名 フロリアのチーム構成 チームのミッションに合わせたテストの目的 Miraチームでは、kintoneのデザインやふるまいを変えずに、利用者に気づかれない形でReactに置き換えるというミ
const atom = (initialValue) => ({ init: initialValue }); const atomStateMap = new WeakMap(); const getAtomState = (atom) => { let atomState = atomStateMap.get(atom); if (!atomState) { atomState = { value: atom.init, listeners: new Set() }; atomStateMap.set(atom, atomState); } return atomState; }; const useAtom = (atom) => { const atomState = getAtomState(atom); const [value, setValue] = useState(a
React でユニットテストをするときのベストプラクティスはいつも悩むのですが、とりあえず 2021 年 2 月時点では、こうかなーというのをまとめてみます。 まずテストランナーは jest で確定です。ここで悩む要素はまずありません。 では、React のテストをどうやるか？です。 公式の react-dom/test-utils を使う 公式の react-test-renderer を使う @testing-library/react を使う 選択肢としてはこの三種類が有名なところでしょう。 公式という響きはとても魅力的ですが、実は公式ドキュメントから「ボイラープレートを減らすため、エンドユーザが使うのと同じ形でコンポーネントを使ってテストが記述できるように設計されている、React Testing Library の利用をお勧めします。」という形で、@testing-library
去年末に Facebook の人達が出した React Server Components というものが、React 界隈に激震を及ぼしていますが、速報以外でこの技術について言及している国内のブログが見当たらないため、この記事で解説してみます。間違いや分かりづらい部分があればぜひツッコミをお願いします。 React Server Components は、ただのサーバーサイドレンダリングではありません。クライアントサイドレンダリング（SPA）とサーバーサイドレンダリングを、ギアを切り替えずにいいとこ取りする仕組みです。これまでに存在した様々な技術よりも踏み込んで、フロントエンドとバックエンドの境目を曖昧にしてしまうユニバーサルな技術です。 勝手な造語としていうなら「コンポーネント指向ユニバーサルウェブ開発」とでも呼ぶべきものでしょう。 そして、これはただのユニバーサルなだけの仕組みではあり
この記事は Build your own React を翻訳したものです。 Reactを1から書き直していきます。 実際のReactコードのアーキテクチャに従いますが、最適化機能と必須ではない機能は今回は実装しません。 Step 1: createElement関数 Step 2: render関数 Step 3: 並列モード Step 4: ファイバー Step 5: Render Phase と Commit Phase Step 6: 差分検出 Step 7: 関数コンポーネント Step 8: Hooks Step 0 復習 最初にいくつかの基本的な概念を確認しましょう。 React、JSX、およびDOM要素がどのように機能するかをすでに理解している場合は、この章はスキップしても構いません。 今回は、次のわずか3行のコードをReactアプリの例として使用します。 const ele
数日前（4/21頃）に Next.js のチュートリアルが一新されました。 Next.js は 3 月頭に ver 9.3 がリリースされ、ビルド時に静的に HTML を生成する関数などが追加されるなど、今までよりもかなりパワフルになり、いわゆる JAMstack と呼ばれるようなアプリケーションを作りやすくなりました。 そのバージョンアップに対応するかたちで、チュートリアルも大幅に書き直されました。 参考（開発チームの @chibicode さんのツイッター） Next.jsの公式チュートリアルを最新版に沿ってゼロから書き直しました! 🎓英語ですが初心者向けです! ⚛️最近導入されたgetStaticProps等の関数や、 🎨CSS Modulesの解説をしています! 🗣ブログを作りながら学びます 🤗ご感想お待ちしております!https://t.co/R4j9vpAQoc — S
昨日、Facebook製のReact用ステート管理ライブラリRecoilが発表されました。Facebook製といってもReact公式のステート管理ライブラリとかそういう位置付けではないようですが、それでも大きな注目を集めているのは間違いありません。 そこで、筆者がRecoilに対して思ったことや、筆者の視点から見たRecoilの特徴を記事にまとめました。 なお、この記事の執筆時点では副作用の扱いなどの点はいまいち情報が揃っていません。この記事では速報性を重視し、コアのステート管理部分に絞って考えています。また、まだexperimentalなライブラリなので、今後この記事の内容からRecoilのAPIが変化したとしても悪しからずご了承ください。 この記事を書くときに筆者が色々試していたCodeSandboxはこちらです。 https://codesandbox.io/s/recoil-san
実践 Off the main thread 実際に Off the main thread をやりつつ、パフォーマンスチューニングをする際にどこに気をつけるべきかを今やっているので、それについて話します。 Off the main thread とは JavaScript の処理は基本的にメインスレッドで実施します。JavaScriptの実行処理以外にも記述された内容を解釈するためのパース処理やGC処理もメインスレッドをブロックします。メインスレッドの処理が多いとUI jankと呼ばれるガタツキ、チラツキ、画面の固まりの原因になります。 UI jankが発生していると、ユーザーがクリックしたり、text入力をしようとしてから反応するまでの時間（Input Latency）が即時ではなくなります。 このUI jankを無くすために、なるべくメインスレッドを阻害する要因を減らすことが Off
hooks が発表されてから趣味でも現場でもずっと hooks を使っています。おかげでだいぶこなれてきて、だいたいなんのライフサイクルでも表現できるようになってきました。 最初は単に useState が state を、 useEffect が componentDidMount/componentDidUpdate を置き換えるもの、と説明を済ますつもりでしたが、 useEffect についてはライフサイクルのモデルがぜんぜん違うので、別の説明をする必要があるように感じていました。 で、その結果 React Hooks を理解するには、関数のメモ化を理解するのが最も簡単だと思ったので、その説明をしつつ、イディオムを解説していこうと思います。 最初に: React Hooks は何であり、何ではないか 関数コンポーネントが状態を持てるようにするもので、関数のメモ化のテクニックを多用しま
今まで自分で作ったものが十数個、仕事で5社ぐらいの redux を見てきたので、その結果思うところを書く。 前提として、自分はエコシステムに乗るという意味で今では redux 肯定派だが、redux それ自身が過剰に抱えている複雑さはもっと分解されるべきだ、という立場。 Redux がうまく設計されているとどうなるか 一貫した一つの設計論に従うので、考えることがなくなる 難しさが廃されるのではなく、難しい部分が一箇所に集中する。React Component の末端では、何も考えることがなくなる。状態管理という難しい部分を作る人と、末端のコンポーネントのデザインに注力する人を分けられる。 大規模になっても設計が破綻しにくい、というエンタープライズ向きな特性を持つ。が、その技術基盤は(静的)関数型由来の考えが多く、基礎設計や基盤理解にはハイスキルが要求され、需要と適用対象のミスマッチを感じる
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
共著者として参加していた書籍『React，Angular，Vue.js，React Nativeを使って学ぶ はじめてのフロントエンド開発』が、2018/5/9に技術評論社さまより発売となりました。 React、Angular、Vue.js、React Nativeを使って学ぶ はじめてのフロントエンド開発 作者: 原一浩,taisa,小松大輔,永井孝,池内孝啓,新井正貴,橋本安司,日野洋一郎出版社/メーカー: 技術評論社発売日: 2018/05/09メディア: 単行本（ソフトカバー）この商品を含むブログを見る どんな本か React、Angular、Vue.js、React Nativeそれぞれが、同じサーバのAPIを参照し、同様の機能を持ったアプリケーションとして作成します。React Nativeは、ネイティブアプリを開発するためのフレームワークなため、SPA（Single-page
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? ReactやVueなどコンポーネントベースで作っていくViewのライブラリが普及したことで、コンポーネント指向での開発が一般化してきた昨今のフロントエンドですが、このコンポーネントの設計に悩まれる方も多いのではないでしょうか。 コンポーネントをどの粒度、どんな状態で分割するのが良いのか、などなど、特にチームで開発する時に認識が揃っていないとカオスになりがちな部分であると思うので、自分なりの設計をする際の指針を言語化しようというのが本記事の目的です。同じように悩まれている方にも何らか示唆を提供することができたら嬉しいです。 想定読者 「コ
Ring UIを発表します。Ring UIはオープンソースのWeb UIコンポーネントです！ JetBrainsは何年にも渡ってRing UI ライブラリを開発してきており、複雑なUIコントロールを提供します。Ring UIは50を超えるReactコントロールからなり、シンプルなリンクやボタンに始まり、デートピッカーやデータリストといった洗練されたコントロールまで揃っています。 このライブラリはYouTrak、Hub、Upsourceをはじめとする製品でフル活用されています。そしてJetBrainsはこのライブラリを今後も引き続きメンテナンスしていくことにコミットします。 Ring UIライブラリを使う場面として一つあげられるのがHubのダッシュボードに組み込みカスタムウィジェットの開発です。Ring UIを使うことでお馴染みのJetBrainsのインターフェースに馴染みます。是非クイック
先日行われたFacebookの開発者向けイベント「F8」で、React Fiberの発表が行われていました。 といっても、React関連の新しいプロダクトが発表されたというわけではなく、Reactが一から書き直されたということのようです。 ReactはなぜFiberで書き直されねばならなかったのか？Fiberが解決しようとした課題は何なのか？ その答えを聞くために、React Fiber現状確認というブログエントリで大変詳細にFiberの事を解説されていた小林徹 (Twitter: @koba04)さんに、実際のところを詳しく伺ってきました。 React Fiberとはなんなのか、そしてReactの将来像を探ってみます。 React Fiberとは？ 白石 React Fiberってなんですか？まずは概要を教えてください。 小林 Facebookが先日のF8カンファレンスで発表した、Rea
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
