Web開発超入門:HTML・CSS・JavaScriptからReactまで、非エンジニアが学んだこと

  • URLをコピーしました!

非エンジニアの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>

ボタンをクリックすると、「こんにちは!」というアラートが出てきます。

実際の流れ

  1. HTMLでボタンを作る
  2. 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ページを「再利用しやすく」「分かりやすく」「動きやすく」作ることができます。

最初は本当に複雑に感じますが、少しずつ理解していけば、意外と面白いものです。同じように学習中の方も、焦らずに一歩ずつ進んでいきましょう!

よかったらシェアしてね!
  • URLをコピーしました!
目次