非エンジニアの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ページを「再利用しやすく」「分かりやすく」「動きやすく」作ることができます。
最初は本当に複雑に感じますが、少しずつ理解していけば、意外と面白いものです。同じように学習中の方も、焦らずに一歩ずつ進んでいきましょう!