名古屋でホームページ制作を通じてWEB集客を支援する(株)オンカの「お知らせ・コラム」ページ

ホームページは、HTML&CSSといったマークアップ言語をはじめ、JavaScriptのようなプログラミング言語によって構成されています。
マークアップ言語は、会社からホームページの運営を任されて勉強している方や、学生時代に講義で触れた方であれば、すでにご存知の場合も多いと思います。
しかし、JavaScriptのようなプログラミング言語は、一部の大学や専門学校、プログラミングスクールでしか学習の機会がないため、どのような役割を果たしているのかを理解していない方、そもそもJavaScriptという言語を初めて知るという方も多いように思います。
そこで今回は、ホームページのコーディングにおけるJavaScriptの役割と機能をお伝えします。

ホームページ制作におけるJavaScriptとは

JavaScriptとは、ホームページ制作やWEB・スマホアプリ開発などに幅広く使用されているプログラミング言語で、ホームページ制作においては、アニメーション機能をすることで、ホームページのUX/UI(User Interface：ユーザーの操作性)を向上させるために使用されます。
また、JavaScriptは、1995年に開発され、ホームページに様々な機能を実装できることから注目を集めました。現在においては、インターネット上の9割以上のホームページが、JavaScriptを使用した機能を実装しており、ホームページ制作において必須とされているプログラミング言語の一つです。
なお、名前が似ているため勘違いされることが多いJavaは、JavaScriptとは全く別のプログラミング言語です。
JavaScriptは、高度な機能をホームページに実装できる反面、マークアップ言語と比較して習得が困難で、思いどおりに使いこなすには時間と労力がかかるため、jQuery（最も人気があるJavaScriptのライブラリ）やReact（Facebookが開発したJavaScriptのフレームワーク）などの技術が誕生しました。ライブラリやフレームワークは、JavaScriptの機能を容易（ソースコードの記述量が少ない）にホームページに実装することができる技術で、様々なシーンで利用されています。

JavaScriptとPHPの違い

JavaScriptとPHPは、どちらもホームページ制作に関わるプログラミング言語ですが、JavaScriptはブラウザ上の動作を構築する言語で、PHPはサーバー上の動作を構築する言語として分けられています。
例えば、JavaScriptは、ユーザーがブラウザ上で確認することができるポップアップの表示やスライドショーといったホームページ上の動きを構築しています。
対して、PHPは、ユーザーが入力した情報をサーバーで処理し、情報をブラウザへ返すというブラウザとサーバー間のシステムを構築しており、お問い合わせフォームやショッピング機能をホームページに実装する際に使用されます。

JavaScriptが使用される代表的な例

ここでは、JavaScriptが使用される代表的な例を4つご紹介します。

ポップアップ表示

ポップアップ表示は、広告や注意喚起の表示、画像をクリックした際に大きく表示させるなど様々な場面で利用されており、モーダルウィンドウとも呼ばれます。このポップアップ表示にもJavaScriptが使われています。
ポップアップ表示は便利な機能である反面、無闇に使用しすぎると、ユーザーからのホームページの評価を下げてしまうおそれがあります。

GoogleMapの設置

GoogleMapは、会社のホームページ、飲食店や美容院のような店舗型ビジネスのホームページに設置されていることが多く、JavaScriptにAPIキーを記述することで設置することができます。
必要に応じてGoogleMapを設置することで、ユーザーに優しいホームページを制作することができます。

スライドショーの設置

経過時間やユーザーのクリックに連動して画像が切り替わるスライドショーの設置も、JavaScriptで行うことができます。
限られたスペースで複数枚の画像を見せることができるため、使い勝手が良く、ユーザーの目に止まりやすい機能ですが、サイズ容量の大きい画像を設置しすぎるとホームページの表示速度が遅くなりやすいため注意しましょう。

トップへ戻るボタンの設置

トップへ戻るボタンとは、ボタンをクリックまたはタップすることで、ページの最上部まで戻ることができる機能を有したボタンです。この機能にもJavaScriptが用いられています。
モバイル端末用のホームページは、その性質上どうしても縦に長くなってしまうため、ユザーが最上部まで戻るには何度もスクロールしなければならないため、レスポンシブ対応のホームページを制作する際には、必須とも言える機能です。

今回のまとめ

今回の記事を読むことで、ホームページにおけるJavaScriptの役割や代表的な利用例をご理解いただけたかと思います。
JavaScriptを使用しているホームページは、設置していないホームページと比べて操作性が大きく向上します。
ユーザーに優しいホームページを制作するためにも、JavaScriptを活用してホームページのUX/UIを高めましょう。