TechAcademy（テックアカデミー） トピックス JavaScriptでdocumentオブジェクトを使う方法【初心者向け】
オーダーメイドコース
icon
icon
トピックス

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

初心者向けにJavaScriptでdocumentオブジェクトの使い方について解説しています。documentを使うサンプルとしてCookieを取得・保存する方法を実際に書きながら紹介しているので、参考にしながら覚えていきましょう。

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

JavaScriptの使い方を初心者向けに紹介した記事です。

今回は、JavaScriptでdocumentを使う方法について解説します。

また、入門向けにJavaScriptを学習できるサイトも紹介しているので、合わせてご覧ください。

 

なお本記事は、オンラインブートキャンプ フロントエンドコース（JavaScript・jQuery講座）の内容をもとにしています。

 

documentとは

「document」は、documentオブジェクトと呼ばれ、Chrome等のブラウザ上で表示されたドキュメントを操作する事ができます。

ここで言うオブジェクトとは、プログラミング言語で操作ができるデータを意味します。

今回説明する、documentオブジェクトは非常に多くのプロパティやメソッドを持っています。

ここでのプロパティは値を意味します。そして、メソッドは処理を意味します。

 

Cookie(クッキー)を保存・取得するdocumentオブジェクトの例

Cookie(クッキー)とは、現在ご利用中のパソコンやスマートフォン（iPhoneやAndroid）端末のブラウザ（Chrome等）に保存されるデータのことです。

Cookie(クッキー)に保存することで、便利になる機能としてログインフォームにニックネームやメールアドレスを記入する時に、毎回記入する必要がなくなります。

一度ニックネームやメールアドレスを入力すると、Cookie(クッキー)がご利用中の端末のブラウザに保存されます。

そして、次回同じ会員制サイトにアクセスした際、前回入力したハンドル名やメールアドレスが取得され自動的にログインフォームへ表示してくれます。

これがCookie(クッキー)の保存と取得の例になります。

 

[PR] 最短2日でChatGPTが頼れる相棒に！LINEヤフー主催のAI講座

Cookie(クッキー)を保存・取得するdocumentオブジェクトの動作例

こちらはテックアカデミーの受講生ログインページです。

通常は赤枠部分に受講生がログインするためのメールアドレスを入力します。

しかし、一度ログインすれば、次回以降は自動的にメールアドレスが表示されます。

Cookie(クッキー)を保存・取得するdocumentオブジェクトの動作例になります。

なお、保存・取得されるCookie(クッキー)はあくまでご利用中のパソコンやスマートフォン（iPhoneやAndroid）端末のブラウザ（Chrome等）に保存されます。

そのため、端末であってもブラウザをChromeからSafariやInternetExplorerに変更して、同じ会員制サイトにアクセスしても、以前アクセスした時のメールアドレス当情報は取得されません。

なぜなら、保存先は、同じ端末のChromeの中にあるためです。

 

Cookie(クッキー)を保存・取得するdocumentオブジェクトの実装例

Cookie(クッキー)のdocumentオブジェクトの使用方法

Cookie(クッキー)を保存・取得するdocumentオブジェクトは

document.cookie

の文法で利用することができます。

 

Cookie(クッキー)を保存する

Cookie(クッキー)を保存する場合は、

Cookie(クッキー)名=値; expires=有効期限; domain=ドメイン名; path=パス; secure

の形式で記載します。最初のCookie(クッキー)名=値;のみが必須項目になります。

つまり、Cookie(クッキー)名をemail、値をtechacademy@techacademy.jpとする場合は、

document.cookie = "email=techacademy@techacademy.jp";

とJavaScriptに記載します。

 

Cookie(クッキー)を取得する

同様に

document.cookie

と記載するだけでCookie(クッキー)が取得できます。

実際のコードJavaScript

document.cookie = "email=techacademy@techacademy.jp";
document.write('Cookie(クッキー)名の中身は' + document.cookie+ 'ですね')

実行後の画面

こちらで実際のJavaScriptプログラムを見ながら動作確認ができます。

 

documentオブジェクトの種類

documentオブジェクトには非常に多くの種類があります。

今回は、よく使われるCookie(クッキー)プロパティを例に説明しました。

他のdocumentオブジェクトについてはこちらでも解説してあります。

 

以上、documentオブジェクトの使い方について解説しました。

Cookieは、目には見えないですが、重要な情報になるので、扱い方を覚えておくと実際の現場でも役に立つはずです。

また、TechAcademyでは最短4週間でフロントエンドの技術が身につくフロントエンドオンラインブートキャンプを開催しています。JavaScriptを使ってリッチなWebサービスを作りたい方はぜひご覧ください。

記事を検索

関連するキーワード

関連する記事

初心者におすすめ！ワードプレスが使えるレンタルサーバー（カラフルボックス編）[PR]

ワードプレス（WordPress）はSEOにも強く、SNSとの連携も簡単で、初心者でも手軽にWebサイトを構築することができます。 しかし、実際にWebサ...
トピックス

日本経済新聞に生成AI（人工知能）に関するインタビューが掲載！これから生成AIとどのように向き合うべき？

2023年5月25日（木）掲載の日本経済新聞・朝刊にてテックアカデミーの「はじめてのプロンプトエンジニアリングコース」に関するインタビューが掲載されました！ ...
トピックス

厳しい社会情勢でもチャレンジできる企業体制についてインタビュー｜みんなのマーケット株式会社

ハウスクリーニングや家事代行、不用品回収、引越しなどの生活にまつわる出張・訪問サービスに特化したマーケットプレイス「くらしのマーケット」。カテゴリ数200種類以...
トピックス

Pythonにおける正規表現reのsearchの利用方法について現役エンジニアが解説【初心者向け】

この記事では、Pythonにおける正規表現のためのreモジュールのsearch関数の使い方について解説します。 そもそもPythonについてよく分からない...
トピックス

Pythonにおける%dを用いたprint関数の利用方法について現役エンジニアが解説【初心者向け】

Pythonにおける%dを用いたprint関数の利用方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
トピックス

「知らなかった」はもったいない！テックアカデミーをお得に受講できる申込方法とは？

この記事ではテックアカデミーの受講を悩んでいる・・という方に通常よりもお得に受講できる3つのポイントをご紹介します。 割引サービスの併用ができないため、申し込...
トピックス

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

JavaScriptでcookieを読み書き削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptでcookieを読み書き削除する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 cookieを読み書き削除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   cookieを読み書き削除する方法 cookieとは、ブラウザに保存される小さな情報です。 例えばログインが必要なWebサイトに2回目以降訪問した場合、ログインIDを入力する欄にあらかじめIDが設定されている場合があります。このような場面で利用されるのがcookieです。 cookieを読み書き削除するにはdocument.cookieを使います。   cookieを書き込む cookieを書き込むには以下のように記述します。cookieは key=値 の形式で保存されます。 document.cookie = "key=value"; 書き込みの際にオプションを指定することができます。例えば有効期限を設定する場合はexpiresオプションを使い、以下のように記述します。 document.cookie = "name=value; expires=Thu, 21 Mar 2019 12:00:00 GMT";   cookieを読み込む cookieを読み込むには以下のように記述します。複数のcookieが設定されていた場合、全てのcookieがセミコロンで結合された値が返ります。以下の場合「cookies」という変数に、cookieを読み込んでいます。 var cookies = document.cookie;   cookieを削除する cookieを削除するにはexpiresに0を指定します。 document.cookie = "name=; expires=0";   cookie について、詳しくは以下の記事を参考にしてください。 mozilla.org-cookie   実際に書いてみよう 今回のサンプルプログラムでは、 cookie を読み書き削除しています。なお、 cookie の読み込みの部分のソースコードは以下を参考にしました。 mozilla.org-cookie <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>cookie sample1</title> </head> <body> <input id="input1"value=""/><br> <button onclick="writeCookie()">書き込み</button><br> <button onclick="readCookie()">読み込み</button><br> <button onclick="deleteCookie()">削除</button> <script type="text/javascript"> // cookieの値を読み書きする要素 var input1 =
JavaScript

PHPでクッキーを削除する方法を現役エンジニアが解説【初心者向け】

今回は、PHPでクッキーを削除する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   PHPについてそもそもよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプ、PHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPでクッキーを削除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   この記事では、PHPでクッキーを削除する方法について紹介しています。 クッキーの概要からその利用方法について記載していて、クッキーについてあまりよく分からないという方でも、理解できる内容となっています。   目次 クッキーとは PHPでクッキーを削除する方法 実際に書いてみよう まとめ   クッキーとは クッキー(cookie)とは、ブラウザが持つ、ユーザが使用するスマホやPCに情報を保存する機能の一つです。 クッキーには、ユーザのログイン情報やブラウザで開いたWebサイトの設定情報など様々な用途で情報を保存する仕組みとして利用されています。 例えば、一度ログインしたWebサイトにログインIDやパスワードなどを入力しないでログインできるのは、クッキーにログイン情報を保存する仕組みが利用されています。   [PR] 最短2日でChatGPTが頼れる相棒に！LINEヤフー主催のAI講座PHPでクッキーを削除する方法 PHPで、クッキーを削除するためには、setcookie関数を使用します。 setcookie関数でクッキーを削除する方法： setcookie($削除するクッキー名,"", $現在時刻より過去のクッキー有効期限)   setcookie関数は、クッキーに情報を設定するための関数ですが、第一引数で「削除するクッキー名」を指定し、第三引数で「現在時刻より過去のクッキー有効期限」を渡すことで、指定したクッキーの情報を削除することが可能です。 これは、本来クッキーの有効期限を引数で渡すところを「過去の有効期限」を渡すことで、クッキーが有効期限切れの状態となり、削除されるという仕組みです。 「過去の有効期限」の数値は、現在より過去(マイナス)であればいくつを設定しても削除されます。   実際に書いてみよう それでは、実際にsetcookie関数を使用して、クッキーをセットし、削除する例を見ていきましょう。 サンプルコード： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <body> <?php if(isset($_COOKIE["cookie"])) { 　　// クッキー名"cookie"に値がセットされていたら削除する 　　echo"クッキーの値：".$_COOKIE["cookie"]."<br />"; 　　setcookie("cookie", "", time() - 30); 　　echo"クッキーを削除しました"; 　　// 削除確認用メッセージをクッキーにセット setcookie("cookie_delete", ""cookie"は削除されています", time() + 3600); } else if(isset($_COOKIE["cookie_delete"])) { // クッキー削除確認メッセージ出力 echo $_COOKIE["cookie_delete"]; } else { 　　// クッキーをセット 　　setcookie("cookie", "cookie_info", time() + 3600); 　　echo"クッキーをセットしました"; } ?> </body> </html>   実行結果（1回目）： 実行結果（2回目）： 実行結果（3回目）： 上記の例では、 ①elseブロックでクッキーのセット ②ifブロックでセットしたクッキーの削除とクッキー削除確認メッセージのセット ③else ifブロックでクッキー削除確認メッセージの出力 の順番で実行回数によって別の処理を行っています。 ①のelseブロック内の処理では、”cookie”というクッキー名で、クッキーをセットしています。 ②のifブロック内の処理は、クッキー（”cookie”）がセットされている場合実行されるようになっていて、クッキー（”cookie”）の削除と、削除確認メッセージを”cookie_delete”という名前のクッキーにセットしています。 ③のelse ifブロック内の処理は、クッキー（”cookie”）が削除されていて、クッキー（”cookie_delete”）がセットされている場合に実行されているようになっていて、このelse ifブロック内で削除メッセージが出力されることによって、クッキー(“cookie”)の削除が行われていることを確認できるようになっています。   まとめ 以上、PHPでクッキーを削除する方法についてご紹介しました。 クッキーのセット・削除は、どちらもsetcookie関数で行えるので、setcookie関数の使用方法をしっかりマスターして、状況に応じて使い分けられるようにしましょう。   筆者プロフィール 平野大輝（ひらのだいき） スキル：PHP・Java・JavaScriptを用いて様々なアプリを開発するWebエンジニア。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、PHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
PHP

JavaScriptでcookieを削除する方法を現役エンジニアが解説【初心者向け】

JavaScriptでcookieを削除する方法について解説します。実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでcookieを削除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   cookieとは cookieとは、ブラウザに保存されるテキストデータのことを指します。key=valueという形式でデータを持っています。 cookieにはサイトの訪問回数やユーザーのID、パスワードなどが保存されています。これはWebサイトを訪問した時に、IDやパスワードを入力してログインの手間を省いたりショッピングサイトでのカートに入っている商品の情報を保存するのに使われています。 よくセッションと比較されますが、sessionはサーバー側でデータを持つのに対しcookieはブラウザ側で情報を持つという違いがあります。そのためcookieはユーザー側で削除することができます。 Webサイトを作成する際には、必須の知識になるのでしっかりと押さえておきましょう。 JavaScriptでcookieを削除する方法 cookieを削除する方法はいくつかありますが、JavaScriptでも削除することが可能です。cookieはmax-age（cookieの存続する時間を持っているkey）とexpires（cookieを破棄する日付を持っているkey）を持っています。 削除はmax-age=0にする、またはexpires=過去の日付とする、の二つの方法で可能です。JavaScriptでは以下のようにcookieを操作します。   document.cookie = "key=value;key2=value2"   key=valueでcookieを操作します。連続して値を入れる場合は;で繋ぎます。 [PR] 最短2日でChatGPTが頼れる相棒に！LINEヤフー主催のAI講座実際に書いてみよう それでは実際にcookieを削除してみましょう。以下のようにコーディングして、値の作成・削除を行ってみます。 document.cookie = "key1=value1" document.cookie = "key2=value2" console.log(document.cookie) document.cookie = "key1=;max-age=0" var dt = new Date('2000-12-31T23:59:59Z'); document.cookie = `key2=;expires=${dt.toUTCString()}`; console.log(document.cookie)   以上がcookieの削除方法です。解説は以上です。   筆者プロフィール メンター金成さん。 2014年より、某物流会社のシステム開発担当として入社。 未経験ながら、社内システム保守～新規受注システム開発まで携わり、JavaScript　Ruby on Rails　PostgreSQLなどの経験を積む。現在も、開発案件に携わりながら、日々勉強中。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプJavaScript/jQuery講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

Webサービスの運営に必須！RubyでCookieを扱う方法【初心者向け】

RubyでCookieを扱う方法について解説しています。Webサイトを運営していく中でユーザーのデータ(どんな人がいつ訪れたのかなど)は必要不可欠です。 日頃インターネットを使う中では目にしませんが、サービス提供側であれば必要になってくる知識なので、ぜひ覚えておきましょう。 Rubyについてそもそもよく分からないという方は、Rubyとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのWebアプリケーションオンラインブートキャンプの内容をもとに紹介しています。   大石ゆかり 田島メンター！！Cookieというのはよく聞きますが、具体的にどういう役割があるんですか〜？ 田島悠介 Cookieはユーザーの情報を一時的に保管しておくための機能だよ。 大石ゆかり サイト側でずっと保持しているということですか？ 田島悠介 いや、実際にデータを保管するのはユーザー側になるんだ。まずは基本的な流れを説明しよう。   目次 Cookieとは Cookieの書き方 実際に書いてみよう   Cookieとは Webサイトの提供者が、ユーザーのパソコンに一時的にデータを保存する仕組みのことを指します。 例えば、Cookieにログイン情報を暗号化して保存させておくことによって、Webサービスにログインしたままにする機能や、Cookieに時間のかかる情報をキャッシュしておくことによって、アクセス時間を短くすることができます。 Cookieは他にも、最終アクセスやドメインなど、Webサービスの提供側にとってあると役に立つ情報を保存することができ、Cookieの理解はWebサービス開発にあたって不可欠になってきます。   田島悠介 Cookieの基本的な概念についての説明だよ。 大石ゆかり サイト側にデータが残ってるわけじゃなくて、使用している側のPCに情報が保存されているんですね。 田島悠介 そしてまた同じサイトにアクセスしたとき、その情報をまたサイト側に送るわけだね。   [PR] 最短2日でChatGPTが頼れる相棒に！LINEヤフー主催のAI講座Cookieの書き方 それではRubyでCookieを取得する方法について解説していきたいと思います。CookieはHTTPメソッドのget_fieldsを使用することで取得することができます。 get_fields('Set-Cookie') 実際の流れとしては URLを取得 そのURLからHTTPインスタンスを作成 インスタンスで接続 Cookieを取得 となります。 言葉で説明しても分かりにくいと思うので実際に書いていきたいと思います。   実際に書いてみよう それでは実際にプログラムを書いていきましょう。今回は、実行するとCookieの情報をコンソール上に出力するプログラムを作成していきます。 require 'net/http' uri = URI.parse('http://www.google.co.jp') http = Net::HTTP.new(uri.host) http.start response = http.get '/' p response.get_fields('Set-Cookie') 上で説明した通り、URLを取得、そのURLからHTTPインスタンスを作成、インスタンスで接続、Cookieを取得という流れになっていることがわかります。 実行すると、Cookie情報が出力されます。   まとめ 今回はCookieについて解説していきました。 Cookieはプログラミング初学者にとっては難しい概念となりますが、知っておくととても役立つのでぜひ理解しておくようにしましょう。   田島悠介 上記のコードをコンソールで実行してみよう。どうなったかな。 大石ゆかり なんだか長い文字列が表示されましたね。 田島悠介 この部分がCookieの出力結果になるんだ。Cookieはログインやユーザーの情報を取り扱う上でも大事な要素なので、少しずつ覚えていこう。 大石ゆかり はい、ありがとうございました！   [お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルサービスが作れるRuby on Railsオンラインブートキャンプを開催しています。Rubyを習得したい方はぜひご覧ください。
Ruby

PHPでCookieに値を保存する方法を現役エンジニアが解説【初心者向け】

今回は、PHPでCookieに値を保存する方法について解説します。   そもそもPHPについてよく分からないという方は、PHPとは何なのか解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプPHP/Laravel講座の内容をもとに紹介しています。   田島悠介 今回は、PHPに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 PHPでCookieに値を保存する方法について詳しく説明していくね！ 大石ゆかり お願いします！   Cookieとは Cookieとは、接続したWEBサイトの情報をブラウザに一時的に保存し、次回以降の接続で同じ状態を保持したり、ユーザを特定したりする仕組みのことです。 Cookieという小さなテキストファイルをブラウザに保存します。そのテキストを次に同じサイトに接続するときにブラウザからサーバに送信します。 そうすると、その接続を受け取ったサーバは、cookieの情報からユーザの状態（誰が接続してきたか、など）ということを判断することで、ユーザに特化した情報を送信する、ということになります。 そして、新たなcookieファイルをクライアントに送信して、クライアントはブラウザのcookieを更新します。 値を保存する それでは、PHPでcookieを扱う方法を見ていきます。PHPでは、setcookie関数を用いてcookieを保存します。 setcookie(名前, 値, 有効期限) 「名前」は、cookieを呼び出す時の値です。「値」はcookieに保存する値、「有効期限」はcookieが保存される期限です。（Unix タイムスタンプで指定。（1970 年 1 月1 日）からの経過秒数） ※その他のオプションは説明を省きます。 cookieの保存に成功すると true が返り、失敗すると false が返ります。 [PR] 最短2日でChatGPTが頼れる相棒に！LINEヤフー主催のAI講座保持されている値を取得する setcookieで保存された値は、$_COOKIEという連想配列から取得できます。 $_COOKIE[名前] 「名前」は、setcookieで指定した名前です。この名前をキーとしてcookieに保存された値を取り出します。 実際に書いてみよう それでは、実際にcookieの保存と取得を実装してみましょう。 <?php if ($_COOKIE['name']) { echo "ようこそ、".$_COOKIE['name']."さん"; } else { setcookie("name", "sato", time()+60); echo "cookieをセットしました。"; } ?> はじめて接続するときは、cookieはないので、「cookieをセットしました。」と表示され、次に接続するときは、「ようこそsatoさん」と表示されます。 有効期限は60秒後（time()はUnixタイムの現在時刻）に設定していますので、60秒後にもう一度接続すると、cookieは削除され「cookieをセットしました。」に戻ります。 筆者プロフィール メンターYさん フリーランスエンジニアとして、PHPを中心としたWEB開発全般を行う。最近では、WordPressを使ったメディアの構築・運用を多くこなしている。 元々は大手通信会社のエンジニアで、セキュリティに関する仕事をするも、大企業が肌に合わず独立。一箇所に縛られての仕事を苦手とし、自宅とカフェとコワーキングスペースを行ったり来たりしている。 ただ、自宅にいるとどうしてもゲームをしてしまうため、コワーキングスペースの比率が大きい。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でもPHPやフレームワークのLaravelを使ってWebアプリケーション開発を習得できるオンラインブートキャンプPHP/Laravel講座を開催しています。 挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。
PHP

JavaScriptでCookieのpath属性を設定する方法を現役エンジニアが解説【初心者向け】

JavaScriptでCookieのpath属性を設定する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでCookieのpath属性を設定する方法について詳しく説明していくね！ 大石ゆかり お願いします！   目次 Cookieとは Cookieのpath属性について Cookieのpath属性を設定する方法 実際に書いてみよう まとめ   Cookieとは サーバーがブラウザに送信するデータのことです。このデータはブラウザに保存されサーバーとのやり取りに使用されます。データはkey=valueの形の文字列で格納されています。 Cookieを使うことで、ログイン情報やショッピングカートのカート情報などを保持してユーザーの操作を助けることができます。   [PR] 最短2日でChatGPTが頼れる相棒に！LINEヤフー主催のAI講座Cookieのpath属性について Cookieの情報はサーバーとの通信に含まれます。URLのどのようなpathに、Cookieの情報を含めるかを指定するのがpath属性になります。 指定がない場合は、同じドメインのURLならば含める設定になります。 URLのドメインとpathは、下記のURLの例だと「○○.com」がドメインでその後の/（スラッシュ）以降がpathになります。 http://○○.com/aaa/bbb   Cookieのpath属性を設定する方法 document.cookieと記述するとCookieの持っているkey=valueの値が参照できます。 そこに値をkey=valueとなるような文字列の後に;（セミコロン）で区切ってpath=/【path】のようにpathを追加で記述することで設定できます。   実際に書いてみよう 実際に設定する例として、nameという名前にテックアカデミージュニアという文字列をもったCookieにpathを/testと指定するコードを紹介します。 document.cookie = 'name=テックアカデミージュニア; path=/test;' このJavaScriptをブラウザのコンソールで実行すると、表示しているサイトのドメインのtestというpathに上記のCookieが追加されます。 Cookieの値は下記のように記述することでkey=valueの部分を見ることができます。 document.cookie 今回はpathを/test、としているので、URLのpathがhttps://○○.com/testのように、pathがtestになっていないと追加したCookieは参照できないので注意してください。もしくは、pathはcookieを設定するURLに合わせて書き換えて実行しても問題ありません。 また、設定したpathも確認するには、ブラウザの開発者ツールかCookieを参照する拡張ツールを使用する必要があります。   まとめ 画面を移動したり、ブラウザを開き直したりするような場合にもデータを保存したいことがあるかと思います。 サーバーとの通信にもそのデータを含めたい場合は、今回紹介したCookieの使用を検討してみてください。サーバーとの通信にデータを含める必要がなければ、Web Storageという操作の簡単な部品もありますので、適宜使い分けてください。   筆者プロフィール 横山茂雄（よこやましげお） フリーエンジニアとして活動中。サーバーサイドからフロントまで時代の波に合わせてスキルを変化させてきました。 言語、フレームワーク、DB、現場、いずれも転々としながら、筋トレも欠かさない体育会系エンジニアです。TechAcademyジュニアのゲームアプリコースを担当しています。   大石ゆかり 内容分かりやすくて良かったです！ 田島悠介 ゆかりちゃんも分からないことがあったら質問してね！ 大石ゆかり 分かりました。ありがとうございます！   TechAcademyでは、初心者でも、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。 また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。
JavaScript

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

副業したい方

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

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

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

スキルアップしたい方

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

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

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

オーダーメイドコース
TechAcademy（テックアカデミー） トピックス JavaScriptでdocumentオブジェクトを使う方法【初心者向け】