Shared Hook State with SWR
Shared Hook State with SWRMay 09, 2020SWR is a React hook for data fetching that features a cache for requests. This is generally used to share the response from API calls and deduplicate requests, but SWR is flexible enough to support another use case: shared hook state. 1 Let's look at an example of a useUsername hook: const useUsername = () => { return useState('') } const UsernameInput = () =>
Node.js ES2015/ES6, ES2016 and ES2017 support
"use strict"; function f(n){ if (n <= 0) { return "foo"; } return g(n - 1); } function g(n){ if (n <= 0) { return "bar"; } return f(n - 1); } return f(1e6) === "foo" && f(1e6+1) === "bar";
Next.js 9.4 Fast RefreshとIncremental Static Regeneration等のアップデート - Qiita
Next.js 9.4 Fast RefreshとIncremental Static Regeneration等のアップデートJavaScriptReactNext.js Hot ReloadがReact Refreshを用いたFast Refreshに置き換えられました。 これで編集したファイル内のコードのみが更新され、コンポーネントの状態を失うことなく再レンダリングを行ってくれます。 これに伴いエラーのオーバーレイも再設計され、ページ上ですぐにエラーを確認できるようになっています。 Incremental Static Regeneration (beta) 段階的な静的ページ再生成がサポートされました。 Next.js 9.3でサポートされたStatic Generationでは、ビルド時に生成したページでなくてもfallback: trueオプションを利用することで実行時に新しい
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 | フューチャー技術ブログ
TypeScriptでReactをやるときは、小さいアプリでもReduxを最初から使ってもいいかもねというお話 前日の丸野さんがReduxを分かりやすく解説してみたというReduxの基本的な紹介を行いました。Reduxはコンパクトなライブラリながらよく考えられた仕組みです。Jetpack ComposeやらFlutterやら、ReactインスパイアなGUIフレームワークも増えているので、JavaScript（TypeScriptではなく） + Reduxをやってみるのは、ウェブに限らず、今後のユーザーインタフェース関連のコードを触るための理解力向上には良いと思います。 本エントリーは、プロダクションコードでたくさんRedux周りにもreducerなどを実装しなくてはいけなくなったときの次のステップとして、Redux Toolkitの紹介をします。 たいてい、Reduxは導入コストが大きく、
SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜 - Qiita
SPAのログイン認証のベストプラクティスがわからなかったのでわりと網羅的に研究してみた〜JWT or Session どっち？〜JavaScriptRailsJWT認証React SPAのログイン周りについて、「これがベストプラクティスだ！」という情報があまり見当たらないので、様々な可能性を模索してみました。 いろいろな状況が想定され、今回記載する内容に考慮の漏れや不備などがありましたら是非コメントでご指摘いただきたいです！特に「おすすめ度：○」と記載しているものに対しての批判をどしどしお待ちしております！ この記事でおすすめしているものであっても、ご自身の責任で十分な検討・検証の上で選択されてください。 前提 想定しているAPIは、 ログイン外のAPIにはPOST/PUT/DELETEのものがなく、GETのみ GETのAPIにはDBを更新するなどの操作がない とし、そのためログイン外では
20 年代のフロントエンド - Qiita
これはなに 高円寺.dev #3 用の資料 https://koenji.connpass.com/event/160886/ フロントエンド専門じゃない人向けの、フロントエンドの最先端〜やや未来の話です このレイヤーでは Node.js を使うべき/使うと強いという部分がありますが、他言語を否定しているわけではありません。むしろ他言語でこのアーキテクチャを模倣してほしいという話です。 10 年代のフロントエンドのポストモーテム 10 年代まとめ IE が死ななかったので各種ポリフィル、メタ言語からのトランスパイルが発達。しかしモダンとレガシーの乖離が深刻に。 node と npm エコシステムの成立 仮想 DOM がフロントエンドライブラリの標準的な状態管理手法に モジュールシステム需要が ES Modules(ES2015)に結実。しかし webpack は死ねなかった。 モダンとレガ
Stream今昔物語 - from scratch
この記事は Node.js Advent Calendar 2014 の 1日目の記事です。 こんにちは、代表です。 Stream大好きなみんなのためにStreamの過去と現在、そして未来についてお話するよ！！ Streamを何故使うのかっていう話と歴史的な話をします！！ Streamとは データの流れを扱うための抽象化されたモジュールです。もうみんな耳にタコかもしれませんが、Streamを使うとデータの流れを綺麗に書くことができます。ちなみに今に始まった概念ではなくて、C++にもC#にもStreamがありますし、Java8の新機能にもStreamがあります。「データを扱うときの抽象化された流れ」を指す広義のStreamという意味では今日の言語ではだいたい実装されています。 Node.jsでは、以下のリンクが参考になるでしょう。 Node.js の Stream API で「データの流れ」
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説 - Qiita
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説Reactserver-side-renderingNext.jsJAMstackVercel はじめに この記事ではNext.jsにvesrion 9.3から導入された以下の3つのAPIについて解説します。 getStaticProps getStaticPaths getServerSideProps こちらのissueで議論されてきた機能です。 Static Generation / SSG Improvements · Issue #9524 · zeit/next.js GitHub追っているとGS(S)P methodsと略されているのを見ます。 Next.jsが未経験の方でもReactとSSR(Server Side Render
top-level awaitがどのようにES Modulesに影響するのか完全に理解する - Qiita
先日、TypeScript 3.8 RCが公開されました。TypeScript 3.8はクラスのprivateフィールド（#nameみたいなやつ）を始めとして、ECMAScriptの新機能のサポートがいくつか追加されています。この記事で取り扱うtop-level awaitもその一つです。 この記事ではtop-level awaitに焦点を当てて、その意味や使い方について余すところなく解説します。top-level awaitは一見単純な機能に見えますが、実はモジュール (ES Modules) と深い関係があり、そこがtop-level awaitの特に難しい点です。そこで、この記事ではECMAScriptのモジュールについても詳しく解説します。この記事を読んでtop-level awaitを完全に理解して備えましょう。 ※ この記事は3分の1くらい読むと「まとめ」があり、残りはおまけで
0から始めるNode.jsパフォーマンスチューニング
近年の Node.js は API のサーバとしてはもちろん、Nuxt.js や Next.js といった SSR や BFF などフロントエンドのためのバックエンド言語としての人気が高まっています。 フロントエンドエンジニアがコンテキストスイッチ少なくバックエンドの整備ができることは非常に大きな利点です。 ですが、フロントエンド（ブラウザ側）とバックエンド（サーバ側）ではパフォーマンスチューニングで見るべき点が大きく違います。 しかし Node.js アプリケーションのパフォーマンスイシューの見つけ方などがまとまっている資料は少ないです。 そこで、本記事ではフロントエンドエンジニアが Node.js でパフォーマンスイシューを見つけ、改善するため自分が普段パフォーマンスチューニングを依頼されているときにみている基礎的なポイトをまとめていきます。 1. 計測ステップlink Node.js
MongoDB + Node.js + TypeScriptが強力だった
はじめにlink MongoDB (node-mongodb-native) + Node.js + TypeScript で RDB 並のスキーマ定義と、NoSQL の開発しやすさを両立できたのでまとめます。 Node.js と MongoDBlink MongoDB はドキュメント指向データベースです。簡単に言えば JSON のような形でデータを保持できる NoSQL です。 MySQL や Postgres などの RDB と違い、事前に CREATE TABLE のようなコマンドを打たなくても、insert されたタイミングで collection が作成され、データが保存されます。 また、MongoDB は後発のデータベースということもあり、RDB では 1 クエリで素直に表すことが難しいクエリも多くがクエリ化されていて 1 トランザクションで実行が可能です。（findOrUpd
MongoDB + Jestのテスト方法
はじめにlink MongoDB のテストを書いて、自分なりの方法が落ち着いたのでまとめる。 結論: mongodb-memory-server を利用する。 本物の MongoDB を使う方法（不採用）link 自分は middleware なども含めてテストするために、実環境と同じ環境を用意して単体テスト時もそれらを利用するのが基本方針だった。 そこで MongoDB のテストもテスト用の DB を用意したが、DB を利用したテストでつきまとうテストの ABA 問題（初期化処理が二重に走って後続のテストが失敗する）に引っかかり、解決策を考えていた。 普段は並列数に合わせて CREATE DATABASE して DB 接続部分でそれぞれ被らないようにつなげる、という手法をよくやるのだが、Jest で並列数を固定化する方法にたどり着けなかった。 テスト開始のたびに自動で増やし続けてもいいが
git-secretsとhuskyを同時に使用する
はじめに 機密情報をコミットしないようにgit-secretsの設定をしようとしたところ、既にprecommit用のNode.jsライブラリhuskyがインストールされていたため、コンフリクトしてgit-secretsの設定ができませんでした。 どっちとも使いたかったので、それぞれ動くように工夫してみました。 2019/07/10 追記 会社の @aki77 さんが、もっと良い方法を見つけてくれたので、 そっちを「方法1」として追記しました！ 方法1: husky内でgit-secretsを呼び出す gitのhooks内では、デフォルトのままhuskyだけが呼ばれるようにしておき、 huskyでのチェック項目の1つとして、git-secretsを呼び出します。 lint-stagedも併用します。 git-secretsをグローバルにインストール
Playwright | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! So Microsoft launches a Node-based browser automation project called Playwright. It allows you to spin up a headless version of a browser and control it. Go here! Click something! Take a screenshot! That kind of stuff. Particularly useful for testing. It’s just like Google’s Puppeteer, only
リモートのデータ取得のためのフックライブラリの SWR を使ってみる | メルカリエンジニアリング
こんにちは。Mercari Advent Calendar 2019 の 17 日目は Web UX Team 所属の @lightnet328 がお送りします。 どのようにリモートのデータを取得して管理するかは SPA 構成の Web フロントエンドにおいて大きなテーマの 1 つだと思います。最近では Apollo Client のようにデータ取得のためのクライアントとデータ管理のためのキャッシュ機構が一体化したライブラリが出てきています。 本稿で紹介する zeit/swr (以下、SWR) もそのような特徴を持っています。SWR はその名が示すとおり HTTP の stale-while-revalidate (略すと swr) というキャッシュ戦略に影響を受けているため、先に HTTP の state-while-ravalidate について紹介します。 HTTP の Cache-
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - microsoft/typed-rest-client: Node Rest and Http Clients with typings for use with TypeScript
mzmessenger
重複しない任意長のランダム文字列を生成する方法 - Qiita
GitHub - alewin/useWorker: ⚛️ useWorker() - A React Hook for Blocking-Free Background Tasks
20 年代のフロントエンド.md
