javascript
注意点
- htmlファイルのscriptタグの中に書く
- scriptタグのにjsファイルを読み込ませる →
<script src="index.js"></script> - head, bodyのどちらかに入れる → bodyの一番下がベストプラクティス
文法
- プロパティ
- メソッド
let abc = "abc def";
// プロパティ。末尾に()がつかない
console.log(abc.length);
// メソッド。末尾に()がつく
console.log(abc.toUpperCase());
基本
- 出力
console.log("出力したい内容")
console.trace("出力したい内容") // スタックトレースと一緒に出力
- 時間計測
console.time("timerName") // 計測開始
console.timeEnd("timerName") // 計測終了
console.timeLog("timerName") // 途中経過
// 例
console.time("timerName")
page.waitForTimeout(10000)
console.timeEnd("timerName")
- 変数
let height; // 変数宣言のみ
let height = 170 // 変数
var height = 170 // 変数。古い記法で基本的に非推奨
const height = 170 // 定数
- テンプレートリテラル(テンプレート文字列ともいう)
- 変数と文字列などを組み合わせて出力する内容が書きやすい
- 変数は
${変数名}で表示し、`(バッククォート)で文を囲む
- 変数は
- 変数と文字列などを組み合わせて出力する内容が書きやすい
const height = "170"
// 通常の書き方
console.log("身長は" + height + "です。")
// テンプレートリテラル
console.log(`身長は${height}です。`)
- 型確認
typeof(cy.url())
- 型変換
// string型へ変換
String(値)
値.toString()
// number型へ変換
Number('1234')
// number型へ変換し、小数点を切り捨て。第2引数は10進数の10
parseInt('24.82', 10);
// ロケール（=言語、国、地域、などを表現する、例：ja）に合わせた数値表現を行う。日本語や英語の場合には数値を3桁カンマ区切りにする
(123456).toLocaleString() // '123,456'
// jsonへ変換
JSON.stringify(ターゲット)
// jsonから変換
JSON.parse(ターゲット)
- 配列
let sample = [1,2,3]
let sample = New Array(1,2,3) // 一般的でない定義方法
sample.push(4) // 末尾に追加 [1,2,3,4]
sample.unshift(0) // 先頭に追加 [0,1,2,3,4]
sample.pop() // 末尾を削除 [0,1,2,3]
sample.shift() // 先頭を削除 [1,2,3]
let sample1 = [1,2,3]
let sample2 = [4,5,6]
sample1.push(sample2) // 追加対象も配列として追加 [1,2,3,[4,5,6]]
sample1.push(...sample2) // 追加対象を配列解除して追加 [1,2,3,4,5,6]
- オブジェクト型
// オブジェクト型の中にオブジェクト型や関数も定義可能
const person = {
hobby: {
music: guitar,
sports: baseball
},
getHobby: function() {
console.log(this.hobby.music + this.hobby.sports)
}
};
// キーの指定の仕方1
person.hobby.music = 'organ'
// キーの指定の仕方2。キー名が動的な場合などに使える
const keyName = 'hobby';
person[keyName].music = 'piano'
// クラス内の関数は__proto__に格納されている
// そのため、下記のように丁寧に書き出して呼出も可能だが一般的には省略
person.__proto__.getHobby()
- クラス
// 変数化しなくてもOK
let クラス名 = class {
constructor(値) {
this.メンバ変数 = 値
this._メソッド名()
}
メソッド名() {
処理内容
}
// プライベートメソッドの暗黙的表示
_メソッド名() {
処理内容
}
};
// クラス初期化
let 変数 = new クラス名(値)
- thisとグローバルオブジェクトとbind
- thisは直近で呼ばれているプロジェクトに依存する
- class内で呼ばれているのであればclassを参照
- グローバルオブジェクト内で呼ばれていればグローバルオブジェクトを参照
.bind(指定クラス名(thisもあり))とすることでそのクラス内のthisを指定クラス名とする
- thisは直近で呼ばれているプロジェクトに依存する
// 1 クラス外でthisを呼ぶとグローバルオブジェクトを対象とする
console.log(this)
let sampleClass = class {
constructor(値) {
this.メンバ変数 = 値
this._メソッド名()
}
// 2 このthisはsampleClassを参照
console.log(this)
// setTimeoutはグローバルオブジェクトのためwindowを頭につけても動作する
// ただ、グローバルオブジェクトの関数は呼出時に省略可能なので慣例的にwindowとつけない
// 3 下記の場合はwindowのグローバルオブジェクト内でthisが呼ばれている
window.setTimeout(function abc() {
console.log(this)
}, 2000)
// 4 .bind(this)と付与することで.bind(this)の同階層(setTimeout内ではなくsetTimeout外)と同等のthisを付与することになる
window.setTimeout(function abc() {
console.log(this)
}.bind(this), 2000)
};
- クラス継承
class 親クラス名 {
constructor(値) {
this.メンバ変数 = 値
this._メソッド名()
}
メソッド名1() {
処理内容
}
// プライベートメソッドの暗黙的表示
_メソッド名() {
処理内容
}
}
class extends 親クラス名 {
constructor(値) {
super(値);
}
メソッド名() {
// 親クラスのメソッド呼び出しの場合
super.親クラス名メソッド名
}
// 親クラスの同名メソッドを上書きし、再定義(オーバーライド)
メソッド名1() {
console.log("オーバーライド")
}
}
繰り返し
- for文
// for 基本文
for (let i = 0; i < 10; i++) {
console.log(i);
}
// 配列を扱う場合
const array = [1, 2, 3, 4, 5]
// for in はキーを出力
for (let i in array) {
console.log(arr[i]);
}
// for of はバリューを出力
let arr = ["aa", "bb", "cc"]
for (let v of arr) {
console.log(v);
}
- forEach
- 以下の引数が自動で渡される
- 第1引数 = 値(バリュー)
- 第2引数 = 添字(キー)、
- 第3引数 = 配列
- 以下の引数が自動で渡される
const array = [1, 2, 3, 4, 5]
array.forEach(function(value, index, array ) {
console.log(`バリューを3倍: ${value * 3}`)
console.log(`キー: ${index}`)
console.log(`配列: ${array}`)
})
// アロー関数の場合
array.forEach(value => {
console.log(value * 3)
})
// 引数1つ、処理内容1行ならアロー関数を用いて以下まで省略可能
array.forEach(v => console.log(v * 3))
- reduce
- 第1引数 = 配列で読み込んだ値を繋ぎ合わせた値 ※最初はそのままの値
- 第2引数 = 配列で読み込んだ値の次の値
- 第3引数 = 読み込み始める配列の値(オプション)
const str = "sample";
const strArry = str.split("");
const result = strArry.reduce((accumulation, current ) => {
console.log(`accumulation: ${accumulation}`);
console.log(`current: ${current}`);
return `${accumulation}_${current}`
})
console.log(`result: ${result}`);
// 以下が出力される
accumulation: s
current: a
accumulation: s_a
current: m
accumulation: s_a_m
current: p
accumulation: s_a_m_p
current: l
accumulation: s_a_m_p_l
current: e
result: s_a_m_p_l_e
// 配列の先頭に組み込みたい場合は第3引数に空文字を指定
const result = strArry.reduce((accumulation, current ) => {
console.log(`accumulation: ${accumulation}`);
console.log(`current: ${current}`);
return `${accumulation}_${current}`
}, "")
// 配列の先頭に組み込みたい場合は第3引数に空文字を指定
accumulation:
current: s
accumulation: _s
current: a
accumulation: _s_a
current: m
accumulation: _s_a_m
current: p
accumulation: _s_a_m_p
current: l
accumulation: _s_a_m_p_l
current: e
result: _s_a_m_p_l_e
- while
while (条件) {
// 処理内容
}
if文
if (num > 80) {
console.log("numは80より大きいです。");
} else if (num >= 60) {
console.log("numは60～80の間です。");
} else {
console.log("numは60未満です。");
}
// ===(イコール3つ) はデータ型も含めて比較
if (1 === '1') {
console.log("このパターンはfalse");
// ==(イコール2つ) はデータ型含めず比較
} else if (1 == '1') {
console.log("このパターンはtrue");
// 暗黙的型変換
if (text) {
console.log("OK")
}
- switch文
let pref = 'Osaka';
switch (pref){
case 'Tokyo':
console.log('住所は東京都です');
break;
case 'Osaka':
console.log('住所は大阪府です');
break;
default:
console.log('住所はその他です');
}
抽出
- 部分一致
if ( str.match('sample') ) {
console.log("OK")
}
- 一部抽出
// 最後の文字列を抽出
"ABC31ABC52".slice(-1);
// 最後の文字列を除いて抽出
"ABC31ABC52".slice(0, -1);
// 前後のスペースを消去
" ABC31 ABC52 ".trim() // 'ABC31 ABC52'
" ABC31ABC52 ".trim() // 'ABC31ABC52'
- 数字のみを抽出
"ABC31ABC52".match(/\d+/g); // ['31', '52']
- 置換
"ABC31 ABC52".replace(/\s+/, ""); // スペースを消去 'ABC31ABC52'
関数
javascriptの特徴として関数を変数で定義できる
// この書き方は呼出行より後に書かれても呼出可能。javascriptでは関数の定義を先に確認してから実行文を上から読み込むため
function double ( num ) {
return num * 2
}
// 上記と同じで違う書き方。関数を変数として定義
// ただし、この書き方は呼出行より後に書かれたら呼出不可
const double = function ( num ) {
return num * 2
}
// 「無名関数(anonymous function)」 = 下記のように関数名を持たない関数
function ( num ) {
return num * 2
}
// デフォルト引数を設定する場合
function double ( num = 5 ) {
return num * 2
}
// 関数呼出
double(4);
- コールバック関数
ある関数を呼び出す時に、引数に指定する別の関数のこと。以下例でgreetingがコールバック関数となる
function greeting(name) {
alert(`Hello, ${name}`);
}
function processUserInput(callback) {
const name = prompt("Please enter your name.");
callback(name);
}
processUserInput(greeting);
- アロー関数
- 関数リテラル(匿名関数,無名関数ともいう)をシンプルに記述する手法をアロー関数という
- アロー関数は引数の丸かっこと処理内容の波かっこの間に
=>の記述が必須 - 以下の条件で省略できる部分がある
- 条件なし
functionの省略
- 処理内容が1行
- 処理内容の波かっこ
{}の省略 returnの省略
- 処理内容の波かっこ
- 引数が1つ & デフォルト引数なし
- 引数の丸かっこ
()の省略
- 引数の丸かっこ
- 条件なし
// 変更元となる基本アロー関数。functionを省略、引数の丸かっこ()と処理内容の波かっこ{}の間にアロー=>を配置
let getTriangle = ( base, height ) => {
return base * height / 2;
};
console.log('三角形の面積は' + getTriangle(10,2)); //三角形の面積は10
// ↑は下記の関数リテラルと同様
let getTriangle = function ( base, height ) {
return base * height / 2;
};
console.log('三角形の面積は' + getTriangle(10,2));//三角形の面積は10
// 処理内容が1行の場合、波かっこ{}省略記述が可能
let getTriangle = ( base, height ) => return base * height / 2;
console.log(getTriangle(10,2)); //10
// 処理内容が1行の場合、さらにreturn省略記述が可能
let getTriangle = ( base, height ) => base * height / 2;
console.log(getTriangle(10,2)); //10
// 引数が一つの場合、引数の丸かっこ()省略記述が可能
let getCircle = radius => radius * radius * Math.PI;
console.log(getCircle(10))//314.1592653589793;
// 引数がない場合はカッコを省略せずに記述
let show = () => console.log('Hello, world!');
show(); // Hello, world!
- 通常関数とアロー関数の比較表。通常関数の記述をアロー関数で記述した場合に省略できる箇所は赤文字で表記
| 通常関数 | アロー関数 | 補足 | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|