はじめに

僕は実務で、WordPressのサイト運用や簡単なWebアプリの制作に関わっています。大抵の案件はディレクター担当なので、自分で実装する機会はほとんどありませんが、エンジニアとやり取りするうえでも、フロントエンドで使われる基本的な言語は知っておきたい。まずはコードを見て、「大体こんなことをしていそう」という程度の理解力を身につけ、必要な時はAIを使いながら自分でも実装できるレベルにはなっておきたいと思い、改めてJavaScriptを学んでみることにしました。

今回は、2012年に技術評論社から発行された『ノンプログラマのためのJavaScriptはじめの一歩』を参考に、JavaScriptの基本を整理していきます。内容が多いので前後編に分け、後編ではDOMを使った要素の変更や、クリックなどのイベントに応じた処理をまとめます。

前編を読む：https://www.noronoro.blog/post/blog-00108

Webページを扱う仕組み

windowオブジェクト

JavaScriptでWebページを操作する場合、ページやブラウザの機能を扱う入口になるのが window オブジェクトです。さまざまな情報や機能が window のプロパティとして用意されています。

代表的なものは以下の通りです。

これらは window. を省いて書かれることも多く、window.document は単に document と書けます。

DOM

DOMは、HTMLをJavaScriptから扱える形で表す仕組みです。HTMLの文章やボタンをJavaScriptから指定して、内容を変更できます。詳しい内容については、以前の記事でもまとめているので、気になるようであればそちらをご確認ください。

あわせて読みたい！：https://www.noronoro.blog/post/blog-00001

要素の取得

HTMLの要素を取得する方法はいくつかあります。次の例では、同じ文章を2つの方法で取得しています。

<p id="message">この要素を取得します</p>

<script>
  const message = document.getElementById("message");
  const sameMessage = document.querySelector("#message");
</script>

getElementById() はその名の通り、ID名から要素を取得します。他にもタグ名で要素を取得する getElementsByTagName() や、クラス名で取得する getElementsByClassName() があります。

一方、querySelector() はCSSのセレクターを使い、最初に一致した1つの要素を取得します。CSSのセレクターに一致する要素をすべて取得したい場合は、querySelectorAll() を使います。

要素の操作

取得した要素のHTMLを含む内容を変えるには innerHTML、文字を変えるには textContentを使います。

<div id="content">ここが変わります</div>
<p id="message">ここも変わります</p>

<script>
  const content = document.querySelector("#content");
  const message = document.querySelector("#message");

  content.innerHTML = "<strong>書き換えました</strong>";
  message.textContent = "<strong>書き換えました</strong>";
</script>

innerHTML は文字列に含まれるタグをHTMLとして扱うため、この例では1つ目の文章が太字で表示されます。一方、textContent はタグをHTMLとして解釈せず、そのまま文字として表示します。

次は、要素の作成・追加・削除の例です。

<div id="notices">
  <p id="old-notice">古いお知らせ</p>
</div>

<script>
  const notices = document.querySelector("#notices");
  const oldNotice = document.querySelector("#old-notice");
  const newNotice = document.createElement("p");

  newNotice.append("新しいお知らせ");
  notices.append(newNotice);
  oldNotice.remove();
</script>

createElement() で新しい要素を作り、append() で要素を追加。remove() で要素を削除します。

イベントの操作

クリックや文字の入力など、Webページ上で起こる出来事を「イベント」と呼びます。addEventListener() を使うと、指定イベントをトリガーにして処理を実行できます。

代表的なイベントタイプは以下の通りです。

以下のコードは、ボタンをクリックすると文章を書き換える例です。

<p id="message">ここが変わります</p>
<button id="button" type="button">クリック</button>

<script>
  const message = document.querySelector("#message");
  const button = document.querySelector("#button");

  button.addEventListener("click", function () {
    message.textContent = "クリックされました";
  });
</script>

button.addEventListener("click"...) でボタンがクリックされたときの処理を登録しています。クリックすると、関数の中に書いた処理が実行され、文章が「クリックされました」に変わります。

jQuery

jQueryは、JavaScriptのコードを簡潔に書けるライブラリです。現在は標準のJavaScriptでも同じような操作ができますが、既存のWebサイトではjQueryを使ったコードも見かけます。

const message = document.querySelector("#message");
const button = document.querySelector("#button");

button.addEventListener("click", function () {
  message.textContent = "クリックされました";
});

標準のJavaScriptで書いてある先ほどの「ボタンをクリックしたら文章を変える」処理を、jQueryで書くと次のようになります。

$("#button").on("click", function () {
  $("#message").text("クリックされました");
});

このように、$(セレクタ).メソッド() という形が基本です。このコードを動かすには、あらかじめページでjQueryを読み込む必要があります。CDNから読み込むか、ダウンロードしたファイルをサイト内に配置して読み込みます。

さいごに

前後編を通して、JavaScriptの基本的な書き方や、Webページを操作する流れはつかめました。ただ、メソッドやライブラリ、フレームワークなど、まだ分からないことも数多く存在することを痛感しました。改めて、これらを使いこなしているエンジニアへの尊敬が深まった気がします。

前編でも書いた通り、あとは実務でコードを読み書きしながら、少しずつ慣れていきたいと思います。

参考サイト

• 外村和仁『ノンプログラマのためのJavaScriptはじめの一歩』　技術評論社, 2012年