JavaScriptを使ってできることをわかりやすく解説！

JavaScriptでできることとは？

そもそもJavaScriptとは？

JavaScript（ジャバスクリプト）は、プログラミング言語の一種です。

横文字でとっつきにくいですが、実は、私たちが普段から利用しているWEBサイトは、JavaScript が使われていることがとても多いのです！

主に、動的なコンテンツを作成するために使われます。

例えば、お問い合わせフォームを表示したり、たくさんの画像をスライドさせながら表示させたりすることが可能です。

JavaScriptを使うことによって、ユーザーの印象に強く残るサイトを作り上げることができます。

幅広いシーンで利用されている言語

JavaScript は、汎用性の高い言語として知られています。

Webページに動きを加える以外にも、「Webアプリ」や「ゲーム」の開発にも使われているのです。

Webアプリの場合、メニュー画面の切り替えや、チャット機能をもったアプリの作成が可能です。

ゲームの場合は、画像の表示やルールを決定することで、オリジナルのクイズゲームなどを作成することが可能です。

JavaScript は、幅広いシーンで利用されているプログラミング言語だと言えるでしょう。

JavaとJavaScriptは別物

混同されることの多い「Java」と「JavaScript」ですが、これらは別の言語です。

開発当初は、LiveScript と呼ばれていました。

1995年にサン・マイクロシステムズ(現・オラクル)が開発したプログラミング言語 Java が当時大きな注目を浴びており、ネットスケープとサン・マイクロシステムズが業務提携していた事もあったため、JavaScript という名前に変更されました。

Java は、企業の顧客情報管理をはじめとした、大規模なデータ処理を得意としています。

一方で、JavaScript は、動的なWebコンテンツの作成を得意とします。

※名前は似ていますが、別物なので注意しましょう。

JavaScriptを使ってできること

一例ではありますが、JavaScript を使ってできることを、具体的に5つに分けて、まとめてみました。

１. ポップアップウィンドウ
２. Ajax
３. サイトの利便性UP
４. フォーム制御
５. リアルタイムで動くグラフ

ポップアップウィンドウ

WEBサイト内のリンクをクリックした時に、別のウインドウを立ち上げることができます。

本当にページを移動してもよろしいですか？

このファイルを削除してよろしいですか？

一度はどこかで見たことがあると思いますが、こんな風に、主に注意喚起に用いられます。

Ajax

Ajax（エイジャックス）は、ページを移動しなくてもデータを取得できたり、表示したりできる機能です。

代表的なのは、GoogleMap ですね。

この機能を利用して、中の地図を動かせるような仕組みを作っています。

サイトの利便性UP

JavaScript は、サイトの利便性を上げるために用いられます。

見やすく、使いやすいサイトにするための工夫ができますよ。

一例ではありますが、具体的には次のようなことが可能です。

装飾の変更：文字色や背景色の変更

タブ作成：大量の情報を一気に表示しても分かりにくいですよね。タブごとにまとめることで、見やすく表示することができます。

カーソル表示：メニューにカーソルを合わせると、より詳しいメニューが表示されるように出来ます。

スライダー：画像が横にスライドすると、切り替わるようにすることが出来ます。

フォーム制御

会員登録や、ショッピングカート機能など、ユーザーが入力できるフォームを作ることができます。

入力フォーム自体は、HTMLでも作ることができます。

しかし、次のような制御ができるのは、JavaScript 特有ということができます。

例は、こちらです。

選択した内容によって質問内容を変える

カート内の合計代金を表示する

入力内容のチェック(例：「かな」の項目にカタカナで入力しているとエラー表示が出る)

住所検索(郵便番号を入力すると、入力された郵便番号情報をもとに「都道府県」や「市区町村」を自動で入力してくれる機能)

入力文字数のカウント

リアルタイムで動くグラフ

リアルタイムで動くグラフが作成可能です。

例えば、1秒ごとに変動する株価のチャートを作ることもできます。

なお、有名なところでは、このようなものがあります。

Chart.js
動的で美しいチャートを手軽に作ることができるポピュラーな JavaScript ライブラリ

Epoch.js
様々なグラフを生成するJavascriptライブラリ

highchart.js

Google Chart Tools

オススメのJavaScript入門書はこちら！

確かな力が身につくJavaScript「超」入門

さいごに

いかがでしたでしょうか？

JavaScript について、少しでも気になっていただけたようであれば幸いです！

こちらの記事もオススメ！

2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...
2020.08.07JavaScript 特集知識編JavaScriptを使ってできることをわかりやすく解説！JavaScriptの歴史【紆余曲折を経たプログラミン...