流行り始めたtRPCでAPI通信を型にはめて開発しよう - Qiita
NTTテクノクロスの上原です。 この記事はNTTテクノクロスアドベントカレンダー2022、19日目の記事です。昨日は@kanaza-sさんの記事「PostgreSQL15のロジカルレプリケーションを触ってみる」でした。 tRPCとは何か 最近話題のtRPCですが、あらためて簡単に説明します。 tRPCは、TypeScriptの静的型指定情報を積極的に利用した、遠隔プロシージャ呼び出しのライブラリです。つまり別のサーバ上のコードの呼び出しを、プロシージャ呼び出しのように書くことができる機能です。 tRPCの特徴は、TypeScriptに依存していることと、スタブ・スケルトンといったコード生成を行わないことです。設定ファイルやIDLもありません。コードだけです。 tRPCとは何でないか RESTではない POST,GET,PUT,DELETEなどHTTPのメソッドを使いわけない。使いわけは、q
React Queryを状態管理ライブラリとして使い倒そう！/useQStateのススメ - Qiita
はじめに NTTテクノクロスの上原です。 この記事はNTTテクノクロスアドベントカレンダー2021 24日目の記事です。昨日は@watanyさんの記事」、明日は@j-yamaさんの記事になります。 自分は過去のAdvent CalenderではReact関連では(React Meets Grails、Grails React Scaffold、Redux Saga、Gatsby、React Spring、AirTableのAPPSをReactで作ろう)などを書いて来ましたが、結局1年ぶりに記事を書いています。もっともっとアウトプットしないといけないですね。 それはともかく、今回は「状態管理ライブラリとしてのReact Query」を紹介し、「useState感覚でクライアント状態管理する手法」 を提案してみたいと思います。何はともあれその手法とやらを先にみたい方はこちらのuseQState
あなたが知っておくべき最高のReactデザインパターン - Qiita
(原文) The Best React Design Patterns You Should Know About Reactの絶大な人気と実用性を否定することはできません。急速に変化するテクノロジーの世界では、すべての新しいフレームワークやツールに追いつくことは困難な作業です。 Reactはその使いやすさで、開発者にとって切望されていた安堵のため息をもたらしました。再利用可能なコンポーネント、優れた開発者ツール、広範なエコシステムは、Reactの最も愛されている機能のいくつかです。 DOM(Document Object Model)を直接操作するという伝統的なアプローチの代わりに、Reactは仮想DOMの概念という形で有用な抽象化レベルを導入しました。 React ライブラリは、テック大手 Facebook のエンジニア軍団によって積極的に開発・保守されています。これは、他のフレームワ
React-SpringのHooks APIでブラウザアニメーションを基本から極めよう! - Qiita
🎄メリークリスマスイブ!🎄 この記事は、React-Spring1というアニメーションのライブラリを紹介する NTTテクノクロス Advent Calendar 2019 の24日目の記事です。23日目は@yuitomoさんの記事、明日25日最終日は@korodroidさんの記事です。 2019年、令和初の年末も押しせまってまいりましたが、みなさん如何おすごしでしょうか? NTTテクノクロスの上原と申します。React/Gatsbyを用いた社内キュレーションサイトの構築や運用などを担当しています。当社では上記含め、SPAの開発にReactが採用されるケースも比較的多く、社外ブログにReactVRの記事を書いたり、去年のアドベントカレンダーイベントではGatsbyの記事「Reactベース静的サイトジェネレータGatsbyの真の力をお見せします」を書いたりしております。 はじめに Webサ
ionicとstencilの関係性について - Qiita
はじめに ionic4を触っていたらstencilという名の知らない奴が出てきたのでせっかくだから記事にします 公式サイト ionicのブログでstencilについて語っているやつ stencilとは 再利用可能なWeb Componentsのコンパイラ。 Web componentはブラウザに組み込まれているため、どんなフレームワークやフレームワークなしでも使用できる。 ionic4とstencilの関係 v4に更新するとStencilで作られたWeb componentに移植したIonicコンポーネントが使用される。 なのでionicの公式ブログでは特にstencilについて深く考えずに開発して問題ないとの事。 ComponentからWeb Componentになった事によりロード時間の大幅な短縮に成功した。 stencil導入で可能になった事 特定のフレームワークに依存しないで開発が
最新のVue3.0でウェブ開発はどう変わるか？ - Qiita
こちらの記事は、2019年1月に公開された『 What Does Vue 3.0 Mean for Web Development? 』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 補足: Vue3.0は2019年内もしくは2020年の初めにリリースされると予測されています。 2019年9月時点ではまだv2.6.10であること、ご留意ください。 はじめに 昨年11月、VueのクリエーターであるEvan Youは、Javascriptフレームワークの最新版となるVue 3.0の主要アップデートを紹介しました。 今回のアップデートによってVueはより効率的で、モジュール化され、さらに使いやすくなりました。 これらの変更と、Vue 3.0のリリースによる影響について説明します。 Vueの現在の状況は？ 彼らによると、Vueは「ユーザーアプリケーションを構築するためのプログレ
react-redux v7.1＋TypeScriptでconnect, mapStateToProps, mapDispatchToPropsを撲滅する - 文系プログラマによるTIPSブログ
ついに例の定型文3兄弟を除去する事ができるようになりました〜 github.com 先日react-reduxがv7.1にアップデートされ、そこでhooks対応の関数がいくつか追加されました。 今回紹介するものは「useSelector」「useDispatch」の2つです。 react-redux v7.1の新機能 useSelector useDispatch connect関数は不要になる v7.1とそれ以前のコードの比較 v7.1以前のTypeScript + react-reduxのコード v7.1以降のTypeScript + react-reduxのコード 全部入りのサンプルコード 万能ではない点に注意 雑感 react-redux v7.1の新機能 useSelector ざっくり説明すると、mapStateToPropsをhooks対応したものです。 useSelecto
React開発において便利なTypeScriptの型まとめ - Qiita
React開発において個人的に便利だなーと思っているTypeScriptの型をだだーっとまとめてみました。私自身もまだまだTypeScript修行中の身ですので、新たに気づいたものがあったら随時追記していきます。みなさんも「こういう使い方できるぜ！」みたいなのがあったら、ぜひ教えていただければと思います。 対象とする読者 最近ReactにTypeScriptを導入し始めた人 ReactにTypeScriptを導入してそこそこ経つけど、いまいち使いこなせてる気がしない人 TypeScriptにあまり詳しくない人でもわかるように説明しているつもりではありますが、以下の記事がTypeScriptの入門用に素晴らしいので、そちらを先に読むとスムーズに読み進められると思います。 TypeScriptの型入門 Partial React開発においてよく定義する型としてコンポーネントのpropsの型があ
Handsontable is a JavaScript data grid that looks and feels like a spreadsheet - Available for React, Angular, and Vue
JavaScript data grid with spreadsheet UX A front-end component that combines data grid features with spreadsheet UX/UI. Professional support included. Works with React, Angular, Vue, and plain JavaScriptGet Started What's new in v14.1.0 of January 16, 2024 → All spreadsheet featuresWhen you work with Handsontable, it's like you're working with Excel or Google Sheets. There's no steep learning curv
Storybookの旨味をしゃぶり尽くす
株式会社FOLIOのメンバーによるアドベントカレンダーです！ FOLIO Advent Calendar 2017: https://qiita.com/advent-calendar/2017/folio-sec… Storybookを取り入れたワークフローで開発を行ったところ、Storybookは単なるスタイルガイドツールではなく、ビジュアル実装のためのインフラであることを実感しました。 三度どころじゃなくおいしいなと感じているので、導入がまだならシュッと導入してしゃぶりつくして欲しいなと思いました。開発がある程度進んでからでも小さく導入できるので、予め考えておく必要のあることはあまり無いと思います。三度おいしいスライドと内容が被っていますが、おいしいものはおいしいので何度でもおいしいことを主張していきたいという思いです。 ストーリーを追加してビジュアルを実装するストーリーを追加してバ
Reactベース静的サイトジェネレータGatsbyの真の力をお見せします - Qiita
NTTテクノクロスの上原です。 業務では、社内情報のReact製自前キュレーションサイトの構築を担当しています。 この記事はNTTテクノクロスAdvent Calendar24日目の記事であり、社内の勉強会で発表した内容をQiita記事として書きなおしたものです。タイトルは釣りです。 (2018/12/28追記あり) 導入 記事を書いた理由 Gatsby.js(以降、Gatsbyと表記)はさまざまな高速化テクニックを用いた「爆速サイト生成」で有名なツールですが、そのリッチな機能性は、たとえばイントラ内サイト、業務システム開発、ツール開発などでも十分に活用できるものだと思い、その可能性を紹介するために書きました。 「静的サイトジェネレータ」って何？ いわゆる「静的サイトジェネレータ(Static Site Generator, SSG)」は、CMS(コンテンツ管理システム)の一種です。代表的
モバイル/オフラインでも動作するはてなブックマーク検索のPWAを作った
はてなブックマーク検索PWAというはてなブックマークでブクマしたデータをオフラインでも検索できるPWAを作りました。 サイト: https://hatebupwa.netlify.com/ ソース: https://github.com/azu/hatebupwa はてなブックマークの自分のブクマを検索できるPWAを作りました。 Service Workerに対応してるブラウザ(IOS Safari 11.3+を含む)ではオフラインでも検索できます。https://t.co/RCVkRYAFz0 モバイルはホームスクリーンアプリで、macOSはアプリ版もあります。https://t.co/5MDuyC9baN pic.twitter.com/KAc3KV690b — azu (@azu_re) April 16, 2018 使い方 使い方は特に難しい話でもないですが、次のように任意のはてな
SSR無しのReact・Angular製のSPAサイトはGooglebotにどれくらい認識されるのか？ - 文系プログラマによるTIPSブログ
実際私が開発している2サイトの実例出しますよ〜 WEBサイトの開発者に取って常に気になるこの話題について、今回は私が開発している2サイトを実例として、結果をお伝えしようと思います。 ※ 最後の「雑感」の後に、Angular製サイトをGolang化してみた結果を追記しました！ 概要 GooglebotはどれくらいのJavaScript処理能力があるか 前提 React製サイト: tree-maps サイトの開設日 PCデバイスでの認識 モバイルデバイスでの認識 サイトマップxmlとインデックスの登録数 Angular製サイト: StringUtility サイトの開設日 PCデバイスでの認識 モバイルデバイスでの認識 本来レンダリングされる筈の画面 サイトマップxmlとインデックスの登録数 botはServiceWorkerのhtmlを取得しているのかどうか サイト上で確認できるServic
Redux-Observable Epic vs Redux-Saga: 何が問題なのか | POSTD
まず、このバトルに関わるには、JavaScriptとReduxの知識が必要です。知識がない人には、このブログ記事は向いていません（話についていけませんから）。残りの人は、一緒に難題を解決していきましょう。 Reduxには、副作用を取り扱うための所定の方法がありません。そう、これは 祝福であると同時に呪いでもあります。 最善策はこれだ、という結論がまだ出ていないので、かなりの数の選択肢が流布しています。SlackやNetflixのような大きな会社がRxJSと Redux-Observable を選んだのに対して、Reactネイティブの開発者たちの間で人気が高いのは Redux Saga です。 うわべを取り繕った記事を書くつもりはなく、道理をわきまえるつもりもありません。私は、この対決を「戦い」に持ち込むつもりなのです。thunkで満足していて、好意的な意見を期待している人は、読まない方がい
React Studioを使ってQiitaの記事一覧アプリを作成してみる - Qiita
はじめに 前回の記事で大きな反響を頂いたので、本記事では、 簡単なQiitaの記事一覧アプリの作成を通して、手順を説明したいと思います。 完成版はこちら https://neonto.cloud/u/yuxiotest/ プロジェクトの作成 ReactStudioを開き、「Create new project」をクリックします。 プロジェクト画面が開かれます アプリのタイトルの設定をします アプリ全体のスタイルを決めます プロジェクトマップから「Screen」を選択します 必要なコンポーネントをあてはめる ナビゲーションバーを入れる場合、 nav barにチェックを入れます。 カードを入れます コンポーネント化させます コンポーネントさせると以下のようにプロジェクトマップに反映されます カードのコンポーネントを選択し、 テキストとボタンを入れます ダブルクリックして、 テキストに「記事のタ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React without memo
How to Start Testing Your React Apps Using the React Testing Library and Jest
React.js–Get started in Dart #3
GitHub - mbasso/react-wasm: Declarative WebAssembly instantiation for React
GitHub - reach/router
