Presented by Nishishi via Movable Type. Last Updated: 2016/10/14. 13:32:45.

文字コード順に文字列を並び替える(ソートする)方法

ユーザからの入力文字列を蓄積していく場合などでは、「保存している文字列」を何らかの規則で並び替えたい(ソートしたい)場合があります。データを規則的に並べておけば、データ量が多くなったときに検索しやすくなりますから、検索時間の節約ができます。
データを並び替える際には、「どういう規則で並び替えるのか」を考える必要があります。おそらく最もスタンダードなのは(何も考えずに並び替える場合は)「文字コード順」でしょうか。
漢字の場合だと文字コードはバラバラですけども、「ひらがな」・「カタカナ」・「数字」・「アルファベット」などであれば、一般的な文字の並び順(あいう……、アイウ……、123……、ABC……など)に文字コードが割り振られているので、文字コードを元にして並べ替えれば、ほぼ文字順(音順)に並び変わります。

JavaScriptでは、「sortメソッド」を使うことで、簡単に文字コード順に並べ替え(ソート)ができます。
sortメソッドには引数として比較用の関数を指定することもできるのですが、引数に何も指定せず実行すれば「文字コード順」に並べてくれます。楽々です。

入力文字列を、文字コード順に並び替える(ソートする)サンプル

以下のテキストエリアに適当な文字列を複数行ほど入力してから、下部の「文字コード順にソートする」ボタンを押すと、文字コードを元にして(文字コードの若い順に)並び変わります。

◆文字列リスト:

上記のサンプルを使うと、入力された文字列が文字コードの若い順に並び変わり(ソートされ)ますから、ほぼ文字の音順に並びます。なぜ「ほぼ」かという点については(実際に並べ替えてみると分かりますが)詳しくは後述します。
先に、上記のサンプルを実現するJavaScriptソースを解説しておきます。

文字コード順で並び替える(ソートする)ためのJavaScriptソース

先ほどのソート処理は、以下のJavaScriptソースで作っています。ここでのソート処理は、単にJavaScriptに最初から存在するsortメソッドをそのまま呼び出しているだけなので、とても短いソースで済んでいます。

function SortByCharCode() {
   // textareaの内容を改行で分割して配列に格納
   var targetArray = document.getElementById('sampleTargetLines').value.split("\n");
   // 文字コード順にソート
   var sortedArray = targetArray.sort();
   // ソート結果を書き戻す
   document.getElementById('sampleTargetLines').value = sortedArray.join("\n");
}

文字列の入力・出力用として、以下のHTMLを用意しています。textarea要素には、JavaScript側から中身(文字列)を扱うために、id属性でid名「sampleTargetLines」を割り振っています。

◆文字列リスト:<textarea cols="30" rows="6" id="sampleTargetLines">リンゴ
みかん
グレープフルーツ
: : :
グレープ</textarea>
<input type="button" value="文字コード順にソートする" onclick="SortByCharCode();" />

上記のソースによって、「文字コード順にソートする」ボタンをクリックすると、テキストエリアに入力した複数行の文字列が文字コード順に並び変わる機能ができがあります。

文字コード順に並び替えれば(ソートすれば)、ほぼ音順に並べ替えられる

先ほどのサンプルのように、文字コード順に並び替えれば、ほぼ音順に並び変わります。「ほぼ」というのは、下記の理由からです。

  • ひらがな「あ」~「ん」の後に、カタカナ「ア」~「ン」が並ぶ。(例えば「アップル」と「みかん」だと、「みかん」が先に来る。ひらがなが先になるから。)
  • 英大文字「A」~「Z」の後に、英小文字「a」~「z」が並ぶ。(例えば「apple」と「Orange」だと、「Orange」が先に来る。大文字が先になるから。)

このように、「文字コード順」だと、文字種によるソートの方が優先されるので、必ずしも50音順にはなりません。「ひらがなだけが入力されている」とか「アルファベット大文字だけが入力されている」など、文字種が1種類なのであれば、文字コード順でソートするだけで「50音順」や「アルファベット順」になりますが。そこが気に入らない場合は、sortメソッドの引数に「比較用の関数」を渡すことでソート処理をカスタマイズする必要があります。

その話は長くなるので、別の機会に回します。(^_^;)
とりあえず今回は、文字コード順に並べる方法を解説しました。

JavaScript TIPS 主要なカテゴリ

現在、以下のカテゴリに区分してTIPSを公開しています。

  • イベント : JavaScriptを実行するトリガーとなるイベントに関するTIPS
  • 入力フォーム : JavaScriptで入力フォームを扱う方法に関するTIPS
  • 情報取得 : JavaScriptで様々な情報を得る方法に関するTIPS
  • 操作・移動 : JavaScriptでブラウザを操作したり表示ページを移動したりする方法に関するTIPS
  • 日付・時刻 : JavaScriptで日付や時刻を扱う方法に関するTIPS
  • 機能 : JavaScriptで何らかの機能を実現する方法に関するTIPS
  • 装飾・内容変更 : JavaScriptで装飾や内容を変更する方法に関するTIPS
  • 計算・変換 : JavaScriptで様々な計算や変換処理を行う方法に関するTIPS

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

関連書籍・関連ソフトなど