React タグの記事

Next.jsの新機能でTwitter上でも少しバズったのがServer Actionsです。クライアントコンポーネント上にサーバー上で行うロジックを直接書き込むことが可能です。

Playwrightあるいはそのロケーターの元ネタとなっているTesting Libraryでは、DOMを指定する方法として data-testid 属性を扱ったクエリーを提供しています。

お仕事をしていて、たまにRFCを読みたくなることってよくあると思うのですが、読む対象のRFCがたくさんあると、どれから読めばいいのかな？読み落としたのはないのか？みたいなところが脳のワーキングメモリーから溢れて収集がつかなくなりがちなので、Graphvizで出力してRFCの関連を簡単に確認できるツールを作ってみました。

最近、Next.jsが複雑になりすぎて、単なるウェブ画面を作る用途にはNext.jsは重すぎるので別のものが良いとか、Vercel統合のための機能が多いんでしょ、みたいな感想を見かけることが増えた気がします。特に管理画面とか社内システムとかですね。B2Cでも設定画面系とかは当てはまるかもしれません。

RecoilはFacebookのMeta社製のReact用状態管理ライブラリです。この分野はFacebook自体がFluxという概念を発表してから、さまざまなライブラリが開発されてきました。特に広く利用されたのがReduxです。

技術コンサルを行っているお客様から質問があったのですが、なかなかドンピシャな情報がなく、試行錯誤したのでその検討結果をまとめてみました。

前回の記事ではMermaid.jsをレンダリングしましたが、次はPlantUMLをレンダリングしてみます。こちらも、前回のMermaid.js同様、メンテナンスされているPlantUML対応コンポーネントはありません。PlantUMLもMermaid.js同様、多様なダイアグラムをサポートしています。

Mermaid.jsをReactで表示しようとしたものの、Reactラッパーとしてnpmに公開されているものがどれも古くてメンテナンスされていなそうという問題がありました。この手のアダプター系のライブラリはどうしてもメンテナンスがされなくて放置されるのが早くなりがちです。脆弱性が残り続けたりします。そこで自前でやったところ、思ったよりも簡単だったのでそのやり方を紹介します。

夏の自由研究ブログ連載2022の 5日目の記事です。今回は勉強中のReact、TypeScript、Goを使って掲示板アプリを作りました。

秋のブログ週間連載の6本目です。FutureにはCheetah Gridという最速のウェブフロントエンド用のテーブルコンポーネントがあります。会社のお仕事コードは基本的にVue.jsが採用されることが多く、Cheetah GridもVue.js版のコンポーネントも提供されています。僕はなぜかReact案件が多くて慣れていることもあり、ちょっとしたコードもReactで書きたいと思っています。ちょっとしたツールを実装する上でかっこよくて性能が良いテーブルコンポーネントも欲しいのでCheetah GridのReact版が欲しいなとずっと思っていたので、今回作ってみました。

お仕事コードで、「Cypressで頑張ったけどドラッグアンドドロップのテストができない」という相談を受けました。僕も試行錯誤してみたのですが、どうもうまくいかず・・・CypressとかのE2Eテストは、完全なユーザーの入力をエミュレーションするわけではなくて、ユーザーが入力したときに発生するであろうイベントを擬似的に作って投げているにすぎません。実際に発生するイベントよりも少ないです。例えば...

Firebaseを使って画面を開発してみようと思います。下記を最短経路で作ってみます。システムアドミンの人が使うようなマスタデータ管理画面を想定して、限られたユーザーにアクセスを制限すべく、認証機能も入れました。

TypeScriptは、JavaScriptのさまざまなフリーダムな書き方を受け入れ、漸進的な型付けを行えるようにするという~~狂った~~高難易度な目的のために作成されているのですが、そろそろ、TypeScriptファーストで、利用者にとって使いやすいAPIみたいな方向性で使われることも増えるのでは、という思いを強く持ちました。「

プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。

はじめまして、2019年4月入社_FRX_DigitalLibraryチームの丸野です。研修修了後PJにアサインされて約4ヶ月ほどReact.jsを使って開発を行ってきましたが、Reduxの理解にとても苦しみました。そこで今回はReduxの概要を噛み砕いて説明していきます。同じ悩みを持つ人の理解の助けになればと思います。