ユーザーが入力したテキストで検索してサジェストしたい １文字ずつ入力するたびにリクエストを送ってしまうとサーバーに負荷がかかってしまうし、入力した結果が遅れて表示される問題がある そこで、リクエスト中に入力があった場合は、前回のリクエストを…

ある検索フォームを実装したところQAの人から「? 」を含むキーワードの検索がおかしいと指摘があった すぐにURIエンコードが必要だとわかってencodeURIComponentを使ってキーワードをエンコードしてOKが出たのだが「他の記号は大丈夫なんでしょうか？」とい…

JackさんのNavigation APIの記事を読んで痺れた blog.jxck.io Navigation APIとは SPA（シングルページアプリケーション）の履歴管理について、既存のwindow.historyAPIを使った方法ではいくつかの問題がある 例えば、iframeの中の遷移履歴も含まれてしまっ…

あるサイトでクリックしたらクリップボードに保存することをJavaScriptで実装していたが、その時のAPIが非推奨になっているのに気づいたので更新したい 非推奨になっているAPIはこれ document.execCommand("copy”) developer.mozilla.org これを以下の書き方…

スマホで入力フォームにフォーカスインするとスマホのキーボードが表示される このとき、入力して各キーボードの右下の決定ボタン（iOSならreturn、Androidなら矢印）をクリックしたときの制御をしたい 具体的には、この入力フォームがformタグの中にあり、…

LocalStorageに格納できるmaxサイズを知らなかったので調査 一つのkeyに何バイトまで格納できるのかを下のHTMLをつかって確認した（headとかは省略） setIntervalで100KBずつ文字列を増やしていって、何バイトでエラーが発生するか <button onclick="start();">実行</button> <script> var storage = wind…

Yahoo!ニュースの取り組み事例でブラウザバックの最適化の話が記事になっていた t.co この中で、キャッシュした記事リストをリロード時に破棄するため、performance.getEntriesByType()を使ってリロード判定する方法が紹介されていたが、performance.getEntr…

これまでURLからクエリパラメータを取り出すときに外部ライブラリのquery-stringを使っていたが、IE対応をしなくて良いということになったのでURL APIが使えるようになった developer.mozilla.org 基本的な使い方として、以下のようにURL オブジェクトを作成…

ページ内のあるセクションにidを付与しておき、ボタンをクリックしたらその位置までスクロールする機能を作りたい jQueryを利用していた時代ではanimateをつかって次のように実装していたが const $target = $('#js-scroll-to-target'); if (!$target) { ret…

WebAPIを設計するときに以下のようなエンドポイントを用意したい idを指定して、単一のリソースを返す queryを指定して、単一のリソースを返す idを複数指定して、複数のリソースを返す 例としては、地図上で表す東京タワーなどのランドマークのリソース（名…

あるWeb APIの設計をレビューしているときに、日付のプロパティに対して date: YYYY年MM月DD日 time: hh時mm分 とフォーマットされた文字列で返すと記載されているのに気付いた フロントエンド目線だとこのようにフォーマットされた状態だと厳しい 例えば、…

モーダルなどのメインコンテンツの手前に表示するコンテンツをクローズする時に、奥にあるメインコンテンツのイベントが実行されてしまった 原因はevent.preventDefault()とevent.stopPropagation()を間違えて実装していたため preventDefaultはリンクの遷移…