window.historyでアニメーションをつくってみた

この記事は [J2complexed Advent Calendar 2017](http://qiita.com/advent-calendar/2017/j2complexed) の3日目です。

## window.historyのこと、知ってますか？
ブラウザの履歴を制御するhistoryオブジェクトです。
簡単に説明をします。

### window.history.back()
履歴情報の前のページに戻ります。
`window.history.go(-1)` でも同じように戻ります。

### window.history.forward()
履歴情報の次のページへ進みます。
`window.history.go(1)` でも同じように進みます。

### window.history.pushState()
履歴情報を追加します。

### windwos.history.replaceState() 
履歴情報を書き換えます。

これを使ってアドレスバーにアニメーションを作ってみようと思います！

## 準備

ここらへんは普通なので、用意したファイルだけご紹介します。

```package.json
{
  "name": "browser_history_animate",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build": "babel src -d dest",
    "dev": "lite-server"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-es2015": "^6.24.1"
  },
  "dependencies": {
    "lite-server": "^2.3.0"
  }
}
```

```.babelrc
{
  "presets": ["es2015"]
}
```

```index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Browser Histry Animation</title>
</head>
<body>
<script src="./dest/index.js"></script>
</body>
</html>
```

```src/index.js
const christmasTree = '🎄'
const smile = '😀'
const sleep = '😴'
const zzz = '💤'
const santa = '🎅'
const present = '🎁'
const space = '　'
let _history = ['']

_history.push (christmasTree + space + space + space + space + space + space + space + space + space + space + sleep + zzz)
_history.push (christmasTree + santa + space + space + space + space + space + space + space + space + space + sleep + zzz)
_history.push (christmasTree + space + santa + space + space + space + space + space + space + space + space + sleep + zzz)
_history.push (christmasTree + space + space + santa + space + space + space + space + space + space + space + sleep + zzz)
_history.push (christmasTree + space + space + space + santa + space + space + space + space + space + space + sleep + zzz)
_history.push (christmasTree + space + space + space + space + santa + space + space + space + space + space + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + santa + space + space + space + space + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + space + santa + space + space + space + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + space + space + santa + space + space + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + space + space + space + santa + space + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + space + space + space + santa + present + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + space + space + space + space + present + sleep + zzz)
_history.push (christmasTree + space + space + space + space + space + space + space + space + space + present + smile)

let count = 0;
window.history.replaceState (null, null, _history [count])

const intervalID = window.setInterval (animateBrowserHistory, 1000)
function animateBrowserHistory ()
{
  count++
  if (count > 13) {
    count = 0
  }
  window.history.replaceState (null, null, _history [count])
 }
```

chromeで見るとこんな感じです。

![history_animate.gif](https://qiita-image-store.s3.amazonaws.com/0/109382/78821c83-417e-b1d8-cafa-d52bb9845702.gif)

クリスマス気分が少しは出たでしょうか。
味気ないアドレスバーにちょっと遊び心を足したいときにどうぞ。