【テクニカル・上級編】 iframeのレンダリング分離とセキュリティ – Webブラウザの仕組み実践ガイド

iframeの闇と光：Site Isolationが生んだ「安全な分断」のアーキテクチャ

こんにちは。ブラウザのソースコードを眺めながらコーヒーを飲むのが至福の時間の、フロントエンド・アーキテクトです。

Webアプリケーションの規模が肥大化し、マイクロフロントエンドという甘美な響きに酔いしれながら、私たちは日々無数の `` を画面上に貼り付けています。「サードパーティの決済ウィジェットだから」「レガシーな管理画面のモジュールだから」「セキュリティの境界線を引きたいから」――理由は様々でしょう。</p> <p>しかし、あなたはその `<iframe>` がブラウザの内部で<b>どのような地獄を生き抜いて画面にピクセルを描画しているか</b>、想像したことがありますか？</p> <p>かつてのブラウザは、同一オリジンであれクロスオリジンであれ、基本的に同一のOSプロセス（あるいはスレッドプール）の中でDOMツリーをこねくり回していました。SpectreやMeltdownといったハードウェアレベルの脆弱性が発見されるまでは。あの悪夢のようなCPUの投機実行バケツリレー以降、ブラウザベンダーは「同じプロセスに信用ならない他人のコードを置いてはならない」という強烈なパラダイムシフトを強いられました。</p> <p>今回は、現代ブラウザの根幹をなす <b>Site Isolation（サイト分離）</b> の仕組みを紐解きながら、iframeがレンダリングの裏側でいかに重たい代償を払い、いかに厳格なセキュリティの枷（かせ）を嵌められているかを、ギークな視点から徹底的に解剖していこうと思います。</p> <p>—</p> <h3><span id="toc2">1. Site Isolationの正体：プロセス境界線の向こう側</span></h3> <p>かつて、Chromeなどのモダンブラウザは「タブ単位」でプロセスを分離していました。しかし、同一タブ内に異なるオリジン（例: `https://A.com` の中に `https://B.com` のiframe）が存在する場合、それらは同じメモリ空間を共有していました。これはサイドチャネル攻撃において、相手のメモリを覗き見放題の「オープンハウス状態」を意味します。</p> <p>これを根本から破壊したのが <b>Site Isolation</b> です。</p> <p>現代のブラウザ（Chromiumベース）では、異なる「サイト」（厳密にはSchemeと登録可能ドメインに基づく）に属するiframeは、<b>完全に独立したOSプロセス（Renderer Process）</b>として起動されます。</p> <p>[ Browser Process (UI, Network) ]<br /> │<br /> ├─► [ Renderer Process: https://app.com ] (メインフレーム)<br /> │ │<br /> │ └─ (IPC通信)<br /> │ │<br /> └─► [ Renderer Process: https://ads.com ] (クロスオリジンiframe)</p> <p>ここで何が起きているか？<br /> 親フレームと子フレームの間には、もはや直接的なメモリの共有はありません。DOMの参照？そんなものは夢のまた夢です。親から子へ何かを伝える、あるいはその逆を行おうとすれば、すべて <b>IPC（プロセス間通信）</b> を経由したシリアライズ・非同期通信の旅に出る必要があります。</p> <h3><span id="toc3">レンダリングの裏側：Surface Aggregation（サーフェス統合）の泥臭い現実</span></h3> <p>別プロセスで動いているということは、それぞれのプロセスが勝手に画面のピクセル（Bitmap）を作っているということです。では、それらが最終的にどうやって1つのWebページとして合成されるのでしょうか？</p> <p>ここで登場するのが <b>Vizコンポジター</b> と呼ばれるブラウザの背骨です。</p> <p>1. <b>子プロセス（iframe）</b>側でHTMLがパースされ、CSSOMが構築され、レイアウト・ペイントが行われます。<br /> 2. 子プロセスのGPUラスター化レイヤーが生成した描画結果（Surfaces）は、共有メモリやダイレクトなGPUテクスチャハンドルを通じて、<b>Browser Process（または専属のGPUプロセス）</b>へと送られます。<br /> 3. ブラウザのコンポジターは、親フレームの描画ツリーの中に「この座標にはあのプロセスの描画結果をハメ込む」というプレースホルダー（Surface ID）を配置し、最終的な画面として合成（Aggregation）します。</p> <p>つまり、あなたがブラウザで見ている「きれいなネストされたiframe」は、実際には<b>OSレベルのウィンドウ合成技術に似たアクロバティックな合わせ鏡</b>の成果なのです。これだけのオーバーヘッドを毎秒60フレーム（あるいは120フレーム）で維持しているブラウザエンジニアには、足を向けて寝られません。</p> <p>—</p> <h3><span id="toc4">2. クロスオリジンiframeが直面する残酷なセキュリティ制約</span></h3> <p>プロセスが完全に分離されたことで、セキュリティは飛躍的に向上しました。しかし、その代償として、開発者は数々の理不尽とも思える制約に直面します。</p> <h3><span id="toc5">DOMアクセスと `postMessage` の非同期地獄</span></h3> <p>親フレームから `iframe.contentDocument` にアクセスしようとして、`DOMException: Blocked a frame with origin…` というお馴染みの赤いエラー踏んだことがないフロントエンドエンジニアはいないでしょう。クロスオリジンである以上、これは絶対不可能です。</p> <p>データをやり取りするには `window.postMessage` を使いますが、これは<b>完全に非同期のIPCメッセージング</b>です。</p> <p>// 親から子へのメッセージ送信（非同期）<br /> const iframe = document.getElementById(‘my-frame’);<br /> iframe.contentWindow.postMessage({ type: ‘UPDATE_DATA’, payload: data }, ‘https://trusted-child.com’);</p> <p>// 受信側（子フレーム）<br /> window.addEventListener(‘message’, (event) => {<br /> // 厳格なオリジンチェックが必須。これをサボるとセキュリティホール直行便<br /> if (event.origin !== ‘https://app.com’) return;</p> <p> console.log(‘受け取ったデータ:’, event.data);<br /> // レンダリングや状態更新は、ここからさらに非同期のReactレンダリングなどをキックする<br /> }, false);</p> <p>この非同期性こそが、UIの「カクつき」や「状態の不整合」の温床になります。親の操作と子の描画の間には常にレイテンシが存在するため、モーダルや複雑なアニメーションの追従において、iframe内部のコンテンツがコンマ数秒遅れて追従する「チラつき（Flickering）」が発生しやすくなります。</p> <h3><span id="toc6">スタイリングの完全な隔離とCSSの壁</span></h3> <p>「親のCSSで子の中身のボタンをカッコよくスタイリングしたい」――残念ながら、それは不可能です。iframeの境界線は、CSSの継承（Inheritance）も完全に遮断します。</p> <p>例外的に、`<iframe loading="lazy">` や `sandbox` 属性、あるいは `allow` 属性による機能制限（カメラやマイク、ストレージアクセスの制御）などがありますが、これらはすべて「ブラウザのセキュリティポリシー」という名の城壁によって厳格に守られています。</p> <p>—</p> <h3><span id="toc7">3. パフォーマンス最適化と「重大なバグ」の回避策</span></h3> <p>ここまで読めば、iframeを安易に大量配置することがどれほどの「メモリの暴力」であるかが理解できるはずです。タブを何枚も開いているのと同じだけのメモリ消費とプロセス生成コストが、1つのページ内にばら撒かれることになります。</p> <p>ここからは、実務で絶対に踏んではいけない地雷と、その回避策をアーキテクチャの視点から提示します。</p> <h3><span id="toc8">アンチパターン：SPA内でのiframe乱用によるメモリリーク</span></h3> <p>マイクロフロントエンドのアーキテクチャで、ページ遷移のたびにiframeをDOMから外したり挿入したりする設計を見かけますが、これは<b>最悪のメモリリークの温床</b>です。</p> <p>Rendererプロセスは、DOMからiframeが消えた瞬間に即座に解放されるとは限りません。ガベージコレクションやプロセスの再利用ポリシー（Process Reuse Policy）により、バックグラウンドでプロセスがゾンビのように残り続け、メモリを圧迫し続けます。</p> <h3><span id="toc9">【対策】iframeのライフサイクル管理と再利用プール</span></h3> <p>iframeを使う場合は、動的な生成・破棄を避け、<b>「コンポーネントの非表示化（`display: none` または `visibility: hidden`）」</b>、あるいはプロセスを枯渇させないためのプーリングを検討すべきです。ただし、`display: none` でもプロセス自体は生き続けるため、メモリ消費量とのトレードオフを常時監視する必要があります。</p> <p>以下は、安全かつ効率的にiframeをロードし、メモリ消費を最適化するための実装パターンの一例です。</p> <p>/</p> <ul> <li>高度なiframeコントローラー</li> <li>レンダリング負荷とメモリ消費をコントロールするためのラッパー</li> </ul> <p> /<br /> class IsolatedFrameController {<br /> constructor(containerId, src) {<br /> this.container = document.getElementById(containerId);<br /> this.src = src;<br /> this.iframe = null;<br /> this.isLoaded = false;<br /> }</p> <p> // 遅延ロードとIntersection Observerの組み合わせ<br /> initLazyLoad() {<br /> const observer = new IntersectionObserver((entries, obs) => {<br /> entries.forEach(entry => {<br /> if (entry.isIntersecting) {<br /> this.mount();<br /> obs.unobserve(entry.target);<br /> }<br /> });<br /> });</p> <p> observer.observe(this.container);<br /> }</p> <p> mount() {<br /> if (this.iframe) return;</p> <p> this.iframe = document.createElement(‘iframe’);<br /> this.iframe.src = this.src;</p> <p> // セキュリティの要：必要最小限の権限だけを付与<br /> this.iframe.setAttribute(‘sandbox’, ‘allow-scripts allow-same-origin’);<br /> this.iframe.loading = ‘lazy’;</p> <p> // スタイルによるレイアウトシフト（CLS）の防止<br /> this.iframe.style.width = ‘100%’;<br /> this.iframe.style.height = ‘500px’;<br /> this.iframe.style.border = ‘none’;</p> <p> this.iframe.onload = () => {<br /> this.isLoaded = true;<br /> console.log(`[IsolatedFrame] プロセスが安定してロードされました: ${this.src}`);<br /> };</p> <p> this.container.appendChild(this.iframe);<br /> }</p> <p> // 破棄時に明示的にメモリ解放を促す<br /> destroy() {<br /> if (this.iframe) {<br /> // 内部のJavaScriptコンテキストを停止させるためにsrcをabout:blankにする<br /> this.iframe.src = ‘about:blank’;<br /> this.iframe.remove();<br /> this.iframe = null;<br /> this.isLoaded = false;<br /> console.log(‘[IsolatedFrame] 安全に破棄されました’);<br /> }<br /> }<br /> }</p> <p>// 使用例<br /> // const frameCtrl = ainsi IsolatedFrameController(‘widget-container’, ‘https://third-party.com/widget’);<br /> // frameCtrl.initLazyLoad();</p> <h3><span id="toc10">避けられないCLS（Cumulative Layout Shift）の撃退</span></h3> <p>iframeは、初期読み込み時にサイズが確定しないことが多く、これがWeb Vitalsの指標の一つである <b>CLS（レイアウトのガタつき）</b> を悪化させる最大の原因になります。子プロセスが完全にレンダリングを終え、サイズを計算し直して親に伝えるまでの間に、コンテンツがガタっとずれるわけです。</p> <p><b>回避策:</b><br /> 親側で必ず `aspect-ratio` や固定の高さを指定し、iframeが読み込まれる領域の「箱」をあらかじめグリッド上で確保しておくこと。プロセスが別であっても、親が描画領域のバウンディングボックスを支配していれば、コンポジターはレイアウトの再計算を最小限に抑えられます。</p> <p>—</p> <h3><span id="toc11">4. 結びにかえて：トレードオフとしての「壁」</span></h3> <p>iframeのレンダリング分離とセキュリティは、<b>「便利さと引き換えに自由を奪われた世界」</b>です。</p> <p>私たちは、単に「別画面を埋め込むタグ」としてiframeを見ているわけにはいきません。その裏では、OSのプロセスが立ち上がり、メモリが消費され、Vizコンポジターがピクセルを必死に合成し、IPCが非同期でデータをやり取りしている――このハードウェアとブラウザエンジンの鼓動を感じ取れるかどうかが、シニアとエキスパートを分ける境界線です。</p> <p>セキュリティの壁を尊び、非同期の制約を愛し、メモリ効率を極限までチューニングする。それこそが、現代のフロントエンド・スペシャリストに求められる真のアーキテクチャ思考なのです。</p> <p>さあ、あなたのコードベースにあるそのiframe、本当にプロセスを分ける価値がありますか？それとも、ただ思考停止で貼られた「安全な監獄」でしょうか。見直すなら、今です。</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-5" href="https://frontend.intronational.com/category/web%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf/"><span class="fa fa-folder cat-icon tax-icon" aria-hidden="true"></span>Webブラウザの仕組み</a><a class="cat-link cat-link-86" href="https://frontend.intronational.com/category/web%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf/%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%83%ac%e3%83%b3%e3%83%80%e3%83%aa%e3%83%b3%e3%82%b0%ef%bc%88%e8%a7%a3%e6%9e%90%ef%bc%9ahtml%e3%83%91%e3%83%bc%e3%82%b9-dom-cssom%e3%83%84%e3%83%aa%e3%83%bc/"><span class="fa fa-folder cat-icon tax-icon" aria-hidden="true"></span>ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）</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%90%E3%83%86%E3%82%AF%E3%83%8B%E3%82%AB%E3%83%AB%E3%83%BB%E4%B8%8A%E7%B4%9A%E7%B7%A8%E3%80%91+iframe%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E5%88%86%E9%9B%A2%E3%81%A8%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3+%E2%80%93+Web%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89&url=https%3A%2F%2Ffrontend.intronational.com%2F2026%2F09%2F25%2F%25e3%2580%2590%25e3%2583%2586%25e3%2582%25af%25e3%2583%258b%25e3%2582%25ab%25e3%2583%25ab%25e3%2583%25bb%25e4%25b8%258a%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591-iframe%25e3%2581%25ae%25e3%2583%25ac%25e3%2583%25b3%25e3%2583%2580%25e3%2583%25aa%25e3%2583%25b3%25e3%2582%25b0%25e5%2588%2586%25e9%259b%25a2%25e3%2581%25a8%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%2Ffrontend.intronational.com%2F2026%2F09%2F25%2F%25e3%2580%2590%25e3%2583%2586%25e3%2582%25af%25e3%2583%258b%25e3%2582%25ab%25e3%2583%25ab%25e3%2583%25bb%25e4%25b8%258a%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591-iframe%25e3%2581%25ae%25e3%2583%25ac%25e3%2583%25b3%25e3%2583%2580%25e3%2583%25aa%25e3%2583%25b3%25e3%2582%25b0%25e5%2588%2586%25e9%259b%25a2%25e3%2581%25a8%2F&t=%E3%80%90%E3%83%86%E3%82%AF%E3%83%8B%E3%82%AB%E3%83%AB%E3%83%BB%E4%B8%8A%E7%B4%9A%E7%B7%A8%E3%80%91+iframe%E3%81%AE%E3%83%AC%E3%83%B3%E3%83%80%E3%83%AA%E3%83%B3%E3%82%B0%E5%88%86%E9%9B%A2%E3%81%A8%E3%82%BB%E3%82%AD%E3%83%A5%E3%83%AA%E3%83%86%E3%82%A3+%E2%80%93+Web%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%81%AE%E4%BB%95%E7%B5%84%E3%81%BF%E5%AE%9F%E8%B7%B5%E3%82%AC%E3%82%A4%E3%83%89" 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/frontend.intronational.com/2026/09/25/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-iframe%e3%81%ae%e3%83%ac%e3%83%b3%e3%83%80%e3%83%aa%e3%83%b3%e3%82%b0%e5%88%86%e9%9b%a2%e3%81%a8/" 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%2Ffrontend.intronational.com%2F2026%2F09%2F25%2F%25e3%2580%2590%25e3%2583%2586%25e3%2582%25af%25e3%2583%258b%25e3%2582%25ab%25e3%2583%25ab%25e3%2583%25bb%25e4%25b8%258a%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591-iframe%25e3%2581%25ae%25e3%2583%25ac%25e3%2583%25b3%25e3%2583%2580%25e3%2583%25aa%25e3%2583%25b3%25e3%2582%25b0%25e5%2588%2586%25e9%259b%25a2%25e3%2581%25a8%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%2Ffrontend.intronational.com%2F2026%2F09%2F25%2F%25e3%2580%2590%25e3%2583%2586%25e3%2582%25af%25e3%2583%258b%25e3%2582%25ab%25e3%2583%25ab%25e3%2583%25bb%25e4%25b8%258a%25e7%25b4%259a%25e7%25b7%25a8%25e3%2580%2591-iframe%25e3%2581%25ae%25e3%2583%25ac%25e3%2583%25b3%25e3%2583%2580%25e3%2583%25aa%25e3%2583%25b3%25e3%2582%25b0%25e5%2588%2586%25e9%259b%25a2%25e3%2581%25a8%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="【テクニカル・上級編】 iframeのレンダリング分離とセキュリティ – Webブラウザの仕組み実践ガイド https://frontend.intronational.com/2026/09/25/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-iframe%e3%81%ae%e3%83%ac%e3%83%b3%e3%83%80%e3%83%aa%e3%83%b3%e3%82%b0%e5%88%86%e9%9b%a2%e3%81%a8/" 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> </div>  <div class="sns-follow bc-brand-color fbc-hide sf-bottom"> <div class="sns-follow-message">frontendintronationalをフォローする</div> <div class="sns-follow-buttons sns-buttons"> <a href="//feedly.com/i/discover/sources/search/feed/https%3A%2F%2Ffrontend.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://frontend.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> </div> <div class="footer-meta"> <div class="author-info"> <span class="fa fa-pencil" aria-hidden="true"></span> <a href="https://frontend.intronational.com/author/frontendintronational/" 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://frontend.intronational.com/author/frontendintronational/"> <span class="author-name fn" itemprop="name">frontendintronational</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://frontend.intronational.com/2026/09/16/%e3%80%90%e5%85%a5%e9%96%80%e7%b7%a8%e3%80%91-%e3%83%ad%e3%83%b3%e3%82%b0%e3%82%bf%e3%82%b9%e3%82%af%e3%81%a8%e3%83%a1%e3%82%a4%e3%83%b3%e3%82%b9%e3%83%ac%e3%83%83%e3%83%89%e3%81%ae%e3%83%96%e3%83%ad/" class="related-entry-card-wrap a-wrap border-element cf" title="【入門編】ロングタスクとメインスレッドのブロッキング – Webブラウザの仕組み実践ガイド"> <article class="post-5635 related-entry-card e-card cf post type-post status-publish format-standard hentry category-web-post category-html-dom-cssom-post"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" /> <span class="cat-label cat-label-5">Webブラウザの仕組み</span> </figure> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> 【入門編】ロングタスクとメインスレッドのブロッキング – Webブラウザの仕組み実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> こんにちは！フロントエンドの現場を長年歩んできたチーフアーキテクトの私です。Webサイトを作っていて、「なんだかこのボタン、クリックしても反応するまでにワンテンポ遅れるな…」「スマホでスクロールすると、カクカクして気持ち悪いな…」と感じたこ... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/17/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91-%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e3%81%a8%e3%83%ac%e3%83%b3%e3%83%80%e3%83%aa%e3%83%b3/" class="related-entry-card-wrap a-wrap border-element cf" title="【実務・中級編】フォント読み込みとレンダリングへの影響 – Webブラウザの仕組み実践ガイド"> <article class="post-6362 related-entry-card e-card cf post type-post status-publish format-standard hentry category-web-post category-html-dom-cssom-post"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" /> <span class="cat-label cat-label-5">Webブラウザの仕組み</span> </figure> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> 【実務・中級編】フォント読み込みとレンダリングへの影響 – Webブラウザの仕組み実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> Webブラウザの「フォント」という名の地雷：FOIT/FOUTを制し、レンダリングを最適化するやあ。フロントエンドの現場で、「フォントの読み込み待ち」に泣かされた経験はないかな？「ページが開いた瞬間、文字が消える」「レイアウトがガタガタと崩... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/16/%e3%80%90%e5%85%a5%e9%96%80%e7%b7%a8%e3%80%91-html%e3%83%91%e3%83%bc%e3%82%b9%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e3%83%88%e3%83%bc%e3%82%af%e3%83%b3%e5%8c%96%e3%83%97%e3%83%ad%e3%82%bb%e3%82%b9-web/" class="related-entry-card-wrap a-wrap border-element cf" title="【入門編】 HTMLパースにおけるトークン化プロセス – Webブラウザの仕組み実践ガイド"> <article class="post-5755 related-entry-card e-card cf post type-post status-publish format-standard hentry category-web-post category-html-dom-cssom-post"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" /> <span class="cat-label cat-label-5">Webブラウザの仕組み</span> </figure> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> 【入門編】 HTMLパースにおけるトークン化プロセス – Webブラウザの仕組み実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> こんにちは！フロントエンドの世界へようこそ。チーフアーキテクトの私です。日頃何気なく書いているHTML。「``タグを閉め忘れたな」「ここに文字を入れたらちゃんと画面に出るな」なんて、当たり前のようにブラウザは表示してくれますよね。でも、ちょ... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/16/%e3%80%90%e5%85%a5%e9%96%80%e7%b7%a8%e3%80%91-html%e3%83%91%e3%83%bc%e3%82%b5%e3%83%bc%e3%81%ae%e3%83%88%e3%83%bc%e3%82%af%e3%83%b3%e5%8c%96%e3%83%97%e3%83%ad%e3%82%bb%e3%82%b9-web%e3%83%96%e3%83%a9/" class="related-entry-card-wrap a-wrap border-element cf" title="【入門編】 HTMLパーサーのトークン化プロセス – Webブラウザの仕組み実践ガイド"> <article class="post-5677 related-entry-card e-card cf post type-post status-publish format-standard hentry category-web-post category-html-dom-cssom-post"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" /> <span class="cat-label cat-label-5">Webブラウザの仕組み</span> </figure> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> 【入門編】 HTMLパーサーのトークン化プロセス – Webブラウザの仕組み実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> こんにちは！フロントエンド・アーキテクチャの世界へようこそ。日々私たちが何気なく書いているHTMLコードですが、「ブラウザって、これのどこを見て画面を描いているんだろう？」って、ふと思ったことはありませんか？「文字の羅列が、どうやってあのリ... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/16/%e3%80%90%e5%85%a5%e9%96%80%e7%b7%a8%e3%80%91-contain%e3%83%97%e3%83%ad%e3%83%91%e3%83%86%e3%82%a3%e3%81%ab%e3%82%88%e3%82%8b%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%e3%81%ae%e5%88%86%e9%9b%a2/" class="related-entry-card-wrap a-wrap border-element cf" title="【入門編】 containプロパティによるレイアウトの分離（Containment） – Webブラウザの仕組み実践ガイド"> <article class="post-5484 related-entry-card e-card cf post type-post status-publish format-standard hentry category-web-post category-html-dom-cssom-post"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" /> <span class="cat-label cat-label-5">Webブラウザの仕組み</span> </figure> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> 【入門編】 containプロパティによるレイアウトの分離（Containment） – Webブラウザの仕組み実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> こんにちは！Webブラウザの仕組みの裏側を覗く旅へようこそ。日々のWeb制作、本当にお疲れ様です。「CSSを書いたら、なぜか意図しないところがガタガタ動いちゃった…」「ちょっとしたアニメーションを入れただけなのに、ページ全体のスクロールがカ... </div> </div> </article> </a> <a href="https://frontend.intronational.com/2026/09/24/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-shadow-dom%e3%81%8c%e3%83%ac%e3%83%b3%e3%83%80%e3%83%aa%e3%83%b3%e3%82%b0%e3%81%ab%e4%b8%8e%e3%81%88/" class="related-entry-card-wrap a-wrap border-element cf" title="【テクニカル・上級編】 Shadow DOMがレンダリングに与える影響 – Webブラウザの仕組み実践ガイド"> <article class="post-7804 related-entry-card e-card cf post type-post status-publish format-standard hentry category-web-post category-html-dom-cssom-post"> <figure class="related-entry-card-thumb card-thumb e-card-thumb"> <img src="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image related-entry-card-no-image" width="160" height="90" /> <span class="cat-label cat-label-5">Webブラウザの仕組み</span> </figure> <div class="related-entry-card-content card-content e-card-content"> <h3 class="related-entry-card-title card-title e-card-title"> 【テクニカル・上級編】 Shadow DOMがレンダリングに与える影響 – Webブラウザの仕組み実践ガイド </h3> <div class="related-entry-card-snippet card-snippet e-card-snippet"> Shadow DOMとレンダリングの深層：カプセル化がブラウザエンジンに強いる「覚悟」こんにちは。ブラウザのC++ソースコードを眺めながらコーヒーを飲むのが日課のフロントエンド・アーキテクチャおたくです。モダンWeb開発において、Web C... </div> </div> </article> </a> </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://frontend.intronational.com/2026/09/25/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-symbol%e5%9e%8b%e3%81%ae%e7%89%b9%e6%80%a7%e3%81%a8%e4%b8%80%e6%84%8f%e6%80%a7-javascript%e5%ae%9f/" title="【テクニカル・上級編】 Symbol型の特性と一意性 – JavaScript実践ガイド" 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="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image post-navi-no-image" width="120" height="68" /></figure> <div class="prev-post-title">【テクニカル・上級編】 Symbol型の特性と一意性 – JavaScript実践ガイド</div></a><a href="https://frontend.intronational.com/2026/09/25/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-constructorparameters%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf%e3%81%a8%e5%88%a9%e7%94%a8%e4%be%8b-type/" title="【テクニカル・上級編】 ConstructorParameters<T>の仕組みと利用例 – TypeScript実践ガイド" 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="https://frontend.intronational.com/wp-content/themes/cocoon-master/images/no-image-160.png" alt="" class="no-image post-navi-no-image" width="120" height="68" /></figure> <div class="next-post-title">【テクニカル・上級編】 ConstructorParameters<T>の仕組みと利用例 – TypeScript実践ガイド</div></a> </div>  <div id="comment-area" class="comment-area"> <section class="comment-list"> <h2 id="comments" class="comment-title"> コメント </h2> </section> <aside class="comment-form-wrap"> <button type="button" id="comment-reply-btn" class="comment-btn key-btn">コメントを書き込む</button> <div id="respond" class="comment-respond"> <h3 id="reply-title" class="comment-reply-title">コメントをどうぞ <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2026/09/25/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-iframe%e3%81%ae%e3%83%ac%e3%83%b3%e3%83%80%e3%83%aa%e3%83%b3%e3%82%b0%e5%88%86%e9%9b%a2%e3%81%a8/#respond" style="display:none;">コメントをキャンセル</a></small></h3><form action="https://frontend.intronational.com/wp-comments-post.php" method="post" id="commentform" class="comment-form"><p class="comment-notes"><span id="email-notes">メールアドレスが公開されることはありません。</span> <span class="required">※</span> が付いている欄は必須項目です</p><p class="comment-form-comment"><label for="comment">コメント <span class="required">※</span></label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p><p class="comment-form-author"><label for="author">名前 <span class="required">※</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required="required" /></p> <p class="comment-form-email"><label for="email">メール <span class="required">※</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p> <p class="comment-form-url"><label for="url">サイト</label> <input id="url" name="url" type="text" value="" size="30" maxlength="200" autocomplete="url" /></p> <p class="comment-form-cookies-consent"><input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes" /> <label for="wp-comment-cookies-consent">次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。</label></p> <p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="コメントを送信" /> <input type='hidden' name='comment_post_ID' value='7852' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /> </p></form> </div> </aside></div> </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://frontend.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://frontend.intronational.com/category/web%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf/" itemprop="item"><span itemprop="name" class="breadcrumb-caption">Webブラウザの仕組み</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://frontend.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="block-3" class="widget widget-sidebar widget-sidebar-standard 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-latest-posts__list wp-block-latest-posts is-layout-flow wp-block-latest-posts-is-layout-flow"><li><a class="wp-block-latest-posts__post-title" href="https://frontend.intronational.com/2026/09/30/%e3%80%90%e5%85%a5%e9%96%80%e7%b7%a8%e3%80%91ol%e3%82%bf%e3%82%b0%e3%81%aestart%e5%b1%9e%e6%80%a7%e3%81%a8reversed%e5%b1%9e%e6%80%a7%e3%81%ae%e6%b4%bb%e7%94%a8-html%e5%ae%9f%e8%b7%b5%e3%82%ac/">【入門編】olタグのstart属性とreversed属性の活用 – HTML実践ガイド</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://frontend.intronational.com/2026/09/30/%e3%80%90%e5%ae%9f%e5%8b%99%e3%83%bb%e4%b8%ad%e7%b4%9a%e7%b7%a8%e3%80%91-%e9%9d%9e%e5%90%8c%e6%9c%9f%e5%87%a6%e7%90%86%e3%81%ab%e3%81%8a%e3%81%91%e3%82%8b%e3%83%ac%e3%83%bc%e3%82%b9%e3%82%b3-2/">【実務・中級編】非同期処理におけるレースコンディションの制御 – React実践ガイド</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://frontend.intronational.com/2026/09/30/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-keyof-typeof%e3%81%ae%e7%b5%84%e3%81%bf%e5%90%88%e3%82%8f%e3%81%9b%e3%83%91%e3%82%bf%e3%83%bc/">【テクニカル・上級編】 keyof typeofの組み合わせパターン – TypeScript実践ガイド</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://frontend.intronational.com/2026/09/30/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-%e5%bc%b7%e5%88%b6%e5%90%8c%e6%9c%9f%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%e3%81%ae%e6%a4%9c/">【テクニカル・上級編】強制同期レイアウトの検知と回避 – Webブラウザの仕組み実践ガイド</a></li> <li><a class="wp-block-latest-posts__post-title" href="https://frontend.intronational.com/2026/09/30/%e3%80%90%e3%83%86%e3%82%af%e3%83%8b%e3%82%ab%e3%83%ab%e3%83%bb%e4%b8%8a%e7%b4%9a%e7%b7%a8%e3%80%91-string-prototype-substr%e3%81%ae%e9%9d%9e%e6%8e%a8%e5%a5%a8%e7%90%86%e7%94%b1%e3%81%a8%e4%bb%a3/">【テクニカル・上級編】 String.prototype.substr()の非推奨理由と代替案 – JavaScript実践ガイド</a></li> </ul></div></aside><aside id="block-4" class="widget widget-sidebar widget-sidebar-standard widget_block"><div class="wp-block-group is-layout-flow wp-block-group-is-layout-flow"><h2 class="wp-block-heading">最近のコメント</h2><div class="no-comments wp-block-latest-comments">表示できるコメントはありません。</div></div></aside> <div id="sidebar-scroll" class="sidebar-scroll"> <aside id="block-5" 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-archives-list wp-block-archives"> <li><a href='https://frontend.intronational.com/2026/09/'><span class="list-item-caption">2026年9月</span></a></li> <li><a href='https://frontend.intronational.com/2026/08/'><span class="list-item-caption">2026年8月</span></a></li> <li><a href='https://frontend.intronational.com/2026/07/'><span class="list-item-caption">2026年7月</span></a></li> <li><a href='https://frontend.intronational.com/2026/06/'><span class="list-item-caption">2026年6月</span></a></li> <li><a href='https://frontend.intronational.com/2026/05/'><span class="list-item-caption">2026年5月</span></a></li> <li><a href='https://frontend.intronational.com/2026/04/'><span class="list-item-caption">2026年4月</span></a></li> </ul></div></aside><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-3"><a href="https://frontend.intronational.com/category/css/"><span class="list-item-caption">CSS</span></a> </li> <li class="cat-item cat-item-30"><a href="https://frontend.intronational.com/category/css/css%e3%81%ae%e8%a8%98%e8%bf%b0%e5%a0%b4%e6%89%80%e3%81%a8%e8%aa%ad%e3%81%bf%e8%be%bc%e3%81%bf%e5%84%aa%e5%85%88%e9%a0%86%e4%bd%8d%ef%bc%88%e8%a9%b3%e7%b4%b0%e5%ba%a6-important%ef%bc%89/"><span class="list-item-caption">CSSの記述場所と読み込み優先順位（詳細度, !important）</span></a> </li> <li class="cat-item cat-item-2"><a href="https://frontend.intronational.com/category/html/"><span class="list-item-caption">HTML</span></a> </li> <li class="cat-item cat-item-4"><a href="https://frontend.intronational.com/category/javascript/"><span class="list-item-caption">JavaScript</span></a> </li> <li class="cat-item cat-item-117"><a href="https://frontend.intronational.com/category/react/props%e3%81%ab%e3%82%88%e3%82%8b%e3%83%87%e3%83%bc%e3%82%bf%e3%81%ae%e5%8f%97%e3%81%91%e6%b8%a1%e3%81%97%ef%bc%88%e3%83%81%e3%83%ab%e3%83%89%e3%83%ac%e3%83%b3%e5%b1%9e%e6%80%a7%e3%80%81%e3%82%b3/"><span class="list-item-caption">Propsによるデータの受け渡し（チルドレン属性、コンポーネントへの型付け）</span></a> </li> <li class="cat-item cat-item-7"><a href="https://frontend.intronational.com/category/react/"><span class="list-item-caption">React</span></a> </li> <li class="cat-item cat-item-116"><a href="https://frontend.intronational.com/category/react/react%e3%81%ae%e5%9f%ba%e6%9c%ac%e6%a6%82%e5%bf%b5%ef%bc%88%e4%bb%ae%e6%83%b3dom%e3%80%81jsx%e3%81%ae%e6%a7%8b%e6%96%87%e3%83%ab%e3%83%bc%e3%83%ab%e3%80%81%e3%82%b3%e3%83%b3%e3%83%9d%e3%83%bc%e3%83%8d/"><span class="list-item-caption">Reactの基本概念（仮想DOM、JSXの構文ルール、コンポーネントの分割設計）</span></a> </li> <li class="cat-item cat-item-6"><a href="https://frontend.intronational.com/category/typescript/"><span class="list-item-caption">TypeScript</span></a> </li> <li class="cat-item cat-item-101"><a href="https://frontend.intronational.com/category/typescript/typescript%e3%81%ae%e5%b0%8e%e5%85%a5%e3%81%a8%e7%92%b0%e5%a2%83%e6%a7%8b%e7%af%89%ef%bc%88tsconfig-json%e3%81%ae%e8%a8%ad%e5%ae%9a%ef%bc%89/"><span class="list-item-caption">TypeScriptの導入と環境構築（tsconfig.jsonの設定）</span></a> </li> <li class="cat-item cat-item-5"><a href="https://frontend.intronational.com/category/web%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf/"><span class="list-item-caption">Webブラウザの仕組み</span></a> </li> <li class="cat-item cat-item-11"><a href="https://frontend.intronational.com/category/html/%e3%82%a4%e3%83%b3%e3%83%a9%e3%82%a4%e3%83%b3%e8%a6%81%e7%b4%a0%e3%81%a8%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e8%a3%85%e9%a3%be%ef%bc%88a-span-strong-em-code-time%ef%bc%89/"><span class="list-item-caption">インライン要素とテキスト装飾（a, span, strong, em, code, time）</span></a> </li> <li class="cat-item cat-item-9"><a href="https://frontend.intronational.com/category/html/%e3%82%bb%e3%82%af%e3%82%b7%e3%83%a7%e3%83%b3%e6%a7%8b%e6%88%90%e8%a6%81%e7%b4%a0%ef%bc%88header-nav-main-article-section-footer%ef%bc%89/"><span class="list-item-caption">セクション構成要素（header, nav, main, article, section, footer）</span></a> </li> <li class="cat-item cat-item-10"><a href="https://frontend.intronational.com/category/html/%e3%83%86%e3%82%ad%e3%82%b9%e3%83%88%e3%82%b3%e3%83%b3%e3%83%86%e3%83%b3%e3%83%84%e3%81%ae%e5%9f%ba%e6%9c%ac%ef%bc%88p-h1-h6-hr-pre%ef%bc%89/"><span class="list-item-caption">テキストコンテンツの基本（p, h1-h6, hr, pre）</span></a> </li> <li class="cat-item cat-item-57"><a href="https://frontend.intronational.com/category/javascript/%e3%83%87%e3%83%bc%e3%82%bf%e5%9e%8b%e3%81%a8%e5%9e%8b%e5%88%a4%e5%ae%9a%ef%bc%88%e3%83%97%e3%83%aa%e3%83%9f%e3%83%86%e3%82%a3%e3%83%96%e3%81%a8%e3%82%aa%e3%83%96%e3%82%b8%e3%82%a7%e3%82%af%e3%83%88/"><span class="list-item-caption">データ型と型判定（プリミティブとオブジェクト, typeof, 暗黙の型変換）</span></a> </li> <li class="cat-item cat-item-87"><a href="https://frontend.intronational.com/category/web%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf/%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%83%ac%e3%83%b3%e3%83%80%e3%83%aa%e3%83%b3%e3%82%b0%ef%bc%88%e6%8f%8f%e7%94%bb%ef%bc%9a%e3%83%aa%e3%83%95%e3%83%ad%e3%83%bc-%e3%83%aa%e3%83%9a%e3%82%a4%e3%83%b3/"><span class="list-item-caption">ブラウザレンダリング（描画：リフロー, リペイント, コンポジット合成）</span></a> </li> <li class="cat-item cat-item-86"><a href="https://frontend.intronational.com/category/web%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf/%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%83%ac%e3%83%b3%e3%83%80%e3%83%aa%e3%83%b3%e3%82%b0%ef%bc%88%e8%a7%a3%e6%9e%90%ef%bc%9ahtml%e3%83%91%e3%83%bc%e3%82%b9-dom-cssom%e3%83%84%e3%83%aa%e3%83%bc/"><span class="list-item-caption">ブラウザレンダリング（解析：HTMLパース, DOM/CSSOMツリー構築）</span></a> </li> <li class="cat-item cat-item-12"><a href="https://frontend.intronational.com/category/html/%e3%83%aa%e3%82%b9%e3%83%88%e3%81%a8%e8%a8%98%e8%bf%b0%e3%83%aa%e3%82%b9%e3%83%88%ef%bc%88ul-ol-li-dl-dt-dd%ef%bc%89/"><span class="list-item-caption">リストと記述リスト（ul, ol, li, dl, dt, dd）</span></a> </li> <li class="cat-item cat-item-8"><a href="https://frontend.intronational.com/category/html/%e3%83%ab%e3%83%bc%e3%83%88%e3%81%a8%e3%83%a1%e3%82%bf%e3%83%87%e3%83%bc%e3%82%bf%ef%bc%88html-head-meta-ogp%ef%bc%89/"><span class="list-item-caption">ルートとメタデータ（html, head, meta, OGP）</span></a> </li> <li class="cat-item cat-item-119"><a href="https://frontend.intronational.com/category/react/%e5%89%af%e4%bd%9c%e7%94%a8%e3%81%ae%e5%88%b6%e5%be%a1%ef%bc%88useeffect%e3%81%ae%e5%ae%9f%e8%a1%8c%e3%82%bf%e3%82%a4%e3%83%9f%e3%83%b3%e3%82%b0%e3%80%81%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%a2/"><span class="list-item-caption">副作用の制御（useEffectの実行タイミング、クリーンアップ関数、依存配列の制御）</span></a> </li> <li class="cat-item cat-item-102"><a href="https://frontend.intronational.com/category/typescript/%e5%9f%ba%e6%9c%ac%e3%81%ae%e5%9e%8b%e5%ae%9a%e7%be%a9%ef%bc%88boolean-number-string-array-tuple-any-unknown%ef%bc%89/"><span class="list-item-caption">基本の型定義（boolean, number, string, array, tuple, any, unknown）</span></a> </li> <li class="cat-item cat-item-31"><a href="https://frontend.intronational.com/category/css/%e5%9f%ba%e6%9c%ac%e3%82%bb%e3%83%ac%e3%82%af%e3%82%bf%e3%81%a8%e7%b5%84%e3%81%bf%e5%90%88%e3%82%8f%e3%81%9b%ef%bc%88%e3%82%bf%e3%82%b0-%e3%82%af%e3%83%a9%e3%82%b9-id-%e5%ad%90%e5%ad%ab%e3%83%bb/"><span class="list-item-caption">基本セレクタと組み合わせ（タグ, クラス, ID, 子孫・子・隣接）</span></a> </li> <li class="cat-item cat-item-56"><a href="https://frontend.intronational.com/category/javascript/%e5%a4%89%e6%95%b0%e3%81%a8%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%97%ef%bc%88const-let-var-%e3%83%96%e3%83%ad%e3%83%83%e3%82%af%e3%82%b9%e3%82%b3%e3%83%bc%e3%83%97-%e5%b7%bb%e3%81%8d%e4%b8%8a%e3%81%92/"><span class="list-item-caption">変数とスコープ（const, let, var, ブロックスコープ, 巻き上げ）</span></a> </li> <li class="cat-item cat-item-32"><a href="https://frontend.intronational.com/category/css/%e5%b1%9e%e6%80%a7%e3%82%bb%e3%83%ac%e3%82%af%e3%82%bf%e3%81%a8%e7%96%91%e4%bc%bc%e3%82%af%e3%83%a9%e3%82%b9%ef%bc%88%e7%8a%b6%e6%85%8b%ef%bc%9ahover-focus-active-disabled%e7%ad%89%ef%bc%89/"><span class="list-item-caption">属性セレクタと疑似クラス（状態：hover, focus, active, disabled等）</span></a> </li> <li class="cat-item cat-item-58"><a href="https://frontend.intronational.com/category/javascript/%e6%96%87%e5%ad%97%e5%88%97%e6%93%8d%e4%bd%9c%ef%bc%88string%e3%83%a1%e3%82%bd%e3%83%83%e3%83%89%ef%bc%9aslice-replace-includes-%e3%83%86%e3%83%b3%e3%83%97%e3%83%ac%e3%83%bc%e3%83%88%e3%83%aa/"><span class="list-item-caption">文字列操作（Stringメソッド：slice, replace, includes, テンプレートリテラル）</span></a> </li> <li class="cat-item cat-item-1"><a href="https://frontend.intronational.com/category/uncategorized/"><span class="list-item-caption">未分類</span></a> </li> <li class="cat-item cat-item-118"><a href="https://frontend.intronational.com/category/react/%e7%8a%b6%e6%85%8b%e7%ae%a1%e7%90%86%e3%81%ae%e5%9f%ba%e6%9c%ac%ef%bc%88usestate%e3%81%ab%e3%82%88%e3%82%8b%e3%83%87%e3%83%bc%e3%82%bf%e4%bf%9d%e6%8c%81%e3%81%a8%e7%8a%b6%e6%85%8b%e6%9b%b4%e6%96%b0/"><span class="list-item-caption">状態管理の基本（useStateによるデータ保持と状態更新の非同期バグ対策）</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://frontend.intronational.com/" class="site-name site-name-text-link" itemprop="url"><span class="site-name-text" itemprop="name about">HTML/CSS/JS専門の学習</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 HTML/CSS/JS専門の学習.</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://frontend.intronational.com/wp-includes/js/dist/hooks.min.js?ver=f0f188028580e8dc1255&fver=20260820095812"></script> <script id="wp-i18n-js" src="https://frontend.intronational.com/wp-includes/js/dist/i18n.min.js?ver=1dfe7db3940c23ea9216&fver=20260820095827"></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://frontend.intronational.com/wp-content/plugins/contact-form-7/includes/swv/js/index.js?ver=6.1.5&fver=20260404072140"></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:\/\/frontend.intronational.com\/wp-json\/", "namespace": "contact-form-7\/v1" } }; //# sourceURL=contact-form-7-js-before </script> <script id="contact-form-7-js" src="https://frontend.intronational.com/wp-content/plugins/contact-form-7/includes/js/index.js?ver=6.1.5&fver=20260404072140"></script> <script id="cookie-notice-front-js-before"> var cnArgs = {"ajaxUrl":"https:\/\/frontend.intronational.com\/wp-admin\/admin-ajax.php","nonce":"4b956e4ffe","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://frontend.intronational.com/wp-content/plugins/cookie-notice/js/front.min.js?ver=2.5.16&fver=20260404072100"></script> <script id="baguettebox-js-js" src="https://frontend.intronational.com/wp-content/themes/cocoon-master/plugins/baguettebox/dist/baguetteBox.min.js?ver=7.1.2&fver=20260403014114"></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://frontend.intronational.com/wp-content/themes/cocoon-master/plugins/slicknav/jquery.slicknav.min.js?ver=7.1.2&fver=20260403014114"></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://frontend.intronational.com/wp-includes/js/comment-reply.min.js?ver=7.1.2&fver=20260820095852"></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://frontend.intronational.com/wp-content/themes/cocoon-master/javascript.js?ver=7.1.2&fver=20260403014113"></script> <script id="cocoon-child-js-js" src="https://frontend.intronational.com/wp-content/themes/cocoon-child-master/javascript.js?ver=7.1.2&fver=20260403014118"></script> <script id="googlesitekit-events-provider-contact-form-7-js" src="https://frontend.intronational.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-events-provider-contact-form-7-fac2a8013ba5ba355cd0.js?fver=20260922014710" defer></script> <script id="googlesitekit-events-provider-content-events-js-before"> window._googlesitekit = window._googlesitekit || {}; window._googlesitekit.contentEvents = {"postID":7852,"isSinglePost":true,"hasVimeoEmbed":false}; //# sourceURL=googlesitekit-events-provider-content-events-js-before </script> <script id="googlesitekit-events-provider-content-events-js" src="https://frontend.intronational.com/wp-content/plugins/google-site-kit/dist/assets/js/googlesitekit-events-provider-content-events-c7172f3fd0e4d5ad62ef.js?fver=20260922014710" defer></script>  <div id="cookie-notice" role="dialog" class="cookie-notice-hidden cookie-revoke-hidden cn-position-bottom" aria-label="Cookie Notice" 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>  <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> </body> </html>