TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでLocationオブジェクトのhash値を削除する方法を現役エンジニアが解説【初心者向け】
icon
icon
JavaScript

JavaScriptでLocationオブジェクトのhash値を削除する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでLocationオブジェクトのhash値を削除する方法について現役エンジニアが解説しています。Locationオブジェクトとはドキュメントの現在位置やURLの情報を持つオブジェクトで、hash値にはURLの#以降の文字列が格納されています。hashプロパティを変更する方法を解説します。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

JavaScriptでLocationオブジェクトのhash値を削除する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

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

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptでLocationオブジェクトのhash値を削除する方法について詳しく説明していくね！

大石ゆかり

お願いします！

 

目次

1時間でできる無料体験！

 

Locationオブジェクトとは

documentの現在位置についての情報を持つオブジェクトです。平たく言うと、URLの情報を持つオブジェクトということになります。

Locationオブジェクトのプロパティには、URLの情報に関するものが複数あります。たとえば検索キーワード（URLの?以降）の値を持つsearchや、httpsなどのプロトコルを持つprotocolなどがあります。

[PR] フロントエンドで副業する学習方法を動画で公開中

Locationオブジェクトのhash値について

URLの#の後の文字列が、Locationオブジェクトのプロパティのhashに格納されています。このhash値はHTMLのidを割り当てた場所へ移動させるのに使うことができます。

画面の下の方に表示されているHTMLタグにidを割り当て、URLの最後にhashを#とidの名前という具合につけることで、その場所へスクロールした状態で表示できます。

Locationオブジェクトのhash値を削除する方法

Locationオブジェクトのプロパティに、hashという名前でhash値が格納されています。

そしてLocationオブジェクトは、記述の省略可能なwindowオブジェクトのプロパティです。そのため、location.hashと記述することで値の操作ができます。

location.hashに空文字（”シングルクォート2つ）を代入することで、削除となります。

コラム

コスパとタイパ、両方結果的に良くなる良くなる学び方とは？

「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。

コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。

  • ・困ったときに、質問や相談できる相手がいるため挫折しなかった
  • ・プロとして必要なスキルのみを深く学べたので無駄がなかった
  • ・副業案件の提供と納品までのサポートがあったので目的を達成できた

安価・短期間で広く浅く学んでも意味がありません。 本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に 無料相談 に参加してみませんか？

カウンセラー・現役のプロへ、何でも気軽に無料相談可能。 30分か60分お好きな時間が選べて、かつ3回まで すべて無料で ご利用できます。
無理な勧誘は一切ない ので、お気軽にご参加ください。

今なら相談した方限定の割引・参加特典付き！ 無料相談はこちら

実際に書いてみよう

hashのあるURLのページを開いて、hashを削除した場合の動作を見てみましょう。今回は、下記のMDNのリファレンスページのリンクを使って説明します。

このURLにはhashとして#Examplesが付いています。これにより、ページの中断にあるExamplesの項目の位置にスクロールされた状態で表示します。

MDNのLocation:hashのページ

ページを表示したら、ブラウザの開発ツールなどを開いて下記のJavaScriptを実行してみてください。

location.hash = '';

これでhash値が削除されました。

ページ内遷移がおこなわれ、ブラウザのURLから#Examplesがなくなり、ページの一番上が表示されたことが確認できました。同様にhash値をセットすることで、ページのその場所に移動することもできます。

下記のJavaScriptを実行してみてください。

location.hash = 'Examples'

ExamplesをセットするとURLにhashが追加されページのExamplesの場所に移動します。

まとめ

Locationオブジェクトのhash値を削除する方法を紹介しました。

hash値を操作すると、hash値に対応したidの場所へページ内遷移がおこなわれます。ユーザーに情報を探しやすく提供するのに有効です。

1時間でできる無料体験！

筆者プロフィール

横山茂雄（よこやましげお）

フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。

言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

初心者・未経験でもできる。まずはテックアカデミーに相談しよう

プログラミングを独学で学習していて、このように感じた経験はないでしょうか？

  • ・調べてもほしい情報が見つからない
  • ・独学のスキルが実際の業務で通用するのか不安
  • ・目標への学習プランがわからず、迷子になりそう

テックアカデミーでは、このような 学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供 しています。
30分間、オンラインでどんなことでも質問し放題です。

「受けてよかった」と感じていただけるよう カウンセラーやエンジニア・デザイナー があなたの相談に真摯に向き合います。

「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。

無理な勧誘は一切ありません ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）

今なら参加者限定の割引特典付き！ 無料相談を予約する

記事を検索

関連するキーワード

関連する記事

JavaScriptで関数のエイリアスを作る方法を現役エンジニアが解説【初心者向け】

JavaScriptで関数のエイリアスを作る方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 ...
JavaScript

jQueryでeachメソッドを使って繰り返し処理をする方法【初心者向け】

どのプログラミング言語にも繰り返し処理を実装するためのメソッドは必ず存在しています。jQueryにももちろん存在し、eachというメソッドで実装することができま...
JavaScript

JavaScriptでfor文を使ってループ処理する方法【初心者向け】｜現役エンジニアが解説

JavaScriptについてプログラミング初心者向けに紹介した記事です。今回は、JavaScriptでfor文を使ってループ処理する方法について解説します。 ...
JavaScript

JavaScriptの数値フォーマットについて現役エンジニアが解説【初心者向け】

JavaScriptの数値フォーマットについて、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 &nbs...
JavaScript

業務で役立つ！jQueryで覚えておくべき正規表現とは【初心者向け】

JavaScriptのライブラリであるjQueryでの正規表現について説明します。 jQueryに限らずプログラミングには正規表現というものが存在します。...
JavaScript

JavaScriptの条件分岐に利用される論理演算子&&について現役エンジニアが解説【初心者向け】

JavaScriptの条件分岐に利用される論理演算子&&について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心...
JavaScript

あわせてよく読まれている記事

Ruby on Railsの繰り返し文でhashを追加する方法を現役エンジニアが解説【初心者向け】

Ruby on Railsの繰り返し文でhashを追加する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Ruby講座の内容をもとに紹介しています。   田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Ruby on Railsの繰り返し文でhashを追加する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 hashとは hashを追加する方法 繰り返し文でhashを追加する   hashとは hash(ハッシュ)とは、キーと値という2つのデータがペアになった集合のことです。一般的には「連想配列」と呼ぶこともあります。hashでキーと値を関連づけておくと、そのhashにキーを与えると関連づけた値を取得できます。 Ruby on Railsでhashを初期化する方法を現役エンジニアが解説【初心者向け】の記事も合わせてご覧ください。   [PR] フロントエンドで副業する学習方法を動画で公開中hashを追加する方法 hashは簡単に作成できますが、ここでは出来上がっているhashに後から追加する方法を解説します。 まずベースとなるhashを作成します。 base = {'オレンジ' => 150, 'レモン' => 200} putsで表示してみると、 {"オレンジ"=>150, "レモン"=>200}   となります。この例では、要素を2つ持つhashが作成できます。このhashに対して、何か要素を追加する方法は3つあります。 直接代入する方法 storeメソッドを使う方法 mergeメソッドを使う方法   直接代入する方法 base['バナナ'] = 50 と書きます。キー名を指定して値を直接代入します。中身をputsで確認すると、 {"オレンジ"=>150, "レモン"=>200, "バナナ"=>50} となります。要素が1つ追加されて3つの要素をもつhashとなります。   storeメソッドを使う方法 base.store('バナナ', 50) と書きます。storeメソッドの引数に、キー名と値を指定します。結果は1.の場合と同じです。   追加するときの注意点 追加するとき、追加したいhashに指定したキー名がすでに存在していると、値の上書きになります。 base = {'オレンジ' => 150, 'レモン' => 200} base['オレンジ'] = 160 を実行すると、hashは、 {"オレンジ"=>160, "レモン"=>200} となり、追加にはなりません。追加するときは、まだ存在しないキー名を指定する必要があります。   mergeメソッドを使う方法 1つのhashにもう1つのhashを結合します。 base = {'オレンジ' => 150, 'レモン' => 200} delta = {'バナナ' => 50} base = base.merge(delta) と書きます。mergeメソッドの引数に、結合したいhashを指定します。 また、merge!メソッドを使うと、 base = {'オレンジ' => 150, 'レモン' => 200} delta = {'バナナ' => 50} base.merge!(delta) とも書けます。   繰り返し文でhashを追加する Fruitsというフルーツのレコード一覧(データベース)があったとします。 フルーツのレコードには色々なデータが含まれる中で、その後の処理を簡潔にするために必要なデータだけhashにして取り出したいときがあります。名前をキー、価格を値にしたhashとして取り出したいとき、 fruits
Ruby

JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法を現役エンジニアが解説【初心者向け】

JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。 JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでlocation.hashプロパティを使ってURLのハッシュを取得する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 ハッシュとは location.hashプロパティとは location.hashプロパティの使い方 location.hrefでURLのハッシュを取得する方法 実際に書いてみよう まとめ   ハッシュとは URLにおけるハッシュとは、#の後の文字列のことです。 Twitterなどでも#をつけてハッシュタグとして、特定の項目を表したりしますがこれと同じようなものです。HTMLにidを設定し、そのidをハッシュで指定したURLはページの表示位置がそのハッシュのidを持つHTMLタグの場所になります。 平たく言うと、ハッシュはURLで指定したページの表示位置を指定しているということになります。下記にMDNのlocation.hashのリファレンスのURLを載せてみました。 下のものにはハッシュを#Examplesとつけています。実際にこのリンクをクリックすると、同じページを表示しますがハッシュのあるものは、Examplesという項目の位置を表示していることが確認できるかと思います。 developer.mozilla.org/ja/docs/Web/API/Location/hash developer.mozilla.org/ja/docs/Web/API/Location/hash#Examples（ハッシュあり） [PR] フロントエンドで副業する学習方法を動画で公開中location.hashプロパティとは URLを現すLocationインターフェースのプロパティで、#を含むハッシュのデータが格納されています。先程のMDNのリファレンスのハッシュ付きリンクの場合は、#Examplesが格納されています。 location.hashプロパティの使い方 locationは、記述の省略が可能なwindowオブジェクトのプロパティです。そのため、そのままlocation.hashと記述することで使うことができます。 コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。 もちろん、時間も費用もかかることは間違いありません。 ただ 結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。 コスパ・タイパ最適化の参考として、 テックアカデミー卒業生がスクールを選んだ理由 をご紹介します。
JavaScript

Ruby on Railsでhashを初期化する方法を現役エンジニアが解説【初心者向け】

Ruby on Railsでhashを初期化する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まるでしょう。   なお本記事は、TechAcademyのオンラインブートキャンプRuby講座の内容をもとに紹介しています。 田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Ruby on Railsでhashを初期化する方法について詳しく説明していくね！ 大石ゆかり お願いします！   hashとは hash(ハッシュ)とは、キーと値という2つのデータがペアになった集合体のことです。 一般的には「連想配列」と呼ぶこともあります。 hashでキーと値を関連づけておくと、そのhashにキーを与えると関連づけた値を得ることが可能です。   例えば、’オレンジ’と’orange’を関連づけておくと、 hash から’オレンジ’を使って’orange’を取り出すことができるでしょう。 hashは、以下のようにキーと値を関連づけて表記します。 {'キー' => '値'} 例えば、冒頭の例では、 {'orange' => 'オレンジ'} となります。 ‘orange’がキーで、’オレンジ’が値です。 Webシステム開発の世界でよく使う「JSON(JavaScript Object Notation)形式」のテキストデータもキーと値を関連づけたデータです。 キーに関連して長さが不特定のデータを何でも関連づけられるので、WebやAIの世界でもよく使う「非定形データ」を表すのに向いています。   初期化する必要性 hashは、中身を初期化しないと使うことができません。 他の変数や配列などが初期化しないと使えないことと同じであるものの、初期化の方法は少し特殊です。   [PR] フロントエンドで副業する学習方法を動画で公開中hashを初期化する方法 要素のない空のhashを初期化したい場合には、以下のように記述しましょう。 result = Hash.new 要素が無い空のhashがresultに代入されます。   putsで空のhashを表示すると、下記のように記述できます。 {} hashは、{}で括られて表示されます。   hashに要素を追加するには、以下のように記述しましょう。 hashのオブジェクト.store(キー,値) storeメソッドを使って、追加したいキーと値を指定します。   newを使わずにいきなりhashのキーと値を指定して初期化することもできます。 result = {キー => 値} キーと値の要素を持つhashが生成されます。   実際に書いてみよう newとstoreメソッドを使うと、以下のように書けます。 result = Hash.new result.store('orange', 'オレンジ') puts result 実行すると以下のように表示されるでしょう。 {"orange"=>"オレンジ"}   要素を複数にしたい時は、storeを複数回実行します。 result = Hash.new result.store('orange', 'オレンジ') result.store('lemon', 'レモン') puts result コードを実行すると、 {"orange"=>"オレンジ", "lemon"=>"レモン"} と表示されます。   storeメソッドを使わない場合は、以下のように書けます。 result = {'orange' => 'オレンジ'} puts result 実行すると、 {"orange"=>"オレンジ"} と表示されます。   要素を複数にしたい時は、要素を列挙していきます。 result = {'orange' => 'オレンジ', 'lemon' => ' レモン'} puts result 実行すると、 {"orange"=>"オレンジ", "lemon"=>"レモン"} と表示されるでしょう。   キーのシンボル指定 キーに指定できるのは、文字列以外にも「シンボル」があります。シンボルとは、コロン(:)をつけた文字列です。 :文字列 キーにシンボルを利用すると、hashは以下のように初期化できます。 result = {:orange => 'オレンジ', :lemon => 'レモン'} puts result あるいは、下記のように記述します。 result = {orange:
Ruby

連想配列を身につけよう！Ruby on RailsのHashの使い方【初心者向け】

RubyのフレームワークRuby on RailsでのHashの扱い方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次LocationオブジェクトとはLocationオブジェクトのhash値についてLocationオブジェクトのhash値を削除する方法実際に書いてみようまとめ筆者プロフィール Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   Hashではあるキー情報に対して、データを格納することができるものです。 今回はそのHashを使ってデータを扱う方法を説明します。 Hashとは Hashは連想配列とも言いますが、あるキー情報に対して、何かしらのデータを紐付けて格納できます。 例えば机にひきだしが2つあったとします。 1つ目のひきだしにAのシールを貼り、2つ目のひきだしにBのシールを貼り、それぞれAのひきだし、Bのひきだしとします。 Aのひきだしには鉛筆を、Bのひきだしにはノートを入れます。   ここで質問です。 Aのひきだしには何が入っているでしょうか。 答えは鉛筆が入っています。   このようにA(キー情報)には鉛筆(データ)といったイメージでデータの格納の仕方をするのが、Hashになります。   Hashの作成方法 Hashは以下のように作成することができます。 sample = {} これで空っぽのHashが作成されました。 最初から何かしらの値を設定したい場合は、以下のように書きます。 sample = { name: "tarou" } name というキーに対して、文字列の”tarou”が格納された状態です。   [PR] フロントエンドで副業する学習方法を動画で公開中Hashの基本的な使い方 Hashの基本的な使い方として、４つの操作をご紹介します。 要素の取得 要素の追加 要素の更新 要素の削除 それぞれの操作について以下で解説します。 要素の取得 要素(Hashに設定した値)を取得する場合は、以下のように書きます。 sample = { name: "tarou" } p sample[:name] => "tarou" name というキーを参照すると、”tarou”という文字列が取得できます。 要素の追加 要素を追加したい場合は、以下のように書きます。 sample[:email] = "example@example.com" p sample[:email] => "example@example.com" これでemail というキーに”example@example.com”という文字列を追加できました。 要素の更新 既に追加されている要素を更新する場合は、以下のように書きます。 sample = { name: "tarou" } sample[:name] = "zirou" p sample[:name] => "zirou" name というキーに格納されている”tarou”を”zirou”に更新できました。 要素の削除 要素を削除する場合は、deleteメソッドを使用します。 sample = { name: "tarou" } sample.delete(:name) p sample[:name] => nil これでname というキーに格納された要素は削除されました。   コラム コスパとタイパ、両方結果的に良くなる良くなる学び方とは？ 「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
Ruby

Ruby on Railsでhashとselectメソッドを使う方法を現役エンジニアが解説【初心者向け】

Ruby on Railsでhashとselectメソッドを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、Ruby講座の内容をもとに紹介しています。 田島悠介 今回は、Rubyに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 Ruby on Railsでhashとselectメソッドを使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   Ruby on Railsのselectとは？ selectは、hashやarrayから条件にあった要素だけを取り出すためのメソッドです。 hashにselectを使う場合には、取り出したいhashの値の条件やキーの条件を指定します。selectは配列にも使えますが、ここではhashに使う方法をご紹介します。 hashとselectの違いとは 前述の通り、selectはメソッドです。hashは、キーと値をペアで要素として持つ集合です。 selectはhashやarray用に用意されたメソッドです。selectを使うと、hashから順にペアを取り出して処理したり、指定した条件に合ったペアだけを新たなhashとして取り出すことができます。 [PR] フロントエンドで副業する学習方法を動画で公開中selectを使う方法 selectは、以下のようにして使います。 対象のhash.select {|k, v| [行いたい処理]} あるいは 対象のhash.select do |k, v| [行いたい処理] end とします。書き方が違うだけで同じ処理となります。この使い方だとどちらもeachを使った時と同じ動作になります。また、以下のような使い方もあります。 対象のhash.select {|k, v| [条件]} 対象のhashから、条件がtrueになるペアだけを含む新たなhashを戻り値として取得できます。こちらはeachの時とは違う動作になります。 実際に書いてみよう fruits = { 'Apple' => 150, 'Banana' => 100, 'Orange' => 200, 'Peach' => 300 } fruits.select {|k, v| puts "#{k} : #{v}" } このプログラムを実行すると、 Apple : 150 Banana : 100 Orange : 200 Peach : 300 が表示されます。kとvのペアに対して処理が実行されます。 fruits = { 'Apple' => 150, 'Banana'
Ruby

JavaScriptでlocationオブジェクトを使う方法【初心者向け】

JavaScriptをプログラミング初心者向けに紹介した記事です。 今回は、JavaScriptでlocationオブジェクトを使う方法について解説します。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   本記事では、テキストエディタのmiを使っていますが、JavaScriptの場合はWebブラウザとテキストエディタがあれば特別な開発環境がなくても開発することができます。   なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。   大石ゆかり 田島メンター！locationオブジェクトというのは何でしょうか？ 田島悠介 ブラウザで表示したWebページのアドレス（URL）に関する情報が格納されているんだ。また、指定したアドレスに移動したりもできるんだよ。 大石ゆかり どのような書き方があるのですか？ 田島悠介 例を見ながら説明していくね！   locationオブジェクトとは プログラムを作っていると、Webページのアドレス（URL）に関する情報を取得したり、指定したアドレスに移動したい場面があるのではないでしょうか。そんな時に便利なのが、locationオブジェクトです。 URLとは、Uniform Resource Locator の略で、インターネット上でのページの「住所＝アドレス」のことを指します。URLには、情報の種類やサーバ名、ポート番号やファイル名など、プログラミングで使える様々な情報が格納されています。 それらの情報が格納されているのがlocationオブジェクトです。 実際の開発現場では、URLからパラメータを取得したり、指定したアドレスに移動したりする時に使います。   locationオブジェクトの書き方 基本的なプログラムは以下のようになります。locationキーワードの後ろに「.」ピリオドを付けて関数名を記載します。 主な関数については次章で紹介します。 location.関数名   [PR] フロントエンドで副業する学習方法を動画で公開中locationオブジェクトの主な使い方 この記事では、locationオブジェクトの主な使い方について解説します。 まずは、簡単な関数を用意します。 <!DOCTYPE html> <html lang = "ja"> <head> <meta charset = "utf-8"> <title>JavaScriptの練習</title> </head> <body> <script> // locationオブジェクトを表示 console.log(location); // urlを取得 var url = location.href; console.log(url); // プロトコルを取得 var protocol =
JavaScript

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から16週間で
エンジニアに

エンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の第四次産業革命スキル習得認定講座で、厚生労働省指定の専門実践教育訓練給付制度の対象です。条件を満たすことで支払った受講料の最大70％（最大306,460円）が給付金として支給されます。詳しくは エンジニア転職保証コース のページ内の注意事項をご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

1時間でできる無料体験
挫折しない学習方法とは？
TechAcademy（テックアカデミー） フロントエンドコース プログラミング JavaScript JavaScriptでLocationオブジェクトのhash値を削除する方法を現役エンジニアが解説【初心者向け】