HP制作のためのJavaScript入門①

～ホームページに多彩な機能を追加する～

JavaScript(ジャバスクリプト - 長いので以後省略して、JS ｰジェイエスと呼びます)はブラウザ上で動く唯一のプログラミング言語です。2024年のプログラミング言語ランキングでは、第2位の人気を獲得しました。

JSは、ホームページに様々な動きを与えます。例えば、スライドショーなどのアニメーションを追加したり、入力欄に打たれた漢字をリアルタイムで読み取って仮名に変換できます。また、メールアドレスなどの入力チェックや、郵便番号による住所検索も簡単に行えます。ホームページが生き生きと動き出すのです。

元々はブラウザ上だけで動作してホームページを多機能にするために生まれた言語ですが、近年はホームページを公開する側のサーバー上でも動作するように進化し、大規模なサイトの高度な開発にも欠かせない言語になっています。

JSを学ぶことで、皆さんのホームページ開発技術は飛躍的に向上するでしょう。そして、自分のアイデアを形にしていく無限の可能性が広がるでしょう。このテキストでは、基本的な文法から実践的なテクニックまで、一歩一歩、丁寧に解説していきます。さあ、ご一緒にJSの世界に足を踏み入れ、楽しく技術を磨きましょう！

この研修のゴール

★JavaScriptを使ったサンプルホームページ

色々な動きや機能が実装されています。皆さん、このページで遊んでみて、これからの学習に思いを馳せてみてください。

JSを学ぶ前提となる知識を手に入れよう！

ホームページを構成する三つの言語 HTML、CSS、JS

皆さんが日頃ご覧になっているホームページは、主に3つの言語で書かれています。それぞれ、HTML(エイチティーエムエル)、CSS(シーエスエス)、JavaScript(=JS ジャバスクリプト又はジェイエス)と呼ばれます。これらの言語には、それぞれはっきりと役割が決まっていて、それを知ることが今後の学習の大切な土台になります。

「何を表示するか」～画面の部品を作る～HTML

それでは、まずこちらのリンクを開いてみてください。大きな字でタイトルが書いてありますね。それからタブの名前も「サンプル00」と表示されています。このホームページがどう書かれているのか見てみましょう。

ブラウザに表示されているホームページの何も書かれていない部分を右クリックして、「ページのソースを表示」というメニューを選んでください。見慣れない単語や記号が並んでいますね。これが、HTMLです。の中に書かれているのはコメントといって、画面に表示されない説明文が書ける箇所です。まずはコメントを全て読んでみてください。

ご覧のように、HTMLは<html></html>や、<h1></h1>というように、開始タグと終了タグをセットで使うのが基本です。<h1>が開始タグ、</h1>が終了タグです。開始タグと終了タグの間に、内容を書きます。h1は、一番サイズの大きい文字を使って見出しを表示する、というタグですから、h1の開始タグと終了タグの間に書かれた文字が、一番大きいサイズの太字になって表示されているのです。次のpタグは段落を作ります。使い方はh1タグと同じです。こうやって、タグを使ってそのページに表示する画面の部品を定義していくのがHTMLの主な役割です。

HTMLで作った部品に名前を付ける～セレクタを理解しよう～

セレクタとは、画面部品を区別するための名前

さて、ご覧の画面には見出しと段落が、ただ順番に並んでいるだけですね。実はHTMLだけでは、書かれた画面の部品を上から下へ順番に表示する、ということしかできません。画像を横に並べたり、文字を画面中央や右上に表示したりなど、「どこへ」「どう」表示するのかを指定するためには、CSSを書く必要があります。ただ、どの部品の表示を変更するのかを指定するためには、各部品に名前を付けて区別出来るようにする必要がありますよね。この部品を区別するための名前を、セレクタと言います。英語でselectは選ぶという意味ですから、わかりやすいと思います。このサンプル画面にもpタグが四つありますから、どの段落をどう表示したいかを指定するためには、各pタグに別々のセレクタを付けてやればいいわけです。HTMLの部品に名前を付けるのがセレクタの役目ですので、セレクタってどの言語なの？という疑問の答えは、HTMLです。

セレクタの種類

基本的なセレクタには三つの種類があります。とても大切な知識ですので、しっかりと頭に入れておいてください(本当はもっと種類があるのですが、混乱を避けるため、今回は基本的な三つに絞ってご説明致します)。

HTMLタグをそのままセレクタとして利用
id
class

1.は、h1やpというタグを持つ画面部品全てを対象にしたい場合に使います。全てのタグに同じ操作をしたい場合に便利ですが、サンプルのように同じpタグが複数ある中で、特定の段落(pタグ)を指定して操作したい場合には使えません。

2.は、HTML開始タグに、id="名前" と書き加えて、その部品にセレクタを与えるやり方です。idは英語で身分証明書を指し、たくさんある部品の中から特定の一つを選ぶために使われるものです。なので、一つの画面に同じidを持つ部品を複数作ってはいけません。

3.classも2と同じくHTMLタグに追記するのですが、idとは逆に、同じ操作をしたい部品をまとめて扱うためのセレクタです。2と同じように、class="名前"と開始タグに追記して設定します。

CSSもJSも、セレクタを使って画面の部品を特定し、表示を変更したり機能を追加します。CSSは、1～3全種類のセレクタを扱うことが普通です。JSでも全種類のセレクタを扱えますが、操作する部品を選んで何かを行うことが多いので、2と3(idとclass)のセレクタを使うことが多くなります。たくさんある画面部品の中からセレクタを使って対象を選んで何かをする、という点はCSSもJSも同じです。

セレクタの実例

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

基本構文

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

id属性

id属性は、要素に一意の識別子を指定します。

<div id="header">これはヘッダーです</div>

class属性

class属性は、要素にクラス名を指定します。複数の要素に同じクラスを適用できます。

<p class="text-primary">これは段落です</p>

ここまでのまとめ

ホームページはHTMLとCSS、JSの3つの言語で構成されている
3つの言語には明確な用途があり、それぞれが役割を果たして多彩なデザインや機能を実現している
HTMLは表示する各画面部品を作り、それぞれの部品を見分けるためにセレクタを定義する
CSSはHTMLが定義したセレクタを利用して対象となる画面部品のデザインを操作する
JSはセレクタを利用して対象の部品に機能を付け加えたり表示内容を変更する

ホームページを構成する三言語の役割を、ここからは実例を見ながら理解していきましょう。

「どこにどう表示するか」～部品のデザインを決める～CSS

まずはCSSで画面部品にデザインをあてる簡単な例を見てみましょう。こちらのリンクを開いてください。見出しの文字の色が、黒から暗い赤になり、表示位置も画面中央に変わっています。また、段落の文字色や文字の大きさも変わっていますね。どうやったらこうなるのか、前回と同じように「ページのソースを表示」のメニューを選んでプログラムを読んでみましょう。

headタグ内に、<style></style>というタグが増えています。これはCSSを記述するためのタグです。その中に、h1の文字の色を変え、表示位置を画面中央にするCSSが書かれています。HTMLの部分には四つある段落の最初のpタグにはidが、他の三つにはclassが指定されており、CSSの部分にはそれぞれのセレクタを持つ部品にあてるデザインが書かれていて、そのとおりに表示されていることを確認してください。このように、CSSとはHTMLで作った画面部品をセレクタを使って選び、その部品のデザイン(どこにどう表示するのか)を指定することが役割の言語だと理解できます。

「機能を追加したり内容を変更する」～部品を自由に操作するプログラミング言語～JS

それではいよいよ、JSで画面部品を操作する簡単な例を見てみましょう。こちらのリンクを開いて前回と同じように「ページのソースを表示」してください。<script>～</script>というタグに挟まれているのが、JSのプログラムコードです。詳しいことは後で説明しますので、今は、こういうものなのか、という程度に眺めてください。

JSは、HTMLやCSSとは違うタイプの言語です。HTMLとCSSは、マークアップ言語と呼ばれ、何かを定義するために使われます。HTMLは「何を」表示するのか、CSSは、それを「どう」表示するのかを決めるのでしたね。それに対して、JSはプログラミング言語と呼ばれます。マークアップ言語と違って、プログラミング言語は何かを行う手順をあらかじめ決めるためのものです。

HTMLやCSSは、画面部品とその表示方法を、ただ決められるだけです。この二つで決めたことは、画面表示の際、忠実に画面に反映されますが、画面表示が終わってから部品の内容や表示方法を変更することはできません。しかし、JSは、場合に応じて何をどうするのかの手順を事細かく決められます。サンプルのJSコードはたった三行しか書いてありませんが、これだけで段落の文章を変更することが出来るのです。どうやってそんなことができるのかを順を追って学んでいきましょう。

プログラミング言語の基礎～変数、演算子、関数(メソッド)～

まずは「変数」と、「演算子」と、「関数(メソッド)」という言葉を覚えましょう。プログラミング言語の仕組みを理解する第一歩です。どの言葉も、これから先は頻繁に出てきますので、ここで概略を学んでおきましょう。

実は、最初の一行に、この三つ全てが書いてあります。

const element = document.querySelector("#ptag1");

なんでも入れられる箱　～変数～

最初のconst elementという部分が、変数の宣言です。constはこれから変数を宣言しますよ、という意味で、elementは変数の名前です。const elementで、elementという名前の変数を使いますよ、と宣言していることになります。変数という言葉は数学で習ったかと思いますが、プログラムの変数は数学のそれよりも用途が広いです。elementというラベルが貼ってある、何でも入れられる箱ができた、と想像してくださればわかりやすいかと思います。JSの変数には、文章や数、後述のオブジェクトなど、なんでも入れることができます。

計算や代入をする　～演算子～

const elementの右に、「= 」という記号が書いてありますね。これが演算子です。このイコール記号は代入演算子(だいにゅうえんざんし)と言って、先ほど作ったelementという名の箱に、イコールの右にあるものを入れますよ、という意味です。演算子には色々な種類があり、計算や比較にも使われますが、それはまた後でご紹介します。今は、このイコール演算子の役目を理解してください。変数に何かを入れることを代入と呼ぶことも覚えておいてくださいね。

再利用できる処理の部品　～関数(メソッド)～

イコール記号の右には、document.querySelector("#ptag1")とあります。このquerySelectorが関数(メソッド)と呼ばれるものです。前に付いているdocumentとドットは、documentというモノが持っているquerySelectorという機能を呼び出しますよ、という意味です。("#ptag1")は、querySelectorを呼び出すときに#ptag1という文字列を渡しますよ、という意味です。

関数(メソッド)とは、何度でも再利用できる処理の部品です。何かを与えて(入力して)やれば、何かを返して(出力して)くれるもの、と考えてください。querySelectorは、セレクタを渡してやると、それに対応する画面の部品を返してくれるという機能で、その機能部品をdocumentというモノが持っているから、こういう書き方になっているのです。

関数(メソッド)を呼び出すときに渡すモノを引数(ひきすう)と、返ってくる出力結果を戻り値(もどりち)又は返値(かえりち)と呼びます。

ここまでのまとめ

最初の一行の処理を順を追って左から説明してきましたが、まとめるとこの行は、querySelectorメソッドで画面からptag1というid(セレクタ)を持った部品を取ってきて、element という変数に代入する、という処理を行っているのです。その結果、element という箱には取ってきたpタグの機能や文章が全て入っている、という状態になります。

プログラムの説明は左から行いましたが、実際の処理はイコール演算子の右から行われていることにも注目してください。この行の処理は「変数に画面部品を代入する」なので、まずは代入するための画面部品を取ってこないことには目的が達成できないわけです。

二行目についてはまた後でご説明します。三行目のelement .innerText = …という行が、段落の文章を変更する処理を行っています。innerTextというのが、この段落に書かれた文章です。HTMLでは「一つ目の段落です」と書かれていますが、これを「JSで段落の文章を変更しました」という文章に変えているわけです。ここのイコール演算子も、一行目と同じ代入の処理を行っているのですね。

この三つの言葉については他にもたくさん理解すべき点があるのですが、詳しくは後ほど説明しますので、今は概略だけ理解してください。この例では、ただ文章を変更する、という簡単なことしかやっていませんが、JSを使えば画面の部品をどのようにでも変更できそうだな、という感触はつかめたのではないでしょうか。

プログラムのお作法～インデントについて

ここで、読みやすいプログラムを書くためのお作法についても少し触れておきましょう。

<html>タグや、<head>、<body>タグの中の行が、少し右から始まっているのに気付かれた方も多いと思います。これは「インデント」と言って、どこからどこまでが、どのタグの中に書かれているのかを見やすくするための工夫です。HTMLでは一般的に半角スペース二つ分、右から行を始めることになっています。タグの中にタグを開けた場合は、更に半角スペース二つ分右から行を開始します。こうすることで、プログラムを縦に眺めると、どの開始タグがどこで閉じられているのかが見やすくなり、書かれた内容を読みやすく、理解しやすく出来ます。皆さんも今のうちからインデントを使うことに慣れておくことをお薦めします。

それでは、いよいよJSを学ぶための本格的な準備を始めましょう。

プログラミングの準備

環境設定

JSの学習を始めるために、パソコンに道具（ツール）を入れてあげましょう。この道具のことを、開発環境と言います。すべて無料で入手できますので、ご安心ください。

必要なツールの紹介

ウェブブラウザ
- JSはウェブブラウザ上で動作します。Google ChromeやEdgeなどが便利です。もうすでにお持ちかと思いますが、念のため最新バージョンを使うことをお勧めいたします。
テキストエディタ
- プログラムを書くための道具です。超高機能なメモ帳のようなものです。以下のエディタは無料で機能も充実しています。
  - Visual Studio Code (VS Code) - ビジュアルスタジオコード (ブイエスコード)

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

Visual Studio Codeのインストール

Visual Studio Codeの公式サイトから、プログラムをダウンロードします。
VSCodeUserSetup～.exeというファイルのダウンロードが完了したら、.exeファイルをダブルクリックしてください。途中いくつかメッセージが出ますが全てOKで大丈夫です。

インデント幅の調整

VSCodeのインデント幅は4になっています。HTML、CSS、JS用に、以下の手順でインデント幅を2にしておきましょう。

拡張機能のインストール

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

すると、拡張機能を管理するタブが開きます。以下の拡張機能はこの画面でインストールしていきます。

Japanese Language Pack
- VS Codeを日本語で使うために、拡張機能「Japanese Language Pack」をインストールします。VSCodeのメニューやメッセージが日本語になり、使いやすくなります。
- インストール方法：
  1. VS Codeの拡張機能タブを開きます（左側の四角いアイコン）。
  2. 検索バーに「Japanese Language Pack」と入力し、インストールボタンをクリックします。
  3. インストールが完了すると、再起動して言語を変更するボタンが画面右下に表示されますので、押して下さい。
  4. VS Codeが再起動すると、日本語化のオプションが表示されるので、「日本語」を選択します。
Live Server
- HTMLファイルをローカルサーバーでプレビューできます。リアルタイムで変更を確認できるため、開発がスムーズになります。
- インストール方法：
  1. VS Codeの拡張機能タブを開きます（左側の四角いアイコン）。
  2. 検索バーに「Live Server」と入力し、インストールボタンをクリックします。
ESLint
- JavaScriptプログラムの間違いを自動でチェックしてくれます。バグの早期発見に役立ちます。
- インストール方法：
  1. 拡張機能タブを開きます。
  2. 検索バーに「ESLint」と入力し、インストールボタンをクリックします。
Prettier
- Code Formatter Prettierは、コードの整形を自動で行ってくれます。指定されたルールに基づいて、インデントや空白の配置を統一し、プログラムを読みやすく整形できます。
- インストール方法：
  1. 拡張機能タブを開きます。
  2. 検索バーに「Prettier - Code Formatter」と入力し、インストールボタンをクリックします。

テキストエディタの使い方

Visual Studio Code でHTMLテンプレートを使ってみよう

まずはCドライブに、プログラムを入れるフォルダを作りましょう。新しいフォルダを作成し、jsworkという名前にしてください。
次に、ホームページの内容を書き込むHTMLファイルを作成します。VSCodeで[ファイル]→[フォルダを開く]を選択し、先ほど作ったC:\jsworkフォルダを開きます。画面右側のjsworkという文字の上で右クリックし、[新しいファイル]を選択します。ファイル名は、[index.html]としてください。
VSCodeには、作成したhtmlファイルに、基本的な内容を自動で書き込んでくれる機能があります。これを、HTMLテンプレートと言います。作成したindex.htmlの編集画面に！を入力してからエンターキーを押すと、HTMLテンプレートを入力できます。皆さんも、！＋エンターを押してみてください。以下のような画面になれば成功です。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

更新したファイルはすぐに保存する習慣をつけましょう

上の操作ができたら更新したindex.htmlをすぐに保存しておきましょう。ファイルの上書き保存のショートカットキーは、Ctrl + Sです。初心者の方がよくぶつかるトラブルに、プログラムを変えたのに反映されない、というものがあります。いくつか原因は考えられますが、まず最初に確認すべきはファイルをちゃんと保存したか、です。ファイルの内容を変更したら、その都度すぐに上書き保存する習慣を今のうちから付けましょう。ショートカットキーを使えばわざわざメニューを出す手間も無く一瞬で保存が出来ます。

HTMLテンプレートの概要

ここで、VSCodeで作ったテンプレートの概要を説明しておきますね。

<!DOCTYPE html>: HTML5文書であることを宣言します。
<html lang="en">: 文書の(人間が使う方の)表示言語です。この記述だと英語ですね。日本語に設定するには、enをjaに変更します。
<head>: ホームページを表示する前提条件を書く部分です。メタデータとも呼ばれます。
<meta charset="UTF-8">: 文書の日本語を表示するやり方(文字エンコードと言います)を指定します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">: ここにはPCを含む色々な端末でこのページを表示するときの設定を書きます。PCでも携帯やタブレットでも正常に表示できるページを、レスポンシブ対応されたページと呼びます。
<title>: ウェブページのタイトルを設定します。この文字は、ブラウザのタブ部分に表示されます。
<body>: 実際のコンテンツを含む部分です。この中に書かれた内容がブラウザの画面に表示されます。

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>
    // コンソールにメッセージを出力する
    console.log('Hello, JavaScript!');
  </script>
</body>
</html>

<html lang="en">を、<html lang="ja">に変更する
<title>Document</title>を<title>JavaScript入門</title>に変更する。
以下のコードを</body>タグの下に追記する。

  <script>
    // コンソールにメッセージを出力する
    console.log('Hello, JavaScript!');
  </script>

環境の確認

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

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

自分に合ったエディタを見つけましょう

本研修ではWindowsで一般的に使われている数あるエディタの中から、VSCodeを採用しました。高機能で便利な拡張機能も充実したエディタですが、日本語化してもメニューの一部が英語になっていたりと、違和感を覚える方もいらっしゃるかもしれません。

日曜大工をするのに、いくら高機能でも自分が使いにくい道具では仕事がはかどりませんよね。長いプログラミングの歴史の中で、星の数ほど色々なエディタが開発されており、それぞれ色濃い特徴を持っています。数例だけ挙げると、pulsar、sublime、eclipseなどが有名どころの一部です。ネットで検索すればインストール法も使い方も山ほど記事が出てきますし、色々なエディタの使い勝手を比較してくれているサイトもたくさんあります。

ある程度プログラミングに慣れてきたのにお使いのエディタに違和感が残っていたら、ご自分に合ったエディタを探してみるのも開発効率の向上に大いに役立つでしょう。

コンソールってなに？

コンソールは、開発者が使う便利な画面

初めて開発者ツールを開いたときは、「コンソール」のボタンが開発者ツールウィンドウの一番下に表示されているのに、コンソール自体は表示されていないかもしれません。その時は、コンソールの右にある「問題」というボタンを押してください。コンソールのウィンドウが表示されます。以下の画面はsample02を表示して開発者ツールを起動した状態です。

コンソールが表示されたら、以下のような操作で開発者ツールの表示部分を広くして、見やすくしておいてください。

開発者ツールは上下三段に分かれていますので、それぞれの高さをドラッグで調整し、こんな感じにしておきましょう。

これでコンソールが見やすくなりました。コンソールという言葉自体なじみが無い方もいらっしゃると思いますが、要するに開発者が使える便利な画面だと思ってください。上のJSプログラムにある、console.log()というメソッドを使えば、コンソール画面に色々な情報を表示して、プログラムの動作や処理の結果が正しいかなどを簡単に確認できます。これからの学習ではもちろん、ご自分で開発を行う際にも大変便利な機能ですので、今のうちから慣れ親しんでおきましょう。この後すぐに、またコンソールを使う学習があります。

JSが画面部品を操作する仕組み

それでは、いよいよJSが画面部品を操作する仕組みを詳しく学んでいきましょう。

JSは画面部品をオブジェクトとして扱う

一言で説明すると、JSは各画面部品をオブジェクトとして扱うことで、様々な操作を可能にしているのです。オブジェクトという言葉を聞いたことがある方もいらっしゃると思います。日本語では単に(物)というような訳になり、わかりづらい印象ですが、オブジェクトとは現代アプリケーション開発方式の一つで用いられるプログラム部品のことです。難しく考えることはありません。データ(プロパティ又は属性などと呼ばれます)と処理(メソッド又は関数と呼ばれます)を両方持っているアプリケーションのパーツ、と考えてください。

例えばh1タグには、見出しに表示する文字が書いてありますね。この文字がデータです。また、h1には一番大きいサイズで文字を表示する、という機能があります。ですから、h1というHTMLタグを、表示する文字をデータとして持ち、それを大きなサイズで表示する機能を持ったオブジェクトと見なす、ということです。

オブジェクトのイメージは、こんな感じです。中にたくさんの箱があって、それぞれに名前が付いており、データや機能が入っているのです。オブジェクトが持つデータのことを、プロパティとか属性、フィールドなどと呼びます。この講義では、属性と呼ぶことにします。pタグに書いてある文章は、pタグのオブジェクトが持つ属性ということになりますね。

JSが扱うオブジェクトを実際に見てみよう

先ほど表示したsample02.htmlの開発者ツールでコンソールを見てください。windowという表示があり、その下に右向きの▲がありますね。これはキャレットと言って、このwindowには中身がありますよ、という意味です。キャレットを左クリックしてみましょう。

すると、windowオブジェクトが開いて何が入っているのかが表示されます。なにやらずいぶんたくさんのモノが表示されていますね。実は、このwindowこそが、JSが操作できる対象を全て持っている大元のオブジェクトなのです。windowは、ブラウザが持っている全機能と、表示されている画面部品全てを含む巨大なオブジェクトです。そして、画面の部品はwindowの中のdocumentというオブジェクトに全て入っています。下図のように、documentオブジェクトを開いて中を見てみましょう。

マウスホイールを回して、documentの中がよく見えるようにしてください。次に、allというオブジェクトの左にあるキャレットで中を見てみましょう。すると、h1やpタグのオブジェクトが見つかります。

さらに、ptag1というオブジェクトを開いてみましょう。

これまたずいぶんたくさんのモノが表示されているのに驚かれた方も多いと思います。HTMLでは<p></p>と短く書いてあるだけなのに、これだけたくさんの情報や機能が内包されているのです。

ここで大事なのは、windowが持つ大量のオブジェクトも、それぞれの部品がもつ多彩な要素も、覚える必要は無い(というより全部覚えるなんて無理ですね)ということです。やりたいことを実現するにはどの要素を、どの機能を使えばよいのか、都度検索して実践して行きましょう。世の殆どのプログラマーもそうしています。

ここで覚えなければいけないのは、JSは画面部品のオブジェクトが持つ多彩な属性を読み書きし、色々な機能を操作することでホームページに動きや機能を与えることができるのだ、という本質的な仕組みです。

ptag1の表示を下にスクロールしていくと、JSで書き換えたinnerTextという情報を見ることが出来ます。

innerTextと同じ値を持つ、innerHTMLという属性も表示されていますね。どちらもpタグが持つ文章を指す要素で、JSではどちらを使っても同じ結果が得られます。sample02のページでは、pタグの一つにptag1というid(セレクタ)を付け、それを利用して画面部品をwindowのdocumentから対象となるpタグのオブジェクトを取ってきて、innerTextという情報を書き換えて文章を変更した、ということです。

オブジェクトはフォルダに似た階層構造を持つ

さて、ここでこれからJSで扱うオブジェクトについて、もう少しだけ解説しておきましょう。オブジェクトは、データ(=属性)と機能(=メソッド)で構成されています。属性には色々なタイプがあり、文章や数値はもちろん、他のオブジェクトを属性として持つこともできます。先ほどご覧になった開発者ツールのコンソールをもう一度見てください。documentのallの中に、h1や複数のpタグのオブジェクトが並んでいますね。一番上から見直すと、window → doument → all → h1、ptag1、ptagsというように、階層構造になっているのがわかると思います。Windowsのフォルダ構成に似ていますね。CドライブにWindowsフォルダやProgram Filesフォルダがあって、その中にまた色々なフォルダやファイルが存在し、さらにその中に…という構造です。

windowオブジェクトとはブラウザそのもの

JSによる画面部品操作の大枠を理解したところで、JS操作の大元になるwindowオブジェクトの正体をはっきりさせておきましょう。先ほどconsole.log(window)というコマンドを使いましたね。コンソールもwindowが持つオブジェクトの一つです。consoleオブジェクトが持つlogというメソッドを呼び出して、windowオブジェクトをコンソールに表示したわけです。なので、ちゃんと書くならwindow.console.log()という書き方が正式です(オブジェクトが持つ属性やメソッドはドットでつなげて表現します)。つまり、windowオブジェクトが持つconsoleオブジェクトのlogメソッドを呼び出しますよ、という記述です。ただ、JSはwindowが持つ何かを使って仕事するのが当たり前なので、このwindow.の部分は省略して良いことになっています。一行は短い方が読みやすいですし、JSのプログラムが長くなるとブラウザの読み込み時間がかかり、ホームページの表示が遅くなってしまいます。

windowという漠然とした名前だけでは何のことだかイメージしづらいかもしれませんが、ブラウザのことだと思ってくださればわかりやすいかと思います。皆さんがご覧になっているホームページは、ブラウザのタブに表示されていますね。ブラウザにはそのホームページを表示するための全ての機能が備わっているということです。そして、ホームページに書いてある部品も全てブラウザの画面に表示されているわけですから、windowオブジェクトは画面を表示するための全ての機能と、表示されている画面部品を全て持っているのだな、と理解できるかと思います。

windowはブラウザオブジェクトとも呼ばれ、edgeやchromeのようなブラウザが画面を表示する時に自動で生成する組み込みオブジェクトです。その役割は、ウェブページの表示や操作のサポートです。consoleを初めとしたたくさんのオブジェクトと、画面表示に関連する多彩なメソッドを持っています。そして、画面の部品はwindow内のdocumentオブジェクトに集約されている、ということを覚えておきましょう。次は、documentオブジェクトについてもう少し解説します。

DOM (Document Object Model)とelement

前述のようにdocumentは、sample02で使ったquerySelectorをはじめとするたくさんのメソッドと表示言語などの前提条件となる属性、そして画面部品のオブジェクトで構成されています。このオブジェクトは、ブラウザが画面を表示する時に生成されるのですが、その仕組みをDOM(Document Object Model)と言います。

また、画面部品のオブジェクトを総称して、element(エレメント)と呼びます。日本語で言うと構成要素という意味の言葉です。DOMやエレメントという言葉は、皆さんがJSの記事を検索したときに随所で見られる用語ですから、意味を把握しておきましょう。

DOMは、HTMLで書かれた各画面部品に対応するオブジェクト(エレメント)を生成し、ツリー構造を持ったdocumentオブジェクトにまとめ上げます。先ほどご覧になったようにdocumentは大量のオブジェクトを持っていますが、その構成要素は用途によっていくつかに大きく分類されています。この分類は「ノード(枝)」と呼ばれます。主要なノードには以下の種類があります：

Documentノード: 文書全体を表します。DOMツリーのルートノード(つまり幹にあたる部分)です。
Elementノード: HTML要素を表します（例: <div>, <p>, <a> 二番目の階層になります）。
Attributeノード: HTML要素の属性を表します（例: class, id 幹から数えて三番目の階層です）。
Textノード: HTML要素内のテキストを表します(各枝に書かれている文のことです)。

sample02のHTMLをDOMの木構造で表現すると以下のようになります。

Document
└── html
    ├── head
    │   ├── meta
    │   └── title
    └── body
        ├── h1
        └── p

Documentが幹で、その下にhtmlという枝があり、その中にheadとbodyという枝がある、という木構造になっていますね。

DOM操作の演習

構造を理解したところで、実際にDOMを使ってホームページを操作してみましょう。sample02に習って、documentオブジェクトのquerySelector()メソッドを使い、pタグのオブジェクトを取ってきて、文字色(color)を blueに、文字サイズ(fontSize)を20にしています。VSCodeで、practice01.htmlというファイルを作り、sample02のページのソースを貼り付けてください。

次に、下のコードのここから追記と書いてある二行をpractice01.htmlのJS部分の最後に書き加えてください。

practice01.htmlのJS部分に追記

<!-- ここからJSを書きますよ、という意味のタグです -->
    <script>
      // ptag1というidを持つ画面部品を取ってくる
      const element = document.querySelector("#ptag1");
      
      // コンソールにwindowオブジェクトを表示する
      console.log(window);
      
      // 取ってきた部品の文章を変更します
      element.innerText = "JSで段落の文章を変更しました";

      // ここから追記
      element.style.color = 'blue';
      element.style.fontSize = '20px';
    </script>

作業が終わったら、再度ライブサーバーを使ってブラウザに表示してみてください。文字の色が青になり、大きさが変わっていれば成功です。

document(画面部品)操作の例

概要:
documentオブジェクトは、windowオブジェクトの属性の一つであり、現在のHTMLドキュメントの内容を保持しているのでしたね。

このオブジェクトは、前述の通りDOM（Document Object Model）によって生成され、JSによる画面部品操作を可能にしています。その例をいくつか見てみましょう。

特徴:

HTML要素の操作: HTML要素を取得、変更、追加、削除するためのメソッドを提供します。
JS処理開始の契機(イベント)の設定: ユーザーの操作をJS処理開始のスィッチにできる（クリック、キーボード入力など）

例:

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

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

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

ブラウザ操作の例

DOMは、HTMLで書かれた画面部品を操作するための仕組みでしたが、JSはwindowオブジェクトを使ってブラウザを操作することもできます。windowはブラウザそのものでしたね。windowが持つ各メソッドはそれぞれブラウザの各機能に対応しています。それらを利用すれば画面部品だけで無く、ブラウザを操作することも可能なのです。今度はその例をいくつか見てみましょう。

特徴:

ブラウザ全体の操作: 新しいウィンドウやタブを開く、タイマーの設定、ウィンドウのサイズ変更などの機能を持っています。
グローバルオブジェクト: JavaScriptで宣言されたグローバル変数や関数はすべてWindowオブジェクトの属性として使えます。前述のように、以下の例のwindow.という部分は省略も可能だ、ということでしたね。
JS処理開始の契機(イベント)の設定: ブラウザ処理をJS処理開始のスィッチにできる（画面の初期表示、他画面への遷移など）

例:

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

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

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

JSの処理開始を、日本語ではよく「発火」と呼びます。JS発火の契機(つまりスィッチ)を、イベントと呼びます。これについては、JSの基本を学んだ後に詳しく説明しますが、これまでの例のJS処理の発火契機は、「画面が表示された」というイベントによるものです。

例題

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

window._______("__________");

答え

window.alert("Hello World");

調べてみましょう

講師と一緒に先ほど見たwindowオブジェクトの中をもう少し見てみましょう。alert()などのメソッドやdocumentなどのプロパティが表示されますね。

さらに、documentを展開するとその中にもメソッドや属性が見えると思います。見つけた属性やメソッドがどんなものか、検索して調べてみましょう。

sample03.html

見つけたプロパティやメソッド：

querySelectorとquerySelectorAll

JSの操作対象(windowとdocument)について理解したところで、今度はDOMのエレメント(documentに含まれる画面部品のオブジェクト)をセレクタを利用して特定するquerySelectorについて、もう少し理解していきましょう。実は画面部品をセレクタを使って特定する方法にはいくつか選択肢があるのですが、本講義ではquerySelectorとquerySelectorAllを使うことにします。これら二つのメソッドは、いずれもCSSセレクタを使用してエレメントを選択します。

querySelector

querySelector()は、sample02で既出ですね。このメソッドは指定されたCSSセレクタに一致する最初の要素を一つだけ返します。見つからない場合はnull(なにも無いという意味の値)を返します。

使い方は簡単で、querySelector("セレクタ")です。セレクタがタグの場合はquerySelector("h1")のように、セレクタがidの場合は、querySelector("#ptag1")のように、セレクタがclassの場合はquerySelector(".ptags")のように使います。タグならそのままタグ名を、idにはシャープを、classにはドットを付けてエレメントを指定するわけです。

querySelector()は、操作対象のエレメントを一つだけdocumentから取ってくる目的で使うメソッドです。sample02のコードを見ながら以下の説明を読んでください。

querySelector("h1")は、画面内の最初のh1タグに対応するエレメントを返します。sample02にはh1タグは一つしかありませんので、このタグのエレメントが返ってくるわけですね。

querySelector("#ptag1")は、文字通りptag1のidを持つ<p>タグのエレメントを返します。

querySelector(".ptags")は、class="ptags"と書いてある<p>タグの内、最初に見つかる画面部品を取ってきます。最初に見つかるのは二番目の<p>ですから、「二つ目の段落です」と書いてあるpタグのエレメントを返します。

使い方の例

sample03.html

<!-- このページの(DOCTYPE = document type)ドキュメントタイプはHTMLです -->
<!-- つまり、このファイルはHTMLで書かれていますよ、という宣言です -->
<!DOCTYPE html>

<!-- ここからHTMLを書きますよ、という意味です -->
<html>
  
  <!-- headタグの中には、ホームページを表示する前提条件を書きます -->
  <!-- ここに書かれたことは画面に表示はされませんが、文字化けを防ぐなど大事な役割があります -->
  <head>
    
    <!-- 日本語を表示する方法を指定しています -->
    <meta charset="UTF-8">
    
    <!-- ブラウザーのタブに表示されるタイトルです -->
    <title>サンプル02</title>
    
    <!-- ここからCSSを書きますよ、という意味のタグです -->
    <style>
      /*
        CSSのコメント(説明)はこう書きます
        
        これは1.HTMLタグをそのままセレクタとして利用した例です
        この書き方だと、h1タグの文字は全て暗い赤色で表示されます 
      */
      h1 {
        /* 文字色を変更 */
        color: darkred;
        
        /* 文字を画面中央に表示 */
        text-align: center;
      }
      
      /*
        idをセレクタとして利用する例です
        #abcと書くことで、
        idセレクタがptag1の部品に{}内のデザインをあてるという意味になります
      */
      #ptag1 {
        /* 文字色を変更 */
        color: rgb(0, 0, 255);
        font-size: 24px;
      }
      
      /*
        classをセレクタとして利用する例です
        .xyzと書くことで、
        classセレクタがptagsの部品に{}内のデザインをあてるという意味になります
      */
      .ptags {
        /* 文字色を変更 */
        color: rgb(0, 64, 0);
        font-size: 20px;
      }
    </style><!-- styleタグここまで -->
    
  </head><!-- headタグここまで -->
  
  <!-- bodyタグの中に書かれたものが画面に表示されます -->
  <body>
    
    <!-- 大きな文字で見出しを書くタグです -->
    <h1>これは見出しです</h1>
    
    <!-- この段落には、ptag1というidがセレクタとして定義されています -->
    <p id="ptag1">一つ目の段落です</p>
    
    <!-- ここから下の三つ段落には、ptagsというclassがセレクタとして定義されています -->
    <p class="ptags">二つ目の段落です</p>
    
    <p class="ptags">三つ目の段落です</p>
    
    <p class="ptags">四つ目の段落です</p>
    
    <!-- ここからJSを書きますよ、という意味のタグです -->
    <script>
      // h1タグのエレメントを取ってくる
      const elH1 = document.querySelector("h1");
      elH1.innerText = "JSでh1の文章を変更しました";
      
      // ptag1というidを持つエレメントを取ってくる
      const elP1= document.querySelector("#ptag1");
      elP1.innerText = "JSでptag1の文章を変更しました";
      
      // ptagsというclassを持つエレメントのうち最初に見つかったものを一つだけ取ってくる
      const elP2= document.querySelector(".ptags");
      elP2.innerText = "JSでptagsの文章を変更しました";
    </script>
  </body><!-- bodyタグここまで -->

</html><!-- htmlタグここまで -->

説明してみましょう

sample03をブラウザで表示して、どうしてこうなっているのかを説明してみましょう。

元のHTMLから変わっている部分と、変わっていない部分がありますね。それぞれどうして変わっているのか、なぜ変わっていないのかを説明してみてください。

sample03.html

どうしてこうなっている？：

`querySelectorAll`

querySelectorAll()は、その名の通り指定されたCSSセレクタに一致するすべてのエレメントを返します。(sample)

querySelector()とは対照的に、同じセレクタを持つエレメントを一度に全部取ってきたい時に使うメソッドです。

どうしてこのメソッドは一度にたくさんのエレメントを返せるのでしょうか。それは、メソッドが返すのがオブジェクトだからです。windowやdocumentはたくさんのオブジェクトを属性として持っていましたよね。

専門的な説明をすると、返されるのはNodeListオブジェクトというものです。一つの箱の中にいくつも小さな箱があって、それぞれにオブジェクトが格納されている、と考えてください。で、これらを一つずつ取り出して処理を行うために、NodeListはForEachというメソッドを持っています。ForEachの使い方は、以下の例をご覧ください。

使い方の例

sample04.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>querySelectorAllの例</title>
</head>
<body>
  <!-- 同じクラス名を持つdivが複数並んでいます -->
  <div class="example">最初のdiv</div>
  <div class="example">2番目のdiv</div>
  <div class="example">3番目のdiv</div>

  <script>
    // querySelectorAllを使って同じクラス名を持つ全てのdivを選択
    const allDivs = document.querySelectorAll('.example');
    
    // 複数のオブジェクトを一つずつ処理する構文です
    // ()の中は一番目が取りだしたオブジェクト、二番目はオブジェクトの番号です
    // => の後には、繰り返し実行する処理を書いた関数を書きます
    allDivs.forEach((div, index) => show(div, index));
    
    // 繰り返し実行する関数
    // divの番号と、書かれたテキストをコンソールに表示します
    // 文字列をバッククォートで括ると、${}を使って変数を埋め込めます
    // 下の例では、divの番号とdivに書かれたテキストを文字列として埋め込んでいます
    function show(div, index) {     
      console.log(`Div ${index + 1}: ${div.textContent}`);
    }
  </script>
</body>
</html>

このサンプルでは、最もよく使われるHTMLタグであるdivを使いました。divは、四角形を作るためのタグです。作った四角形の中に表示できるのは文章だけでなく、画像や表などなんでも表示することができます。divの中にdivを書いて、四角形を入れ子にすることもできます。また、pタグの文章はinnerTextという名の属性でしたが、divタグの中の文章は、textContentという名の属性なのですね。sample04をブラウザで表示し、コンソールを確認してみてください。確認できたら、次の例題に取り組んでみましょう。

例題

3番目のdivの後に、4番目のdivを作り、文章を「4番目のdiv」として画面を表示するとコンソールにはどう出力されますか？

答え

ここまでのまとめ

`querySelector`()	最初に一致する要素を一つだけ返す。見つからない場合は`null`を返す。
`querySelectorAll`()	一致するすべての要素をNodeListとして返す。NodeListはForEachを使って繰り返し処理ができる。

`本研修でquerySelector`や`querySelectorAll`を使う理由

インターネットでJSの記事を検索するとgetElementByIdやgetElementsByClassNameなどを使ったサンプルを目にすることも多いと思います。これらも同じようにセレクタを使ってエレメントを特定するためのメソッドです。どちらを使っても返って来るのは同じオブジェクトなのですが、querySelectorやquerySelectorAllは、この二つだけを覚えておけば前述の三種全てのセレクタを扱えるので、本研修ではこれらを使うことにしました。

ただ、特定のエレメントをIDで取得する場合などではgetElementByIdの方がパフォーマンス面で若干ですが優れています。JSに慣れてきたら、場合に応じてどれを使うかはご自分で判断して自由に決めて下さればよろしいかと思います。

JS処理の発火契機～イベント～

それではここで、JSの処理が何を契機にして起動するのかについて、お話ししておきましょう。皆さんが作ったホームページで、JSを使ってやりたい処理がいくつかあったとします。それらは、どんな時に起動して欲しいでしょうか。例えば画面を表示する時、ボタンやリンクがクリックされた時、入力欄に文字が打たれた時…と、色々な場合が考えられると思います。このJS処理を発動(発火と呼ぶのでしたね)させるためのきっかけを、イベントと呼びます。

JSは、画面上で起こるありとあやゆる事象をイベントとして扱い、それらを契機にして発火できます。具体的には、例えば関数を一つ作って、その関数を特定のボタンが押されたときに発火するよう設定することが出来るのです。関数をいくつも作っておき、どのイベントが起きたときにどの関数を発火させるかをそれぞれ決めておけるわけです。このイベントとJSの処理を紐付ける仕組みを、イベントハンドラと呼びます。

イベントハンドラ

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

あるボタンにあるJS関数を紐付ける(つまりボタンが押されたときにJS関数が発火する)やり方はいくつかありますが、最もわかりやすいのは、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：フォームが送信されたときに実行されます。フォームとは、お問い合わせのように閲覧者が何かを入力して送信するときに使うHTMLのタグです。

<アウトプット例>

<ソースコード>

<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('ウィンドウのサイズが変更されました')">

sample02のJSコードは、onloadイベントで発火していた、ということですね。関数の外にあって、イベントを何も指定しないJS処理は、画面表示が完了した時点で即実行されることになっているのです。

逆に、関数の中に書いてある処理は、イベントハンドラを使ってイベントに紐付けしないと永遠に実行されません。この辺は、実例を見ながら徐々に理解していってくだされば、と思います。

JSの基礎

それではいよいよ、JSの文法を本格的に学んでいきましょう。

変数

変数は、なんでも入れられる箱でしたね。sample02ではconstだけを使っていましたが、実はJSでは変数を宣言するキーワードが、let、const、varの三種類あります。なんで三つも？と思われる方もいらっしゃると思いますが、letとconstについては用途が違い、varはletとconstができる前の古い書き方です。

let：宣言した変数は、値を何度でも書き換えることができます。後で出てくるブロックスコープが有効範囲の変数です。
const：宣言した変数は、一度値を設定すると変更できません。これを定数と呼びます。
var：letと同じく何度でも値を書き換えられます。古い書き方ですが、まだ使われることがあります。

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

変数の有効範囲(スコープ)について～ローカル変数とグローバル変数～

変数の種類には宣言の仕方とは別に、有効範囲(スコープ)による区別もあります。これを、ローカル変数とグローバル変数と呼びます。

グローバル変数: 関数の外で宣言され、スクリプト全体で有効。
ローカル変数: 関数の内で宣言され、その関数の内でのみ有効。

例

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

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は使わないでおきましょう

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

varで宣言された変数は、有効範囲が中途半端だからです。後で出てくるifやforなどの条件分岐、ループ処理の{}のことをブロックと言うのですが、letはブロックの中で使えばそのブロックの中でだけ有効な変数を作ってくれますが、varで宣言した変数は、関数内で有効になってしまうので、変数名が重複したりすると思わぬ間違い(バグ)の原因になりかねないのです。

また、varは同じ名前の変数を再宣言できるので、こちらもバグの原因になり得ます。

このような理由から、最新のJSコードでは、ブロックスコープを持ち、再宣言を防ぐletや、定数宣言のためのconstの使用が推奨されています。古い記事のコードを参考にするときは、varと書いてあったら場合に応じて、letやconstに読み替えてコードを書くようにしましょう。

データ型

データ型とは、変数に入れられる値の種類です。主なデータ型は以下の通りです。

数値（Number）
文字列（String）
論理値（Boolean）男か女か、成人か未成年か、というような2つしか値が無いタイプを扱うデータ型です
配列（Array）オブジェクトではなく、ただ大きな箱にいくつか箱が入っているだけのものです
オブジェクト（Object）
nullとundefined

数値と文字列

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

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

文字列はシングルクォーテーションで囲みましょう

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

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

シンプルな文字列に使用されることが多い。
HTMLの属性値(例えばセレクタの指定)にはダブルクォートが使われるため、JSではこちらを使った方が便利です。

const singleQuoteString = 'Hello, World!';

ダブルクォート（" "）:

シングルクオート同様にシンプルな文字列に使用される。
シングルクォートを含む文字列を使いたいときに便利。

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

バッククォート（``）:

・テンプレートリテラルとして文字列中に変数や式を埋め込むことができる(sample04参照)。

・複数行の文字列を容易に扱える。

  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 * 3`	`15`
`/`	割り算	`6 / 3`	`2`
`%`	剰余（余り）	`5 % 3`	`2`
`++`	インクリメント（値を1増やす）	`let a = 5; a++`	`a` は `6` になる
`--`	デクリメント（値を1減らす）	`let a = 5; a--`	`a` は `4` になる
`=`	代入	`let a = 5`	`a` は `5` になる
`+=`	加算代入	`let a = 5; a += 3`	`a` は `8` になる
`-=`	減算代入	`let a = 5; a -= 3`	`a` は `2` になる
`*=`	乗算代入	`let a = 5; a *= 3`	`a` は `15` になる
`/=`	除算代入	`let a = 6; a /= 3`	`a` は `2` になる
`==`	等価（型を比較しない）	`5 == '5'`	`true`
`===`	厳密等価（型も比較する）	`5 === '5'`	`false`
`!=`	不等価（型を比較しない）	`5 != '5'`	`false`
`!==`	厳密不等価（型も比較する）	`5 !== '5'`	`true`
`<`	より小さい	`5 < 3`	`false`
`<=`	以下	`5 <= 5`	`true`
`>`	より大きい	`5 > 3`	`true`
`>=`	以上	`5 >= 5`	`true`
`&&`	論理積（AND）	`true && false`	`false`
`\|\|`	論理和（OR）	`true \|\| false`	`true`
`!`	否定（NOT）	`!true`	`false`
`? :`	三項演算子（条件式）	`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

関数？メソッド？どっちの呼び方が正しい？

JSの参考文献には「関数」という言葉が使われている記事と、「メソッド」という言葉が使われている記事と、両方が見つかりますね。どちらの呼び方が正しいのかと疑問に思われる方もいらっしゃるかと思います。

結論から申し上げると、どちらでも良い、というのが実際のところです。

開発者が自分で作った機能を「関数」、エレメントなど自動生成されたオブジェクトが持つ機能を「メソッド」と呼んで区別している記事もあり、その方がわかりやすいので、区別する意味はもちろんあります。ただし、前述のように開発者が作った機能もwindowオブジェクトの属性として登録されます。つまり自作関数もwindowオブジェクトのメソッドとして機能するのです。

ですからどちらが正しいのかと議論すること自体に意味はありません。自作の機能を呼び出すコードからはwindow.が省略できる、というだけです。現時点では業界でも、JSの機能部品はこう呼ぶべきだと決まっているわけでもありませんので、頭を柔らかくして記事を読むようにしてください。

本研修では仕組みを理解しやすいように、あえて、自作とwindowが持つ機能部品を「関数」と、エレメントなどオブジェクトが持つ機能部品を「メソッド」と呼ぶことにいたします。

条件分岐

条件分岐を使うことで、特定の条件に応じた処理を実行することができます。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);

JS処理によく使う関数

確認用メッセージを使う

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

alert() 関数

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

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

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

confirm() 関数

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

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

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

これで、JSの基本学習を終わります。おつかれさまでした。

次回からは、いよいよ各機能を実装する演習に入ります。張り切って行きましょう！

JSを学ぶ前提となる知識を手に入れよう！

ホームページを構成する三つの言語 HTML、CSS、JS

「何を表示するか」～画面の部品を作る～HTML

HTMLで作った部品に名前を付ける～セレクタを理解しよう～

セレクタの実例

「どこにどう表示するか」～部品のデザインを決める～CSS

「機能を追加したり内容を変更する」～部品を自由に操作するプログラミング言語～JS

プログラミング言語の基礎 ～変数、演算子、関数(メソッド)～

プログラムのお作法～インデントについて

プログラミングの準備

環境設定

必要なツールの紹介

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

Visual Studio Codeのインストール

インデント幅の調整

拡張機能のインストール

テキストエディタの使い方

環境の確認

自分に合ったエディタを見つけましょう

コンソールってなに？

JSが画面部品を操作する仕組み

JSは画面部品をオブジェクトとして扱う

JSが扱うオブジェクトを実際に見てみよう

オブジェクトはフォルダに似た階層構造を持つ

windowオブジェクトとはブラウザそのもの

DOM (Document Object Model)とelement

DOM操作の演習

document(画面部品)操作の例

ブラウザ操作の例

例題

調べてみましょう

querySelectorとquerySelectorAll

querySelector

使い方の例

説明してみましょう

querySelectorAll

使い方の例

例題

本研修でquerySelectorやquerySelectorAllを使う理由

JS処理の発火契機 ～イベント～

イベントハンドラ

マウスイベント

キーボードイベント

フォームイベント

ウィンドウイベント

JSの基礎

変数

変数の有効範囲(スコープ)について ～ローカル変数とグローバル変数～

例

varは使わないでおきましょう

データ型

数値と文字列

文字列はシングルクォーテーションで囲みましょう

論理値

演算子

関数

関数の基本構造

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

関数？メソッド？どっちの呼び方が正しい？

条件分岐

if文

switch文

繰り返し

for文

while文

配列

配列の作成とアクセス

配列の操作

JS処理によく使う関数

確認用メッセージを使う

alert() 関数

confirm() 関数

HP制作のためのJavaScript入門①　

プログラミング言語の基礎～変数、演算子、関数(メソッド)～

`querySelectorAll`

`本研修でquerySelector`や`querySelectorAll`を使う理由

JS処理の発火契機～イベント～

変数の有効範囲(スコープ)について～ローカル変数とグローバル変数～