サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
www.sunapro.com
{ "extends": ["plugin:@typescript-eslint/recommended", "next/core-web-vitals", "prettier"], "rules": { "import/no-duplicates": "error", "no-restricted-imports": [ "error", { "paths": ["next/link"], } ] }, "overrides": [ { "files": ["src/components/Link.tsx"], "rules": { "no-restricted-imports": "off" } } ] } shareable confisとして読み込んでいるのは3つです。 plugin:@typescript-eslint/recommended next/core-web-vita
でも結論これはuseStateを使うべき理由がちゃんとあって、聞いたらそりゃそうかとはなったんだけどちゃんと理解できてなかったのでメモしておく setStateなしのuseStateを使うべき理由 どういう場合にsetStateを使わないuseStateを使う理由があるか 結論再レンダリングによって値の更新を行いたくない場合 再レンダリングが発生しても初期値の値をそのまま使いたい場合には有用 もうこの説明だけで事足りてる気はするが、一応具体例を記載しておく 以下のような状況を考える booleanのhogeとfugaをpropsで受け取るコンポーネントがあったとしてその両方がtrueの場合のみモーダルを開くとする import React from 'react' import { Modal } from 'foo' export const Component: React.VFC<{
ReactのStrictモードがv18になって挙動が追加された。 追加された挙動となぜそれが追加されたのかということについて調べた。 せっかくなのでここでまとめておく。 わりと調べて書いたつもりですが、もし内容が間違ってたら教えてください。 Strictモードとは ここでは簡単にStrictモードについておさらいしておく。 以下がドキュメント。 (基本的にここで書いてある内容はドキュメントとReact18のDiscussionsに記載してある。どちらも最後に参照先のURLを記載しておく。) Strictモードとは、アプリケーションに存在している様々な潜在的な問題点をwarningとして出してくれるもの。 重要なことはStrictモードによって影響があるのは開発モードのみであって、本番環境ビルドでは何も影響がないということ。 したがって、Strictモードによるwarningがあったとしても
業務でeslintとprettierの設定をいじることがあって、そういえばこの2つってどう設定するのがベストなんだっけってなって調べた時のメモ 公式推奨の形もいつのまにやら変わっていて自分が知っている方法ではなかった あと副業でhuskyを設定する機会もあったが、バージョンアップで仕様が変わっていたのでまとめる これらについてはすでにいくつか記事が見られるが、備忘録も兼ねてここでアウトプットしておく 結論、今はeslint-config-prettierのみ設定するのが公式推奨の形 eslint-plugin-prettierとeslint-config-prettier 2020年6月まではeslintとprettierを両方使う場合はeslint-plugin-prettierとeslint-config-prettierの両方を使うのが推奨されていたらしい ただ、今はeslint-p
これまでずっとwebpackを使ってきたのだが、プロジェクトがそこそこの規模になってくるとサーバーを立ち上げるのが遅い。起動も遅いし差分変更を反映させるのにも時間がかかる。 と、いうわけで最近ちらほら聞くようになった爆速のviteに乗り換えることになった この記事はその時色々調べた背景や手順の備忘録、解決できなかった課題のメモ 実際リプレイスしたらそれまで30秒以上かかってた起動が2秒くらいで表示されるようになって、差分反映も体感で1秒かからないくらいになって開発体験がとても良くなった。 viteの特徴 viteとはvueの作者が開発しているビルドツール。 vueの作者開発なんだけどReactでも使える。あざます。 webpackからviteに変えるとどんないいことがあるか、一言で言うとビルドや差分更新が爆速になって開発体験が向上する 詳細は公式ページに譲るがなぜ爆速になるのか、簡単に特徴
最近VercelがEdge Functionsを発表したり、RemixがCloudflare workersでのデプロイをサポートしたりとエッジコンピューティング周りが何かと熱い気がしている。 FastlyやAWSなど代表的なものはいくつかあるが、その中でもCloudflare workersが色んな機能リリースしたりしてて個人的には興味深かったので、今回はCloudflare workersについて調べたことを簡単にまとめてみる。 特にCloudflare workersの0ms cold startsの実現方法が面白かったのでこれについて取り上げる。 エッジコンピューティング エッジコンピューティングの詳細な説明は割愛するが、サーバーに到達する前にCDNで処理をしてクライアントにレスポンスするのでレスポンスがかなり速いことが特徴。 現時点で代表的なエッジコンピューティングには以下のもの
仮想DOMを学び直す 仮想DOMは速いという漠然とした認識が自分の中にあったんだけど、じゃあなんで速いんだろう?そもそも本当に速いのか?って疑問に思った時に色々調べ直した 仮想DOMにつ... Svelteは仮想DOMを使っていないことで有名だが、仮想DOMを使わないでどうやって部分的な変更を検知してリアルDOMに反映してるんだろうってのが気になったので色々調べてみたことのまとめと、実際に触ってみた所感を記しておく。 Svelteとは? SvelteはJSのコンパイラである。 フレームワークでもなくライブラリでもなくコンパイラであるってのが最初驚きだった。 Svelteが注目されるようになったのは大きく作りなおされたv3以降らしいので、この記事でもv3以降を前提とする。 ドキュメントに記載されている主な特徴は次の3つ。 ・少ないコードで記述ができる ・仮想DOMがない ・リアクティブなコー
業務で一時的に新プロジェクトにアサインされた際にuseContextを多用していた。 Reduxはよっぽどの時じゃないと使わない方針ぽい。 確かにReduxはファイル数多くなるし何かとややこしいことが多い。 Reduxを使うかどうかは以下の記事がわかりやすかった。 https://ics.media/entry/200409/ useContextの使い方はだいぶ理解できてきたのでここでまとめる。 useReducerは正直まだよくわかってないから別の機会に。 useContextはどういう時に使う? コンポーネントをまたいで値を渡す時。 propsで渡すと孫コンポーネントに渡す時に、一度子コンポーネントを経由しなければならなくなりバケツリレーになってしまう。(propドリルとか言われてるっぽい) さらにContextのいい点はContextで管理している状態や関数をそれぞれの子コンポーネ
このページを最初にブックマークしてみませんか?
『www.sunapro.com』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く