更新日: 2017年07月10日
公開日: 2016年02月12日

初心者必見！JavaScriptとは？最新の動向まで細かく解説！

Web 開発にアプリ開発、ビッグデータ処理に API などプログラミング言語の中でも用途範囲が広いとして知られる JavaScript。そんな見過ごすわけにはいかない JavaScript について理解を深めたいと思います。

JavaScriptとは？
JavaScriptとは
JavaScriptの歴史
JavaScriptとjQueryの違い
JavaとJavaScriptの違い
JavaScriptで身近にある例
JavaScriptを学ぶことで何ができるようになるのか
JavaScriptのメリット・デメリット
JavaScriptの書き方
JavaScriptの基本構文
JavaScriptの学習材料
JavaScritpの学習本
JavaScriptを学習できるサイト
まとめ

JavaScriptとは？

JavaScriptとは

画像出典：Wiki

JavaScript は、Google Chrome や Microsoft Edge、Safali などインターネットを利用するときに使うブラウザ上で動くプログラミング言語で、現在地球上の９割以上* のサイトが JavaScript を使用。JavaScript を使うことによって文字や色、写真にレイアウトなど表示されるコンテンツに動きを付けることが可能です。

商用サイトをはじめ、コーポレート系やブログなど多岐にわたって JavaScript の機能は利用されています。また近年のスマホ市場にも JavaScript はマッチしており、Web ・アプリ開発者にとって必須のプログラミング言語といえるでしょう。

JavaScriptの歴史

JavaScript は、マイクロソフト社の Internet Explorer とシェア争いを繰り広げたネットスケープ・ナビゲーションズによって 1995年に開発されたプログラミング言語になります。当時はまだ静的な文字と写真が並ぶ Web サイトが多く、ブラウザ上で色や表示を変える JavaScript は注目されました。

Java という文字が付いていますが、Java とは全く関係なく、当時の Java 流行にあやかって LiveScript から JavaScript に名称変更した、と言われています。

現代では PC に限らずスマホでも動的なブラウザ表示ができるとして、Web 開発者のみならず Web デザイナーにとっても必須のプログラミング言語として知られていますね。また Monaca などのアプリ開発サービスでは、JavaScript を使って Android アプリや iOS アプリを開発でき、さらにはバックエンド（サーバーで動くプログラミング）の Node.js でも JavaScript が使われるなどオールラウンドなプログラミング言語として進化を遂げています。

JavaScriptとjQueryの違い

こちらのテキストアニメのJavaScriptコードは、文末に添付しています

JavaScriptが発展する過程で、2006年にjQueryというJavaScript専用のツールが公開されています。 JavaScriptとjQuery、この2つを一緒と思っている方もいらっしゃいますので違いをご紹介しますね。

JavaScript／プログラミング言語の一種
jQuery／JavaScript用の便利なツール（ライブラリ）

jQueryは、JavaScript用の便利なツール（ライブラリ）で、専用のコードを読み込むことではじめてjQueryが機能します。それに対して、JavaScriptは専用コードの読み込みナシで、実行可能です。

jQueryを使うメリットとしては、JavaScriptの記述量を少なくできたり、様々な機能をもつjQuery用プラグインが使えるようになることです。例えば、画像の自動送りやアニメーション付きの円グラフ、表データのダウンロードなど。つまりjQueryは、JavaScript初心者でも様々な機能を実装でき、Web制作やWebデザインを手伝ってくれるツールになります。 2006年の登場以降もjQueryはバージョンアップを繰り返し、現在の最新版は2017年３月にリリースされたバージョン3.2です。

JavaとJavaScriptの違い

どちらもJavaという字が付くので一緒と思われがちですが、全く別のプログラミング言語になります。参考までにJavaとJavaScriptの違いをまとめてみました。

	Java	JavaScript
	Java	JavaScript
リリース	1995年5月	1995年12月
開発者	サン・マイクロシステム社（現オラクル社）	ネットスケープ・コミュニケーション、Mozilla
対象	すべての機器（Webサイトやアプリも）	Webサイトやアプリ
開発環境	必要 Java SDKなど	不要
需要（求人数）	44,364件（20170707時点）	15,852件（20170707時点）

実際のコードの違い

HelloWorldという文字の出力

■Java■

public class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World");
    }
}

■JavaScript■

<script>
document.write("Hello World");
</script>

JavaScriptで身近にある例

ブラウザ上でのポップアップ表示

注意喚起や確認の時などに表示されるポップアップに。

カウントダウン

画像出典:CodePen

楽天スーパーセールなど商用サイトでよく見て焦る、カウンターに。

自動計算

画像出典:SMBC

住宅ローンやショッピングサイトでよく見る試算フォーマットに。

情報を自動で入力もしくはエラーチェック

ユーザー登録やログインのストレスを軽減してくれる入力フォームに。

クリックやマウスオンなどによるイベント処理

申し込みや購入などクリックしてもらいたい時に使われているイベント処理に。

端末による振り分け

画像出典：Yahoo!Japan、Bloomberg

JavaScript を使うと、Web サイトにアクセスしてきた端末を瞬時に判断し、その端末に合った情報を照会することができます。例えば、スマホから yahoo.co.jp にアクセスすると自動的にモバイルサイトの m.yahoo.co.jp に転送されます。またグローバル規模のサイトでは、アクセスポイントに合わせてその地域のニュースもしくは表示言語で表示します。

画像のスライド

企業系サイトのトップでよく見る画像スライダーに。

Webアニメーション

画像出典:探検！京都大学

動きのある Web デザインにも。

リアルタイムなチャート表示

画像出典：googleチャート

株価やマーケットシェアなどを示すチャート、グラフにも。

データのリアルタイムな表示

画像出典:Airbnb

旅行系サイトなどでよく見る宿泊所の情報とマップ情報のリンク（同一表示）にも。

Google APIなどのAPIにも

Google API

Google などが公開している各種 API 接続も。

Webやアプリのゲーム開発

画像出典: イージス・コマンド迫りくる弾道ミサイルを迎撃せよ

Enchat.jsなどのプラットフォームを使って、ゲーム開発も。スマホでもブラウザで動作し、アプリへの応用も可能。

JavaScriptを学ぶことで何ができるようになるのか

先ほどのJavaScript使用例より、もう少し実践的ですぐに役立ちそうな例をご紹介します。

文字をオシャレに演出できる

参考データ：stackoverflow

ページ内の移動（テスト可）

HTMLでもページ内移動は可能ですが、移動元と移動先両方にコードを設定する必要があります。 JavaScriptの場合は、移動元のみのHTML記載でOKです。

表へのソート機能追加（テスト可）

データが多い表もソート機能で見やすくなります。

名前（ここをクリックしてね）	点数（クリックしてね）
ああ君	550
かか子	750
テスト太郎	550
北へ西へ	400
はやぶさ	330
ねずお	440
チュー太郎	330

データの表示・非表示（テスト可）

答え合わせなどに便利な機能です。

答えをみる

人工知能の活用 - 画像認識機能（２言語）

オープンソースで公開されている画像認識機能もJavaScriptで利用することができます。

App ページ：https://oxism.com/thing-translator/
参考ページ：https://github.com/dmotz/thing-translator

Googleシートを使ったアプリの制作

GoogleシートやGoogleドキュメントには、ユーザーが任意に機能を追加できるスクリプトエディタが用意されています。こちらで使用する言語は、Google App Script になりますが、JavaScriptの基礎知識があれば編集可能です。 Gmailにスケジュール機能を追加したり、送信後相手がメールを開いたかどうかチェックできたり、管理しているWebサイトがダウンしたことを知らせてくれる機能などを追加することができます。

JavaScriptのメリット・デメリット

メリット

ブラウザ上で稼働、特別な開発環境は必要ない
PC、スマホ、タブレットなどデバイスレスに実行可能
シンプルなプログラム構文
世界中にJavaScriptユーザーは多く、充実したコミュニティー環境
フロントエンド開発でもバックエンド開発でも利用できる
充実したライブラリー環境（jQueryなど）
MonacaやMeteorなどのプラットフォームを利用したAndroid・iOSのアプリ開発
Ruby on Railsと連携可能、つまりハイレベルなアプリ開発の可能性

デメリット

処理に時間がかかるケースも
セキュリティに関する知識が必要

JavaScriptの書き方

<script>　・・・　</script>、というように＜script>タグを用いて JavaScript であることをブラウザに認識させます。

【サンプル　ファイル名：HelloJS.html】

<!DOCTYPE html>
<html lang="ja">
<head>
   <script>
       alert('Hello JavaScript');
   </script>
</head>
<body>
</body>
</html>

以上を基本に、変数や配列、演算子を駆使して JavaScript を作成していきます。作成した JavaScript は、ファイル名.js で保存し、

<script type="text/javascript" src="ファイル名.js"></script>

とHTML 内に記述することで JavaScript ファイルを読み込むこともできます。

以上を基本に、変数や配列、演算子を駆使してJavaScriptを作成していきます。

JavaScriptの基本構文

変数の宣言 var

変数とは、データを収納する箱のようなモノになります。 JavaScript を扱う上で、var は基本になります。


<!DOCTYPE html>
<html>
<body>
  <script>
        // 変数xを定義
        var x;
        // 変数xに値を代入
        x = 200;
        // 変数yを定義し値に代入
        var y = 10;
    // 変数zを定義しxとyの演算子を記述
        var z = x+y;
        // xとy、その合計値zを表示
        document.write('xの値は' + x + '、yの値は' + y + '、xとyの合計値は' + z );
    </script>
</body>
</html>

条件分岐の If文

if文を使うことで、条件によって違う処理を行うことができます。年齢別による運転免許の取得可否を試しに実行してみます。


<!DOCTYPE html>
<html>
<body>
      <script>
            //年齢値
            var age = 16; 
            //18歳以上の場合のコメント
            if( age >= 18 ){
               document.write("運転免許取得可");
            }            
            //そうでない場合のコメント
            else{
               document.write("運転免許の取得年齢に達していません");
            }         
      </script>
</body>
</html>

ループ機能の for文

forを使うことで繰り返し処理（ループ）を実行できます。 10 より小さい数字を羅列してみます。


<!DOCTYPE html>
<html>
<body>
      <script>
      //初期値iを0として、10より小さい値の範囲内で１ずつ加算
      //i < 10 の条件を満たす限り、処理が繰り返される
      for (var i = 0; i < 10; i++) {
      //iの出力
      document.write(i);
      }
      </script>
</body>
</html>

計算なら関数 function

関数functionを使うことで、ブラウザ上で様々な演算を行うことができます。
試しに、時間を秒に換算してます。


<!DOCTYPE html>
<html>
<body>
      時間を秒に換算
      <!-- 換算値をここに出力 -->
      <script>
      //秒をfと定義
      function toSecond(f) {
      //計算式
      return (3600*f);
      }
      //HTML コードへの出力と時間の代入、時間は４時間としてdocument.getElementById("demo").innerHTML =               toSecond(4);
      </script>
</body>
</html>

JavaScriptの学習材料

JavaScriptの基本構文をいくつかご紹介させて頂きましたが、「もっと学びたい」という方向けに学習素材を集めてみました。

JavaScritpの学習本

通勤通学中やオフラインでも学習できる本は、あると便利ですよね。

img	text
画像出典： amazon.co.jp	マンガでわかるJavaScript マンガでわかるシリーズのJavaScript版になります。プログラミング自体がはじめてで、JavaScriptについてザックリ知りたい方にオススの本です。基本構文と簡単な例文、jQueryについて学習することができます。著者：クロノス・クラウン、柳井政和出版：秀和システム発売：2010年　ページ数：320 価格：￥1,800＋税

img

text

画像出典： amazon.co.jp

マンガでわかるJavaScript

マンガでわかるシリーズのJavaScript版になります。プログラミング自体がはじめてで、JavaScriptについてザックリ知りたい方にオススの本です。基本構文と簡単な例文、jQueryについて学習することができます。

著者：クロノス・クラウン、柳井政和
出版：秀和システム
発売：2010年　ページ数：320
価格：￥1,800＋税

img	text
画像出典： amazon.co.jp	スラスラわかるJavaScript 知識ゼロからプログラムが作れる！こちらはWeb開発を目的にJavaScriptを学習していきます。 WebデザイナーやWebデベロッパーを目指している方にオススメです。基本構文から jQuery、Ajax、アニメーションなどの内容を学習できます。著者：生形可奈子　出版：翔泳社発売：2013年　ページ数：416 価格：￥2,300+税

img

text

画像出典： amazon.co.jp

スラスラわかるJavaScript 知識ゼロからプログラムが作れる！

こちらはWeb開発を目的にJavaScriptを学習していきます。 WebデザイナーやWebデベロッパーを目指している方にオススメです。基本構文から jQuery、Ajax、アニメーションなどの内容を学習できます。

著者：生形可奈子　出版：翔泳社
発売：2013年　ページ数：416
価格：￥2,300+税

img	text
画像出典： amazon.co.jp	JavaScript本格入門モダンスタイルによる基礎から現場での応用まで（改訂新版）こちらは amazon.co.jpの JavaScript部門で、2番目に売れている本になります。 JavaScriptの歴史や現在の状況説明から、基本構文、オブジェクト指向、実際の開発現場で必要な知識まで網羅的に解説。全456ページとボリューム満点なので、JavaScriptを本気で考えている方にオススメです。著者：山田祥寛　出版：技術評論社　発売：2016年　ページ数：456　価格：￥2,980＋税

img

text

画像出典： amazon.co.jp

JavaScript本格入門

モダンスタイルによる基礎から現場での応用まで（改訂新版）

こちらは amazon.co.jpの JavaScript部門で、2番目に売れている本になります。 JavaScriptの歴史や現在の状況説明から、基本構文、オブジェクト指向、実際の開発現場で必要な知識まで網羅的に解説。全456ページとボリューム満点なので、JavaScriptを本気で考えている方にオススメです。

著者：山田祥寛　出版：技術評論社　
発売：2016年　ページ数：456　
価格：￥2,980＋税

【関連記事】JavaScriptのレベル別おすすめ書籍まとめ！初級から上級まで全8冊

JavaScriptを学習できるサイト

今すぐに学習をスタートできるWebサービスをご紹介します。

ドットインストール

画像出典：ドットインストール

プログラミングの動画学習でお馴染みのドットインストールで、JavaScriptの基礎を無料学習することができます。JavaScriptの概要を掴むにはピッタリのサイトです。有料サービスに申し込むと、ゲームなどのサンプルプログラムを学習することができます。

料金／無料もしくは月980円
受講体系／オンライン・ビデオ視聴
特徴／1レッスン3分で、テキストエディタのAtomと連携可能。

Progate

画像出典：Progate

実践型学習サイトで有名なProgateからは、JavaScriptの基本コースが無料で公開されています。「JavaScriptを書いてみたい」「動かしてみたい」という方にピッタリのサイトです。学習の流れとしては、簡単な説明を読んだ後に、ブラウザ上に自分でコードを書いてJavaScriptを動かします。ただし、解説や答えを見ても理解できない場合は、自分で調べる必要があります。

料金／無料もしくは月980円（税込）
受講体系／オンライン学習＆コーディングの自習スタイル
特徴／オンライン上でJavaScriptの学習環境を構築しているため、即JavaScriptのプログラミングに取り掛かれる。

W3Schools

画像出典：W3Schools

こちらは英語の学習サイトですが、JavaScriptの一通りの機能やAjax、JSONなどを一網できるサイトになります。 JavaScriptの全体像を把握したい方にオススメです。ただし、学習の進捗管理は自分で行う必要があり、わからない点は自分で調べる必要があります。

料金／無料（学習証明書発行サービスあり＄95）
受講体系／オンライン学習＆コーディングの自習スタイル
特徴／サンプルコードを見て、自分で編集できる点。

＼Webサイト担当者としてのスキルが身に付く／

無料カウンセリングはこちら

まとめ

いかがでしたでしょうか？JavaScriptは1995年に誕生し、20年以上たちますが、未だに進化を続けており、最新版は2015年6月にリリースされたECMAScript6というバージョンになります。最近ではJavaScriptを駆使して、ブラウザ上にOS機能を持たせたOS.jsがリリースされるなど、今後も目が離せないプログラミング言語といえるでしょう。