JavaScriptでlocation.replaceメソッドでURLを置換する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでlocation.replaceメソッドでURLを置換する方法について現役エンジニアが解説しています。location.replaceメソッドとは指定したURLにページを遷移させるメソッドです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptでlocation.replaceメソッドでURLを置換する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

 

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事を見てみましょう。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptでlocation.replaceメソッドを使ってを現在のURLを置換する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

目次

  1. location.replaceメソッドとは
  2. location.replaceメソッドの使い方
  3. 現在のURLを置換する方法
  4. 実際に書いてみよう
  5. まとめ

 

location.replaceメソッドとは

location.replaceメソッドとは、指定したURLへページを遷移させることのできるメソッドです。

このメソッドを利用するとJavaScriptによって任意のURLへ画面遷移させることが可能です。

また、location.replaceメソッドによってページを遷移した場合は履歴が残らないためブラウザの戻るボタンで前のページへ戻ることができません。

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

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では、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、参加してみてください。