2. HTMLとJavaScriptで、入力された全ての行の先頭に> をつける変換ツールをつくる
Updated
2021/8/8 8:44
Author
Jumpei Ikegami前回のチュートリアルでは、入力されたタイトルとURLをMarkdownのリンク記法に変換するという簡単なツールを作ってみました。今回は、任意の行数のテキストを受け取って、その全ての行頭に"> "をつけた複数行テキストを出力するようなツールを作ってみましょう。Markdownでは、行頭に"> "をつけると引用文として扱われます。
特に「改行」の扱い方について詳しく説明します。改行をJavaScriptでうまく扱えるようになると、複数行テキストを自由に変換できるようになります。
前提知識
このチュートリアルは、次のチュートリアルの続きとなっています。
1. HTMLとJavaScriptで、タイトルとURLをMarkdownのリンク記法に変換するツールをつくる2021/6/20 5:402021/8/8 8:38作るもの
次の画像にあるように、複数行テキストを入力すると、全ての行頭に
"> "を付与してMarkdownの引用文の記法に変換して出力してくれるツールを作ってみます。結果もテキストボックスに表示されるので、あなたはこれをコピーしてMarkdownエディタにペーストするだけでドキュメントに引用文を追加することができます。
体験すること
このチュートリアルによって、以下を体験します。
- Markdown引用文生成ツールの動作を確認する
- HTMLでテキストエリアを表示する
- テキスト中の改行をJSで別の文字列に置換する
チュートリアルスタート！
ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。
HTMLとJSをコピペして動作を確認してみる
HTMLは、次の通りです。
HTML
CodePenのHTMLエディタにこれをコピペしてください。すると、下の領域にテキストエリアが2つ表示されます。
この時点では、左のテキストエリアに文字を入力しても何も起こりません。
次に、下記のJSをCodePenのJSエディタにコピペしましょう。
JavaScript
内容は後で説明するので、今は理解しなくても大丈夫です。
これでツールの完成です。試しに、左のテキストエリアに複数行の文字を入力してみましょう。ここはできれば、コピペではなく手入力をしてみてください。次の画像のように、左で入力した全ての行の行頭に
"> "が付加されたテキストが右のテキストエリアに自動で表示されるはずです。もちろん、結果に出力されたテキストをMarkdownエディタにコピペすれば、Markdownで書かれたドキュメントに引用文を追加することができます。
HTMLでテキストエリアを表示する
ここまでで、任意の行数のテキストについてもHTMLとJavaScriptが書ければ変換できることがわかりました。前回同様、ツールの実装であるHTMLとJavaScriptの記述を簡単に見てみましょう。
まずはHTMLです。先ほどコピペしたHTMLを再掲します。
HTML
h2タグによる見出しの後に、textareaタグが2つ並んでいます。1つ目を入力、2つ目を結果の出力に使っています。HTML
textareaタグは、type="text"を設定したinputタグが1行しか扱えなかったのに対して、複数行のテキストを扱うことができます。テキストエリアのサイズについては、rows属性で行数を、cols属性（columns）で列数を指定できます。inputタグと違って閉じタグが必須な点に注意してください。また、前回のinputタグと同様、JSから参照しやすいようにid属性を付与しています。
テキスト中の改行をJSで別の文字列に置換する
次は、JSを簡単に理解しましょう。JSの方が難易度が高いので、よくわからない場合は雰囲気が感じられれば十分です。
JavaScript
冒頭の2行は、前回同様、HTMLから2つの
textarea要素を取得しています。HTML側で指定したid属性を使うことで、getElementById()メソッドで簡単に要素の取得ができます。JavaScript
続く6行は、これまた前回も説明した「文字列が入力されたときにどんな処理をさせるか？」を定義するものです。変数
quoteInElに格納された入力用のtextarea要素に対して、addEventListener()メソッドを使って「文字列が入力されたら〇〇という処理をしてね」とお願いしています。JavaScript
文字列入力時の処理の中身が、今回のプログラムの肝となる部分です。1行ずつ説明します。
まず、入力された文字列（
e.target.value）の内容を変数strに格納しています。複数行のテキストであれば、その文字列には改行も含まれています。JavaScript
次に、入力されたテキストの1行目の先頭に
'> 'を付けています。最初に文字列を足すだけであれば、文字列同士を+で結合するだけです。JavaScript
その次の行が、今回のプログラムで最も重要な行です。
JavaScript
文字列の一部を別の文字列で置換するときには、
replace()メソッドを使います。特に、複数箇所を同時に置換したい場合は、次のような特殊な書き方をします。JavaScript
今回のプログラムでは、検索したい文字列に
'\n'を、置換したい文字列に'\n> 'を指定しています。この謎の \n は一体何でしょうか？実は、文字列の中で \n と書くと、それは改行を意味します。改行をそのまま記述するとプログラムとして不正になってしまいます。そこで改行を表す特別な記号である \n を代わりに使うというわけです。なお、1文字目はスラッシュではなくバックスラッシュである点に注意してください。バックスラッシュの入力方法がわからない場合は、「Windows バックスラッシュ 入力」などでググってください。ちなみに、nはNew Line（新しい行）の頭文字です。ここで、具体的な例で処理の流れを考えてみましょう。たとえば、次のような文字列が入力された場合の加工手順を考えます。
Plain Text
わかりやすいように、改行を
\nに置き換えて書いてみます。また、すでに1行目の先頭には'> 'が付与されていたので、それも付け加えてみましょう。Markdown
この状態で、残り全ての行頭に'> 'を付けるためにはどうすればいいでしょうか？少し考えると、全ての
'\n'を'\n> 'に置換するような操作をすれば良さそうなことがわかります。その操作後は次のようになります。Markdown
このような操作が、まさに今説明している次の行で実現されるわけです。
JavaScript
もちろん、
\nは実際には改行として表示されるので、最終的にテキストエリアに表示される文字列は次のようになります。Markdown
最後に、加工された後の変数
strの中身が変数quoteOutElに格納された出力用のテキストエリアのvalue属性に渡されます。JavaScript
以上でJSの説明を終わります。特に、改行が
文字列を加工する方法2021/6/20 6:082021/8/8 9:33\nで表現されるということは、複数行のテキストを扱う上で必須の知識となります。何度も出てくるので自然と覚えると思いますが、うっすらとでも頭に入れておいてください。なお、replaceメソッドなど文字列の加工について詳しく知りたい場合は、次のリファレンス記事をご覧ください。