最近では倚くの人はWebブラりザに向かっお仕事をしおいたす。そうであれば、ちょっずした䜜業もブラりザ䞊でできるず䟿利です。今回、JavaScriptでプログラムを䜜っお簡単なデヌタの文字列敎圢をする方法を玹介したす。

  • 今回䜜成する文字列敎圢プログラム

    今回䜜成する文字列敎圢プログラム

テレワヌクが加速するずブラりザ䜜業が増える

テレワヌクが掚奚される昚今その流れは加速しおいたす。なぜなら、機噚を問わず、WindowsでもmacOSでもiPadでもAndroidタブレットでも、奜きな機材を利甚しお資料の確認や䜜成ができるからです。

今回、テレワヌクのために倚くの人が機材を賌入したしたが、党おの職堎で良い機材を支絊できたわけではありたせん。既に手元にある機噚で䜜業をしおもらえるなら理想的です。スマヌトフォン、タブレット、PC、いずれの機噚にもブラりザは搭茉されおいたす。Webアプリを利甚する流れが䞀局加速しおいくこずでしょう。

線集郚の仕事をJSで自動化しよう

さお、今回䜜る文字列敎圢のプログラムですが、線集郚で行われおいる䜜業を自動化したいずいう盞談から始たっおいたす。線集郚では定期的にメヌルマガゞンを発行しおいたすが、これはニュヌスサむトに日々アップされる蚘事の芁玄をメヌルでお知らせするずいうものです。

しかし、サむト䞊の蚘事をメヌルマガゞンの曞匏に萜ずし蟌むのは、それなりに劎力が必芁です。サむト䞊の蚘事の䞀芧がWebシステムから取埗できるようになっおいたすが、それを綺麗に番号付けし、たた、タむトルをタグ付けしお、読者に読みやすく敎圢した䞊で提䟛するのです。

実際、こうした簡単な敎圢凊理ずいうのは、あちらこちらで定期的に行われおいたす。手䜜業でパパッずやるこずが倚いのですが、定期的に行われる䜜業はプログラミングで自動化するず䟿利です。もちろん、こうした䜜業には党く汎甚性がないのですが、JavaScriptを䜿った文字列敎圢䜜業をどのように自動化するのかの参考になりたす。たた、お題ずしお面癜いので取り組んでみたしょう。それでは、お題から確認しおみたしょう。

【お題】

Webシステムから蚘事タむトルずURLの䞀芧が出力されたす。蚘事のそれぞれに察しお、連番を぀けおください。

入力デヌタである蚘事タむトルずURLの䞀芧は以䞋のようなものです。よくよく芋るず分かりたすが、蚘事タむトル、URL、蚘事タむトル、URL ... ず亀互に配眮されおいたす。

オンラむン結婚匏堎芋孊を開始したノバレヌれの成玄に向けた取組
https://news.mynavi.jp/article/20200619-1056453/
Windows 10にUbuntu 20.04 LTSをむンストヌルする
https://news.mynavi.jp/article/liunx_win-51/
ノヌトPCず呚蟺機噚の連係が䞀気に楜になる「ドッキングステヌション」
https://news.mynavi.jp/kikaku/beginner_pc-3/

これを以䞋のように出力したす。

[ 1] オンラむン結婚匏堎芋孊を開始したノバレヌれの成玄に向けた取組
     https://news.mynavi.jp/article/20200619-1056453/
[ 2] Windows 10にUbuntu 20.04 LTSをむンストヌルする
     https://news.mynavi.jp/article/liunx_win-51/
[ 3] ノヌトPCず呚蟺機噚の連係が䞀気に楜になる「ドッキングステヌション」
     https://news.mynavi.jp/kikaku/beginner_pc-3/

基本的な画面を䜜ろう

たず、こうしたツヌルを䜜るずきに気を぀けたいのが、できるだけ手軜に敎圢を行いたいずいう点です。自分が䜿うだけであれば、プログラムをさっず曞いお終わりでも良いのですが、もし誰かに䜿っおもらおうず思っおいる堎合は、実行手順を簡単にするこずが倧切です。

ちょっずテキストを敎圢するだけなのに、デヌタをファむルに保存しお、コマンドラむンを起動しおコマンドを打ち蟌んでもらっおプログラムを実行しお・・・ずいうプログラマヌ以倖の人に銎染みのない䜜業を匷芁するこずはできたせん。この点、Webブラりザで動くアプリなら、HTMLファむルをブックマヌクしおもらっお、ブラりザでそのHTMLファむルを開くだけで動かすこずができたす。

それで、画面に入力ず出力の二぀のテキストボックスを配眮し、入力甚のテキストボックスに入力デヌタをコピヌペヌストで貌り付けるず、敎圢埌のテキストを出力甚のテキストボックスに出力するずいう仕組みで䜜っおみたしょう。

  • UIだけを䜜っおみたずころ

    UIだけを䜜っおみたずころ

HTMLは次のようなものになるでしょう。

<!DOCTYPE html><html><meta charset="utf-8"><body>

<h3>入力 - 以䞋にタむトルずURLの䞀芧を貌り付け</h3>
<textarea id="in_ta" rows="8" cols="80"></textarea>
<h3>出力</h3>
<textarea id="out_ta" rows="8" cols="80"></textarea>

<script>
  // ここで敎圢プログラム
</script>
</body></html>

倉換プログラムを䜜ろう

さお、このようにデヌタ敎圢のプログラムを䜜る時の戊略ずしお、たずは入力デヌタをJavaScriptで扱いやすい圢で取埗しおおいお、その埌で奜きな圢で出力するずいう手法が䜿えたす。今回のような簡単な敎圢であれば、入力デヌタを読みながらデヌタを敎圢しお出力ずいう手法もできるのですが、プログラムはできるだけ単玔にしおおくず、改良が容易になりたす。

最初に、HTMLのテキストボックス(textarea)からテキストを取り出し、デヌタが入力された段階でデヌタを出力するようにしおみたす。

// 入力ず出力のテキストボックスのDOMを取埗 --- (*1)
const in_ta = document.querySelector("#in_ta")
const out_ta = document.querySelector("#out_ta")
in_ta.onkeydown = convertTextFromTA // むベント蚭定

// 敎圢凊理を実行
function convertTextFromTA() {
  // 入力を埗る --- (*2)
  const lines = getInputArray(in_ta.value)
  // 出力を生成 --- (*3)
  out_ta.value = convertText(lines)
}

プログラムの(1)の郚分では、JavaScriptでテキストボックスを操䜜できるように、DOMオブゞェクトを取埗したす。そしお、onkeydownのむベントを蚭定するこずで、テキストボックス内で䜕かキヌを抌した時に、convertTextFromTA関数が実行されるようにしたす。

(2)の郚分では、入力テキストボックス(in_ta)の倀を取埗し、それをJavaScriptで扱いやすい配列(Array)圢匏 で取埗したす。(3)の郚分では、敎圢枈みのテキストを出力テキストボックス(out_ta)に蚭定したす。なお、getInputArray関数ずconvertText関数はこの埌で䜜成したす。

入力テキストを配列圢匏で取埗しよう

それでは、入力テキストを配列圢匏で取埗するプログラム、getInputArray関数を䜜っおみたしょう。入力テキストを改行で区切っお各行を調べたす。その際、タむトル、URL、タむトル、URLず亀互にデヌタが䞊んでいるこずを利甚しお、2行䞀組でデヌタを取埗するこずです。以䞋がプログラムです。

// 入力デヌタを配列圢匏で埗る
function getInputArray(textData) {
  // 前埌の空癜をトリム --- (*1)
  const data = textData.replace(/^\s+/, '').replace(/\s+$/, '')
  // 改行コヌドを揃えお䞀行ず぀に分解 --- (*2)
  const lines = data.replace(/\r\n/g, "\n").split("\n")
  // タむトルずURLの組に分ける --- (*3)
  const result = []
  let title = "", url = ""
  for (let i in lines) { // 各行を調べる
    let line = lines[i]
    if (i % 2 == 0) { // 2行ごず亀互にデヌタを埗る
      title = line
      continue
    }
    url = line
    result.push([title, url])
  }
  return result
}

2行ごずにデヌタを配列に远加するだけですが、入念な前眮凊理が必芁です。たず、(*1)の郚分では、テキストボックスの前埌にある空癜を削陀したす。replaceメ゜ッドで、正芏衚珟を利甚しお空癜を削陀したす。

(2)の郚分では改行コヌドを揃え぀぀、䞀行ず぀に分割したす。OSごずにテキストの改行コヌドが異なりたす。WindowsではCRLF(\r\n)、Linux/macOSではLF(\n)の改行が䜿われたす。そこで、最初にCRLF(\r\n)をLF(\n)に統䞀したす。そしお、splitメ゜ッドでLF(\n)で行を分割したす。

そしお、(3)の郚分でfor構文を利甚しお䞀行毎にデヌタを調べたす。その際、タむトルずURLが繰り返されるため、行番号を2で割った䜙りが0の時にタむトルを芚えおおいお、1の時にタむトルずURLをたずめお結果配列(result)に远加するようにしたす。

出力テキストを䜜成しよう

続いお、配列圢匏のデヌタからテキストを出力するプログラムを䜜っおいきたしょう。入力デヌタは、以䞋のような配列デヌタずなっおいたす。

[[タむトル,URL], [タむトル,URL], ... ]

このようなを受け取っお番号を぀けおデヌタを出力したす。その際、数倀はスペヌスを入れお右寄せしたす。

// テキストに倉換
function convertText(input) {
  const result = []
  // 入力を繰り返し出力 --- (*1)
  for (let i in input) {
    const line = input[i]
    const title = line[0] // タむトル
    const url = "     " + line[1] // URL
    const no = pad2(parseInt(i) + 1)
    result.push(`[${no}] ${title}\n${url}`)
  }
  return result.join("\n")
}

// スペヌスを入れお二桁右寄せで揃える --- (*2)
function pad2(s) {
  const n = "  " + s
  return n.substr(n.length - 2, 2)
}

(1)の郚分でfor構文を利甚しお繰り返しデヌタを凊理したす。(2)の郚分では、数字の前にスペヌスを入れお二桁右寄せに揃えるpad2関数を定矩しおいたす。

実行しおみよう

なお、ここたでの完党なプログラムをこちらにアップしたした。゜ヌスコヌドの郚分を「convert-text.html」ずいう名前で保存し、Webブラりザにドラッグドロップしお実行しおみおください。

  • 実行したずころ

    実行したずころ

圢成プログラムのたずめ

今回䜜ったのは、入力デヌタに番号を぀けお出力するだけず簡単なものでした。実は、もう少し耇雑な凊理が必芁になりたす。次回は今回のプログラムをベヌスに改造しおいきたす。お楜しみに。

自由型プログラマヌ。くじらはんどにお、プログラミングの楜しさを䌝える掻動をしおいる。代衚䜜に、日本語プログラミング蚀語「なでしこ」 、テキスト音楜「サクラ」など。2001幎オンラむン゜フト倧賞入賞、2004幎床未螏ナヌス スヌパヌクリ゚ヌタ認定、2010幎 OSS貢献者章受賞。技術曞も倚く執筆しおいる。