こんにちは。ファガイです。
今回はあまりJavaScriptを理解できてない私がなんとなく知っておかなきゃいけないなと思うことをメモしたものです。
基礎に近い部分
JavaScirptはほぼすべてのオブジェクトがObjectのインスタンス。
クラスの概念は無いが、prototypeというプロパティが用意されている。関数を拡張してクラスのようにすることも可能だが、その関数オブジェクトが作られるたびにコピーされてしまうのでメソッドはprototype以下に記述してメモリ消費をへらす。
標準のJavaScriptのビルトインオブジェクトは→https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects
に詳しく載っている
これらのビルトインオブジェクトはある程度知ってたほうが良さそう。
DOMのオブジェクトはhttps://developer.mozilla.org/ja/docs/Web/API/Document_Object_Model
に詳しく載っている。
Document_Object_Model、通称DOMはHTMLやSVG、XMLなどの文章をオブジェクトとしてモデリングするときに利用される。標準ビルトインオブジェクトではない。
HTMLに絞ったDOMのオブジェクトはhttps://developer.mozilla.org/ja/docs/Web/API/HTML_DOM_API
に載っている。
HTMLの要素はHTMLElementオブジェクトのサブクラス。その親にはElement、Node、EventTargetがありaddEventListenerとかは一番の親であるEventTargetイオブジェクトが保有している。
要素を取得してくるときはDocumentオブジェクトから。getElementByIdとかはDocumentオブジェクトのメソッド。
Webのコードを書く場合は、Web APIが利用できる。https://developer.mozilla.org/ja/docs/Web/API に一覧が載っている。前述のHTMLElementとかもそう。
PHPから入ると、分割代入の構文を理解しておかないとつらい。
PHPには配列の分割代入が存在します。昔ながらで言えばlist関数ですね。
$array = ['apple', 'banana'];
list($a, $b) = $array;
echo $a; // apple
echo $b; // bananaJavaScriptには、配列の分割代入に加えてオブジェクトの分割代入が存在します。
const obj = {a: 10, b: 20, c: 30};
const {a, c} = obj;
console.log(a); // 10
console.log(c); // 30この分割代入はオブジェクトの中身のプロパティを取得して展開できるということでJavaScriptではよく使われている気がします。
import { useRouter } from 'next/router'こういうのも分割代入が使われていますし、以下のようなときにも分割代入が利用されています。
axios.get('path/top/endpoint').then({ data } => {
console.log(data)
})async functionの戻り値にawaitは不要
async functionは非同期関数のこと。awaitはasync function内でのみ有効。意外と忘れがち。.then()を代用する形で使うことができる。
async function getProcessedData(url) {
let v
try {
v = await downloadData(url)
} catch(e) {
v = await downloadFallbackData(url)
}
return processDataInWorker(v)
}理由はasync functionの返値は暗黙的にPromise.resolveでラップされているため。
アロー関数は案外制約もある
ちょっと関数を便利にかけたり、thisの扱いを楽したりできるアロー関数。
アロー関数はコンストラクタとしては使えない、prototypeもない。thisは持たない。
アロー関数はメソッドではない関数向けに使う。
コメント