JavaScriptでメールアドレスをマスキングしてプライバシーを保護する方法

はじめに

Webサイト上で個人のメールアドレスを公開表示する場合、プライバシーを守るためにアドレスをマスキング（一部を伏せて表示）するのはよくある手法です。

たとえば、次のようなメールアドレスがあったとします。

const email = 'ramkumar@example.com';

これをマスキングすると、次のように表示されます。

const masked = 'r...r@example.com';

このように、ローカルパート（@より前の部分）の最初の文字と最後の文字だけを残し、間を「...」で置き換えるのがポイントです。ドメイン部分はそのまま表示します。

マスキング関数の実装

ここでは、メールアドレスの文字列を受け取り、マスキング済みのメールアドレスを返すJavaScript関数を作成します。

以下がそのコードです。

const email = 'ramkumar@example.com';
const maskEmail = (email = '') => {
    const [name, domain] = email.split('@');
    const { length: len } = name;
    const maskedName = name[0] + '...' + name[len - 1];
    const maskedEmail = maskedName + '@' + domain;
    return maskedEmail;
};
console.log(maskEmail(email));

コードの解説

• split('@')：メールアドレスを「@」で分割し、ローカルパート（name）とドメイン（domain）に分けます。
• name[0]：ローカルパートの先頭の1文字を取得します。
• name[len - 1]：ローカルパートの末尾の1文字を取得します。
• 取得した2文字を「...」で連結し、ドメインと再結合することで、マスキング済みのメールアドレスを生成します。

実行結果

コンソールには次のように出力されます。

r...r@example.com

まとめ

このように、わずか数行のコードでメールアドレスを安全にマスキングできます。ユーザーの個人情報を扱うWebアプリケーションでは、こうした小さな工夫を積み重ねることで、プライバシー保護のレベルを効果的に高めることができます。