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

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

はっちゃん

はっちゃん

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

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

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

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

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

はい。これです。

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

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

コード

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

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

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

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

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

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

AD

まとめ

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

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

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

はっちゃん
はっちゃん フロントエンドエンジニア / 蓮子 和也

フロントエンドエンジニアのはっちゃんです。 雰囲気の良いチーム作りをしていけるよう頑張ります。 たまに外人に間違えられますが、鹿児島と千葉のハーフです。

このメンバーの記事をもっと読む
それいけ!フロントエンド | 213 articles
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL