GOODTABLE鎌倉オープン
GOODTABLE鎌倉オープン
2019.04.11
#184
それいけ!フロントエンド

ページのリロードも必要なし!codepenを元の状態に戻したいときの裏ワザ、教えます

はっちゃん

こんにちは、フロントエンドエンジニアのはっちゃんです。

今回は短いですが、地味に知らなかったことを紹介しようと思います。

codepenで、アニメーションや、ちょっとしたゲームを作ったりしたとき……わざわざ ctrl + R を押さなくても、js上でリロードできる仕様にしたいと思ったことはありませんか?

これ、実はとっても簡単に実現できたんです。

以前作ったもので実装しているので紹介します

はい。これです。

See the Pen
pull out animation
by k_hatsushi (@hatsushi_kazuya)
on CodePen.

先日の公開された私の記事内にあるものなのですが、地味に社内で気に入ってくれた方が多かったwebアプリ(?)です。

この、毛を抜いた後に出てくる「もう一回抜く」のボタンで実装しています。

コード

それではコードの一部を抜粋して、紹介します。

// codepenをリセット
document.querySelector('#js-btn').addEventListener('click', () => {
	history.go(0);
});

このhistory.go(0);がその部分です。

これはhistory APIの持つ「go」というメソッドで、引数に数字を渡すと、その数字分ブラウザの履歴を戻すメソッドです。

0を入れると、今見ているページに戻ることになるので、結果リセットされるというわけです。

1行で書けてとてもお手軽ですね!

まとめ

いかがでしたか? codepenで書いているときに「これどう実装するんだ……?」と思ってググってみたら、いろいろと使えそうだったのでご紹介させていただきました! 何かの参考になれば幸いです。はっちゃんでした。

LIGにWeb制作について相談してみる