フロントエンド基礎実装ガイド：HTML・CSS・JavaScriptの核心技術まとめ

開発環境設定

エディタとしてVisual Studio Codeを準備し、C言語、Python、Vue.jsの開発環境を整備してください。ブラウザ用ライブサーバー拡張機能(Live Server)をインストールした後、ターミナルからcode .コマンドを実行してカレントディレクトリを開きます。

1. HTML構文とセマンティック構造

Hypertext Markup Languageはウェブページの骨格を定義するマークアップ言語です。各要素は開始タグ、コンテンツ、終了タグの三段構成で形成されます。

代表的なタグ	役割
`<b></b>`	テキストの強調表示（太字）
`<i></i>`	斜体表示
`<ins></ins>`	下線付きテキスト
`<del></del>`	取り消し線付きテキスト
`<br>`	強制的な改行
`<hr>`	横方向の区切り線
`<ul>`〜`</ul>`	順序なしリスト
`<ol>`〜`</ol>`	順序ありリスト

<!-- ドキュメントルート宣言 -->
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>製品カタログ</title>
  </head>
  <body>
    <h1>見出しレベル1</h1>
    <p>説明文のパラグラフ</p>
    <ul>
      <li>コーヒー</li>
      <li>紅茶</li>
      <li>緑茶</li>
    </ul>
  </body>
</html>

1.1 要素分類と属性

ブロックレベル要素：<div>, <h1>〜<h6>, <p>, <ul>, <table>など。画面内で独立した領域を確保し、デフォルトで改行されます。
インライン要素：<a>, <img>, <span>, <strong>, <td>など。既存のテキスト流の中に組み込まれ、不要な改行を発生させません。

<p>こんにちは <strong>世界</strong>！</p>
<a href="https://example.com" target="_blank">外部リンク</a>
<img src="./assets/img01.png" alt="代替テキスト">

属性はタグ内のキーバリューペアで定義され、hrefやtargetなどが該当します。

1.2 テーブル構造

<table border="1">
  <thead>
    <tr>
      <th>商品名</th>
      <th>在庫数</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>ノートパソコン</td>
      <td>15</td>
    </tr>
    <tr>
      <td>>タブレット端末</td>
      <td>28</td>
    </tr>
  </tbody>
</table>

1.3 フォーム処理

<form>要素を用いてユーザー入力を収集します。action属性で送信先URLを、method属性でHTTPメソッド(GET/POST)を指定します。

<form action="/api/v1/register" method="post">
  <label for="user-id">ユーザーID:</label>
  <input type="text" id="user-id" name="username" placeholder="半角英数字">
  
  <label for="pass">パスワード:</label>
  <input type="password" id="pass" name="password">
  
  <input type="submit" value="アカウント作成">
</form>

2. CSSスタイリングとレイアウト制御

Cascading Style SheetsはHTML構造に視覚的なスタイルを適用する宣言型言語です。規則は「セレクタ」と「プロパティ宣言」で構成されます。

2.1 セレクタとスコープ

<style>
h4 { color: crimson; }       /* 要素セレクタ */
.menu-item { color: forestgreen; } /* クラスセレクタ */
#hero-section { color: navy; }     /* IDセレクタ */

2.2 継承とネスト指定

親要素と子要素の関係性を明示することで、スコープの衝突を防ぎます。

<style>
.container { color: tomato; }
.container .active-tab { text-align: right; }
.outer-panel .inner-row { justify-content: center; }
.title-lg { font-size: 2rem; }
</style>

<div class="container">
  <p>標準テキスト</p>
  <p class="outer-panel inner-row title-lg">複合クラス</p>
  <p class="active-tab">右寄せ</p>
</div>

2.3 色彩とタイポグラフィ

色指定には単語表記(Red)、RGB/RSA、16進数(#FF5733)が利用可能です。文本書体は下表で制御します。

プロパティ	効果
`background-color`	背景色
`background-image`	画像の埋め込み
`font-family`	フォントファミリー優先順位
`text-indent`	段落冒頭のインデント
`line-height`	行間隔の調整
`text-align`	水平方向の整列
`font-size`	文字サイズ
`font-weight`	文字の太さ
`letter-spacing`	文字間隔

2.4 ボックスモデル

全てのHTML要素は四層の矩形ボックスとして扱われます。外側からmargin(余白)、border(枠線)、padding(内部余白)、content(実コンテンツ)へ向けて階層化されます。

.panel {
  /*  shorthand 記法 */
  margin: 1rem 2rem;          /* 上下左右 */
  padding: 0.5rem 1rem 1rem;  /* 上、左右、下 */
  border: 2px dashed #333;
}

2.5 displayプロパティと配置

block: 幅いっぱいに広がり改行される
inline: 内容幅のみ占有し改行しない
inline-block: インライン性質を保ちつつwidth/height指定可能
flex / grid: モダンなレスポンシブレイアウト
none: ドキュメントフローから完全削除

<style>.hidden-layer { display: none; }
.card-widget { display: inline-block; width: 200px; height: 150px; }</style>
<span class="hidden-layer">非表示領域</span>
<span class="card-widget">カードA</span>

2.6 position配置

static: デフォルト動作
relative: 本来の位置を基準に相対的にずらす
absolute: 生成されたレイヤー上で絶対座標配置
fixed: ビューポートに対して固定表示

<style>
.heading-fixed { position: absolute; left: 5%; top: 10%; }
.heading-rel   { position: relative; transform: translateY(20px); }
</style>
<h2>通常位置</h2>
<h2 class="heading-fixed">浮遊ヘッダー</h2>
<h2 class="heading-rel">オフセット</h2>

3. JavaScriptプログラミング基礎

JSはブラウザのDocument Object Model(DOM)とBrowser Object Model(BOM)を操作するスクリプト言語です。HTML内に<script src="app.js"></script>を配置するか、本文末尾に直接記述します。

3.1 スコープと定数管理

varは関数スコープまたはグローバルスコープを持ち、ループ外でも存活します。letはブロックスコープを採用し、forイテレーションごとに独立した束縛を作成します。constは再代入不可能な参照を定義します。

var globalFlag = true;
let tempValue;
tempValue = 42;
const MAX_RETRY = 3;

function demonstrateScope() {
  var loopVar = 99;
  for (var i = 0; i < 3; i++) console.log(i); // 0, 1, 2
  console.log(loopVar + " | i=" + i); // 99 | i=3 (ループ後存活)

  for (let j = 0; j < 3; j++) console.log(j); // 0, 1, 2
  console.log(typeof j); // undefined (ブロックスコープ外)
}
demonstrateScope();

3.2 データ型と文字列操作

プリミティブ型	特徴
String	Unicode文字列
Number	64ビット浮動小数点
Boolean	true / false
null	意図的な空値
undefined	未代入状態
symbol	一意なトークン

const userName = "SystemAdmin";
const uptime = 99.95;
const isSecure = false;

// テンプレートリテラル活用
console.log(`認証完了: ${userName} ｜ 稼働率: ${uptime}%`);

const baseText = "JavaScript";
console.log(baseText.split(""));          // ["J","a"...]
console.log(baseText.toUpperCase());      // "JAVASCRIPT"
console.log(baseText.slice(2, 6));        // "vasc"

3.3 参照型とデータ交換

配列(Array)とオブジェクト(Object)はヒープメモリに保存され、変数は参照値を保持します。JSON形式への直列化・逆直列化も標準サポートされています。

// 配列操作
const inventory = [101, 205, 330];
inventory.push(412);
inventory.shift();
console.log(inventory.indexOf(205)); // 1

// オブジェクト構造
const serverConfig = {
  host: "192.168.1.50",
  ports: [8080, 443],
  meta: { region: "ap-northeast" }
};
serverConfig.status = "active";
const { ports, meta: { region } } = serverConfig;

// JSON交換
const rawData = [{ cid: 1, item: "Laptop" }, { cid: 2, item: "Mouse" }];
const jsonStr = JSON.stringify(rawData);
const parsedObj = JSON.parse(jsonStr);

3.4 制御フロー

===は厳密等値比較（型含め同一）を行います。switchは分岐ロジックを整理し、for...ofは反復可能なコレクションの値取得に特化しています。

let status = 200;
if (status === 200) {
  console.log("成功");
} else if (status > 300) {
  console.log("エラー");
}

switch (status) {
  case 200: console.log("OK"); break;
  default: console.log("未定義ステータス");
}

const queue = [1, 2, 3, 4];
for (const val of queue) console.log(val);
for (const idx in queue) console.log(queue[idx]);

3.5 関数定義とスコープ特性

従来の関数宣言に加え、無名関数、即時実行関数(IIFE)、ES6アロー関数が利用可能です。非同期処理にはasync/await構文が推奨されます。

const add = (x, y) => x + y;

(async function networkRequest() {
  try {
    const resp = await fetch("/api/v2/status.json");
    if (!resp.ok) throw new Error("通信失敗");
    const data = await resp.json();
    console.log(data);
  } catch (err) {
    console.error(err.message);
  }
})();

変数巻き上げ(Hoisting)によりvar宣言はスコープ顶部へ移動しますが、代入前の参照はundefinedとなります。let/constは一時停止期間(TDZ)のため同じタイミングでアクセスすると参照エラーになります。

クロージャー対策：ループ内での変数共有はletスコープ採用かIIFEによるスコープ分離で解決します。

thisコンテキスト：

通常の関数：呼び出し元によって決定
オブジェクトメソッド：呼び出したオブジェクト自身
アロー関数：定義時のスコープを固定
call()/apply()：明示的に呼び出し元を差し替え可能

const engine = { rpm: 8000 };
function showRPM(gear) {
  console.log(`回転数: ${this.rpm}, ギア: ${gear}`);
}
showRPM.call(engine, "3rd"); // 回転数: 8000, ギア: 3rd

3.6 クラス設計とプロトタイプ継承

ECMAScript 2015以降のclass構文は構糖衣です。内部ではプロトタイプチェーンによるインスタンス共有が動作しています。

class BaseComponent {
  #internalId;
  static prefix = "SYS_";
  
  constructor(id) {
    this.id = id;
    this.#internalId = Math.random();
  }
  
  render() { console.log(this.id); }
  static createInstance() { return new this("init"); }
}

class Enhanced extends BaseComponent {
  render() { 
    super.render(); 
    console.log(`${BaseComponent.prefix}${this.id}`);
  }
}
new Enhanced("widget").render();

関数宣言時、ブラウザは自動的にprototypeオブジェクトを生成し、メソッドのメモリ共有を実現します。サブクラスのインスタンスは自分自身のプロパティを探し、存在しなければ__proto__経由で親プロトタイプを検索します。

3.7 ProxyとReflectの利用

ターゲットオブジェクトのアクセスをフックし、検証や自動補完を行います。Reflectは対応するネイティブ操作を提供します。

const sourceList = [10, 20, 30];
const handler = {
  get(target, prop, receiver) {
    let index = Number(prop);
    if (index < 0) index = target.length + index;
    return Reflect.get(target, String(index), receiver);
  }
};
const monitoredArray = new Proxy(sourceList, handler);
console.log(monitoredArray[-1]); // 30 (末尾要素アクセス)

3.8 Promiseと非同期パターン

Promiseは非同期的な処理の完了・失敗を表す状態マシンです。Pending → Fulfilled / Rejectedへの遷移は不可逆です。

const task = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    success ? resolve({ data: "完成", code: 200 }) : reject(new Error("中断"));
  }, 1500);
});

task
  .then(res => console.log(res))
  .catch(err => console.error(err));

タグ: HTML5 CSS3 javascript FrontendDevelopment DOM操作

6月1日 23:00 投稿

異端開発室