ウェブ開発の世界では、JavaScript（通称JS）は欠かせない存在です。動的なウェブページを作成し、インタラクティブ（双方向）な要素を追加するのに重要な役割を果たすプログラミング言語です。

この記事では、主にワードプレスで300件近い制作実績があり、日本最大級のクラウドソーシングサービス「ココナラ」のWEB制作ランキング１位を数十回獲得したホームページ制作会社ぞろ屋が、JavaScriptの基本的な概念と初心者に向けた使い方を詳しく説明します。

JavaScript（js）とは？

JavaScriptは、WEBサイトやアプリケーションを動的に制御するためのプログラミング言語です。主に次のような役割を果たします。

インタラクティブな動作

JavaScriptは、ユーザーがWEBサイト上でボタンをクリックしたり、フォームを入力したりすると、その動作に反応してコンテンツを変更することができます。ポップアップや問い合わせフォームをイメージすると良いでしょう。

例を使って説明しますね。ユーザーがボタンをクリックするとメッセージが表示されるシンプルなインタラクションを考えてみましょう。

<!DOCTYPE html>
<html>
<head>
  <title>インタラクティブな動作の例</title>
</head>
<body>
  <button id="myButton">クリックしてください</button>
  <p id="message2"></p>

  <script>
// ボタンがクリックされたときの動作を設定
document.getElementById("myButton").addEventListener("click", function() {
// メッセージを表示
document.getElementById("message").innerHTML = "ボタンがクリックされました！";
});
  </script>
</body>
</html>

このコードでは、以下のような動作が実現されています。

ページには「クリックしてください」と書かれたボタンが表示されています。
ユーザーがボタンをクリックすると、ボタンに設定されたイベントリスナーが発火します。
イベントリスナー内のコードが実行され、メッセージが段落要素(<p>)に表示されます。

この例では、ボタンをクリックするとメッセージが表示されるというインタラクティブな動作が実現されています。実際に表示すると下記のような感じです。

WEBサイトへの表示結果

インタラクティブな動作の例

JavaScriptを使うことで、ユーザーが何かをクリックしたり入力したりしたときに、それに対してウェブページが反応することができます。これが、なんとなくわかりづらい、インタラクティブな動作。

このような動的な動作を通じて、ユーザーとのコミュニケーションを活発にすることができるのが、jsの魅力。

データ操作と処理

JavaScriptは、ユーザーからのデータを受け取り、それを処理して計算したり、表示形式を変更したりすることができます。

例えば、入力された数値を合計する計算機能を実装することができます。

DOM操作

DOMは、WEBサイトの要素やコンテンツを階層的なオブジェクトの集合として表現するモデルです。これを操作することで、JavaScriptを使ってウェブページの要素を追加、変更、削除することができます。DOM操作を通じて、ユーザーとの対話的な体験や動的なコンテンツの生成が可能になります。

といっても分かりづらいですよね(笑)　

例を使って説明しましょう。WEBサイトに以下のようなHTMLコードがあるとします。

<html>
<head>
  <title>DOM操作の例</title>
</head>
<body>
  <h1 id="pageTitle">初めてのDOM操作</h1>
  <p id="message">こんにちは、DOM操作の世界へ！</p>
  <button id="changeButton">メッセージを変更</button>
</body>
</html>

このHTMLコードは、ページに見出し、段落、ボタンを含むシンプルな構造を持っています。これに対して、JavaScriptを使ってDOM操作を行ってみましょう。

// ボタンをクリックしたときの動作を設定
document.getElementById("changeButton").addEventListener("click", function() {

// メッセージの内容を変更
document.getElementById("message").innerHTML = "DOM操作が楽しい！";
  
// 見出しのスタイルを変更
document.getElementById("pageTitle").style.color = "blue";
});

上記のJavaScriptコードでは、次のことが行われています。

document.getElementById("changeButton").addEventListener("click", function() { ... });: ボタンがクリックされたときの動作を設定しています。クリックされると、関数内のコードが実行されます。
document.getElementById("message").innerHTML = "DOM操作が楽しい！";: メッセージのコンテンツを変更しています。innerHTMLプロパティを使用して、要素の中身を指定したテキストに変更しています。
document.getElementById("pageTitle").style.color = "blue";: 見出しのスタイルを変更しています。styleプロパティを使ってCSSプロパティにアクセスし、見出しの色を青に変更しています。

これにより、ボタンをクリックするとメッセージが変更され、見出しの色が青に変わるという動的な変更が行われます。

WEBサイトへの表示結果

DOM操作の例

初めてのDOM操作

こんにちは、DOM操作の世界へ！

これがDOM操作の一例であり、JavaScriptを使ってWEBサイトの要素をプログラム的に制御することができる方法です。

初めてのJavaScriptコード

以下に、簡単なJavaScriptコードのサンプルを作りました。ほぼインタラクティブな動作のところで解説した内容と同じですが、復習がてら解説しますね。

このコードは、ボタンをクリックするとメッセージが表示される事例です。

<!DOCTYPE html>
<html>
<head>
  <title>JavaScriptの例</title>
</head>
<body>

<button id="myButton">クリックしてください</button>
<p id="message2"></p>

<script>
document.getElementById("myButton").addEventListener("click", function() {
document.getElementById("message").innerHTML = "こんにちは、JavaScript！";
});
</script>

</body>
</html>

ボタンをクリックすると”こんにちは、JavaScript！”というメッセージが表示されるシンプルな動作を持つWEBサイトを作成します。JavaScriptを使用して、ユーザーとの対話的な要素をウェブページに追加する基本的な手法を示しました。

各構文の解説をすると以下のような感じになります。

<!DOCTYPE html>: HTML文書のバージョンと種類を定義します。
<html>: HTML文書のルート要素であり、全体のコンテンツを囲みます。
<head>: ドキュメントのメタデータやリンク、スクリプトなどの情報を含むセクションです。
<title>JavaScriptの例</title>: ブラウザのタブやウィンドウのタイトルバーに表示されるページのタイトルを設定します。
<body>: 実際のコンテンツを含むセクションです。ユーザーが表示する内容がここに配置されます。
<button id="myButton">クリックしてください</button>: ページ内にボタンを表示します。このボタンには”myButton”というIDが付与されています。
<p id="message"></p>: 空の段落（パラグラフ）要素を表示します。ここにJavaScriptによって生成されたメッセージが表示されます。
<script>: JavaScriptコードを埋め込むための要素です。
document.getElementById("myButton").addEventListener("click", function() { ... });:
- document.getElementById("myButton"): ページ内の要素をIDを使って取得します。ここでは”myButton”というIDを持つボタン要素を取得しています。
- .addEventListener("click", function() { ... }): ボタンがクリックされたときに実行されるイベントリスナーを追加します。クリックイベントが発生した際に、指定された関数が呼び出されます。
- function() { ... }: イベントが発生したときに実行される無名関数（匿名関数）を定義します。
document.getElementById("message").innerHTML = "こんにちは、JavaScript！";:
- document.getElementById("message"): ページ内の要素をIDを使って取得します。ここでは”message”というIDを持つ段落要素を取得しています。
- .innerHTML: 要素の内部のHTMLコンテンツにアクセスするプロパティです。ここではこのプロパティに文字列を代入して、要素の中にメッセージを表示します。
</script>: JavaScriptコードの終了を示します。

実際の表示はこんな感じ。

WEBサイトへの表示結果

JavaScriptの例

JavaScriptとCSSの違い

ちなみに、よく聞かれることなのでCSSとの違いを解説しますね。

CSS（Cascading Style Sheets）は、WEBサイトやアプリケーションのスタイルとレイアウトを設定するための言語です。

簡単に言えば、JavaScriptはWEBサイトの動的な振る舞いとロジックを管理するための言語であり、CSSはWEBサイトの見た目やスタイルを管理するための言語です。JavaScriptはユーザーとの対話やデータ処理に、CSSはデザインやレイアウトに焦点を当てています。

CSSについて簡単に理解したい方は、下記を参照してください。

まとめ

JavaScriptは、ウェブ開発において非常に重要な役割を果たすプログラミング言語です。動的なコンテンツの追加や操作、データの送受信など、多くのWEBサイトやアプリケーションで利用されています。

この初心者向けガイドを通じて、JavaScriptの基本的な理解を深め、実際にコードを書いてみる一歩を踏み出してみましょう。

「良いな」と思ったらシェアしてください！損はさせません

URLをコピーしました！

URLをコピーしました！

JavaScript (JS) とは？初心者向け完全ガイド

JavaScript（js）とは？

インタラクティブな動作

データ操作と処理

DOM操作

初めてのDOM操作

初めてのJavaScriptコード

JavaScriptとCSSの違い

まとめ