スライドショー

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(/\/\*([\s\S]*)\*\//).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タグに挿入した文字列を取得することで実現する
  • テンプレートリテラルを使うことで実現する

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

マサト

マサト

JavaScriptが大好きで、趣味も仕事もJavaScriptを中心に活動していたら、いつの間にかフリーランスになってました。
30代になってからプログラミングを始めた経緯があり、分からないことだらけだった経験を踏まえて、読者に分かりやすい記事制作をモットーにしています。
JavaScript以外の趣味は、旅をしながらの街歩きや登山など。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説