Day 1：JavaScriptとReactの関係をやさしく理解する
Web開発の世界に足を踏み入れると、まず名前だけはよく聞くのが「JavaScript」と「React」です。 でも、「結局この2つってどういう関係なの？」というところが、最初はいちばんモヤモヤしやすいポイントです。
この記事では、プログラミング初心者向けに、JavaScriptとReactのつながりをやさしくほどきながら、 HTML / CSS / JavaScriptの役割や「コンポーネント」という考え方まで、一気につなげて理解できるように解説していきます。
JavaScriptとは：Webページに「動き」と「考える力」を与える言語
JavaScriptの役割イメージ
JavaScriptは「プログラミング言語」の一種で、主にWebブラウザの中で動きます。 ボタンをクリックしたら画面が切り替わる、フォームに入力した内容をチェックする、 ページの一部だけがスッと書き換わる——こういった“動き”を担当しているのがJavaScriptです。
よくあるたとえで言うと、Webページを「人間の体」に見立てたとき、
- HTML：骨格（構造）
- CSS：見た目（肌・服・スタイル）
- JavaScript：脳や筋肉（動き・振る舞い）
というイメージを持つと、役割がスッと入ってきます。
ほんの少しだけJavaScriptのコードを見てみる
「言語」と言われると身構えてしまいがちですが、最初は“やっていること”をイメージできれば十分です。
// メッセージを表示するための「関数」を定義しています
function sayHello() {
// ブラウザのコンソールに文字を出す命令です
console.log("こんにちは！JavaScriptの世界へようこそ！");
}
// 上で定義した関数を「呼び出す」と、実際にメッセージが表示されます
sayHello();
- function：処理のまとまり（関数）を作るキーワードです。
- console.log：ブラウザの「開発者ツール」にメッセージを出すための命令です。
- sayHello()：定義した関数を実際に動かす「呼び出し」です。
今は「ふーん、こう書くと何かが動くんだな」くらいの理解で大丈夫です。 Reactも、こうしたJavaScriptの“書き方”の上に成り立っています。
ライブラリとは：よく使う便利セットをまとめた「道具箱」
ライブラリのざっくりイメージ
「Reactとは？」の前に、まず「ライブラリ」という言葉を押さえておくと理解がスムーズになります。
ライブラリとは、よく使う処理や便利な機能を、あらかじめまとめておいてくれた「道具箱」のようなものです。
- 毎回ゼロから全部自分で書くのは大変
- みんながよく使うパターンは、共通の“部品”としてまとめておこう
- その部品セットを「ライブラリ」として配布しよう
という発想で作られています。
ライブラリを使うメリット
- コードの量が減る：同じことをするのに、短く・シンプルに書ける
- バグが減る：よく使われているライブラリは、多くの人がテストしているので安定しやすい
- 考えるべきことが絞れる：細かい仕組みはライブラリに任せて、「何を作りたいか」に集中できる
Reactも、まさに「ユーザーインターフェース（画面）を作るためのライブラリ」です。
Reactとは：画面を「部品（コンポーネント）」として組み立てるライブラリ
Reactの一言まとめ
Reactは、「ユーザーインターフェース（UI）を作るためのJavaScriptライブラリ」です。 ボタン、フォーム、カード、ページ全体など、画面のパーツを「コンポーネント」という単位で組み立てていきます。
なぜReactが人気なのか
- コンポーネント指向：画面を小さな部品に分けて、組み合わせていく考え方が分かりやすい
- 再利用しやすい：一度作ったコンポーネントを、別の画面でもそのまま使い回せる
- 状態管理がしやすい：ボタンを押した、入力した、読み込み中…といった「状態」を扱う仕組みが整っている
- コミュニティが大きい：情報やサンプルコードが豊富で、困ったときに調べやすい
いちばんシンプルなReactコンポーネントの例
Reactでは、コンポーネントを「JavaScriptの関数」として書くことが多いです。
// Reactのコンポーネントは、基本的に「関数」として定義します
function HelloMessage() {
// JSXという特別な書き方で、画面に表示する内容を返します
return (
<p>こんにちは！これはReactコンポーネントです。</p>
);
}
// このコンポーネントを画面に表示するには、別の場所で <HelloMessage /> と書いて使います
- function HelloMessage()：コンポーネントの「名前」です（先頭は大文字にするルールがあります）。
- return ( … )：この中に書いたものが、画面に表示される“見た目”になります。
- \<p>…</p>：HTMLに似た書き方ですが、Reactではこれを「JSX」と呼びます。
「JavaScriptの関数が、HTMLっぽいものを返している」 この感覚がつかめてくると、Reactの世界が一気に分かりやすくなります。
HTML / CSS / JavaScriptの役割を整理する
3つの役割をはっきり分けて考える
Reactを学ぶ前に、HTML / CSS / JavaScriptの役割をきちんと分けて理解しておくことがとても大事です。
- HTML（構造） ページに何があるかを決める言語です。 例：見出し、段落、画像、リンク、ボタン、フォームなど。
- CSS（見た目） 文字の色、背景色、余白、レイアウトなど、「どう見えるか」を決める言語です。
- JavaScript（動き・ロジック） ボタンを押したときの処理、データの取得、画面の一部を書き換えるなど、「どう動くか」を決める言語です。
役割の違いが分かる簡単な例
同じ「ボタン」でも、HTML / CSS / JavaScriptでやっていることは違います。
<!-- HTML：ボタンという“部品”をページに置く -->
<button id="myButton">クリックしてね</button>
/* CSS：ボタンの見た目を整える */
#myButton {
background-color: #4CAF50; /* 緑色の背景 */
color: white; /* 文字色は白 */
padding: 10px 20px; /* 内側の余白 */
border-radius: 4px; /* 角を少し丸くする */
}
// JavaScript：ボタンがクリックされたときの“動き”を決める
const button = document.getElementById("myButton");
// ボタンがクリックされたら、メッセージを表示する
button.addEventListener("click", () => {
alert("ボタンがクリックされました！");
});
- HTMLは「ボタンがここにあります」と宣言しているだけ。
- CSSは「そのボタンをこういう見た目にしましょう」と装飾しているだけ。
- JavaScriptは「クリックされたらこういうことをしましょう」と動きを決めているだけ。
この3つが組み合わさることで、はじめて“ちゃんとしたボタン”になります。
Reactは、この「HTML＋CSS＋JavaScript」の組み合わせを、 コンポーネントという単位でまとめて扱いやすくするライブラリだとイメージすると、つながりが見えてきます。
Reactで何ができるか：具体的なイメージを持つ
Reactが得意なこと
Reactは、特に次のような場面で力を発揮します。
- 画面の一部だけを素早く更新したいとき 例：チャットアプリ、リアルタイムで更新されるダッシュボード、検索結果の絞り込みなど。
- 同じパーツを何度も使い回したいとき 例：商品カード、ユーザープロフィールカード、共通のヘッダーやフッターなど。
- 状態が複雑な画面を整理したいとき 例：ログイン状態、読み込み中、エラー表示、フォームの入力内容などをまとめて管理したい場合。
ほんの少しだけ「Reactらしいコード」を見てみる
以下は、Reactで「カウンター」を作る超シンプルな例です。
// Reactの機能を使うために、必要なものをインポートします
import { useState } from "react";
// Counterという名前のコンポーネントを定義します
function Counter() {
// countという“状態”を定義し、初期値を0にします
// setCountは、countを更新するための関数です
const [count, setCount] = useState(0);
// コンポーネントが画面に表示する内容を返します
return (
<div>
{/* 現在のカウントを表示します */}
<p>現在のカウント：{count}</p>
{/* ボタンを押すと、カウントが1増えます */}
<button onClick={() => setCount(count + 1)}>
1増やす
</button>
</div>
);
}
// 他のファイルからこのコンポーネントを使えるようにします
export default Counter;
ここで重要なのは、「JavaScriptのコードの中に、HTMLっぽい見た目が混ざっている」という点です。
- useState(0)：Reactが用意している「状態管理」の仕組みです。
- {count}：JSXの中で
{}を使うと、JavaScriptの値を表示できます。 - onClick={() => setCount(count + 1)}：ボタンがクリックされたときの処理を、JavaScriptの関数として書いています。
「見た目」と「動き」が、コンポーネントの中に一体化している—— これがReactの大きな特徴です。
コンポーネントという考え方：画面を「部品」として分解する
コンポーネントとは何か
コンポーネントとは、画面の一部分をひとつの“部品”としてまとめたものです。
- ボタンコンポーネント
- ナビゲーションバーコンポーネント
- 商品カードコンポーネント
- ページ全体コンポーネント
など、粒度は小さくても大きくても構いません。
重要なのは、「ひとつのコンポーネントが、見た目＋動き＋必要なデータをまとめて持っている」という点です。
コンポーネント指向のメリット
- 考える範囲が小さくなる 「このコンポーネントは何をする部品なのか？」だけに集中できるので、頭の中が整理しやすくなります。
- 再利用しやすい 一度作ったコンポーネントを、別のページや別の場所でもそのまま使い回せます。
- 変更に強い あるコンポーネントの見た目や動きを変えても、他のコンポーネントには影響しにくくなります。
コンポーネントのイメージ例：プロフィールカード
Reactで「プロフィールカード」をコンポーネントとして作ると、こんなイメージになります。
// ProfileCardコンポーネントは、ユーザーの名前と自己紹介を表示する“部品”です
function ProfileCard(props) {
// propsには、コンポーネントの外から渡されたデータが入っています
const { name, bio } = props;
return (
<div className="profile-card">
{/* ユーザー名を表示 */}
<h2>{name}</h2>
{/* 自己紹介文を表示 */}
<p>{bio}</p>
</div>
);
}
// このコンポーネントを使う側のイメージ
function App() {
return (
<div>
<ProfileCard
name="山田太郎"
bio="フロントエンドエンジニアを目指して勉強中です。Reactが大好きです。"
/>
<ProfileCard
name="佐藤花子"
bio="デザインとコーディングの両方に興味があります。"
/>
</div>
);
}
- ProfileCardは「プロフィールカード」という部品を表すコンポーネント。
- name / bioは、コンポーネントの外から渡される「データ」（props）です。
- 同じコンポーネントを、違うデータで何度も使い回せるのがポイントです。
「HTMLタグのように見えるけれど、中身はJavaScriptの関数」 この二重構造に慣れてくると、Reactのコンポーネント指向がとても心地よく感じられるはずです。
Day 1のまとめ：Reactは「JavaScriptの上に乗ったコンポーネントの世界」
ここまでの内容を、Day 1のゴールとして整理しておきます。
- JavaScriptとは Webページに「動き」や「考える力」を与えるプログラミング言語。
- ライブラリとは よく使う処理をまとめた「便利な道具箱」。ReactはUIを作るためのライブラリ。
- Reactとは ユーザーインターフェースを「コンポーネント」という部品として組み立てるためのJavaScriptライブラリ。
- HTML / CSS / JavaScriptの役割
- HTML：構造
- CSS：見た目
- JavaScript：動き この3つが合わさって、はじめて“ちゃんとしたWebページ”になる。
- Reactで何ができるか 画面の一部だけを素早く更新したり、同じ部品を再利用したり、複雑な状態を整理したりできる。
- コンポーネントという考え方 画面を「部品」として分解し、見た目＋動き＋データをひとまとめにして扱う。
「JavaScriptの上にReactが乗っている」 このイメージだけ、今日はしっかり持ち帰ってもらえれば十分です。
