IPFactory Advent Calendar 2025

IPFactory

Next.js, React, TypeScriptってなーに？？

Last updated at 2025-12-21Posted at 2025-12-21

はじめに

こんにちわ。ryotaKFCです。現在情報系の学校に通っている1年生です。

友達にNext.jsについて解説するついでに記事書きました。
Next.js, React, TypeScriptについて、初心者が初心者のために概要だけふわっと解説する記事です

裏側の仕組みや細かいことは一旦隠蔽してるので、多少変なとこがあるかも知れませんがご了承ください

ターゲットはHTML, CSS, JavaScriptを学び終えたぐらいの方を想定しています

前提知識

HTML
CSS
JavaScript
変数の型

この記事を読めばわかること

TypeScript の基本知識（型, 基本構文について）
React の基本知識（コンポーネント, State, JSX）
Next.js の基本知識（サーバ、クライアントコンポーネント）

※Next.jsはAppRouter前提で書いてあります

(1/5) TypeScriptとは

「JavaScript、動くけど怖い...」
そう思う人のために生まれたのがTypeScriptです
大雑把に言うと、JavaScriptを安全にしたのがTypeScriptぐらいの認識で大丈夫です

JavaScriptに型などを書けるようにしただけで、中身はJavaScript
型があるので、変数を安全に扱える
JavaScriptと互換性のある拡張言語
- JavaScriptのコードをそのまま扱うこともできる
  - DSのソフトも遊べる3DSみたいな感じ

JavaScriptの怖い点

webだけでなく、色々なところで使われているJavaScriptですが、JavaScriptには型がありません。
そのせいで、実際にJavaScriptを使っていくと、以下のような不満がでてきます。

変数に何でも入れられるせいで、変数内の値が予測困難
そのせいで、エディターの予測変換が機能しないことも多い
実行してからエラーになることが多い

TypeScriptは、これらの不満を改善するために型やジェネリクス等の機能を追加した、JavaScriptを拡張した拡張言語です。
最終的にはただのJavaScriptへ変換されます

エディター上で型チェックができてエラーに気づきやすい

予測変換もでてくる

なんでJavaScriptを拡張したの？
新しくwebの言語を新しく作るということは、プログラマー、ブラウザもその言語に対応する必要がありとても大変だから
また、既存の言語を使い回すことで以下のようなメリットがある。

学習が容易: JavaScriptの知識を活かせる
移行が容易: JavaScriptからTypeScriptへの移行が容易
ライブラリが豊富: JavaScriptで作られた大量のライブラリ(関数等)をTypeScriptでもそのまま使い回せる

TypeScript基本構文

型の指定方法は、基本的に変数名(hoge)のあと型を記述するだけです。
下の例ではhogeはstring型となります

// 変数hogeをstrng型として宣言
const hoge: string = "Hello, world!";

console.log(hoge);

// 引数gehoはstring（文字列）として設定
// 関数の返り値はboolean（true か false）として設定
function isApple(geho: string): boolean {
    if(geho === "りんご") {
        return true;
    }
    return false;
}

このように型を決めることで、hogeやgeho変数に不正な値が入った場合、その場でエラーが起こり実行時エラーを事前に防ぐことができます。

ただし最終的にはただのJavaScriptへ変換されるのでブラウザで動く時には、これらの型は消えてなくなります

TypeScriptの概要だけを解説するとこんな感じです。
他にもTypeScriptでは必須の機能やいろんな型があるので、サバイバルTypeScriptでより深く学ぶことをおすすめします！

(2/5) Reactとは

UIを作るのを楽にしてくれるJavaScriptのライブラリです
もちろん、素のJavaScriptだけでも十分UIを作ることはできますが、動きのあるUIや複雑なUIを作ろうとなると、

UIの状態管理が難しい（変数をたくさん使う）
記述が膨大になり、可読性が落ちる（読みづらくなる）
HTML, CSS, JavaScriptで記述場所が分かれていてだるい
UI 1つを変えたくても、いろんなファイルを横断することになる

というのが課題になってきます。
Reactではコンポーネント化やState、JSXなどによって、それらの課題を解決します。

素のHTML, CSS, JavaScriptイメージ

Reactイメージ

コンポーネント化

素のJavaScriptの課題として上げていた

記述が膨大になり、可読性が落ちる（読みづらくなる）

HTML, CSS, JavaScriptで記述場所が分かれていてだるい

UI 1つを変えたくても、いろんなファイルを横断することになる

これらを解決してくれるのがコンポーネント化です

コンポーネント化とは、UIの機能や見た目(HTML,CSS,JavaScript)を一箇所に集約させて、部品化していくことです。

例えば、ボタン、入力欄、フォーム、サイトのロゴ、ページ...のように小さいものから大きいものまで部品化（コンポーネント化）します。

コンポーネント化をしていくことで以下のような恩恵が得られます

再利用がしやすい
- ヘッダーやサイトロゴみたいなコンポーネントを作って何度も使い回すことが可能
開発がしやすい
- 大きなサイトでも、レゴブロックのようにコンポーネントを組み合わせるだけでUIを構築できる
修正が容易になる
- とあるUIにバグが見つかってもその部品のファイルだけを変えれば、すべての箇所に修正が反映される
- どのファイルに何が書いてあるのか
コードが見やすくなる
- コンポーネント化していくことで、1ファイルあたりの行数が減り見やすくなる
- どのファイルに何が書いてあるのか一目でわかる

コンポーネント化のイメージ

Reactの基本構文（JSX）

では、実際にどうやって書いていくかの話です。Reactでは、JSXを用いて記述していきます。
JSXとはJavaScriptのコードの中にHTMLのようなコードを直接書き込めるようにした拡張構文です。

例として、ログインボタンというUIを実装する場合のReactと素のHTML, CSS, JavaScriptの記述の違いを見ていきます。

まず、素のHTML, CSS, JavaScriptでの記述を見ていきます。

[.htmlファイル]
<button id="login-button">
    ログインする
</button>

[.cssファイル]

// ボタンの見た目を変更
#login-button {
    background-color: #000000;
}

// ボタンホバー時、カーソル変化
#login-button:hover {
    cursor: pointer; 
}

[.jsファイル]

// ログインボタンを取得
const loginButton = document.getElementById("login-button")
// ...ボタンが押されたときの処理を記述...

このように、たった1つのログインボタンというUIを実装するだけなのに、書いてる場所(ファイル)がバラバラで1つのUIの実装、修正が難しそうです。

一方、Reactでは以下のように書きます

[.tsxファイル]
export function LoginButton() { // コンポーネント名(関数)は必ず先頭大文字
    function onClickLoginButton() {
        //...ボタンが押されたときの処理を記述...
    }
    return (
        <button 
            className="bg-#000000 hover:cursor-pointer"
            onClick={onClickLoginButton} >
            ログインする
        </button>
    )
}

return文の中にHTML風な記述方法を可能にすることで、読みやすさや書きやすさが向上します。

このようにReactでは、JSXを用いた記述により1つのUIとそれに関わる処理、CSS、HTMLを一箇所に集約させ、あとから修正しやすいかつ見やすい形で開発を進めていくことが可能です。

JSXではreturnの中にHTML風のタグやコンポーネントを書いていきます。

コンポーネントは必ず先頭大文字
classじゃなくてclassNameなの注意！
return内の外側のタグは1つのタグにする必要あり！

export function Page() {
    return (
        <main className="login-button" id="login-button">
            // コンポーネントは必ず先頭大文字
            <LoginButton />
        </main>
    )
}

(3/5) Next.jsに入る前に...

Next.jsについて知る前に、まずはwebの仕組みについて少し知る必要があります。
Webにはページを生成する場所が２つあります。サーバー側とクライアント（ブラウザ）側です
いわゆるバックエンド、フロントエンドと言われているこの２つの違いは

バックエンド（サーバーサイド）

サーバー側で実行される
データベースなどにアクセスしてデータのやり取りができる
フロント（ブラウザ）側から直接中身が見られることはない（セキュリティ◎）

フロントエンド（クライアントサイド）

クライアント(ブラウザ)側で実行される
クライアントでページ生成、JavaScriptを動かす
ブラウザからコードや処理が見えてしまう

web技術は本来このように、明確に領域が分かれており、バックエンドとフロントエンドでそもそもの言語や書き方が全く異なっていました。

しかし、Next.jsはフロントだけでなくバックでもReactで書くことができ、領域の壁を超えて型の使いまわしや同じ書き心地で開発することが可能です

(4/5) Next.jsとは

Next.jsとは、webアプリケーションを作るための便利機能がたくさん詰まった枠組み（フレームワーク）です。
ReactはあくまでUIに関しての技術なので、web公開に必須な仕事は、全部Next.jsが担当します。
具体的には以下のような機能、メリットがあります。

ルーティング機能
- 規定の場所(appフォルダ内)にpage.tsxという名前のファイルを置くだけで、その名前のURLを自動生成してくれる
面倒な設定周り
- webを作るにあたり、必須だけども複雑な設定周りをNextが自動でやってくれ、開発者は作ることに集中できます
パフォーマンスの向上
- 画像、コードの最適化により、無駄な通信を抑えたりページの表示を高速化します

サーバーとクライアントの境界線

Next.jsでは、先頭行にとある記述をすることで、そのコンポーネントがサーバ側で扱うかクライアント側で扱うかを決めます

先頭行	呼び方	役割	実行場所
（なし）	Server Component	基本（表示）。データ取得や重い処理	サーバーのみ
`"use client"`	Client Component	動き担当。クリックやフォーム入力	サーバー＋ブラウザ
`"use server"`	Server Action	保存担当。 DBの書き換えなどの「関数」	サーバーのみ

※Client Componentも実は最初はサーバーでHTML生成されてからブラウザに届く（SSR）

サーバーアクションについて
"use server"はサーバーコンポーネントではなく関数で使うことに注意してください
データの更新など、「クライアント側からでも使いたいサーバーの関数」の先頭行に宣言するものです
React固有の機能を使うことは少ないので、.tsxファイルではなく、.tsファイルで作られることが多いです

最初はどのコンポーネントを"use client"とするべきか分かりづらいかも知れませんが、
「基本はサーバー側で、動きが必要なところだけクライアントに任せる」というのがNext.jsの鉄則です

イメージ図

(5/5) まとめ

TypeScriptはJavaScriptに型を追加した拡張言語
ReactはUIをより楽に実装できるJavaScriptのライブラリ
Next.jsは、Reactをサーバーとブラウザで賢く使い分けてくれる枠組み

以上、ふわっとした解説でした
この記事のほとんどがサバイバルTypeScriptを参考にしてます
初心者でもとってもわかりやすく、具体的なことも教えてくれるので、次はぜひサバイバルTypeScriptで学んでください！

サバイバルTS：TypeScriptとは？
サバイバルTS：Reactでいいねボタンを作ろう
サバイバルTS：Next.jsで猫画像ジェネレーターを作ろう

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up