【初心者用】JavaとJavaScriptの違いは?Javascriptで出来ることは?
公開日: 2022/6/29
更新日: 2022/6/29
JavaScript(ジャバスクリプト)は、プログラミング言語の一種です。
名前は聞いたことがあっても「実際に、どういうことに使われているのか?」「JavaScriptは何のジャンルが得意で、どういったことが実現できるのか?」ということまでは、あまり知られていないのではないでしょうか?
初心者の方で特に多いのが「Javaが得意な人は、JavaScriptも得意」という誤った認識です。
良く混同されがちですが、JavaとJavaScriptとはまったくの別物です。
では、具体的にどのような違いがあるのでしょうか?
JavaScriptの詳しい説明も交えながら、JavaとJavaScriptの違いについてまとめてみました。
名前は聞いたことがあっても「実際に、どういうことに使われているのか?」「JavaScriptは何のジャンルが得意で、どういったことが実現できるのか?」ということまでは、あまり知られていないのではないでしょうか?
初心者の方で特に多いのが「Javaが得意な人は、JavaScriptも得意」という誤った認識です。
良く混同されがちですが、JavaとJavaScriptとはまったくの別物です。
では、具体的にどのような違いがあるのでしょうか?
JavaScriptの詳しい説明も交えながら、JavaとJavaScriptの違いについてまとめてみました。
1. JavaScriptとは?
先述した通りJavaScriptは、Webブラウザ上で動作するプログラミング言語です。
JavaScriptを使いこなせることで、HTMLとCSSで構築されたWebサイトに動きを加えたり、さまざまなWebサービスを実現したりできます。
例えば、Webページに掲載されたたくさんの画像をスライドショーとして表示したり、問合せフォームに入力された項目が正しい書式のデータなのかをチェックしたり、条件に応じたエラーメッセージを表示させたりすることも可能です。
他にも、ECサイト(通販サイト)で商品を選ぶ際に使われるショッピングカート機能や料金を計算するシステムなどもJavaScriptで構築されていることがあります。
このように、ブラウザ上で動くためにHTMLやCSSに「指示」する役割を持つプログラミング言語がJavaScriptという言語です。
Webページに動きを加えるという役割以外に、JavaScriptを使ってできることを簡単に確認してみましょう。
例えば最近人気の株式投資に応用できる技術ですが、リアルタイムで動作可能な「チャット」や「為替のチャート」など、さまざまなWebアプリを開発できることもJavaScriptの魅力の1つです。
もう少し視野を広げてみると、実はスマホアプリやゲームなどもJavaScriptで作ることができてしまいます。
パソコンだけでなく、iPhone・iPadなどさまざまなスマートデバイスが活用される時代において、JavaScriptのような汎用性の高い開発言語はとても魅力的であり、需要の高い言語となっています。
JavaScriptを使いこなせることで、HTMLとCSSで構築されたWebサイトに動きを加えたり、さまざまなWebサービスを実現したりできます。
例えば、Webページに掲載されたたくさんの画像をスライドショーとして表示したり、問合せフォームに入力された項目が正しい書式のデータなのかをチェックしたり、条件に応じたエラーメッセージを表示させたりすることも可能です。
他にも、ECサイト(通販サイト)で商品を選ぶ際に使われるショッピングカート機能や料金を計算するシステムなどもJavaScriptで構築されていることがあります。
このように、ブラウザ上で動くためにHTMLやCSSに「指示」する役割を持つプログラミング言語がJavaScriptという言語です。
Webページに動きを加えるという役割以外に、JavaScriptを使ってできることを簡単に確認してみましょう。
例えば最近人気の株式投資に応用できる技術ですが、リアルタイムで動作可能な「チャット」や「為替のチャート」など、さまざまなWebアプリを開発できることもJavaScriptの魅力の1つです。
もう少し視野を広げてみると、実はスマホアプリやゲームなどもJavaScriptで作ることができてしまいます。
パソコンだけでなく、iPhone・iPadなどさまざまなスマートデバイスが活用される時代において、JavaScriptのような汎用性の高い開発言語はとても魅力的であり、需要の高い言語となっています。
2. Javaとは?
続いてJavaScriptと混同されるプログラミング言語であるJavaについて、JavaScriptとの違いを比較しながら解説していきます。
2-1. JavaとJavaScriptの違い
少し難しいですが、JavaScriptをさまざまなデバイスを利用する私たち(クライアント側)で利用するプログラミング言語と表現すると、Javaは、コンピューターやサーバー上で活躍する(サーバーサイド側)プログラミング言語と表現することができます。
また、Javaはオブジェクト指向型プログラミング言語であるのに対し、JavaScriptはオブジェクト指向スクリプト言語と言う事も出来ます。
スクリプト言語とは何かというと、プログラムの記述や実行が容易なプログラミング言語全般のことを指します。
その他の違いとしては、Javaのプログラムはソースファイルをコンパイル(解析)し、実行ファイルを実行することでプログラムを走らせることが可能です。
一方で、JavaScriptのプログラムは単体で動作させることはできません。
先述したように、JavaScriptのプログラムを動かすためにはHTMLという土台を必要とし、HTMLがあって初めて活躍する言語なのです。
JavaScriptによる動きのあるWebページ(スライドショーなど)を実現する場合、HTMLファイル内にプログラムを書く、もしくはHTMLファイルの外部からプログラムを読み込ませなくてはなりません。
また、Javaはオブジェクト指向型プログラミング言語であるのに対し、JavaScriptはオブジェクト指向スクリプト言語と言う事も出来ます。
スクリプト言語とは何かというと、プログラムの記述や実行が容易なプログラミング言語全般のことを指します。
その他の違いとしては、Javaのプログラムはソースファイルをコンパイル(解析)し、実行ファイルを実行することでプログラムを走らせることが可能です。
一方で、JavaScriptのプログラムは単体で動作させることはできません。
先述したように、JavaScriptのプログラムを動かすためにはHTMLという土台を必要とし、HTMLがあって初めて活躍する言語なのです。
JavaScriptによる動きのあるWebページ(スライドショーなど)を実現する場合、HTMLファイル内にプログラムを書く、もしくはHTMLファイルの外部からプログラムを読み込ませなくてはなりません。
3. JavaScriptの仕組み
本章では、動的な動き(スライドショーなど)を行うためにJavaScriptがどのように機能しているのかの仕組みをかんたんにまとめてみました。
皆さんがWebサイトを閲覧するときに使用するブラウザでは、ユーザー(皆さん)のリクエストをサーバーに送信し、サーバーが返すレスポンスを解析して、皆さんが見ているWebページとして画面が表示されています。
Webブラウザはサーバーから受け取ったデータに埋め込まれているマークアップされた情報(HTML)を元に、ユーザー(皆さん)の画面にテキストを表示し、CSSを読み込んでレイアウトを整えます。
JavaScriptのプログラムはテキストで記述されており、HTML文書に埋め込まれます。
そして、HTMLと同時にブラウザに送られ、受信したデータの行からWebブラウザ上で実行されます。
以上が、JavaScriptの仕組みです。
先述したように、JavaScriptは、HTMLやCSSに指示を出し、スライドショーなどのアニメーションをつけることが可能です。
こういった動きができるようになることで、Webサイトを見ているユーザー(皆さん)がより魅力的に、高品質なサイトのコンテンツを閲覧できたり、ECサイトであれば商品の購買につながりやすいような動きを付けることが可能です。
動的な動きは、スライドショーだけでなく、○○の操作をした際にポップアップを出力させたり、ボタンの色を変えたりと、サイトのUI(ユーザーインターフェース)を大きく向上させることができます。
皆さんがWebサイトを閲覧するときに使用するブラウザでは、ユーザー(皆さん)のリクエストをサーバーに送信し、サーバーが返すレスポンスを解析して、皆さんが見ているWebページとして画面が表示されています。
Webブラウザはサーバーから受け取ったデータに埋め込まれているマークアップされた情報(HTML)を元に、ユーザー(皆さん)の画面にテキストを表示し、CSSを読み込んでレイアウトを整えます。
JavaScriptのプログラムはテキストで記述されており、HTML文書に埋め込まれます。
そして、HTMLと同時にブラウザに送られ、受信したデータの行からWebブラウザ上で実行されます。
以上が、JavaScriptの仕組みです。
先述したように、JavaScriptは、HTMLやCSSに指示を出し、スライドショーなどのアニメーションをつけることが可能です。
こういった動きができるようになることで、Webサイトを見ているユーザー(皆さん)がより魅力的に、高品質なサイトのコンテンツを閲覧できたり、ECサイトであれば商品の購買につながりやすいような動きを付けることが可能です。
動的な動きは、スライドショーだけでなく、○○の操作をした際にポップアップを出力させたり、ボタンの色を変えたりと、サイトのUI(ユーザーインターフェース)を大きく向上させることができます。
4. JavaScriptは非同期で通信が出来る
何のこと?と思われた皆さん。
下記で解説していきますので、ご安心ください。
実はJavaScriptを使うことで、「Ajax」(エイジャックス)と呼ばれるページ繊維をしなくともデータを取得できたり、取得したデータを表示したりできる非同期通信が可能になります。
わかりやすい例でいくと、みなさんも一度は使ったことがあるであろう「Google Map」です。
画面の中の地図や自分の位置をを動かせば、次々と画面表示が切り替わりますよね?
こちらの処理に、実はJavaScriptが使用されています。
5. サーバー側でも動きをつけられる
最初の方に少しだけ触れましたが、JavaScriptはブラウザの動的処理だけでなく、サーバー側でも動きをつけることが可能となっています。
この辺りは少し難しい話になるので、あまり深堀はしませんが、JavaScriptにはNode.js(ノードジェイエス)というJavaScriptのプログラミング言語を使うことで、サーバー側でも動きを付けることができます。
同じ言語を使って、ブラウザ、サーバーの両方をコーディングできるのはJavaScriptだけですし、ブラウザ側の知識とサーバー側の知識の両方を得ることが出来るので、より市場価値の高い エンジニアへとステップアップすることが可能です!
この辺りは少し難しい話になるので、あまり深堀はしませんが、JavaScriptにはNode.js(ノードジェイエス)というJavaScriptのプログラミング言語を使うことで、サーバー側でも動きを付けることができます。
同じ言語を使って、ブラウザ、サーバーの両方をコーディングできるのはJavaScriptだけですし、ブラウザ側の知識とサーバー側の知識の両方を得ることが出来るので、より市場価値の高い エンジニアへとステップアップすることが可能です!
6. まとめ
今回は万能なプログラミング言語のJavaScriptについて解説していきました。
本記事ではさわりの部分だけを解説しましたが、今後はJavaScriptの具合的な勉強方法や実際に物を作ってみる、という所を解説していこうと思うので、是非見てみてください!