はじめに
このページでは、Web 開発やプログラミングについて書いた記事を、テーマ別にまとめています。調べたいことがあるときは、テーマの見出しから探してください。
組み込みエンジニアが Web 開発をゼロから学ぶ連載は、記事の数が多いので、別の目次にまとめています。順番に読みたい方は、組み込みエンジニアの Web 開発入門 ― 目次からどうぞ。
HTML
基本と文章の組み立て
- HTML の基本と書き方：
Web サイトの骨組みを作る HTML の考え方 - h タグ（見出し）の基本：
h1〜h6 の階層と、順番を飛ばさない理由 - p タグと div タグの違い：
段落とグループの使い分け - hr タグと br タグの使い分け：
話題の区切りと改行 - 箇条書きリスト（ul・ol・li）の書き方：
順番のあるなしの使い分けと入れ子 - table タグ（表）の書き方：
tr・th・td の基本、セルの結合 - a タグ（リンク）の書き方：
href・target・rel の使い方 - コメント（コメントアウト）の書き方：
使い道と、入れ子にできない注意点
ページの区切りと、いろいろなタグ
- ページの区切り方：
header・nav・main・aside・footer の使い分け - audio タグと video タグの使い方
- iframe の使い方：
Google マップや YouTube の埋め込み - 特殊・マイナーだけど便利なタグまとめ
フォーム
- フォーム（form）の書き方：
label・input・select・textarea - form の action 属性とは：
送信先 URL の書き方と、省略したときの動き - なぜ GET と POST ばかりで、PUT・PATCH・DELETE は使われにくいのか
練習のしかた
- 模写コーディングとデザインカンプとは：
カンプから練習する順番と、数値の読み取り方 - JSFiddle とは：
ブラウザだけで HTML・CSS・JavaScript を試す - CodePen（コードペン）とは：
ブラウザだけでコードを試して共有する
JavaScript
- 文字列の ‘ と ” と ` の違い：
シングル・ダブルクォートとテンプレートリテラル - アロー関数（=>）とは：
function からの書き換え方 - filter メソッドの書き方：
if 文から1行のアロー関数まで - querySelector で使える CSS セレクターの書き方
- ??（Null 合体演算子）と三項演算子・|| の違い：
0 や空文字の扱い - 【React】useState の set 関数の使い方：
関数で更新する理由と、オブジェクト・配列の更新
TypeScript
- TypeScript の開発環境の基本：
npm・tsc・tsx・ESLint の役割 - 公式サイト typescriptlang.org の使い方
- タプル（Tuple）とは：
配列との違いと使いどころ - 記号の多いコードの読み方：
アロー関数の型、Partial・Pick など - 文字列のデータをオブジェクトの配列に変える処理を、for 文に戻して読む
- 『TypeScript ハンズオン』を読んだ感想：
教材選びで迷ったこと
ほかの言語
- 【PHP】フレームワークなしで作る最小限の Web API：
GET と POST、JSON の受け渡し - 【Python】リスト・タプル・セットの違い
- 【Python】f 文字列（f-string）の使い方
- 【Rust】所有権（Ownership）とは：
ムーブ・Copy・借用を、C 言語の malloc と比べて
開発の道具
VS Code と Git
- Windows で Git を使うための初期設定と基本操作
- 手元のプロジェクトを GitHub に上げる手順
- GitHub にあるリポジトリを取り込んで開発を始める手順
- プロファイルで設定と拡張機能を用途ごとに分ける
- HTML と JavaScript を Chrome でデバッグする設定
- Live Server（Go Live）の入れ方と設定：
保存するとブラウザが自動で更新される - Project Manager で複数のサイトを切り替える：
登録のしかたと開き方 - Remote SSH の .vscode-server が 3.5GB に：
古い版のサーバーを消して、バックアップからも外す
設計の図
- draw.io で ER 図を作る：
テーブルの配置からカラス足の線、保存のしかたまで
手元の開発環境（XAMPP）
- XAMPP の Windows へのインストールと初期設定
- 「Cannot create file xampp-control.ini」が出るとき
- MySQL が「shutdown unexpectedly」で起動しないとき
- MySQL を定期的に自動バックアップする：
mysqldump とタスクスケジューラ
WordPress
WordPress のバックアップや Search Console の記事は、自宅サーバー構築メモの「運用・トラブル対応」にまとめています。
AI と開発
- Gemini Pro から Claude に乗り換えた話：
ソフト開発で困っていたことと、変わったこと
運営で起きたトラブルと直し方
- SQL で記事を下書きに戻したら、空のカテゴリーがサイドバーに残った：
記事数を数え直す SQL - Redirection で 301 の転送を足しても 410 のままだった：
同じ URL のルールは「位置」の小さいほうが先に効く - Redirection でルールを 410 に変えても、前のままだった：
SQL で確かめて書き換える - 記事に書いた例の URL が、勝手にブログカードになった：
Cocoon で URL をカードにしない書き方 - コマンドのオプションのハイフン2つが、ダッシュ1つに変わっていた：
コピーしても動かない理由と書き方 - Code Block Pro で、エスケープした文字が元の記号に戻って表示された：
その部分だけ標準の「コード」ブロックで見せる
データベース（MariaDB・SQL）
- コピペで動かしていた WordPress のデータベースのコマンドを、意味から理解する：
控え・確認・一括変更 - 初心者のSQL練習帳 第0回：本番とは別に、練習用のWordPressを作った：
別のデータベースで練習用を作る準備と、止まったところ - 初心者のSQL練習帳 第1回：公開中の記事を数えた：
WHERE と ORDER BY を取りちがえたところ - 初心者のSQL練習帳 第2回：控えを取ってから記事を消した：
消したのにコメントとカテゴリーが残っていた - 初心者のSQL練習帳 第3回：消した記事の残りを片付けた：
前のコマンドをまねして、テーブルと条件を直し忘れた