JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

【初心者向け】JavaScriptで文字列を反転させる3つの方法

駆け出しのソフトウェアエンジニアやWeb開発者が、最初に挑戦することになる定番のコーディング課題のひとつが「文字列の反転」です。文字列とは、簡単にいえば文字やスペースの集まりのこと。たとえば「Hello World!」という文字列を受け取って「!dlroW olleH」に変換して返す、というのがゴールです。この問題にはいくつもの解き方があり、本記事では代表的なアプローチを3つ紹介します。

お題

文字列を引数として受け取り、それを反転させて返す関数 reverseString を作成してください。

解法1：forループを使う

最もストレートな解法のひとつが、forループで文字列を後ろから前へ辿る方法です。まず、反転後の文字列を格納するための変数を新しく作成し、ループの中で1文字ずつ追加していきます。

function reverseString(str) {
  let newStr = '';
  for(let i = str.length - 1; i >= 0; i--) {
    newStr += str[i];
  }
  return newStr;
}

forループは次の3つのパートで構成されています。

  • 初期化：変数 i を文字列の末尾のインデックス（str.length - 1）で初期化します。ここがループのスタート地点です。
  • 条件：ループを継続するかどうかの判定です。i >= 0 が満たされている間だけ処理を続けます。
  • 更新：各ループの処理完了後に実行される部分です。i-- は i の値を毎回1ずつ減らします（i = i - 1 と同じ意味）。

各イテレーションでは str[i] で取り出した文字を newStr に連結していきます。ループがすべて終わったら、for文の外側で newStr を返して関数を終了します。

実際に動きを確認してみましょう。下記のHTMLファイルをブラウザで開くと、入力した文字列を反転して表示するデモが動きます。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <title>文字列反転デモ</title>
       <script>
           function reverseString(str) {
               let newStr = '';
               for(let i = str.length - 1; i >= 0; i--) {
                   newStr += str[i];
               }
               return newStr;
           }
           function showInput(e) {
               e.preventDefault();
               const inputStr = document.getElementById('user_input').value;
               if(inputStr.length < 1) {
                   alert("反転する文字列を入力してください。");
                   return;
               }
               let reversed = reverseString(inputStr);
               document.getElementById('display').innerHTML = reversed;
               document.getElementById('user_input').value = '';
           }
       </script>
       <style>
           * { box-sizing: border-box; }
           body {
               width: 100%;
               max-width: 500px;
               height: 100vh;
               background: lightblue;
               margin: 0 auto;
               display: flex;
               flex-flow: column wrap;
               align-items: center;
               justify-content: center;
           }
           form {
               display: flex;
               flex-flow: column wrap;
               width: 100%;
               background: lightgray;
               padding: 20px;
               border: 5px double slategray;
           }
           #user_input { width: 100%; }
           #submit_button {
               width: 25%;
               align-self: flex-end;
               margin-top: 10px;
           }
           #display { font-size: 1.4rem; height: 50px; }
       </style>
   </head>
   <body>
       <form onsubmit="showInput(event);">
           <label id="label">反転したい文字列を入力：</label>
           <input type="text" name="message" id="user_input" />
           <input type="submit" onclick="showInput(event);" id="submit_button" /><br />
           <label>結果：</label>
           <p><span id="display"></span></p>
       </form>
   </body>
</html>

解法2：ES6のmap()メソッドを使う

JavaScriptには、ES6で導入された配列メソッド map() が用意されています。これは、各要素に指定した処理を適用した結果からなる新しい配列を返すメソッドです。コールバック関数は「現在の要素」「そのインデックス」「元の配列」の3つの引数を受け取ることができ、今回の解法では後ろの2つを活用します。

まず、split('') メソッドで文字列を配列に分解します。空文字列を区切り文字にすると、1文字ずつ要素に分かれた配列が得られます。その配列に対してmapを実行します。

function reverseString(str) {
  let newArr = str.split('');
  let rev = newArr.map((letter, index, array) => {
    let swapIndex = array.length - index - 1;
    return array[swapIndex];
  });
  return rev.join('');
}

この解法の鍵は「インデックスの入れ替え」です。現在の位置に入れるべき文字、つまり対称の位置にある文字を特定する必要があります。

具体的には、「配列の長さ − 1 − 現在のインデックス」がスワップ先のインデックスになります（1を引くのは、配列のインデックスがゼロから始まるためです）。こうして得られる array[swapIndex] を返すことで、現在のインデックスの文字が反転後の文字に置き換わり、全体としては逆順の文字配列が完成します。

最後に join('') で配列を1つの文字列につなぎ合わせて返せば完了です。

覚えておきたい重要ポイント：mapは必ず新しい配列を返すため、渡された元の文字列や配列は変更されません。

解法3：組み込みメソッドを組み合わせる（1行）

3つ目は、組み込みメソッドである split()、reverse()、join() をチェーンして、わずか1行で解いてしまう方法です。

function reverseString(str) {
  return str.split('').reverse().join('');
}

処理の流れは「文字列を配列に分解 → 配列を反転 → 再び文字列に結合」というシンプルなものです。非常に簡潔ですが、内部で何が起きているのかを理解しておくことが大切です。

組み込みの reverse() は、内部的には先ほどのmapと似た働きをします。ただし、reverse() は新しい配列を返すのではなく、元の配列をその場で書き換える（in place）点が大きく異なります。より大きなプログラムの中で使う場合は、必要になったときに元の配列へアクセスできるよう、あらかじめコピーを作成しておくと安全です。

まとめ

以上が文字列反転問題の代表的な解法ですが、これらが唯一の正解というわけではありません。あくまでよく知られているアプローチの一例です。冒頭のHTMLデモの reverseString() 関数部分を差し替えるだけで、どの解法でも動作確認ができます。ぜひ自分なりに別の解法も探求してみてください。

  1. 【初心者向け】JavaScriptのreverse()メソッドで配列を逆順にする方法

    JavaScriptのreverse()メソッドは、配列の要素を元の順序と逆順に入れ替えるための便利な関数です。このメソッドを呼び出すと、配列の最初の要素が最後に、最後の要素が最初に移動し、配列全体が反転されます。reverse()メソッドの基本reverse()は配列そのものを変更する「破壊的メソッド」である点に注意してください。つまり、元の配列の順序が直接書き換えられます。元の配列を保持したい場合は、あらかじめslice()やスプレッド構文（[...arr]）などでコピーを作成してからreverse()を使用するのがおすすめです。サンプルコード以下は、ボタンをクリックすると配列の要素が逆順

  2. 【JavaScript入門】文字列を繰り返す方法 – Array()とjoin()を組み合わせた実装例

    JavaScriptである文字列を指定した回数だけ繰り返して表示したい場合、Array()コンストラクタとjoin()メソッドを組み合わせることで簡単に実現できます。 仕組みの解説 new Array(value + 1)は、要素数が「value + 1」個の空の配列を生成します。この空の配列に対してjoin(this)を実行すると、各要素の間に区切り文字として自分自身（対象の文字列）が挿入されます。要素が value + 1 個あれば間は value 個できるため、結果的に元の文字列が value 回繰り返されるという仕組みです。 サンプルコード 以下に実際のコード例を示します。 <!