HTMLからJavaを動かせる？JavaScriptを動かす方法も解説

HTML、JavaScript、Javaのおさらい

Web開発で挙げられる言語に、HTML・JavaScript・Javaがありますが、これらの間にはどのような関係性があるのかご存知でしょうか。HTMLとJavaScriptに関しては、馴染みのある方もいらっしゃると思いますが、Javaはどうでしょうか。

この記事では、HTMLをベースにJavaScriptやJavaをどのように連携させていくかを説明していきます。関係性を見ていく前に、まずは上記3つの言語について基礎をおさらいしていきましょう。

HTMLとは

HTMLとは、Webページを作成するために開発された言語です。通常のプログラミング言語と異なり、文章構造や視覚表現を記述することのできるマークアップ言語です。世の中のWebサイトのほとんどがこのHTMLで記述されており、視覚的かつ直感的にコードを書くことが可能となっています。2014年にリリースされたHTML5が今でも最新バージョンとなっており、動画や音声の埋め込みが容易になりました。

HTMLはWebページの土台とも言える役割を持ち、その中でJavaScriptを呼ぶことによって動的なコンテンツを実装することも可能です。HTMLにとって、JavaScriptは単独では実現できない動きを実現できる拡張機能のようなものということができます。

HTMLとは？今さら人に聞けないその概略や役割を解説！

JavaScriptとは

JavaScriptは、オブジェクト指向なインタプリタ型のプログラミング言語です。コンパイルを不要とすることから、クライアント側のブラウザ上でプログラムを動作させることが可能です。主にWebサイト上に動きを付ける目的で利用されています。記述内容が似ているもののJavaとは別物の言語であり、用途や目的も大きく異なります。

JavaScriptの特長はブラウザ上で動作させることが可能な点であり、ブラウザ上のスクロールに合わせて画像をフェードアウトさせたり、画像のポップアップやマウスの動きに合わせた動作などを手軽に行うことができます。最近では、大規模なWeb開発はVueやReact、AngularといったJavaScriptのフレームワークがよく使われています。

JavaScriptとは？人気のJavaScriptを5分で学ぶ

Javaとは

Javaは、Java仮想マシン（JVM）と呼ばれる実行環境で動作するプログラミング言語です。オペレーティングシステムやハードウェアに依存しないことから、高い汎用性を持っており、Web開発だけでなくシステム開発やアプリケーション開発にも利用されます。幅広い機能を提供できることから、習得難易度もHTMLやJavaScriptよりも高くなっています。

Web開発でJavaを採用することで、HTMLでは実現できなかった複雑なWebアプリケーションを設計することが可能です。例えば、業務システム・オンラインストレージなどのWebサービス・ショッピングサイトの開発にも利用されています。

Javaとは？人気プログラミング言語Javaの将来性やメリットについて解説

HTMLでJavaScriptを動かす方法

上記でそれぞれの言語の役割と関係性を説明してきました。ここからは、Webページの土台とも言えるHTMLからどのようにして他の言語を動かすのかを説明していきます。まずはJavaScriptを動かす方法を紹介します。方法としては2通りしかありません。

外部ファイルから呼び出す

HTML上でJavaScriptを呼び出す最も一般的な方法は、外部ファイルから呼び出す方法です。具体的な記述方法は下記の通りです。

<script src="test.js"></script>

この記述により、test.jsという名前のJavaScriptプログラムを呼び出して実行することができます。

異なる記述のやり方として

<script type="text/javascript" src="test.js"></script>

という記述方法もあります。

type="text/javascript"を追加する方法もありますが、これはHTML5より昔のバージョンでのみ必要であった記述です。HTML5では、記述無しは自動的にJavaScriptとして認識してくれることから不要となっています。

HTMLに直書きする

もう1つの方法として、HTMLに直接JavaScriptを記述する方法があります。これはインラインスクリプトと呼ばれ、あまり使用されてはいませんが、外部ファイルでJavaScriptを定義しなくともプログラムを動かすことが可能です。下記のような記述となります。

<script> 　～JavaScriptのコードを記述～ </script>

外部ファイルから呼び出すときと同様に、HTML5ではtype="text/javascript"は省略することができます。

HTMLでJavaを動かす方法

次にHTML上でJavaを動かす方法を紹介していきます。多くの動的WebページはJavaScriptのみの使用で十分ではありますが、高負荷でもパフォーマンスを発揮できる処理を実装したい時に活用できるでしょう。

サーブレットを呼び出す

サーブレットとは、Javaによって記述されたWebコンテンツを生成するためのプログラムです。例えば、サーブレットによって記述に応じたHTMLを生成し、動的なWebページをブラウザ上に表示することができます。このサーブレットはTomcatなどのWebコンテナ上で実行することができます。Tomcatとはオープンソースソフトウェアであり、Webアプリケーションサーバーの1つです。

HTMLでこのサーブレットを呼び出すことはJavaを呼び出すことと同義です。HTML上で呼び出す方法としては、シンプルにhrefを使うことが挙げられます。

例えば、サーブレットのリンク先を/servlet/test/としてtest.javaがサーブレットの本体とすれば、

<a href="/Servlet/test">サーブレットリンク先</a>

という記述でサーブレットを呼び出すリンクをWebページ上に作ることができます。

別の方法としては<form>タグを使用してサーブレットへフォーム入力値を送信する例もあります。この場合、同じようにサーブレットのリンク先を/servlet/test/とすると、

<form acrion="/Servlet/test" method="get">～フォーム内容～</form>

となり、getメソッドを使うことでサーブレットへフォーム入力値がURLに付加されて送信されます。サーブレット側でフォーム入力値を受けるようなプログラムにすることもでき、フォーム入力値の処理を行うWebアプリケーションを作ることができます。

JSPでHTMLに埋め込み

HTML上でJavaを呼ぶもう1つの方法として、HTML内にJavaを埋め込むJSPがあります。この場合は、呼び出すというよりも前述したインラインスクリプトに近い形になります。JSPの記述例としては下記となっています。

<%@ page contentType="text/html;charset=（文字コード名）" %> <% out.print("テスト"); %> 現在時刻は<%= nowTime %>です

1つ目の<%@ではHTMLでJSPを利用するための決まり事であり、ページの種別や使用する文字コードを決めています。

2つ目の<%がJavaの記述であるかどうかを決めている箇所であり、この中にコードを記述していく形になります。

3つ目の<%=ではHTMLの表示文字列の中にJavaによって得られた文字列を表示することが可能です。文字列を出力するメソッドを入力する手間が省けているため、簡潔な表現が可能です。ちなみに、上記例ではJavaの日付時刻データを管理するクラスにあるクラス変数を呼び出しています。

このようにJSPではHTML内においてもJavaの記述を最小限にすることができますので、簡潔なコードを記述することができます。

Webアプリケーション開発で活躍するJava

サーブレットやJSPがあるように、JavaはWebアプリケーション開発の分野で非常に活躍しています。そのため、近年、より進化した開発ツールが登場しています。

JSPの進化形JSF

JSF（JavaServer Faces）は、Java EEという企業向けのJava開発プラットフォームで提供されているフレームワークの1つです。ユーザーインターフェースの作成に特化したコンポーネントベースのフレームワークとなっています。JSFでは、JSPで欠点でもあるHTMLとJavaの混在によるコードの見辛さを改善する形となっており、デザインと処理を分けて実装したいというユーザーのための存在と言えます。

JSFではJSPでのHTMLはXHTMLとなり、Javaで記述していた処理はJavaBeansで置き換えられることとなります。

Spring Boot+Thymeleaf

Spring Bootは、Javaを使ったWebアプリケーション開発のためのフレームワークです。もともとSpring Frameworkというフレームワークがあり、機能の使い分けが困難であるという欠点を克服するために作られたものがSpring Bootとなっています。XML設定を不要化、アノテーションによるコード削減、ひな形の生成機能などWebアプリケーションの開発を手軽に行えるような工夫がなされています。

ここにThymeleafと呼ばれるHTMLに対応したテンプレートエンジンを組み合わせれば、JSPで行っていたJavaの埋め込みを行わなくとも処理を記述することができ、HTMLエディタの互換性を保つことが可能です。