es6(javascript、js)でよく使うユーティリティについて
主観的にはなるが、es6で頻繁に利用する機能の実装を備忘録としてまとめていく。
日付の扱い
2017-09-11 13:51:01や2017/09/11 13:51:01のどちらでデータを扱うか不明なとき、また、日付データを使って9月11日といった表記が必要になることがある。
こういったケースでは与えらた日付データを正規表現で分解して配列として扱えるようにする。
const divideDateTime = dt => {
const m = dt.match(/(\d{4})*[-\/]*(\d{1,2})[-\/]*(\d{1,2}) *((\d{1,2}):(\d{1,2})(:(\d{1,2}))*)*/)
return [
m[1] ? parseInt(m[1], 10) : 0,
m[2] ? parseInt(m[2], 10) : 0,
m[3] ? parseInt(m[3], 10) : 0,
m[5] ? parseInt(m[5], 10) : 0,
m[6] ? parseInt(m[6], 10) : 0,
m[8] ? parseInt(m[8], 10) : 0,
]
}
なお、日付データを配列に変換し、曜日を取得したい場合は、下記のように1行で実現できる。
配列cは上記のdivideDateTimeの戻り値。
'日月火水木金土'[new Date(c[0], c[1], c[2]).getDay()]
URLパラメータ（クエリ文字列）を取得する
http://test.tk/index?a=1&b=2のようなURLのパラメータを取得したいときは、下記配列を返す関数を利用する。
export const queries = obj => {
let params = []
Object.keys(obj).map((key) => {
params.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
})
return params.join('&').replace(/%20/g,'+')
}
連想配列（ハッシュ）オブジェクトから値だけ配列に変換する
連想配列{ one:1, two:2, three:3 }とを配列[1, 2, 3]に変換したいときは以下を利用。
export const convert = obj => {
let ret = []
if (obj && Object.keys(obj).length > 0) {
ret = Object.keys(obj).map((key) => {
return obj[key]
})
}
return ret
}
emailのlocalpartを抽出する
emailのlocalpart（@よりも前の部分）を抽出したいときは以下。
export const local_part = email => {
const m = email.match(/(^[_a-z0-9-]+(\.[_a-z0-9-]+)*)@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/)
return m && m.length > 1 ? m[1] : ""
}
フォーマットされた日付データを文字列で取得
下記は現在の日付を2017-10-10 10:10:10といった形式で取得するときの関数。
月については+1をするのをたいてい忘れてしまう。
const formattedDate = () => {
const dt = new Date()
const y = dt.getFullYear()
const m = dt.getMonth() + 1
const d = dt.getDate()
const h = dt.getHours()
const i = dt.getMinutes()
const s = dt.getSeconds()
return `${y}-${m}-${d} ${h}:${i}:${s}`
}
ドラッグ&ドロップでファイルを保存
ドラッグとドロップとでイベントを発生させる領域が異なる場合、ドロップするエリアにドラッグイベントが発生すると、2つの領域でドラッグイベントが相互に発生し、結果的にUI上ではちらつきが発生する。
以下のように実装し、回避する。
ユーティリティとはいえないがこれも備忘録として記載。こちらが参考になった。
なお、app.bundle.jsのビルド方法についてはこちらを参照。
sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Dnd</title>
<style type="text/css">
.red { background: #ff0000; }
</style>
</head>
<body>
<div class="js-dnd-block" style="background: #8f8f8f; text-align: center; height: 300px; width: 400px;">
<div style="color: #ffffff">DnD</div>
<div class="js-drop-block" style="padding: 100px;">
<input type="file" name="line_image" class="js-file" multiple />
</div>
</div>
<footer>
<script type="text/javascript" src="app.bundle.js"></script>
</footer>
</body>
</html>
app.js
"use strict";
import Dnd from "./dnd"
class App {
static exec() {
const obj = new App()
obj.init()
}
init() {
const parent = document.querySelector(".js-dnd-block")
const drop = parent.querySelector(".js-drop-block")
if (parent && drop) {
const h = new Dnd(parent, drop)
}
}
}
App.exec()
dnd.js
"use strict"
export default class Dnd {
constructor(parent, drop) {
this.parent = parent
this.drop = drop
this.entering = false
this.observe_()
}
observe_() {
const changeColor = f => {
if (f) this.drop.className = "js-drop-block red"
else this.drop.className = "js-drop-block"
}
this.parent.addEventListener("dragenter", e => {
this.entering = true
}, false)
this.parent.addEventListener("dragover", e => {
this.entering = false
const finput = document.querySelector(".js-file")
finput.value = ""
changeColor(true)
}, false)
this.parent.addEventListener("dragleave", e => {
if (this.entering) {
this.entering = false
} else {
changeColor(false)
}
}, false)
document.addEventListener('dragover', e => {
e.preventDefault()
}, false)
document.addEventListener('drop', e => {
e.preventDefault()
changeColor(false)
}, false)
this.drop.addEventListener("drop", e => {
e.preventDefault()
changeColor(false)
const files = e.dataTransfer.files
const finput = document.querySelector(".js-file")
finput.files = files
}, false)
}
}