【JavaScript】投稿に「いいね」したユーザーの名前を表示する関数の実装方法

問題

SNSなどでよく見かける「〇〇さん、△△さん、他N人が『いいね！』しました」といった表示。本記事では、特定の投稿に「いいね」を付けたユーザーの名前が格納された配列（文字列）を受け取り、人数に応じて適切なメッセージを返すJavaScript関数の実装方法を解説します。

求められる仕様は以下のとおりです。

• 0人の場合：「no one likes this」を返す
• 1人の場合：「◯◯ likes this」を返す
• 2人の場合：「◯◯ and △△ like this」を返す
• 3人の場合：「◯◯, △△ and □□ like this」を返す
• 4人以上の場合：最初の2名の名前と残りの人数を組み合わせた「◯◯, △△ and N others like this」を返す

コード例

以下が実際のコードです。

const names = ['Ram', 'Manohar', 'Jay', 'Kumar', 'Vishal'];
const displayLikes = (names) => {
    return [
        'no one likes this',
        `${names[0]} likes this`,
        `${names[0]} and ${names[1]} like this`,
        `${names[0]}, ${names[1]} and ${names[2]} like this`,
        `${names[0]}, ${names[1]} and ${names.length - 2} others like this`,
    ][
        Math.min(4, names.length)
    ];
};
console.log(displayLikes(names));

出力結果

Ram, Manohar and 3 others like this

コードのポイント

この実装の優れた点は、パターンごとのメッセージをあらかじめ配列として定義し、インデックスで切り替えているところにあります。

• Math.min(4, names.length) により、人数が4人以上の場合は常にインデックス4（4人以上用のテンプレート）が選択されます。
• 3人以下の場合は、実際の人数がそのままインデックスとして機能するため、各ケースに対応したメッセージが返されます。
• 残りの人数は names.length - 2 で算出され、「最初の2名 + その他N人」という形式の文字列が動的に生成されます。

このように if 文や switch 文による分岐を一切使わずに済むため、コードが簡潔になり、可読性・保守性も向上します。同様の表示ロジックはFacebookやInstagramなどの「いいね」表示でも採用されている定番パターンなので、ぜひ参考にしてみてください。