JavaScriptでlocation.replaceメソッドでURLを置換する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでlocation.replaceメソッドでURLを置換する方法について現役エンジニアが解説しています。location.replaceメソッドとは指定したURLにページを遷移させるメソッドです。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
JavaScriptでlocation.replaceメソッドでURLを置換する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事を見てみましょう。
なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。
今回は、JavaScriptに関する内容だね！
どういう内容でしょうか？
JavaScriptでlocation.replaceメソッドを使ってを現在のURLを置換する方法について詳しく説明していくね！
お願いします！
目次
location.replaceメソッドとは
location.replaceメソッドとは、指定したURLへページを遷移させることのできるメソッドです。
このメソッドを利用するとJavaScriptによって任意のURLへ画面遷移させることが可能です。
また、location.replaceメソッドによってページを遷移した場合は履歴が残らないためブラウザの戻るボタンで前のページへ戻ることができません。
location.replaceメソッドの使い方
location.replaceメソッドは以下のように移動先URLを指定して使うものです。
location.replace(移動先URL)
現在のURLを置換する方法
現在のURLを置換し、ページ遷移させるには以下のように移動先URLを引数に指定しましょう。
location.replace("./page1.html");
実際に書いてみよう
location.replaceメソッドを使用し、ページ遷移を行うコードを実際に記述します。
今回は、任意のURLを入力しボタンを押下した際に入力されたURLへページ遷移するコードを書いてみましょう。
HTML
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<input id="url" />
<button id="page">ページ遷移</button>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<script>
$('#page').on('click', function() {
var url = $('#url').val();
location.replace(url);
});
</script>
</body>
</html>
コードを解説していきます。
画面には文字入力欄とページ遷移ボタンを配置していましょう。
ページ遷移ボタンが押されると、文字入力欄に入力された値をlocation.replaceメソッドの引数に渡し、ページ遷移を行います。
まとめ
今回のlocation.replaceメソッドを使って現在のURLを置き換える方法を含め、JavaScriptを使ったページ遷移やURLの置き換えは様々な場面で使う機会が出てくるため、是非覚えておきましょう。
執筆してくれたメンター
| 黒木一志（くろきかずし）
TechAcademyジュニアのゲームアプリコースを担当しています黒木です。 現在は会社員としてシステムエンジニアをしております。 会社ではC#にて業務系アプリの開発を行っておりますが、過去にはCakePHP、Ruby on Railsを使ったWebアプリ開発を行っておりました。 プライベートではバンド演奏や本を読んだり映画を見たりしております。 最近はスケボーにハマってます。 みなさんにプログラミングの楽しさをお伝え出来たらと思っております。 何卒宜しくお願い致します。 |
JavaScriptでlocation.replaceメソッドでURLを置換する方法がよく分かったので良かったです！
ゆかりちゃんも分からないことがあったら質問してね！
分かりました。ありがとうございます！
TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。
