ゼロからはじめるプログラミング講座の第四十四回です。前回に続き今回も年号一覧を操作して整形します。今回はよくある並べ替えの処理を解説します。

まずindex.htmlをこちらをダウンロードしてください。

開くと前回の年号一覧に読みと年が書いてあります。これを

年号の余分なスペースも削除しなさい。

期待する結果はこうです。（一部省略）

まずはプログラムの構成を考えてください。以下は解答例になります。

先にこのプログラムを作る為に必要なメソッドを解説します。

• 2文字以上の連続した文字を指定するには/文字{2,}/を使いましょう。
• 半角数字を数値に直すにはNumber(数字)を使いましょう。
• 全角数字を半角数字に直すにはこの関数を丸ごとコピペで使いましょう。

function toMiniNum(value) {
  return value.replace(/./g, (s) => {
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
  });
}

• 配列を並び替えるにはArray.sort()のメソッドを使いましょう。

sortの中の関数はアロー関数で省略されることが多いです。arr.sort((a,b) => a – b) など

sortメソッドでは中の関数でreturn正or負を返すようにするのですが数値の場合は

小→大にしたい場合は return a – b

大→小にしたい場合は return b – a　と覚えておいても良いです。

ヒントは以上です。できるところまでコードを作ってみましょう。

1.まずは変数にテキストを代入して整形する。

var out = ""
const box = document.querySelector("#box")
let text = box.innerText
text = text.replace(/ {2,}|　{2,}/g, "").replace("～","-")

text.replace(/ {2,}|　{2,}/g, “”).replace(“～”,”-“)

/ {2,}/　連続で2文字以上続く場合としましょう。.replace().replace()のように繋げてメソッドを使うことをメソッドチェーンと言います。

2.3.テキストを配列に格納する。年の数字を数値に変換します。

let arr = text.split(/\n/) // 改行区切り
for(let idx in arr){
  const inarr = arr[idx].split(" ") // スペース区切り
  inarr[2] = Number(toMiniNum(inarr[2])) // 全角数字を半角数字に直してから数値化
  if(inarr[4]){
    inarr[4] = Number(toMiniNum(inarr[4]))
  }
  arr[idx] = inarr
}

function toMiniNum(value) {
  return value.replace(/./g, (s) => {
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0)
  })
}

まず改行区切りで配列を作り配列をfor-inループで回します。

中でスペース区切りの配列inarrを作ります。

全角数字を半角数字に直し、半角数字を数値に直します。少し面倒ですがこのような操作をする場合はあらかじめ関数を作っておきましょう。

Number(toMiniNum(inarr[2]))

Number(数字)　数字を数値に変換して返します。数字を数値に変換するメソッドは他にもあります。

toMiniNum(value)は独自に関数を作っています。全角数字を半角数字に直す関数です。

fromCharCode(s.charCodeAt(0) – 0xFEE0)

これは覚える必要はないので丸っとコピペするようにしましょう。

4.開始年を基準に配列を並び替えます。

arr.sort(function(a, b){
    return a[2] - b[2]
});

二次元配列の子要素を基準にソートをします。

aとbには二次元配列の親配列が入っているのでa[2]とすると子配列[2]が取れます。

数値の場合return a – bで昇順になりますね。

5.#boxを整形したテキストで書き換えます。

for(let idx in arr){
  const a = arr[idx]
  out += "<p>" + a[0] + "(" + a[1] + ") " + a[2]
  if(a[4]){ // [4]がある場合
    out += a[3] + a[4] + "</p>"
  }else{
    out += "</p>"
  }
}
box.innerHTML = out

配列の中身をテキストに直します。”<p>年号(読み) 年-年</p>”という形のテキストを作ります。タグも含めて全て1つのテキストに入れてからDOMにinnerHTMLで書き換えると処理が軽いです。他にもいろいろなやり方はあります。

var out = ""
const box = document.querySelector("#box")
let text = box.innerText
text = text.replace(/ {2,}|　{2,}/g, "").replace("～","-")
let arr = text.split(/\n/) // 改行区切り
for(let idx in arr){
  const inarr = arr[idx].split(" ") // スペース区切り
  inarr[2] = Number(toMiniNum(inarr[2])) // 全角数字を半角数字に直してから数値化
  if(inarr[4]){
    inarr[4] = Number(toMiniNum(inarr[4]))
  }
  arr[idx] = inarr
}
function toMiniNum(value) {
  return value.replace(/./g, (s) => {
    return String.fromCharCode(s.charCodeAt(0) - 0xFEE0);
  });
}

arr.sort(function(a, b){
    return a[2] - b[2]
});

for(let idx in arr){
  const a = arr[idx]
  out += "<p>" + a[0] + "(" + a[1] + ") " + a[2]
  if(a[4]){
    out += a[3] + a[4] + "</p>"
  }else{
    out += "</p>"
  }
}
box.innerHTML = out

お疲れ様でした。配列のソート、二次元配列のソートは重要なのでマスターしましょう。これができるといろいろなことが出来るようになります。今ある知識だけでもデータ整理や文章整形は十分できるようになりました。次回はスナイプするプログラムを作ります。

次も頑張って記事を作るのでチャレンジしてください！