TypeScript
TypeScript | 基礎文法：環境・前提理解 – TypeScriptが解決する問題
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – スタイル変更（style）
style とは何かstyle は、要素の「インライン CSS（その要素だけに直接書くスタイル）」を JavaScript から読み書きするためのプロパティです。クラス切り替えより細かく数値や色を直接...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – classList.contains
classList.contains とは何かclassList.contains は、要素に指定した「CSS クラスが付いているか」を真偽値で判定するメソッドです。返り値は true/false の...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – classList.toggle
classList.toggle とは何かclassList.toggle は、要素に指定した「CSS クラス」を付けたり外したりするメソッドです。クラスが付いていなければ追加、付いていれば削除します...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – classList.remove
classList.remove とは何かclassList.remove は、要素から指定した「CSS クラス」を安全に取り除くメソッドです。指定したクラスが付いていなければ何も起こらず、エラーにも...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – classList.add
classList.add とは何かclassList.add は、要素に「CSS クラス」を安全に追加するためのメソッドです。すでに同じクラスが付いていても重複せず、必要なクラス名を1つ以上まとめて...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – className
className とは何かclassName は、要素の class 属性（CSS クラス名の一覧）を「文字列として」読み書きするためのプロパティです。p, div などの要素に対して、クラスをまと...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – 値の安全な出力方法
値の安全な出力方法とは何か「安全な出力」とは、外部データやユーザー入力を画面に表示・属性へ設定する際に、HTMLとして解釈・実行されないように扱うことです。ここが重要です：構造（HTML）は固定し、可...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – テキストと要素の違い
テキストと要素の違いとは何かDOM は「要素ノード」と「テキストノード」でできています。要素ノードはタグ（div、p、span など）そのもので、属性やクラス、イベントを持てます。テキストノードは純粋...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – 属性値の文字列化
属性値の文字列化とは何か「属性値の文字列化」は、DOM の属性に値を入れるとき、数値や真偽値、オブジェクトなど“文字列以外”の値を安全・意図通りの文字列に変換してから設定することです。ここが重要です：...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – 改行・スペースの扱い
改行・スペースの扱いとは何かテキストの改行やスペースは、「どのプロパティで入れるか（textContent/innerText/innerHTML）」と「CSS の white-space 設定」によ...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – insertAdjacentHTML
insertAdjacentHTML とは何かinsertAdjacentHTML は、指定した位置に「HTML文字列をそのままパースして挿入」するためのメソッドです。ターゲット要素の周囲や内側に、細...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – createTextNode
createTextNode とは何かcreateTextNode は、「テキストノード」を新しく作るためのメソッドです。HTML の中身は要素ノード（div、p、span など）とテキストノード（純...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – HTML インジェクションの危険性
HTML インジェクションとは何かHTML インジェクションは、外部から渡された文字列が「HTMLとして解釈・実行されてしまう」問題です。表示したい“文字”のはずがタグとして扱われると、画面の改ざん、...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – innerHTML
innerHTML とは何かinnerHTML は、要素の「中身（子要素やテキスト）」を、HTML文字列として読み書きするためのプロパティです。文字列を代入すると、その場でパースされて要素やテキストに...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – innerText
innerText とは何かinnerText は「画面に見えているテキスト」を読み書きするためのプロパティです。値を読むと、CSS の表示状態を考慮して“今見えている文字列”だけが返ります。値を書き...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – textContent
textContent とは何かtextContent は、要素の「テキストだけ」を安全に読み書きするためのプロパティです。値を設定すると、要素内のテキストノードが置き換わり、HTML タグは「ただの...
JavaScript JavaScript | DOM 操作：要素の取得 – 要素の存在チェック
要素の存在チェックとは何か「要素の存在チェック」は、操作したい要素が本当に DOM にあるかを確認し、なければ安全にスキップしたり代替処理に切り替えたりすることです。ここが重要です：存在を前提に書くと...
JavaScript JavaScript | DOM 操作：要素の取得 – matches
matches とは何かmatches は、ある要素が「指定した CSS セレクタに現在一致しているか」を真偽値で返すメソッドです。ここが重要です：取得した要素に対して直接判定できるため、「このクリッ...
JavaScript JavaScript | DOM 操作：要素の取得 – closest
closest とは何かclosest は、ある要素から「自分自身を含めて、上方向（祖先方向）にセレクタに一致する最初の要素」を返すメソッドです。見つかればその要素、見つからなければ null。ここが...
JavaScript JavaScript | DOM 操作：要素の取得 – 親要素・子要素の取得
親要素・子要素とは何かDOM は木構造で、要素どうしが「親子」の関係を持ちます。ある要素を内側に包む要素が親、内側に含まれている要素が子です。ここが重要です：DOM 操作では「どの範囲（親配下）を対象...
JavaScript JavaScript | DOM 操作：要素の取得 – CSS セレクタの使い分け
CSS セレクタの使い分けとは何かCSS セレクタは、HTML の中から「どの要素を対象にするか」を表す記法で、querySelector / querySelectorAll でもそのまま使えます。...
JavaScript JavaScript | DOM 操作：要素の取得 – querySelectorAll
querySelectorAll とは何かquerySelectorAll は、CSS セレクタを使って「一致するすべての要素」を取得するメソッドです。返り値は NodeList（静的コレクション） ...
JavaScript JavaScript | DOM 操作：要素の取得 – querySelector
querySelector とは何かquerySelector は、CSS セレクタで「最初に一致した1つの要素」を取得するためのメソッドです。返り値は要素か、見つからなければ null。ここが重要で...
JavaScript JavaScript | DOM 操作：要素の取得 – getElementsByTagName
getElementsByTagName とは何かgetElementsByTagName は、指定したタグ名（例: "div", "p", "a"）を持つ要素をまとめて取得するメソッドです。返り値は...
JavaScript JavaScript | DOM 操作：要素の取得 – getElementsByClassName
getElementsByClassName とは何かgetElementsByClassName は、「指定したクラス名を持つ要素をまとめて取得する」ためのメソッドです。返り値は HTMLColle...
JavaScript JavaScript | DOM 操作：要素の取得 – getElementById
getElementById とは何かgetElementById は、document（ページ全体の入口）から「id が一致する要素を1つだけ即座に取得する」ための最短ルートです。見つかれば要素を返...
Java Java | オブジェクト指向：super キーワード
何をするキーワードかsuper は「親クラス（スーパークラス）のメンバーを参照する」ためのキーワードです。子クラスでオーバーライドしたメソッドから、親の元の実装を呼びたいときや、親のコンストラクタを明...
Java Java | オブジェクト指向：継承のデメリット
まず、継承のデメリットとは何か継承は便利ですが、「親と子が強く結び付く」ため、変更や保守の難易度を上げる要因になりがちです。意図しない依存が広がり、拡張やテストが難しくなる“落とし穴”が複数あります。...
Java Java | オブジェクト指向：継承のメリット
継承のメリットを一言で継承の最大のメリットは「共通の契約を共有しながら、振る舞いだけを差し替えて再利用できる」ことです。コードの重複を減らし、拡張しやすく、呼び出し側は共通型で扱えるため、全体の設計が...
Java Java | オブジェクト指向：継承（extends）
まず、継承（extends）とは何か継承は「既存のクラスの性質（フィールドやメソッド）を受け継ぎ、必要な部分だけを差し替えたり足したりする」仕組みです。extends で親クラスを指定すると、子クラス...