JavaScriptでヒアドキュメントを実装する簡単な手法まとめ!


そもそもヒアドキュメントって何?
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タグに挿入した文字列を取得することで実現する
  • テンプレートリテラルを使うことで実現する

上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!

「プログラミング、右も左もわからない…」という方にオススメ

当プログラミングスクール「侍エンジニア」では、これまで6000人以上のエンジニアを輩出してきました。

その経験を通してプログラミング学習に成功する人は、「目的目標が明確でそれに合わせた学習プランがあること」「常に相談できる人がそばにいること」「自己解決能力が身につくこと」この3つが根付いている傾向を発見しました。

侍エンジニアは上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。

cta_under_bnr

「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。

詳細はこちら

書いた人

マサト

フリーランスのIT系ライターを10年従事する兵庫県出身の40歳。侍ブログ編集部としては、これまで270記事以上を執筆。
30歳を過ぎてから独学でJavaScript, Node.js, Linuxを習得した経験を活かし、初心者が迷わない記事作成を意識しながらプログラミングの楽しさを知ってもらうために活動しています。趣味はキャンプと登山です。

おすすめコンテンツ

まずはここから!初心者でも1から学べるプログラミング入門カリキュラム

転職成功で受講料0円!あなたもプログラミングを学んでエンジニアデビュー