JavaScript
ブックマークレット
code: (js)
javascript:(function(){
// ここに書く
}())
文法
ググりにくい文法
タグつきテンプレート
code: (js)
// 関数の宣言と定義
function someFunction(strings, val) {
// 処理
}
// 呼び出し
const x = 'po'
someFunctionsometext${x}
基本文法・式
変数名
JavaScript の識別子は必ずアルファベットかアンダースコア (_) かドル記号 ($) から始まらなくてはなりません。続く文字は数字 (0-9) も使えます。JavaScript は大文字・小文字を区別するため、使えるアルファベットは "A" から "Z"（大文字）と "a" から "z"（小文字）です。変数 - JavaScript | MDN よくある慣習
DOMオブジェクトを入れる場合は $ を先頭につける
$someHeader, $nameInput みたいな
privateな変数・関数は先頭に _ をつける
$, _ は単体でも変数名として使われる
正規表現 (これはjs以外と同じ)
ライブラリ
lodash
jQuery
fetch API
code: (javascript)
veryLongText = ''
decoder = new TextDecoder()
;(async function () {
await fetch(url)
.then(res => res.body.getReader())
.then(reader => {
// ReadableStream.read()はPromiseを返す。
// Promiseは{ done, value }として解決される。
// データを読み込んだとき：doneはfalse, valueは値。
// データを読み込み終わったとき：doneはtrue, valueはundefined。
function readChunk({done, value}) {
if(done) {
// 読み込みが終わっていれば最終的なテキストを表示する。
console.log(veryLongText)
return
}
veryLongText += decoder.decode(value)
// 次の値を読みにいく。
reader.read().then(readChunk)
}
// 最初の値を読み込む。
reader.read().then(readChunk)
return
})
}());
tips
KeyboardEvents
キーイベントで送られてくる KeyboardEvent.key の一覧
入力に応じて入力欄の大きさを変える
window
ウィンドウの言語設定を取得
window.innerWidth
ウィンドウ幅を取得
正規表現
code: (javascript)
const pattern = /正規表現/オプション;
const pattern2 = new RegExp('正規表現','オプション');
code: (javascript)
const str = 'poyopoyo'
str.match(pattern) // string[] マッチする文字列の配列を返す
pattern.test(str) // boolean マッチする文字列があるかどうかを返す
Date
new Date('2019/02/28') の文字列パースはブラウザ別で実装が違っていてバグになりうるので、ISO8601形式に沿った形の文字列を入れたほうがいい
Axios
エラーハンドリング
エラーのレスポンス内容は返ってきたオブジェクトの中の response にある
code: (javascript)
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// The request was made and the server responded with a status code
// that falls out of the range of 2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// The request was made but no response was received
// error.request is an instance of XMLHttpRequest in the browser and an instance of
// http.ClientRequest in node.js
console.log(error.request);
} else {
// Something happened in setting up the request that triggered an Error
console.log('Error', error.message);
}
console.log(error.config);
});