こんにちは、フロントエンドエンジニアのはっちゃんです。
今回は短いですが、地味に知らなかったことを紹介しようと思います。
codepenで、アニメーションや、ちょっとしたゲームを作ったりしたとき……わざわざ ctrl + R を押さなくても、js上でリロードできる仕様にしたいと思ったことはありませんか？
これ、実はとっても簡単に実現できたんです。
以前作ったもので実装しているので紹介します
はい。これです。
See the Pen
pull out animation by k_hatsushi (@hatsushi_kazuya)
on CodePen.
先日の公開された私の記事内にあるものなのですが、地味に社内で気に入ってくれた方が多かったwebアプリ（？）です。
「phina.js」を使って毛を抜くアクションを作ってみよう【いろんな動きを作ってみようシリーズ】
はっちゃん
この、毛を抜いた後に出てくる「もう一回抜く」のボタンで実装しています。
コード
それではコードの一部を抜粋して、紹介します。
// codepenをリセット
document.querySelector('#js-btn').addEventListener('click', () => {
history.go(0);
});このhistory.go(0);がその部分です。
これはhistory APIの持つ「go」というメソッドで、引数に数字を渡すと、その数字分ブラウザの履歴を戻すメソッドです。
0を入れると、今見ているページに戻ることになるので、結果リセットされるというわけです。
1行で書けてとてもお手軽ですね！
まとめ
いかがでしたか？ codepenで書いているときに「これどう実装するんだ……？」と思ってググってみたら、いろいろと使えそうだったのでご紹介させていただきました！ 何かの参考になれば幸いです。はっちゃんでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
