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


そもそもヒアドキュメントって何?
JavaScriptでもヒアドキュメントを実装することはできるのか?
どんなメソッドを利用すると実現できるんだろう

さまざまなプログラミング言語で利用できるヒアドキュメントは、JavaScriptには採用されていないことから混乱する人も少なくありません。

しかし、まったく方法が無いわけではなく、いくつかの手法を利用することでJavaScriptでもヒアドキュメントを使うことができます。

こんにちは!ライターのマサトです。

この記事では、初心者でも今日からJavaScriptでヒアドキュメントデを実装する手法について分かりやすく解説していきますので、ぜひ最後まで読んで理解を深めて頂ければ幸いです。

この記事はこんな人のために書きました

  • ヒアドキュメントの概要が知りたい方
  • JavaScriptでヒアドキュメントを実装したい方
  • ヒアドキュメントを実現するさまざまな手法を知りたい方

ヒアドキュメントとは?

ヒアドキュメントは、改行やスペースなどを含めた文字列をそのままの状態でソースコードの中に埋め込むために使われる手法です。Linuxなどで使うシェルスクリプトやPHP / Python / Rubyといった言語でも利用されています。

例えば、Rubyでヒアドキュメントを実装すると以下のようになります。

最後のEOSと書かれた手前までをヒアドキュメントとして利用可能で、記述したそのままの状態をプログラムで利用することができるわけです。

しかし、JavaScriptには標準でヒアドキュメントは提供されていません。

そのため、JavaScriptの仕様をうまく活用して似たような挙動を実装する必要があります。ただし、最新の仕様であるES6のテンプレートリテラルを使うとヒアドキュメントのような機能を実現できます。

本記事では、これらの方法を1つずつ解説していきますのでぜひ参考にしてみてください!

ヒアドキュメントの実現方法

この章では、JavaScriptでヒアドキュメントを実装するための方法について見ていきましょう!主に、関数やDOM要素を活用した方法について詳しく学んでいきます。

functionを利用する

JavaScriptでは関数も文字や数字と同じく値として扱うことができます。そのため、関数を変数に格納することができます。

次の例を見てください。

この例では、変数testに無名関数を格納しています。そのため、test()と記述すれば関数が実行されるわけです。

ところが、上記の例みたいに( )を書かずにtestと記述すると関数のコードがそのまま出力できる特性があるのです。この特性を活用すれば、関数内に記述したコメントを文字列として取得することでヒアドキュメントのような機能を実現できるのです。

例えば、次の例を見てください!

実行結果

この例では、関数内にコメントを記述しているだけですね。実行結果を見ると関数のソースコードがそのまま出力されているのが分かります。

あとは、このソースコードをtoString()を使って文字列化し、正規表現などを活用してコメント部分だけ抜き出せばヒアドキュメントに似た機能を実装できるわけです。

実行結果

この例では、関数のソースコードをtoString()で文字列化してmatch()メソッドでコメント部分だけを抜き出しています。

DOM要素を利用する

他の言語にはないJavaScriptだけの特徴として、HTMLのDOM要素を制御できる点が挙げられます。

そこで、使える状況は限られますが、HTML要素に挿入した文字をヒアドキュメントとして取得する例をご紹介しておきます。利用するのはscriptタグになります。

scriptタグ以外の一般的なタグだと文字が画面に表示されてしまうので、scriptタグにヒアドキュメントとして使いたい文字を挿入しておくわけです。type属性を記述していないとエラーになることがあるので注意しましょう。

あとはID属性からこのscriptタグのテキストを取得すれば良いわけです。

実行結果

ES6のテンプレートリテラルを使う

ES6のJavaScriptから利用できるようになったテンプレートリテラルを使うと、とても手軽にヒアドキュメントのような機能を使うことができます。

使い方としては(バッククォート)で文字列を囲むだけなので非常に簡単です。

次の例を見てください!

実行結果

`で文字列を囲んでいるだけですよね? しかし、実行結果を見てみると改行やスペースなどを含めてそのままの状態で出力できているのが分かります。つまり、ヒアドキュメントのような使い方がそのままできるというわけです。

HTMLをヒアドキュメントで実装する

テンプレートリテラルを利用すれば、JavaScriptから動的にHTMLを作成して挿入することも簡単なので合わせてご紹介しておきます。

例えば、div要素内にh1タグを挿入してみましょう!

実行後のHTML

この例では、変数htmlにテンプレートリテラルでHTML要素を格納しています。これをbodyタグ内にinnerHTMLで挿入すれば良いわけですね。すると、画面にh1要素として文字列が表示されます。

まとめ

今回は、JavaScriptでヒアドキュメントを実装するいくつかの手法を学習しました!

最後に、もう一度ポイントをおさらいしておきましょう!

  • 関数内のコメントを取得することで実現する
  • scriptタグに挿入した文字列を取得することで実現する
  • テンプレートリテラルを使うことで実現する

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

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

マサト

マサト

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

おすすめコンテンツ

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

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