記事概要
JavaScriptのメソッド・オブジェクト・関数について、まとめる。
まとめ(メソッド)
console.log
ブラウザのコンソールにテキストを表示させるメソッド
// 値「Hello」を出力する
console.log("Hello")
=>Hello
// 定義した値を出力する
const apple = "りんご"
console.log(apple)
=>りんご
lengthメソッド
文字数をカウントする
addEventListener()メソッド
イベント発火の際に、実行する関数を定義するためのメソッド
要素.addEventListener('イベント名', 関数)
// id'lists'のHTML要素を取得
// 取得したHTML要素を、変数'pullDownButton'に代入
const pullDownButton = document.getElementById("lists")
// 変数'pullDownButton'でクリックインベントのインベント発火
// コンソールに、「click OK」と表示される
pullDownButton.addEventListener('click', function() {
console.log("click OK")
})
// post起動後、コンソールに「イベント発火」と表示
function post (){
console.log("イベント発火");
};
// ページが読み込まれることをトリガーにした、loadイベントでイベント発火
// post処理が起動される
window.addEventListener('turbo:load', post);
setAttributeメソッド
指定した要素上に新しい属性を追加、または既存の属性の値を変更する
// nameは属性の名前を文字列で指定
// valueは属性に設定したい値を指定
要素.setAttribute(name, value)
<!-- 参照するHTML -->
<div id="test">テスト</div>
const sample = document.getElementById("test")
sample.setAttribute("style", "color: red;")
// <div id="test" style="color: red;">テスト</div> が取得できる
removeAttributeメソッド
指定した要素から、特定の属性を削除する
// nameは属性の名前を文字列で指定
要素.removeAttribute(name)
<!-- 参照するHTML -->
<div class="contents" id="apple">りんご</div>
const apple = document.getElementById("apple")
apple.removeAttribute("class")
// <div id="apple">りんご</div> が取得できる
getAttributeメソッド
要素上の指定した属性の値を戻り値として返す
要素.getAttribute('属性名')
<!-- 参照するHTML -->
<div class="contents" id="apple">りんご</div>
const apple = document.getElementById("apple")
apple.getAttribute("class")
// => contents というclass名が取得できる
open()メソッド
リクエストを初期化するメソッド
XHR.open("POST", "/posts", true);のように表記する
| 記述場所 | 目的 | 記述例 |
|---|---|---|
| 第一引数 | HTTPメソッドの指定 | POST |
| 第二引数 | パスの指定 | /posts |
| 第三引数 | 非同期通信のON/OFF | true |
function post (){
const form = document.getElementById("form");
form.addEventListener("submit", () => {
const formData = new FormData(form);
const XHR = new XMLHttpRequest();
XHR.open("POST", "/posts", true);
});
};
window.addEventListener('turbo:load', post);
---
// idを含む場合
XHR.open("GET", `/checks/revert/${articleId}`, true);
send()メソッド
リクエストを送信するメソッド
function post (){
const form = document.getElementById("form");
form.addEventListener("submit", () => {
const formData = new FormData(form);
const XHR = new XMLHttpRequest();
XHR.open("POST", "/posts", true);
XHR.responseType = "json";
XHR.send(formData);
});
};
window.addEventListener('turbo:load', post);
preventDefault()メソッド
既定のイベントを無効化するためのメソッド
既定のイベントとは、「投稿ボタンをクリックする」のようなものを指す
function post (){
const form = document.getElementById("form");
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(form);
const XHR = new XMLHttpRequest();
XHR.open("POST", "/posts", true);
XHR.responseType = "json";
XHR.send(formData);
});
};
window.addEventListener('turbo:load', post);
insertAdjacentHTMLメソッド
HTMLをある要素の指定した箇所に挿入する
第一引数に指定できるのは以下の4つ
| 指定可能な文字列 | 意味 |
|---|---|
| beforebegin | 要素の直前 |
| afterbegin | 要素内部の、最初の子要素の直前 |
| beforeend | 要素内部の、最後の子要素の直後 |
| afterend | 要素の直後 |
<挿入したい要素名>.insertAdjacentHTML(挿入したい位置,挿入したいHTML);
elements()メソッド
elementsインスタンスを作れる
const elements = payjp.elements();
elements.create()
入力フォームを作成できる
const hogeElement = elements.create('指定したいフォームのtype')
| 指定可能なtype | 説明 |
|---|---|
| card | カード番号入力欄、有効期限入力欄、CVC入力欄の順に横に並んだフォーム |
| cardNumber | カード番号入力欄 |
| cardExpiry | 有効期限入力欄 |
| cardCvc | CVC入力欄 |
※cardを指定してelementを生成した場合、同じelementsから他のtypeを指定してelementを生成できない
mountメソッド
引数で要素のid属性を指定し、指定した要素とelementインスタンスが情報を持つフォームとを置き換えるメソッド
const hogeElement = elements.create('指定したいフォームのtype')
// #sampleというid属性の要素とフォームを置き換える
hogeElement.mount('#sample')
createToken(element: Element, options?: object)メソッド
戻り値としてカード情報のトークンを取得できるメソッド
// createTokenメソッドの第一引数には、カード番号入力フォームとなっているelementインスタンスであるnumberElement
// then以降に、レスポンスを受け取ったあとの処理を記述
// 変数responseには、PAY.JP側からのレスポンスとステータスコードが含まれている
payjp.createToken(numberElement).then(function (response) {
if (response.error) { // 処理にエラーがない場合response.errorの値がnilとなることを利用して条件分岐
} else {
const token = response.id; // うまく処理が完了したときだけ、トークンの値を取得し送信アクションが行われる
console.log(token)
}
});
then()メソッド
非同期処理が成功した後に実行される処理を指定するためのメソッド
// 一般的に使用される形式
fetch(url)
.then(
// レスポンスボディをJavaScriptオブジェクトに変換する処理
)
.then(
// 変換後のオブジェクトを使用する処理
)
json()メソッド
レスポンスボディに格納されているデータを人の扱いやすい形式に変換するメソッド
0と1で表現されたデータを、UTF-8という文字表現のルールに沿ってJSONの文字列に変換し、そのJSONをパースしてJavaScriptオブジェクトに変換する
this
イベント発火元となった要素を取得できる
// 「pullDownButton」がイベント発火元
pullDownButton.removeAttribute("style")
// 「pullDownButton」を'this'に変更可能
this.removeAttribute("style")
debugger
ソースコードにdebuggerを記述することで、処理を一旦停止させる場所を指定できる
指定したブレークポイントまで処理が進むことで、処理を一時的に停止できる
処理停止状態で、特定の変数の値を確認したり、1行だけ処理を進めたりなど、幅広いデバッグが可能になる
removeメソッド
対象要素を削除するメソッド
対象要素.remove()
alertメソッド
ポップアップを表示するメソッド
「OK」ボタンのみが存在する
alert('アラートのメッセージ')
confirmメソッド
確認用のポップアップを表示するメソッド
「OK」「キャンセル」ボタンが存在する
window.confirm('表示する文章');
#=> 「OK」をクリックした場合にはtrueを返す
#=> 「キャンセル」をクリックした場合にはfalseを返す
window.URL.createObjectURL()
URLオブジェクトに対してcreateObjectURL()メソッドを使用すると、引数に渡した値を参照するURLを生成する
createElement()メソッド
HTML要素を生成するメソッド
const element = document.createElement('要素');
document.createElement('div');
// => <div></div>が生成される
document.createElement('input');
// => <input>が生成される
appendChild()メソッド
指定した親要素の中に要素を追加するメソッド
親要素.appendChild(追加する子要素);
const divElement = document.createElement('div');
const inputElement = document.createElement('input');
divElement.appendChild(inputElement);
// => <div><input></div>
まとめ(オブジェクト)
Arrayクラス
配列は、すべてArrayクラスから生成されている
Array.new(3, "a")
=> ["a", "a", "a"]
windowオブジェクト
ブラウザの情報を持っているオブジェクト。ブラウザの情報をもつため、ブラウザオブジェクトと呼ばれている
JavaScriptで予め定義されているメソッドやオブジェクトは全てwindowオブジェクトのプロパティであり、あらかじめ定義されているオブジェクトの最上位
ブラウザオブジェクトは下図のような階層構造になっている。
最上位のwindowオブジェクトを起点として、下位にその他のオブジェクトが属する構造になっている。ブラウザが起動するタイミングで自動的に生成され、JavaScriptからアクセスすることができる
オブジェクトの取得
window.alert("ブラウザオブジェクトの取得に成功！")
alert("windowは省略可能！")
documentオブジェクト
ブラウザ上で表示された情報(HTML)を操作する事ができるオブジェクト
非常に多くのプロパティやメソッドを持っており、documentオブジェクトはHTMLに対して何か処理をする際は頻繁に使用することになる
document.getElementById("id名")
DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つであり、引数に渡したidを持つ要素を取得する
id名はHTML上に必ず1つしか存在しないため、getElementは単数系
//id名がhogeの要素を指定する場合
document.getElementById("hoge")
document.getElementsByClassName("class名")
DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つであり、引数に渡したclassを持つ要素を全て取得する
HTML上に同じclass名を持つ要素は複数存在する可能性があるため、getElementsは複数形
//class名がfugaの要素を指定する場合
document.getElementsByClassName("fuga")
戻り値は、HTMLCollectionというオブジェクト
<!-- 取得するHTML情報 -->
<ul class="hidden" id="modal">
<li class="modal-list">リスト1</li>
<li class="modal-list">リスト2</li>
<li class="modal-list">リスト3</li>
<li class="modal-list">リスト4</li>
</ul>
console.log(document.getElementsByClassName("modal-list"))
// => HTMLCollection(4) [li.modal-list, li.modal-list, li.modal-list, li.modal-list]
document.querySelectorAll("セレクタ名")
DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つであり、引数に渡したセレクタを持つ要素を全て取得する
//class名がfugaの要素を指定する場合
document.querySelectorAll(".fuga")
//id名がhogeの要素を指定する場合
document.querySelectorAll("#hoge")
//h1タグの要素を指定する場合
document.querySelectorAll("h1")
戻り値は、NodeListというオブジェクト
<!-- 取得するHTML情報 -->
<ul class="hidden" id="modal">
<li class="modal-list">リスト1</li>
<li class="modal-list">リスト2</li>
<li class="modal-list">リスト3</li>
<li class="modal-list">リスト4</li>
</ul>
console.log(document.querySelectorAll(".modal-list"))
// => NodeList(4) [li.modal-list, li.modal-list, li.modal-list, li.modal-list]
document.querySelector("セレクタ名")
DOMツリーから特定のHTMLの要素を取得するためのメソッドの1つであり、引数に渡したセレクタを持つ要素のうち、1番最初に見つかった要素1つを取得する
//id名,class名,タグ名の指定方法は、querySelectorAllメソッドと同じ
document.querySelector("セレクタ名")
FormDataオブジェクト
フォームに入力された値を取得できる
new FormData(フォームの要素);と記述することでオブジェクトを生成し、引数にフォームの要素を渡すことで、そのフォームに入力された値を取得できる
// ビューファイルのform_withメソッドに、id"form"を設定
function post (){
const form = document.getElementById("form");
form.addEventListener("submit", () => {
const formData = new FormData(form);
});
};
window.addEventListener('turbo:load', post);
XMLHttpRequestオブジェクト
JavaScriptを用いてサーバーとHTTP通信を行うときに利用する
// ビューファイルのform_withメソッドに、id"form"を設定
function post (){
const form = document.getElementById("form");
form.addEventListener("submit", () => {
const formData = new FormData(form);
const XHR = new XMLHttpRequest();
});
};
window.addEventListener('turbo:load', post);
innerHTMLプロパティ
HTML要素の取得や書き換えを行える
<!-- 参照するHTML -->
<div class="contents" id="apple">りんご</div>
const apple = document.getElementById("apple")
console.log(apple.innerHTML)
// => りんご
apple.innerHTML = "青リンゴ"
console.log(apple.innerHTML)
// => 青リンゴ
responseTypeプロパティ
レスポンスのデータフォーマット(＝どのような形式のデータにするか)を指定するプロパティ
リクエストを送信する際に、レスポンスで欲しいデータフォーマットをあらかじめ指定しておく必要がある
function post (){
const form = document.getElementById("form");
form.addEventListener("submit", () => {
const formData = new FormData(form);
const XHR = new XMLHttpRequest();
XHR.open("POST", "/posts", true);
XHR.responseType = "json";
});
};
window.addEventListener('turbo:load', post);
onloadプロパティ
リクエストの送信が成功したときに呼び出されるプロパティのこと
onloadプロパティで、リクエストの送信に成功したときに行う処理を定義する
responseプロパティ
サーバーからのレスポンスに関する情報が格納されたプロパティのこと
function post (){
const form = document.getElementById("form");
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(form);
const XHR = new XMLHttpRequest();
XHR.open("POST", "/posts", true);
XHR.responseType = "json";
XHR.send(formData);
XHR.onload = () => {
console.log(XHR.response);
};
});
};
window.addEventListener('turbo:load', post);
statusプロパティ
返されたHTTPステータスコードを格納する
// 200以外のHTTPステータスコードが返された場合はエラーメッセージが表示される
if (XHR.status != 200) {
alert(`Error ${XHR.status}: ${XHR.statusText}`);
return null; // JavaScriptの処理から抜け出す
};
Number()オブジェクト
JavaScriptで数値などを扱う際に使用するオブジェクト
Numberの引数に文字列としての数字を渡すと、数値として返す
まとめ(関数)
forEach関数
配列に格納されている要素1つひとつに対して、繰り返し処理を行う場合に用いられる関数
配列.forEach( function(value){
// 処理の記述
})
fruits = ["apple", "orange", "grape"]
fruits.forEach( function(item) {
console.log(item)
})
/*
実行結果は下記
apple
orange
grape
*/
まとめ(API)
fetch
JavaScriptでHTTPリクエストを送信するためのAPI
XMLHttpRequestオブジェクトの後継として設計され、XMLHttpRequestオブジェクトよりシンプルなコードで実装できる
fetch(url, option)
オプションオブジェクトは3つあり、これらを組み合わせてリクエストを送信する
| オプションオブジェクト | 説明 |
|---|---|
| method | HTTPリクエストのメソッドを渡す |
| headers | リクエストの詳細情報をオブジェクトリテラル(ハッシュのこと)で渡す。複数指定可能であり、一般的には、送信する情報の種類や誰が送信しているかを示す認証情報を指定する |
| body | 送信するデータを渡す |
let form = document.getElementById('generation-form');
const token = document.querySelector('meta[name="csrf-token"]').content;
const formData = new FormData(form);
fetch(form.action, {
method: 'POST',
headers:{
'Accept': 'application/json',
'X-CSRF-Token': token
},
body: formData
});