JavascriptでWEBアプリ構築 入門

Javascript

今までPythonのライブラリを使ってWEBアプリを作ってきましたが、フロントエンドはJavascriptでももちろん書けます

有名なのはReactやNext.jsですが、今回はReactを使ってWEBアプリを作ろうと思います

JavaScriptのWebアプリを学ぶなら、まずReactを理解してからNext.jsに進むのがベストです

1. ReactとNext.jsの関係

  • React
    • UI（ユーザーインターフェース）を作るためのライブラリ。
    • コンポーネント単位で再利用可能なUIを作れる。
    • 単独でもSPA（シングルページアプリ）を作れる。
  • Next.js
    • Reactの上に作られたフレームワーク。
    • SSR（サーバーサイドレンダリング）やSSG（静的サイト生成）が簡単にできる。
    • ルーティングやAPIルートなど、Webアプリに必要な機能があらかじめ用意されている。

2. Reactから学ぶメリット

  • Reactの基本コンセプト（コンポーネント、状態管理、イベント処理など）はNext.jsでもそのまま使う。
  • Reactを理解していないと、Next.jsの便利機能（SSRやAPIルート）が逆に複雑に感じる。
  • Reactだけで学ぶと、単純なSPAから始められ、段階的にWebアプリ開発を学べる。

3. 学習する項目、順番

  1. Reactの基本
    • コンポーネント、props、state、イベントハンドリング
    • 条件レンダリング、リストレンダリング
    • useEffectなどのフック
  2. Reactで簡単なSPAを作る
    • ToDoアプリ、カウンター、天気アプリなど
  3. Next.jsに進む
    • ページルーティング（ファイルベースルーティング）
    • SSR、SSGの仕組み
    • APIルートで簡単なバックエンド処理

4. Reactの基本

1. Reactとは？

  • UIを作るためのJavaScriptライブラリ
  • 「コンポーネント」という部品を組み合わせて画面を作る
  • 状態（state）やデータの変化に応じて、自動で画面が更新される

2. コンポーネント（Component）

Reactでは画面を小さな部品に分けて作ります。
コンポーネントは 関数 で書くのが基本です。

// MyButton というコンポーネント
function MyButton() {
  return <button>クリックしてね</button>;
}

// 他のコンポーネントから呼び出す
function App() {
  return (
    <div>
      <h1>Hello React!</h1>
      <MyButton />
    </div>
  );
}

export default App;

<MyButton /> のようにHTMLタグっぽく書いて使えるのが特徴です。

3. props（プロップス）

  • 親コンポーネントから子コンポーネントに 値を渡す仕組み
  • コンポーネントを「再利用可能」にするために使います。
function Greeting(props) {
  return <h2>こんにちは、{props.name} さん！</h2>;
}

function App() {
  return (
    <div>
      <Greeting name="太郎" />
      <Greeting name="花子" />
    </div>
  );
}

props.name に渡された値が表示されます。
（太郎と花子で違う表示になる）

4. state（ステート）

  • コンポーネントが持つ「内部のデータ」
  • データが変わると、自動で画面が再描画される
import { useState } from "react";

function Counter() {
  // count という状態を 0 で初期化
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>現在のカウント: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1する</button>
    </div>
  );
}

export default Counter;

useState フックで状態を管理
setCount を呼ぶと画面が更新される

5. イベント処理

  • HTMLのイベント（onClick, onChangeなど）をReactで扱える
function ClickExample() {
  function handleClick() {
    alert("ボタンがクリックされました！");
  }

  return <button onClick={handleClick}>クリックしてね</button>;
}

👉 onClick={関数} のように書く

6. useEffect（副作用フック）

  • APIを呼び出したり、DOM操作したい時に使う
import { useState, useEffect } from "react";

function Timer() {
  const [time, setTime] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setTime((t) => t + 1), 1000);
    return () => clearInterval(id); // コンポーネント破棄時に停止
  }, []);

  return <p>経過時間: {time}秒</p>;
}

5. React基礎のまとめ

  1. コンポーネント … UIの部品を関数で作る
  2. props … 親から子へ値を渡す
  3. state … 内部のデータを管理（useState）
  4. イベント処理 … ユーザーの操作に応じて動作
  5. useEffect … 副作用（API呼び出しやタイマーなど）

次回の記事で、まずは「カウンターアプリ」を作ってみようと思います

実際にコードを書いてReactの基礎を覚えていきます

コメント