- JavaScriptって何？
- JavaScriptの概要を知りたい？
- JavaScriptがなぜ必要なのか知りたい
このような方に向けて記事を書きます。
この記事を読めばJavaScriptの概要を理解できます。結論としてJavaScriptはWEB上のページで使われる、動的な動きをするためのプログラム言語です。
なぜJavaScriptが必要なのか?
WEBペ｀ージは、HTMLとCSSで基本的にはできています。
これは静的ページと呼ばれます。
ユーザの動きに対して反応をすることはなく、基本的には表示だけの役割を持つページになります。
しかし静的ページだけでなく、ユーザーがクリックしたあと表示したり、様々なUIが出来また、スマートフォンが普及してスマホの小さい画面の中でいかにわかりやすくページを作るかを追求した時に、情報を非表示にしておいてクリックしたら表示したり、動きを与える動的なページの需要が高まりました。
そんな中で、JavaScriptが非常に重要な役割を持っています。
JavaScriptはどのようなことができるのか?
例えばJavaScriptどのようなことができるのでしょうか?
結論としては、ユーザがクリックしたり選んだりしたアクションに対して、答えを返す動きを実現する方法が、JavaScriptで実現できることです。
・タブ表示
・カーソル表示
・メニューボタン
・クリックしてポップアップ表示
・アコーディオン表示
・Ajaxでの表示
などです。
以下、概要を説明します。
・タブ表示
タブの形になっていて、クリックすると内容が切り替わるコンテンツを見たことありますか？多くの情報を縦に並べてしまうと、ページが長くなり、かつユーザーにとって必要がないコンテンツであれば離脱につながってしまいます。タブにして情報を切り替え、ユーザーに選んでもらって閲覧してもらうことで、ページの利便性を高めることが出来ます。
・カーソル表示
カーソル表示とは、マウスを該当箇所に持っていくと表示されるコンテンツのことです。
例えばWEBページで、グローバルメニューと呼ばれるページ上部のメニューでマウスをオンすると「ひゅっ」という感じで選択肢が出てくるサイトを見たことないですか？
これもJavaScriptで出来ています。ユーザーが選ぶことでアクションを返してさらに選択ができますからね。
最初から選択肢を多く表示していると、初見の情報量が多くなるので、視認性が低くなります。
・メニューボタン
スマートフォンで、右上に３本線でボタンがありますよね。それをクリックすると、ページ内のリンクが「ヒュッ」と出てきますよね。これもJavaScriptで出来ています。サイトによりますが、だいたいページ閲覧者の5％くらいが利用しているイメージです。
・ポップアップウィンドウ
ポップアップは、またはモーダルウィンドウとも言います。
クリックすると表示されて、閉じられるコンテンツを見たことないですか？ちょっと補足で説明したい場合に使います。ページを遷移してしまうと、ユーザーが迷ってしまって離脱につながるケースにつながりますからね。
ちょっとした補足や、分岐があってページ遷移せずに、そのコンテンツだけ一部集中して見てもらった方が良さそうな場合などに使用します。
・アコーディオン表示
ボタンで隠されていて、クリックすると表示される「アコーディオン」と呼ばれる機能です。これもタブ表示と意図は似ていますが、情報量が多いと視認性が落ちてしまう、ページが長くなってしまうケースがあります。対策として、一部隠しておいて必要であればクリックして表示して見てもらうと、わかりやすくなります。
・Ajax
Ajaxは、「非同期」にサーバーと通信を行う方法です。
簡単に言うと、ページ内でのGoogleマップ表示や、検索の「サジェスト検索」に使われています。ページ全体ではなく、部分的にサーバーとやり取りをして値を返す機能です。
Asynchronousが、非同期という意味です。
Ajaxは、Asynchronous JavaScript ＋ XMLの略です。
非同期で、JavaScriptを使ってXMLのやり取りをするということです。
XMLはデータの形式なので、つまりJavaScripとを使って非同期にユーザーが求める情報を返す、ということですね。
基本的にWEBページのやり取りは、「同期」という表現が当てはまるように、リクエストを送るとページ単位でレスポンスが返ってきます。
しかしページ全体はそのままで、ユーザーが求めた箇所を一部だけレスポンスを返すことが出来ます。これをやることで、ユーザーはページ全体を読み込んでもらうのを待つ必要はなく、
基本ユーザがクリックしたり選んだりしたアクションに対して、答えを返す動きを実現する方法が、JavaScriptで実現できることになります。
まとめ
いかがでしたでしょうか。JavaScriptを使うことで、ユーザが求める動きを、複雑に実装することが可能です。JavaScriptが基本的な機能に関しては理解はしておきましょう。
