非エンジニアのRyoです。
また新しいことを学んだのですが、最初は本当に意味が分からなかったです。専門用語だらけで頭がパンクしそうになりましたが、少しずつ理解できるようになってきました。同じように「コードって何？」状態の方にシェアしてみます。
そもそもWebページってどうやってできてるの？
Webページは、実は3つの技術でできています。
Webページは「お弁当箱」みたいなもの
HTMLは「お弁当の仕切り」…ごはん・おかず・漬物をどこに入れるかを決める
CSSは「彩り・飾りつけ」…おかずをカラフルなカップに入れて、おしゃれに見せる
JavaScriptは「しかけ」…ふたを開けると、キャラクターが飛び出してくるサプライズ！
つまり：
- HTML：ページの骨組み
- CSS：デザイン・見た目
- JavaScript：動きをつける
HTML（ページの骨組み）を理解しよう
最低限のHTML構造
<!DOCTYPE html>
<html>
<head>
<title>はじめてのページ</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これは初めてのHTMLです。</p>
</body>
</html>これが「最小限のWebページ」です。
要素の意味
<!DOCTYPE html>：HTMLですよと宣言<html>：ページ全体<head>：ページの情報（裏方）<title>：タブに表示されるタイトル<body>：画面に見える部分<h1>：一番大きな見出し<p>：段落（paragraph）
CSS（見た目・色・形）でデザインしよう
CSSは「見た目を美しくするシールやリボン」のようなものです。
書き方例
h1 {
color: blue;
font-size: 32px;
text-align: center;
}これを<head>の中に入れれば、h1の見出しが青く、大きく、中央揃えになります。
JavaScript（動き・しかけ）でインタラクティブに
JavaScriptは「ページに命を吹き込む魔法」です。
例：ボタンを押したらメッセージが出る
<button onclick="alert('こんにちは！')">押してね</button>ボタンをクリックすると、「こんにちは！」というアラートが出てきます。
実際の流れ
- HTMLでボタンを作る
- JavaScriptで”押したとき”の動きを決める
React入門：Webページを「レゴブロック」で作る
Reactは、Webページを「部品の組み合わせ」で作るための道具です。
Reactってなに？
昔のWebページは、全部1枚のHTMLで作っていました。
でも、今は違います。
Reactでは、小さな部品（＝コンポーネント）を組み合わせて、大きなページを作っていく。
- 「見出しパーツ」
- 「ボタンパーツ」
- 「リストパーツ」
など、1つ1つの部品を分けて作れるのが、Reactの最大の特徴です。
コンポーネントとは？
コンポーネントとは「自分で作れるタグ」のことです。
書き方例
function Hello() {
return <h1>こんにちは、React！</h1>;
}この「Hello」という関数が「コンポーネント」です。
使うときはこうです：
<Hello />つまり、HTMLに似た見た目で、自分だけのパーツを作れるのです！
Props（外からの情報を受け取る）
コンポーネントは「外から情報をもらう」ことができます。
その情報のことを「Props（プロップス）」といいます。
例：名前を受け取ってあいさつする
function Hello(props) {
return <h1>こんにちは、{props.name}さん！</h1>;
}
<Hello name="ゆうこ" />このように、<Hello name="ゆうこ" />と書くと、props.nameが「ゆうこ」になります。
State（中の情報を変える）
State（ステート）は「コンポーネントの中の変わる情報」です。
たとえば、「ボタンを押すとカウントが増える」というアプリなら、カウントの数字は状態（state）です。
例：カウントアプリ
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>カウント: {count}</p>
<button onClick={() => setCount(count + 1)}>+1</button>
</div>
);
}useState(0)は「最初は0」setCount(count + 1)は「ボタンを押すと1増やす」
まとめ
| 用語 | 意味 | たとえ |
|---|---|---|
| コンポーネント | 自分で作れるHTMLの部品 | レゴブロック |
| Props | 外から受け取る情報 | 名前シール |
| State | 中で変わる情報 | カウンターの数字 |
Reactを使うと、Webページを「再利用しやすく」「分かりやすく」「動きやすく」作ることができます。
最初は本当に複雑に感じますが、少しずつ理解していけば、意外と面白いものです。同じように学習中の方も、焦らずに一歩ずつ進んでいきましょう！
