HP制作のためのJavaScript入門　コラム

2024年10月12日 最終更新日時 : 2024年10月12日 睦松田

目次

サーバー上でも動作するJavaScript

サーバー上でも動作するJavaScript

node.jsは、サーバー上で動作するJavaScriptの代表です。PHPなどのプログラム言語を使ってその場その場で内容が違うページを作り出す時、画面の見た目を変更したり動きを付けたりする場合に大変重宝されています。

サーバー上でも動作するJavaScript

サーバー上でも動作するJavaScript

node.jsは、サーバー上で動作するJavaScriptの代表です。PHPなどのプログラム言語を使ってその場その場で内容が違うページを作り出す時、画面の見た目を変更したり動きを付けたりする場合に大変重宝されています。

他にもあるVisual Studio Codeの拡張機能

  1. Path Intellisense
    • ファイルのパス補完を支援してくれる拡張機能です。import文やrequire文などのパス入力時に補完候補を表示してくれるため、タイピングミスを防ぎ、効率的にコーディングできます。
    • インストール方法：
      1. 拡張機能タブを開きます。
      2. 検索バーに「Path Intellisense」と入力し、インストールボタンをクリックします。
  2. Debugger for Chrome
    • VS Code上で直接デバッグを行うための拡張機能です。Chromeブラウザで実行されるJavaScriptコードをデバッグでき、ブレークポイントの設定や変数の監視が可能です。
    • インストール方法：
      1. 拡張機能タブを開きます。
      2. 検索バーに「Debugger for Chrome」と入力し、インストールボタンをクリックします。
必要なツールの紹介
  1. ウェブブラウザ
    • JavaScriptはウェブブラウザ上で動作します。Google ChromeやEdgeなどが便利です。もうすでにお持ちかと思いますが、念のため最新バージョンを使うことをお勧めいたします。
  2. テキストエディタ
    • プログラムを書くための道具です。超高機能なメモ帳のようなものです。以下のエディタは無料で機能も充実しています。

必要なツールのインストール

Visual Studio Code
  1. Visual Studio Codeの公式サイトにアクセスし、インストーラをダウンロードします。
  2. ダウンロードが完了したら、インストーラを実行し、画面の指示に従ってインストールを完了させます。
拡張機能のインストール

VS Codeには多くの便利な拡張機能があります。以下の拡張機能をインストールすることをお勧めします。

  1. Japanese Language Pack
    • VS Codeを日本語で使うために、拡張機能「Japanese Language Pack」をインストールします。VSCodeのメニューやメッセージが日本語になり、使いやすくなります。
    • インストール方法：
      1. VS Codeの拡張機能タブを開きます（左側の四角いアイコン）。
      2. 検索バーに「Japanese Language Pack」と入力し、インストールボタンをクリックします。
      3. 拡張機能をインストールした後、VS Codeを再起動します。
      4. VS Codeが再起動すると、日本語化のオプションが表示されるので、「日本語」を選択します。
  2. Live Server
    • HTMLファイルをローカルサーバーでプレビューできます。リアルタイムで変更を確認できるため、開発がスムーズになります。
    • インストール方法：
      1. VS Codeの拡張機能タブを開きます（左側の四角いアイコン）。
      2. 検索バーに「Live Server」と入力し、インストールボタンをクリックします。
  3. ESLint
    • JavaScriptプログラムの間違いを自動でチェックしてくれます。バグの早期発見に役立ちます。
    • インストール方法：
      1. 拡張機能タブを開きます。
      2. 検索バーに「ESLint」と入力し、インストールボタンをクリックします。
  4. Prettier
    • Code Formatter Prettierは、コードの整形を自動で行ってくれます。指定されたルールに基づいて、インデント（後述）や空白の配置を統一し、プログラムを読みやすく整形できます。
    • インストール方法：
      1. 拡張機能タブを開きます。
      2. 検索バーに「Prettier - Code Formatter」と入力し、インストールボタンをクリックします。
  5. Bracket Pair Colorizer
    • 括弧のペアを色分けして表示してくれる拡張機能です。複雑なプログラムでも対応する括弧を簡単に見つけることができ、読みやすくなります。
    • インストール方法：
      1. 拡張機能タブを開きます。
      2. 検索バーに「Bracket Pair Colorizer」と入力し、インストールボタンをクリックします。
  6. Path Intellisense
    • ファイルのパス補完を支援してくれる拡張機能です。import文やrequire文などのパス入力時に補完候補を表示してくれるため、タイピングミスを防ぎ、効率的にコーディングできます。
    • インストール方法：
      1. 拡張機能タブを開きます。
      2. 検索バーに「Path Intellisense」と入力し、インストールボタンをクリックします。
  7. Debugger for Chrome
    • VS Code上で直接デバッグを行うための拡張機能です。Chromeブラウザで実行されるJavaScriptコードをデバッグでき、ブレークポイントの設定や変数の監視が可能です。
    • インストール方法：
      1. 拡張機能タブを開きます。
      2. 検索バーに「Debugger for Chrome」と入力し、インストールボタンをクリックします。
エディタの使い方

Visual Studio Code の基本操作

  1. まずはCドライブに、プログラムを入れるフォルダを作りましょう。新しいフォルダを作成し、jsworkという名前にしてください。
  2. 次に、ホームページの内容を書き込むHTMLファイルを作成します。VSCodeで[ファイル]→[フォルダを開く]を選択し、先ほど作ったC:\jsworkフォルダを開きます。画面右側のjsworkという文字の上で右クリックし、[新しいファイル]を選択します。ファイル名は、[index.html]としてください。
  3. 以下のような基本的なHTMLテンプレートを入力します。（！を入力してからエンターキーを押すことでHTMLのテンプレートが入力できます）
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript入門</title>
</head>
<body>
    <h1>JavaScript入門</h1>
    <script src="script.js"></script>
</body>
</html>
  1. index.htmlと同じフォルダにscript.jsという名前の新しいファイルを作成します。（Ctrlキーを押しながら上記「script.js」をクリックすると簡単にファイルが作成できます）
  2. script.jsに以下のような簡単なJavaScriptコードを入力します。
console.log('Hello, JavaScript!');

環境の確認

以下の手順で環境が正しく設定されていることを確認します。

  1. VS Codeでindex.htmlファイルを開き、Live Serverを使用してファイルをプレビューします。
  2. ブラウザが開き、index.htmlの内容が表示されます。
  3. 開発者ツール（F12キー）を開き、「コンソール」タブを確認します。
  4. Hello, JavaScript!というメッセージが表示されていれば、環境設定は完了です。

JSでCSSデザインを変更する

JSは、CSSで定義したHTML画面部品のスタイルを変更することができます。

ユーザーの操作や特定の条件に応じて、リアルタイムにWebページのデザインを変更できるのです。

以下、基本的な方法を紹介します。

1. styleプロパティを使う

JSで特定の画面部品のスタイルを変更する最も簡単な方法は、部品のstyleプロパティを使用することです。

＜書式＞

要素.style.CSSのプロパティ名 ＝ 値;

例: 要素の背景色を変更する

以下の例では、ボタンをクリックすると、changeColor関数が呼び出され、div要素の背景色が変更されます。(sample)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScriptでスタイルを指定する例</title>
  <style>
    .example {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      margin: 20px;
    }
  </style>
</head>
<body>
  <h1>JavaScriptでスタイルを変更する</h1>
  <div class="example" id="myDiv">このボックスの色を変更します</div>
  <button onclick="changeColor()">色を変える</button>

  <script>
    function changeColor() {
      const div = document.getElementById('myDiv');
      div.style.backgroundColor = 'lightgreen';
    }
  </script>
</body>
</html>

CSSのプロパティ名はキャメルケースになる

JSでは、変数名やプロパティ名にハイフン（-）を使用することができません。ハイフンがJSの文法上、マイナス記号として解釈されるためです。

CSSプロパティ名のようにハイフンを含む名前をJSで使用する場合、キャメルケース（camelCase）に変換する必要があります。キャメルケースとは、変数名などを付ける時のやり方の一種です。

キャメルケース（camelCase）のルール

  • 最初の単語は全て小文字で始める。
  • それ以降の単語の先頭文字を大文字にする。
  • ハイフンやスペースなどの区切り文字を使わない。

英語の【camel】にはラクダという意味があり、ラクダのコブのように見えることからこの名前があります。

例えば、font-size をキャメルケースにすると fontSize になります。
その他の例として、background-color は backgroundColor、margin-left は marginLeft となります。

2. classListプロパティを使う

CSSクラスを追加・削除することで、より柔軟にスタイルを変更する方法もあります。classListプロパティを使用します。

例: CSSクラスを追加・削除する

以下の例では、ボタンをクリックすると、toggleClass関数が呼び出され、div要素にactiveクラスが追加され、再度クリックすると削除されます。 (sample)

皆さんはトグルスイッチというものを見たことがありますか？

上記リンクを辿るとお分かりのようにトグルスイッチは、一つの操作を行うことで、2つの状態（オン/オフ）を切り替えることができるものです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScriptでクラスを切り替える例</title>
  <style>
    .example {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      margin: 20px;
    }

    .active {
      background-color: lightsalmon;
      border: 2px solid orange;
    }
  </style>
</head>
<body>
  <h1>JavaScriptでクラスを切り替える</h1>
  <div class="example" id="myDiv">このボックスの色を変更します</div>
  <button onclick="toggleClass()">クラスを切り替える</button>

  <script>
    function toggleClass() {
      const div = document.getElementById('myDiv');
      div.classList.toggle('active');
    }
  </script>
</body>
</html>

3. setAttributeメソッドを使う

setAttributeメソッドを使って、スタイルをインラインで追加する方法もあります。

例: インラインスタイルを追加する

以下の例では、ボタンをクリックすると、addInlineStyle関数が呼び出され、div要素にインラインスタイルが追加されます。 (sample)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScriptでインラインスタイルを追加する例</title>
  <style>
    .example {
      width: 200px;
      height: 200px;
      background-color: lightblue;
      margin: 20px;
    }
  </style>
</head>
<body>
  <h1>JavaScriptでインラインスタイルを追加する</h1>
  <div class="example" id="myDiv">このボックスの色を変更します</div>
  <button onclick="addInlineStyle()">インラインスタイルを追加</button>

  <script>
    function addInlineStyle() {
      const div = document.getElementById('myDiv');
      div.setAttribute('style', 'background-color: lightcoral; border: 2px solid red;');
    }
  </script>
</body>
</html>

// アラートダイアログを表示
window.alert("Hello World");

// 新しいウィンドウを開く
window.open("https://www.saycon.co.jp/touchtypeJS/");

// ウィンドウの高さを取得
let height = window.innerHeight;
window.alert(height);

例題

次のコードの空欄を埋めて、ブラウザのアラートダイアログに「Hello World」というメッセージを表示させなさい。

window._______("__________");

答え

window.alert("Hello World");

documentオブジェクト

概要:
documentオブジェクトは、windowオブジェクトのプロパティの一つであり、現在のHTMLドキュメントの内容を保持しています。

このオブジェクトは、前述の通りDOM（Document Object Model）の一部であり、HTMLドキュメントを操作するためのインターフェースを提供します。DOMは、HTMLドキュメントの構造をツリー構造として表現し、その各要素にアクセスして操作するためのAPIを提供します。

特徴:

  • HTML要素の操作: HTML要素を取得、変更、追加、削除するためのメソッドを提供します。
  • イベントの処理: ユーザーの操作（クリック、キーボード入力など）に対するイベントハンドラを設定できます。

例:

// タイトルを変更
document.title = "new title";

// 特定のIDを持つ要素を取得
const element = document.querySelector("#example");

// 新しい段落を追加
const newParagraph = document.createElement("p");
newParagraph.textContent = "new paragraph";
document.body.appendChild(newParagraph);

調べてみましょう

講師と一緒に以下のコードを実行してブラウザのディベロッパーツールのコンソールを開いてみましょう。alert()などのメソッドやdocumentなどのプロパティが見えると思います。windowはオブジェクトだということの証拠です。

さらに、documentを展開するとその中にもメソッドやプロパティが見えると思います。オブジェクトが入れ子になっている訳ですね。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript入門</title>
</head>
<body>
    <h1>JavaScript入門</h1>
    <p>これはサンプルのHTMLページです。</p>
	<script>
		console.log(window);
	</script>
</body>
</html>
見つけたプロパティやメソッド：

DOM（Document Object Model）要素を選択するためのメソッド

querySelectorとquerySelectorAllは、JavaScriptでDOM（Document Object Model）要素を選択するためのメソッドです。これらのメソッドは、CSSセレクタを使用して要素を選択します。

querySelector

querySelectorは、指定されたCSSセレクタに一致する最初の要素を返します。見つからない場合はnullを返します。(sample)

使い方の例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>querySelectorの例</title>
</head>
<body>
    <div class="example">最初のdiv</div>
    <div class="example">2番目のdiv</div>

    <script>
        // 最初のdiv.exampleを選択
        const firstDiv = document.querySelector('.example');
        console.log(firstDiv.textContent); // "最初のdiv"が出力されます
    </script>
</body>
</html>

querySelectorAll

querySelectorAllは、指定されたCSSセレクタに一致するすべての要素を返します。(sample)

返されるのはNodeListオブジェクトで、これには複数の要素が含まれます。NodeListは配列のように扱うことができますが、実際には配列ではありません。

使い方の例

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>querySelectorAllの例</title>
</head>
<body>
    <div class="example">最初のdiv</div>
    <div class="example">2番目のdiv</div>
    <div class="example">3番目のdiv</div>

    <script>
        // 全てのdiv.exampleを選択
        const allDivs = document.querySelectorAll('.example');
        allDivs.forEach((div, index) => {
            console.log(`Div ${index + 1}: ${div.textContent}`);
        });
    </script>
</body>
</html>

<比較>

querySelector()最初に一致する要素を一つだけ返す。見つからない場合はnullを返す。
querySelectorAll()一致するすべての要素をNodeListとして返す。NodeListは配列のようにループ処理が可能。

CSSの復習

CSS（Cascading Style Sheets）は、HTML要素のスタイルを定義するための言語です。皆様は基本的なCSSについてはご存知であるという前提で、CSSの使い方について復習します。

CSSの書き方

CSSは、HTMLファイル内に直接記述する方法、<style>タグ内に記述する方法、外部スタイルシートとして記述する方法の3種類があります。ここでは、外部スタイルシートを使う方法を紹介します。

  1. index.htmlファイルと同じフォルダにstyle.cssファイルを作成します。
  2. index.htmlファイルの<head>タグ内に、以下のようにリンクを追加します。（先に以下を記述してから、ファイル名をCtrlキーを押しながらクリックしてもファイルが作成できます）
<link rel="stylesheet" href="style.css">

3. style.cssファイルに以下のスタイルを追加します。それぞれのスタイルの詳細はコメントを見て下さい。 (sample)

body {
    font-family: Arial, sans-serif; /* フォントファミリーをArialとサンセリフに設定 */
    line-height: 1.6; /* 行の高さを1.6に設定 */
    margin: 0; /* ページ全体の余白をゼロに設定 */
    padding: 20px; /* ページ全体に20ピクセルの内側余白を設定 */
    background-color: #f4f4f4; /* 背景色を薄いグレーに設定 */
}

h1 {
    color: #333; /* 見出し1の文字色を濃いグレーに設定 */
}

p {
    color: #666; /* 段落の文字色を中間のグレーに設定 */
}

sanitize.cssについて

sanitize.cssは、Webサイトやアプリケーションのスタイルをブラウザ間で一貫させるためのCSSフレームワークです。最新のブラウザ標準に準拠したスタイルの標準化を提供しています。sanitize.cssを使うことで、セキュリティやアクセシビリティのベストプラクティスを取り入れることができるでしょう。

リンク先: sanitize.css (GitHub)

JavaScriptとの連携

HTMLとCSSを使って基本的なウェブページを作成したら、JavaScriptを使ってページに動的な機能を追加する方法を学びます。

JavaScriptの基本的な埋め込み方法

JavaScriptは、<script>タグを使ってHTMLファイルに埋め込むことも、外部JavaScriptファイルを使うこともできます。

外部JavaScriptファイルを複数のHTMLページで共有することで、同じスクリプトを再利用することができます。一度作成したスクリプトを複数のページで使用する場合、各ページに同じコードを記述する必要がなくなるのです。

  1. 既に作成したscript.jsファイルに、以下のようなコードを追加します。
document.addEventListener('DOMContentLoaded', function() {
    const heading = document.querySelector('h1');
    heading.textContent = 'JavaScriptで変更された見出し';
});

上書き保存（Ctrl + s）をするとページが読み込まれた後にJavaScriptが実行され、<h1>タグのテキストが「JavaScriptで変更された見出し」に変更されます。

本研修では、querySelectorやquerySelectorAllを使います

インターネットで検索するとgetElementByIdとgetElementsByClassNameなどの記述を目にすることがあると思います。これらは関数と呼ばれるものです。しかし、querySelectorやquerySelectorAllの方がより柔軟で、多くの場合便利です。本テキストでは、これらを推奨しています。ただし、特定の要素をIDで取得する場合など、シンプルな操作ではgetElementByIdがパフォーマンスの面で優れていることがあります。

イベントハンドラ

イベントハンドラとは、ユーザーの操作やシステムの動作（イベント）が発生した際に実行される処理を制御する（ハンドラ）仕組みのことです。

HTML内で設定する場合、属性として記述され、特定のイベントに対して関数やコードを割り当てます。

例えば、onclick属性は、要素がクリックされたときに実行される関数を指定します。イベントハンドラは、ユーザーインターフェースを動的にし、インタラクティブな操作を実現するために不可欠です。

主なイベントには、クリック、キーボード入力、フォーム送信、ページ読み込みなどがあります。ユーザーのアクションに応じた反応をプログラムできます。

イベントハンドラ属性の中で、特に頻繁に使用される主要なものを以下に紹介します。

マウスイベント

onclick：要素がクリックされたときに実行されます。

<アウトプット例>

<ソースコード>

<button onclick="alert('ボタンがクリックされました')">クリック</button>

onmouseover：マウスが要素の上に乗ったときに実行されます。

<アウトプット例>

マウスオーバーで色が変わります

<ソースコード>

<div onmouseover="this.style.backgroundColor='yellow'" onmouseout="this.style.backgroundColor=''">
    マウスオーバーで色が変わります
</div>
キーボードイベント

onkeydown：キーが押されたときに実行されます。

<input type="text" onkeydown="console.log('キーが押されました')">

onkeyup：キーが放されたときに実行されます。

<input type="text" onkeyup="console.log('キーが放されました')">
フォームイベント
  • onsubmit：フォームが送信されたときに実行されます。

<アウトプット例>

<ソースコード>

<form onsubmit="alert('フォームが送信されました'); return false;"> <input type="submit" value="送信"> </form>
  • onchange：入力フィールドの内容が変わったときに実行されます。

<アウトプット例>

<ソースコード>

<input type="text" onchange="console.log('入力が変更されました')">
ウィンドウイベント
  • onload：ページが読み込まれたときに実行されます。
<body onload="alert('ページが読み込まれました')">
  • onresize：ウィンドウのサイズが変更されたときに実行されます。
<body onresize="console.log('ウィンドウのサイズが変更されました')">

属性とは？

HTMLの属性（attribute）は、HTML要素に追加情報を提供するために使用されるものです。属性は、要素の開始タグ内に記述され、属性名と属性値のペアで構成されます。属性を使うことで、要素にさまざまな設定やプロパティを適用することができます。属性値はダブルクオーテーションで囲みます。ここではJavaScriptとなじみが深いid属性とclass属性を紹介します。

基本構文

<要素名 属性名="属性値">コンテンツ</要素名>

id属性

  • id属性は、要素に一意の識別子を指定します。
<div id="header">これはヘッダーです</div>

class属性

  • class属性は、要素にクラス名を指定します。複数の要素に同じクラスを適用できます。
<p class="text-primary">これは段落です</p>







JavaScriptの基礎





JavaScriptとは





JavaScriptは、ウェブページに動的な動作を追加するためのプログラミング言語です。クライアントサイドで実行されるため、ユーザーのブラウザ上で動作します。この章では、JavaScriptの基本的な構文と概念を学びます。





変数





変数は、データを保存した場所にニックネームを付けたものです。JavaScriptでは、let、const、varの3種類のキーワードを使って変数を宣言します。





変数の宣言と代入





let message = 'こんにちは、JavaScript!';
console.log(message);





    

  • let：ブロックスコープの変数を宣言します。変数はその名の通り値を書き換えることができます。
    • 




  • const：定数を宣言します。定数はその名の通り一度値を設定すると変更できません。
    • 




  • var：関数スコープの変数を宣言します。古い書き方ですが、まだ使われることがあります。
    • 






const pi = 3.14;
let name = '松田';
console.log(pi);
console.log(name);










ローカル変数とグローバル変数


JavaScriptにはローカル変数とグローバル変数があります。これらは変数のスコープ（有効範囲）によって区別されます。





    

  • グローバル変数: 関数の外で宣言され、スクリプト全体で有効。複数のファイルで競合することもある。
    • 




  • ローカル変数: 関数の内で宣言され、その関数内でのみ有効。
    • 






例





以下は、グローバル変数とローカル変数の具体例です。





let globalVar = "I am a global variable"; // グローバル変数

function exampleFunction() {
    let localVar = "I am a local variable"; // ローカル変数

    console.log(globalVar); // グローバル変数にアクセス可能
    console.log(localVar);  // ローカル変数にアクセス可能
}

exampleFunction();

console.log(globalVar); // グローバル変数にアクセス可能
console.log(localVar); // ReferenceError: ローカル変数にアクセス不可能





＜実行結果＞





I am a global variable
I am a local variable
I am a global variable
(中略)
console.log(localVar); // ReferenceError: ローカル変数にアクセス不可能







varは使わない


JavaScriptのvarキーワードは、古い変数宣言の方法として広く使われていましたが、現在は推奨されていません。





varで宣言された変数は、関数スコープを持ち、ブロックスコープを無視します。これは、forループやifブロック内で宣言された変数が、ブロック外からもアクセスできることを意味します。





また、varは同じ名前の変数を再宣言できるため、予期しないバグの原因となることがあります。





このような理由から、最新のJavaScriptコードでは、ブロックスコープを持ち、再宣言を防ぐletや、定数宣言のためのconstの使用が推奨されています。varの使用は避け、より安全で予測可能なコードを書くためにletやconstを使うべきです。












データ型





JavaScriptにはいくつかのデータ型があります。主なデータ型は以下の通りです。





    

  • 数値（Number）
    • 




  • 文字列（String）
    • 




  • 論理値（Boolean）
    • 




  • 配列（Array）
    • 




  • オブジェクト（Object）
    • 




  • nullとundefined
    • 






数値と文字列





let age = 30; // 数値
let greeting = 'こんにちは'; // 文字列

console.log(age);
console.log(greeting);










文字列はシングルクォーテーションで囲むことをまず覚える


JavaScriptでは、文字列リテラルをシングルクオート（' '）、ダブルクォート（" "）、またはバッククォート（）のいずれでも囲むことができます。それぞれに特徴があり、使い分けが推奨されます。





    

  1. シングルクオート（' '）:
    2. 






    

  • シンプルな文字列に使用されることが多い。
    • 




  • HTMLやJSONの属性値にシングルクオートが含まれることが少ないため、エスケープの必要性が減る。
    • 






const singleQuoteString = 'Hello, World!';





  





    

  1. ダブルクォート（" "）:
    2. 






    

  • シングルクオート同様にシンプルな文字列に使用される。
    • 




  • シングルクォートを含む文字列をエスケープなしで使いたいときに便利。
    • 






const doubleQuoteString = "Hello, 'World!'";





   





    

  1. バッククォート（）:
    2. 






    

  • テンプレートリテラルとして使用される。
    • 




  • 文字列中に変数や式を埋め込むことができる。
    • 











 const doubleQuoteString = "Hello, 'World!'";
 console.log(doubleQuoteString);










    

  • 複数行の文字列も容易に扱える。
    • 






  const multilineString = `
  これは複数行にわたる文字列です。
  バッククォートを使用することで、
  複数行を簡単に記述できます。
`;

console.log(multilineString);














論理値





let isStudent = true;
let isActive = false;

console.log(isStudent);
console.log





演算子





JavaScriptの演算子を以下の表にまとめました。





演算子説明例結果
+足し算、文字列の連結、数値に変換する単項プラス演算子5 + 3
'Hello ' + 'World'
+'123'		8
'Hello World'
123
-引き算、数値に変換する単項マイナス演算子5 - 3
-'123'		2
-123
*掛け算5 * 315
/割り算6 / 32
%剰余（余り）5 % 32
++インクリメント（値を1増やす）let a = 5; a++a は 6 になる
--デクリメント（値を1減らす）let a = 5; a--a は 4 になる
=代入let a = 5a は 5 になる
+=加算代入let a = 5; a += 3a は 8 になる
-=減算代入let a = 5; a -= 3a は 2 になる
*=乗算代入let a = 5; a *= 3a は 15 になる
/=除算代入let a = 6; a /= 3a は 2 になる
==等価（型を比較しない）5 == '5'true
===厳密等価（型も比較する）5 === '5'false
!=不等価（型を比較しない）5 != '5'false
!==厳密不等価（型も比較する）5 !== '5'true
<より小さい5 < 3false
<=以下5 <= 5true
>より大きい5 > 3true
>=以上5 >= 5true
&&論理積（AND）true && falsefalse
||論理和（OR）true || falsetrue
!否定（NOT）!truefalse
? :三項演算子（条件式）true ? 'Yes' : 'No''Yes'










関数





関数は、一連の処理をまとめて部品化し、特定のタスクを実行するためのものです。関数を使うことで、コードの再利用性を高めることができます。





関数の基本構造





function 関数名(引数1, 引数2, ...) {
  // 関数が実行されたときの命令
  return 戻り値; // 任意。戻り値がない場合は省略可
}





関数の定義と呼び出しの例





    

  • 名前を受け取り挨拶を返す関数
    • 






function greet(name) {
    return 'こんにちは、' + name + '!';
}

// 関数の呼び出し
let message = greet('松田');
console.log(message);





    

  • 二つの数値を加算する関数
    • 






// 二つの数値を加算する関数
function add(a, b) {
  return a + b;
}

// 関数の呼び出し
let result = add(3, 5);
console.log(result); // 出力: 8











関数とメソッドの違い


JavaScriptの関数とメソッドはよく似ていますが、厳密には違います。





JavaScriptの関数とメソッドには共通点もありますが、使い方や位置付けにいくつかの重要な違いがあります。





この研修では特に呼び出し方の違いについて理解して下さい。なぜなら、オブジェクトのメソッドを呼び出すことは想定していますが、メソッドを作ることは想定していないからです。（対して関数は作ったり呼び出したりします。）





主な違い





    

  1. 定義場所:

      

    • 関数: 独立して定義され、どのオブジェクトにも属しません。
      • 




    • メソッド: オブジェクトのプロパティとして定義され、そのオブジェクトに属します。
      • 

    

    2. 




  2. 呼び出し方法:

      

    • 関数: 直接呼び出されます。
      • 




    • メソッド: 所属するオブジェクトを通して呼び出されます。
      • 

    

    3. 






関数呼び出しの例





functionName();





メソッド呼び出しの例





objectName.methodName();





ポイントはオブジェクト名が付くか付かないかの違いです。







条件分岐





条件分岐を使うことで、特定の条件に応じた処理を実行することができます。if文やswitch文が一般的です。





if文





let age = 20;

if (age >= 18) {
    console.log('成人です。');
} else {
    console.log('未成年です。');
}





    

  • if (条件) {...} else {...}：条件が真であれば、ifブロック内のコードが実行されます。そうでなければ、elseブロック内のコードが実行されます。
    • 






switch文





let day = 3;
let dayName;

switch (day) {
    case 1:
        dayName = '月曜日';
        break;
    case 2:
        dayName = '火曜日';
        break;
    case 3:
        dayName = '水曜日';
        break;
    default:
        dayName = '不明';
}

console.log(dayName);





    

  • switch (変数) {...}：変数の値に応じて異なるケースを実行します。
    • 






繰り返し





繰り返し処理を使うことで、同じ操作を複数回実行することができます。for文やwhile文が一般的です。





for文





for (let i = 0; i < 5; i++) {
    console.log('繰り返し回数: ' + i);
}





    

  • for (初期化; 条件; 更新) {...}：初期化ステートメントが1回実行され、条件が真である間、更新ステートメントが実行されるたびにループ内のコードが繰り返されます。
    • 






while文





let i = 0;

while (i < 5) {
    console.log('繰り返し回数: ' + i);
    i++;
}





    

  • while (条件) {...}：条件が真である間、ループ内のコードが繰り返されます。
    • 






配列





配列は、複数のデータを一つの変数に格納するためのデータ構造です。配列の各要素には、インデックスを使ってアクセスできます。





インデックスは1からではなく、0から始まる点は初学者が間違いやすいところです。





配列の作成とアクセス





let fruits = ['りんご', 'バナナ', 'オレンジ'];

console.log(fruits[0]); // りんご
console.log(fruits[1]); // バナナ
console.log(fruits[2]); // オレンジ





配列の操作





fruits.push('ぶどう'); // 配列に新しい要素を追加
console.log(fruits);

fruits.pop(); // 最後の要素を削除
console.log(fruits);





実践・JavaScript





確認用メッセージを使う





JavaScriptでは、ユーザーに確認を求めるメッセージを表示することができます。これは、ユーザーが操作を継続するかどうかを確かめるのに使います。





alert() 関数





alert() 関数を使って、シンプルなメッセージを表示することができます。(sample)





alert('こんにちは、JavaScript!');





このコードを実行すると、ポップアップウィンドウが表示され、メッセージが表示されます。





confirm() 関数





confirm() 関数を使って、ユーザーに確認を求めることができます。この関数は、ユーザーが「OK」または「キャンセル」をクリックしたかどうかを判定します。 (sample)





let result = confirm('本当にこの操作を行いますか?');

if (result) {
    console.log('操作が確認されました。');
} else {
    console.log('操作がキャンセルされました。');
}










windowオブジェクトの記述は省略できる


ちなみに、これらの確認用メッセージはwindowオブジェクトのメソッドです。そのため、本来は以下のようにwindow.に続けてメソッド名を記述します。





window.alert('こんにちは、JavaScript!');





しかし、windowオブジェクトは唯一省略可能なオブジェクト名なので、ここでは省略しています。







JavaScriptでスタイルを指定する方法





JavaScriptを使って、動的にHTML要素のスタイルを変更することができます。





ユーザーの操作や特定の条件に応じて、リアルタイムにWebページのデザインを変更することが可能です。





以下では、JavaScriptでスタイルを指定する基本的な方法を紹介します。





1. styleプロパティを使う





JavaScriptで特定の要素のスタイルを変更する最も直接的な方法は、要素のstyleプロパティを使用することです。





＜書式＞





要素.style.CSSのプロパティ名 ＝ 値;





例: 要素の背景色を変更する





以下の例では、ボタンをクリックすると、changeColor関数が呼び出され、div要素の背景色が変更されます。(sample)





<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptでスタイルを指定する例</title>
    <style>
        .example {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>JavaScriptでスタイルを変更する</h1>
    <div class="example" id="myDiv">このボックスの色を変更します</div>
    <button onclick="changeColor()">色を変える</button>

    <script>
        function changeColor() {
            const div = document.getElementById('myDiv');
            div.style.backgroundColor = 'lightgreen';
        }
    </script>
</body>
</html>










CSSのプロパティ名はキャメルケースになる


JavaScriptでは、変数名やプロパティ名にハイフン（-）を使用することができません。ハイフンがJavaScriptの文法上、マイナス記号として解釈されるためです。





CSSプロパティ名のようにハイフンを含む名前をJavaScriptで使用する場合、キャメルケース（camelCase）に変換する必要があります。





キャメルケース（camelCase）のルール





    

  • 最初の単語は全て小文字で始める。
    • 




  • それ以降の単語の先頭文字を大文字にする。
    • 




  • ハイフンやスペースなどの区切り文字を使わない。
    • 






英語の【camel】にはラクダという意味があり、ラクダのコブのように見えることからこの名前があります。





例えば、font-size をキャメルケースに変換すると fontSize になります。
その他の例として、background-color は backgroundColor、margin-left は marginLeft となります。














2. classListプロパティを使う





CSSクラスを追加・削除することで、より柔軟にスタイルを変更する方法もあります。classListプロパティを使用します。





例: CSSクラスを追加・削除する





以下の例では、ボタンをクリックすると、toggleClass関数が呼び出され、div要素にactiveクラスが追加され、再度クリックすると削除されます。 (sample)





皆さんはトグルスイッチというものを見たことがありますか？





上記リンクを辿るとお分かりのようにトグルスイッチは、一つの操作を行うことで、2つの状態（オン/オフ）を切り替えることができるものです。





<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptでクラスを切り替える例</title>
    <style>
        .example {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 20px;
        }

        .active {
            background-color: lightsalmon;
            border: 2px solid orange;
        }
    </style>
</head>
<body>
    <h1>JavaScriptでクラスを切り替える</h1>
    <div class="example" id="myDiv">このボックスの色を変更します</div>
    <button onclick="toggleClass()">クラスを切り替える</button>

    <script>
        function toggleClass() {
            const div = document.getElementById('myDiv');
            div.classList.toggle('active');
        }
    </script>
</body>
</html>





3. setAttributeメソッドを使う





setAttributeメソッドを使って、スタイルをインラインで追加する方法もあります。





例: インラインスタイルを追加する





以下の例では、ボタンをクリックすると、addInlineStyle関数が呼び出され、div要素にインラインスタイルが追加されます。 (sample)





<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptでインラインスタイルを追加する例</title>
    <style>
        .example {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 20px;
        }
    </style>
</head>
<body>
    <h1>JavaScriptでインラインスタイルを追加する</h1>
    <div class="example" id="myDiv">このボックスの色を変更します</div>
    <button onclick="addInlineStyle()">インラインスタイルを追加</button>

    <script>
        function addInlineStyle() {
            const div = document.getElementById('myDiv');
            div.setAttribute('style', 'background-color: lightcoral; border: 2px solid red;');
        }
    </script>
</body>
</html>










続く









			


	
	
	
	
		
	







	
前の記事
Pythonライブラリの種類とその覚え方
2024年10月10日

	
次の記事
競合調査の方法：IT営業を例にNew!!
2024年10月12日