JavaScript　初日

投稿日：2021-12-02

更新日：2022-03-24

第１章：JavaScriptの基本

JavaScriptを使用することでWebページに動きをつけたりユーザの操作に合わせて表示を切り替えたりすることができる

スクリプトとは

書いたらすぐに実行でいるプログラムをスクリプトと呼ぶ
スクリプト＝「原稿」「台本」の意味
　★コンピュータに対してどのような処理をすればよいのか
　　「台本」を書くつもりで学習しよう！！

JavaScriptとPHPの違い

JavaScriptは「クライアントサイドプログラム」
　※クライアント側のブラウザで動作する

PHPは「サーバサイドプログラム」
　※サーバ側でHTMLを生成する

クライアントサイドプログラム（JavaScript）

◆クライアントサイドプログラムのメリット

・ブラウザがあれば開発できるため、サーバが不要
・サーバにアクセスせずに実行できるため、軽快な動的ページを作成できる
・サーバのデータを必要とする場合でも必要箇所のデータのみDLして更新できる
　（GoogleMapなど）

◆クライアントサイドプログラムのデメリット

・JavaScriptファイルをクライアントサイドにDLするため、誰でもソースコードを見られる
・ブラウザの設定でJavaScriptを禁止できるため、JavaScriptがoffにされている場合を想定しないといけない
　※最近は無効にしている人が少ないため、考慮しない場合もある

◆クライアントサイドプログラムの使いどころ

主にユーザの使い勝手を向上させたり、動きのあるWebページを作成する

サーバサイドプログラム（PHP）

◆サーバサイドプログラムのメリット

・サーバ上でプログラムを実行するためソースコードを見られることはなく、改ざんされたり、流用される危険性が少ない
・サーバ上で動くので確実に実行される

◆サーバサイドプログラムのデメリット

・サーバを用意し開発に必要な環境を構築しなければいけない
・プログラムを実行するには必ずサーバにアクセスしなければいけない

◆サーバサイドプログラムの使いどころ

ログイン管理のように必ず実行しなければいけない処理やメール送信のようなサーバ上の他サービスと連携させる処理など

JavaScript記述時のルール

半角文字・半角空白を使って記述する
大文字・小文字が区別される
文字列はシングルクォートかダブルクォートで囲む
数値はクォートで囲まない
命令の途中で改行はOK。単語の途中で改行はダメ
命令の最後に「;（セミコロン）」をつける

JavaScript記述法

インラインスクリプト – HTMLファイル内に記述

JavaScriptのコードをHTMLファイル内に記述する方法

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>インラインスクリプト</title>
</head>
<body>
  <h1>インラインスクリプト</h1>
  <script>
    console.log("コンソールにログを表示");
    console.log(100);
    console.log("ますだみほこ");
  </script>
</body>
</html>

JavaScriptの開発をするときはブラウザの検証画面で「コンソール」を表示させておき
プログラムを確認する

※コンソールってなんやねん
　　・・・「コンピュータさんとの意思疎通に必要なもの」って感じ

外部スクリプト – 外部ファイルに記述

JavaScriptのコードを外部JavaScriptファイルに記述する方法
「scriptタグ」と「src属性」を使って読み込む

<script src="外部JSファイルのパス"></script>

◆外部スクリプトのメリット

・HTMLとJavaScriptを分離することでJSファイルを他のページで再利用できる
・HTML内に文章構造以外の記述が増えることを防ぐ

※原則、外部ファイル化する！

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <title>外部スクリプト</title>
</head>
<body>
  <h1>外部スクリプト</h1>
  <script src="output1.js"></script>
</body>
</html>

console.log('コンソールにログを表示');
console.log('外部スクリプトによる出力');
console.log("ますだみほこ");
console.log(2021);

よくあるミス

◆外部スクリプトとインラインスクリプトを同時に記述しない

同時に記述すると外部スクリプトのみ実行され、インラインスクリプトは無視される

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>よくやってしまうミス</title>
</head>
<body>
<h1>よくやってしまうミス</h1>
<script src="mistake.js">
console.log('インラインスクリプト');
</script>
</body>
</html>

外部スクリプトの読み込みと、インラインスクリプトが同時に記述されている
　　⇒インラインスクリプトは無視され、外部スクリプトのみが実行

※外部スクリプトもインラインスクリプトも両方実行させるには
　scriptタグを2つ記述する

  <script src="mistake.js"></script>
  <script>
    console.log('インラインスクリプト');
  </script>

JavaScriptの記述位置

scriptタグはHTMLのどの部分に記述してもOK
以下の3か所を状況に応じて使い分ける
よく使われるのは「1.headタグ内に記述」と「2.</body>タグの直前に記述」

１.headタグ内に記述

事前に読み込んでおかなければいけないJSファイルによく使われる

２. </body>タグの直前に記述

ブラウザは1行目から順に読み込んで解釈し、表示していく。
HTMLの途中に処理時間のかかるJSファイルがあると、その行以降の内容はJavaScriptの処理が終わるまで表示されない。
処理に時間のかかるJSファイルはbody終了タグの直前に記述。

３.bodyタグ内の任意の位置

JavaScriptの処理対象になるHTMLコードとJavaScriptのプログラムを近い位置に記述して関連性を明確にする場合などに使われる。

コメントの記述

コードの概要をコメントで記述しておくとプログラムが読み解きやすくなる
メンテナンス時の負担を軽くするためにも、適切なコメントを残すよう心掛ける

※JavaScriptの内容は誰でも見ることができるので、重要な情報をコメントに記述することは避ける

１行コメント

//ここに１行コメントを記述する

複数行コメント

/*
  ここにコメントを
  記述する
*/

補足（詳細はまた後々…）

onclick属性：クリック時にJavaScriptの処理を実行する

<対象要素 onclick="実行する処理内容">

onclick属性はJavaScript用に用意された属性でHTML

ID属性で指定したテキストボックスの入力値を取得

document.getElementByld('対象要素のID名').value;

コンソールに変数の値を表示する

console.log(表示したい変数の名前);

<body>
  <h1>インラインスクリプト</h1>
  <div class="box">
    <!--
    input要素で入力欄とボタンを作成
    「type="text"」で入力欄
        入力欄にはid属性で名前がついている
    「type="button"」でボタン
        value属性でボタンの文字を指定
        onclick属性でクリック地に呼び出す処理を指定
        今回はdisplayMessage()を呼び出す
    -->
    <input type="text" id="message">
    <input type="button" value=" ^^) _旦~~" onclick="displayMessage();">
  </div>
  <script>
    /*
    onclick属性:対象要素がクリックされたときに属性値部分の処理が実行される
    今回はボタンがクリックされた時に「displayMessage()」が呼び出される
    */
    function displayMessage() {
      // テキストボックスに入力したメッセージをコンソールに表示
      var message = document.getElementById('message').value;
      console.log(message);
    }
  </script>
</body>

第２章：変数

変数の使い方

変数とは

変数はプログラム内で何度も使うであろう値を入れておく【箱】のようなもの。
変数内の値は変数名を指定して参照できる。
また変数内の値をいつでも変更することができる。

変数を作る：変数の宣言

var 変数名;

var：バリアブル（変数）

識別子の命名規則

識別子とは変数名やプロパティ名、関数名、オブジェクト名のこと。
変数名は命名規則に則っていれば好きにつけられる。

1文字目は半角英字、「_（アンダースコア）」「$（ドル）」のいずれか
　※数字はダメ
2文字以降は、半角英字と数字
名前に含まれる半角英字の大文字・小文字は区別される
「-（ハイフン）」、空白（スペース）は使用不可
予約語は使用不可
（break,case,catch,・・・・等々）

変数名をつけるときに気を付けること

名前からデータの中身を想像できるようにする
長すぎない、短すぎない
紛らわしい名前が混在しない
英単語にする
記法を統一する

記法	値	用途	記述例
camelCase記法	先頭単語の頭文字は小文字 2番目以降の単語の頭文字を大文字にする	変数名関数名	userName
snake_case記法アンダースコア記法	すべての単語の頭文字が小文字で、単語同士を「_」で連結する	変数名関数名	user_name
Pascal記法	すべての単語の頭文字が大文字	オブジェクト名	UserName

記法について

※「Pascal記法は変数名では使わない」という業界暗黙ルールがあるので注意

変数を使ってみる

プログラムは上から順に処理される → 「順次処理」
verキーワードで「name1」という変数を作成→「変数の宣言」

宣言のみで変数内に値はなし

var name1;

// 変数内に値が入っていない
console.log('１回目の出力');
console.log(name1);

// 代入
name1 = '田中';
console.log('２回目の出力');
console.log(name1);

// 代入で変数内の値を変更
name1 = '佐藤';
console.log('３回目の出力');
console.log(name1);

// 変数宣言と同時に値を代入
var name2 = '鈴木';
console.log('４回目の出力');
console.log(name1);
console.log(name2);

◆シングルクォートやダブルクォートで囲まれていない文字は変数名として扱われる。
　今回は「name1」変数を意味する変数名を指定した場合は変数内の値を
　コンソールに出力
◆変数内が空っぽなので「undefined(空)」// が出力される
◆「=」は右辺の値を左辺に代入する
　　→文字列「田中」を変数name1に代入
◆変数宣言と同時に値を代入

変数内に値が入っていない：undefined

作成した変数に値が入っていない状態で変数内を参照すると
「undefined」が返ってくる。
「undefined」が表示されたら変数内に値が入っていないため、値を入れるようにする

変数に値を入れる：代入

変数=値;

JavaScriptの「=」は「左辺と右辺が等しい」ではなく
「右辺の値を左辺に代入する」という意味

変数内の値を変更する：代入

値の入っている変数に値を代入すると変数内の値を変更することができる
代入によって値を変更すると元の値はなくなる

変数作成時に値を入れる：初期値;

　　　　　★よく使う！！

var 変数名=初期値;

変数作成時に値を代入する。変数作成時に入れた値のことを「初期値」と呼ぶ。

変数は必要であればいくつでも作成できる

変数を複数同時に作成：複数変数の宣言

var 変数名, 変数名, 変数名, …;

変数を複数同時に作成する場合は
「var」の後に必要な数の変数名をカンマ区切りで記述

var num1, num2, num3

var movie, year;

movie = "紅の豚";
year = 2021;

console.log(movie);
console.log(year);

変数：よくあるミス１

●作成していない変数を使用するとエラー：未定義変数の参照はエラー

var name1 = '田中';
var name3 = '鈴木';

console.log('１回目の出力');
console.log(name1);
console.log(name2);　// ← エラー
console.log(name3);

「ReferenceError」→ 参照できなかった
「name2 is not defined」→name2の値が見つからない

変数：よくあるミス２

●参照時点で作成されていないが、後で作成される変数の扱い

var num1 = 100;

console.log('１回目の出力');
console.log(num1);
console.log(num2);
console.log(num3);

var num2 = 200;
var num3 = 300;

console.log('２回目の出力');
console.log(num1);
console.log(num2);
console.log(num3);

「１回目の出力」の時点で
変数num2と変数num3は作成されていないが
「よくあるミス１」の時のようにエラーが出て処理が止まってはいない。

　⇒★変数num2と変数num3が、あとで作成されているから

JavaScriptは最初にプログラム内の変数をすべて確認し、その後最初の行から順に処理を開始する。
そのため、あとで作成する変数の使用ではエラーが起きず、プログラム内で作成されていない変数の使用では「よくあるミス１」のようにエラーが起き、処理が止まる。

プログラム内のどこかで作成される変数の場合は参照時点で変数に値が入っていないという扱いになり「undefined」がコンソールに表示される

JavaScriptはプログラム実行前に使用する変数をすべて把握している。
このことを「変数の巻き上げ（ホイスティング）」と呼ぶ

【まとめると…】

varキーワードによる変数宣言はホイスティングによってプログラム実行前に変数が作成される。それにより、変数宣言前の参照がエラーにならない。

ステップアップ

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>変数：ステップアップ</title>
</head>
<body>
<h1>変数：ステップアップ</h1>
<div class="box">
  <input type="text" id="message1">
  <input type="button" value="メッセージ表示" onclick="displayMessage();">
</div>
<div class="box">
  <p id="display1">表示箇所</p>
</div>
<script src="variable3.js"></script>
</body>
</html>

// ボタンがクリックされたときに呼び出される処理
function displayMessage(){
  var message1 = document.getElementById('message1').value;
　// 変数を宣言して値を代入
  // 変数に画面内のユーザ入力値を代入
  // 左辺：変数「message1」を宣言
  // 右辺：document.  ← 画面内の
  //      getElementById('message1'). ← id属性「message1」の
  //      value ← ユーザー入力値

  console.log(message1);
  // 変数内の値をコンソールに表示

  document.getElementById('display1').innerHTML = message1;
  // 代入処理：右辺の値を左辺に代入
  // 左辺：document.  ← 画面内の
  //      getElementById('display1'). ← id属性「diaplay1」p要素の
  //      innerHTML ← HTML要素内
  // 左辺：変数「message1」
}

onclick属性：クリック時にJavaScriptの処理を実行する

<対象要素 onclick="実行する処理内容">

onclick属性はJavaScript用に用意された属性でHTML

ID属性で指定したテキストボックスの入力値を取得

document.getElementByld('対象要素のID名').value;

（）内に文字列で対象要素のID名を記述して対象のテキストボックスを指定する。

<var message1 = document.getElementById('message1').value;>

ID名「message1」のテキストボックスの入力値を変数「message1」へ代入

ID属性で指定した要素の内容を変更する

document.getElementByld('対象要素のID名').innerHTML = 変更したい内容;

（）内に文字列で対象要素のID名を記述して対象の要素を指定する。
変更したい内容は文字列や数字、変数内の値などを使用する。

<document.getElementById('display1').innerHTML = message1;>

ID名「display1」の内容を変数「message1」が持つ値に変更している。

<p id="display1">表示箇所</p>

Q.コンソールに表示する・しないの使い分けは？

ユーザー入力値が入っているのか検証ツールで確認したり
エラーが出たり、表示がおかしいときに検証ツールで確認するため
調べたい値を見るときに使用する

カテゴリー

ブログ一覧

コメントは受け付けていません。

JavaScript 初日

第１章：JavaScriptの基本

スクリプトとは

JavaScriptとPHPの違い

クライアントサイドプログラム（JavaScript）

サーバサイドプログラム（PHP）

JavaScript記述時のルール

JavaScript記述法

インラインスクリプト – HTMLファイル内に記述

外部スクリプト – 外部ファイルに記述

よくあるミス

JavaScriptの記述位置

コメントの記述

補足（詳細はまた後々…）

onclick属性：クリック時にJavaScriptの処理を実行する

ID属性で指定したテキストボックスの入力値を取得

コンソールに変数の値を表示する

第２章：変数

変数の使い方

変数とは

変数を作る：変数の宣言

変数を使ってみる

変数内に値が入っていない：undefined

変数に値を入れる：代入

変数内の値を変更する：代入

変数作成時に値を入れる：初期値;

変数を複数同時に作成：複数変数の宣言

変数：よくあるミス１

変数：よくあるミス２

ステップアップ

onclick属性：クリック時にJavaScriptの処理を実行する

ID属性で指定したテキストボックスの入力値を取得

ID属性で指定した要素の内容を変更する

JavaScript　初日