『Javascript』でできることってなに?!アプリの事例とともに具体的な仕組みを徹底解説!

インターネットの入り口として利用されるのがブラウザです。そして、私たちがブラウザを利用する上で、無意識に触れているプロブラムがJavascriptなのです。今回は、Webサイトには欠かせないJavascriptとは何なのか、Javascriptの仕組みについて具体例を交えながら紹介します。

 

Javascriptとは

 

Javascriptは、Webサービスを提供するサイトに使用されるプロブラミング言語です。

私たちは普段、パソコンやスマートフォンで何かを調べる場合、ブラウザを利用しますよね。ブラウザには様々な種類がありますが、そのほとんどに対して汎用性を持つのがJavascriptなのです。

Javascriptは一般的に「JS(ジェーエス)」と略されていますが、一部では「ジャバスク」とも呼ばれています。

 

JavascriptJavaの違い

 

 

Javascriptに似た名称の言語として「Java」があります。名称は似ていますがJavascript」と「Java」はまったく異なる言語ですので間違えないようにしましょう。

JavascriptとJavaの違いについてWebサービスを例に挙げ、簡単に表すと以下のようになります。

 

・Javascript:サービス画面上でUIに動きをつけるプロブラミング言語

・Java:サービスそのものを構築するプロブラミング言語

 

もちろんWebサービスだけではなく、社内システムなどあらゆる場面で基礎となり得る言語であると言えます。

ちなみに、Javascriptが創られた当初は「LiveScript」という名称でした。しかし、Javascriptを広めるためのマーケティングのために、当時から人気のあったJavaの名称に寄せて「Javascript」に改名しました。

これが、JavascriptとJavaを名称的に区別し難くなった原因でもあるのです。

 

Javascriptの仕組み

 

Javascriptはその名の通りスクリプト言語です。スクリプト言語とは、テキスト形式で書かれたソースがパソコンなどで変換され、ユーザーがコンパイルなどを意識することなく実行できるプログラムです。

 

Javascriptが動く環境

 

 

JavascriptはWindowsやMacOSはもちろん、あらゆるブラウザで動作します。

開発環境についても、基本的にはメモ帳などのテキストエディタとブラウザが必要なだけで、特別な開発環境は必要ありません

簡単なJavascriptを試してみたい場合にも、基本的なHTMLの中に、Javascriptを記述するか、あるいは作成した「.js」のファイルを読み込ませるだけなので、15行ほどのプログラムで終わります。

 

Javascriptを含むHTMLファイルを開くことでブラウザが立ち上がり、Javascriptが実行されるのです。

またChromeなどでアドオンをインストールすれば、Javascriptはブラウザのみでもプログラミング可能で、テキストエディタすら必要ありません。

 

Javascriptでできること

 

Javascriptでできることは、主にWebブラウザ上において、画面の遷移無しでUIに動きをつけることです。

これにより、インターネットが普及した初期のWeb画面と比べても表現や操作に圧倒的な自由度が生まれました。

 

ブラウザ上で情報登録する際のフォームで数字だけを入力させる制御などは、Javascriptの入力データチェックによって行われます。また、サイトごとのCookie作成にもJavascriptが使われます。

Webサイト操作した時に出てくるポップアップウィンドウや、動的な画面サイズ調整もJavascriptが用いられているのです。

普段私たちが使うブラウザが、いかにJavascriptで制御されているかが分かりますね。

 

Javascriptの事例

 

それでは、Javascriptの事例を見ていきましょう。

 

ポップアップ画面

 

 

Webサイトにおけるポップアップ画面は、Javascriptが利用されています。

情報入力後の最期の確認として、わざわざ画面遷移をしなくてもポップアップ画面で表示できる機能は画期的な動作でした。

 

オンマウスでのメニュー表示

 

 

企業のWebサイトなどでも多く見られますが、オンマウスによるメニュー一覧の表示もJavascriptです。

これも、画面遷移せずにメニューを確認できる方法で、ユーザーのストレスを大幅に減らすと共に、サイト構成を簡易的に認識することが可能です。

 

電卓

 

 

Webブラウザ上で利用できる電卓も作成可能です。

サイトに埋め込まれた電卓を利用すれば、その場で計算が可能な上に、計算結果をその場でコピー&ペーストできます。

また、Javascriptを勉強する際の初期のテーマとしても採用されることがあります。

 

カレンダー

 

 

Googleカレンダーと同じようなモノもJavascriptで作ることができます。

日や曜日を取得することで、Web画面を開いた瞬間に今日が表示されていると言った、リアルタイムな情報をWebサイトで表現できますし、一つの画面上でカレンダーを編集できます。

 

チャート

 

 

リアルタイムなチャートやグラフを、ブラウザに表示することができます。

株価チャートのロウソク足などもJavascriptで作成することができるのです。1画面で確認すべき情報は、画面をリロードすることなく利用できる必要がありますね。

Javascriptでは、これらも実現できるのです。