はじめてのＪＳ
【参考】JavaScriptの基本について忘れやすいことをまとめました。
参考になれば幸いです。
MDN（開発者向け技術サイト）
JavaScript言語の単一行のコメント文は、//です。
複数行になる場合は「/* */」で囲みます。（CSSのコメントもこのようなコメント文）
・サーブレット：サーバ上で動作するJAVAのこと。
・イベント：Web上でユーザが行う様々な動作のこと。（例）マウスクリックや移動など。
・イベントハンドラ：イベントの発生をきっかけに何らかの処理を行うこと。
・JVM：OSに依存せずJAVAが動作するために存在する。
JavaScriptはWebで動作するものとクライアントPCで動作するものがある（図解例）
JavaScriptはWeb開発になくてはならない言語です。
プリミティブ型
Number型
・剰余演算：奇数、偶数の判定に使用する。例）１０％３は、１
意味：10の中に3が何回含まれ余りを返す。
・Not a Number：（非数字）Number型だが数値でないもの。例）0/0のように０で
除算した場合。
演算式での短縮した記載例を下記に紹介します。
・変数＝変数＋５と同じ意味として変数＋＝５；と記載してもよい。文末尾の
；（セミコロン）は省略可です。
・変数＋＋；→変数には、この時点では１+する前の値が入っているが再度変数の中身を
見ると１がプラスされている。下記よりワンステップ遅い。
・＋＋変数；→変数には即1+された値が入っている。
HTMLの内部に記述するJavaScriptの記述例
index.htmlの
<body>
<script>JSコードを記述</script>
</body>
JavaScriptを外部ファイルとしてHTMLで読み込む記述例
index.htmlの</body>の前に
<script src="***.js"></script>
 |
| ＡＩより生成 |
変数について
・変数の型は変えられる。大文字小文字は区別される。
・記載方法
わかりやすい変数名にする。
キャメルケース：一般的、複数の単語からなる変数を指定した場合、単語の区切りを
大文字にする記載方法。例）currentYear
スネークケース：複数の単語からなる変数を指定した場合、単語の区切りを
_（アンダーライン）で区切る記載方法。例）current_year
パスカルケース：複数の単語からなる変数を指定した場合、最初の文字を大文字に
する記載方法。例）Currentyear
・let：数値や文字、文字の場合は’’（シングルコーテーション、
ダブルコーテーションなどで）囲む。複数の変数を宣言する場合は
「let i,j,k」と記述しても可です。
・const：定数、例）円周率など変わらない数値。
変数として認められないもの
・単語と単語にスペースを入れる。例）current year
・数字で始まる。例）1user×、user〇
・エスケープシーケンスの例
//エスケープシーケンスの記述例
console.log('Hello I\'m hidehiko Anzai.');
上記のようにシングルコーテーションでの文字に「I'm」など文字として表したいときバックスラッシュを記述する。
メソッドの記載：変数.メソッド（）；、複数記載することができる（メソッドチェーン）
例）変数.メソッド.メソッド；メソッドの（）内は引数のないものや引数のあるメソッドも
あります。
引数なしのメソッドの一部を紹介します。
文字列.trim();：文字列の前後の空白をなくすメソッドです。
文字列.toLowerCase();：文字列を小文字に変換した文字を返す。
文字列.toUpperCase();：文字列を大文字に変換した文字を返す。
【小文字の変換と空白の操作についての例題】
【JavaScript】
const message = " TASTE THE RAINBOW! "; //文字列の代入
// 両方の空白を取り小文字に変換した値を変数へ
const whisper=message.trim().toLowerCase();
Switch文の記述例
//switch文の記述例
const n = 4;
switch(n) {
case 1:
console.log('one');
break;
case 2:
console.log('two');
break;
case 3:
console.log('three');
break;
default:
console.log('other');
break;
}
引数ありのメソッドの一部を紹介します。
'abcd'.indexOf('b');文字列（abcd）に引数bがの格納されている番号を返すメソッド
です。この場合１が返ってきます。ａが0番目bが1番目なので。例）const a='abcd';
a.indexOf(' ')===-1;//変数aが空白でない場合真となる。indexOf（）のOは大文字
です。文字列に指定された文字が含まれているか否かを判断する場合などに使用する。
プロパティの記載：変数.プロパティ；
・stringメソッドでできること
・文字列の検索・置換、大文字小文字の変換など
'abcd'.slice(1)：bcdが返ってくる。
'abcd'.slice(1,3)：bcが返ってくる。
'abcd'.slice(-1)：dが返ってくる。マイナスになると文字列の末尾の文字が返ってくる。
'abcd'.replace('b','B')：aBcdが返ってくる。
'abcd'.charAt(0)：先頭の値が返ってくる。例）aが返ってくる。
.concat()：配列の結合、引数あり。例）a.concat(b);→aの配列とbの配列の結合。
Math.pow(num,2);：num変数値の値を2乗する。
配列のメソッド
.every：すべての要素が満たされればtrueを返す。
.some：１つでも要素が満たされればtrueを返す。
.filter：配列の中を抽出する。抽出した値の新しい配列を作る。
.reducs：配列内の数字の合計。
【replaceメソッドを使った例】
変数に代入している一部の文字列を抽出し、一部の文字を変換し同じ変数に格納しなおす。【JavaScript】
const word = "skateboard"; //文字列を変数に代入
// 記載コード
let a=word.slice(5); //5文字目からを変数aに代入。
const facialHair = a.replace('o','e'); //boardをbeardにしfacialHairという変数に代入
テンプレートリテラルの記載で苦慮したので参考に記載します。
記載方法：`＄｛変数｝`
console.log('even')
}
※黄色の囲みはバックテック（日本語キーでは[Shift]＋[＠]）、シングルコーテーションでないので注意する。
【例題】
die1とdie2という2つの変数を用意し、6面のサイコロを模しています。それぞれの変数には1から6のランダムな値が入るようになっています。新たにrollという変数を作成し、以下の例のような文字列をテンプレートリテラルで代入してください：・die1が3で、die2が5であれば
'3と5が出たので、合計は8'
・die1が6で、die2が4であれば
'6と4が出たので、合計は10'
【JavaScript】
//ランダムな数値の生成した宣言：基本的にデフォルトのまま。
const die1 = Math.floor(Math.random() * 6) + 1; //1-6までのランダムな値
const die2 = Math.floor(Math.random() * 6) + 1; //1-6までのランダムな値
// 記載したコード
const roll1=`${die1+1}が3で、${die2+2}が5であれば'3と5が出たので、合計は8'`
const roll2=`${die1+4}が6で、${die2+1}が5であれば'6と4が出たので、合計は10'`
const roll='roll1'+'roll2';
Null：意図的に値がない、変数に代入できる。ないことがわかっている。
undefined：JS的にわからないを意味している変数には代入できない。
オブジェクトはメソッドやプロパティ（キーと値）の集合体。
オブジェクトの記入例）
const product={
name:'Icecream',
inStock:true,
price:198,
flavors:['grape', 'apple', 'cherry']
};
オブジェクト名、キー、値
オブジェクトの値にアクセスする場合
オブジェクト名[’キー’]でアクセスする、キーはシングルコーテーションで囲む必要がある。
オブジェクトリテラルの構文例）
const fullAddress = `${restaurant.address}, ${restaurant.city}, ${restaurant.state} ${restaurant.zipcode}`;
・fullAddress：変数・restaurant：オブジェクト名・address：キー。restaurant.addressはランダムな住所が返ってくる。すべて文字列が返ってくる。
・Windowオブジェクト：ブラウザを操作するために集めた機能をオブジェクト。
・Documentoオブジェクト：ノードのこと。Windowオブジェクト内でHTMLで表現されているコンテンツ保持のオブジェクト。
・Locationオブジェクト：現在表示されているページのロケーションに関する情報を提供する。
・Historyオブジェクト：ブラウザの履歴の操作。画面上のページの移動などの操作。
・Navigatorオブジェクト：ブラウザ名やバージョンなど、ブラウザ固有の情報を共有する。
・Screenオブジェクト：ディスプレイに関する情報を共有する。
・Formオブジェクト：Formに関する情報を共有する。Formの操作ができる。
・Anchorオブジェクト：ページ上のアンカー（<a>）に関する情報を共有する。
・Imagesオブジェクト：画像に関する情報を共有する。画像を操作する機能を提供する。
・Elementオブジェクト：HTMLドキュメントにおける要素（タグ）のこと。
比較「＝＝」（ダブルイコール）と「＝＝＝」（トリプルイコール）の違い。
「＝＝」：値は比較するが型は比較しない。
「＝＝＝」：値も型も比較する。
「！＝＝＝」：否定にする場合。
例）１＝＝’１’→これではtrue、１＝＝＝’１’一方トリプルでは、falseと比較する。
Web画面に表示させるプロンプトの一部。
・alert('テスト')→Web画面にテストと表示される。
・Let userInput prompt('数字を入力してください');
変数のuserInputは文字列なので数値で計算させる場合purseInt('userInput'とする必要がある。)
if文の例題
【JavaScript】
function isEven(num){
//ここから下にコードを記載 ↓↓↓↓
if (num%2===0) {console.log('even')
}
//この範囲でコードを記載 ↑↑↑↑}
【JavaScript】
【if文のネストの例】
論理演算（and：&&）を使った例
const mystery = 'Pas7sword';
if(mystery[0] === 'P' && mystery.length > 5 && mystery.indexOf('7') !== -1){
console.log("OK");
}
説明：先頭が大文字のPで文字の長さが5文字より長く文字列に7が含まれている
ならばOKを表示する。3つの演算がtrueの場合trueを返す。
論理演算（or：||）を使った例
記号は日本語配列のキーでしたら[Shift]+[￥]で|を表示させる。
const mystery = 'Password';
if(mystery[0] === 'P' || mystery.length > 5 ){
console.log("OK");
}
説明：先頭が大文字のPで文字の長さが5文字より長い場合OKを表示する。文字列がPasswordでなくPassでもOKが表示される。ORの場合は演算式のどちらかがtrueならばtrueを返す。
論理演算（not：!）を使った例
const mystery = 'abcd';
if(!(mystery[0] === 'P' || mystery.length > 5) ){
console.log("OK");
}
説明：先頭が大文字のPで文字の長さが5文字より長くないのでOKを表示する。notの場合は演算式を反転する。
truthy：trueとみなされる値。
falsy：false、０''（空白文字）、nall、undefined、Non以外はtruthy。
if文に演算式を記入する必要がない。
例）if（変数＝＝＝値）｛
trueの場合実行
｝
//通常と比較↑通常↓truthyの場合
if（変数）｛
truthyな値の場合実行
｝
記入方法：tetまたはconst 変数＝[]；↓からの配列
・配列の中身が、数値の場合：例）let test=[1,2,3];
・配列の中身は、文字列でも数値でもよい：let test1=[1,'a',3];
上記のコード例
・配列の中に格納された文字を抽出し先頭の文字を返す場合
上記の変数を例にすると、test1[1][0]と記入すると'a'が返ってくる。
※変数に代入した文字列は更新できないが、配列の場合は、更新できる。
push：配列の末尾に要素を追加する。例）変数.push('要素１','要素２');
pop：配列の末尾の要素を取り除く。引数はない。例）変数.pop();
shift：配列の先頭の要素を取り出す。引数はない。例）変数.shift();
unshift：配列の先頭に要素を追加する。例）変数.unshift(’追加する要素’);
・2次元配列の中身を変える場合のJavaScriptを紹介します。
下記コード中の配列の”Null”をYumiに置き換える場合。
const airplaneSeats = [
['Ruth', 'Anthony', 'Stevie'],
['Amelia', 'Pedro', 'Maya'],
['Xavier', 'Ananya', 'Luis'],
['Luke', null, 'Deniz'],
['Rin', 'Sakura', 'Francisco']
];
// 3番目の配列の中のされに１番目の値をNull→Yumiに置き換える
airplaneSeats[3].splice(1, 1, "Yumi");
forループの構文
for (let i = 1; i <= 6; i++) { //初期値、条件式、増減式
console.log('a b c d e f');
}
→結果「a b c d e f」が返る。
//for文の例for（初期化式；ループ継続条件式；増減式）
for (let i = 1; i <= 3;i++){
console.log(i);
}
//下のコードは25～0まで5ずつ減少すしconsole.logを表示させる。
for(let i = 25; i >=0; i-=5) {
console.log(i)
}
配列のループ
//配列
const colors = ['Red','Blue','Green'];
for(let i = 0;i < colors.length;i++){
console.log(colors[i]);
};
//配列2
//配列の値の合計値と平均値を算出
const scores = [100,90,80,70,60];
let sum = 0;
for(let i = 0; i < 5; i++) {
sum = sum + scores[i];
}
const average = sum/scores.length;
console.log(sum);
console.log(average);
※for文とwhile分の使われ方の違いは、ループ回数がわかっている場合（配列の数分やループ回数が決まっているなど）は、forループを記載しループ回数がわからない場合（ゲームの勝ち負けや将棋やユーザインプットなど）は、whileループが有効。
連想配列
変数の中にキーと値を持った配列。
起票：｛key:value,key:value,・・・・・｝
const user {name:'安西',gender:'男性',bathday:'1964/'}
例)
//連想配列
const user = {name:'Olivia',gender:'女性',birth:'1990/1/1'};
console.log(user.name);
console.log(user.gender);
console.log(user.birth);
whileやif文など使用した例）
let maximum = parseInt(prompt('数字を入力してください:')); while (!maximum) {
//数字かどうかのチェック。ループ処理
maximum = parseInt(prompt('エラーが起きました。有効な数字を入力してください:'));
}
const targetNum = Math.floor(Math.random() * maximum) + 1;
//ユーザが入力した値に対するランダムな値を算出。
let guess = prompt('一つ数字を決めました。数字を当ててみてください:');
//プロンプトを表示させユーザに入力させる。
let count = 1;
while (parseInt(guess) !== targetNum) {
//ユーザ入力値を数値にしたものとコンピュータの値を比較
if (guess === 'q') break; count++;
if (guess > targetNum) { guess = prompt('その数字より小さいです！もう一度当ててみてください:');
//ユーザの値が小さい場合。
}
else {
guess = prompt('その数字より大きいです！もう一度当ててみてください:');
//ユーザの値が大きい場合。
}
}
if (guess === 'q') {
//qを入力すると強制終了。
console.log('終了します');
} else {
console.log(`おめでとう！${count}回で当てました！`)}
//何回で当たったかを表示し終了する。
関数の定義：function 関数名(){
処理
}
関数の中で定義された変数は、関数の外からは参照できない。
関数の実行：関数名()で実行する。
//関数の定義↓
function printHeart(){
console.log('<3')
}
//関数の実行↓
printHeart()
リターンを使った例
function isShortsWeather(temperature) { //パラメータ（temperature）
if(temperature>=25){ //パラメータが25以上ならば
return true; //真をリターン
}
return false; //そうでなければ偽をリターン
}
numに１～７の数字に対応した曜日を返す関数のJSコードと出力例
オブジェクトの中にメソッドを定義し面積と長さを算出した例
エラー処理の記述例
try{
エラーの構文
}catch(err{
正しい構文)
}※errと言う変数を入れるとエラーメッセージが変数に受け取れる。
mapを使用した例下図のコメント修正箇所：firstnamesに代入しリターンでfirstのみ返す。
アロー関数の記述例：アロー関数は通常の関数の簡略化
アロー関数の場合
const greet = (name) => {
return `Hey ${name}!`;
};
通常の関数の場合
const greet = function(name) {
return `Hey ${name}!`;
};
出力例上記どちらでも下記となる。
greet("Hanako") //"Hey Hanako !"
filterメソッドやアロー関数・コールバック関数の使用例
JavaScriptで厳格なエラーチェックをするためJSコードの最初の行に記述する
'use strict';
・do whileの構文
do｛
条件式がtrueの時に実行する処理
｝while（条件式）；
//do while 文の記述例
let i = 1;
do {
console.log(i);
i++;
} while(i<=3);
様々なJavaScriptの関数使用例
//functionを使った関数例
function getRectangle(height,width) {
return height * width; //高さ×幅を計算しreturnで結果を戻す
}
console.log (getRectangle(3,5)); //結果を出力する。
---------------------------------------------------------------------
//関数リテラルを使った関数例
const getRectangle = function(height,width) { //変数に代入するが定数とする。
return height * width;
}
console.log(getRectangle(3,5));
-------------------------------------------------------------
//function コンストラクタを使った関数例
const getRectangle
= new Function('height','width','return height * width');
console.log(getRectangle(4,5));
-------------------------------------------------------
//アロー関数（関数リテラルの省略記号）の使用例
const getRectangle = (height,width) => { //=>。で引数と関数をつなぐ
return height * width;
}
console.log(getRectangle(5,5));
ＤＯＭ操作(Webサイトを動的に書き換える技術)
[HTML]
<body>
<p id="result">pタグの文字列です</p>
<input id="button" type="button" value="Get !">
<script src="main.js"></script>
</body>
^^^^^^^^^^^^^^^^^^^
[JS]
//ＤＯＭ操作：ＩＤをキーに要素を取得（getElementByIdメソッドを使用）
const e = document.getElementById('button');
e.addEventListener('click',() => {
// console.log('clicked!'); //botton が押されるとこの処理を実行
const result = document.getElementById('result'); //取得したいp要素が入る
console.log(result.innerText); //.innerTextプロパティでテキストだけを取得
},false);
----------------------------------------------------------------------------------
[HTML]
<body>
<div>element1(div)</div>
<p>element2(p)</p>
<div>element3(div)</div>
<span>element4(span)</span>
<div>element5(div)</div>
<input id="button" type="button" value="Get!">
<script src="main.js"></script>
</body>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[JS]
//タグ名（div）をキーに要素を取得（.getElementsByTagNameメソッドを使用）
const e = document.getElementById('button');
e.addEventListener('click',() => {
const elements = document.getElementsByTagName('div');
for(let i = 0; i < elements.length; i++) {
console.log(elements[i].innerText);
}
},false);
-----------------------------------------------------------------------------------
[HTML]
<body>
<input name="result" type="text">
<input id="button" type="button" value="Get!">
<!-- 外部のmain.jsファイルの読み込み-->
<script src="main.js"></script>
</body>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[JS]
//name属性をキーに要素を取得（.getElementsByNameメソッドを使用）
const e = document.getElementById('button');
e.addEventListener('click',() => {
const elements = document.getElementsByName('result'); //.getElementsByNameメソッドはHTMLCollectionと言う配列を返す。
console.log(elements[0].value); //配列を返すので添え字を使い.valueプロパティで値を表示
},false);
---------------------------------------------------------------------------------------------
[HTML]
<body>
<ul>
<li class="too">element1</li>
<li class="bar">element2</li>
<li class="too">element3</li>
<li>element4</li>
<li class="bar">element5</li>
</ul>
<input id="button" type="button" value="Get!">
<!-- 外部のmain.jsファイルの読み込み-->
<script src="main.js"></script>
</body>
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
[JS]
//class属性をキーに要素を取得（.getElementsByClassNameメソッドを使用）
const e = document.getElementById('button');
e.addEventListener('click',() => {
const elements = document.getElementsByClassName('too');
for(let i = 0; i < elements.length; i++) {
console.log(elements[i].innerText);
}
},false);
----------------------------------------------------------------------------------
・ノード：文章を構成する要素・属性・テキストと言ったオブジェクト。ＤＯＭ
ツリーの1つのオブジェクトがノード。
ノードの追加
[HTML]<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript basics</title>
</head>
<body>
<ul id="list">
</ul>
<input id="button" type="button" value="Add!">
<!-- 外部のmain.jsファイルの読み込み-->
<script src="main.js"></script>
</body>
</html>
[JS]
//ノードを追加する（例）
const e = document.getElementById('button');
e.addEventListener('click',() => {
const li = document.createElement('li'); //li要素の生成
const text = document.createTextNode('test'); //TEXTノードを生成、TESTをセットする。
li.appendChild(text); //liタグの要素にTEXTを追加する。
const ListElement = document.getElementById('list'); //idがlistのulタグにliを追加
ListElement.appendChild(li); //<li>test</li> liタグで囲まれたtestと言う文字列が追加
},false);
[実行結果]
ノードの置換（例）
[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript basics</title>
</head>
<body>
<ul>
<li id="oldList">old element</li>
</ul>
<input id="button" type="button" value="Replace!">
<!-- 外部のmain.jsファイルの読み込み-->
<script src="main.js"></script>
</body>
</html>
[JS]
//ノードを置換する（例）
const e = document.getElementById('button');
e.addEventListener('click',() => {
const newList = document.createElement('li'); //クリックのイベントハンドラの処理
newList.setAttribute('id' , 'newList'); //生成したノードにid属性newlistを付与
const newText = document.createTextNode('new element'); //テキストノードを生成
newList.appendChild(newText); //生成したノードをからのli要素の子ノードとして追加
const oldList = document.getElementById('oldList'); //置換前のoldListの参照をoldListに代入
const parentNode = oldList.parentNode; //親ノードulの参照を変数parentNodeに代入
parentNode.replaceChild(newList,oldList); //既存ノードoldListを新規に作成したli要素newListと置換
},false);
ノードの削除（例）
[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript basics</title>
</head>
<body>
<ul id="List">
<li>element1</li>
<li>element2</li>
<li>element3</li>
<li>element4</li>
<li>element5</li>
</ul>
<input id="button" type="button" value="Remove!">
<!-- 外部のmain.jsファイルの読み込み-->
<script src="main.js"></script>
</body>
</html>
[JS]
//ノードを削除する（例）
const e = document.getElementById('button');
e.addEventListener('click',() => {
const parentElement = document.getElementById('List'); //id listの要素を取得
const elements = parentElement.getElementsByTagName('li'); //タグがliのものの要素を取得
const removeIndex = elements.length - 1; //変数elementに入っている要素から削除するインデックス番号を取得、配列の要素は0からなのでー1としてます
// console.log(elements.length);
parentElement.removeChild(elements[removeIndex]); //要素の最後から削除
},false);
[結果]
ノードを動的に追加する（例）
[HTML]
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript basics</title>
</head>
<body>
<ul id="list">
</ul>
<input id="textbox" type="text">
<input id="button" type="button" value="Add!">
<!-- 外部のmain.jsファイルの読み込み-->
<script src="main.js"></script>
</body>
</html>
[JS]
//ノードを追加する（動的に追加する）
//テキストボックスに入れた要素をWebページに追加する。
const e = document.getElementById('button');
e.addEventListener('click',() => {
const textbox = document.getElementById('textbox');
const li = document.createElement('li'); //li要素の生成
const text = document.createTextNode(textbox.value); //テキストボックスの値をセットする。
const ListElement = document.getElementById('list'); //idがlistのulタグにliを追加
li.appendChild(text); //liタグの要素にTEXTを追加する。
ListElement.appendChild(li); //<li>test</li> liタグで囲まれたtestと言う文字列が追加
},false);
[結果]
コメント
コメントを投稿
貴重なご意見ありがとうございます。お客様から頂いたコメントは、紳士に受止め、今後の本ブログの運用に参考とさせてもらいます。