この記事で分かること
parent・top・selfの基本的な役割- フレーム階層の参照方法
- 親フレーム・最上位フレーム・自分自身のフレームの違い
- 実際の使用例（フレーム間操作）
- HTML5 以降の注意点（非推奨・同一オリジン制限）
parent・top・self は、フレーム（またはウィンドウ）同士の階層関係を参照するためのプロパティです。
フレーム構造を持つページで、別のフレームを操作したいときに利用されます。
parent：親フレームを参照する
parent は、現在のフレームを含んでいる「親フレーム」を参照します。
フレーム階層の 1 つ上にアクセスしたいときに使用します。
parent.フレーム名.プロパティ;親フレームを経由して、別のフレームを操作することもできます。
使用例：親フレーム内の別フレームを操作
// down というフレームに文字を表示
parent.down.document.write("DUMMY");
→ 現在のフレームから、親フレーム内の down フレームを操作しています。
top：最上位フレームを参照する
top は、フレーム階層の最上位にある「トップフレーム」を参照します。
階層が深い場合でも、常に最上位へアクセスできます。
alert(top.frames[0].name);→ 最上位フレーム内の 1 番目のフレーム名を表示します。
self：自分自身のフレームを参照する
self は、自分自身のフレームを参照します。
window と同じ意味で、現在のフレームを明示的に指定したいときに使います。
// 自分自身のフレームの背景色を変更
self.document.bgColor = "#33ff99";
→ 現在のフレームの背景色が緑色に変わります。
3つのプロパティの違い
| プロパティ | 参照先 |
|---|---|
parent |
現在のフレームを含む「親フレーム」 |
top |
フレーム階層の最上位フレーム |
self |
自分自身のフレーム（window と同じ） |
注意点
frameset（フレーム）は HTML5 では非推奨- モダンWebでは
iframeの使用が一般的 - フレーム間の操作は同一オリジン制限を受ける
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
parent・top・selfの役割を体系的に理解したい- ウィンドウやフレーム階層の仕組みを基礎から学びたい
- ネット記事だけだと情報が断片的に感じる
本記事で扱う parent・top・self は、
JavaScript のウィンドウオブジェクト・フレーム階層を理解するうえで欠かせない概念です。
書籍では、これらの前提となるDOM・ウィンドウモデル・JavaScript の基本構造を体系的に学べるため、
フレーム階層の理解がより深まります。
いちばんやさしい JavaScript の教本
図解が多く、ウィンドウや DOM の構造を視覚的に理解できる入門書です。
parent や top のような階層参照を学ぶ際にも、
「JavaScript がどのようにページ全体を扱うのか」という基礎がしっかり身につきます。
この本で解決できること：
- ウィンドウ・DOM の基本構造を理解できる
- フレーム階層を参照する前提知識が身につく
- 実際に動くサンプルで理解が深まる
確かな力が身につく JavaScript「超」入門
JavaScript のウィンドウオブジェクトや DOM の仕組みをより深く理解したい方に向いている入門書です。
parent・top・self が
どのようにウィンドウ階層を参照しているのかを体系的に学べます。
この本で解決できること：
- ウィンドウオブジェクトの構造を深く理解できる
- フレーム階層の参照方法が明確になる
- 現代的な JavaScript の書き方もまとめて習得できる
動画で理解を深めたい方へ（Udemy講座）
parent・top・self のような
ウィンドウ階層の概念は、図や動きを見ながら学ぶと理解が一気に深まります。
動画では DOM やウィンドウオブジェクトの関係が視覚的に理解できるため、
本記事の内容をよりスムーズに吸収できます。
初心者のためのJavaScript 完全入門
DOM・ウィンドウ・イベントなど、parent や top を理解する前提となる
JavaScript の基礎がしっかり学べる講座です。
ページ構造を扱う JavaScript の基本が丁寧に解説されています。
この講座で解決できること：
- DOM とウィンドウの関係を視覚的に理解できる
- フレーム階層の参照に必要な基礎が身につく
- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
ウィンドウオブジェクトや DOM の深い理解を目指す方に最適な講座です。
parent・top・self の
仕組みをより高度に理解でき、実務にも応用できます。
この講座で解決できること：
- ウィンドウオブジェクトの構造を深く理解できる
- フレーム階層の参照方法を応用的に学べる
- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
parent・top・selfの役割が曖昧なままになる- ウィンドウオブジェクトや DOM の関係が理解しづらい
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
ウィンドウ構造・DOM・歴史的 API なども丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- DOM やウィンドウ階層の理解を深めるアドバイスがもらえる
- 効率的な学習方法をプロが提案
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
parent・top・self に関するよくある質問（FAQ）
parent はどんなときに使いますか？
現在のフレームの 1 つ上の階層（親フレーム）を参照したいときに使います。
top を使うメリットは？
階層が深くても、常に最上位フレームへアクセスできる点がメリットです。
self と window の違いはありますか？
どちらも同じ意味で、自分自身のフレーム（ウィンドウ）を参照します。
フレーム間の操作に制限はありますか？
異なるドメイン間では同一オリジン制限により操作できません。
まとめ
parent：親フレームを参照top：最上位フレームを参照self：自分自身のフレームを参照（windowと同じ）- フレームは HTML5 では非推奨のため、実務では
iframeが一般的 - フレーム間操作は同一オリジン制限を受ける
