HTMLからJavaを動かせる?JavaScriptを動かす方法も解説
thumb_htmljava_01
HTMLからJavaを動かせる?JavaScriptを動かす方法も解説
言語
アンドエンジニア編集部
2022.01.17
この記事でわかること
HTML上でJavaScriptを呼び出す方法としては、外部ファイルから呼び出す方法とHTML上に直書きする方法がある
HTML上でJavaを呼び出す方法としては、サーブレット格納先のリンクを用意したり、JSPでHTMLに直接記述したりする方法がある
JavaのWeb開発ツールは日々進化しており、最近ではJSFやThymeleafなどが使われている

HTML、JavaScript、Javaのおさらい

img_htmljava_01

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を動かす方法

img_htmljava_02

上記でそれぞれの言語の役割と関係性を説明してきました。ここからは、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を動かす方法

img_htmljava_03

次に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

img_htmljava_04

サーブレットや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エディタの互換性を保つことが可能です

それぞれの役割を理解して使いこなそう

img_htmljava_05

Web開発において、HTMLだけではできないことを行うためにJavaScriptやJavaと連携は必要不可欠です。Webサイトに関して言えば、たいていはJavaScriptのみで対応はできるでしょう。

しかし、より高度なWebアプリケーションとの連携を考えるとJavaも必要になってきます。本記事に書いたように連携の方法は様々です。目的に合った方法をとっていくとよいでしょう。

気になる人のTwitterをフォローしよう!
アンドエンジニア公式LINEでは
新着記事やエンジニアに役立つ情報をお届け!
日々のキャッチアップをお手伝いします!
マイナビITエージェント

編集部オススメコンテンツ

cover
プログラマーに向いていないと感じる。今後エンジニアとしてどのようなキャリアを歩んでいけばいい?【Vol.2 / エンジニアのお悩み相談】
キャリアアドバイザー(マイナビAGENT)
2022.12.27

アンドエンジニアへの取材依頼、情報提供などはこちらから

お問い合わせ・情報提供
システムエンジニア求人特集

編集部おすすめコンテンツ

アンドエンジニアへの取材依頼、情報提供などはこちらから

Powered by マイナビ AGENT