0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@harapeco-mgn

第7章｜今さら学ぶ「HTML / CSS / JavaScript」

0
Last updated at Posted at 2026-02-19

第7章｜今さら学ぶ「HTML / CSS / JavaScript」

📚 シリーズ目次はこちら → 「今さら学ぶ」シリーズ — はじめに
🗺️ KnowledgeNoteの設計を確認 → 設計マップ

この章でわかること

  • HTML / CSS / JavaScript それぞれの役割と関係
  • Railsのビューで3つがどう使われているか
  • 非同期処理の基本 — 「待つ間に別のことをする」仕組み
  • DOMとは何か — JavaScriptがHTMLを操作する仕組み

🏠 たとえ話で掴む「HTML / CSS / JavaScript」

Web画面を作る3つの技術は、 人間の体 にたとえると整理しやすいです。

人間の体 Web技術 役割
骨格 HTML ページの構造（見出し・段落・リスト・ボタン等の配置）
服装・髪型 CSS 見た目の装飾（色・大きさ・配置・アニメーション）
筋肉・神経 JavaScript 動き・振る舞い（クリックしたら開く、入力したら検証する等）

骨格がなければ立てない。服がなければ裸のまま。筋肉がなければ動けない。3つが揃って初めて「ちゃんとした見た目で、ちゃんと動く」Webページが完成します。

ただし、Railsでは HTML（ERB）が主役 です。CSSとJavaScriptは、Railsが用意した仕組みに乗っかる形で使います。この章ではRails開発に必要な範囲で、3つの役割を整理します。

HTML / CSS / JavaScript とは何か — 技術的な定義

3つの技術の位置づけ

ブラウザが表示するWebページは、HTML・CSS・JavaScriptの3つの言語で構成されています。これはWebの標準化団体（W3CやWHATWG）が定めた仕様に基づいており、どのブラウザでも同じように解釈されることを目指しています。

HTML（HyperText Markup Language） は、ページの構造と意味を記述するマークアップ言語です。「ここは見出し」「ここはリンク」「ここはフォーム」とタグで囲むことで、ブラウザがコンテンツの意味を理解します。HTMLだけでも情報は表示できますが、見た目の制御や動的な操作はできません。

CSS（Cascading Style Sheets） は、HTMLの見た目を制御するスタイルシート言語です。色・サイズ・余白・レイアウトなどを指定します。「Cascading（カスケード）」は、複数のスタイル指定が重なったとき、優先度のルールに従って適用されることを意味しています。

JavaScript（JS） は、ブラウザ上で動作するプログラミング言語です。ユーザーの操作に応じた画面の更新、サーバとの非同期通信（API呼び出し）、DOM操作によるページの動的な変更などを担当します。もともとはブラウザ専用でしたが、Node.jsの登場以降はサーバサイドでも使われています。

Railsにおける3つの技術の役割

Railsでは、HTML はERBテンプレートとしてサーバサイドで生成されます。CSSはTailwind CSSなどのフレームワーク経由で記述し、JavaScriptはHotwire（Turbo + Stimulus）を中心に使います。Railsの特徴は、 JavaScriptをできるだけ少なく書く 設計思想を持っていることで、HTMLをサーバから返すことで多くの画面更新を実現しています。

🦴 HTML — ページの骨格

HTML（HyperText Markup Language） は、ページの構造を定義する言語です。「ここが見出し」「ここが段落」「ここがリンク」とマークアップ（目印をつける）します。

<!-- KnowledgeNoteの記事詳細ページのイメージ -->
<article>
  <h1>Railsのルーティングを完全理解する</h1>

  <div class="meta">
    <span>by @tanaka</span>
    <time datetime="2025-02-15">2025年2月15日</time>
  </div>

  <div class="body">
    <p>ルーティングとは、URLとコントローラを紐づける仕組みです。</p>
    <p>Railsでは <code>resources</code> を使って...</p>
  </div>

  <div class="tags">
    <a href="/tags/Ruby">Ruby</a>
    <a href="/tags/Rails">Rails</a>
  </div>
</article>

よく使うHTML要素

要素 意味 使いどころ
<h1>〜<h6> 見出し ページタイトル、セクション見出し
<p> 段落 本文
<a> リンク ページ遷移、外部サイトへのリンク
<div> グループ（意味なし） レイアウトの箱として
<span> インライン（意味なし） テキストの一部を装飾するため
<form> フォーム ユーザー入力（ログイン、記事作成等）
<input> 入力欄 テキスト入力、チェックボックス等
<button> ボタン 送信、アクション実行
<ul> / <li> リスト 一覧表示
<table> 表 データの一覧

セマンティックHTML — 意味のあるタグを使う

<!-- ❌ divだらけ（意味がわからない） -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">...</div>
</div>
<div class="footer">...</div>

<!-- ✅ セマンティックタグ（意味がわかる） -->
<header>
  <nav>...</nav>
</header>
<main>
  <article>...</article>
</main>
<footer>...</footer>

<header>、<nav>、<main>、<article>、<footer> のようなタグを使うと、コードを読む人も検索エンジンも「このブロックが何なのか」を理解しやすくなります。これを セマンティックHTML と呼びます。

👗 CSS — 見た目の装飾

CSS（Cascading Style Sheets） は、HTMLの見た目を整える言語です。骨格（HTML）に服を着せるイメージです。

/* 記事タイトルを大きく太字に */
article h1 {
  font-size: 2rem;
  font-weight: bold;
  color: #333;
}

/* タグをバッジ風に */
.tags a {
  display: inline-block;
  padding: 4px 12px;
  background-color: #e0f2fe;
  border-radius: 9999px;
  color: #0369a1;
  font-size: 0.875rem;
  text-decoration: none;
}

KnowledgeNoteでは Tailwind CSS を使う

本シリーズでは Tailwind CSS を使います。従来のCSSとの違いを確認します。

<!-- 従来のCSS方式：別ファイルにクラスを定義 -->
<h1 class="article-title">Railsのルーティング</h1>

<!-- style.css -->
<!-- .article-title { font-size: 2rem; font-weight: bold; color: #333; } -->

<!-- Tailwind CSS方式：HTMLに直接ユーティリティクラスを書く -->
<h1 class="text-3xl font-bold text-gray-800">Railsのルーティング</h1>

Tailwind CSSでは、text-3xl（文字サイズ大）、font-bold（太字）、text-gray-800（濃いグレー）のような 小さなクラスを組み合わせて スタイルを作ります。CSSファイルを別途書く必要が大幅に減るのが特徴です。

💡 CSSの詳細はこのシリーズの主題ではないので、コード例では「見た目の説明」は最小限にして、ロジック部分に集中します。

⚡ JavaScript — 動きと振る舞い

JavaScript（JS） は、ページに動きを与える言語です。ボタンを押したらメニューが開く、入力内容をリアルタイムで検証する、といった処理を担当します。

DOMとは — JavaScriptがHTMLを操作する仕組み

DOM（Document Object Model） は、HTMLをJavaScriptから操作できるように「ツリー構造のオブジェクト」として表現したものです。

<!-- このHTMLは… -->
<article id="article-1">
  <h1>Ruby入門</h1>
  <p>Rubyとは...</p>
</article>

<!-- DOMではこうなる（ツリー構造） -->
document
└── article#article-1
    ├── h1
    │   └── "Ruby入門"
    └── p
        └── "Rubyとは..."

JavaScriptはこのDOMツリーを操作してページを動的に変更します。

// 要素を取得して操作する
const title = document.querySelector('#article-1 h1');
title.textContent = 'Ruby入門（改訂版）';  // テキストを変更
title.style.color = 'blue';                 // 色を変更

イベント — 「何かが起きたら処理する」

JavaScriptの核心は イベント処理 です。「ボタンが押されたら」「ページが読み込まれたら」「入力が変わったら」といったタイミングで処理を実行します。

// いいねボタンをクリックしたら処理を実行
const likeButton = document.querySelector('.like-button');

likeButton.addEventListener('click', function(event) {
  // クリックされた時の処理
  console.log('いいねが押されました！');
});

🔄 非同期処理 — 料理を待つ間に会話する

同期処理と非同期処理の違い

JavaScriptの重要な概念に 非同期処理 があります。これを レストランでの食事 にたとえます。

同期処理 は、料理が出てくるまで何もせずじっと待つことです。

注文する → 料理を待つ（何もしない）→ 料理が届く → 食べる

非同期処理 は、料理を待っている間に会話を楽しむことです。

注文する → 会話を楽しむ → 料理が届いたら食べる
              ↑ 待ち時間を有効活用！

プログラムの世界では、「サーバからデータを取得する」「ファイルを読み込む」といった時間のかかる処理を待つ間に、画面の操作を受け付け続けるために非同期処理が使われます。

// 同期的（ページ全体が固まる — ❌）
// const data = fetchDataSync('/api/articles');  // 完了するまで何もできない

// 非同期的（ページは操作可能 — ✅）
fetch('/api/articles')                    // リクエストを送る（すぐ次の処理へ）
  .then(response => response.json())      // レスポンスが届いたらJSONに変換
  .then(data => {
    console.log(data);                    // データが届いたら処理する
  })
  .catch(error => {
    console.error('エラー:', error);       // 失敗したらエラー処理
  });

console.log('この行はfetchの完了を待たずに実行される');

async / await — 非同期をわかりやすく書く

fetch + .then() は読みにくくなりがちなので、 async / await という書き方が現在の主流です。

// async/await で書くと同期処理のように読める
async function loadArticles() {
  try {
    const response = await fetch('/api/articles');   // 完了を待つ
    const data = await response.json();              // 完了を待つ
    console.log(data);
  } catch (error) {
    console.error('エラー:', error);
  }
}

await は「この処理が終わるまで待って」という意味ですが、 ページ全体が固まるわけではありません。裏側では非同期的に動いていて、見た目が同期処理のように読みやすくなっているだけです。

🛤️ Railsでの3つの技術の関わり方

Railsアプリでは、HTML / CSS / JavaScript はそれぞれ以下のように配置されます。

app/
├── views/              ← HTML（ERBテンプレート）
│   ├── layouts/
│   │   └── application.html.erb   ← 共通レイアウト
│   └── articles/
│       ├── index.html.erb          ← 記事一覧
│       └── show.html.erb           ← 記事詳細
│
├── assets/
│   └── stylesheets/    ← CSS（Tailwind CSS）
│
└── javascript/         ← JavaScript（Stimulus コントローラ等）
    └── controllers/
        └── hello_controller.js

Rails 8.0 での管理方法

技術 管理の仕組み 特徴
HTML ERBテンプレート（app/views/） Rubyのコードを埋め込める（→ 第13章）
CSS Tailwind CSS（app/assets/stylesheets/） ユーティリティクラスで記述
JavaScript Importmap（app/javascript/） Node.js不要。CDNからライブラリを読み込む

💡 Rails 8.0 では Importmap がデフォルト です。以前使われていた Webpacker や esbuild とは違い、Node.js のインストールが不要です。JavaScriptのライブラリは CDN（コンテンツ配信ネットワーク）から直接読み込みます（→ 第11章で詳しく扱います）。

🛠️ KnowledgeNoteでの具体例

KnowledgeNoteの記事詳細ページで、3つの技術がどう協力しているかを確認します。

<!-- app/views/articles/show.html.erb -->

<%# HTML（ERB）— ページの骨格 %>
<article class="max-w-3xl mx-auto p-6">
  <%# CSS（Tailwindクラス）— 見た目の装飾 %>
  <h1 class="text-3xl font-bold text-gray-800 mb-4">
    <%= @article.title %>
  </h1>

  <div class="flex items-center gap-2 text-gray-500 mb-6">
    <span>by <%= @article.user.display_name %></span>
    <time datetime="<%= @article.created_at.iso8601 %>">
      <%= @article.created_at.strftime("%Y年%m月%d日") %>
    </time>
  </div>

  <div class="prose">
    <%# 記事本文（Markdownをレンダリング） %>
    <%= markdown(@article.body) %>
  </div>

  <%# JavaScript（Stimulus）— 動き %>
  <div data-controller="like">
    <button data-action="click->like#toggle"
            class="flex items-center gap-1 text-gray-500 hover:text-red-500">
      ❤️ <span data-like-target="count"><%= @article.likes.count %></span>
    </button>
  </div>
</article>

data-controller="like" や data-action="click->like#toggle" は、 Stimulus （→ 第19章）の記法です。HTMLの属性でJavaScriptの処理を紐づけるRails流のやり方で、大量のJavaScriptを書かなくてもインタラクティブな機能を実現できます。

💼 面接で聞かれたら？

Q：HTML / CSS / JavaScript の役割の違いを説明してください。

「HTMLはページの構造を定義する言語で、見出し・段落・リンクなどの要素を配置します。CSSはその見た目を装飾する言語で、色・サイズ・レイアウトを指定します。JavaScriptはページに動きを与える言語で、ユーザーの操作に応じた処理やサーバとの非同期通信を行います。3つが連携してWebページが完成します。」

深掘りされたら：

  • 「DOMとは？」→ HTMLをツリー構造のオブジェクトとして表現したもの。JavaScriptはこのDOMを操作してページの内容を動的に変更する。
  • 「非同期処理とは？」→ 時間のかかる処理の完了を待たずに次の処理に進む仕組み。サーバからのデータ取得中もページ操作を受け付け続けられる。

🔗 もっと深く知りたい人へ（1次情報リンク）

まとめ

  • ✅ HTML = 骨格（構造）、CSS = 服装（見た目）、JavaScript = 筋肉（動き）
  • ✅ セマンティックHTMLを使うと、コードの意図が人にも検索エンジンにも伝わりやすい
  • ✅ KnowledgeNoteではTailwind CSS（ユーティリティクラス）とImportmap（Node.js不要）を使う
  • ✅ 非同期処理は「待つ間に別のことをする」仕組み。async/awaitで読みやすく書ける
  • ✅ DOMはHTMLをJavaScriptから操作するための「ツリー構造」

📚 シリーズ目次：「今さら学ぶ」シリーズ — はじめに

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?