こんにちは、テストが好きなsilverbirderと申します。Webフロントエンドのテストは実施していますか？ユニットテストやビジュアルリグレッションテストは広く知られていると思います。しかし、パフォーマンステストのためのテストコードはありますか？また、カオスエンジニアリングテストやアクセシビリティテストはありますか？ 今回、私はWebフロントエンドにおける網羅的なテストパターンを調査し、その結果をここで紹介したいと思います。これらを理解することで、読者の皆さんが適切なテスト戦略を策定する際の参考になれば幸いです。 前提 今回、テスト対象として取り上げる題材は、TodoMVCというTODOアプリです。フレームワークとしてReactを使用しますが、紹介するテストパターンはフレームワークに依存しないものです。ただし、使用するライブラリはReactに関連しているため、その点についてはご了承くださ
はじめに 最近プログラマーとしてのキャリアに一区切りつけようと思っており、これまでのプログラミングの勉強の集大成となるブログを書きたくなったので書く。初めてプログラミングをして、フロントエンド開発をして、サーバーから値が返ってきたときは「どういう仕組みで値が返ってきたんだ？」と疑問に思っていた。ずっと理解したくて理解できていなかった。だからずっと勉強していた。そして最近になってようやく自分の言葉で説明できるようになった気がしたのでブログを書きたい。 2015 年版が自分の原点であり、この記事を書くモチベーションになった このような記事は実は過去に存在している。 FYI: https://blog.yuuk.io/entry/2015-webserver-architecture その記事はサーバーがどういう仕組みで動いていて、どのように進化し、2015 年に至るかを解説してくれた記事だ。自
まとめ 住所フォームの作り方 住所フォームを作るときには以下の4つを押さえましょう。 オートコンプリート機能に最適化する 郵便番号フィールドは1フィールドにしてハイフン有無どちらも対応する モバイルUX優先なら郵便番号が入力されたら即座に補完。精度優先なら郵便番号補完ボタンを設置 住所フィールドは「都道府県」「市区町村」「町名以下」の3フィールドが基本。「建物」フィールドはオプション 本文 地域SNSのユーザー登録、ECサイトの配送先入力、資料請求、自治体サイトでの電子申請など、ウェブサービスを活用する上で住所入力は欠かすことができません。 住所入力をシンプルかつ正確に行えるような入力インタフェース（住所フォーム）は、離脱率を減らし、コンバージョン率を向上させる上で重要です。 郵便番号を入力すると対応する住所を自動入力する機能（郵便番号による住所補完）は、住所フォームの改善方法として最も効
Web開発者がトップクラスとして信用しているサイトは MDN ですが、そこの Cache-Control の解説が酷いです。 https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Cache-Control [mozilla.org] にっこりしている顔文字🙂 [mozilla.org] 付きの「良い例」として Cache-Control: no-store を挙げていて、 プンスカしている顔文字😡 [mozilla.org] 付きの「悪い例」として Cache-Control: private,no-cache,no-store,max-age=0,must-revalidate,pre-check=0,post-check=0 を挙げていますが、「良い例」の方だと今回のような漏洩事故の原因となります。 今回の件が、このせいかど
Atomic Design は難しい Webフロントエンド開発をしている人で Atomic Design を用いた経験がある方に会った時は、必ず 『Atomic Designどうですか？』と聞くようにしています。 大体の方はちょっと苦笑いをしながら『やっぱり難しいですねぇ』とか『試行錯誤しながらで...』みたいなことを教えてくれます。 私もメインの開発をする際に Atomic Design という枠組みを用いています。そして、同様に色々と悩んだのですが、このあたりについて納得がいく解釈ができたと思っています。 そこで、私の思う Atomic Design の難しさや、そう思う原因、どうやってそれを解消するかという点について、https://atomicdesign.bradfrost.com/ を適宜参照しながら共有したいなと思います。 そもそも Atomic Design 何やねん。な方
Intro Cookie は、ブラウザに一度保存すれば、次からその値を自動的に送ってくるという、非常に都合の良い仕様から始まった。 State Less が基本だった Web にセッションの概念をもたらし、今ではこれが無ければ実現できないユースケースの方が多い。 冷静に考えればふざけてるとして思えないヘッダ名からもわかるように、当初はこのヘッダがこんなに重宝され、Web のあり方を変えるかもしれないくらい重要な議論を巻き起こすことになるとは、最初の実装者も思ってなかっただろう。 そんな Cookie が今どう使われ、3rd Party Cookie (3rdPC) の何が問題になっているのかを踏まえ、これからどうなっていくのかについて考える。 Cookie のユースケース Web にある API の中でも Cookie はいくつかの点で特異な挙動をする 一度保存すれば、次から自動で送る 現
ホーム ＞ 対応環境について ＞国際化ドメイン名(IDN)のフィッシング詐欺脆弱性について - 既に対策は存在し、.JPはサービス開始当初より対策済み - 2005年2月7日から8日にかけて、国際化ドメイン名(IDN)に起因するフィッシング詐欺脆弱性が発見されたとの報道がありました。しかしながら、その本質的な内容はブラウザなどのアプリケーションの問題ではなく、そのドメイン名を運用・管理するレジストリの側がどれだけきちんとした対応を行うかという問題であると言うことができます。ここでは、その内容を 問題の本質 報道されている問題に対する解決策は既に存在し、多くのレジストリでは適用されていること JPドメイン名ではサービス開始当初から適切に対策をしていること という流れでご説明します。 なお、現実には、フィッシングでは誘導先のURIを偽装したり隠蔽したりするなど、もっと巧妙な手段が使われているこ
■ 天動説設計から地動説設計へ：7payアプリのパスワードリマインダはなぜ壊れていたのか（序章） 7payの方式はなぜ許されないのか、なぜあんな設計になってしまったのか、どう設計するのが正しいのか、急ぎ書かなくてはいけないのだが、前置きが長くなっていつ完成するかも見えない。取り急ぎ以下のツイートでエッセンスを示しておいた*1が、すでにわかりかけている人達にしか刺さらなそうだ。 そもそもスマホアプリ の時代、もはやauthenticationですらないと思うのよね。（何を言ってるかわからねえだろうと思うが。） — Hiromitsu Takagi (@HiromitsuTakagi) July 8, 2019 同様のことは4年前にNISCのコラムに書いたが、消えてしまっているので、ひとまず、その原稿を以下に再掲しておく。 スマホ時代の「パスワード」のあり方を再考しよう 高木浩光 2015年2
よく新しいフレームワークを学ぶにはTodoアプリを作ってみるのがよい、と言われる。実際、Todoアプリを様々なフレームワークで作ってみたサンプルをまとめたサイトもあったりする。 ところが、実際に業務で作るようなアプリケーションはTodoアプリの範疇を超えている。とくにSPAにもなると、画面遷移やWebAPI連携、大規模な状態管理などなどの条件が増えるので、Todoアプリを作っているときには考慮できていなかった大変さが出てくる。 そこで参考になるのが RealWorld example apps と呼ばれるプロジェクト 端的に言うと、TodoMVCの大規模版。 規定のスペックに沿って、様々なウェブフレームワークで作られたアプリケーションのリポジトリがリストアップされている。 スペックについて "Conduit" is a social blogging site (i.e. a Medium
何を解決したいか？ Mac, Windows, Linux, iPhoneやAndroidのスマホ・タブレットとかのデバイス間でデータの転送したいことがあります。 SlackとかLineとかSkypeとかAirDropとかあっても 送りたい相手と共通して使っているサービスを探す必要とか、 GUIのソフトウェアのインストールが必要とか、 AirDropだとApple系OSである必要 があるなどの転送の障壁があって、GUIが使えないデバイスに送りたいときなどは困ってしまいます。 すでにたくさんのファイル共有系のサービスがありますが、コマンドを使ったCUIベースにあまり親切な設計なものはあまりないと思います。 そこで、上記の問題を解決するために、以下のようなファイル転送の仕組みを作りました。 他デバイス間でデータ転送ができ、 別途ソフトウェアのインストール不要で、 パイプにとても親和性が高くエン
さくらのクラウドでバックエンドを担当しております、@townewgokgok と申します（記事はフロントエンド寄りの記事になります）。これは さくらインターネット Advent Calendar 2018 11日目の記事です。 JSONのように階層化された値をURLに埋め込みたいことってありませんか？ たとえば 価格.com の商品検索結果ページ のように、リンクを開いたら検索フォームの内容が復元されて、URLのコピー時に見ていたものがそのまま表示されて欲しい。 これを実現するには、従来なら文字列のキーバリューとしてごく一般的な application/x-www-form-urlencoded 形式でURLにパラメータを埋め込むところです（上記の価格.comの例でもやはりそうなっています）。ただ、そこそこ複雑な検索フォームの値をいちいちこの形式にまとめたり復元したりするのはわりと面倒です
前回のエントリ↓のつづき。 blog.a-know.me Pixelaを作り、運用するにあたって、「今までやったことなかったけど、今回は絶対にやってみよう」と思っていたことがあって、それが「利用規約の整備」と「GDPRにちゃんと向き合うこと」だった。 なお、以下の文章は「ごく最近に "利用規約" というものに向き合い始めたばかりのド素人」が書いているものであり、その正確さ等については一切保証できません。が、「今回僕はこうやった」ということについて書いてあるため、もし誤解や不足、問題点などがあればぜひご指摘いただきたいです。プログラミングといっしょで、問題点をひとつずつ直していくことを通じて "安心して使ってもらえる・運用していけるWebサービス作り" を上達していきたい、という気持ちがあります。 なぜ取り組もうと思ったか？ 僕はとにかく意識が低くて、GDPRが施行されるという今年の5月下旬
コピペ不可なパスワード入力欄に強制コピペできるブックマークレットを作りました 2018-08-08 パスワードマネージャーからパスワードをコピペしようとしても、未だにコピペ不可なパスワード入力欄に出会うことが少なくないため、JavaScriptのプロンプト表示経由でパスワードを入力するシンプルなbookmarkletを作りました。 javascript:(function(){document.querySelector('input[type="password"]').value = prompt("パスワードを入力してください。")})(); パスワード入力欄があるページでブックマークレットとして使用すると以下のダイアログが表示されるので、ここからパスワードをペーストして入力できます。 全てのサービスで異なるパスワードを使うべきなのに、未だに手動入力させようとする（＝人間が覚えやすく
Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と試し終
SaaSシステムを開発しているみなさま、お元気でしょうか。 SaaSシステムというといわゆるWebサービスよりももう少しBtoBの雰囲気が漂ってまいります。 SaaSシステムでは契約者（ここではテナントと呼ぶ）が複数いて、テナント毎に複数のログインユーザーやロールが存在するのが一般的です。そして当然ながらテナント毎のデータは漏洩・混濁が許されない高いセキュリティが求められます。 SaaSシステムの構築はスケーラビリティにおいても100テナント程度から始まりゆくゆくは数千、数万テナントまで少なくとも線形にスケールするアーキテクチャを開発当初から求められ、さらに突発的な大規模テナントも問題なく吸収したいという要求があります。 その要求を満たす設計・開発・保守・運用をやっていくのは当然ながら簡単ではありません。 というわけで今日はマルチテナントアーキテクチャのお話です。 世に出る情報がとっても少
昨年あたりから、Macやめたい病を患っていたのですが、2度の故障を経て、重たい腰を上げました。別にWindows使いたいわけもなく「ローカルが煩わしい」だけなので、Windowsアプリは一切インストールしていません。で、どうやって暮らしてるの? というお話です。 TL;DR このあたり↓を組み合わせていけば、クラウド生活可能: GCP (or AWS) Codeanywhere (or Koding or Cloud9) VPCネットワーク + VPN (IPsec+L2TP) + DNS Figmaほか、Webサービス各種 追記・この記事を書いていたら、AWS Cloud9が発表されました。選択肢が増えて何よりです。 はじめに 本稿は、筆者が「Mac断ち」あるいは「ローカルマシンから解脱(げだつ)」する過程で見えてきた、ベスト(かも)プラクティス集に近いものです。 よく使うテキストエディ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
