JavaScriptとは？Webデザイナーなら身につけておきたいスキル

JavaScript（ジャバスクリプト）は、Webサイトに様々な動きを追加するために使用されるプログラミング言語です。略してJS（ジェーエス）などと呼ばれることもあります。
JavaScriptはWebデザイナーを目指すなら身につけておきたいスキルのひとつです。HTMLやCSSといったWebサイト制作の基本を学んだ後の、次のステップとして学習することをおすすめします。この記事ではJavaScriptについて解説します。

JavaScriptの特徴

例えば、ショッピングサイトなどでよく目にするメイン画像が切り替わるスライドショー、スマートフォンサイトで押すと詳細が開くメニューボタン、画像をクリックすると拡大表示される動きなどがJavaScriptを使って制作されています。
このようにJavaScriptは、Webサイトに様々な動きを追加するために「画像をクリックした」「下の方までスクロールした」「時間が3秒経過した」といった「イベント」を検出します。イベントを検出すると次の動きを起こす指示を出します。

JavaScriptとJava、jQueryの違い

名前がよく似ていて間違いやすい言語として「Java」がありますが、「Java」と「JavaScript」はまったく違う言語です。
Javaは、主にWebアプリケーションやモバイルアプリケーションの開発に使用されます。JavaScriptとは用途が違うので注意しましょう。

一方、「jQuery」という言語もあります。jQueryはJavaScriptをもっと簡単に書けるように改良された言語であり、学習コストが少なくとても人気があります。jQueryを使ったプラグインがたくさん開発されており、ネット上で配布されています。JavaScriptよりも身につけやすいので、まずはjQueryから学ぶのもいいでしょう。

代表的なJavaScriptの活用例

スライドショー

スライドショーは、一定時間の経過やクリックで画像を切り替える機能です。当サイトのトップページにもあります。限られたスペースを、画像を切り替えることで情報量を増やすことができます。

ポップアップウインドウ

ポップアップウィンドウは、画面の一部をクリックした時や、ページを読み込んだ時などに、画面の前面に表示されるウインドウです。会員登録や広告の表示、メールフォームを送る際に「送信しますか？」という確認などに使われます。

計算機能

日時の計算や料金の見積もりなどにもJavaScriptは使われています。例えば公開までのカウントダウンタイマー、ホテルの料金の計算といった機能をWebサイトに実装することができます。

Ajax

Ajax（エイジャックス）とは、ページの読み込みをせずに、サーバーとのデータのやりとりを可能にする技術（非同期通信）です。代表的なものはGoogleマップです。
通常ならWebサイトで違う画面を表示させるためには、別のページへ移動します。ですが、Googleマップではユーザーが地図を操作する裏で、地図情報をGoogleのサーバーから取得する処理が行われています。先に周辺地図の情報を取得しておくことで、ユーザーが地図をスクロールした際にスムーズに地図を表示しています。

まとめ

JavaScriptの特徴について解説しました。JavaScriptを使用しているWebサイトは、テキストと画像だけのWebサイトに比べて、利便性が大きく向上します。Webデザイナーを目指すなら、ぜひ身につけておきましょう。

本校のオープンキャンパスでは実際にJavaScripを使用してWebサイト上で動くブラウザゲームを制作するメニューもありますのでぜひ参加してみてください。