JavaScript

Vue.js では、v-for を使うと、配列を HTML のテーブルやリストとして見やすくレンダリングできます。しかし、オブジェクトのキーと値をテーブルとして表示したい場合はどうすればよいのでしょうか。例えば、連絡先の情報を JS のオブジェクトと配列で多数保存していて、連絡先ごとにキーが異なるとします。連絡先1の情報をテーブルで表示したいのですが、v-for はこの用途には向いていないのでしょうか？ ...

最近の仕事で、ウェブサイトに Google Analytics のユーザーイベント追跡コードを組み込んでいました。HTML のイベントを使ってコードを input にバインドし、ユーザーが特定の欄やボタンをクリックするたびに Google Analytics へ記録を送信するようにしました。この方法自体には問題ありません。ところが、ユーザーが input 欄をクリックしたあとに別のページ（Chrome のタブ）へ切り替え、再び自分のページに戻ってきた（Page onFocus）とき、input の onFocus イベントが自動的に発火することに気づきました！ ...

JavaScript には本当に奇妙な落とし穴がたくさんあります。今日、文字列を数値に変換するために parseFloat を使っていたところ、渡された値を数値に変換できない場合は NaN（Not a Number）が返ることを知りました。そこで、次のようなコードで判定することにしました： var score = parseFloat(prompt("Score:")); if(score === NaN) { console.log("Not a Number"); } else { console.log(score); } 一見すると当然に見えるコードです。undefined や null のように、直接等値比較できそうに思えます。まさかまったく期待どおりに動かないとは思いもしませんでした。 ...

多くのコンテンツサイトには、テキストをコピーすると元記事のURLを自動で付けてくれる仕組みがあります。たとえば魔境歌詞網や知乎などです。中にはテキストのコピーを一切禁止しているサイトもあります。こうした機能の実装は難しくなく、数行の簡単なJavaScriptで済みます。ただ、その前にサイトに本当に必要な機能なのかを考えるべきです。通常の訪問者がテキストをコピーしてFacebookに貼り付けたとき、それは本当にサイトの害になるのでしょうか。また、訪問者によるコピーを本気で防ぎたいなら、こうした方法は「君子は防げても小人は防げない」というもので、本当に正直者だけを防げるにすぎません。それで利益を守れているのでしょうか、それとも、サイトを使いにくくしているだけなのでしょうか。 ...

ファイルをアップロードするときに一番嫌なのは、5分後に「ファイルが大きすぎる」「サイズが正しくない」と言われることです。アップロードの検証は通常バックエンドに任せるため、条件を満たしているかを確認するには、まずファイルをアップロードしなければなりません。特に画像は縦横比も確認する必要があります。これらすべてをバックエンドに任せきりにすると、ユーザー体験が損なわれることがあります。以前、NewTalkでプロフィール画像のアップロードを調べていたとき、これらの多くはフロントエンドで処理できることがわかりました。JSとHTML5 APIを使えば、ファイルの形式、サイズ（20MB）、寸法（100x100）をチェックできます。プレビューやフロントエンドでの画像の切り抜き・変換まで行えるのです！ ...

JavaScript で関数の実行時間を計測するには、関数の実行前に取得したタイムスタンプと、実行後に取得したタイムスタンプの差を取ればよいです。多くの人は new Date().getTime() でタイムスタンプを取得しますが、関数の実行時間が1ミリ秒未満の場合は、タイムスタンプの最小単位がミリ秒までなので計算できません。そこでここでは、Window.Performance API の使用をおすすめします。これはページの読み込み開始からの経過ミリ秒数を提供し、精度は1000分の1ミリ秒までです。 ...

JavaScript で String.replace を使うときは、期待どおりに動かない場合があるので注意してください。ある文字列を置換しようとすると、replace は最初の1つしか置換しないことに気づくでしょう。たとえば “AAA”.replace(“A”, “B”) は、“BBB” になると思うかもしれませんが、実際には “BAA” になります。これは、JS の replace の第1引数が実は文字列ではなく正規表現だからです。文字列を渡すと、最初に見つかったものだけが置換されるため、期待と異なる結果になります。 ...

今や JavaScript はどこにでもあります。Ajax、ページの切り替え、ポップアップウィンドウなど、JS でウェブページを操作することはますます一般的になっています。React JS や Vue JS など、Single Page Application（SPA）の開発を支援する JS フレームワークまで登場しています。JS でウェブページを操作するときに一番怖いのは、URL の変化と履歴です。たとえば jQuery でページを切り替えても、JS の操作なので URL は変わりません。さらにユーザーがブラウザ左上の「戻る」ボタンを押すと、履歴に JS の操作が記録されていない（実際には記録できない）ため、まったく別のページに戻ってしまいます。この一連の問題を解決するには、HTML5 が提供する history.pushState、history.replaceState、そして onpopstate イベントを使えます。 ...

少し前、嘖嘖（Zeczec）で「端数切り上げ」機能を見かけました。たとえば会計で 1359 元になったとき、端数切り上げボタンを押すと 1400 元になります。面白い機能ですが、実際に実装してみると、端数切り上げは思ったより難しいことがわかりました。技術面以外の配慮事項もたくさんあります。ここでは、実装中に直面した問題と、その過程、そして最終的な解決策を記録しておきます！ ...

JavaScript でユーザーがいつウェブページに入ってきたかを記録することは、多くの人がすでにやっていると思います。でも、ユーザーがいつページを「閉じた」のかを判断する方法を考えたことはありますか？ 今のブラウザは複数のウェブページをタブで表示するので、ユーザーが実は別のページを見ていて、あなたのページはただ開いたままになっているという可能性もあります。たとえば YouTube もこの問題によく直面します。ユーザーが音楽を聴くためにページを開いたままにしていても、実際には Facebook を見ているのです……。 今回は、JS のページ読み込みとクローズのイベント、そして Focus（ページに入った）と UnFocus（ページから離れた）のイベントを簡単にまとめます。これらのイベントを使えば、ユーザーの操作状況を記録して分析できますし、ユーザーがページから離れたときに音楽の再生を止めるといったことも実現できます。 ...