この記事で分かること
Frameオブジェクトの基本frames配列でのフレーム参照方法frames.lengthによる総数取得- DOM（
getElementById）でのフレーム参照 - フレーム使用時の注意点（HTML5 非推奨など）
Frame オブジェクト は、ウィンドウ内に配置された <frame> 要素を参照・操作するためのオブジェクトです。
現在では frameset は非推奨ですが、JavaScript の歴史的仕様として frames 配列 の仕組みを理解しておくことは重要です。
フレームを参照する2つの方法
フレームは次の2つの方法で参照できます。
- フレーム名で参照する
frames[番号]で参照する
① フレーム名で参照する
フレーム名は <frame> タグの name または id 属性で指定します。
<frame name="IFrame">このフレームを参照するには次のように書きます。
frames["IFrame"];② インデックス番号で参照する
フレームは frames 配列に格納されており、0 から始まる番号でアクセスできます。
frames[1];→ ドキュメント内で 2 番目に記述されたフレームを参照します。
frames.length：フレームの総数を取得する
frames.length は、ウィンドウ内に存在するフレームの総数を返します。
// トップフレームにあるフレームの総数を表示
document.write("フレーム総数：" + top.frames.length);
→ フレーム数を調べたいときに便利です。
DOMでフレームを参照する方法
フレームに id が付いている場合は、通常の DOM と同じように参照できます。
document.getElementById("enqFrame");→ <frame id="enqFrame"> を参照します。
注意点
frameset（フレーム）は HTML5 では非推奨- モダンWebでは
iframeの使用が一般的 FrameオブジェクトはWindowオブジェクトと互換性がある
JavaScript 初心者におすすめの学習書籍
書籍で学ぶのが向いている人
Frameオブジェクトやframes配列の仕組みを体系的に理解したい- ウィンドウ・フレーム構造など歴史的な JavaScript 仕様も押さえておきたい
- ネット記事だけだと情報が断片的に感じる
Frame や frames 配列は現在では非推奨ですが、
JavaScript のウィンドウオブジェクト・DOM・歴史的仕様を理解するうえで重要なテーマです。
書籍では、これらの前提となるDOM・ウィンドウモデル・JavaScript の基本構造を体系的に学べるため、
本記事の内容がより深く理解できます。
いちばんやさしい JavaScript の教本
図解が多く、ウィンドウや DOM の基本構造を視覚的に理解できる入門書です。
frames のような歴史的 API を学ぶ際にも、
「JavaScript がどのようにページを扱うのか」という基礎がしっかり身につきます。
この本で解決できること：
- ウィンドウ・DOM の基本構造を理解できる
framesの仕組みを学ぶ前提知識が身につく- 実際に動くサンプルで理解が深まる
確かな力が身につく JavaScript「超」入門
JavaScript のウィンドウオブジェクトや DOM の仕組みをより深く理解したい方に向いている入門書です。
Frame オブジェクトが Window と互換性を持つ理由など、
本記事の内容をより体系的に理解できます。
この本で解決できること：
- ウィンドウオブジェクトの構造を深く理解できる
frames配列の仕組みがより明確になる- 現代的な JavaScript の書き方もまとめて習得できる
動画で理解を深めたい方へ（Udemy講座）
frames のようなウィンドウ構造は、
図や動きを見ながら学ぶと理解が一気に深まります。
動画では DOM やウィンドウオブジェクトの関係が視覚的に理解できるため、
本記事の内容をよりスムーズに吸収できます。
初心者のためのJavaScript 完全入門
DOM・ウィンドウ・イベントなど、Frame を理解する前提となる基礎がしっかり学べる講座です。
JavaScript がどのようにページ構造を扱うのかを丁寧に解説してくれます。
この講座で解決できること：
- DOM とウィンドウの関係を視覚的に理解できる
framesの仕組みを学ぶ前提知識が身につく- 初心者がつまずきやすいポイントを丁寧に解説
→ 初心者のためのJavaScript 完全入門（Udemy）
超JavaScript 完全ガイド 2026
ウィンドウオブジェクトや DOM の深い理解を目指す方に最適な講座です。
Frame オブジェクトが Window と互換性を持つ理由など、
本記事の内容をより高度に理解できます。
この講座で解決できること：
- ウィンドウオブジェクトの構造を深く理解できる
frames配列の仕組みを応用的に学べる- 現代的な JavaScript の書き方をまとめて習得
体系的に学びたい方へ（スクールという選択肢）
独学の限界を感じやすいポイント
Frameやframesの仕組みが曖昧なままになる- ウィンドウオブジェクトや DOM の関係が理解しづらい
- コードレビューを受ける機会がない
- 学習の順番に自信が持てない
スクールでは、プロの講師が学習ロードマップを作成し、
ウィンドウ構造・DOM・歴史的 API なども丁寧にサポートしてくれます。
無料相談で得られるメリット
- あなたのレベルに合わせた学習計画を作成
- DOM やウィンドウ構造の理解を深めるアドバイスがもらえる
- 効率的な学習方法をプロが提案
- エンジニア転職を視野に入れたキャリア相談も可能
JavaScript を効率よく学びたい方には、未経験からエンジニアを目指せる
DMM WEBCAMP の学習コースも選択肢のひとつです。
Frame と frames に関するよくある質問（FAQ）
フレームは現在も使われていますか？
HTML5 では非推奨です。モダンWebでは iframe が一般的です。
frames["名前"] と frames[番号] の違いは？
名前参照は可読性が高く、番号参照はフレームの位置でアクセスします。
frames.length は何を返しますか？
ウィンドウ内に存在するフレームの総数を返します。
DOM でフレームを参照できますか？
id が付いていれば getElementById で参照できます。
まとめ
frames["名前"]：フレーム名で参照frames[番号]：インデックス番号で参照frames.length：フレームの総数を取得- DOM では
getElementById()で参照可能 - フレームは HTML5 では非推奨のため、実務では
iframeを使用する
