本文へ移動
相談する無料チェックしてみる

トップお知らせ・ブログJavaScriptとは

JavaScriptとは？ホームページでできること

デザイン・技術読了時間：約3分

ボタンを押すとメニューが開く、写真が自動で切り替わる。
ホームページのこうした動きの多くは、「JavaScript（ジャバスクリプト）」で作られています。

この記事では、JavaScriptとは何か、ホームページでできることと、使うときの注意点を解説します。

1.動きをつけるための言葉

JavaScriptは、ブラウザの中で動くプログラムの言葉です。HTMLで書いた中身や、CSSで整えた見た目を、見る人の操作に合わせて変えることができます。

できること例
表示を切り替えるメニューを開く・閉じる、よくある質問の答えを開く
入力を確かめるフォームの入力漏れを、送る前に知らせる
動きをつけるスクロールに合わせて要素を表示する、写真を切り替える
外部のサービスとつなぐ地図、アクセス解析、チャット

名前は似ていますが、Java という別のプログラムの言葉とは関係ありません。

2.JavaScriptを知っておくとよい理由

JavaScriptを使うと、ホームページを使いやすく、分かりやすくできます。一方で、使いすぎると、ページの表示が遅くなったり、スマートフォンで動作が重くなったりします。

また、アクセス解析や広告、チャットなど、外部のサービスを入れるときも、JavaScriptが追加されます。気づかないうちに増えて、表示の速さに影響していることもあります。

JavaScriptは、使いやすさのために、必要な分だけ使うことが大切です。

3.使うときの注意点

簡単な例

const button = document.querySelector(".menu-button");
const menu = document.querySelector(".menu");

button.addEventListener("click", () => {
  menu.hidden = !menu.hidden;
});

ボタンを押すたびに、メニューを表示したり隠したりする例です。

注意点

  • 大切な情報は、JavaScriptがなくても読めるようにする
  • 外部のサービスのコードは、必要なものだけ入れる
  • 使わなくなったコードは削除する
  • 動きが多すぎると、酔いやすい人もいる（動きを減らす設定に配慮する）

不具合が起きたときの確かめ方

  1. 01
    どの操作で起きるか確かめる

    どのページで、何をしたときに起きるかを控えます。

  2. 02
    別のブラウザで試す

    ブラウザによって起きるかどうかを確かめます。

  3. 03
    エラーを確かめる

    ブラウザの開発者向けの機能の「コンソール」に、赤いエラーが出ていないか見ます。

開発者向けの機能の使い方は、Google Chromeのデベロッパーツールの基本的な使い方で解説しています。

4.よくある質問

JavaScriptは、なくてもホームページは作れますか？

作れます。動きの少ないホームページなら、HTMLとCSSだけで十分なことも多いです。

JavaScriptが原因で、表示が遅くなることはありますか？

あります。とくに、外部のサービスのコードがたくさん入っていると、遅くなることがあります。

jQuery とは何ですか？

JavaScriptを書きやすくするための道具です。以前は多くのホームページで使われていましたが、今はJavaScriptだけで同じことができる場面が増えています。

メニューが開かなくなりました。

JavaScriptのエラーで、動きが止まっていることがあります。最近、プラグインの更新や、コードの追加をしていないか確かめましょう。

5.まとめ

JavaScriptは、ホームページに動きをつけるための、ブラウザの中で動くプログラムの言葉です。

  • メニューの開閉、入力の確認、外部のサービスとの連携などに使う
  • 使いすぎると、表示や動作が重くなる
  • 大切な情報は、JavaScriptがなくても読めるようにする
  • 不具合は、開発者向けの機能のコンソールで確かめる

HTML・CSS・JavaScriptの役割の違いは、HTML・CSS・JavaScriptの役割をわかりやすく解説で紹介しています。

ホームページの動きの不具合で困っている場合は、浅草Web屋にご相談ください。

相談する

関連記事