HTMLでJavaScriptを動かせるのか
マークアップ言語であるHTMLは、さまざまなWebサイトやCMSなどで活用されており、CSSとセットで利用されることが多い言語です。しかし、HTML/CSSのみではアニメーションなどの動きを加えることができず、クオリティの高いサイト作りが難しくなります。
スライドショーやプルダウンメニューなどの作成は、ブラウザで動きを加えられるJavascriptで実装されることが多いです。
一般的なWebサイト作りは、HTMLによってWebサイトを構築し、CSSによって装飾が施され、Javascriptによってアニメーションなどの動きを加える、といったそれぞれの言語の特性を活かして使い分けることが重要です。
では、このHTMLでJavascriptを動かすにはどうすればいいのでしょうか。
この記事では、HTMLでJavascriptを動かす方法の他、Webサイト作りで活躍するJavaについても触れていきます。HTML・Javascript・Javaを習得してITエンジニアやWebクリエイターを目指す方は、ぜひ本記事を参考にして転職に役立てましょう。
ぜひ『マイナビIT エージェント』をご活用ください！
HTML・JavaScriptで何ができる？
前述したように、Webサイト作りではHTMLやJavaScriptなどの言語が欠かせません。ここでは、HTML・JavaScriptについて具体的に何ができるのか、さらにWeb開発において活躍するJavaとの関係性についても解説します。
この3つの言語について基礎をおさらいしていきましょう。
HTMLでできること
HTML（エイチティーエムエル）とは、Webページを作成するために開発された言語です。プログラミング言語とは異なり、文章構造や視覚表現を記述することのできるマークアップ言語です。
世界中のWebサイトのほとんどがこのHTMLで記述されており、視覚的かつ直感的にコードを書くことができます。2021年にHTML5が廃止され、現在の名称である「HTML Living Standard」になりましたが、基本的な要素や属性の扱いは変わりません。
HTMLはWebページの土台とも言える役割を持ち、その中でJavaScriptを呼び出すことによって動的なコンテンツを実装できます。HTMLにとって、JavaScriptは単独では実現できない動きを実現できる拡張機能のようなものです。
JavaScriptでできること
JavaScript（ジャバスクリプト）は、オブジェクト指向なインタプリタ型のプログラミング言語です。コンパイルを不要とすることから、クライアント側のブラウザ上でプログラムを動作させることが可能です。
JavaScriptは主にWebサイト上に動きを付ける目的で利用されています。記述内容が似ているJavaとは別物の言語であり、用途や目的も大きく異なります。
JavaScriptの特徴はブラウザ上で動作させることが可能な点であり、ブラウザ上のスクロールに合わせて画像をフェードアウトさせたり、画像のポップアップやマウスの動きに合わせて動作させたりすることができます。
最近では、大規模なWeb開発にはVueやReact、AngularといったJavaScriptのフレームワークがよく使われています。
Javaとの関係
Java（ジャバ）は、Java仮想マシン（JVM）と呼ばれる実行環境で動作するプログラミング言語です。オペレーティングシステムやハードウェアに依存しないことから、高い汎用性を持っており、Web開発だけでなくシステム開発やアプリケーション開発にも利用されます。
幅広い機能を提供できることから、習得難易度もHTMLやJavaScriptよりも高めです。
Web開発でJavaを採用することで、HTMLでは実現できなかった複雑なWebアプリケーションを設計できます。例えば、業務システム・オンラインストレージなどのWebサービス・ショッピングサイトの開発にも利用されています。
HTML・Javascriptを扱う職種や年収
ここでは、HTMLとJavascriptを扱うITエンジニアにはどういった職種があるのかを紹介します。また、今後スキルを習得するにあたって気になる年収事情についてもまとめました。
HTML・Javascriptを扱う職種
HTMLとJavascriptを用いる職種としては、マークアップエンジニアやフロントエンドエンジニアが挙げられます。
マークアップエンジニアとは、Webサイト制作においてHTML・CSSなどのマークアップ言語を主に利用して、ユーザビリティを配慮したWebサイト作成に携わる職種です。
具体的には、Webデザイナーが設計したデザインを、HTML・CSSを用いてコンピュータにプログラムとして実装します。Webサイト制作におけるフロントエンド部分の最終工程を担当します。
フロントエンドエンジニアとは、Webサイトにおいてユーザがテキストを入力したり、ボタンをクリックしたりするフロントエンド部分を担当するエンジニアです。
具体的には、Webデザイナーが作成したデザインをもとに、Webサービスの設計やマークアップ言語を使用してコーディング、WordPressなどのCMS構築などを担当します。
フロントエンジニアの年収
ここでは、前項で紹介したフロントエンドエンジニアの年収例を参考に紹介します。
フロントエンドエンジニアの平均年収は、「マイナビエージェント 職業別年収ランキング」では385万円（2024年5月執筆時点）、経済産業省2017年発表の「IT関連産業の給与等に関する実態調査結果」から近い職種のコンテンツクリエイタ/デザイナーを参考にすると、平均年収411万円と分かりました。
国税庁2020年発表の「民間給与実態統計調査」における民間企業平均年収は433万円なので、フロントエンドエンジニアは一般平均年収よりも、やや低めであることが分かります。
フロントエンドエンジニアとして年収をさらにアップさせるには、後述して紹介する資格を取得したり、プログラマーやシステムエンジニアなどにキャリアアップしたりする方法がおすすめです。
【参考】：マイナビエージェント 職業別年収ランキング ※【平均年収 調査対象者】 2015年〜2016年末までの間にマイナビエージェントにご登録頂いた20代・30代の方 【参考】：IT関連産業における給与水準の実態① ~ 職種別（P7） 【参考】：民間給与実態統計調査-国税庁
取得しておきたい資格
前述したように、フロントエンドエンジニアやマークアップエンジニアとして活躍するには、HTML・CSS・JavaScriptに関係する資格の取得が有効です。おすすめの資格は以下の通りです。
◼︎Webクリエイター能力認定試験 Web制作業界でもっとも受験者数が多く、標準的なWebサイト制作のスキルが問われる資格です。「スタンダード」「エキスパート」の2つの認定区分に分けられます。
【参考】：Webクリエイター能力認定試験｜資格検定のサーティファイ
◼︎CIW JavaScript Specialist 海外でも通用するグローバルな資格であり、インターネット・Web知識・技術に関する理解度が問われ、自身のITスキルや能力を国際的に証明できます。試験は英語のみですが、海外ビジネスのチャンスがある方にはおすすめです。
【参考】：Page not found - Certification Partners
◼︎HTML5プロフェッショナル認定試験 LPI-Japanによって実施されているHTMLのスキルを証明できる資格です。試験はレベルに応じて、レベル1（初級・中級レベル）とレベル2（中級・上級レベル）に分けられます。
【参考】：Web資格なら「HTML5プロフェッショナル認定試験」公式サイト
◼︎基本情報技術者試験 ITエンジニアとしての基礎知識やスキルを問われる国家試験であり、「ITエンジニアの登竜門」とも呼ばれる資格です。初級〜中級レベルであり、学生から現役エンジニアまで幅広い年齢層の受験者がいます。
【参考】：基本情報技術者試験(FE)
HTMLでJavaScriptを動かす方法
ここまでで、それぞれの言語の役割と関係性を説明しました。ここからは、Webページの土台とも言えるHTMLからどのようにして他の言語を動かすのかを説明します。まずは、JavaScriptを動かす方法を紹介します。方法としては「外部ファイルから呼び出す」「HTMLに直書きする」の2通りです。
外部ファイルから呼び出す
HTML上でJavaScriptを呼び出す最も一般的な方法は、外部ファイルから呼び出す方法です。具体的な記述方法は下記の通りです。
<script src="test.js"></script>
この記述により、test.jsという名前のJavaScriptプログラムを呼び出して実行することができます。
異なる記述のやり方として、以下のような記述方法もあります。
<script type="text/javascript" src="test.js"></script>
type="text/javascript"を追加する方法もありますが、これはHTML5より昔のバージョンでのみ必要であった記述です。HTML5（HTML Living Standard）では、記述なしは自動的にJavaScriptとして認識してくれることから不要となっています。
HTMLに直書きする
もう1つの方法として、HTMLに直接JavaScriptを記述する方法があります。これはインラインスクリプトと呼ばれ、あまり使用されてはいませんが、外部ファイルでJavaScriptを定義しなくともプログラムを動かすことが可能です。記述方法は下記の通りです。
<script>
～JavaScriptのコードを記述～
</script>
外部ファイルから呼び出すときと同様に、HTML5（HTML Living Standard）では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をサーブレットの本体とすれば、以下のような記述でサーブレットを呼び出すリンクをWebページ上に作ることができます。
<a href="/Servlet/test">サーブレットリンク先</a>
別の方法としては、<form>タグを使用してサーブレットへフォーム入力値を送信する例もあります。
この場合、同じようにサーブレットのリンク先を/servlet/test/とすると、以下のようになり、getメソッドを使うことでサーブレットへフォーム入力値がURLに付加されて送信されます。
<form acrion="/Servlet/test" method="get">～フォーム内容～</form>
サーブレット側でフォーム入力値を受けるようなプログラムにすることもでき、フォーム入力値の処理を行う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エディタの互換性を保つことが可能です。
こういったフレームワークを使いこなせるようになれば、業務効率がアップするだけでなく、ITエンジニアやクリエイターとしての価値も高まりやすくなります。未経験から挑戦する際は、こうしたツールの習得にも励みましょう。
未経験でHTML・JavaScriptを習得するには
HTML・JavaScript・Javaは、Web開発において重要な言語であり、ITエンジニアやクリエイターとして活躍するなら習得しておいて損はありません。未経験者がこれらの言語を学ぶには、*書籍の活用や学習サイトを活用する方法が取り組みやすいでしょう。
HTML・JavaScriptは比較的習得レベルは低めであるため、そこまで学習に時間を費やすことは少ないですが、Javaは難易度がｌ上がります。ある程度基礎を学習できたら、思い切って転職を試みるのもおすすめです。
エンジニア不足が叫ばれる中で、未経験者を積極的に採用し、企業研修などでスキルや実力を培っていく会社があります。そういった企業であれば、働きながら知識を増やしていき、キャリアを積むことができます。
さまざまな企業に精通している転職エージェントを活用すれば、自分に合った企業とのマッチングが期待できるでしょう。
エンジニア転職のご相談はぜひ
『マイナビIT エージェント』へ！
それぞれの役割を理解して使いこなそう
Web開発において、HTMLだけではできないことを行うためにJavaScriptやJavaとの連携は必要不可欠です。Webサイトに関して言えば、ほとんどはJavaScriptのみで対応できますが、より高度なWebアプリケーションとの連携を考えるとJavaも必要です。
本記事に書いたように連携の方法はさまざまであり、目的に合った方法を選ぶのが良いでしょう。
また、企業研修などを活用すれば未経験でも働きながらスキルを習得できます。転職エージェントを頼ることで、希望条件と合う企業を紹介してもらいやすくなります。
そこで利用を推奨するのがマイナビIT エージェントです。
マイナビIT エージェントは、IT・Webエンジニア向け、無料の転職⽀援サービスです。
IT・Webエンジニアの転職事情に詳しいキャリアアドバイザーが、あなたのご経験やスキルをお伺いし、転職活動のプランをご提案します。
アドバイザーは企業側と直接連携を取れるので、求人票に載っていない情報も確認することができます。こちらで、働き方などをしっかり確認の上、応募企業を選んでいくのが良いでしょう。
未経験からのキャリアチェンジは心身ともに本当に大変だと思います。少しでもご自身の負担を減らすべく、エージェントサービスを活用して、失敗のない転職活動に臨んでいただければ幸いです。
IT業界に精通した専任アドバイザーと豊富な求人で、
あなたの転職を丁寧にサポートします。
編集部オススメコンテンツ
アンドエンジニアへの取材依頼、情報提供などはこちらから
