- DAY 1：JavaScriptとReactの関係（前半）
- JavaScriptとは
- Reactとは
- ライブラリとは
- HTML / CSS / JavaScriptの役割
- Reactで何ができるか（入口のイメージ）
- コンポーネントという考え方（前半のまとめとして）
- DAY 1（前半）のまとめと後半へのつながり
- DAY 1：JavaScriptとReactの関係（後半）
- JavaScriptとは（Reactで使うときの考え方）
- Reactとは（UIを返す関数としてのコンポーネント）
- ライブラリとは（Reactが肩代わりしてくれること）
- HTML / CSS / JavaScriptの役割（Reactとのつながり）
- Reactで何ができるか（アプリ構成のイメージ）
- コンポーネントという考え方（設計の視点で深掘り）
- DAY 1（後半）のまとめと次へのつながり
DAY 1：JavaScriptとReactの関係（前半）
DAY 1の前半では、「JavaScriptとは何か」「Reactとは何か」を土台から整理しながら、HTML / CSS / JavaScriptの役割、ライブラリという考え方、そしてコンポーネントというキーワードを“入口”として押さえていきます。ここでの理解が、この先60日間の学習のベースになりますので、急がず一つずつイメージしながら読み進めていただければと思います。
JavaScriptとは
ブラウザを「動かすための頭脳」
JavaScriptは、Webブラウザの中で動くプログラミング言語です。 Webページを「ただ表示するだけの紙」から、「ユーザーの操作に反応して動くアプリ」に変えてくれる存在だとイメージすると分かりやすいです。
- HTML：ページの骨組み（何がどこにあるか）
- CSS：見た目（色・余白・フォント・レイアウト）
- JavaScript：動きと頭脳（振る舞い・処理）
という役割分担のうち、JavaScriptは「動きと頭脳」を担当します。
例：ボタンを押したらメッセージが出る
まずは、JavaScriptが何をしているかが分かるシンプルな例を見てみます。
<button id="helloBtn">クリックしてね</button>
<p id="message"></p>
<script>
const button = document.getElementById('helloBtn');
const message = document.getElementById('message');
button.addEventListener('click', () => {
message.textContent = 'こんにちは！JavaScriptが動きました。';
});
</script>
ここで起きていることをかみ砕くと：
- 要素をつかまえる
getElementByIdで、HTMLのボタンとメッセージ部分をJavaScript側から操作できるようにしています。 - イベントを登録する
addEventListener('click', ...)で、「クリックされたらこの処理を実行してね」と命令しています。 - 画面を書き換える
textContentを変更することで、表示されるテキストを差し替えています。
このように、JavaScriptは「ユーザーの操作に反応して画面を変える」ための言語です。Reactも最終的にはこのJavaScriptの力を使って画面を更新していきます。
Reactとは
ユーザーインターフェースを作るためのJavaScriptライブラリ
Reactは、ユーザーインターフェース（UI）を作るためのJavaScriptライブラリです。UIとは、ユーザーが目で見て、手で触れる「画面の部品」のことです。
- ボタン
- 入力フォーム
- ナビゲーションバー
- カードレイアウト
- 一覧表示や詳細画面
Reactは、これらを「コンポーネント」という単位で組み立てていくスタイルを採用しています。Reactの公式ドキュメントでも、「ReactはUIをレンダリングするためのJavaScriptライブラリ」であり、「コンポーネントを組み合わせてUIを作る」と説明されています。
「魔法のフレームワーク」ではなく「UIに特化した道具」
Reactはよく「フレームワーク」と呼ばれますが、正確にはUIに特化したライブラリです。
- アプリ全体の構造やルーティング、データ取得などを全部面倒見るのがフレームワーク
- 画面の描画やコンポーネント構造に特化しているのがReact
というイメージを持つと整理しやすくなります。 Reactは「UIをどう描くか」に集中していて、ルーティングやデータ取得などは別のライブラリやフレームワーク（例：Next.js）と組み合わせて使うことが多いです。
ライブラリとは
「よく使う処理をまとめた便利セット」
ライブラリとは、特定の目的のために用意された便利な機能のセットのことです。 自分で一から全部書くのではなく、「よく使う処理」をまとめて提供してくれるイメージです。
- フレームワーク
- アプリ全体の構造やルールを強く決める「骨組み」
- ルーティング・データ取得・画面構成などを一括で面倒を見ることが多い
- ライブラリ
- 特定の目的のための「便利な道具」
- Reactの場合は「UIをコンポーネントで作ること」に特化
Reactは「UIライブラリ」として、コンポーネント・状態管理・イベント処理など、UI構築に必要な機能を提供してくれます。
ライブラリを使うメリット（初心者目線）
初心者にとってライブラリのメリットはとても大きいです。
- 自分で全部書かなくてよい DOM操作や画面更新の細かい処理を、Reactがうまく抽象化してくれます。
- ベストプラクティスが詰まっている 多くの開発者が試行錯誤して作った「うまいやり方」が、ライブラリの中に凝縮されています。
- 学習コストと得られる力のバランスが良い 素のJavaScriptだけで大規模なUIを作るより、Reactを使ったほうが整理しやすく、保守もしやすくなります。
「ReactはUIに特化したライブラリ」という位置づけを理解しておくと、「どこまでがReactの役割で、どこからがJavaScriptの役割か」が見えやすくなり、混乱しにくくなります。
HTML / CSS / JavaScriptの役割
三つの役割をイメージでつかむ
Webページは、ざっくり次の三つで構成されています。
- HTML：骨組み（構造）
- CSS：服やメイク（見た目）
- JavaScript：動きと頭脳（振る舞い）
この三つの役割をしっかりイメージしておくと、Reactがどこに位置する技術なのかが分かりやすくなります。
HTMLの役割：何がどこにあるか
<h1>React入門コース</h1>
<p>これは60日で学ぶReactの入門コースです。</p>
<button>申し込む</button>
ここでは、
- 見出し（
<h1>） - 説明文（
<p>） - ボタン（
<button>）
といった「部品の種類」と「並び方」を決めています。 HTMLは「意味のあるタグ」を使って、ページの構造を表現する言語です。
CSSの役割：見た目を整える
<style>
h1 {
color: #1e90ff;
text-align: center;
}
button {
background-color: #1e90ff;
color: white;
padding: 8px 16px;
border-radius: 4px;
border: none;
cursor: pointer;
}
</style>
同じHTMLでも、CSSを変えるだけで印象がガラッと変わります。 CSSは「ユーザーにどう見えるか」をコントロールするためのスタイル指定の言語です。
JavaScriptの役割：動きを与える
<script>
const button = document.querySelector('button');
button.addEventListener('click', () => {
alert('申し込みありがとうございます！');
});
</script>
ここでは、ボタンがクリックされた瞬間に「アラート」を表示しています。 JavaScriptは、ユーザーの操作や時間経過などに応じて「何をするか」を決めるための言語です。
Reactは、このJavaScriptの力を使って「UIの更新」を効率よく行うためのライブラリだと理解すると、位置づけがクリアになります。
Reactで何ができるか（入口のイメージ）
小さな部品から大きな画面まで組み立てる
Reactは、小さなコンポーネントを組み合わせて大きな画面を作るのが得意です。 公式ドキュメントでも、「Reactアプリはコンポーネントから構成され、コンポーネントはボタンのように小さいものからページ全体のように大きいものまであり得る」と説明されています。
例えば、次のような構成を考えてみます。
Headerコンポーネント：サイトのヘッダーCourseCardコンポーネント：講座のカード表示Footerコンポーネント：フッター
これらを組み合わせて、Appコンポーネントとして1つのページにまとめるイメージです。
最初のReactコンポーネント例
function HelloReact() {
return (
<div>
<h1>こんにちは、React！</h1>
<p>これは最初のReactコンポーネントです。</p>
</div>
);
}
export default HelloReact;
重要ポイント（前半で押さえておきたいところ）：
- コンポーネント名は先頭を大文字にする Reactコンポーネントは必ず大文字で始めます。小文字だとHTMLタグと区別がつかなくなるためです。
return ( ... )の中にUIを書く コンポーネントは「画面に何を表示するか」をreturnの中で定義します。- JSXという記法を使う 見た目はHTMLに似ていますが、実際にはJavaScriptの中で使う特別な構文です。タグは必ず閉じる必要があるなど、HTMLより少し厳密です。
このコンポーネントをアプリの入口となる App コンポーネントから呼び出すと、画面に表示されます。
import HelloReact from './HelloReact';
function App() {
return (
<div>
<HelloReact />
</div>
);
}
export default App;
Reactでは、このようにコンポーネントを組み合わせてUIを構築するのが基本スタイルです。
コンポーネントという考え方（前半のまとめとして）
「UIの部品をひとまとまりのコードにする」
コンポーネントとは、UIの部品をひとまとまりのコードとして切り出したものです。 Reactの公式ドキュメントでも、「コンポーネントはUIの構成要素であり、ボタンのように小さいものからページ全体のように大きいものまであり得る」と説明されています。
前半では、コンポーネントを次のようにイメージできれば十分です。
- ボタンやカードなどの「部品」を、1つの関数として定義する
- その関数が「UI（画面）」を返す
- その部品を組み合わせて、ページ全体を作る
コンポーネントの設計や再利用の仕方などは、DAY 1後半と以降のDAYでさらに深掘りしていきます。
DAY 1（前半）のまとめと後半へのつながり
DAY 1の前半では、
- JavaScriptはブラウザの「動きと頭脳」を担当する言語であること
- ReactはUIを作るためのJavaScriptライブラリであること
- ライブラリとは「特定の目的に特化した便利セット」であること
- HTML / CSS / JavaScriptの役割分担
- Reactでできること（コンポーネントでUIを組み立てる）
- コンポーネントという考え方の入口
を確認しました。
後半では、ここで触れた内容をもう一歩深く掘り下げて、
- コンポーネントを「UIを返す関数」として捉えること
- ライブラリとしてのReactが、状態管理や画面更新をどう肩代わりしてくれるか
- 実際のアプリに近い構成をイメージしながら、コンポーネント設計の考え方
などを、さらに具体的なコード例とともに整理していきます。 「ReactはJavaScriptでUIを作るためのライブラリ」「コンポーネントはUIの部品」というイメージを持ったまま、DAY 1後半へ進んでいくと、理解が自然に積み上がっていきます。
DAY 1：JavaScriptとReactの関係（後半）
DAY 1の後半では、前半で触れたキーワードを「実際にコードを書くときの視点」で一歩深く掘り下げていきます。 ここからは、Reactを使ったときに頭の中でどう整理すると楽になるか、という“思考の型”も意識しながら進めていきます。
JavaScriptとは（Reactで使うときの考え方）
値と処理で「画面の状態」を表現する
ReactはJavaScriptで書かれたライブラリなので、コンポーネントの中身はすべてJavaScriptです。 まずは、Reactでよく使う「変数」と「関数」のイメージを、シンプルなコードで確認しておきます。
const courseName = 'React入門60日コース';
function greetUser(name) {
return `ようこそ、${name}さん！`;
}
const message = greetUser('受講者');
console.log(message); // ようこそ、受講者さん！
ここで大事なのは、「値（courseName や name）を変数に入れて、関数で処理して、結果を使う」という流れです。 Reactコンポーネントも、「入力（propsや状態）を受け取って、UIを返す関数」として考えると理解しやすくなります。
Reactとは（UIを返す関数としてのコンポーネント）
コンポーネントは「UIを返すJavaScript関数」
Reactの公式ドキュメントでは、コンポーネントは「JavaScriptの関数として定義され、UIを返す」と説明されています。
function WelcomeMessage() {
const userName = '受講者';
return (
<div>
<h2>ようこそ、{userName}さん！</h2>
<p>React入門60日コースへようこそ。</p>
</div>
);
}
export default WelcomeMessage;
このコードを、JavaScriptの視点で分解すると次のようになります。
userNameという変数 コンポーネントの中で使う値を変数として定義しています。return ( ... )の中身 関数が「UI（画面）」を返しています。Reactはこの返り値をもとに画面を描画します。{userName}JSXの中で{}を使うと、JavaScriptの値を埋め込めます。これが「動的な表示」の基本です。
「コンポーネント＝UIを返す関数」という視点を持つと、Reactのコードがぐっと読みやすくなります。
ライブラリとは（Reactが肩代わりしてくれること）
素のJavaScriptとの比較で見るReactの役割
素のJavaScriptだけでUIを作る場合、次のようなことを自分で管理する必要があります。
- どの要素を更新するかを毎回指定する
- イベント（クリック・入力など）を自分で全部登録する
- 状態が変わったときに、どの部分をどう書き換えるかを考える
Reactは、これらの「面倒な部分」をライブラリとして肩代わりしてくれます。
素のJavaScriptでカウンターを作る場合
<button id="incrementBtn">+1</button>
<p id="countDisplay">現在のカウント: 0</p>
<script>
let count = 0;
const button = document.getElementById('incrementBtn');
const display = document.getElementById('countDisplay');
button.addEventListener('click', () => {
count = count + 1;
display.textContent = `現在のカウント: ${count}`;
});
</script>
Reactで同じカウンターを作る場合
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<button onClick={handleClick}>+1</button>
<p>現在のカウント: {count}</p>
</div>
);
}
export default Counter;
ここでReactがやってくれていることは、
useStateで「状態」と「画面の更新」をセットで管理できるようにしているsetCountを呼ぶと、「どの部分を更新すべきか」をReactが自動で判断してくれる- DOM操作（
getElementByIdやtextContentの書き換え）を自分で書かなくてよい
という点です。 これが「ライブラリを使うメリット」の具体例であり、ReactがUIライブラリとして担っている役割です。
HTML / CSS / JavaScriptの役割（Reactとのつながり）
Reactは「JavaScript側」に属する技術
Reactは、HTMLやCSSとは別に、JavaScriptの世界に属する技術です。 ただし、Reactを使うときもHTMLやCSSの知識はそのまま活きてきます。
JSXとHTMLの関係
Reactでは、UIを「JSX」という記法で書きます。
function SimpleCard() {
return (
<div className="card">
<h3>React入門</h3>
<p>60日でReactの基礎を身につけるコースです。</p>
</div>
);
}
HTMLとの違い・共通点は次の通りです。
- タグの構造はHTMLに似ているので、HTMLの知識がそのまま役立つ
classではなくclassNameを使うなど、JavaScriptの制約に合わせた書き方になる- JSXはコンパイルされてJavaScriptのコードに変換されてからブラウザで動く
CSSとのつながり
CSSは、Reactでもそのまま使えます。
.card {
border: 1px solid #ddd;
padding: 16px;
border-radius: 8px;
}
このCSSを読み込んでおけば、先ほどの SimpleCard コンポーネントにスタイルが適用されます。 Reactは「UIの構造と動き」を担当し、CSSは「見た目」を担当するという役割分担は変わりません。
Reactで何ができるか（アプリ構成のイメージ）
実際のアプリに近い構成を想像する
Reactを使うと、次のような構成のアプリを作ることができます。
- トップページ
- ヘッダー（サイト名・メニュー）
- コース一覧（カード表示）
- フッター（コピーライトなど）
- 詳細ページ
- コースの詳細情報
- 申し込みボタン
- レビュー一覧
これらをすべてコンポーネントとして分割し、組み合わせていきます。
「コースカード」コンポーネントの例
function CourseCard({ title, description }) {
return (
<div className="course-card">
<h3>{title}</h3>
<p>{description}</p>
<button>詳細を見る</button>
</div>
);
}
export default CourseCard;
ここでのポイントは、
{ title, description }という引数 コンポーネントは「props（プロップス）」と呼ばれる値を受け取って、表示内容を変えられること。- 同じコンポーネントを何度も使い回せること タイトルと説明だけ変えて、複数のコースカードを表示できること。
function CourseList() {
return (
<div>
<CourseCard
title="React入門60日コース"
description="モダンJavaScriptからReactまでをじっくり学ぶコースです。"
/>
<CourseCard
title="JavaScript基礎30日コース"
description="変数・関数・配列・オブジェクトなどの基礎を固めるコースです。"
/>
</div>
);
}
このように、Reactは「同じ部品を違うデータで何度も使う」ことが得意で、実際のWebアプリに近い構成を自然に作れるようになります。
コンポーネントという考え方（設計の視点で深掘り）
「1コンポーネント＝1役割」を意識する
コンポーネント設計で大事なのは、「1コンポーネントに1つの役割を持たせる」意識です。
- 良い例
Header：サイトのヘッダーだけを担当CourseCard：コースのカード表示だけを担当ApplyButton：申し込みボタンだけを担当
- 良くない例
BigComponent：ヘッダーもフッターもフォームも全部詰め込んでしまう
コンポーネントが大きくなりすぎると、コードが読みにくくなり、変更もしづらくなります。 「このコンポーネントは何をするためのものか？」を一言で説明できるようにしておくと、設計が安定します。
コンポーネント分割の簡単なテンプレート思考
画面を見たときに、次のように分けて考える癖をつけるとよいです。
- 上のほうにある共通部分 →
Header - 下のほうにある共通部分 →
Footer - 繰り返し表示されるカードやリスト →
ItemCard/List - 特定の操作をするボタン →
ActionButton
こうして「部品ごとに名前をつける」ことが、コンポーネント設計の第一歩になります。
DAY 1（後半）のまとめと次へのつながり
DAY 1の後半では、
- Reactコンポーネントを「UIを返す関数」として捉えること
- ライブラリとしてのReactが、状態管理や画面更新を肩代わりしてくれること
- HTML / CSS / JavaScriptの役割分担と、ReactがJavaScript側の技術であること
- コンポーネントを「1役割ごとの部品」として設計する考え方
を確認しました。