[ペチパーの大冒険] ゲーム制作#33「うまく並び替えられない！？魔法の文字列」

今回から、Javascriptの問題を作っていきたいと思います。 いよいよ、プログラミングど真ん中になってきます。 でも、バックエンド系ではなく、フロントエンド系なので、 環境構築も必要なく、手軽にできちゃうのがJavascript言語のいいところですよね。

問題

魔法の宝石に刻まれた呪文の順番を整えるために、あなたは「文字列を並び替える魔法関数」を書こうとしています。 でも、うまくいきません…。 どこに落とし穴があるのか、見抜いてください！

魔法の宝石に刻まれた呪文（コード）

"ruby", "diamond", "sapphire", "emerald"

魔法の関数

const gems = [ 'Ruby', 'Sapphire', 'diamond', 'emerald' ]; // 呪文を変数に代入 const sortedGems = gems.sort(); // 並び替え console.log(sortedGems); さて、このコードを使って呪文の並び順をアルファベット順に整えたかったのですが、 どうしても「sapphire」だけ最後に来てしまうことに気づきました。

実行結果

[ 'Ruby', 'Sapphire', 'diamond', 'emerald' ] diamond や emerald が Ruby より後ろに来ている… Sapphire も diamond より前に来ていて、なんだか想像していた並びになっていません。 このあとに以下のコードを追加しましたが、何も変わらないようです。 gems.sort((a, b) => a > b);

課題

次のうち、正しく文字列を昇順に並び替えるコードはどれでしょう？ ※選択肢から選んでください。

条件

配列の並び順を、文字コード順ではなく、意味的に自然な順にしたい。

選択肢

1. gems.sort((a, b) => a > b); 2. gems.sort((a, b) => a.localeCompare(b)); 3. gems.sort((a, b) => b - a); 4. gems.sort((a, b) => a.charCodeAt(0) - b.charCodeAt(0));

回答

→ 正解のサンプルをみる。（ココをクリックすると表示されます）

正解

2. gems.sort((a, b) => a.localeCompare(b));

実行結果

['diamond', 'emerald', 'Ruby', 'Sapphire']

解説

.sort() のデフォルトは、**辞書順ではなく「文字列を文字コードとして昇順」**です。 つまり "sapphire" の s は、"ruby" の r よりも文字コードが後にあるので、最後に来ます。 .sort((a, b) => a > b) は true/false（つまり 1/0）しか返さず、正しい比較関数になりません！ localeCompare は文字列の自然な比較を行い、昇順・降順の制御に向いています。

学習ポイント

.sort() は「正しく比較関数を渡さないとバグる」 a > b は比較ではなく、「順序関数としては機能しない」 localeCompare は文字列を人間にとって自然な順序で並べたいときの武器

あとがき

大文字小文字に関係なく、見た目で自然な文字の並びにしたいというケースは、仕事でプログラミングを書く人であれば、 実行結果を見た、他の人から指摘されることもあるかもしれません。 そんな時に、localeCompare()という関数を知っているだけで、簡単に対応できるようになります。 ちなみに、toLowerCase()として、全て小文字に変換して並べ替えるというやり方も、悪くないですね。 プログラミングって、実は正解が一つじゃないという事も理解すると、いろいろな書き方をしりたくなってきませんか？ ちなみに、今回の問題は、アルファベットの大文字小文字でしたが、日本語のひらがな、カタカナでも、同じ構文で使えるので非常に便利な関数なんですよね。