保守性の高いReact hooksコードの指針
前提 本記事は保守性の高いReact hooksコードの指針を記述します。指針はtipsに近いものから原則に近いものまで雑多に含まれます。総じてReact hooksの標準的なAPIを上手く扱う方法が多めです。 これらは保守性の低いコードを反面教師とした私的な経験則に基づきます。（思い出し次第随時追加していきます） ご留意ください。 解消したい痛み 再現が困難な不具合の発生 容易に無限ループが発生しうる 不具合発生箇所の特定が手間 分岐が多くコードリーディングに手間がかかる 解消する手法 useEffectは１ページに１つ useEffectにdeps自動補完除外コメントを入れる stateはプリミティブにする propsにフラグがある場合はコンポーネントを分ける useEffectは１ページに１つ 悪例: ユーザーイベントの処理 const [foo, setFoo] = useStat
Blazor ComponentsをJavaScriptからインスタンス化出来る機能のサンプルコードを追って拡張してみよう - Qiita
Blazor ComponentsをJavaScriptからインスタンス化出来る機能のサンプルコードを追って拡張してみようC#TypeScriptReactWebAssemblyBlazor これは 「祝 .NET 6 GA！.NET 6 での開発 Tips や試してみたことなど、あなたの「いち推し」ポイントを教えてください【PR】日本マイクロソフト Advent Calendar 2021」 の19日目の記事です。 もうすぐ25日ですね、引き続き楽しんでいきましょう。 さて、カレンダーのエントリ時には「Blazor WebAssemblyとNativeについて書くかも」としていましたが、作っているネタの進捗が悪いので、別のアツい.NET 6 + Blazorネタをご紹介します。 PreviewやRCのリリース時にも面白いネタをガンガン投稿してくれる .NET Blog ですが、「ASP.
React.useEffectの分かりにくさをなんとかしたい
useEffect(() => ..., [])って書いてあっても、ぱっと見どんな役割なのか分かりづらいですよね。コードの可読性が上がるようにちょっとした工夫を考えてみました。 (2021.11.27) react-useを追記しました。 useEffectが分からない U-motion開発部ではフロントエンド開発に使用するライブラリをAngularJS → Reactに移行しました。大きな規模のコードを複数人で開発することになるため、勉強会を開いて書き方のキャッチアップやよりよい手法の共有を行っています。そのなかで説明に結構困るのがReact.useEffectです。 副作用 (effect) フック により、関数コンポーネント内で副作用を実行することができるようになります もうこの時点で何を言っているのか分からない感じもするわけですが、ReactのuseEffectにはいくつか困った点
React NativeでAndroid/iOSのクロスプラットフォーム開発 「出前館アプリ」開発で必要なスキル
LINEのAndroid開発はどのように行われているのか——。LINEの7事業でそれぞれ募集するAndroid開発について、横断的に紹介する採用イベントで、田中優之氏が「出前館アプリ」のAndroid開発について詳細を紹介しました。 ゲームのアプリ開発から出前館へ 田中優之氏（以下、田中）：出前館の事業に関して、京都開発室の田中からお話ししていきたいと思います。それではよろしくお願いします。 今日はまず自己紹介をして、出前館の事業の紹介をいたします。次に、実際に出前館でどういったかたちで業務をしているかを少しお話しして、その後開発組織全体で今どういったかたちで動いているかを紹介し、最後にまとめをお話しします。 そうしましたら、まずは自己紹介です。改めまして田中と言います。よろしくお願いします。LINEの京都開発室にいます。アプリチームのマネージャーをしています。 これまでやってきたことを簡
クリーンなReactプロジェクトの21のベストプラクティス - Qiita
コード品質向上のための実践的アドバイス Photo by Diana Polekhina on Unsplash. はじめに Reactは、構成の方法について特に決まりがありません。まさにこれが理由で、プロジェクトをクリーンで保守可能な状態に保つことは、私たちの責任なのです。 今日は、Reactアプリケーションの状態を改善するために従うべきベストプラクティスについて説明します。これらのルールは広く受け入れられているため、この知識を持つことは必須です。 すべてコードで示します。さあ始めましょう！ 1. JSXの省略形を使用する ブール変数の受け渡しには、JSXの省略形を使うようにしましょう。例えば、Navbarコンポーネントのタイトルの可視性を制御するとします。 悪い例
2021年現在Vueを選択すべきでないと思う理由 感想
JSXが嫌でReactを使わないならSvelteがあり、SvelteはゼロオーバーヘッドでVueより速い コンポーネントが作られたり消されたりするような場合一定の閾値でVueの方がバンドルサイズが軽くなる [Draft]VueとSvelteのサイズを比較検証した「vue-svelte-size-analysis」を掘っていく とはいえエッジケース 〇〇倍速いみたいなやつ、知覚したことない（フレームワークパフォーマンスを気にする前にやるべきことが沢山ある） ほぼラインタイムを消し去りたい、20kb未満のアプリケーションを作る必要があるとかだとSvelteは強そう https://zenn.dev/mizchi/articles/8a017097d3994ddc0a85 Next、NuxtのようなSSR/SSG用途で十分に使われてるようなフレームワークがまだない SvelteKit（Svelt
Macで使うVS CodeとRemote Containerの性能を大幅改善 - Sweet Escape
はじめに なぜ遅いのか 何をやるのか 計測 名前付きボリュームを使ってない場合 Named Volumeを使う場合 Macからどう見えているか 結論とまとめ はじめに 以前からいろんなところで話していますが、僕は普段、手元のMacには言語系のランタイムとかは入れておらずVS CodeとDocker for Macだけ入れてRemote Containersの環境で開発しています。 この環境自体はとても便利でいいのですが、一点大きな問題があります。 それは遅いということ。自分の場合は最近だとJSでの開発が多いのですが、例えばNext.jsで開発している場合に以下のような操作が特に遅く感じます。 yarn install yarn add yarn jest next dev next start next build yarn jestとかnext devが遅いのは起動だけだったりします。起
2018 年 React と Redux のエコシステム総まとめ - Qiita
Angular などの JavaScript フレームワークは大規模向けに設計されており、標準で多くのエコシステムが組み込まれています。 React は単なる View ライブラリです。そのため View ライブラリを補完するためのエコシステムの選択が必須となります。 エコシステムを自由に組み合わせて開発者とプロジェクトに応じた理想的なフレームワークを作成する必要があるわけです。 これは、小規模アプリケーションから大規模アプリケーションまでの様々な要件やニーズに対応できる柔軟性が高いことを意味していますが、エコシステムを選択するためのコストが必要となります。 下記では、筆者が最低限、導入を検討する余地があると考える主要な React のエコシステムとその簡単な概要を記載しています。 筆者の独断と偏見で選択したエコシステムであることを考慮してお読みいただきたいです。 既知のエコシステム (ほ
2017-12-19のJS: JavaScript開発者アンケート2017、Reactのインフラ、CQRS/EventSourcing
JSer.info #362 - The State of JavaScript 2017: IntroductionにてJavaScriptを使う開発者向けアンケートの結果が公開されています。 JavaScriptのフロントエンドからバックエンド、ツール、言語、ライブラリ、CSSなど幅広く扱った内容になっています。 またそれらの結果と給料や経験年数などを組み合わせた結果を見れます。 たとえば、#StateOfJS 2017 Results: Front-end Frameworksではフロントエンドのフレームワークとして何を使っているかという質問の結果が掲載されています。 結果としてはReact、何も使ってない、Angularとなっていて、それらのフレームワークをまた使いたいかどうかや組み合わせて使っているのかなどの投票結果が書かれています。 去年の結果もhttp://2016.stat
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RailsエンジニアのためのNext.js入門