Webフロントエンドにおける網羅的テストパターンガイド
こんにちは、テストが好きなsilverbirderと申します。Webフロントエンドのテストは実施していますか？ユニットテストやビジュアルリグレッションテストは広く知られていると思います。しかし、パフォーマンステストのためのテストコードはありますか？また、カオスエンジニアリングテストやアクセシビリティテストはありますか？ 今回、私はWebフロントエンドにおける網羅的なテストパターンを調査し、その結果をここで紹介したいと思います。これらを理解することで、読者の皆さんが適切なテスト戦略を策定する際の参考になれば幸いです。 前提 今回、テスト対象として取り上げる題材は、TodoMVCというTODOアプリです。フレームワークとしてReactを使用しますが、紹介するテストパターンはフレームワークに依存しないものです。ただし、使用するライブラリはReactに関連しているため、その点についてはご了承くださ
これからWeb開発を始める人に知ってほしいGitHubプロジェクト - Qiita
はじめに 当記事ではProgrammingを始める方や学生でこれからエンジニアを目指されている方々に私がよく紹介しているGitHubのプロジェクトを紹介します。基本英語ベースのプロジェクトですが、どのプロジェクトもきっと皆さんのキャリアにとって役に立つはずです。ぜひお役立ていただければと思います。 また、指導者、教育者側の方々も、教材として参考になるかと思います。 2021/11/14追記 MicrosoftがGitHubで無償で公開している学習教材をまとめました。こちらも合わせてお読みください。 1. Web Developer Roadmap このプロジェクトではWeb Developerになるまでにどのような知識が必要なのかを体型的にまとめてくれています。 これはFrontendのRoadmapの例ですが、以下のようにTopicにつき質問がいくつかあるのでそれに答えられるようになって
"JWT=ステートレス"から一歩踏み出すための考え方
おはようございます、ritouです。 この話に乗っかっていきます。 3行で ログアウト時にJWTを無効化できない実装は今後脆弱性診断で「OWASP Top 10 2021違反」と指摘されるようになりそう(今も個別にされてるかもしれないけど) JWTは単純なフォーマットなので、ステートレスなセッション管理においてログアウトしたときに文字列自体を無効化できない件は独自エンコード方式(一般的にフレームワークのCookieストアと呼ばれているもの)でも起こり得る 「セッションID vs JWTで内包」 以外にも 「セッションIDをJWTに内包」もあり得る。既存の機能を残しつつ「JWTで武装」する選択肢も考えてみてはどうか。 ステートレスなセッション管理でログアウトの際に文字列自体を無効化できない問題 これは前から言われていますし、駆け出し何とか勢のQiita記事に書かれるぐらいには一般的です。 2
Webフロントエンド パフォーマンス改善ハンドブックを公開しました - dwango on GitHub
パフォーマンス改善ハンドブック ウェブページにおけるパフォーマンスに関する問題の見つけ方や考え方の事例をまとめた Webフロントエンド パフォーマンス改善ハンドブックを公開しました。 URL: https://dwango-js.github.io/performance-handbook/ このハンドブックでは過去に行ったWebフロントエンドのパフォーマンス改善の事例を中心に紹介しています。 注意点としてWebフロントエンドは常に変化しているため、現在の最適な解決方法を提案するものではありません。 また、アプリケーションによっても最適な解決方法は異なります。 今回の事例ではViewライブラリにReactを用い、映像再生プレイヤーなどある程度複雑な機能を持ったウェブアプリケーションのWebフロントエンドを扱います。 具体的にはニコニコ生放送（以下「生放送」）で行った事例を中心に書かれていま
Playwright
Playwright enables reliable end-to-end testing for modern web apps. Cross-browser. Playwright supports all modern rendering engines including Chromium, WebKit, and Firefox. Cross-platform. Test on Windows, Linux, and macOS, locally or on CI, headless or headed. Cross-language. Use the Playwright API in TypeScript, JavaScript, Python, .NET, Java. Test Mobile Web. Native mobile emulation of Google C
Scalable Web Architectures Concepts & Design
Figure 1: Example of a scalable web app design. Source: erwindev For every web application, one of the fundamental factors that decides its success is its ability to seamlessly and efficiently accommodate growth, or “scale”, accordingly with clients' requests. A scalable web application is a website that is able to handle an increase in users and load, whether in terms of a gradual or abrupt surge
Best Practices for Using IndexedDB | Articles | web.dev
Best Practices for Using IndexedDB Stay organized with collections Save and categorize content based on your preferences. Learn best practices for syncing application state between IndexedDB an popular state management libraries. When a user first loads a website or application, there's often a fair amount of work involved in constructing the initial application state that's used to render the UI.
gRPC-Web for .NET now available - .NET Blog
gRPC-Web for .NET is now officially released. We announced experimental support in January and since then we’ve been making improvements based on feedback from early adopters. With this release gRPC-Web graduates to a fully supported component of the grpc-dotnet project and is ready for production. Use gRPC in the browser with gRPC-Web and .NET today. Getting started Developers who are brand new t
2019年版 最先端のフロントエンド開発者になるために学ぶべきこと - Qiita
こちらの記事は、『Learn to become a modern Frontend Developer in 2019』の和訳になります。 本投稿は転載であり、本記事はこちらになります。 はじめに 新年になって以前書いた記事を少し簡潔にして理解しやすいように書き直してみました。この文章に以前私が書いた文章と違ったことが書いてあったり、少し矛盾する内容が見つかってもあまり気にする必要はありません。 昨年私が書いた記事はGitHubで公開しています。 Web開発は絶えず変化する分野です - 今日私たちがWebサイトを構築する方法は、2～3年前のやり方とは全く違ってきています。利用できるツールが沢山あり、新しいツールも毎日出てくるので、ウェブ開発者はいつもどのツールを使えばよいのか迷ってしまいます。 私は、ウェブ開発に係るフロントエンド、バックエンド、または運用を学びたいと思う人を対象にしたツ
フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]
パフォーマンスJavaScriptHTMLフロントエンドcssdomcssom こんにちは、羽山です。 今回はウェブシステムにおけるフロントエンドのパフォーマンスの話です。 皆様はウェブのパフォーマンスを気にしていますか？ おそらく大抵の方はSQLのチューニングやロジックの改良などをした経験があるのではないでしょうか？ しかしプログラムをチューニングしても、期待ほどはページ表示速度が改善しなかったことはありませんか？ 昨今のウェブサイトは大量のCSS/Javascriptファイルで構成されているページが大半です。例えばHTMLを100～300msほどで生成してブラウザに転送できたとしても、ページ表示が完全に完了するのに4～5秒かかるということも珍しくありません。 「なんか遅いけど沢山いろいろ読み込んでるから仕方ないな・・・」と諦めないでください。ブラウザがどのようにHTMLを解釈して、CS
![フロントエンドのパフォーマンスを徹底解説！ブラウザの気持ちで理解するHTML/Javascript/CSSの話 | Raccoon Tech Blog [株式会社ラクーンホールディングス 技術戦略部ブログ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/6e392d4350342045b699dea4e2a6421740d16647/height=288;version=1;width=512/https%3A%2F%2Ftechblog.raccoon.ne.jp%2Fwp-content%2Fuploads%2F2018%2F04%2Fphoto_47592_20151013_min.jpg)
私が愛する Elixir/Erlang の楽しさと辛さ
Developers Summit 2019 にて, Web エンジニアの皆様向けに Elixir の紹介をした際に使用したスライドです. https://event.shoeisha.jp/devsumi/20190214/session/1996/ デブサミ 2019 年テーマ「SHARE YOUR FUN!」に則り、私が 15 年間にわたり愛し続けている Erlang や Elixirを、まだ、これらに触れたことがない PHP/Java/JavaScript などが得意な Web エンジニアの方々へ共有します。 ゴールは、ご参加いただける皆様の道具箱に Elixir を追加する準備を整えることです。 他の言語と比較して何が良いのか？辛いのか？(継続、イベントドリブン、オブジェクト指向、プロセスデザイン、マクロなど)に触れていき、皆様の期待値を適切に保った状態でElixir の世界へと
Webサービスの多言語・多通貨・複数地域展開におけるバッドプラクティスについて考えてみる | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
2021年1月15日追記：当記事でご紹介しておりますdoorは、2020年にサービスを終了いたしました。今までご愛顧いただきましたお客様に、深く御礼申し上げます。 こんにちは、バックエンドエンジニアのグッチです。 2019年にもなったことだし、今日はWebサービスを作った思い出を振り返りながら、多言語・多通貨・複数国対応のバッドプラクティスについて書いてみようと思います。 Webサービス・アプリなどを仕事や趣味で作って（作ろうとして）いる方の参考になれば嬉しいです。実際に自分のサービスが全世界で使われるサービスになるかはさておき、いつか来るかもしれないその日に向けて、考えてみる機会にしていただけたら……。 ▼最近のご飯 Webサービスの海外展開って結構大変 日ごろWebサイト/サービス/アプリを使っていて、こーゆーの見たことありますよね？ 海外のサイトなはずなのになぜか初めから日本語で表示
翻訳: WebAPI 設計のベストプラクティス - Qiita
これは Enchant の開発者である Vinay Sahni さんが書いた記事「Best Practices for Designing a Pragmatic RESTful API」1を、ご本人の許可を得て翻訳したものです。 RESTful な WebAPI を設計しようとすると、細かなところで長考したり議論したりすると思います。また、他の API に倣ってやってはみたものの、本当にそれでいいのか、どうしてそうしているのか分からない、何てことも少なくはないと思います。 この記事では、そのようなハマリどころについて Vinay さんなりの答えを提示し、簡潔かつ明快に解説してくれています。 今後 WebAPI を設計される方は、是非参考にしてみてください。 なお、誤訳がありましたら編集リクエストを頂けると幸いです。 まえがき アプリケーションの開発が進むにつれて、その WebAPI を公
Web Developer Roadmap 2018が2019年版になっていたので比較してみる - Qiita
偉大なるリポジトリ 昨年に引き続き、Webエンジニアのためのロードマップが2019年版へ更新されています。2018年の間に大きく様変わりしていて、他の投稿者による翻訳記事がQiitaにもあがっているので詳しくはそちらをご覧ください。 この記事では2018年版と2019年版を比較して、技術トレンドの推移をそれなりに把握する事を目的としています。また、技術選択の際に迷った時も指針として活用していただければ幸いです。前回書いた記事はこちら 内容が充実しすぎていることもあり、すべてに触れたくても触れられません。一部ピックアップをしながら進めていきます。 ではさっそく見ていきましょう！疲れるので今回はあまりふざけません。 🚀Introduction 2018 2019 Choose your path に変化はないですが、左右の四角に変化があります。2019年版にはlicenseやSOLID,KI
設計サンプルで学ぶ、AWS構築の原則 - Webアプリ アーキテクチャのベストプラクティスを理解する - エンジニアHub｜若手Webエンジニアのキャリアを考える！
設計サンプルで学ぶ、AWS構築の原則 - Webアプリ アーキテクチャのベストプラクティスを理解する AWS入門者に向け、同サービスのエキスパートである、クラスメソッドの八幡豊さんが、Webアプリケーション開発のためのAWS構築の基本を解説します。広範な領域をフォローするAWSですが、広範ゆえに、なにをどのように選ぶべきか……。こんなお悩みを持つ方はぜひご一読を。 クラウドコンピューティングサービス・Amazon Web Services（以下、AWS）は、数多くの高機能なクラウドサービスを簡単に利用できることから、多くの企業が導入しています。AWSの知識を身につけることは、いまやエンジニアにとっての必修科目です。 そのサービス範囲は広範にわたることから、「なにを」「どうやって」使うかのかが重要な知識になってきます。AWSの各サービスのポテンシャルを引き出すためには、それぞれの長所・短所を
gRPC-Webが正式リリース。WebブラウザからgRPCを直接呼び出し可能に
Googleによって開発され、現在Cloud Native Computing Foundation（CNCF）によって開発がホストされているRPCフレームワーク「gRPC」は、プログラミング言語に依存せず、HTTP/2をサポートしたシンプルで高速なRPCを実現できる特徴を備え、マイクロサービスなど分散アプリケーションなどの実装で広く使われ始めています。 このgRPCをWebブラウザのJavaScriptから呼び出し可能にする「gRPC-Web」が正式リリースとなったことを、CNCFが発表しました。 これまではWebアプリケーションのバックエンドでgRPCを用いて開発を行ったとしても、それをWebブラウザから呼び出すには、WebブラウザとWebサーバ間をRESTful APIなどで接続し、WebサーバからgRPCを呼び出すという手法で、RESTfulとgRPCをブリッジすることが一般的でし
Webアプリケーションのベンチマークをとるときに気をつけている10のこと - たごもりすメモ
10もないかも、と思いながら項目を書き出してみたら10以上余裕であってキリがないので10で収めた。いやあ、あるなあ。 仕事柄よくベンチマークを実行したりしてて色々と思うところが溜まっていたところ、以下のような記事を見掛けたのでなんか書こうと思った。ところでこの記事はベンチマークを実行するための準備作業がループを回して2時間かかるところの待ち時間に書かれている。 sfujiwara.hatenablog.com ISUCONといえば多少縁があるコンテストで、文中でISUCON5のことについても言及されているので、それも含めて。 自分が業務でいじっているのは "Webアプリケーション" というとちょっと違うんじゃないのというものばかりだが、いやー、最近なんでもHTTPで外部APIを作るからベンチマークのコツとしては大体変わんなかったりするよね。 なおこの記事でベンチマークはどのようなものかとか
BFF（Backends For Frontends）超入門――Netflix、Twitter、リクルートテクノロジーズが採用する理由
BFF（Backends For Frontends）超入門――Netflix、Twitter、リクルートテクノロジーズが採用する理由：マイクロサービス/API時代のフロントエンド開発（1）（1/2 ページ） マイクロサービス/API時代のフロントエンド開発に求められる技術の1つBackends For Frontends（BFF）について解説する連載。初回は「超入門」としてBFFの概要や事例を中心に紹介する。 本連載「マイクロサービス/API時代のフロントエンド開発」では、今注目のBackends For Frontends（BFF）について数回にわたって解説します。初回である今回は「超入門」としてBFFの概要や事例を中心に紹介します。第2回はBFFの作り方について、第3回はBFFを使ったフロントエンド開発者主導のマイクロサービス／API化の手順について解説します。 想定読者は、Webア
Customer Notes: Diagnosing issues under load of Web API app migrated to ASP.NET Core on Linux - Scott Hanselman
When the engineers on the ASP.NET/.NET Core team talk to real customers about actual production problems they have, interesting stuff comes up. I've tried to capture a real customer interaction here without giving away their name or details. The team recently had the opportunity to help a large customer of .NET investigate performance issues they’ve been having with a newly-ported ASP.NET Core 2.1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Progressive Web Apps | web.dev
