1. HTMLとJavaScriptで、タイトルとURLをMarkdownのリンク記法に変換するツールをつくる
Updated
2021/8/8 8:38
Author
Jumpei Ikegami仕事をしている中で、ある決まったテキスト群を入力すると決まったフォーマットに整形して返してくれるようなツールが欲しくなることがあります。たとえばSlackなどのチャットツールに投稿するメッセージやドキュメント管理ツールに入力するMarkdown記法のテキストなど、ツールに合わせてフォーマットを変更しないといけないケースなどです。また、自動送信メールやSlack Botなどの決まったフォーマットのテキストをコピペで入力すると自分が欲しいフォーマットに変換して返してくれる、というツールがあると便利なこともあります。こうした要望の一部はテキストエディタの機能で叶えられることもありますが、自分しかやらないような特別なテキスト変換については、どうしても毎回手動でやらざるを得ないのが実情でしょう。
そこでこの一連のチュートリアルでは、HTMLとJavaScriptを使って、業務で欲しいニッチなテキスト変換ツールを作ってみようと思います。実際の業務で使えるようなツールを作るには、HTMLとJavaScriptの知識を使って自分で実装を考える必要があります。その際に参考になるような雛形として、ここでは必要な情報を入力するとMarkdown記法で書かれたリンクや表などを出力してくれるツールを作ってみましょう。
初回である今回は、タイトルとURLを入力すると [タイトル](URL) のようなMarkdownのリンク記法に変換するツールを作ってみます。この程度であれば手動でやってもいいですが、まずは簡単なところから慣れていきましょう。
前提知識
JavaScript自体が初めてな方は、次のチュートリアルから行うことをおすすめします。
ブックマークレットと簡単なJavaScriptで業務を効率化する2021/5/9 3:562021/6/20 8:09また、今回はMarkdown記法のテキストを生成するツールを作ります。「Markdownって何？」という方は、次のチュートリアルを先にやることで、ツールの価値がわかるようになります。
キレイなドキュメントをプレーンテキストでサクサク書けるMarkdownをesaで体験する2021/6/20 5:372021/8/8 10:27HTMLについては理解しなくてもこのチュートリアルを進めることができます。それでもHTMLとは何かを簡単に理解してから臨みたい場合は、次のリファレンスをご一読ください。
HTMLとは？2021/6/20 6:072021/8/8 9:41
作るもの
次の画像にあるように、タイトルとURLを入力すると [タイトル](URL) のようなMarkdownのリンク記法に変換して出力してくれるツールを作ってみます。結果もテキストボックスに表示されるので、あなたはこれをコピーしてMarkdownエディタにペーストするだけでドキュメントにリンクを追加することができます。
体験すること
このチュートリアルによって、以下を体験します。
- CodePenにアクセスする
- Markdownリンク生成ツールの動作を確認する
- HTMLでテキストボックスを表示する
- テキスト入力時の処理をJSで定義する
- テキストボックスの内容をJSで上書きする
チュートリアルスタート！
ここからは、実際に手を動かしながら読み進めていきましょう。ただ読むだけよりも、実際に体験した方が内容を深く理解することができます。
CodePenにアクセスする
まずは、「ツールに必要なHTMLやJavaScriptを書けたとしてそれをどうやって動かすか？」ということを考えます。HTMLやJavaScriptを動かす最も原始的な方法は、PC上にテキストファイルを保存し、拡張子を.htmlに変換して、それをWebブラウザから開くというものです。実はWebページだけではなくあなたのPC内にあるHTMLファイルについても、Google Chromeなどのブラウザで開くことができます。しかし、これにはいくつかの欠点があります。最も深刻な欠点は、作ったツールをチームの他のメンバーに共有するのが面倒ということです。HTMLファイルをzipで圧縮して送れば共有することができますが、それ自体が煩雑ですし、プログラムを修正したらまたファイルを送り直さなければいけません。
ありがたいことに、世の中には「HTMLやJavaScriptを書くとすぐにWebページのように表示してくれる」というナイスなWebサービスがいくつかあります。それだけ聞くとWebサイト作成ツールに思えますが、もっとライトにツールを作ったりHTMLやJS（やCSS）の練習をしたりするために使います。そのようなWebサービスの一つが、CodePenです。次の画像のように、CodePenにはHTML/CSS/JSを書くエリアが用意されています。記述した結果は、その下の領域でWebページのように表示してくれます。HTMLやJSを変更すると、すぐに下の表示も更新されます。そして便利なことに、作ったツールを保存するとURLが発行され、簡単に他の人に共有できるようになります。
使ってみるだけであれば、サインアップは不要です。ただし、作ったツールを保存して他の人に共有するためには、アカウントを作成する必要があります。
新しくHTMLやJSの組み合わせ（CodePenでは"Pen"と呼ばれます）を作成するには、左上の[Start Coding]ボタンをクリックしましょう。エディタ画面が開いたら、今回CSSは使わないので、HTML/CSS/JSの境界をドラッグ&ドロップしてCSSエディタは閉じてしまいましょう。
HTMLとJSをコピペして動作を確認してみる
エディタが開いたら、さっそくMarkdownのリンク記法に変換するツールを作ってみましょう。まずはできあがったHTMLとJSのコードをコピーして、実際のツールの動きを体験してみます。その後で、簡単にコードの中身を解説します。
HTMLは、次の通りです。
HTML
CodePenのHTMLエディタにこれをコピペしてください。すると、下の領域に見出しとテキストボックスが表示されます。
しかし、タイトルやURLを入力しても何も起こりません。「タイトルとURLを入力したら結果に反映させる」という部分をJSで書いていきます。
次のプログラムを、CodePenのJSエディタにコピペしましょう。
JavaScript
内容は後で説明するので、今は理解しなくても大丈夫です。
これでツールの完成です。試しに、タイトルに「Google」、URLに「https://google.com」と入力してみましょう。ここはできれば、コピペではなく手入力をしてみてください。次のようにタイトルやURLへの入力がリアルタイムに結果に反映されていくはずです。
結果に出力されたテキストをMarkdownエディタにコピペすれば、Markdownで書かれたドキュメントにリンクを追加することができます。
CodePenにアカウントを作ることが嫌じゃなければ、作ったツールはSaveしておきましょう。Saveしなくても、HTMLとJSをコピーすればすぐに復元することができるので大きな問題はありません。
HTMLでテキストボックスを表示する
HTMLとJSを使ってテキスト変換ツールが作れるということがわかれば、今回のチュートリアルの主旨としてはだいたいOKです。しかしせっかくなので、ツールの実装であるHTMLとJSのコードを簡単に解説します。ここで全て理解する必要は全くありませんが、本当に理解が必要になったときに「なんか前に読んだなあ」と思い出せるといいですね。
まずはHTMLを見てみましょう。先ほどコピペしたHTMLを再掲します。
HTML
冒頭にある
h1やh2は見出しです。無くてもツールとしては使えますが、他の人に共有したときにわかりやすいように、ツール名を記載してみました。HTML
重要なのは、その後に続く3つの
input要素です。これが、それぞれ「タイトル」と「URL」の入力と、「結果」の出力に対応しています。なお、各input要素はlabelというタグに囲まれています。HTML
labelタグはinput要素などの項目名を示すために使われます。表示上分かれば無理にlabelタグを使う必要はないですが、HTMLの御作法に則ってlabelタグを使っています。ちなみに些末な話ですが、labelタグでinput要素を囲むと、表示上のラベルをクリックしたときにもテキストエリアにフォーカスが当たるようになります（細かい）。最後に最も重要な
input要素をみてみましょう。例として、URLに対応するinput要素を再掲します。HTML
単純にテキスト入力用の
inputタグを作る場合、type属性には"text"を渡します。また、size属性によってテキストエリアの表示上の幅を変えることができます。注目すべきは、id属性です。id属性に要素を1つに特定するためのIDを設定しておくと、JSからその要素を取得するのが楽になります。ちなみに、URLを入力するinput要素だけは、placeholderという属性を付与しています。ここに指定した文字列は、入力をサポートするためのプレースホルダーとしてテキスト未入力時にうっすら表示されるようになります。
テキスト入力時の処理をJSで定義する
次は、JSを簡単に理解しましょう。JSの方が難易度が高いので、よくわからない場合は雰囲気が感じられれば十分です。
JavaScript
冒頭の3行は、HTMLから3つのinput要素を取得しています。HTML側で指定した
id属性を使うことで、getElementById()メソッドで簡単に要素の取得ができます。JavaScript
なお、HTMLの要素をJSから取得する方法については次のリファレンスで詳しく紹介しています。
Webページ上のテキストや属性などを取得する2021/6/20 6:082021/8/8 9:36次の2行は、入力したタイトルやURLを格納しておくための変数を宣言しています。最初は何も入力されていないはずなので、わかりやすく空文字を代入しています。
JavaScript
次の4行が、このJSプログラムで最も難しいポイントです。
JavaScript
まずはこのJSプログラムで実現しなければいけない処理の内容を日本語で表現してみましょう。それは、「タイトルが入力されたら結果に反映させる」ということです。
最初に、「タイトルが入力されたら」の部分を考えます。タイトルが入力される要素は、プログラムの冒頭で変数linkTitleElに格納されていました。逆に言えば、この変数にはタイトル入力用のinput要素が格納されています。この変数
linkTitleElに対して、「入力されたら〇〇という処理をしてくれ」とお願いする必要があります。「入力されたら」という出来事（event）には、JSの世界では'input'という名前が付いています。（HTMLのinput要素と同じ名前ですが、たまたまです。）あるeventが起きたときの処理を登録するには、eventが発生する要素に対してaddEventListener()というメソッドを呼ぶ必要があります。また、JSで「処理をしてくれ」とお願いするときは、その処理を記述した関数を渡してあげます。つまり、「入力されたら〇〇という処理をしてくれ」をJSで書くと次のようになります。JavaScript
入力されたらやって欲しい処理は、次のような関数で定義されています。
JavaScript
addEventListener()メソッドの第二引数で渡す関数には、実際に発生したイベントの情報が引数として渡されます。何を言っているか本当にわからないと思いますが、今回の例では「タイトルが入力されたら、実際に入力された内容を関数の中で使える」ということです。この関数では、変数e（仮引数）でその情報を受け取っています。実際の入力内容についてはe.target.valueというプロパティの中に入っています。これはそういう仕様なので、覚えるよりコピペしましょう。ここでは、入力されたタイトルを格納するために予め宣言しておいた変数linkTitleStrにe.target.valueの中身を代入しています。JavaScript
テキストボックスの内容をJSで上書きする
最後に、「結果に反映させる」を実現するために、結果を表示するためのテキストボックスの中身（
linkResultEl.value）に対して、入力されたタイトルとURLをMarkdown形式にフォーマットして代入しています。URLについては説明していないですが、タイトルと全く同様の処理が後続のプログラムで記述されています。入力されたタイトルとURLの情報は、めでたく変数linkTitleStrと変数linkUrlStrにリアルタイムに反映されるようになっているので、あとは[]と()で囲んであげるように+を使って文字列の結合をしています。JavaScript
以上でJSの説明を終わります。何度も繰り返しますが、かなり難しい内容を説明しているので、全てを正確に理解する必要はありません。慣れるまでは、チュートリアルの実装をよくわからずコピペして、自分で使いたいように改変できれば十分です。なお、特に関数についてちゃんと理解したい人には、次のリファレンスがおすすめです。
関数とは？2021/6/20 6:082021/8/8 9:30
以上で、今回のチュートリアルは終了です。今回のツールで実現できるのは、手動でも簡単にできるようなテキスト変換でした。続くチュートリアルでは、人間がやると少し面倒臭そうなより複雑なテキスト変換にも挑戦してみます。