【超入門】JavaScriptとは？できること・基本をわかりやすく解説

2019.11.20
Webの基礎知識

ホームページ作成

初心者向けに、JavaScriptとは何ができるのかをわかりやすく解説します。

ブラウザ上でWebページをダイナミックに動かす簡単なプログラムがJavaScriptであり、仕組みや動作など、これからプログラミングを学ぶ方にも理解できるようにていねいに説明していきます。

javascript

JavaScriptとは？

javascript 仕組み

最初に

一番身近なのは、Webサイトを表示するブラウザ上で動くプログラム（クライアントサイド・スクリプト）です。無くてもWebサイトは見ることはできますが、文章や写真をそのまま読むだけで、いろいろな操作ができません。これだと、とても不便ですね。

そこで、JavaScriptというプログラミング言語を動かすことで、ブラウザ上で画像を拡大表示して見やすくしたり、入力フォームを設置してメッセージを送付できます。

いきさつ

JavaScriptが生まれたのは意外と前のことで、インターネットが普及し始めた1990年代はじめです。当初は、Netscape Navigatorというブラウザ専用に開発され、名称はLiveScriptでした。その後企業との提携があり、今の名前に変わりました。

ちょうどこのとき、提携先企業が開発し評判だったプログラミング言語が「Java」でした。この人気に合わせてか、LiveScriptからJavaScriptへと変更されました。ふたつの違いは、のちほど整理します。

プログラミング言語としての特徴

ブラウザ上でページを表示するとき、JavaScriptを使った場合は以下のような特徴があります。

	JavaScriptを使う場合	JavaScriptを使わない場合
（例）文章・写真の表示	他に変更したり、拡大表示や動かしたりできる	HTMLファイルで指定したまま表示される
（例）フォームに文字入力し送信	可（送信自体は別のプログラムが担当）	不可
主な動作場所	利用者のパソコンやスマホのブラウザ	–
便利さ	圧倒的に便利	不便
複雑さ（学習の難易度）	複雑（言語の理解が必要）	–

ブラウザでJavaScriptのONとOFFを切り替えはできるか？

できます。たとえメリットがたくさんあるJavaScriptでも、動作を止めたい場合にはOFFにできます。完全な解決にはなりませんが、主な理由は次の通りです。

セキュリティ対策（インターネット側からJavaScriptへの攻撃を防ぐ）
自分のアクセス情報を無効化できる（JavaScriptでできたアクセス解析プログラムを動かなくする）
広告の非表示（JavaScriptでできた余分な広告を非表示にできる）

この設定変更によって、もともとメリットだった内容も無効化してしまいます。そのため、OFFへの切り替えには注意が必要です。ブラウザの初期設定は通常ではJavaScriptがONの状態のため、理由がない限りふだんはそのままでいいと思います。

JavaScriptに関連する用語

JavaScriptを応用したプログラムのまとまり（ライブラリ）などが用意されています。Webサイトの制作者が、より効率的な作業がする目的でたくさん揃っています。一例をご紹介しましょう。

名称	読み方	概要
Ajax	エイジャックス	・JavaScriptライブラリ・JavaScriptの通信機能を使い、XML形式のデータを送受信する・用途例はGoogle Mapsなど
jQuery	ジェイクエリ	・JavaScriptライブラリ・JavaScriptでできたブラウザの拡張機能で、手軽に導入できて人気・用途例はメニュー、画像表示。検索など
JSON	ジェイソン	データをテキストで表現するための記述方法
DOM	ドム	HTMLファイルなどにアクセスして操作するしくみ

JavaScriptとJavaの違い

さきほど紹介したJavaに関連して、JavaScriptとの違いをまとめました。Javaという共通の用語が含まれているので、似たプログラミング言語と思うかもしれません。ところが実際には別物です。

	JavaScript	Java
公開された年月	1995年12月（当時の名称は「LiveScript」）	1995年5月
開発会社	Netscape Communications社	Sun Microsystems社
実行ファイル	ソースコード	Javaコンパイラが出力したJavaバイトコード
変数の処理	動的	静的
開発の目的	Webサイトのページ制作をより簡単により早くする	どんなハードウェアでも動作する
利用分野	Webサイトのページ制作（Webブラウザ上で動くシステムやサービスなど）	さまざまな大規模システム（業務システム、SNSなどのWeb関連サービス、Androidのスマホ向けアプリなど）

JavaScriptでできること、よく使われている場面

それではJavaScriptはどこに使われているのでしょうか。具体的にブラウザ上で何ができるかお話します。いろいろな場面でお世話になっていることに驚くと思います。まずは、基本的な書き方について説明します。

0）JavaScriptの基本的な書き方

HTML ファイル上に書いた場合、以下のソースコードの赤字の部分（<script>から</script>まで）がJavaScriptです。目的に応じていろいろなルールがあります。こちらのdocument.write(“Hello world!!”);の例では、書かれているブラウザ上に「Hello world!」と表示する指示になっています。

【ソースコード】

<!DOCTYPE html>
<html>
<body>

</body>
</html>

javascript01

この基本ルールを組み合わせたり、条件による動作を指定したJavaScriptが多く動いています。以下実例をご紹介します。

1）マウスの動きに伴うメニューの表示・非表示

ページを開いた時には表示されていないメニューを、ページを読み進めるうちに表示したい場合は、このJavaScriptを使います。逆のパターンもありますね。下の画像の例では、赤枠の部分のメニューの表示が制御されています。

javascript02

ソースを見ると、HTMLでは下記の部分が該当します。

javascript03

さらにJavaScriptは以下のように設定されています。マウス操作で画面上をスクロールして、一定の位置に来たら表示する内容です。また条件によって動作を分けています。

javascript04

2）画像の拡大（ポップアップ）表示

Webサイトの利用者に、掲載している写真を拡大して細部をよく確認してもらう場合は、jQuery（ジェイクエリ）というJavaScriptライブラリを使うと効果的です。拡大写真へのリンクを、簡単に設定できます。有名なものの一つに「Lightbox」があります。

一般的にJavaScriptライブラリには、必要なファイル一式がセットされています。あとはダウンロードして、必要なファイルをサーバーにFTPでアップロードするだけです。具体的には、設置したいHTML ファイルの下部（</body>タグ直前）に、以下を書いて指定します。

【ソースコード】

JavaScriptについて詳細がわからなくても設置方法がわかれば、JavaScriptでできたプログラムを利用できる例です。

3）Google マップ

ページにGoogle マップを組み込んで公開する場合にも、JavaScriptを使うことがあります。「Google Maps JavaScript API」を利用することで、より多機能な地図を表示できます。この「Google Maps JavaScript API」の利用には、専用の手続きが必要です。その後、以下をHTMLファイルなどに書きます。

【ソースコード】

（注）上記の「APIキー」は、手続きによって入手できます。詳しくは公式サイトにてご確認ください。

4）画像スライダー

トップページに配置するメイン画像を次々に切り替えて、限られた画面スペースで魅力があり、多くの情報を伝える方法です。こちらもjQuery（ジェイクエリ）というJavaScriptライブラリで実現しています。例えば「slick」では、以下のようにHTMLファイルなどに書いて、専用のプログラムを呼び出します。

【ソースコード】