Java
Java Tips | 文字列処理：数値形式チェック
入門
JavaScript JavaScript | DOM 操作：ノード操作 – append
append とは何かappend は、親ノードの「末尾」にコンテンツを追加するためのメソッドです。ノード（要素やテキストノード）だけでなく、文字列も直接渡せるのが特徴です。ここが重要です：append は複数引数を一度に受け取れます。ap...
JavaScript JavaScript | DOM 操作：ノード操作 – remove（直接削除）
remove とは何か（直接削除のイメージ）remove は、要素自身が「自分を親から切り離して画面から消える」ためのメソッドです。document.getElementById("x").remove() のように、親を意識せず一発で削除...
JavaScript JavaScript | DOM 操作：ノード操作 – fragment の利用
DocumentFragment とは何かDocumentFragment（以下フラグメント）は、DOM に一時的に要素を“まとめて保持するための入れ物”です。画面（実DOM）にまだ接続されていないミニDOMと考えてください。ここが重要です...
JavaScript JavaScript | DOM 操作：ノード操作 – cloneNode
cloneNode とは何かcloneNode は、既存の DOM ノード（要素やテキスト）を“複製”するメソッドです。形は node.cloneNode(deep)。ここが重要です：deep が false（省略時は false）なら“そ...
JavaScript JavaScript | DOM 操作：ノード操作 – replaceChild
replaceChild とは何かreplaceChild は「親ノードの子を別のノードに置き換える」メソッドです。形は parent.replaceChild(newChild, oldChild)。oldChild は親から外れ、new...
JavaScript JavaScript | DOM 操作：ノード操作 – removeChild
removeChild とは何かremoveChild は「親ノードから指定した子ノードを取り外す」メソッドです。形は parent.removeChild(child)。画面から消えるだけでなく、DOMの親子関係が切れるため、その要素は“...
JavaScript JavaScript | DOM 操作：ノード操作 – insertBefore
insertBefore とは何かinsertBefore は「親ノードの中で、指定した子ノードの“直前”に新しいノードを挿入する」メソッドです。形は parent.insertBefore(newNode, referenceNode)。...
JavaScript JavaScript | DOM 操作：ノード操作 – appendChild
appendChild とは何かappendChild は、親ノードの「末尾」に子ノードを追加するメソッドです。DOM で新しく作った要素（createElement）や既存の要素を、指定した親の最後に差し込みます。ここが重要です：appe...
JavaScript JavaScript | DOM 操作：ノード操作 – createElement
createElement とは何かcreateElement は、JavaScript で新しい HTML 要素を“ゼロから”作るためのメソッドです。たとえば div、button、img、li など、タグ名を渡すだけで未配置の要素が生成...
JavaScript JavaScript | DOM 操作：属性操作 – aria-* 属性
aria-* 属性とは何かARIA（Accessible Rich Internet Applications）の aria-* 属性は、UI の「意味・状態・関係」を支援技術（スクリーンリーダーなど）に伝えるための仕組みです。原則としてネ...
JavaScript JavaScript | DOM 操作：属性操作 – checked
checked とは何かchecked は「チェックボックスやラジオボタンの“選択状態”」を表します。ここが重要です：HTMLの checked 属性は“初期状態”を示し、JavaScript の el.checked プロパティは“現在の...
JavaScript JavaScript | DOM 操作：属性操作 – input の value
input の value とは何かinput の value には「現在の入力値（プロパティ）」と「初期値（属性）」の2種類があります。JavaScript から扱うときは、今画面に表示されている“現在値”は el.value（プロパティ...
JavaScript JavaScript | DOM 操作：属性操作 – href・src の変更
href・src とは何かhref と src は、要素が「どこを指すか・何を読み込むか」を示す属性です。href はリンク先（a、link、area）、src はリソースの場所（img、script、iframe、video、audio、...
JavaScript JavaScript | DOM 操作：属性操作 – disabled 属性
disabled 属性とは何かdisabled は「フォーム要素を操作不可」にするための“boolean 属性”です。ボタン、入力欄、セレクト、テキストエリア、フィールドセットなどに付けると、フォーカスできず、クリックや入力ができなくなりま...
JavaScript JavaScript | DOM 操作：属性操作 – data-* 属性
data-* 属性とは何かdata-* 属性は、HTML 要素に「任意のメタ情報」を文字列として安全に持たせるための仕組みです。例として data-id、data-role、data-payload など、好きな名前で付けられます。ここが重...
JavaScript JavaScript | DOM 操作：属性操作 – hasAttribute
hasAttribute とは何かhasAttribute は、要素に指定した「属性が付いているか」を true/false で判定するメソッドです。値が空文字でも、属性が存在していれば true になります。ここが重要です：getAttr...
JavaScript JavaScript | DOM 操作：属性操作 – removeAttribute
removeAttribute とは何かremoveAttribute は、要素から指定した「属性」を完全に取り除くメソッドです。title、href、src、aria-、data-、style など、属性として付いているものを削除できます...
JavaScript JavaScript | DOM 操作：属性操作 – setAttribute
setAttribute とは何かsetAttribute は、要素の「属性（attr）」に文字列の値を設定するためのメソッドです。href、title、alt、aria-、data- など、HTML 上のあらゆる属性を“文字列として”安全...
JavaScript JavaScript | DOM 操作：属性操作 – getAttribute
getAttribute とは何かgetAttribute は、要素に付いている「属性の値」を文字列で取り出すためのメソッドです。返ってくるのは“常に文字列”か“存在しないときは null”。ここが重要です：getAttribute が読む...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – getComputedStyle
getComputedStyle とは何かgetComputedStyle は、CSS の継承・外部スタイル・メディアクエリ・ユーザー設定などをすべて反映した「最終的な見え方」を取得するための関数です。element.style が返すのは...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – 要素の高さ・幅の取得
要素の高さ・幅の「どれを測るか」同じ「幅・高さ」でも、境界や余白の扱いで数値が変わります。どの API を使うかで意味が違うため、まず“何を含めたいか”を決めましょう。ここが重要です：枠線（border）や余白（padding）を含めるか、...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – visibility の切り替え
visibility の切り替えとは何かvisibility は「要素を見える/見えない」にするプロパティです。visibility: hidden にすると見えなくなりますが、レイアウト上の“場所”は残ります（スペースを確保したまま非表示...
JavaScript JavaScript | DOM 操作：CSS / クラス操作 – display の切り替え
display の切り替えとは何か要素の「表示・非表示」を制御する最基本の方法が display の切り替えです。display: none にすると要素は完全に消え、ページのレイアウト計算からも外れます。再表示するときは本来の displ...
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 クラス」を安全に取り除くメソッドです。指定したクラスが付いていなければ何も起こらず、エラーにもなりません。ここが重要です：classN...
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 の属性に値を入れるとき、数値や真偽値、オブジェクトなど“文字列以外”の値を安全・意図通りの文字列に変換してから設定することです。ここが重要です：HTML の属性は最終的に「文字列」で扱...
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 など）とテキストノード（純粋な文字）で構成されています。creat...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – HTML インジェクションの危険性
HTML インジェクションとは何かHTML インジェクションは、外部から渡された文字列が「HTMLとして解釈・実行されてしまう」問題です。表示したい“文字”のはずがタグとして扱われると、画面の改ざん、リンクの差し替え、フォームの偽装などが起...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – innerHTML
innerHTML とは何かinnerHTML は、要素の「中身（子要素やテキスト）」を、HTML文字列として読み書きするためのプロパティです。文字列を代入すると、その場でパースされて要素やテキストに展開されます。ここが重要です：inner...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – innerText
innerText とは何かinnerText は「画面に見えているテキスト」を読み書きするためのプロパティです。値を読むと、CSS の表示状態を考慮して“今見えている文字列”だけが返ります。値を書き込むと、その要素のテキストが置き換わり、...
JavaScript JavaScript | DOM 操作：テキスト・内容変更 – textContent
textContent とは何かtextContent は、要素の「テキストだけ」を安全に読み書きするためのプロパティです。値を設定すると、要素内のテキストノードが置き換わり、HTML タグは「ただの文字」として表示されます。ここが重要です...
JavaScript JavaScript | DOM 操作：要素の取得 – 要素の存在チェック
要素の存在チェックとは何か「要素の存在チェック」は、操作したい要素が本当に DOM にあるかを確認し、なければ安全にスキップしたり代替処理に切り替えたりすることです。ここが重要です：存在を前提に書くと、null 参照でエラーになりやすく、初...
JavaScript JavaScript | DOM 操作：要素の取得 – matches
matches とは何かmatches は、ある要素が「指定した CSS セレクタに現在一致しているか」を真偽値で返すメソッドです。ここが重要です：取得した要素に対して直接判定できるため、「このクリック元がターゲットか」「このカードはアクテ...
JavaScript JavaScript | DOM 操作：要素の取得 – closest
closest とは何かclosest は、ある要素から「自分自身を含めて、上方向（祖先方向）にセレクタに一致する最初の要素」を返すメソッドです。見つかればその要素、見つからなければ null。ここが重要です：HTML の入れ子構造が多少変...
JavaScript JavaScript | DOM 操作：要素の取得 – 親要素・子要素の取得
親要素・子要素とは何かDOM は木構造で、要素どうしが「親子」の関係を持ちます。ある要素を内側に包む要素が親、内側に含まれている要素が子です。ここが重要です：DOM 操作では「どの範囲（親配下）を対象にするか」と「要素だけ扱うのか（空白テキ...
JavaScript JavaScript | DOM 操作：要素の取得 – CSS セレクタの使い分け
CSS セレクタの使い分けとは何かCSS セレクタは、HTML の中から「どの要素を対象にするか」を表す記法で、querySelector / querySelectorAll でもそのまま使えます。id、class、タグ名、属性、階層関係...
JavaScript JavaScript | DOM 操作：要素の取得 – querySelectorAll
querySelectorAll とは何かquerySelectorAll は、CSS セレクタを使って「一致するすべての要素」を取得するメソッドです。返り値は NodeList（静的コレクション） で、取得時点のスナップショットが返されま...
JavaScript JavaScript | DOM 操作：要素の取得 – querySelector
querySelector とは何かquerySelector は、CSS セレクタで「最初に一致した1つの要素」を取得するためのメソッドです。返り値は要素か、見つからなければ null。ここが重要です：id やクラスだけでなく、タグ、属性...
JavaScript JavaScript | DOM 操作：要素の取得 – getElementsByTagName
getElementsByTagName とは何かgetElementsByTagName は、指定したタグ名（例: "div", "p", "a"）を持つ要素をまとめて取得するメソッドです。返り値は HTMLCollection（ライブコ...
JavaScript JavaScript | DOM 操作：要素の取得 – getElementsByClassName
getElementsByClassName とは何かgetElementsByClassName は、「指定したクラス名を持つ要素をまとめて取得する」ためのメソッドです。返り値は HTMLCollection（ライブコレクション）で、後か...
JavaScript JavaScript | DOM 操作：要素の取得 – getElementById
getElementById とは何かgetElementById は、document（ページ全体の入口）から「id が一致する要素を1つだけ即座に取得する」ための最短ルートです。見つかれば要素を返し、なければ null を返します。ここ...
Java Java | オブジェクト指向：super キーワード
何をするキーワードかsuper は「親クラス（スーパークラス）のメンバーを参照する」ためのキーワードです。子クラスでオーバーライドしたメソッドから、親の元の実装を呼びたいときや、親のコンストラクタを明示的に呼びたいときに使います。継承関係で...
Java Java | オブジェクト指向：継承のデメリット
まず、継承のデメリットとは何か継承は便利ですが、「親と子が強く結び付く」ため、変更や保守の難易度を上げる要因になりがちです。意図しない依存が広がり、拡張やテストが難しくなる“落とし穴”が複数あります。ポイントは、is-a（〜は〜である）が真...
Java Java | オブジェクト指向：継承のメリット
継承のメリットを一言で継承の最大のメリットは「共通の契約を共有しながら、振る舞いだけを差し替えて再利用できる」ことです。コードの重複を減らし、拡張しやすく、呼び出し側は共通型で扱えるため、全体の設計がシンプルになります。特にポリモーフィズム...
Java Java | オブジェクト指向：継承（extends）
まず、継承（extends）とは何か継承は「既存のクラスの性質（フィールドやメソッド）を受け継ぎ、必要な部分だけを差し替えたり足したりする」仕組みです。extends で親クラスを指定すると、子クラスは親の振る舞いを使えますし、同じメソッド...
Java Java | オブジェクト指向：@Override アノテーション
何をするアノテーションか@Override は「このメソッドは親のメソッドをオーバーライド（上書き）しています」とコンパイラに伝えるための印です。付けておくと、シグネチャの食い違いやタイプミス、オーバーロードとの取り違えなどをコンパイル時に...
Java Java | オブジェクト指向：メソッドのオーバーライド
何が「オーバーライド」かメソッドのオーバーライドは、親クラスが持つメソッドの「振る舞いを、子クラスで置き換える」ことです。継承関係にあるとき、同じメソッド名・同じ引数（シグネチャ）を子クラスで再定義すると、実行時には「実体の型」に応じたメソ...
Java Java | オブジェクト指向：toString のオーバーライド
toString をオーバーライドする意味toString は「そのオブジェクトを人間が読める文字列にする」ためのメソッドです。デフォルトはクラス名＋ハッシュ（例: com.example.User@1a2b3c）で、ほとんど役に立ちません...
Java Java | オブジェクト指向：equals と == の違い
ざっくり結論== は「同じ実体（同じ場所）か」を比べる演算子、equals は「中身（値）が同じか」を比べるメソッドです。プリミティブでは == が値比較、参照型（オブジェクト）では == が参照比較（同一性）、equals は値比較（等価...
Java Java | オブジェクト指向：hashCode のオーバーライド
なぜ hashCode をオーバーライドするのかhashCode は「オブジェクトのハッシュ値」を返すメソッドで、HashMap・HashSet などのハッシュ構造が「どのバケットに入れるか」を決めるために使います。equals を値ベース...
Java Java | オブジェクト指向：equals のオーバーライド
equals をオーバーライドする意味equals は「同じモノかどうか」を値の観点で判定するためのメソッドです。デフォルトの equals は「同じインスタンス（同一性）」しか比較しませんが、値オブジェクトやエンティティでは「中身（等価性...
Java Java | オブジェクト指向：値オブジェクトとは
値オブジェクトとは何か値オブジェクトは「値そのものを表す小さな不変の型」です。金額、メールアドレス、期間、座標、IDなど、意味とルールを持つ“ただの値”をクラス化して、検証・整合性・振る舞い（比較や計算）を中に閉じ込めます。重要なのは「同じ...