🍃このブログは移転しました。
3秒後、自動的に移動します・・・。

React

Solid/Svelte/(P)Reactで、それぞれリストを描画するコードの比較

お題 配列に詰まったアイテムをそれぞれ表示する アイテムを表示するコンポーネントには副作用がある つまり、不要なre-renderを避けたい 今回は単に初期表示時点の`Date.now()` アイテムは増減する という、あるあるな要件を、それぞれのフレームワークだと…

ReactのSWRで、複数のキーをまとめてmutateしたい

たとえばページングが必要なリストがあって、そのリストをどこかで増減させた場合。いま見てるページに関わらず、全てのリストを最新のものにしたい・・って話。正規表現でも渡せればいいけど、`mutate()`には単一の文字列キーしか渡せないので、さてどうす…

Preactを使いたいのに使えない

という気持ちが高まったので、とりえあず2020年末の情報として、書き残しておくことにした。

Vue Composition APIとReact HooksとSvelteの違い

について、Vue Composition APIのDocsに記載があったので、自分用にメモ。 Composition API RFC | Vue Composition API このRFCが出たのは2019年の7月なので、ぜんっぜん目新しい情報はないです。

mobx-reactとmobx-react-liteと、それぞれのobserver APIの違い

わかってる側からすると無意識に選んでたけど、わかってない側からすると混乱するよなこれ・・。と思ったので、今さらではあるが言語化の意味も込めてメモ。

MobX作者による、RecoilとMobXについての簡単なまとめ

http://github.com/facebookexperimental/recoil 先日のReactEuropeで発表されたてホヤホヤの、ExperimentalなReact向けの状態管理ライブラリであるRecoil。ただAPIとかやりたいことを見てると、「MobXファミリーとの違いってなんぞ・・?」って個人的になっ…

React HooksとMobXをあわせて使う

最近はもっぱらWebRTCの世界にどっぷりでしたが、フロントエンドのこともちゃんとやってます!SkyWayにはショーケースとしてWeb会議アプリがあるんですが、それをこの度リライトしてました。リライトする理由としては・・・、 当時の設計ままでは改修が面倒…

React Today and Tomorrow and 90% Cleaner React の要点まとめ

React HooksにはじまりAlgebraic EffectsだFPだなんだと話題に事欠かない昨今ですが、そういうのは根本から見ていくに限る!ということで。ReactConf2018のHooksが発表されたセッションを見ながら書いたメモです。 React Today and Tomorrow and 90% Cleaner…

続・React x MobXな趣味プロダクトをTypeScriptでリライトした

React x MobXな趣味プロダクトをTypeScriptでリライトしようとした - console.lealog(); という記事を書いてから9ヶ月が経った・・・。ただ今回は「リライトしようとしてた」ではなく、今度こそついに「リライトした」ので、その過程やらハマりどころをメモ…

react-native-web と react-native-dom

`react-native-web`は去年くらいに話題になってたと思うけど、最近は`react-native-dom`なる別のやつが取り沙汰されてて、これらは何が違うの?という人へ。ずばりコレではあるものの、それでもわからんよって人のためへのメモ書きです。Difference between …

React x MobXな趣味プロダクトをTypeScriptでリライトしようとした

React x MobXでできてる自分専用の音楽ストリーミングサービスがありまして。冬休みなのでTypeScriptで書き直したりしてみようかなと思ってちまちまやってた。 ただ結局は自分一人しかコード書かないので、コスパに見合わないと判断して採用は見送った。 htt…

やっぱりサーバーサイドレンダリングなんかしなくていいやという気持ち

個人の意見 aka ポエムです。 界隈的には今さら感がすごいけど。そんな今さらポエった事情としては、 とある案件でSPAをReactで作りつつサーバーサイドレンダリング(以下SSR)をすることになるかも SPAじゃないページもまとめてReactでSSRすることになるか…

Use before declarationとかいうEdgeのエラー

ReactなプロジェクトでEdgeでだけ動かないケースがあって調べてた。 Expression-body arrow function parameter destructuring "Use before declaration" error when parameter is only used in an inner function · Issue #2606 · Microsoft/ChakraCore · G…

MobXを使ったアーキテクチャについて

いまさらですが、俺的Real world MobXです。 いちおう半年くらい仕事でも趣味でも触ってきてての今です。あくまで1つの例ですが、どこかの誰かの何かの参考になれば。

react-intlで属性値を多言語化する

単純なノードとしてなら、``とかそのまま使えばいい。 けど、`title`とか`alt`とか`placeholder`とか属性値およびそれ以外のフックとかでどうすんのってことを調べたメモ。もちろん、根本に`<IntlProvider />`がある前提は変わらず。</intlprovider>

これからMobXをはじめる人へ

さて、 #MobX に出会ってはや半年が経ちました。 相変わらずTwitterとか見てる限り、俺くらいしか使ってないのでは感を感じてたりはするんですけど・・。2016年の海外では割と話題になってた(と個人的には)思ってて、2017年になれば国内でもぼちぼち取り上…

React Nativeでアプリを作る過程で使うであろう画像について

以下の2つについて。 アプリ内で出す画像 App Icon XCode慣れしてないフロントエンドエンジニア向け。

0からはじめる MobX Part.2

第2回は、MobXのReactバインディングである`mobx-react`について。 GitHub - mobxjs/mobx-react: React bindings for MobX ちなみに、React Native用のバインディングとかもあります。

jsx-no-bindだとStateless Functional Componentsでpropsをハンドラに上手く渡せない問題

お前は何を言っているんだみたいなタイトルですが、つまり・・。 // 子 const SFC = ({ some, vars, and, handler, }) => { return ( <div onClick={handler}></div> ); } // 親 class Container extends React.Component { render() { // 略 <SFC {...item} handler={this.handler} /> } handler(ev) { // ココで子に渡したpropsを</sfc>…

TechFeed Live#2 「React vs Angular2」 に行ってきたメモ #techfeed

そもそものところで色々ツッコミたい気持ちはみなさんあるでしょうが、せっかく当選したので観戦に行ってきました。 React陣営は @koba04 & @yosuke_furukawa Angular陣営は @laco0416 & @armorik83 モデレータは @Shumpei メモは雑なので、漏れとか齟齬とか…

0からはじめる MobX Part.1

海外では去年くらいからRedux alternativeとして割と名前が上がってると思うのですが、国内はまだまだもっぱらReduxですねー。個人的には何でもいいんですけど、Reduxはもう色んな人がやってるし、自分は違う方面を掘ってみたいなーと思いつつ、 いつまでた…

React NativeでNativeからのイベントをSwiftで受けて使うには

またも何が言いたいんだみたいなタイトルですがようは、 Native側で特定のタイミングでイベント発火 それをjs側で監視 それを、Swiftでどう書けばできるようになるのかというメモです。 またもドキュメントにはObj-Cのことしか書いてません。 Native Modules

React NativeでNative機能をSwiftで書いて使うには

React Nativeの対応が追いついてないNative機能を使うには、自分でブリッジを実装する必要がある。ただ公式のDocsはほぼObj-Cのことしか書いてなくて、Swiftでもできるよ!って一言くらいしかない。 もちろん調べてもろくな例が出てこない!かといってObj-C…

React NativeでDecoratorsを使うには

mobxとか使おうとすると必要ですよね? そんなDecoratorsが使いたいって場合とかに、どうやって自前でプラグインを追加するかという話。デフォルトでもReactNativeは勝手にBabelでコンパイルしてくれるんやけど、その設定をどうやって上書きすればいいかとい…

第65回 HTML5とか勉強会 ー React最新情報 に行ってきたメモ #html5j

Angularの人が受付してるReactの勉強会に着いたやで— りぃ (@leader22) May 31, 2016 ちなみに、今年のHTML5 Conferenceは9/3(土)だそうです。

フロントエンドエンジニアが思うReact Native

いまさら感はなきにしも。Xcode7からお布施なしで実機インストールができるようになったので、これはもしやワンチャンあるかと思って調べたことのメモです。

#ウデマエアーカイブ をReactで書き直した件に関するメモ

スプラトゥーンのウデマエを可視化するサービスを - console.lealog(); イカのゲームが発売されたのが去年の5月。 ↑の記事を書いたのが去年の8月。 よもや1年に渡って同じゲームをやり続けることになろうとは・・・。

Reactのコンポーネントに小文字を使うと

ダメです。ドキュメントにも普通に書いてます。 JSX in Depth | React

#スーパーイカメーカー を支える技術

どうも、中のイカです。 昨日の15時頃に晴れてリリースしたコレですが、正直想定してなかったレベルで反響があって驚いてます。leader22.github.ioさてさて、というわけで恒例の裏側紹介記事です。

petehunt/react-howto の日本語訳

petehunt/react-howto · GitHub これの、2016/01/07時点での日本語訳です。 更新は追わないと思うので、流し読みにどうぞ。