[計算・変換]文字列を何らかの規則で並び替えたい(ソートしたい)場合があります。データを規則的に並べておけば、量が多くても検索しやすくなりますし。JavaScriptでソートする場合は「文字コード順」ならとても簡単にソートできます。何も考えずに単にsortメソッドを使えば良いだけです。JavaScriptソースで文字コード順にソートする方法を解説。入力文字列を、文字コード順に並び替える(ソートする)サンプル文字コード順で並び替える(ソートする)ためのJavaScriptソース文字コード順に並び替えれば(ソートすれば)、ほぼ音順に並べ替えられる文字コード順に文字列を並び替える(ソートする)方法ユーザからの入力文字列を蓄積していく場合などでは、「保存している文字列」を何らかの規則で並び替えたい(ソートしたい)場合があります。データを規則的に並べておけば、データ量が多くなったときに検索しやすくなりますから、検索時間の節約ができますし。データを並び替える際には「どういう規則で並び替えるのか」を考える必要があります。楽なのは(何も考えずに並び替える場合は)「文字コード順」でしょうか。漢字の場合だと文字コードはバラバラですけども、「ひらがな」・「カタカナ」・「数字」・「アルファベット」などであれば、一般的な文字の並び順(あいう......、アイウ......、123......、ABC......など)に文字コードが割り振られているので、文字コードを元にして並べ替えれば、ほぼ文字順(音順)に並び変わります。JavaScriptでは、sortメソッドを使うことで、簡単に文字コード順に並べ替え(ソート)ができます。sortメソッドには引数として比較用の関数を指定することもできるのですが、引数に何も指定せず実行すれば「文字コード順」に並べてくれます。以下は、JavaScriptを使って任意の配列を文字コード順に並び替えるサンプルと、それを実現するソースです。入力文字列を、文字コード順に並び替える(ソートする)サンプル以下のテキストエリアに適当な文字列を複数行ほど入力してから、下部の「文字コード順にソートする」ボタンを押すと、文字コードを元にして(文字コードの若い順に)並び変わります。◆文字列リスト:上記のサンプルを使うと、入力された文字列が文字コードの若い順に並び変わり(ソートされ)ますから、ほぼ文字の音順に並びます。「ほぼ」かという点については(実際に並べ替えてみると分かりますが)詳しくは後述します。先に、上記のサンプルを実現するJavaScriptソースを解説しておきます。文字コード順で並び替える(ソートする)ためのJavaScriptソース先ほどのソート処理は、以下のJavaScriptソースで作っています。ここでのソート処理は、単にJavaScriptに最初から存在するsortメソッドをそのまま呼び出しているだけなので、とても短いソースで済んでいます。sortedArray.join("\n");}文字列の入力・出力用として、以下のHTMLを用意しています。textarea要素には、JavaScript側から中身(文字列)を扱うために、id属性でid名「sampleTargetLines」を割り振っています。onclick="SortByCharCode();">上記のソースによって、「文字コード順にソートする」ボタンをクリックすると、テキストエリアに入力した複数行の文字列が文字コード順に並び変わる機能ができがあります。※上記ではtextarea要素の内容に、あらかじめ複数の文字列をサンプルとして入れてありますが、実際に使用する際にはもちろん空(カラ)で構いません。文字コード順に並び替えれば(ソートすれば)、ほぼ音順に並べ替えられる先ほどのサンプルのように、文字コード順に並び替えれば、ほぼ音順に並び変わります。「ほぼ」というのは、下記の理由からです。ひらがな「あ」~「ん」の後に、カタカナ「ア」~「ン」が並ぶ。(例えば「アップル」と「みかん」だと、「みかん」が先に来る。ひらがなが先になるから。)英大文字「A」~「Z」の後に、英小文字「a」~「z」が並ぶ。(例えば「apple」と「Orange」だと、「Orange」が先に来る。大文字が先になるから。)このように、「文字コード順」だと、文字種によるソートの方が優先されるので、必ずしも50音順にはなりません。「ひらがなだけが入力されている」とか「アルファベット大文字だけが入力されている」など、文字種が1種類なのであれば、文字コード順でソートするだけで「50音順」や「アルファベット順」になりますが。(※なお、Unicodeでは「ぁ」→「あ」→「ぃ」→「い」......のように五十音順ではあるものの「小さい文字」が先になる順で並んでいます。)そこが気に入らない場合は、sortメソッドの引数に「比較用の関数」を渡すことでソート処理をカスタマイズする必要があります。その話は長くなるので、別の機会に回します。「数値の大きい順・小さい順に文字列を並び替える(ソートする)方法」で多少紹介していますので参考にして下さい。今回は、文字コード順に並べる方法を解説しました。コーヒーをおごる著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。Aboutでウェブ作成系の記事を連載しています。2001年からの累計記事数は400本を超えています。電子書籍を書きました。Unlimitedにも対応。(紙の本)5冊の著書があります。➡著書一覧と詳細これまでに、下記の書籍を上梓致しました。逃走少女と契約しました。製作依頼について●製作のご依頼は:ウェブページ全般の製作依頼だけでなく、特定の機能を提供するJavaScript単体の作成作業も含め、各種の製作依頼を承っております。お気軽にお問い合わせ下さい。モダンスタイルによる基礎から現場での応用まで▲JavaScriptの文法仕様を基礎からしっかり把握したい場合にお勧めです。解説がとても詳しく、基礎から応用まで網羅されていて、JavaScriptを隅々まで理解するのに役立ちます。JavaScriptを詳しく知るには、とりあえずこれを1冊読みましょう。▲JavaScriptのライブラリやフレームワークが、ひたすら多数紹介されています。目的に応じてどんなライブラリを使えば良いのか、そもそもどんなライブラリがあるのか知るのにお勧めです。▲正確な文法を知りたいとき、手軽にさっと調べられる辞書(辞典)として手許に置いておきたい場合に。▲jQueryを活用する方法について、サンプルと実現ソースが見やすく列挙された解説書。基礎から分かりやすく説明されています。▲jQueryを活用して実現できる様々なパーツ(デザインやUI)の実装方法を列挙した解説書。サンプルが多数あります。JavaScriptの基礎知識とUIデザインの実装方法などを解説したムックです。......と言っても初心者向けでは決してないので注意してね。^^;JavaScriptに関する解説書は、自分に合うかどうか立ち読みして確認したり、せめて購入前に目次などから大まかな内容はチェックしておいた方が良いと思います。TIPSふぁくとりーの主要なカテゴリ下記のカテゴリに区分して、JavaScriptに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。(16)著者紹介にしし(西村文宏)にししでございます。本書いたり記事書いたりしてます。著書5冊発売中です(Web製作系4冊+小説1冊)。本の最新刊は2011年3月に発売されたライトノベルでございますよ。関連するかもしれない情報など▼このページに関連しそうな記事が約8本くらい自動表示されています。INFORMATIONSこのページの製作者は、にしし(西村文宏)です。このページの内容は真実であることが基本ですが、虚構や妄想が混じっていることも多々あります。(^_^;)リンクは歓迎致します。リンク用バナーも用意しています。必要であればご使用下さい。このサイトについてこのページは、スマートフォン・タブレット等のモバイル端末でもご覧頂けます。URLは端末に関係なく共通です。※このサイトは横幅768px未満で閲覧するとモバイル用、横幅768px以上で閲覧するとタブレット&PC用デザインになります。横幅920px以上での閲覧がお勧めです。古いブラウザ(特にIE7以下など)では横幅に関係なくレガシーデザインになります。