Reactのユニットテスト2021
React でユニットテストをするときのベストプラクティスはいつも悩むのですが、とりあえず 2021 年 2 月時点では、こうかなーというのをまとめてみます。 まずテストランナーは jest で確定です。ここで悩む要素はまずありません。 では、React のテストをどうやるか？です。 公式の react-dom/test-utils を使う 公式の react-test-renderer を使う @testing-library/react を使う 選択肢としてはこの三種類が有名なところでしょう。 公式という響きはとても魅力的ですが、実は公式ドキュメントから「ボイラープレートを減らすため、エンドユーザが使うのと同じ形でコンポーネントを使ってテストが記述できるように設計されている、React Testing Library の利用をお勧めします。」という形で、@testing-library
Pages Router: Set up a new Next.js app | Next.js
First, let’s make sure that your development environment is ready. If you don’t have Node.js installed, install it from here. You’ll need Node.js version 18 or higher. You’ll be using your own text editor and terminal app for this tutorial. If you are on Windows, we recommend downloading Git for Windows and use Git Bash that comes with it, which supports the UNIX-specific commands in this tutorial
piyo-js.com - このウェブサイトは販売用です！ - 初心者 入門 リファレンス リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
JavaScriptでのDOM操作は重いのかという話とForced Synchronous Layoutについて - id:anatooのブログ
2015年にもなるのにJavaScriptでのDOM操作のパフォーマンスについて書く。ウェブページにインタラクションを持たせたい時に、JavaScriptでDOM操作を行うことがよくある。このDOM操作のパフォーマンスについて、よく聞く意見を大別すると次の2つがある。 JavaScriptによるDOM操作は重たい レンダリングが重いだけで、DOM操作そのものはそれほど重たくない JavaScriptでオブジェクトのプロパティを操作したりする単体の処理は通常1ミリ秒もかからないが、DOM操作をするとレンダリングが完了するまでに数十ミリ秒程度かかったりする場合がある。1番目のDOM操作が重たいと言っている人は経験則的にそう言っていることが多い。 レンダリングの仕組みを知っている人は2番目の意見を言うが、重箱の隅をつつくような話をするとこれも必ずしも正しいわけではない。DOM操作するコードによっ
Node.jsのイベントループを理解する | POSTD
(訳注：2015/8/4、いただいた翻訳フィードバックを元に記事を修正いたしました。) Nodeの”イベントループ”は高スループットのシナリオを操作する中枢で、ユニコーンや虹で満ちあふれているような魅力的な場所です。そしてこのイベントループのため、バックグラウンドで任意の処理の実行が可能でありながら、Nodeは本質的に”シングルスレッド”になるのです。この記事では、イベントループがどのような処理を行うのかを説明していきます。そうすれば皆さんも、この魔法を使いこなせるようになるでしょう。 イベント駆動型プログラミング イベントループを理解するためにまず必要なのは、イベント駆動型プログラミングのパラダイムを理解することです。イベント駆動型プログラミングは、1960年代から広く知られてきました。現在は主にUIのアプリケーションに使用されています。JavaScriptでは主にDOMとのやりとりで利
Masato Kinugawa Security Blog: Referrer文字列によるXSS
リファラを使ったXSSの小ネタです。 今回取り上げるのは、ターゲット自身が、細工したページを経由することでつけられたリファラによって攻撃を受けるケースです。このような攻撃の場合は、現実に経由可能なページからでしか攻撃文字列を送りこむことができません。 例えば、以下のように、document.referrerをそのままdocument.write()しているページがあるとします。 http://vulnerabledoma.in/location/ リファラを書き出している部分でXSSできるでしょうか。 IEでは単純です。 IEはURLのクエリに、エンコードせずに「"<>」などを含めることができるので、これらを含むURLから、リファラを書き出しているページへ遷移させれば、XSSが起きます。 http://l0.cm/xss_referrer.html?<script>alert(1)</sc
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
第一回 太一にモダンJSを教える会 - 設計と実装の狭間で。
と言う会が品川某所で、2011/10/05にヒッソリと開催されました。 お客様は主催者たる僕のみで、それ以外の参加者は基本的に講師という大変贅沢な会です。 それなりに話はあっちこっちしていたし、 話題に上がった重要そうな部分で、僕が覚えている事を補足しながらメモ書き。 妥当でない部分があったので、変更。 スケールするUI(by @monjudoh) イベントを遅延ディスパッチする。ドラッグ＆ドロップは実装が難しいかも。 イベントリスナは、より広い範囲で受ける。 例えば、一覧データなら、カラム内で受けるより、行で受ける方が良いし、それよりもテーブルで受ける方が良い。 これにはいくつか理由がある。 - 動的にデータが変更される中でイベントリスナの配置漏れによって適切に動作しない様なケースを避ける。 - イベントリスナのオブジェクトのインスタンス数を減らす。 - イベントリスナは登録処理が重いの
ソフトバンクの非公式JavaScript対応の調査結果
ソフトバンクのYahoo!ケータイブラウザは、2010年春モデルまで非公式のJavaScript対応機種がありました。2010年5月に、私的にその対応状況を調査した結果を公表します。 これは、「Yahoo!ケータイの一部端末に「かんたんログイン」なりすましを許す問題」を公表するにあたり、影響のある端末を調べるために、端末実機の検証センターにて抜き取り検査した結果です。 考察JavaScriptが最初に搭載されたのは、2004冬の702NKらしい。以降、ノキア端末にはJavaScriptが搭載される。この時期のJavaScriptは簡易的なもの。 2006年冬モデルから多くのモデルでJavaScriptが搭載される。この時期の端末は、DOMは対応しているが、XMLHttpRequestは対応していない。 2008年春モデルから一部の機種でXMLHttpRequestをサポートする。 シャープ
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
今、知っておきたいJavaScript
Webブラウザとテキストエディタさえあれば、プログラミングして実行できるシンプルで手軽な言語――。それがJavaScriptが初めて登場してからしばらくの間、多くの人が抱いた印象でした。しかし、Ajaxの登場に伴う第2のブーム以降、ハードルが高くなったように感じられます。 その大きな理由の一つが、DOM（Document Object Model）に基づくJavaScriptプログラミングでしょう。DOMは、HTMLやXMLを構成する各要素に対して、プログラムからアクセスして内部の情報を取得・変更したり、機能を利用したりするためのAPI（Application Programming Interface）です。DOMを使うことによって、WebページをリロードせずにWebページを部分的に書き換えたり、HTMLドキュメントの構造を動的に変えたりといったことが可能になります。 DOMは便利な仕組
【レポート】IE9、ほかのブラウザと同じJavaScriptコード動作へ | エンタープライズ | マイコミジャーナル
Windows Internet Explorer 9 JavaScriptプログラミングでフラストレーションが溜まるポイントのひとつに、IEとそれ以外のブラウザで記述方法が異なることを挙げることができる。特にDOM周りのコーディングはIEだけ別の記述をしなければならない。しかし、これもIE8までの話ということになりそうだ。現在開発が進められているIE9ではこうした問題が解決している。どういった変更を実施したかがIEBlogのExploring IE9's Enhanced DOM Capabilitiesに詳しく説明されている。 これまでIEだけはDOM周りの実装がほかのブラウザと違っていた。これはDOMへのアクセスにCOMを使っていたことに原因がある。結果として、プログラマがすべてのブジェクトに期待する機能がIEの提供するDOMオブジェクトにだけは存在せず、別の方法を使って実現する必要
DOM1仕様書
文書オブジェクトモデル(DOM)第1水準 仕様書 Version 1.0 この文書は、W3Cにより作成されW3C勧告として公開されている "Document Object Model (DOM) Level 1 Specification Version 1.0" (http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/) を、どら猫本舗が翻訳したものです。 最新版の仕様書は http://www.w3.org/TR/REC-DOM-Level-1/ にあります。 正式な仕様書はW3Cサイトにある英語版です。この日本語版は参考にすぎません。 この文書には翻訳上の誤りがあるかもしれません。どら猫本舗は翻訳の正確性を保証しません。あくまでご自身の責任でご利用ください。 お気付きの点がありましたらどら猫本舗までお知らせください。 REC-DOM-L
Document Object Model (DOM) Level 1 Specification
REC-DOM-Level-1-19981001 Document Object Model (DOM) Level 1 Specification Version 1.0 W3C Recommendation 1 October, 1998 This version http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001 http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/DOM.ps http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/DOM.pdf http://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/DOM.tgz http://www.w3.org/TR/1998/REC-DOM-Leve
JavaScriptのDOM Core基礎 - 三等兵
Coreの簡易リファレンス。Coreは要素を参照したり、相対位置から周りのノードを参照したり、要素を生成するといった部分。主に利用するであろうプロパティやメソッドはカバーしているつもりですけど、これも入れとけってのあったら教えてください。 このあたりは地味で使いづらくその上理解しにくいという残念な部分。ふと忘れたときに使う個人的なものですが、慢性jQuery拒絶症候群な人よかったらどうぞ。それにしても暑い。ガリガリ君おいしいね。 DOMとは。 Document Object Model (DOM) は、HTML および XML ドキュメントのための API です。これはドキュメントの構造的な表現を提供し、内容や表示形態の変更を可能にします。端的に言えば、Web ページをスクリプトやプログラミング言語とつなぐような機構です。 https://developer.mozilla.org/ja/
第8回 実践DOMスクリプティング#1：HTMLとテキストの操作 | gihyo.jp
こんにちは、太田です。前々回、前回でDOMの基礎を簡単に解説しました。今回からは、DOMを使った実用的なスクリプトを解説していきます。特に今回はHTMLの操作、テキストの操作にフォーカスを当てていくつかのサンプルコードを解説していきます。 HTML操作の基本 JavaScriptによってHTMLを書き出したり、一部を書き換えたり、削除したりといった方法は実は様々な方法が用意されています。目的に合わせて適切な方法を選ばないと非効率だったり、最悪クロスサイトスクリプティングなどの問題を抱えてしまう危険もあります。 document.writeと同期読み込み JavaScriptでHTMLを書き出すというと、最初に学ぶのはこのdocument.writeかもしれません。いわゆるprint文のようにシンプルなAPIなので、入門書の最初のサンプルなどで扱われることも多いようです。しかし、docume
【インフォシーク】Infoseek ： 楽天が運営するポータルサイト
日頃より楽天のサービスをご利用いただきましてありがとうございます。 サービスをご利用いただいておりますところ大変申し訳ございませんが、現在、緊急メンテナンスを行わせていただいております。 お客様には、緊急のメンテナンスにより、ご迷惑をおかけしており、誠に申し訳ございません。 メンテナンスが終了次第、サービスを復旧いたしますので、 今しばらくお待ちいただけますよう、お願い申し上げます。
Selectors API Level 1
Selectors API Level 1 W3C Recommendation 21 February 2013 This Version: http://www.w3.org/TR/2013/REC-selectors-api-20130221/ Latest Version: http://www.w3.org/TR/selectors-api/ Previous Versions: http://www.w3.org/TR/2012/PR-selectors-api-20121213/ http://www.w3.org/TR/2012/WD-selectors-api-20120628/ http://www.w3.org/TR/2009/CR-selectors-api-20091222/ http://www.w3.org/TR/2008/WD-selectors-api-2
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Introduction | Testing Library
Node: removeChild() メソッド - Web API | MDN