そもそもヒアドキュメントって何？
JavaScriptでもヒアドキュメントを実装することはできるのか？
どんなメソッドを利用すると実現できるんだろう
さまざまなプログラミング言語で利用できるヒアドキュメントは、JavaScriptには採用されていないことから混乱する人も少なくありません。
しかし、まったく方法が無いわけではなく、いくつかの手法を利用することでJavaScriptでもヒアドキュメントを使うことができます。
こんにちは！ライターのマサトです。
この記事では、初心者でも今日からJavaScriptでヒアドキュメントデを実装する手法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。
この記事はこんな人のために書きました
- ヒアドキュメントの概要が知りたい方
- JavaScriptでヒアドキュメントを実装したい方
- ヒアドキュメントを実現するさまざまな手法を知りたい方
ヒアドキュメントとは？
ヒアドキュメントは、改行やスペースなどを含めた文字列をそのままの状態でソースコードの中に埋め込むために使われる手法です。Linuxなどで使うシェルスクリプトやPHP / Python / Rubyといった言語でも利用されています。
例えば、Rubyでヒアドキュメントを実装すると以下のようになります。
print <<EOS サンプルドキュメント サンプル サンプル サンプル EOS
最後のEOSと書かれた手前までをヒアドキュメントとして利用可能で、記述したそのままの状態をプログラムで利用することができるわけです。
しかし、JavaScriptには標準でヒアドキュメントは提供されていません。
そのため、JavaScriptの仕様をうまく活用して似たような挙動を実装する必要があります。ただし、最新の仕様であるES6のテンプレートリテラルを使うとヒアドキュメントのような機能を実現できます。
本記事では、これらの方法を1つずつ解説していきますのでぜひ参考にしてみてください！
ヒアドキュメントの実現方法
この章では、JavaScriptでヒアドキュメントを実装するための方法について見ていきましょう！主に、関数やDOM要素を活用した方法について詳しく学んでいきます。
functionを利用する
JavaScriptでは関数も文字や数字と同じく値として扱うことができます。そのため、関数を変数に格納することができます。
次の例を見てください。
const test = function() {
console.log('hello');
}
console.log(test);
この例では、変数testに無名関数を格納しています。そのため、test()と記述すれば関数が実行されるわけです。
ところが、上記の例みたいに( )を書かずにtestと記述すると関数のコードがそのまま出力できる特性があるのです。この特性を活用すれば、関数内に記述したコメントを文字列として取得することでヒアドキュメントのような機能を実現できるのです。
例えば、次の例を見てください！
const heredoc = function() {/*
こんにちは
これは サンプルです
*/};
console.log(heredoc);
実行結果
function() {/*
こんにちは
これは サンプルです
*/}
この例では、関数内にコメントを記述しているだけですね。実行結果を見ると関数のソースコードがそのまま出力されているのが分かります。
あとは、このソースコードをtoString()を使って文字列化し、正規表現などを活用してコメント部分だけ抜き出せばヒアドキュメントに似た機能を実装できるわけです。
const result = heredoc.toString().match(//*([sS]*)*//).pop(); console.log(result);
実行結果
こんにちは これは サンプルです
この例では、関数のソースコードをtoString()で文字列化してmatch()メソッドでコメント部分だけを抜き出しています。
DOM要素を利用する
他の言語にはないJavaScriptだけの特徴として、HTMLのDOM要素を制御できる点が挙げられます。
そこで、使える状況は限られますが、HTML要素に挿入した文字をヒアドキュメントとして取得する例をご紹介しておきます。利用するのはscriptタグになります。
<script type="text/plain" id="text"> これはサンプルです サンプル サンプル </script>
scriptタグ以外の一般的なタグだと文字が画面に表示されてしまうので、scriptタグにヒアドキュメントとして使いたい文字を挿入しておくわけです。type属性を記述していないとエラーになることがあるので注意しましょう。
あとはID属性からこのscriptタグのテキストを取得すれば良いわけです。
const heredoc = document.getElementById('text').textContent;
console.log(heredoc);
実行結果
これはサンプルです サンプル サンプル
ES6のテンプレートリテラルを使う
ES6のJavaScriptから利用できるようになったテンプレートリテラルを使うと、とても手軽にヒアドキュメントのような機能を使うことができます。
使い方としては`（バッククォート）で文字列を囲むだけなので非常に簡単です。
次の例を見てください！
const text = ` サンプルテキスト サンプル サンプル サンプル`; console.log(text);
実行結果
サンプルテキスト サンプル サンプル サンプル
` `で文字列を囲んでいるだけですよね？ しかし、実行結果を見てみると改行やスペースなどを含めてそのままの状態で出力できているのが分かります。つまり、ヒアドキュメントのような使い方がそのままできるというわけです。
HTMLをヒアドキュメントで実装する
テンプレートリテラルを利用すれば、JavaScriptから動的にHTMLを作成して挿入することも簡単なので合わせてご紹介しておきます。
例えば、div要素内にh1タグを挿入してみましょう！
const html = `
<div>
<h1>こんにちは！</h1>
</div>
`;
document.body.innerHTML = html;
</pre>
実行後のHTML
<pre class="theme:dark-terminal lang:default decode:true">
<body>
<div>
<h1>こんにちは！</h1>
</div>
</body>
この例では、変数htmlにテンプレートリテラルでHTML要素を格納しています。これをbodyタグ内にinnerHTMLで挿入すれば良いわけですね。すると、画面にh1要素として文字列が表示されます。
まとめ
今回は、JavaScriptでヒアドキュメントを実装するいくつかの手法を学習しました！
最後に、もう一度ポイントをおさらいしておきましょう！
- 関数内のコメントを取得することで実現する
- scriptタグに挿入した文字列を取得することで実現する
- テンプレートリテラルを使うことで実現する
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
