JavaScript
JavaScript | DOM 操作：フォーム操作 – フォーム要素の取得
プログラミング
Python Python | DevOps・運用：Docker network
Docker networkって何？一言でいうと「コンテナ同士をつなぐ“専用LAN”」Docker network は、コンテナ同士をつなぐための「仮想ネットワーク」です。同じネットワークに属するコン...
Python Python | DevOps・運用：Docker volume
Docker volumeって何？一言でいうと「コンテナが消えても残る“外付けハードディスク”」Docker volume は、コンテナの外側にある「永続ストレージ」です。コンテナの中のファイルは、コ...
Python Python | DevOps・運用：docker-compose
docker-composeって何？一言でいうと「複数コンテナを“1つのアプリ”としてまとめて起動・停止するリモコン」Docker は「1コンテナ＝1プロセス」をきれいに動かすのが得意です。でも、現実...
Python Python | DevOps・運用：Dockerfile ベストプラクティス
まずゴールを決めよう：「本番でそのまま動かせる、軽くて、安全で、再現性の高いイメージ」Dockerfile のベストプラクティスは、一言でいうと「どこでビルドしても、同じように動く、無駄が少なくて、安...
Python Python | DevOps・運用：CD 自動デプロイ
CD 自動デプロイって何？一言でいうと「テストに通ったコードを、人の手を介さず“同じ手順で”本番に届ける仕組み」CI が「自動テスト」だとしたら、CD（Continuous Delivery / De...
Java Java | Web 基礎・HTTP・REST：HTTP 詳細 － セッション
セッションを一言でいうとセッションは「同じユーザーからの一連のリクエストを“ひとまとまり”として扱うためのサーバー側の仕組み」です。HTTP は本来「1 回 1 回がバラバラで、前後のつながりを覚えな...
Java Java | Web 基礎・HTTP・REST：HTTP 詳細 － Cookie
Cookie を一言でいうとCookie は「ブラウザの中に一時的にメモしておける“名札・メモ用紙”」です。HTTP は本来「1 回 1 回のリクエストがバラバラで、前後のつながりを覚えていない」仕組...
Java Java | Web 基礎・HTTP・REST：HTTP 詳細 － User-Agent
User-Agent を一言でいうとUser-Agent は「このリクエストを送っている“クライアントの正体”をサーバーに伝えるヘッダー」です。ブラウザなのか、スマホアプリなのか、Java のプログラ...
Java Java | Web 基礎・HTTP・REST：HTTP 詳細 － Accept
Accept を一言でいうとAccept ヘッダーは「サーバーさん、レスポンスは“この種類のデータ”で返してくれると嬉しいです、という希望を伝えるヘッダー」です。クライアント（ブラウザやアプリ）が「J...
Java Java | Web 基礎・HTTP・REST：HTTP 詳細 － Content-Type
Content-Type を一言でいうとContent-Type は「このボディの中身は“何の種類のデータ”かを相手に教えるためのヘッダー」です。中身が JSON なのか、HTML なのか、画像なのか...
Java Java | Web 基礎・HTTP・REST：HTTP 詳細 － ボディの役割
ボディを一言でいうとHTTP のボディは「実際にやり取りしたい“中身そのもの”が入る場所」です。ヘッダーが「説明書」だとしたら、ボディは「商品そのもの」。ユーザー情報の JSON、HTML のページ、...
Java Java | Web 基礎・HTTP・REST：HTTP 詳細 － ヘッダーの役割
ヘッダーを一言でいうとHTTP のヘッダーは「リクエストやレスポンスにくっついてくる“メタ情報（付加情報）”」です。本体（ボディ）が「中身」だとしたら、ヘッダーは「この中身は何なのか」「どう扱ってほし...
Java Java | Web 基礎・HTTP・REST：HTTP 詳細 － パスパラメータ
パスパラメータを一言でいうとパスパラメータは「URL の一部として書かれる“ID などの変わる部分”」です。/users/1 の 1/products/123/reviews の 123みたいに、「ど...
Java Java | Web 基礎・HTTP・REST：HTTP 詳細 － クエリパラメータ
クエリパラメータを一言でいうとクエリパラメータは「同じ URL の“条件やオプション”を指定するための追加情報」です。/users という「ユーザー一覧」というリソースに対して、「有効なユーザーだけ欲...
Java Java | Web 基礎・HTTP・REST：HTTP 詳細 － URL 構造
URL を一言でいうとURL は「インターネット上の“場所”を指し示す住所」です。ブラウザやプログラムは、この URL を手がかりに「どのサーバーの」「どのサービスの」「どのデータを」取りに行けばいい...
VBA Excel VBA | 超初心者（Excel操作＋マクロ体験）：Excelオブジェクト基礎 － Find
Find は「表の中から“条件に合うセル”を一発で探しに行くためのメソッド」まずイメージから。Find は「この範囲の中から“〇〇”という値（文字）を持つセルを探してきて」と頼むためのメソッドです。手...
VBA Excel VBA | 超初心者（Excel操作＋マクロ体験）：Excelオブジェクト基礎 － Delete
Delete は「セル・行・列を“詰めて”消す動き」まずイメージから。さっき学んだ Insert が「押し広げてスペースを作る」なら、Delete は「その場所を消して、周りを詰める」動きです。手作業...
VBA Excel VBA | 超初心者（Excel操作＋マクロ体験）：Excelオブジェクト基礎 － Insert
Insert は「セル・行・列を“押し広げて”新しいスペースを作る動き」まずイメージから。Insert は「今あるセルや行・列をズラして、新しいセル／行／列の“空きスペース”を差し込む」動きです。手作...
VBA Excel VBA | 超初心者（Excel操作＋マクロ体験）：Excelオブジェクト基礎 － Sort
Sort は「表の行を“並べ替える”ための仕組みをコードで操作するもの」まずイメージから。Sort は、表の行を「昇順」「降順」などのルールで並べ替えるための機能です。普段、リボンの「並べ替え」ボタン...
VBA Excel VBA | 超初心者（Excel操作＋マクロ体験）：Excelオブジェクト基礎 － AutoFilter
AutoFilter は「表に“絞り込み”をかけるための仕組みをコードで操作するもの」まずイメージから。AutoFilter は、シート上の“表”に対して「この条件に合う行だけ表示して」と絞り込みをか...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － tdタグ
td 要素は「表の“中身のマス”を表すセル」<td> は「このマスには“実際のデータ”が入っています」ということを表すタグです。table の中で、tr（行）の中に並ぶ「ふつうのセル」が td です。...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － thタグ
th 要素は「このセルは“見出し側”ですよ」と宣言するタグ<th> は「このセルは、ただのデータじゃなくて“見出し・ラベル”です」とブラウザや機械に伝えるためのタグです。table の中で使われ、「列...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － trタグ
tr 要素は「表の“1行分”をまとめるための行コンテナ」<tr> は「table の中で、横一列のセルをひとかたまりにする“行の箱”」です。table が「表全体の箱」だとしたら、tr は「その中の ...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － tableタグ
table 要素は「行と列で“表形式のデータ”を並べるための箱」<table> は、「行（よこ）と列（たて）で整理されたデータ」を表にするためのタグ です。時間割料金表成績表比較表みたいな、「表で見る...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － ddタグ
dd 要素は「ラベルに対する“中身・説明側”を表すタグ」<dd> は「これは“ラベルの中身・説明・値”ですよ」と示すためのタグです。単体では使わず、必ず <dl> の中で「ラベル（dt）」「その中身（...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － dtタグ
dt 要素は「ラベル側（項目名・用語）」を表すタグ<dt> は「これは“名前・ラベル・用語”の側ですよ」と示すためのタグです。単体では使わず、必ず <dl> の中で「ラベル（dt）」「その中身（dd）...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － dlタグ
dl 要素は「用語とその説明（ペアの一覧）」の箱<dl> は「用語（ラベル）と、その説明（値）」のペアを並べるための箱だと思ってください。“d” は definition（定義）、dl は defin...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － liタグ
li 要素は「リストの“1項目”を表すパーツ」まずイメージから。li 要素は、「ul や ol の中に並ぶ“1つ1つの項目”」 を表すためのタグです。ul（順不同リスト）＝「箱」ol（番号付きリスト）...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － olタグ
ol 要素は「順番に意味がある“番号付きリスト”の箱」<ol> は「1 → 2 → 3 の順番に意味がある項目の並び」を表すためのタグです。“o” は ordered（順序付き）の略で、「順番が大事な...
JavaScript JavaScript | HTML / CSS 連携：リスト・表組み － ulタグ
ul 要素は「順番を気にしない“箇条書きの箱”」まずイメージからいきます。<ul> は「順番はどうでもいいけど、いくつかの項目を並べて見せたい」ときに使う“箇条書きの箱”です。買い物リストサイトのナビ...
Power Query M Formula Language Power Query 実務テンプレ | クレンジング（前処理）系：クレンジング結果ログ出力
ゴールのイメージをそろえる今回のテーマは「Power Query で クレンジング結果を“ログとして見える化”する実務テンプレ」です。やりたいことは、ざっくり言うとこうです。「何件エラーがあったのか」...
Power Query M Formula Language Power Query 実務テンプレ | クレンジング（前処理）系：エラー行を別テーブル分離
ゴールのイメージをそろえる今回のテーマは「Power Query で “エラー行だけをきれいに別テーブルに分離する” 実務テンプレです。ここまでやってきた必須項目未入力チェック数値範囲チェック桁数チェ...
Power Query M Formula Language Power Query 実務テンプレ | クレンジング（前処理）系：マスタ未存在データ検出
ゴールのイメージをそろえる今回のテーマは「Power Query で “マスタに存在しないコードを持つ明細行だけをきれいに炙り出す” 実務テンプレ」です。やりたいことはこうです。売上明細の顧客コードが...
Power Query M Formula Language Power Query 実務テンプレ | クレンジング（前処理）系：数値範囲チェック
ゴールのイメージをそろえる今回のテーマは「Power Query で “ありえない数値”を数値範囲で機械的にチェックする実務テンプレ」です。やりたいことは、ざっくり言うとこうです。「数量は 1〜999...
Power Query M Formula Language Power Query 実務テンプレ | クレンジング（前処理）系：必須項目未入力チェック
ゴールのイメージをそろえる今回のテーマは「Power Query で “必須項目が未入力の行”を機械的にチェックする実務テンプレ」です。やりたいことはシンプルです。「顧客コードが必須なのに空欄の行がな...
Power Query M Formula Language Power Query 実務テンプレ | クレンジング（前処理）系：桁数チェック
ゴールのイメージをそろえる今回のテーマは「Power Query で “桁数がおかしい値”を機械的にチェックする実務テンプレ」です。やりたいことは、ざっくり言うとこうです。「顧客コードは必ず 10 桁...
Power Query M Formula Language Power Query 実務テンプレ | クレンジング（前処理）系：主キー重複検出
ゴールのイメージをそろえる今回のテーマは「Power Query で “主キーが重複している行だけをきれいに炙り出す” 実務テンプレ」です。ここでいう「主キー」は、「この列（または列の組み合わせ）は、...
Power Query M Formula Language Power Query 実務テンプレ | クレンジング（前処理）系：重複行削除（全列）
ゴールのイメージをそろえる今回のテーマは「Power Query で テーブル全体を見て“完全に同じ行”を重複として削除する実務テンプレ」です。ここでいう「重複行削除（全列）」は、「1行まるごと、すべ...
Power Query M Formula Language Power Query 実務テンプレ | クレンジング（前処理）系：複数条件で行抽出
ゴールのイメージをそろえる今回のテーマは「Power Query で 複数条件を組み合わせて、欲しい行だけをきれいに抽出する実務テンプレ」です。“複数条件”というのは、たとえばこんなイメージです。「売...
Power Query M Formula Language Power Query 実務テンプレ | クレンジング（前処理）系：特定文字列を含む行削除
ゴールのイメージをそろえる今回のテーマは「Power Query で “特定の文字列を含む行だけをきれいに削除する” 実務テンプレ」です。やりたいことはシンプルです。「備考に『テスト』と入っている行は...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － 改行タグ（br）
br 要素は「ここで“行だけ”を折りたいときの改行スイッチ」<br> は「ここで行を折って、すぐ次の行から続けて書いて」とブラウザに指示するためのタグです。ポイントは、「段落を分ける」のではなく「同じ...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － 補足タグ（em）
em 要素は「言い方・ニュアンスを強めるためのタグ」<em> は「ここ、ちょっと“気持ち強め”で読んでほしい」という“ニュアンスの強調”を表すタグです。ブラウザのデフォルト表示だと斜体になりますが、目...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － 強調タグ（strong）
strong 要素は「見た目の太字」ではなく「意味として重要な部分」まずここをしっかり押さえたいです。<strong> は、「ここは文章の中で特に重要だよ」という“意味としての強調”を表すタグです。ブ...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － figcaptionタグ
figcaption 要素は「図のタイトル・説明を書くためのラベル」<figcaption> は、「この図は何なのか？」を説明するための“キャプション専用タグ” です。単体では使わず、必ず <figu...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － figureタグ
figure 要素は「画像やコードなど“ひとかたまりの図”の箱」まずイメージからいきます。<figure> は、「画像・図・コード・表など、“ひとつの図として意味を持つかたまり”を包む箱」です。単なる...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － alt属性
alt 属性は「画像が見えない人のための“言葉の代わり”」まず一番大事な本質からいきます。alt 属性は、「この画像は何なのか？」を“言葉で説明するための場所” です。画像がちゃんと表示されているとき...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － imgタグ
img タグは「ページに画像を埋め込むためのタグ」<img> タグは、「この場所に、この画像ファイルを表示して」とブラウザに伝えるためのタグです。テキストが <p> や <h1> なら、画像は <im...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － target属性
target 属性は「リンクを“どの窓で開くか”を決めるスイッチ」<a> タグの target 属性は、「このリンクをクリックしたとき、どこで開くか」 を指定するためのものです。行き先そのものを決める...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － href属性
href 属性は「このリンクの行き先はここです」という住所ラベルまず一番大事なところから。href 属性は、「このリンク（a タグ）は、どこへ飛ぶのか？」という“行き先”を指定するための属性です。hr...
JavaScript JavaScript | HTML / CSS 連携：テキスト・リンク・画像 － aタグ
a タグは「ページとページをつなぐ“リンクのタグ”」まず一番大事なことから。<a> タグは「ここをクリックすると、どこかへ移動します」という“リンク”を作るタグです。「a」は anchor（アンカー＝...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － コメントの書き方
HTML のコメントは「未来の自分と他人へのメモ」まず前提から。HTML のコメントは、<!-- ここがコメント -->という形で書きます。ブラウザには表示されませんが、ソースコードを開くと見える「メ...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － span要素
span 要素は「意味のついていない“文字レベルの小さな箱”」まずイメージから。<div> が「ブロック全体をまとめる大きめの箱」だとしたら、<span> は 「文章の一部分だけを囲う、小さな箱」 で...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － div要素
div 要素は「意味のついていない“箱”」＝レイアウト用のコンテナまず一番大事なことから。<div> は「特別な意味を持たない、ただの“箱（コンテナ）”」 です。「段落」でもない「見出し」でもない「ボ...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － 段落タグ（p）
p タグは「文章のひとかたまり」を表すタグまず一番大事なポイントからいきます。<p> は「文章のひとかたまり（段落）」を表すタグ です。「一文ごと」ではなく、「意味がひとまとまりになっている文章のかた...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － 見出しタグ（h1〜h6）
見出しタグは「文章の見出し」と「ページのアウトライン」を作るもの見出しタグ（<h1>〜<h6>）は、文字を大きくするためのタグではなく、「ここがタイトルです」「ここがその中の小見出しです」と、文章の構...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － body要素
body 要素は「ユーザーが実際に触る“本体”」HTML 全体を家にたとえると、<!DOCTYPE html> は「これは家ですよ」の宣言、<html> は家全体の外枠、<head> は電気・住所・設...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － head要素
head 要素は「ページの設定・プロフィールを書く場所」まずイメージからいきます。<head> は、「画面に直接は見えないけれど、ページにとって超重要な情報」を書く場所です。タイトル文字コードスマホ向...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － DOCTYPE宣言
DOCTYPE 宣言は「これはどのルールの HTML ですよ」という最初のひと言HTML ファイルの一行目に書くこれ：<!DOCTYPE html>これが DOCTYPE 宣言 です。役割を一言でいう...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － HTML文書の基本構造
HTML 文書の基本構造は「家の骨組み」みたいなものまずイメージからいきます。HTML ファイルは、ただタグを並べればいいわけではなく、「決まった骨組み（ひな形）」 を持っています。その骨組みがあるか...
JavaScript JavaScript | HTML / CSS 連携：HTML基礎 － HTMLの役割
HTML の役割は「中身の意味を伝えること」まず一番大事なことから。HTML の役割は「見た目を決めること」ではなく「中身の意味（構造）を伝えること」 です。人間にとっては「画面にどう見えるか」ですが...