Next.js にテストを導入し hooks のテストを書く
はじめに 前回コンポーネントと状態管理のファイル分割と設計について記事を書き、設計のメリットとして「テストのしやすさ」を上げました。 今回は前回のブログで作った hooks を例にしてテストについて書いていこうと思います。 導入 Next.js 公式ドキュメントを参考に導入していきます。 Cypress, Playwright, Jest and React Testing Library の3つ紹介されていますが、今回は Jest and React Testing Library を導入します。 インストール 既に Next.js の PJ を作っていくるので Manual setup を参考にインストールします。 npm install --save-dev jest babel-jest @testing-library/react @testing-library/jest-do
memlab
memlabAnalyzes JavaScript heap and finds memory leaks in browser and node.js
Solidの特徴と、その裏側 - console.lealog();
https://www.solidjs.com ずっと調べたいものリストにはあったやつで、Astro熱がちょっと収まったのでこのタイミング。 めちゃめちゃ雑にまとめると、React + MobX feat. Svelteって感じのUIフレームワークです。（つまり好みは分かれるであろう） Solidとは 基本はReactライクな書き味 JSXでコンポーネントを書く、Propsでデータを単方向に流す もちろん細かい挙動に差異はあるし、互換性はない `Suspense`とか`Portal`とか`ErrorBoundary`とかもある MobXライクなリアクティブの仕組みがビルトインされてる Propsが自動でProxyされてるイメージ 依存配列なしに、状態を読み取ったコンポーネント・関数だけが更新できたり ストア（ちょっと大きめの状態用）関連のコードもある Svelteと同様に、コンパイルして最
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか
Re: 僕らを縛る Node.js という呪いについて - あるいはなぜ TypeScript 以外が真っ当な選択肢にならなかったか https://d.potato4d.me/entry/20220405-nodejs/ へのアンサーソング。 プログラミング言語としての JavaScript の話をする。 2010年頃、Python 2 でプログラミングを学習した自分にとっては Node.js + CoffeeScript が Better Python だった。 CoffeeScript は当時の JS(ES3~5) に足りない機能を補ってくれて、Python と同じく空白制御のオフサイドルールなのが気に入った。見た目が少しだけ Ruby っぽいので当時全盛だった Rails の人間に訴求するにも有利だった。 Node.js のモジュールシステムである Commonjs は Pytho
The State of JS 2021
A lot happened in 2021. So much in fact that the survey was pushed back all the way to 2022! Between a slew of faster build tools and a new crop of back-end frameworks, the JavaScript world kept evolving. And we did our best to keep up, giving this survey a couple new power-ups (read more about what's new) such as new question types, the ability to cross-reference two datapoints (such as yearly sa
JS のビルドサイズを極限まで絞るための TIPS 集
ビルドサイズ限界まで絞りたい人向け。 あらゆる環境で実践するものではないが、知ってたら簡単に避けることができるのもあるので知っておくと便利なTIPS書いていく。 基本ポリシー 未使用コードはビルド時に全部落とす。 何が未使用コードで、何が定数かわかるようなインターフェースを人間が心がける。 用語 Dead Code Ellimination(DCE) Rollup や Terser で、未使用コードを削除すること
なぜ ES2022 で文字列リテラルを使った import/export ができるようになるのか | サイボウズ フロントエンドエキスパートチーム
11 月 11 日に、以前から一部で注目されていたある Pull Request が tc39/ecma262 にマージされました。 この Pull Request がマージされたことで、識別子ではなく文字列リテラルを使った import/export が可能になりました。 この仕様変更はプロポーザルという形で扱われてはいませんが、構文上の影響があるので、JavaScript ユーザーとして知っておくに越したことはないものになります。 概要 まず具体例を示します。 今回の変更によって、次のように import/export する際の名前として文字列リテラルを使えるようになります。 基本的にはこれだけです。 詳解 ここからは仕様上の用語を使って解説をします。 この変更が入る前の ECMAScript では ImportSpecifier で as を使う場合 as の左側は Identifi
SSG is a compiler
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
7 Developer Tools secrets that shouldn’t be secrets by Chris Heilmann
7 Developer Tools secrets that shouldn’t be secrets Chris Heilmann @codepo8 1 Console is much more than log()! Image used under license from Freestock.com console.log(🧢's 🪵 ⭐ 📆… ${new Date().getTime()}) Noise! https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/console/console-filters What is that? console.log(width); console.log(height); Simple trick: use the curls! console.log({
mouseover 中に表示される DOM のデバッグ | blog.jxck.io
Update 2024-03-30: Chrome 123 から "Emulate a focused page" が追加された。 これを用いれば良いため、以降の全ての方式は古くなった。 Apply other effects: enable automatic dark theme, emulate focus, and more https://developer.chrome.com/docs/devtools/rendering/apply-effects#emulate_a_focused_page マウスが乗ってないと出ない UI も、そこに Tab などでフォーカスを移し、その状態で Dev Tools の "Emulate a focused page" を有効にすれば良い。 Intro 先日、後輩が「mouseover 中にしか表示されない DOM のデバッグ」に手こずっ
Passport.js
passport.authenticate('facebook');('google');('apple');('microsoft');('twitter');('linkedin');('github');('openid'); Passport is authentication middleware for Node.js. Extremely flexible and modular, Passport can be unobtrusively dropped in to any Express-based web application. A comprehensive set of strategies support authentication using a username and password, Facebook, Twitter, and more.
なんでもSPAにするんじゃねぇ！という主張のその先 - console.lealog();
Your shopping website is not an SPA. I repeat: your shopping website is not an SPA. Stop trying to sculpt David with a JS chainsaw and get yourself an HTML/CSS chisel.— Alex Russell (@slightlylate) 2021年8月10日 この主張、界隈（少なくとも自分の観測範囲）では割とよく見かけるし、なんか定期的に話題になるトピックなのかなーと。 まあ持論としてもコレには概ね同意しており、会社のスタンスとも相まって、常日頃からぼんやり考えてたりすることでもある。 で、そんな折にこのツイートを発見して、さらにそれに言及してる人々を見て、ふと自分でも現状を整理しておきたいなーという気持ちになったので筆を執った次第。
alert() is dead, long live print()
Published: 02 July 2021 at 13:27 UTC Updated: 05 July 2021 at 10:03 UTC Cross-Site Scripting and the alert() function have gone hand in hand for decades. Want to prove you can execute arbitrary JavaScript? Pop an alert. Want to find an XSS vulnerability the lazy way? Inject alert()-invoking payloads everywhere and see if anything pops up. However, there's trouble brewing on the horizon. Malicious
いろいろな .config.js で型の補完を効かせる方法まとめ
いろいろな JavaScript 系ライブラリの設定ファイルで型の補完が効くようにするための JSDoc アノテーションまとめです。VSCode で確認しています。 リンクのついていないものは自分で型定義を探したものなので間違っている場合はコメントいただけると助かります。 他のライブラリの情報もコメント大歓迎です！
Immutable.jsとImmer、ちゃんと使い分けていますか？
昨今のフロントエンド開発では、データをイミュータブルなオブジェクトとして扱うのが主流です。すなはち、データが変わるときはオブジェクトを書き換えるのではなく、新しいデータを持った新しいオブジェクトを作ります。最近ではオブジェクトがデータとしてプログラムのあちこちで取り回されることが増えて、一度余所に渡されたデータの中身が後から変更されるのは混乱をきたし設計が困難になるというのが主な理由です。 データを変更するたびに新しいオブジェクトを作るのは、特にデータが複雑になったりネストしたりしていると面倒だしプログラムの見通しが悪くなります。そこで使われるのが、データをイミュータブルに扱うためのライブラリであるImmutable.jsとImmerです。 データをイミュータブルなものとして扱うという目的はどちらのライブラリでも達成することができますが、現在では Immer のほうが開発が活発であり、独自
GitHub - wessberg/cjstoesm: A tool that can transform CommonJS to ESM
This is a tool that converts CommonJS modules into tree-shakeable ES Modules. This allows you to not only bundle CommonJS modules for the browser, but also makes it possible for you to bundle them in modern tools such as Rollup. It can also be used as a tool for migrating a CommonJS-based codebase to one based on ES-modules via a simple CLI. cjstoesm can be used from the Command Line, as a JavaScr
Rails に Babel と Rollup を組み込んで CoffeeScript を JavaScript に段階的に移行した話 - クックパッド開発者ブログ
こんにちは。技術部クックパッドサービス基盤グループの青沼です。当グループではクックパッドのレシピサービスを支える web アプリケーションの改善を進めています。今回はフロントエンドの改善の一環として、 Babel と Rollup を Rails のアセットパイプラインに組み込み、レガシーな CoffeeScript ファイルを ES2015+ の JavaScript に移行した話をします。 レシピサービスと CoffeeScript の歴史 クックパッドは10年以上の歴史を持つサービスです。中でもレシピサービスの web アプリケーションは初期に作られた Rails 2 アプリケーションがアップグレードを重ねながら今も動いています。2018年には Rails 3 から4へ、つい最近では4から5へのアップグレードを完了しました。 Ruby のコードはそれに伴って新しい書き方へと徐々に移行
ep.72 『期待のフレームワーク Svelte を一年以上使ってみて』 | UIT INSIDE
注目が集まるフレームワーク『Svelte』を v2 から利用しており、 v3 も長らく利用しているという @miyoshi に、概要と所感を共有してもらいました。 @miyoshi による Svelte ドキュメントの日本語訳はこちら 概要 JSフレームワーク（コンパイラ） 海外ではソコソコ知名度がある（2019年の stateOfJs でも評価が高い） https://2019.stateofjs.com/front-end-frameworks/ React などと違って、JSを変換して吐き出してくれるタイプのフレームワーク コンセプトとしては Riot が近い https://riot.js.org/ja/ コンパイラなので必要ない機能などが生成したJSに含まれないのが最大のメリット コンパイラであるため、WebComponent として出力することも可能 SSR も可能 IE9 対
2020 年の瀬の JS ビルド＆バンドルツールの検討
今年から ZOZO テクノロジーズの Web エンジニアになりました。@takewell です。 もう年の瀬になりました。一年は早いですがブラウザの寿命は存外長いです。 来年はきっと Internet Explorer のサポートブラウザから外すことができるかもしれない。来年はわざわざツールを介さずとも ECMAScript 202X が動くブラウザが世界中のみなさんに使われるようになるかもしれない。そう願ってなりませんが、現実はそうではありません。 こうした課題を少しでもマシにするために webpack (シェア 76%)を代表とする ESNext (ECMAScript Next Generation) なコードをレガシーブラウザにビルドしたり、コードを単一ファイルにバンドルしたりするツールが数多く存在します。(以降、ビルド&バンドルなどの事前変換処理をプリプロセスと表記します。) こ
Async & await explained in short
Subscribe to my newsletter and never miss my upcoming articles Async & await basically just syntactic sugar on top of promises. Here is my latest post and very short and amazing explanation of Async and await. If you use the async keyword before the function definition, you can then use await within the function. Await gives you the power to pause the function in a non-blocking way until the promi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
