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

ブラウザ上でWebページをダイナミックに動かす簡単なプログラムが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!」と表示する指示になっています。

【ソースコード】

 

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

 

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

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

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

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

 

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ファイルなどに書いて、専用のプログラムを呼び出します。

【ソースコード】

 

5）送信フォームの必須項目が入力済みかのチェック

問い合わせフォームでの送信時で記入もれを防ぐために、送信前にJavaScriptがチェックしています。もし漏れがある場合は、下記のようなメッセージが出で再入力が求められます。

 

6）Googleのアクセス分析サービスの利用

公開しているWebサイトにいつ、どのページにアクセスがあったかなどのアクセス情報を知りたい場合、Googleの関連サービスを利用すれば分析できます。例えば以下をHTML ファイルなどに埋め込むことで、Googleが提供している管理ツールが利用できます。

公開中のWebサイトの改良には、このようなアクセス分析は欠かせません。この分析は複雑で分析しづらいので、ツールを使えば効率的ですね。

JavaScriptを学ぶには？

どのようなプログラミング言語の習得にも時間はかかりますが、実践しながら理解するのが近道と考えます。この章では、筆者おすすめの学習サイトや書籍をピックアップしてみました。

1) 学習サイト

とのサイトでも動画を見ながら実践できます。無料で利用できる場合もあり、助かりますね。コミュニティが充実しているところもあります。

Schoo

月額980円ですべてのレッスンを受講できます。いちばんのおすすめです。

【リンク】https://schoo.jp/

 

Udemy

有料ですがキャンペーン期間中はリーズナブルな料金で、多くのレッスンから選ぶことができます。やはり、すでに受講されている方の評価やコメントは、レッスンを選択する際にとても参考になります。

【リンク】https://www.udemy.com/ja/

 

Progate

無料会員でもJavaScriptの基礎コースは受講可能です。

【リンク】https://prog-8.com/

 

ドットインストール

無料会員でも実践的なレッスンが用意されています。

【リンク】https://dotinstall.com/

 

2）書籍

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

Amazonでベストセラーです。イラストを多用しわかりやすい印象があります。

 

スラスラわかるJavaScript

関連する知識がなくても、プログラムが実践できるレベルになるまで解説されています。

 

ノンプログラマのためのJavaScriptはじめの一歩

つまずきそうなところを重点的にていねいに解説されています。

まとめ

ここまでいかがでしたか。JavaScriptは決して難しいプログラミング言語ではなく、ページの制作には大切なものとご理解いただけたかと思います。ぜひ習得して、より利用しやすいWebサイトの運営にお役に立てください。

JavaScriptなどのプログラミング言語を実践で試すには、レンタルサーバー会社が提供するVPSサービスを使う方法があります。カゴヤジャパンでは、こちらのプランを提供しています。ご検討されてみてはいかがでしょうか。