【JavaScript】配列内で最も長い文字列のインデックスを検索する方法（空白を除く）

本記事では、文字列の配列を受け取り、その中で最も長い文字列のインデックスを返す関数をJavaScriptで実装する方法を解説します。ただし、文字列の長さを計算する際には、空白（スペース）が占める分はカウントしないものとします。

要件の整理

• 文字列リテラルの配列を受け取り、最も長い文字列のインデックスを返す関数を作成する
• 長さの計算では、空白は除外する
• 同じ長さの文字列が複数存在する場合は、最初に出現した文字列のインデックスを返す

実装のアプローチ

以下の手順で処理を進めます。

1. 配列を反復処理し、各要素を空白で分割してから再結合することで、空白を除いた実際の長さを計算する
2. 計算した長さとインデックスをオブジェクトとして保持する
3. 現在保持している長さよりも長い文字列に到達した時点で、オブジェクトの内容を更新する
4. 処理完了後、最も長い文字列のインデックスを返す

コード例

const arr = ['Hello!', 'How are you', 'Can ', 'I use', 'splice method with', ' strings in Js?'];

const findLongestIndex = (arr) => {
  const longest = arr.reduce((acc, val, index) => {
    // 空白を除去した実際の長さを計算
    const actualLength = val.split(" ").join("").length;
    if (actualLength > acc.length) {
      return {
        index,
        length: actualLength
      };
    }
    return acc;
  }, {
    index: 0,
    length: 0
  });
  return longest.index;
};

console.log(findLongestIndex(arr));

出力結果

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

4

コードの解説

この実装のポイントは、Array.prototype.reduce() メソッドの活用です。reduce() は配列の各要素に対してコールバック関数を実行し、単一の累積値（アキュムレータ）を返します。ここでは、これまでに見つかった最長文字列の「インデックス」と「長さ」をアキュムレータとして管理しています。

各要素に対して split(" ").join("") を実行することで空白をすべて削除し、その結果の length プロパティで純粋な文字数を取得できます。より簡潔に書きたい場合は、val.replace(/\s/g, "") や val.replaceAll(" ", "") を使う方法もあります。

サンプル配列の場合、「splice method with」は空白を除くと16文字となり最も長いため、そのインデックスである「4」が出力されます。同点の場合でも、reduce() の比較条件が >（より大きい）のみであるため、先に現れた文字列のインデックスが優先的に保持される仕組みです。