online class text for web and video

javascriptカテゴリーの共通アイキャッチ画像

JavaScriptと jQuery基礎

JavaScriptとは

JavaScriptはWebページでユーザーがボタンをクリックしたときに内容が変わったり、フォームに入力した情報をリアルタイムでチェックしたり、ページ内でアニメーションやエフェクトを追加したりする機能を追加できるプログラミング言語です。
Webページの「骨組みを作るのがHTML」、「色などの見た目を作るのがCSS」、「動きや操作を掌るのがJavaScript」です。

近年ではCSSで画面幅にあわせて見た目を変更(レスポンシブコーディング)したり、アニメーションをつけることも可能になりましたが、HTMLやCSSは一度ブラウザーに読み込まれたら、最初にかれたコードから変化することはありません。JavaScriptはHTMLやCSSをリアルタイムで書き換えたり、ユーザーの操作にあわせて動きや機能を加える事ができます。JavaScriptを使用すればHTMLやCSSだけでは難しい高度な表現が可能になるのでぜひマスターしてください。

JavaScriptでできること

DOM操作HTML要素の追加、削除、属性の変更、スタイルの変更など、HTML要素の状態を変更する処理を行うことができます。
イベント処理クリックやマウスオーバーなどのイベントを処理し、それに応じた動作を行います。
CanvasWebページ上にグラフィックを描画するための要素です。訪問者によって異なる図を表示させたい場合や、ボタンを押すなどのアクションを通して異なる図を表示させたい場合などに使用されます。
AjaxWeb ページを更新せずにサーバーとの通信を可能にする一連の技術です。
身近なものでは、Webメールでメールを受信すると、ページの更新をしなくても新着メールが表示されたり、ECサイトでショッピングカートに商品を追加すると　ページの更新をしなくてもカート内の商品数が加算表示されるなどがあります。
JSONJavaScript Object Notationの略で、JavaScriptにおけるオブジェクトの書き方を参考に作られたデータの記述フォーマットです。Web開発、データ交換、設定ファイルなど、さまざまな場面で利用されているシンプルで軽量、人間が読み書きしやすいという特徴を持ちます。
主なJavaScript基本機能

■DOM操作

DOM操作の具体例

●テキストの書き換え

CSSの擬似要素（::before ::after）でテキストを追加する事はできますが、HTMLに入力済みのテキストを変更する事はできません。JavaScriptを使用すれば、HTMLの内容を動的に変更することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>テキスト変更の例</title>
</head>
<body>

<p id="example-text">元のテキスト</p>

<script>
  // JavaScriptでテキストを変更
  document.getElementById('example-text').textContent = '新しいテキスト';
</script>

</body>
</html>
●色の変更

CSSで指定する文字色や背景色などもJavaScriptで変更できます。例えば暗い配色を基調としたダークモードに切り替えたいときなどに利用できます。

■DOM操作＋イベント処理

●スクロールすると要素を表示する

CSSでもアニメーションを加えて動きのあるWebサイトを作成できます。ただCSSでは、CSSファイルを読み込んだ時点でアニメーションの内容もタイミングも決められます。JavaScriptではユーザーが行う「クリック」や「スクロール」などのアクションにあわせて動きを決められます。Webサイトをスクロールしていくと、横や下から画像やテキストが表示される。これはJavaScriptを使ってスクロールにあわせて動きを指定しています。

JavaScriptの記述ルール

■記述場所

<head>内、<body>内のどちらにも記述可能ですが、ページのコンテンツの読み込み前に JavaScript が実行されてしまう可能性があり、特に DOM 操作を行う場合（例えば、document.getElementById や document.querySelector など）に問題が発生します。また、JavaScript の読み込みが終わるまでページのコンテンツ（body内）の読み込みが始まらないのでユーザービリティ的にもあまり好ましくありません。ゆえに、<body> の 閉じタグ直前（</body> の直前）に記述する事が推奨されています。
どうしても<head>内に記述したい場合はdefer属性などを追加してスクリプトが読み込まれるタイミングをHTMLの読み込み後に変更すると問題が起こりにくくなります。

<head>
<script src="js/script.js" defer></script>
</head>

■scriptタグ

JavaScript を直接記述する場合は、<script></script> タグ内にコードを書きます。

 <script> alert('Hello, World!'); </script>

外部 JavaScript ファイルを読み込む場合は、<script src="ファイルパス"></script> を使用します。

<script src="js/script.js"></script>
  • <head>内に記述する場合、ページの表示に遅延が生じる可能性があり、特に DOM 操作を行う場合には注意が必要です。
  • <body>内の閉じタグ直前に記述するのが一般的で、HTML の読み込み後にJavaScriptを実行できるため、問題が起きにくくなります。
  • <script> タグ内で直接記述するか、src属性を使って外部ファイルを読み込みます。

■JavaScriptの基本文法

■オブジェクト

オブジェクトは英語で「物」という意味です。これから動作させる対象となる物を示します。このサンプルでは「window」としているので、ユーザーが見ているブラウザーのウィンドウそのものを意味します。
なお、windowオブジェクトに限り省略が可能なので、以下の記述で同様に動作します。

alert("注意！このページを離れるとデータが失われます。");
●主なグローバルオブジェクト
オブジェクト概要
windowwindow はブラウザのウィンドウまたはタブ全体を表す特別なオブジェクトです。このオブジェクトを使うと、ブラウザに関するさまざまな操作ができます。たとえば、ウィンドウのサイズを変更したり、ページをリロードしたりすることができます。
主な特徴と用途
グローバル変数や関数の管理：JavaScriptでは、グローバル（どこからでもアクセスできる）変数や関数があります。これらの変数や関数は、すべて window オブジェクトの一部として管理されています。
documentdocument はHTML ドキュメントを表すオブジェクトで、DOM（Document Object Model）を通じてウェブページの構造や内容を操作するために使用されます。
主な特徴と用途
DOM操作：HTML要素へのアクセスや変更、要素の追加・削除、イベントの管理などが可能です。
要素の取得：getElementById(), getElementsByClassName(), querySelector() などを使用してページ内の要素を取得します。
history historyはブラウザの履歴（ユーザーが遷移したページの履歴）を管理するためのオブジェクトです。履歴を操作して、ページの移動や戻る・進む操作を行うことができます。
主な特徴と用途
履歴操作：back(), forward(), go() メソッドを使って、履歴の移動や履歴にアクセスできます。
履歴の状態管理：pushState(), replaceState() メソッドを使用して、ブラウザの履歴に新しい状態を追加することができます。
locationlocation は現在のページの URL やページ遷移に関する情報を提供するオブジェクトです。ページの URL を取得・変更したり、ページ遷移を行ったりできます。
主な特徴と用途
URL情報：現在の URL（href）、ホスト名（hostname）、パス（pathname）などを取得できます。
ページ遷移：href プロパティや assign(), replace() メソッドを使ってページ遷移を行います。
consoleconsoleは主にデバッグ（バグを探して修正する作業）に使われるオブジェクトです。プログラムの状態を確認したり、プログラムの動作（エラーメッセージなど）をコンソールに表示するために使用します。
主な特徴と用途
console.log()：一番よく使われるメソッドで、メッセージや変数の値をコンソールに出力します。プログラムの動作を確認したり、デバッグのために使います。
navigatornavigator は、ユーザーのブラウザに関する情報を提供するオブジェクトです。ユーザーのブラウザ環境や設定、デバイスの情報などを取得できます。
主な特徴と用途
ブラウザ情報：userAgent（ユーザーエージェント文字列）を使用して、ブラウザの種類やバージョンを取得できます。
言語設定：language を使って、ユーザーのブラウザの言語設定を確認できます。
screenscreenはユーザーの画面に関する情報を提供します。画面の解像度や色深度、表示領域などを取得できます。
主な特徴と用途
画面サイズ：width, height などを使って、ユーザーのスクリーンの幅や高さを取得します。
画面解像度：availWidth, availHeight などを使って、ブラウザウィンドウが利用できる画面領域を取得します。

■メソッド

メソッドは英語で「方法」や「やり方」という意味ですが、プログラミングでは「動作」や「命令」を指します。
簡単に言うと、メソッドは特定の動作を実行するための命令のようなものです。例えば、alert() というメソッドがあります。英語で「alert」は「警報」という意味ですが、JavaScriptでは「警告のダイアログを表示する」という動作をします。これを使うと、ブラウザにポップアップメッセージを表示できます。

●主なwindowメソッド
メソッド概要
window.alert()警告ダイアログを表示
window.confirm()確認ダイアログを表示
window.open()新しいウィンドウやタブを開く
window.close()現在のウィンドウを閉じる
window.scrollTo()ページを指定位置にスクロール

■パラメータ

alert() メソッドを使うと、警告ダイアログが表示されます。しかし、alert() を使っただけでは、ダイアログに何を表示するのかは決まりません。そこで、alert() のカッコ内に、表示したいメッセージをパラメーター（引数）として指定します。

パラメータとは、メソッドに渡す情報のことで、ここでは警告ダイアログに表示するメッセージを指します。このパラメーターを使うことで、ダイアログに指定したメッセージが表示されるようになります。また、パラメーターとしてテキストを指定する場合、そのテキストは引用符（「”」または「’」）で囲む必要があります。
これは、テキストであることをJavaScriptに伝えるためです。

jQueryとは

jQueryは、Webページの動きや操作を簡単に追加できるJavaScriptのライブラリです。JavaScriptを使って同じことを実現しようとすると、コードが長くなったり、複雑になったりすることがありますが、jQueryを使うことで、少ないコードで複雑な動作を簡単に実現できます。jQueryはJavaScriptの機能をシンプルに、直感的に使えるようにしたツールです。Webページの「骨組みを作るのがHTML」、「色などの見た目を作るのがCSS」、「動きや操作を掌るのがJavaScript」、そして「JavaScriptを簡単に使えるようにするのがjQuery」です。

ライブラリ

jQueryは、2006年にJohn Resigによって開発されたJavaScriptライブラリです。
ライブラリは便利な道具（コード）の集まりです。
プログラムを書くとき、毎回同じような処理をすることがよくあります。例えば、「ボタンをクリックしたときに動作を追加する」や「ウェブページの一部をアニメーションさせる」などのよく使う処理をあらかじめ準備しておいてくれるので、短いコードで簡単に実装できます。
また、jQueryはCSSの記述に近い記述方法を採用しているため、CSSを理解しているフロントエンドのエンジニアが比較的簡単に習得できるように設計されています。

JavaScriptとjQueryのコード比較

ボタンをクリックするとテキストが画面に表示されるコードで比較します。

■JavaScript

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS vs jQuery</title>
</head>
<body>
  <button id="showText">Click Me</button>
  <div id="text" style="display:none;">Hello, World!</div>

  <script>
    // ボタンのクリックイベントを設定
    document.getElementById('showText').addEventListener('click', function() {
      // #textの表示/非表示を切り替える
      var text = document.getElementById('text');
      if (text.style.display === 'none') {
        text.style.display = 'block';
      } else {
        text.style.display = 'none';
      }
    });
  </script>
</body>
</html>

このコード全体は、次のように動きます

  • getElementById で要素を取得し、addEventListener でクリックイベントを設定
  • if (text.style.display === ‘none’) でtext 要素が表示されているかどうかを確認
  • もし非表示だったら、text.style.display = ‘block’;で表示
  • もし表示されていたらtext.style.display = ‘none’;で非表示


もう少し詳細に説明すると

  1. var text = document.getElementById(‘text’);
    • HTML内にあるIDがtextの要素を選び、その要素を text という変数に保存。
  2. if (text.style.display === ‘none’) {
    • text.style.displayでtext要素の表示方法を確認。=== ‘none’はその要素が 非表示 になっていた場合（display: none の場合）という条件を確認しています。
  3. text.style.display = ‘block’;
    • display = ‘block’; はその要素をページに表示するためのスタイルです。もし要素が非表示だった場合、表示させるコードが実行されます。
  4. } else {
    • elseはそれ以外（ text.style.display が ‘none’ ではない）の場合つまり既に表示されている場合に実行。
  5. text.style.display = ‘none’;
    • その要素を非表示にするスタイルが実行されます。

■jQuery

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS vs jQuery</title>
</head>
<body>
  <button id="showText">Click Me</button>
  <div id="text" style="display:none;">Hello, World!</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    // jQueryを使ってボタンのクリックイベントを設定
    $('#showText').click(function() {
      // #textの表示/非表示を切り替える
      $('#text').toggle();
    });
  </script>
</body>
</html>

$(‘#showText’) でボタンを選択し、click メソッドでイベントを設定。
$(‘#text’).toggle() を使うことで、#text の表示・非表示を替えています。toggle() は、要素が表示されていれば非表示に、非表示であれば表示に切り替えるメソッドです。

PAGE TOP