概要
WebアプリケーションやCMSを運用している際、最も軽視されがちでありながら、ユーザー体験と検索エンジン最適化（SEO）に甚大な悪影響を及ぼすのが「No Title（タイトル未設定）」問題です。HTMLの
タグや、動的に生成されるページタイトルが空、あるいは「Untitled」のまま放置されている状態は、単なる設定ミスではありません。それは、検索エンジンに対する「このページには価値がない」という強烈なメッセージであり、スクリーンリーダーを利用するユーザーにとっては、ナビゲーションを著しく阻害する障壁となります。本稿では、フロントエンドエンジニアが直面する「No Title」の構造的な原因を解明し、堅牢な命名規則と実装パターンを解説します。</p>
<p>詳細解説<br />
Webサイトにおけるタイトルは、ブラウザのタブ、検索結果のリンク、ソーシャルメディアでの共有プレビュー、そして支援技術による読み上げの起点となる、Webページで最も重要なメタデータです。</p>
<p>「No Title」が発生する背景には、主にSPA（Single Page Application）の普及が挙げられます。ReactやVue.jsを用いたルーター管理では、ページ遷移のたびにDOMを書き換えますが、ドキュメントの<title>要素の更新を忘れる、あるいはコンポーネントのライフサイクルと同期できていないケースが多発します。</p>
<p>また、CMSにおける「タイトル入力忘れ」は、バックエンド側のバリデーション不足に起因します。データベース上はNULLが許容されている場合、フロントエンド側でフォールバック（代替テキスト）を用意していないと、そのまま「No Title」が出力されます。</p>
<p>アクセシビリティの観点から見ると、これは深刻です。スクリーンリーダーのユーザーは、ページを切り替える際にタイトルを確認することで、現在のコンテキスト（今どこにいるのか）を把握します。タイトルが空であることは、ユーザーを迷路に置き去りにするのと同義です。</p>
<p>サンプルコード<br />
React環境において、ページタイトルを動的に制御し、未設定時にデフォルト値を強制適用するカスタムフックの実装例を示します。</p>
<pre><code>
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
/**
* ページタイトルを動的に管理するカスタムフック
* @param {string} title - 現在のページのタイトル
* @param {string} defaultTitle - タイトルが空の場合のデフォルト値
*/
const useDocumentTitle = (title: string, defaultTitle: string = 'サイト名 | 公式サイト') => {
useEffect(() => {
// タイトルが空、または空白のみの場合はデフォルト値を適用
const newTitle = title && title.trim().length > 0 ? `${title} | サイト名` : defaultTitle;
document.title = newTitle;
// クリーンアップ処理：ページを離れる際にデフォルトに戻す必要があれば記述
return () => {
document.title = defaultTitle;
};
}, [title, defaultTitle]);
};
// コンポーネントでの利用例
const UserProfile = () => {
const { userName } = useUserData();
// ユーザー名が存在しない場合は空文字として渡す
useDocumentTitle(userName || '');
return (
<div>
<h1>{userName || 'ゲスト'}</h1>
</div>
);
};
</code></pre>
<p>実務アドバイス<br />
フロントエンドスペシャリストとして現場で推奨したいのは、「No Titleを許さない設計」です。</p>
<p>第一に、型定義による強制です。TypeScriptを使用している場合、ページタイトルを管理するStateには必ずstring型を指定し、空文字を許容しない設計にします。もし、APIから取得したデータにタイトルが含まれない可能性があるならば、必ず「デフォルト文字列」を付与する変換層（Data Transformer）を設けてください。</p>
<p>第二に、E2Eテストでの検知です。PlaywrightやCypressを用いて、各ページ遷移後にタイトルが正しい正規表現にマッチするかをチェックするテストケースを組み込みます。「document.title === ‘No Title’」を検知してビルドを失敗させるCIパイプラインを構築することで、リリース前の人為的ミスを100%防ぐことが可能です。</p>
<p>第三に、SEOの観点からの自動補完です。ブログ記事などでは、タイトルが未設定の場合、本文の最初の50文字を抜粋して仮タイトルとして挿入するようなフォールバックロジックをバックエンドまたはBFF（Backend For Frontend）層で実装することを推奨します。</p>
<p>まとめ<br />
「No Title」という文字列が画面や検索結果に表示されることは、エンジニアにとって最大の恥であると同時に、ユーザーに対する不誠実さの表れです。技術的な解決策はシンプルですが、それを徹底して自動化し、仕組み化することがプロフェッショナルの仕事です。</p>
<p>Webにおけるタイトルは、そのページが世界に対して発する最初の挨拶です。挨拶が空っぽでは、誰もその先を読み進めてはくれません。今回紹介したカスタムフックの導入や、CI環境でのタイトル検証プロセスを導入することで、あなたの開発するアプリケーションの信頼性は飛躍的に向上します。</p>
<p>「No Title」を過去のものにし、すべてのページに意味と価値を与えること。それこそが、アクセシブルで高品質なWeb体験を支えるフロントエンドエンジニアの責務です。タイトル管理を疎かにせず、細部まで磨き込まれたインターフェースを構築してください。</p>
</div>
<footer class="article-footer entry-footer">
<div class="entry-categories-tags ctdt-one-row">
<div class="entry-categories"><a class="cat-link cat-link-41" href="https://javascript.intronational.com/category/javascript/"><span class="fa fa-folder cat-icon tax-icon" aria-hidden="true"></span>JavaScript</a></div>
</div>
<div class="ad-area no-icon ad-content-bottom ad-rectangle ad-label-visible cf" itemscope itemtype="https://schema.org/WPAdBlock">
<div class="ad-label" itemprop="name" data-nosnippet>スポンサーリンク</div>
<div class="ad-wrap">
<div class="ad-responsive ad-usual"><!-- レスポンシブコード -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7214025567716564"
data-ad-slot="6558619545"
data-ad-format="rectangle"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
<div class="sns-share ss-col-3 bc-brand-color sbc-hide ss-bottom">
<div class="sns-share-message">シェアする</div>
<div class="sns-share-buttons sns-buttons">
<a href="https://x.com/intent/tweet?text=%E3%80%90JS%E5%BF%9C%E7%94%A8%E3%80%91Web%E9%96%8B%E7%99%BA%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8BNo+Title%E3%81%AE%E5%91%AA%E7%B8%9B%E3%82%92%E8%A7%A3%E3%81%8F%EF%BC%9A%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E3%81%A8SEO%E3%81%AE%E6%9C%80%E9%81%A9%E8%A7%A3&url=https%3A%2F%2Fjavascript.intronational.com%2F%25e3%2580%2590js%25e5%25bf%259c%25e7%2594%25a8%25e3%2580%2591web%25e9%2596%258b%25e7%2599%25ba%25e3%2581%25ab%25e3%2581%258a%25e3%2581%2591%25e3%2582%258bno-title%25e3%2581%25ae%25e5%2591%25aa%25e7%25b8%259b%25e3%2582%2592%25e8%25a7%25a3%25e3%2581%258f%25ef%25bc%259a%25e3%2582%25a2%25e3%2582%25af%25e3%2582%25bb%2F" class="sns-button share-button twitter-button twitter-share-button-sq x-corp-button x-corp-share-button-sq" target="_blank" title="Xでシェア" rel="nofollow noopener noreferrer" aria-label="Xでシェア"><span class="social-icon icon-x-corp"></span><span class="button-caption">X</span><span class="share-count twitter-share-count x-share-count"></span></a>
<a href="//www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fjavascript.intronational.com%2F%25e3%2580%2590js%25e5%25bf%259c%25e7%2594%25a8%25e3%2580%2591web%25e9%2596%258b%25e7%2599%25ba%25e3%2581%25ab%25e3%2581%258a%25e3%2581%2591%25e3%2582%258bno-title%25e3%2581%25ae%25e5%2591%25aa%25e7%25b8%259b%25e3%2582%2592%25e8%25a7%25a3%25e3%2581%258f%25ef%25bc%259a%25e3%2582%25a2%25e3%2582%25af%25e3%2582%25bb%2F&t=%E3%80%90JS%E5%BF%9C%E7%94%A8%E3%80%91Web%E9%96%8B%E7%99%BA%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8BNo+Title%E3%81%AE%E5%91%AA%E7%B8%9B%E3%82%92%E8%A7%A3%E3%81%8F%EF%BC%9A%E3%82%A2%E3%82%AF%E3%82%BB%E3%82%B7%E3%83%93%E3%83%AA%E3%83%86%E3%82%A3%E3%81%A8SEO%E3%81%AE%E6%9C%80%E9%81%A9%E8%A7%A3" class="sns-button share-button facebook-button facebook-share-button-sq" target="_blank" title="Facebookでシェア" rel="nofollow noopener noreferrer" aria-label="Facebookでシェア"><span class="social-icon icon-facebook"></span><span class="button-caption">Facebook</span><span class="share-count facebook-share-count"></span></a>
<a href="//b.hatena.ne.jp/entry/s/javascript.intronational.com/%e3%80%90js%e5%bf%9c%e7%94%a8%e3%80%91web%e9%96%8b%e7%99%ba%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8bno-title%e3%81%ae%e5%91%aa%e7%b8%9b%e3%82%92%e8%a7%a3%e3%81%8f%ef%bc%9a%e3%82%a2%e3%82%af%e3%82%bb/" class="sns-button share-button hatebu-button hatena-bookmark-button hatebu-share-button-sq" data-hatena-bookmark-layout="simple" target="_blank" title="はてブでブックマーク" rel="nofollow noopener noreferrer" aria-label="はてブでブックマーク"><span class="social-icon icon-hatena"></span><span class="button-caption">はてブ</span><span class="share-count hatebu-share-count"></span></a>
<a href="//timeline.line.me/social-plugin/share?url=https%3A%2F%2Fjavascript.intronational.com%2F%25e3%2580%2590js%25e5%25bf%259c%25e7%2594%25a8%25e3%2580%2591web%25e9%2596%258b%25e7%2599%25ba%25e3%2581%25ab%25e3%2581%258a%25e3%2581%2591%25e3%2582%258bno-title%25e3%2581%25ae%25e5%2591%25aa%25e7%25b8%259b%25e3%2582%2592%25e8%25a7%25a3%25e3%2581%258f%25ef%25bc%259a%25e3%2582%25a2%25e3%2582%25af%25e3%2582%25bb%2F" class="sns-button share-button line-button line-share-button-sq" target="_blank" title="LINEでシェア" rel="nofollow noopener noreferrer" aria-label="LINEでシェア"><span class="social-icon icon-line"></span><span class="button-caption">LINE</span><span class="share-count line-share-count"></span></a>
<a href="//www.pinterest.com/pin/create/button/?url=https%3A%2F%2Fjavascript.intronational.com%2F%25e3%2580%2590js%25e5%25bf%259c%25e7%2594%25a8%25e3%2580%2591web%25e9%2596%258b%25e7%2599%25ba%25e3%2581%25ab%25e3%2581%258a%25e3%2581%2591%25e3%2582%258bno-title%25e3%2581%25ae%25e5%2591%25aa%25e7%25b8%259b%25e3%2582%2592%25e8%25a7%25a3%25e3%2581%258f%25ef%25bc%259a%25e3%2582%25a2%25e3%2582%25af%25e3%2582%25bb%2F" class="sns-button share-button pinterest-button pinterest-share-button-sq" target="_blank" title="Pinterestでシェア" rel="nofollow noopener noreferrer" data-pin-do="buttonBookmark" data-pin-custom="true" aria-label="Pinterestでシェア"><span class="social-icon icon-pinterest"></span><span class="button-caption">Pinterest</span><span class="share-count pinterest-share-count"></span></a>
<a role="button" tabindex="0" class="sns-button share-button copy-button copy-share-button-sq" data-clipboard-text="【JS応用】Web開発におけるNo Titleの呪縛を解く：アクセシビリティとSEOの最適解 https://javascript.intronational.com/%e3%80%90js%e5%bf%9c%e7%94%a8%e3%80%91web%e9%96%8b%e7%99%ba%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8bno-title%e3%81%ae%e5%91%aa%e7%b8%9b%e3%82%92%e8%a7%a3%e3%81%8f%ef%bc%9a%e3%82%a2%e3%82%af%e3%82%bb/" title="タイトルとURLをコピーする" aria-label="タイトルとURLをコピーする"><span class="social-icon icon-copy"></span><span class="button-caption">コピー</span><span class="share-count copy-share-count"></span></a>
</div><!-- /.sns-share-buttons -->
</div><!-- /.sns-share -->
<!-- SNSページ -->
<div class="sns-follow bc-brand-color fbc-hide sf-bottom">
<div class="sns-follow-message">javascriptintronationalをフォローする</div>
<div class="sns-follow-buttons sns-buttons">
<a href="//feedly.com/i/discover/sources/search/feed/https%3A%2F%2Fjavascript.intronational.com" class="sns-button follow-button feedly-button feedly-follow-button-sq" target="_blank" title="feedlyで更新情報を購読" rel="nofollow noopener noreferrer" aria-label="feedlyで更新情報を購読"><span class="icon-feedly-logo"></span><span class="follow-count feedly-follow-count"></span></a>
<a href="https://javascript.intronational.com/feed/" class="sns-button follow-button rss-button rss-follow-button-sq" target="_blank" title="RSSで更新情報を購読" rel="nofollow noopener noreferrer" aria-label="RSSで更新情報を購読"><span class="icon-rss-logo"></span></a>
</div><!-- /.sns-follow-buttons -->
</div><!-- /.sns-follow -->
<div class="footer-meta">
<div class="author-info">
<span class="fa fa-pencil" aria-hidden="true"></span> <a href="https://javascript.intronational.com/author/javascriptintronational/" class="author-link">
<span class="post-author vcard author" itemprop="editor author creator copyrightHolder" itemscope itemtype="https://schema.org/Person">
<meta itemprop="url" content="https://javascript.intronational.com/author/javascriptintronational/">
<span class="author-name fn" itemprop="name">javascriptintronational</span>
</span>
</a>
</div>
</div>
</footer>
</article>
<div class="under-entry-content">
<aside id="related-entries" class="related-entries rect-entry-card">
<h2 class="related-entry-heading">
<span class="related-entry-main-heading main-caption">
関連記事 </span>
</h2>
<div class="related-list">
<a href="https://javascript.intronational.com/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91%e5%a4%89%e6%95%b0%e3%81%ae%e5%88%9d%e6%9c%9f%e5%8c%96%e3%83%95%e3%82%a7%e3%83%bc%e3%82%ba%e3%81%a8tdz%e3%81%ae%e8%a6%96/" class="related-entry-card-wrap a-wrap border-element cf" title="【実務・中級編】変数の初期化フェーズとTDZの視覚化：ブラウザのデバッガで追うメモリ確保の瞬間 – JavaScriptコア文法・モダン言語仕様と変数・関数解析バイブル">
<article class="post-3155 related-entry-card e-card cf post type-post status-publish format-standard hentry category-javascript-post category-js-core-grammar-post category-variable-scope-hoisting-post">
<figure class="related-entry-card-thumb card-thumb e-card-thumb">
<img src="http://javascript.intronational.com/wp-content/uploads/2026/06/javascript-scaled.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" />
<span class="cat-label cat-label-41">JavaScript</span> </figure><!-- /.related-entry-thumb -->
<div class="related-entry-card-content card-content e-card-content">
<h3 class="related-entry-card-title card-title e-card-title">
【実務・中級編】変数の初期化フェーズとTDZの視覚化：ブラウザのデバッガで追うメモリ確保の瞬間 – JavaScriptコア文法・モダン言語仕様と変数・関数解析バイブル </h3>
<div class="related-entry-card-snippet card-snippet e-card-snippet">
JavaScriptを掌握する極限の知見：TDZと変数の初期化フェーズをブラウザデバッガで追う諸君、今日のテーマは、我々が日々記述するJavaScriptコードの深層に潜む、変数の「命の営み」だ。特に`let`と`const`が導入されて以... </div>
</div><!-- /.related-entry-card-content -->
</article><!-- /.related-entry-card -->
</a><!-- /.related-entry-card-wrap -->
<a href="https://javascript.intronational.com/%e3%80%90js%e5%bf%9c%e7%94%a8%ef%bd%9c%e8%b1%86%e7%9f%a5%e8%ad%98%e3%80%91%e3%83%ab%e3%83%bc%e3%83%97%e3%82%92%e8%b3%a2%e3%81%8f%e6%93%8d%e3%82%8b%ef%bc%9abreak%e6%96%87%e3%81%ae%e3%80%8c%e6%84%8f/" class="related-entry-card-wrap a-wrap border-element cf" title="【JS応用｜豆知識】ループを賢く操る：break文の「意外な副作用」と「脱出の美学」">
<article class="post-1963 related-entry-card e-card cf post type-post status-publish format-standard hentry category-javascript-post">
<figure class="related-entry-card-thumb card-thumb e-card-thumb">
<img src="http://javascript.intronational.com/wp-content/uploads/2026/06/javascript-scaled.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" />
<span class="cat-label cat-label-41">JavaScript</span> </figure><!-- /.related-entry-thumb -->
<div class="related-entry-card-content card-content e-card-content">
<h3 class="related-entry-card-title card-title e-card-title">
【JS応用｜豆知識】ループを賢く操る：break文の「意外な副作用」と「脱出の美学」 </h3>
<div class="related-entry-card-snippet card-snippet e-card-snippet">
プログラミングにおいて、ループ処理を強制終了させるbreak文は、誰もが最初に覚える制御構文の一つです。しかし、ただ「ループを止める命令」として使うだけでは、コードの可読性を大きく損なう可能性があります。今回は、フロントエンド開発の視点から... </div>
</div><!-- /.related-entry-card-content -->
</article><!-- /.related-entry-card -->
</a><!-- /.related-entry-card-wrap -->
<a href="https://javascript.intronational.com/%e3%80%90js%e5%bf%9c%e7%94%a8%e3%80%91%e5%8f%82%e7%85%a7%e5%9e%8b/" class="related-entry-card-wrap a-wrap border-element cf" title="【JS応用】参照型">
<article class="post-238 related-entry-card e-card cf post type-post status-publish format-standard hentry category-javascript-post">
<figure class="related-entry-card-thumb card-thumb e-card-thumb">
<img src="http://javascript.intronational.com/wp-content/uploads/2026/06/javascript-scaled.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" />
<span class="cat-label cat-label-41">JavaScript</span> </figure><!-- /.related-entry-thumb -->
<div class="related-entry-card-content card-content e-card-content">
<h3 class="related-entry-card-title card-title e-card-title">
【JS応用】参照型 </h3>
<div class="related-entry-card-snippet card-snippet e-card-snippet">
JavaScriptにおける参照型：メモリ管理とデータ操作の深層JavaScriptのデータ型は、大きく分けて「プリミティブ型（基本型）」と「参照型（オブジェクト型）」の二つに分類されます。多くのエンジニアが日常的にオブジェクトや配列を操作... </div>
</div><!-- /.related-entry-card-content -->
</article><!-- /.related-entry-card -->
</a><!-- /.related-entry-card-wrap -->
<a href="https://javascript.intronational.com/%e3%80%90js%e5%bf%9c%e7%94%a8%e3%80%91formdata/" class="related-entry-card-wrap a-wrap border-element cf" title="【JS応用】FormData">
<article class="post-430 related-entry-card e-card cf post type-post status-publish format-standard hentry category-javascript-post">
<figure class="related-entry-card-thumb card-thumb e-card-thumb">
<img src="http://javascript.intronational.com/wp-content/uploads/2026/06/javascript-scaled.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" />
<span class="cat-label cat-label-41">JavaScript</span> </figure><!-- /.related-entry-thumb -->
<div class="related-entry-card-content card-content e-card-content">
<h3 class="related-entry-card-title card-title e-card-title">
【JS応用】FormData </h3>
<div class="related-entry-card-snippet card-snippet e-card-snippet">
FormData APIの全貌：フロントエンドにおけるデータ送信の最適解現代のフロントエンド開発において、フォームデータの扱いは避けて通れない重要なタスクです。従来のJSON形式によるAPI通信が主流である一方で、ファイルアップロードやマル... </div>
</div><!-- /.related-entry-card-content -->
</article><!-- /.related-entry-card -->
</a><!-- /.related-entry-card-wrap -->
<a href="https://javascript.intronational.com/%e3%80%90js%e5%bf%9c%e7%94%a8%e3%80%91map-%e3%81%a8-set/" class="related-entry-card-wrap a-wrap border-element cf" title="【JS応用】Map と Set">
<article class="post-303 related-entry-card e-card cf post type-post status-publish format-standard hentry category-javascript-post">
<figure class="related-entry-card-thumb card-thumb e-card-thumb">
<img src="http://javascript.intronational.com/wp-content/uploads/2026/06/javascript-scaled.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" />
<span class="cat-label cat-label-41">JavaScript</span> </figure><!-- /.related-entry-thumb -->
<div class="related-entry-card-content card-content e-card-content">
<h3 class="related-entry-card-title card-title e-card-title">
【JS応用】Map と Set </h3>
<div class="related-entry-card-snippet card-snippet e-card-snippet">
JavaScriptにおけるMapとSetの完全理解と実務への最適化JavaScriptの進化に伴い、ES6で導入されたMapとSetは、現代のフロントエンド開発において欠かせないデータ構造となりました。従来のオブジェクト（Object）や... </div>
</div><!-- /.related-entry-card-content -->
</article><!-- /.related-entry-card -->
</a><!-- /.related-entry-card-wrap -->
<a href="https://javascript.intronational.com/%e3%80%90js%e5%bf%9c%e7%94%a8%ef%bd%9c%e5%ae%9f%e5%8b%99%e5%90%91%e3%81%91%e3%80%91javascript%e3%81%a7%e5%a4%9a%e8%a8%80%e8%aa%9e%e5%af%be%e5%bf%9c%e3%82%92%e7%a2%ba%e5%ae%9f%e3%81%ab%e3%81%99/" class="related-entry-card-wrap a-wrap border-element cf" title="【JS応用｜実務向け】JavaScriptで多言語対応を確実にする：Intl.NumberFormat.resolvedOptionsの活用術">
<article class="post-2472 related-entry-card e-card cf post type-post status-publish format-standard hentry category-javascript-post">
<figure class="related-entry-card-thumb card-thumb e-card-thumb">
<img src="http://javascript.intronational.com/wp-content/uploads/2026/06/javascript-scaled.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" />
<span class="cat-label cat-label-41">JavaScript</span> </figure><!-- /.related-entry-thumb -->
<div class="related-entry-card-content card-content e-card-content">
<h3 class="related-entry-card-title card-title e-card-title">
【JS応用｜実務向け】JavaScriptで多言語対応を確実にする：Intl.NumberFormat.resolvedOptionsの活用術 </h3>
<div class="related-entry-card-snippet card-snippet e-card-snippet">
1. 導入：なぜresolvedOptionsが必要なのかフロントエンド開発において、通貨や数値をローカライズして表示する際、私たちは Intl.NumberFormat を多用します。しかし、ブラウザやOSの環境によって「デフォルトのロケ... </div>
</div><!-- /.related-entry-card-content -->
</article><!-- /.related-entry-card -->
</a><!-- /.related-entry-card-wrap -->
</div>
</aside>
<div class="ad-area no-icon ad-below-related-posts ad-rectangle ad-label-visible cf" itemscope itemtype="https://schema.org/WPAdBlock">
<div class="ad-label" itemprop="name" data-nosnippet>スポンサーリンク</div>
<div class="ad-wrap">
<div class="ad-responsive ad-usual"><!-- レスポンシブコード -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7214025567716564"
data-ad-slot="6558619545"
data-ad-format="rectangle"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
<div id="pager-post-navi" class="pager-post-navi post-navi-default cf">
<a href="https://javascript.intronational.com/%e3%80%90js%e5%bf%9c%e7%94%a8%e3%80%91%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89%e3%82%a8%e3%83%b3%e3%82%b8%e3%83%8b%e3%82%a2%e3%81%ae%e3%81%9f%e3%82%81%e3%81%ae-select-%e8%a6%81/" title="【JS応用】フロントエンドエンジニアのための select 要素への動的オプション追加：パフォーマンスと保守性を極める実装術" class="prev-post a-wrap border-element cf">
<div class="fa fa-chevron-left iconfont" aria-hidden="true"></div>
<figure class="prev-post-thumb card-thumb"><img src="http://javascript.intronational.com/wp-content/uploads/2026/06/javascript-scaled.png" alt="" class="no-image post-navi-no-image" width="120" height="68" /></figure>
<div class="prev-post-title">【JS応用】フロントエンドエンジニアのための select 要素への動的オプション追加：パフォーマンスと保守性を極める実装術</div></a><a href="https://javascript.intronational.com/%e3%80%90js%e5%bf%9c%e7%94%a8%e3%80%91%e3%83%95%e3%83%ad%e3%83%b3%e3%83%88%e3%82%a8%e3%83%b3%e3%83%89%e9%96%8b%e7%99%ba%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e8%a6%81%e7%b4%a0%e3%81%ae%e3%82%a6%e3%82%a3/" title="【JS応用】フロントエンド開発における要素のウィンドウ座標算出：getBoundingClientRectの深淵と実践的活用術" class="next-post a-wrap cf">
<div class="fa fa-chevron-right iconfont" aria-hidden="true"></div>
<figure class="next-post-thumb card-thumb">
<img src="http://javascript.intronational.com/wp-content/uploads/2026/06/javascript-scaled.png" alt="" class="no-image post-navi-no-image" width="120" height="68" /></figure>
<div class="next-post-title">【JS応用】フロントエンド開発における要素のウィンドウ座標算出：getBoundingClientRectの深淵と実践的活用術</div></a> </div><!-- /.pager-post-navi -->
</div>
<div id="breadcrumb" class="breadcrumb breadcrumb-category sbp-main-bottom" itemscope itemtype="https://schema.org/BreadcrumbList"><div class="breadcrumb-home" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="fa fa-home fa-fw" aria-hidden="true"></span><a href="https://javascript.intronational.com" itemprop="item"><span itemprop="name" class="breadcrumb-caption">ホーム</span></a><meta itemprop="position" content="1" /></div><div class="breadcrumb-item" itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement"><span class="sp"><span class="fa fa-angle-right" aria-hidden="true"></span></span><span class="fa fa-folder fa-fw" aria-hidden="true"></span><a href="https://javascript.intronational.com/category/javascript/" itemprop="item"><span itemprop="name" class="breadcrumb-caption">JavaScript</span></a><meta itemprop="position" content="2" /></div></div>
</main>
<div id="sidebar" class="sidebar nwa cf" role="complementary">
<div class="ad-area no-icon ad-sidebar-top ad-auto ad-label-invisible cf" itemscope itemtype="https://schema.org/WPAdBlock">
<div class="ad-label" itemprop="name" data-nosnippet>スポンサーリンク</div>
<div class="ad-wrap">
<div class="ad-responsive ad-usual"><!-- レスポンシブコード -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-7214025567716564"
data-ad-slot="6558619545"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
</div>
</div>
<aside id="block-2" class="widget widget-sidebar widget-sidebar-standard widget_block widget_search"><form role="search" method="get" action="https://javascript.intronational.com/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-2" >検索</label><div class="wp-block-search__inside-wrapper" ><input class="wp-block-search__input" id="wp-block-search__input-2" placeholder="" value="" type="search" name="s" required /><button aria-label="検索" class="wp-block-search__button wp-element-button" type="submit" >検索</button></div></form></aside><aside id="categories-2" class="widget widget-sidebar widget-sidebar-standard widget_categories"><h3 class="widget-sidebar-title widget-title">カテゴリー</h3><form action="https://javascript.intronational.com" method="get"><label class="screen-reader-text" for="categories-dropdown-2">カテゴリー</label><select name='cat' id='categories-dropdown-2' class='postform'>
<option value='-1'>カテゴリーを選択</option>
<option class="level-0" value="43">Dart (865)</option>
<option class="level-1" value="48"> Dart コア文法・オブジェクト指向・Null安全 (865)</option>
<option class="level-2" value="87"> Sound Null Safety（Null安全）と Null許容型の制御 (327)</option>
<option class="level-2" value="88"> 制御構文と Dart 3 パターンマッチング (274)</option>
<option class="level-2" value="86"> 変数宣言（var, final, const）と基本データ型 (264)</option>
<option class="level-0" value="41">JavaScript (1,478)</option>
<option class="level-1" value="2"> JavaScriptコア文法・モダン言語仕様と変数・関数 (471)</option>
<option class="level-2" value="5"> 変数の宣言（var / let / const）とスコープ・巻き上げのメカニズム (471)</option>
<option class="level-0" value="42">TypeScript (865)</option>
<option class="level-1" value="44"> TypeScript コア・型システムの基礎 (865)</option>
<option class="level-2" value="53"> インターフェース（Interface）と型エイリアス（Type Alias） (300)</option>
<option class="level-2" value="52"> 基本の型（プリミティブ、配列、タプル）と型推論 (204)</option>
<option class="level-2" value="54"> 関数における型定義（引数、戻り値、オプショナル引数） (361)</option>
</select>
</form><script>
( ( dropdownId ) => {
const dropdown = document.getElementById( dropdownId );
function onSelectChange() {
setTimeout( () => {
if ( 'escape' === dropdown.dataset.lastkey ) {
return;
}
if ( dropdown.value && parseInt( dropdown.value ) > 0 && dropdown instanceof HTMLSelectElement ) {
dropdown.parentElement.submit();
}
}, 250 );
}
function onKeyUp( event ) {
if ( 'Escape' === event.key ) {
dropdown.dataset.lastkey = 'escape';
} else {
delete dropdown.dataset.lastkey;
}
}
function onClick() {
delete dropdown.dataset.lastkey;
}
dropdown.addEventListener( 'keyup', onKeyUp );
dropdown.addEventListener( 'click', onClick );
dropdown.addEventListener( 'change', onSelectChange );
})( "categories-dropdown-2" );
//# sourceURL=WP_Widget_Categories%3A%3Awidget
</script>
</aside>
<div id="sidebar-scroll" class="sidebar-scroll">
<aside id="block-6" class="widget widget-sidebar widget-sidebar-scroll widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">カテゴリー</h2><ul class="wp-block-categories-list wp-block-categories-taxonomy-category wp-block-categories"> <li class="cat-item cat-item-43"><a href="https://javascript.intronational.com/category/dart/"><span class="list-item-caption">Dart</span></a>
</li>
<li class="cat-item cat-item-48"><a href="https://javascript.intronational.com/category/dart/dart-core-oop/"><span class="list-item-caption">Dart コア文法・オブジェクト指向・Null安全</span></a>
</li>
<li class="cat-item cat-item-41"><a href="https://javascript.intronational.com/category/javascript/"><span class="list-item-caption">JavaScript</span></a>
</li>
<li class="cat-item cat-item-2"><a href="https://javascript.intronational.com/category/javascript/js-core-grammar/"><span class="list-item-caption">JavaScriptコア文法・モダン言語仕様と変数・関数</span></a>
</li>
<li class="cat-item cat-item-87"><a href="https://javascript.intronational.com/category/dart/dart-core-oop/dart-null-safety/"><span class="list-item-caption">Sound Null Safety（Null安全）と Null許容型の制御</span></a>
</li>
<li class="cat-item cat-item-42"><a href="https://javascript.intronational.com/category/typescript/"><span class="list-item-caption">TypeScript</span></a>
</li>
<li class="cat-item cat-item-44"><a href="https://javascript.intronational.com/category/typescript/ts-core-types/"><span class="list-item-caption">TypeScript コア・型システムの基礎</span></a>
</li>
<li class="cat-item cat-item-53"><a href="https://javascript.intronational.com/category/typescript/ts-core-types/ts-interface-type-alias/"><span class="list-item-caption">インターフェース（Interface）と型エイリアス（Type Alias）</span></a>
</li>
<li class="cat-item cat-item-88"><a href="https://javascript.intronational.com/category/dart/dart-core-oop/dart-pattern-matching/"><span class="list-item-caption">制御構文と Dart 3 パターンマッチング</span></a>
</li>
<li class="cat-item cat-item-52"><a href="https://javascript.intronational.com/category/typescript/ts-core-types/ts-basic-types-inference/"><span class="list-item-caption">基本の型（プリミティブ、配列、タプル）と型推論</span></a>
</li>
<li class="cat-item cat-item-5"><a href="https://javascript.intronational.com/category/javascript/js-core-grammar/variable-scope-hoisting/"><span class="list-item-caption">変数の宣言（var / let / const）とスコープ・巻き上げのメカニズム</span></a>
</li>
<li class="cat-item cat-item-86"><a href="https://javascript.intronational.com/category/dart/dart-core-oop/dart-variables-types/"><span class="list-item-caption">変数宣言（var, final, const）と基本データ型</span></a>
</li>
<li class="cat-item cat-item-54"><a href="https://javascript.intronational.com/category/typescript/ts-core-types/ts-functions-typing/"><span class="list-item-caption">関数における型定義（引数、戻り値、オプショナル引数）</span></a>
</li>
</ul></div></aside> </div>
</div>
</div>
</div>
<footer id="footer" class="footer footer-container nwa" itemscope itemtype="https://schema.org/WPFooter">
<div id="footer-in" class="footer-in wrap cf">
<div class="footer-bottom fdt-logo fnm-text-width cf">
<div class="footer-bottom-logo">
<div class="logo logo-footer logo-text"><a href="https://javascript.intronational.com/" class="site-name site-name-text-link" itemprop="url"><span class="site-name-text" itemprop="name about">javascript・typescript・dart専門の学習</span></a></div> </div>
<div class="footer-bottom-content">
<nav id="navi-footer" class="navi-footer">
<div id="navi-footer-in" class="navi-footer-in">
</div>
</nav>
<div class="source-org copyright">© 2026 javascript・typescript・dart専門の学習.</div>
</div>
</div>
</div>
</footer>
<div id="go-to-top" class="go-to-top">
<button class="go-to-top-button go-to-top-common go-to-top-hide go-to-top-button-icon-font" aria-label="トップへ戻る"><span class="fa fa-angle-double-up"></span></button>
</div>
<script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/cocoon-child-master/*","/wp-content/themes/cocoon-master/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script id="wp-hooks-js" src="https://javascript.intronational.com/wp-includes/js/dist/hooks.min.js?ver=f0f188028580e8dc1255&fver=20260819092628"></script>
<script id="wp-i18n-js" src="https://javascript.intronational.com/wp-includes/js/dist/i18n.min.js?ver=1dfe7db3940c23ea9216&fver=20260819092628"></script>
<script id="wp-i18n-js-after">
wp.i18n.setLocaleData( { 'text direction\u0004ltr': [ 'ltr' ] } );
//# sourceURL=wp-i18n-js-after
</script>
<script id="swv-js" src="https://javascript.intronational.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.7&fver=20260912112639"></script>
<script id="contact-form-7-js-translations">
( function( domain, translations ) {
var localeData = translations.locale_data[ domain ] || translations.locale_data.messages;
localeData[""].domain = domain;
wp.i18n.setLocaleData( localeData, domain );
} )( "contact-form-7", {"translation-revision-date":"2025-11-30 08:12:23+0000","generator":"GlotPress\/4.0.3","domain":"messages","locale_data":{"messages":{"":{"domain":"messages","plural-forms":"nplurals=1; plural=0;","lang":"ja_JP"},"This contact form is placed in the wrong place.":["\u3053\u306e\u30b3\u30f3\u30bf\u30af\u30c8\u30d5\u30a9\u30fc\u30e0\u306f\u9593\u9055\u3063\u305f\u4f4d\u7f6e\u306b\u7f6e\u304b\u308c\u3066\u3044\u307e\u3059\u3002"],"Error:":["\u30a8\u30e9\u30fc:"]}},"comment":{"reference":"includes\/js\/index.js"}} );
//# sourceURL=contact-form-7-js-translations
</script>
<script id="contact-form-7-js-before">
var wpcf7 = {
"api": {
"root": "https:\/\/javascript.intronational.com\/wp-json\/",
"namespace": "contact-form-7\/v1"
}
};
//# sourceURL=contact-form-7-js-before
</script>
<script id="contact-form-7-js" src="https://javascript.intronational.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.7&fver=20260912112639"></script>
<script id="cookie-notice-front-js-before">
var cnArgs = {"ajaxUrl":"https:\/\/javascript.intronational.com\/wp-admin\/admin-ajax.php","nonce":"df1e749210","hideEffect":"fade","position":"bottom","onScroll":false,"onScrollOffset":100,"onClick":false,"cookieName":"cookie_notice_accepted","cookieTime":2592000,"cookieTimeRejected":2592000,"globalCookie":false,"redirection":false,"cache":false,"revokeCookies":false,"revokeCookiesOpt":"automatic"};
//# sourceURL=cookie-notice-front-js-before
</script>
<script id="cookie-notice-front-js" src="https://javascript.intronational.com/wp-content/plugins/cookie-notice/js/front.min.js?ver=3.1.11&fver=20260919043105"></script>
<script id="baguettebox-js-js" src="https://javascript.intronational.com/wp-content/themes/cocoon-master/plugins/baguettebox/dist/baguetteBox.min.js?ver=7.1.2&fver=20260403014215"></script>
<script id="baguettebox-js-js-after">
(function($){
baguetteBox.run(".entry-content");
})(jQuery);
//# sourceURL=baguettebox-js-js-after
</script>
<script id="slicknav-js-js" src="https://javascript.intronational.com/wp-content/themes/cocoon-master/plugins/slicknav/jquery.slicknav.min.js?ver=7.1.2&fver=20260403014215"></script>
<script id="slicknav-js-js-after">
(function($){
$(".menu-header").slicknav({
label: "MENU",
parentTag: "div",
allowParentLinks: true,
});
})(jQuery);
//# sourceURL=slicknav-js-js-after
</script>
<script async data-wp-strategy="async" fetchpriority="low" id="comment-reply-js" src="https://javascript.intronational.com/wp-includes/js/comment-reply.min.js?ver=7.1.2&fver=20260819092628"></script>
<script id="cocoon-js-js-extra">
var cocoon_localize_script_options = {"is_lazy_load_enable":null,"is_fixed_mobile_buttons_enable":"","is_google_font_lazy_load_enable":""};
//# sourceURL=cocoon-js-js-extra
</script>
<script id="cocoon-js-js" src="https://javascript.intronational.com/wp-content/themes/cocoon-master/javascript.js?ver=7.1.2&fver=20260403014215"></script>
<script id="cocoon-child-js-js" src="https://javascript.intronational.com/wp-content/themes/cocoon-child-master/javascript.js?ver=7.1.2&fver=20260403014219"></script>
<script id="googlesitekit-events-provider-contact-form-7-js" src="https://javascript.intronational.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-events-provider-contact-form-7-fac2a8013ba5ba355cd0.js?fver=20260912102644" defer></script>
<script id="googlesitekit-events-provider-content-events-js-before">
window._googlesitekit = window._googlesitekit || {};
window._googlesitekit.contentEvents = {"postID":989,"isSinglePost":true,"hasVimeoEmbed":false};
//# sourceURL=googlesitekit-events-provider-content-events-js-before
</script>
<script id="googlesitekit-events-provider-content-events-js" src="https://javascript.intronational.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-events-provider-content-events-bb83c1a0aedefa5d25d1.js?fver=20260912102644" defer></script>
<!-- Cookie Compliance for WordPress (formerly Compliance by Hu-manity.co) plugin v3.1.11 https://cookie-compliance.co/ -->
<div id="cookie-notice" role="dialog" class="cookie-notice-hidden cookie-revoke-hidden cn-position-bottom" aria-label="Cookie Compliance" style="background-color: rgba(50,50,58,1);"><div class="cookie-notice-container" style="color: #fff"><span id="cn-notice-text" class="cn-text-container">よりよいエクスペリエンスを提供するため、当ウェブサイトでは Cookie を使用しています。引き続き閲覧する場合、Cookie の使用を承諾したものとみなされます。</span><span id="cn-notice-buttons" class="cn-buttons-container"><button id="cn-accept-cookie" data-cookie-set="accept" class="cn-set-cookie cn-button" aria-label="OK" style="background-color: #00a99d">OK</button></span><button type="button" id="cn-close-notice" data-cookie-set="accept" class="cn-close-icon" aria-label="いいえ" tabindex="0"></button></div>
</div>
<!-- / Cookie Compliance for WordPress plugin -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7214025567716564" crossorigin="anonymous"></script>
<script>!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="//assets.pinterest.com/js/pinit_main.js";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pinterest-btn-js");</script>
<div class="copy-info">タイトルとURLをコピーしました</div>
<script>
(function($){
const selector = '.copy-button';//clipboardで使う要素を指定
$(selector).click(function(event){
//クリック動作をキャンセル
event.preventDefault();
//クリップボード動作
navigator.clipboard.writeText($(selector).attr('data-clipboard-text')).then(
() => {
$('.copy-info').fadeIn(500).delay(1000).fadeOut(500);
});
});
})(jQuery);
</script>
</div><!-- #container -->
</body>
</html>
JavaScript