# monotein

> React・Next.js・TypeScriptなど、フロントエンド開発を中心とした技術書の著者・三好アキ(Aki Miyoshi)による技術情報サイトです。React・Next.js・TypeScript・Node.jsの入門書を30冊以上執筆し、Amazonベストセラー1位を複数回獲得。プログラミング入門から実践的なウェブアプリ開発まで、日本語で丁寧に解説しています。

このファイルは全ブログ記事の本文を含む完全版です。目次のみの版は https://monotein.com/llms.txt を参照してください。

---

# 📌 自己紹介（三好アキについて）

URL: https://monotein.com/blog/self-introduction
公開日: 2026.5.15
概要: Amazonベストセラー著者・三好アキの自己紹介です。非IT系出身という経験から生まれた「専門用語なしで教える」スタイルと、教材制作への思いを語ります。

## 自己紹介
こんにちは、【専門用語なしでプログラミング】を教えている三好アキです。

私はReactやNext.jsなどのフロントエンド開発ツールを中心に、教材制作、書籍執筆、法人向け研修の仕事をしています。

2020年4月に事業を始めてもう6年以上経っていますが、初めて自己紹介の記事を書きます。

---

私のバックグランドは非IT系です。

大学の専攻も、卒業後の進路も、まったくITには関わりのない分野です。

そういう中で、私がプログラミングを学び始めて苦しんだのは、コード自体ではありません。

言葉でした。

---

• オブジェクト\
• メソッド\
• ファンクション\
• プロパティ\
• インスタンス\
• 戻り値

---

私は海外に長年いたので英語は抵抗なく使えますが、それでもこういったカタカナを含むプログラミングの専門用語が理解できませんでした（英語については<a target="_blank" rel="noopener" href="/blog/english-and-programming-study">こちら</a>）。

しかし、こういう専門用語に何度もつまずいた経験があるからこそ、「専門用語なしでプログラミングを教える」ということが大きな軸になっています（プログラミングを始めた理由は<a target="_blank" rel="noopener" href="/blog/why-i-chose-js">こちら</a>）。

たかが言葉、されど言葉です。

言葉は大きな影響力を持っています。

• 知らない言葉\
• 意味がつかめない言葉\
• なじみのない言葉

これらが文章の中にひとつあるだけで、私たちはつまずき、心を閉ざし、内容が頭に入ってこなくなります。

---

「正しくあること」は重要です。

特にプログラミングという情報セキュリティにも大きく関わる分野では、正確性が重要であることは論をまちません。

しかし、「正しさ」と「分かりやすさ」はしばしば相反するものです。

そのような時、プログラミングを学び始めたばかりのビギナーにとって大事なことはどちらか。

私は「分かりやすさ」であると考えます。

まずは分かってもらう。\
まずは馴染んでもらう。\
そして、「自分にもできるかも」という小さな自信をつかんでもらう。

正確性を追求するのは、その後でも遅くありません。

---

私はアプリ開発を「ものづくり」だと考えています。

そして「ものづくり」はとても楽しいことです。

自分の手でひとつひとつ作り上げ、そしてようやく完成させたときの喜びに勝るものはありません。

そして「自分にできた！」という感覚は、自分への信頼を高めてくれます。

人生をもっと楽しくしてくれます。

しかしこういうところへと至るまでには、いくつもの壁があります。

ひとつは教材の壁です。

多くのプログラミング教材は、<a target="_blank" rel="noopener" href="/blog/reasons-for-avoiding-comprehensiveness">網羅性を重視した知識の羅列</a>になっていたり、「正しさ」にこだわりすぎてスムーズに進められない構成になっています。

ビギナーが非常に失敗しやすい作りになっているのです。

私自身、かつてそういう教材を使って挫折しました（詳しくは<a target="_blank" rel="noopener" href="/blog/overcoming-js-to-react-1">こちら</a>）。

ビギナーにとって大事なことは、最初から完璧に理解することではありません。

「自分にもできた！」という「小さな成功体験」をできるだけ早く作ることです。

成功とはどんなに小さくても嬉しいものです。

そして一度味わうと、病みつきになります。

小さな成功体験があると、「もっと知りたい！」「もっと学びたい！」と、自発的に勉強を進めていくことができるのです。

「新しいことを知ること」

つまり、

「昨日はできなかったことが、今日はできるようになっていること」

これは人生で味わえる喜びの中でも、最大のものの一つでしょう。

（「小さな成功体験」についての私の考えは<a target="_blank" rel="noopener" href="/blog/difference-knowing-and-doing">こちら</a>）

---

そして私が「専門用語なしでプログラミング」というテーマを掲げている理由。

「言葉」というものに気付かぬうちにつまずいているビギナーが、実はたくさんいるからです。

「オブジェクト」や「連想配列」や「メソッド」といったプログラミング特有の言葉。

これらの言葉のせいで、先ほど触れた通り、私自身がプログラミングにとっつきにくさを覚え、まったく先に進めませんでした。

そしてこれは実は私だけでなく、他の多くのIT系のバックグランドをもっていないビギナーに共通するものだったのです。

しかしその言葉を超えていけば、楽しさを味わえます。

人生を充実したものに変えてくれる「楽しさ」です。

そういう気持ちを多くのビギナーに味わってもらいたいと思っています。

### このサイトでまず読んでほしい記事
「専門用語なしでプログラミング」という考え方で、6年以上ブログを書いてきました。

ReactやNext.jsの学習に必要な内容は、テーマごとに次の6つの記事にまとめています。

興味のあるものから読んでみてください。

---

• <a target="_blank" rel="noopener" href="/blog/guide-react-vite">【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説</a>

• <a target="_blank" rel="noopener" href="/blog/guide-react-is-difficult-and-how-to-overcome">【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説</a>

• <a target="_blank" rel="noopener" href="/blog/guide-typescript-for-react-programmers">【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説</a>

• <a target="_blank" rel="noopener" href="/blog/guide-rsc-and-react19">【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解</a>

• <a target="_blank" rel="noopener" href="/blog/guide-react-learning-roadmap">【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説</a>

• <a href="/blog/guide-nextjs">【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説</a>

---

また「専門用語なしでプログラミング」というテーマで、私はこれまでにReact／Next.js／TypeScriptなどの教材を制作してきました。

ありがたいことに何度もAmazonベストセラーになった本もあり、個人の学習者だけでなく、企業やチームの研修でも教材を使っていただいています。

翔泳社から出ている『[動かして学ぶ！Next.js/React開発入門](https://www.shoeisha.co.jp/book/detail/9784798184678)』は、2025年に韓国でも翻訳・販売されました。

![image](../../images/singleBlogPageImages/blogArticleImages/blog155/example-book.jpg)

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog171/korean-ver-read.jpg)

</div>

また、Amazonに数多くあるReact書籍の中で、拙著『[はじめてつくるReactアプリ with TypeScript](https://www.amazon.co.jp/dp/B094Z1R281)』がもっとも高い評価の本になっています（レビュー数100以上のReact書籍との比較）。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog247/react-ts-book-no1.jpg)

</div>

その他、プログラミング技術書やブログ記事を6年以上書いており、複数の記事がGoogleランキングで1位になっています。

• 「Next.js React + Vite」関連キーワード Google検索1位 ▼\
（<a target="_blank" rel="noopener" href="/blog/react-vite-or-nextjs-which-to-choose">monotein.com/blog/react-vite-or-nextjs-which-to-choose</a>）

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog247/which-react-next.jpg)

</div>

（この辺りのことについて、<a target="_blank" rel="noopener" href="/blog/my-technical-writing-service">こちらの記事</a>で詳しく触れています）

とはいえ、それなりの期間執筆をしていると、「その本はどれだけの間読まれるのか／読めるのか」といった「本の賞味期限」について考えます。

詳しくは下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/writing-practical-books-and-its-emptiness" target="_blank" rel="noopener">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-150.png)

</div>
<div class="r-card-text">
腐る本を書きつづける空虚感 ― 賞味期限の長い本と、賞味期限の短い本
</div>
</div>
</a>
</div>

<br/>

個人的な話では、私は海外（イギリスやポーランドなど）で暮らしていた期間が長く、今も一年の半分近くは海外にいます。

海外クライアントの案件に関わってきた経験から、日本語ではまだ情報の少ない新しい技術やツールの情報を、日本の学習者や現場に分かりやすく届けることも心がけています。

なお、本サイトも私が開発しています。使っている技術や移行の経緯は<a target="_blank" rel="noopener" href="/blog/astro-migrate-from-gatsby">こちらの記事</a>に書いています。

本ウェブサイトやメルマガ、noteでは、フロントエンド開発の最新情報や学び方の話をしているので、ぜひご覧ください。

【メルマガ】
[monotein.com/register-newsletter](https://monotein.com/register-newsletter)

【Amazon著者ページ】
[amazon.co.jp/stores/author/B099Z51QF2](https://www.amazon.co.jp/stores/author/B099Z51QF2)

【note】
[note.com/monotein](https://note.com/monotein)

## 私が一番力を入れている教材
これまでにReactやNext.jsについて数多くの記事や本を書いてきました。

その集大成として制作したのが、「Reactマスター」と「TypeScriptマスター」です。

教材を作った理由やリリースから2年間の歩み、利用者の声などについては、下記の記事にまとめています。

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

<br/>

「React × TypeScriptマスター」についてより詳しく知りたい方は、下記画像の下部にリンクがあります。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/self-introduction">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/self-introduction)

---

# GatsbyからAstro（バージョン7）へ移行しました

URL: https://monotein.com/blog/astro-migrate-from-gatsby
公開日: 2026.7.2
更新日: 2026.7.20
概要: 本サイトをGatsbyからAstro（バージョン7）へ移行しました。GraphQLをやめてContent Collectionsに置き換えた話、画像コンポーネントの移行でつまずいた話、View Transitionsを入れて外した話、Netlifyのbuild時間が4分半から20秒になった話など、移行で実際に手を加えたことをまとめています。

## GatsbyからAstroに移行
先日、本サイトをGatsbyからAstroに移行しました。

バージョンは、6月にリリースされたばかりのAstroバージョン7です。

Lighthouseの「Performance」スコアが「100」になるなど、スピードが大きく上がりました。

![astro-lighthouse-score.jpg](../../images/singleBlogPageImages/blogArticleImages/blog261/astro-lighthouse-score.jpg)

日本ではAstroを使っている人がまだ少ないので、少し今回のAstro移行の話を書いていきます。

## Gatsbyとの6年間
本サイトでは、事業を立ち上げた2020年からずっとGatsbyを使っていました。

その時のバージョンはv2です。

いま過去のブログを読み返してみると、「[Gatsbyのバージョンを2から3に上げた](/blog/gatsby-v3-upgrade)」、そして「[3から4に上げた](/blog/gatsby-v4-upgrade)」という記事がそれぞれあります。

3から4に上げたのが2021年11月なので、5年近く何もしていなかったようです。

しかしこのGatsby、2022年リリースのバージョン5で開発が止まっています。

そのため「このままGatsbyを使い続ける」という選択肢はなく、「移行しないといけないな」とはここ数年ずっと思っていました。

が、そこまで強いモチベーションがなかったのも事実。

Gatsbyでも、そこまで危機的に困っていることはありませんでした。

「自サイトの刷新は優先順位が低い」という、よくある話です。

---

困り事を挙げるとすれば.......

• 6年以上運用している中で、内部のコードがスパゲッティ化していたこと

• サイトデザインが一部古くなっていたこと

• Hot reloadの動きが不安定なこと

• ターミナルに依存関係のエラーが出ること

そして、buildに時間がかかること

---

Gatsbyに個人的な思い入れがあったことも、移行を先延ばししていた間接的な理由だったかもしれません。

初めてGatsbyを触ったとき、ページ遷移のあのスピードには感動しました。

今でも印象深く残っています。

些細なことですが、些細なことが記憶には強く残るものです。

それでも、サイト内のブログ記事を大きく整理したことをきっかけに、Astroへの移行もすることにしました。

## Claude Codeで移行
移行作業の大部分で使ったのがClaude Codeです。

とはいえ、丸投げではなく、まずAstroのv7のドキュメントをClaude Codeに読み込ませ、出てきたコードをチェックしながら進める、という流れです。

私は以前Astroを使っていたことがあるので、Astroの基礎部分は知っていました。

しかし今年3月にv6が出て、それにキャッチアップする間もなく6月にv7が出たため、その2つのバージョンで加えられた変更に沿ったコードをClaude Codeに書かせていきました。

---

本サイトは[静的サイト](/blog/what-is-ssg)で、特に複雑なロジックはありません。

ベース部分の移行に1、2時間ほど、その確認・修正に数日、といった感じです。

AIツールで本当に開発の景色は変わったなと思います。

手間と時間が大きく短縮されました。

しかしそれは「調べる」、「コードを書く」というマニュアル作業の部分が大幅に減ったということが大きく、成果物の確認やチェックということには、これまでと同じ、あるいはこれまで以上に時間がかかっていると感じます。

以下、Gatsby → Astro移行について、コードと一緒に少し詳しく見ていきましょう。

## 一番大きく変わったのはデータの扱い方
GatsbyからAstroへの移行で最も大きく変わったのが、データ関係の部分です。

Gatsbyではデータ操作にGraphQLを使っていました。

マークダウンファイルの本文もfrontmatterも、すべてGraphQLのクエリ経由で読み込みます。

例えば全記事のパスと前後記事を取り出すには、`gatsby-node.js`の中で次のようなクエリを書いていました。

```js
// gatsby-node.js（Gatsby時代）

exports.createPages = async ({ actions, graphql }) => {
  const { createPage } = actions
  return await graphql(`
    {
      allMarkdownRemark(
        sort: { fields: [frontmatter___id], order: DESC }
        limit: 1000
      ) {
        edges {
          node {
            fields { slug }
            frontmatter { categoryTagJP categoryTagEN }
          }
          next { frontmatter { path title } }
          previous { frontmatter { path title } }
        }
      }
    }
  `).then((res) => {
    // ここで createPage を呼んでページを作る
  })
}
```

GraphQLは便利ではありますが、frontmatterに項目を1つ足すたび、クエリにも同じ項目を書き足さないといけません。

それを忘れると、データが取れずエラーになります。

`allMarkdownRemark`や`edges`、`node`といったGatsby独特の書き方も、久しぶりに触ると思い出すのに時間がかかります。

AstroではContent Collectionsを使うので、GraphQLはまるごと不要になりました。

Content Collectionsでは、まず記事のfrontmatterがどういう形なのかを`src/content.config.ts`で一度だけ定義します。

```ts
// src/content.config.ts

import { defineCollection, z } from "astro:content"
import { glob } from "astro/loaders"

const blog = defineCollection({
    loader: glob({ pattern: "**/*.md", base: "./src/content/blog" }),
    schema: ({ image }) =>
        z.object({
            id: z.string(),
            path: z.string(),
            title: z.string(),
            categoryTagJP: z.string(),
            categoryTagEN: z.string(),
            // ...以下、必要な項目を並べていく
        }),
})

export const collections = { blog }
```

あとは記事一覧を取り出したいところで、`getCollection("blog")`を呼ぶだけです。

前後記事のリンクも、GraphQLの`next`や`previous`を使わず、取り出した配列を自分でソートして前後を決められます。

```ts
// src/pages/blog/[slug].astro

import { getCollection } from "astro:content"

const posts = await getCollection("blog")

// id順に並べて、前後の記事を決める
const sorted = [...posts].sort(
  (a, b) => Number(a.data.id) - Number(b.data.id)
)
```

frontmatterに項目を足したいときも、`content.config.ts`のスキーマに1行足すだけです。

書き忘れれば型エラーで教えてくれるので、Gatsby時代のように「クエリに書き忘れて動かない」ということも起きません。

この部分はAstro移行でラクになった部分のひとつです。

## つまずいたのはマークダウン内の画像
Astro移行で少し手間がかかったのが、マークダウンファイル内の画像とHTML記法の扱い方です。

Gatsby時代、私は記事の中に下記のような装飾付きのHTMLを直接書いていました。


```html
<a class="amazon-book-card" href="https://www.amazon.co.jp/dp/...">
    <div class="abc-img">
        <img src="../../images/commonImg/react-book-ts-ai.svg" />
    </div>
</a>
```

私の本の表紙画像を、Amazonへのリンクカードとして見せるためのもので、HTML記法で画像を表示しています。

画像は`src`内の`images`フォルダに置き、`<img>`タグの相対パスで読み込んでいました。

Gatsby内のマークダウンファイルでは、この書き方でも正しく表示されます。

一方、Astroではこの書き方が使えません。

Astroで`src`内の画像を使うには、その画像をimportする必要があるからです。

しかしマークダウンファイルで`import`は当然使えません。

ここで`<img src="../../images/...">`のように相対パスで書いても、Astroはビルド時に画像として認識しないため、`src`以下の画像は表示されません。

かといって、HTMLブロックの中に通常のマークダウンファイルの画像表示の記法`![ ](...)`を書いても、画像として表示されないのです（下記コード参照）。

```html
<a class="amazon-book-card" href="https://www.amazon.co.jp/dp/...">
    <div class="abc-img">
        ![Book Cover](../../images/commonImg/react-book-ts-ai.svg)
    </div>
</a>
```

HTMLブロックの中ではマークダウン記法が解釈されないからです。

この解決策はいくつかありました。

---

• 装飾部分をAstroコンポーネントにして記事から呼ぶ

• 独自記法をHTMLへ変換するremarkプラグインを書く

• 記事を`.md`ではなく`.mdx`にする

• 画像を`public`フォルダに移す

---

まず最初の2つの方法は、すぐに選択肢から消えました。

画像にそんな大袈裟なことをしたくないからです。

そして記事は現状の`.md`で管理したいので、MDX化も選択肢から消えます。

最後の`public`フォルダを使う方法。これがもっとも楽です。

しかし少しためらいがあった理由は、画像をすべて`src`配下に入れておきたかったからです。

`public`との2箇所の管理はしたくなかったのです。

しかし考えてみると、マークダウン内でHTMLとともに表示させたい画像は私の本の表紙画像だけで、数にして35個ほど。

そしてそれは今後急激に増えることもない。

さらに画像は全てSVGなので、Astroの画像最適化の恩恵はなくてもいい。

なので、最終的には`public`内に必要な画像を移しました。

`public`内の画像は`<img src="/images/reactbook-ts-ai.svg" />`のように、絶対パスでそのまま読み込めます。

HTMLの装飾もつけられます。

本文で`![ ]()`として使う画像はこれまでどおり`src`に置き、表紙画像のようなHTMLタグと一緒に装飾したい画像だけ`public`に置く、という分け方に着地しました。

## View Transitionsを入れて、外す
Astroには、ページ遷移をなめらかにするView Transitionsという機能があります。

ページ全体を再読み込みせず、必要な部分だけ差し替えて遷移させる機能です。

SPAのようにスムーズに動くようになります。

Gatsbyのあのスピーディなページ遷移が好きだった私としては、View Transitionsはぜひ入れたい機能でした。

なのでAstro移行作業が9割ほど終わったタイミングで、サイト全体に導入しました。

```astro
// src/layouts/Layout.astro

---
import { ClientRouter } from "astro:transitions"
---

<head>
  <ClientRouter />
</head>
```

ところが問題が起こりました。

本サイトにはフォームがいくつかあり、そこではスパム対策にreCAPTCHAを使っています。

View Transitionsは通常のページ再読み込みをしないため、遷移でreCAPTCHAのトークン生成が壊れ、フォーム送信が403エラーになってしまうのです。

「フォームのあるページだけView Transitionsを無効にする」という回避策も考え、一度その仕組みも作りました。

しかし本サイトにはフォームが複数のページにあり、一部の部分が意図通りに動きません。

そこに別の仕組みを当てることも考えましたが、今回の移行の方針として「例外的なコードや機能は使いたくない」というのがありました。

今後長く運用していく中で必ず内部のコードは絡まっていくので、始まりの段階で複雑なことはしたくなかったのです。

なのでView Transitionsの導入は見送りました。

## Deploy時に気をつけたこと
一番気を使ったのは、従来のGatsby版サイトのSEO評価への影響です。

特に注意したのがURL、具体的には末尾のスラッシュ（Trailing Slash）。

Gatsby版では、URL末尾のスラッシュ無しを正規のURL（canonical）としていました。

```shell
• スラッシュなし
https://monotein.com/blog/react-vite-how-to-use

• スラッシュあり
https://monotein.com/blog/react-vite-how-to-use/
```

Astro版でも末尾のスラッシュは消したかったため、`astro.config.mjs`に次のコードを加えました。

```js
trailingSlash: "never",
```

しかしNetlifyでは、このようなフレームワーク側の設定を上書きするようにURLが変更されることがあります。

そのため、「Project configuration」→「Post processing」→「Pretty URLs」にある「Enable Pretty URLs」のチェックを外しています。

<div class="img-border">

![netlify-pretty-urls.jpg](../../images/singleBlogPageImages/blogArticleImages/blog261/netlify-pretty-urls.jpg)

</div>

スラッシュひとつの有無でも、Googleは「異なるURL」と認識してSEOに大きな影響を与えるので、移行時には注意しましょう。

## build時間が4分半から20秒に
ここからは移行して良かったことです。

一番大きいのはbuild時間の短縮。

Gatsby版ではNetlifyでのbuildに4分半かかっていました。

これがAstroに変えてみると20秒ほどになりました。

私のサイトは更新頻度も少ない単なる静的サイトなので、buildに時間がかかっても大きな問題ではなかったのですが、これほど短くなると、サイトを更新する時の妙な抵抗感は無くなります。

Gatsby時代は、記事の誤字脱字の修正といった微調整・微修正をしても、その直後にはbuildをしていませんでした。

そういう小さな修正がいくつか溜まってからbuildをかけていたのです。

しかし今は、どんなに小さな修正でも気楽にbuildをかけられるようになりました。

## 移行のついでに手を入れたこと
大枠の移行が終わったあとも、細かい改善をいくつか続けています。

例えばsitemapに、各記事の最終更新日（`lastmod`）を出すようにしました。

これは`astro.config.mjs`の中で、全記事のfrontmatterから更新日を読み取って組み立てています。

```js
// astro.config.mjs（一部）
// 各記事のfrontmatterから更新日を読み、sitemapのlastmodに使う

const update = raw.match(/^update:\s*"([^"]+)"/m)?.[1]
const date = raw.match(/^date:\s*"([^"]+)"/m)?.[1]
const lastmod = update && update !== "none" ? update : date
```

Gatsbyのプラグインに任せていた部分を、Astroでは自分で書けるので、こうした細かい調整がやりやすくなりました。

また今回の刷新に合わせて、AIO／AI Optimization対策用の`llms.txt`の設置、著書一覧ページの新設（[https://monotein.com/books](/books)）、全ページに構造化データ (JSON-LD)を設置といったことも行なっています。

## おまけ：Prefetchはオンにしましょう
Astroでは、デフォルトでPrefetchがオフになっています。

Prefetchの有無で体感のスピードは大きく変わるので、快適なページ遷移のためにはオンにしておきましょう。

下記のコードでサイト全体でオンになります。

```js
// astro.config.mjs

import { defineConfig } from "astro/config"

export default defineConfig({
  prefetch: {
    defaultStrategy: "viewport"
  }
})
```

より細かなカスタマイズも可能です。

詳しくは[Astro公式ページ](https://docs.astro.build/en/guides/prefetch/)をご覧ください。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/astro-migrate-from-gatsby">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/astro-migrate-from-gatsby)

---

# 【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説

URL: https://monotein.com/blog/guide-nextjs
公開日: 2026.6.22
更新日: 2026.6.25
概要: Next.jsの基礎からRSC・Server Actions・React 19新機能まで初心者向けに全解説。セットアップ方法、Viteとの違い、App Routerの使い方、Vercelへの公開方法まで網羅したガイド記事です。

## Next.jsとは何か？

Reactを使ったウェブ開発で、いま最も使われているフレームワークが「Next.js（ネクストジェーエス）」です。

「フレームワーク」とは、開発に必要な機能をあらかじめセットにしたツール。

しかし、なぜReact開発でそのようなツールが必要なのでしょうか？

実はReactはそれ単体では、追加設定が必要になる機能が多くあります。

---

• SEOに有効なサーバーサイドレンダリング\
• ファイルベースのルーティング\
• サーバー機能（APIの開発）\
• 画像・フォントの最適化

---

これらをすぐに使える状態でパッケージ化したのがNext.jsになります。

「Reactをベースにしたフルスタックのウェブフレームワーク」という説明がよくされますが、要するに「Reactでできること以上のことができるツール」と理解しておけば十分です。

## Next.jsとReact + Viteの違い

Next.jsの話をすると必ず出てくる疑問があります。

「_React + ViteとNext.js、どちらを選ぶべきか？_」

大まかな使い分けはこうなります。

---

• シンプルなウェブアプリや管理画面 → React + Vite

• SEOが重要なウェブサイト → Next.js

• バックエンドも一緒に開発したい → Next.js

• とにかくシンプルに始めたい → React + Vite

---

これだけではどちらを選ぶべきか決められない人には、詳しい解説があります。

React + ViteとNext.jsの違いと選び方を解説した記事です▼

<div class="rich-card-link">
<a href="/blog/react-vite-or-nextjs-which-to-choose">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-187.png)

</div>
<div class="r-card-text">
【2026年版】React + ViteとNext.js、どちらを選ぶべきか？
</div>
</div>
</a>
</div>

<br/>

なお、「そもそもReact + Viteとは何か？」、そして「Reactの基礎も知りたい」という人は下記ガイドを参考にしてください。

包括的に解説しています▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

## Next.jsのセットアップ方法

### Node.jsの確認

Next.jsを使うにはNode.jsが必要です。

ターミナルで下記を実行して確認してください。

```shell
node -v
```

バージョン番号が表示されればインストール済みです。

表示されない場合は[Node.jsの公式サイト](https://nodejs.org)からLTS版をインストールしましょう。

さて、「なぜフロントエンド開発でNode.jsが必要なのか？」と思う人がいるかもしれません。

その理由は下記記事で解説しています。1分で読めます▼

<div class="rich-card-link">
<a href="/blog/why-nodejs-is-needed">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-235.png)

</div>
<div class="r-card-text">
【図解】なぜフロントエンドのReact開発でNode.jsが必要なの？
</div>
</div>
</a>
</div>

<br/>

### インストール

ターミナルで次のコマンドを実行します。

```shell
npx create-next-app
```

いくつか質問が出てきますが、下記のように答えてください。これ以外は「No」で大丈夫です。

```shell
✔ Would you like to use TypeScript?  → 「Yes」
✔ Would you like to use React Compiler?  → 「Yes」
✔ Would you like to use Tailwind CSS?  → 「No」
✔ Would you like to use App Router? (recommended) → 「Yes」
```

特に「App Router」は必ず「Yes」を選んでください。

Next.jsバージョン13以降の標準的な開発スタイルに対応するために必要です。

インストールから起動、そしてコードの書き方までのより詳しい手順を知りたい方は、こちらの記事も参考にしてください▼

<div class="rich-card-link">
<a href="/blog/nextjs-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-242.png)

</div>
<div class="r-card-text">
【Next.js × TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

### 起動する

インストールが完了したら次のコマンドを実行します。

```shell
cd my-app
npm run dev
```

ブラウザで`http://localhost:3000`を開くと、Next.jsの画面が表示されます。

これが「Next.js開発のスタートライン」です。

なお開発中にモバイル端末での表示も確認したい場合は、こちらの記事も参考にしてください▼

• <a href="/blog/use-nextjs-in-the-same-wifi-network">Next.js開発中、画面の表示をモバイル端末で確認する方法</a>

## Appフォルダ（App Router）について知っておくこと

Next.jsバージョン13から、「App Router」がデフォルトになりました。

構造上の最大の特徴は「フォルダ名がそのままURLになる」ことです。

たとえば`app/blog/page.tsx`を作ると、`/blog`というURLのページが完成します。

覚えておきたい特殊なファイルが3つあります。

---

• `page.tsx` → そのURLのページを表示するファイル

• `layout.tsx` → すべてのページに共通して適用されるレイアウト

• `loading.tsx` → データ取得中に表示されるローディング画面

---

Appフォルダで変わった点、知っておくと便利なことを20個以上まとめた記事はこちらです▼

<div class="rich-card-link">
<a href="/blog/nextjs-app-folder-new-things-list">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-121.png)

</div>
<div class="r-card-text">
Next.js Appフォルダでの変更点を20個、時短で紹介
</div>
</div>
</a>
</div>

<br/>

Next.jsがSEOに強いとはいえ、メタデータの設定はマストです。

クライアントコンポーネントへのメタデータ設定方法を解説している記事があります。

参考にしてください▼

<div class="rich-card-link">
<a href="/blog/nextjs-app-router-metadata-for-client-component">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-143.png)

</div>
<div class="r-card-text">
【Next.js Appフォルダ】メタデータをクライアント・コンポーネントに設定する方法
</div>
</div>
</a>
</div>

<br/>

## Gatsbyのことも少し（余談）

かつてNext.jsには「Gatsby（ギャツビー）」という強力なライバルがいました。

Reactベースの静的サイトジェネレーターで、私自身も数年間はNext.jsよりGatsbyを好んで使っていました。

ページ遷移のスピードや、マークダウンブログの扱いやすさが気に入っていたからです。

しかしその後GatsbyはNext.jsに追い抜かれ、現在は開発がほぼストップしています。

2026年のReactフレームワーク選びで、Gatsbyを選ぶ理由はありません。

現在多くの開発者が検討する選択肢は、Next.js、React + Vite、Astroの3つです。

なお、いま出てきた「静的サイトジェネレーター」とは、Static Site Generationという、Next.jsでも現役で使われているレンダリング技術です。

いま出てきたAstroを含めた静的サイトジェネレーターについては、下記記事でまとめてあります（なお、本サイトではAstro v7を使っています）▼

<div class="rich-card-link">
<a href="/blog/what-is-ssg">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-65.png)

</div>
<div class="r-card-text">
静的サイトジェネレーターとは？SSGの仕組みとメリットを2分で解説
</div>
</div>
</a>
</div>

<br/>

## RSC・SSR・SPA・MPA — レンダリングの流れを理解する

Next.jsを理解するうえで、避けて通れない概念があります。

「MPA」「SPA」「SSR」「RSC」という4つの技術の違いです。

これらは時代とともに進化してきたもので、Next.jsはSSRとRSCの両方を活用するフレームワークです。

|                                           |  登場時期  |
| :---------------------------------------: | :--------: |
|  MPA（マルチ・ページ・アプリケーション）  | 2000年ごろ |
| SPA（シングル・ページ・アプリケーション） | 2010年ごろ |
|   SSR（サーバー・サイド・レンダリング）   | 2016年ごろ |
|   RSC（Reactサーバー・コンポーネント）    | 2022年ごろ |

それぞれの仕組みと、これらの技術が登場した理由については下記4記事で順番に解説しています▼

<div class="rich-card-link">
<a href="/blog/about-mpa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-179.png)

</div>
<div class="r-card-text">
MPAとは？SPAとの違いとマルチページアプリケーションの仕組みを2分で解説
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/about-spa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-180.png)

</div>
<div class="r-card-text">
SPAとは？シングルページアプリケーションの仕組み・MPAとの違いを2分で解説
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/about-ssr">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-181.png)

</div>
<div class="r-card-text">
SSR（サーバーサイドレンダリング）とは？仕組みとSPAとの違いを2分で解説
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/about-rsc">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-182.png)

</div>
<div class="r-card-text">
RSCとは？React Server Componentsの仕組みを2分で図解【2026年版】
</div>
</div>
</a>
</div>

<br/>

なお、この中でも特にSPAは、React + Viteアプリのデフォルトの仕組みでもあり、つまずきやすいポイントです。

「複数ページあるのに、なぜ"シングルページ"と呼ぶのか」という素朴な疑問から、静的サイト・動的サイトの歴史をたどってSPAの仕組みを掘り下げた記事もあります。

SPAのメリット・デメリットをもう一段深く理解したい方は、あわせてご覧ください▼

• <a target="_blank" rel="noopener" href="/blog/what-is-spa">SPAサイトとは？仕組み・メリット・デメリット・実例を2分で解説</a>

## RSC（Reactサーバーコンポーネント）を理解する

RSCはNext.jsの中核となる機能です。

Next.jsのAppフォルダでは、すべてのコンポーネントがデフォルトでサーバーコンポーネントになっています。

<a href="/present?magnet=first-study-guide&from=/blog/guide-nextjs">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/guide-nextjs)

### RSCとRCC（クライアントコンポーネント）の違い

RSCが登場したことで、従来のReactコンポーネントに「RCC（Reactクライアントコンポーネント）」という名前がつきました。

それぞれにできることとできないことがあります。

|                                         | RSC | RCC |
| :-------------------------------------: | :-: | :-: |
|    データベースからデータを取得する     |  ○  |  ×  |
| onClickやonChangeなどのユーザー操作機能 |  ×  |  ○  |
|   useStateやuseEffectなどのHooks利用    |  ×  |  ○  |

RCCを使いたい場合はファイルの先頭に`"use client"`を追加します。

この使い分けの背景と命名の経緯はこちら▼

<div class="rich-card-link">
<a href="/blog/rsc-and-rcc-name">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-163.png)

</div>
<div class="r-card-text">
明治時代とReactコンポーネント
</div>
</div>
</a>
</div>

<br/>

RSCを使うとJavaScriptのバンドルサイズがどれだけ小さくなるか、実際の数値で確認した記事はこちら▼

<div class="rich-card-link">
<a href="/blog/nextjs-react-server-component-less-size">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-145.png)

</div>
<div class="r-card-text">
【Next.js】Reactサーバーコンポーネントのメリットを実際に確認してみました
</div>
</div>
</a>
</div>

<br/>

コードでRSCの動きを確認したい人はこちら▼

<div class="rich-card-link">
<a href="/blog/rsc-and-rcc-with-code-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-162.png)

</div>
<div class="r-card-text">
【Next.js】Reactサーバーコンポーネントの動きをコードで確認しよう
</div>
</div>
</a>
</div>

<br/>

RSCの仕組み・メリット・デメリット・ストリーミングまで一段深く、よりはっきりと理解したい人はこちら▼

<div class="rich-card-link">
<a href="/blog/react-server-components-complete-guide">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-165.png)

</div>
<div class="r-card-text">
Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで
</div>
</div>
</a>
</div>

<br/>

RSC・SSR・SPA・MPAの流れとReact 19の新機能まで体系的にまとめたガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド
</div>
</div>
</a>
</div>

<br/>

## Server ActionsとReact 19の新機能

Next.jsはReactの機能が先行して導入されることがよくあります。

これから紹介するReactバージョン19の新機能も、Next.jsでは先行して利用可能でした。

### Server Actionsとは

Server Actionsは、APIを別途作成しなくても、フォーム送信やデータ更新をサーバー上で直接処理できる仕組みです。

従来のRoute Handlers（APIルート）と比べてコード量を大幅に削減できます。

Server ActionsとAPIの使い分けはこちら▼

<div class="rich-card-link">
<a href="/blog/server-actions-or-api">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-131.png)

</div>
<div class="r-card-text">
Server ActionsとAPI、どっちを使う？違いと使い分けを分かりやすく解説
</div>
</div>
</a>
</div>

<br/>

Server Actionsでエラーをフロントエンドに表示する方法はこちら▼

<div class="rich-card-link">
<a href="/blog/nextjs-server-actions-how-to-get-responses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-156.png)

</div>
<div class="r-card-text">
【Next.js】Server Actionsでエラーをフロントに表示する方法｜error.jsとuseActionState
</div>
</div>
</a>
</div>

<br/>

なおフォーム送信やデータ更新という操作はCRUDと一般的に呼ばれるもので、あらゆるアプリの操作のベースになっています。

詳しくは▼

• <a href="/blog/crud">アプリの機能はたった4つだけ</a>

### useActionState

React 19で導入された`useActionState`は、Server Actionsと組み合わせて使う新しいHooksです。

従来の`useState`を使うよりもコード量を抑えられます。

`useActionState`に渡す関数の書き方はこちら▼

<div class="rich-card-link">
<a href="/blog/passing-function-to-useactionstate">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-160.png)

</div>
<div class="r-card-text">
useActionStateに関数を渡す方法【React 19 Server Actions対応】
</div>
</div>
</a>
</div>

<br/>

### useOptimistic（楽観的更新）

LINEなどでメッセージを送ると、すぐに表示に反映されます。

あれが「楽観的更新」です。

バックエンドからの完了通知を待たずに画面を先に更新することで、ユーザー体験を向上させます。

React 19の`useOptimistic`はその実装を簡単にするHooksです▼

<div class="rich-card-link">
<a href="/blog/what-is-optimistic-update-react-v19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-161.png)

</div>
<div class="r-card-text">
楽観的更新（useOptimistic）とは？意味・仕組みをReact 19で2分で解説
</div>
</div>
</a>
</div>

<br/>

### useEffectEventと\<Activity\>

React 19（v19.2）では、さらに2つの新機能が追加されています。

---

• `useEffectEvent`\
`useEffect`の依存配列問題を解決する新しいHooks

• `<Activity>`\
コンポーネントの表示・非表示を切り替えながら、非表示時もstateを保持できる機能

---

詳しくは下記の記事をご覧ください。

<div class="rich-card-link">
<a href="/blog/react-v19-2-use-effect-event">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-218.png)

</div>
<div class="r-card-text">
【React新機能】useEffectEventをビギナー向けにやさしく解説
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/react-v19-2-activity">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-217.png)

</div>
<div class="r-card-text">
【React新機能】&lt;Activity&gt;の2つの使い方を実例で分かりやすく紹介
</div>
</div>
</a>
</div>

<br/>

## Next.jsを公開する

### Vercelでの公開

Next.jsはVercelで公開するのが一般的です。

開発元の会社が提供するプラットフォームなので、Next.jsのすべての機能を制約なしに使えます。

なお、Vercelが自動生成するドメインを好きな名前に変更する方法はこちら▼

<div class="rich-card-link">
<a href="/blog/vercel-domain-change">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-168.png)

</div>
<div class="r-card-text">
【2026年2月版】できない？Vercelの自動生成ドメインの変更方法
</div>
</div>
</a>
</div>

<br/>

CORS問題が発生する場合の対処法は、下記記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/nextjs-vercel-server-cors">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-110.png)

</div>
<div class="r-card-text">
Next.jsサーバーでCORS問題が起きる時の解決方法
</div>
</div>
</a>
</div>

<br/>

### Vercel以外での公開

NetlifyなどVercel以外でNext.jsを公開することも可能です。

その場合は`next.config.ts`に`output: "export"`を追加し、`npm run build`で生成された`out`フォルダをアップロードします。

手順の詳細と、よく起きる画像表示問題の解決方法はこちら▼

<div class="rich-card-link">
<a href="/blog/deploy-nextjs-to-other-hosting-platforms">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-151.png)

</div>
<div class="r-card-text">
Next.jsをVercel以外で公開する方法（Git不要／Appルータ使用／Netlify）
</div>
</div>
</a>
</div>

<br/>

公開時に特定のURLをユーザーから隠したい場合は、redirectsを使う方法が簡単です▼

<div class="rich-card-link">
<a href="/blog/nextjs-excluding-specific-path-from-build">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-152.png)

</div>
<div class="r-card-text">
Next.jsのbuild時、特定のURLを除外する方法
</div>
</div>
</a>
</div>

<br/>

## 機能実装：お問い合わせフォーム開発

Next.jsではフロントエンドだけでなく、バックエンドの機能も実装できます。

そのため「お問い合わせフォーム」のような、バックエンドが必要な機能もNext.jsだけで実現可能です。

外部サービスを使わず、お問い合わせフォームをNext.jsだけで作る方法はこちら▼

<div class="rich-card-link">
<a href="/blog/nextjs-making-contact-function">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-126.png)

</div>
<div class="r-card-text">
Next.jsだけでお問い合わせフォームを作る方法を解説
</div>
</div>
</a>
</div>

<br/>

## Next.jsが使われているか調べる方法

「このサイト、Next.jsで作られているのかな？」と気になったときは、ブラウザの開発者ツールのコンソールで次のコードを実行するだけで確認できます。

```js
console.log(window?.next.version)
```

Next.jsが使われていればバージョン番号が表示されます。

詳しくはこちら▼

<div class="rich-card-link">
<a href="/blog/how-to-detect-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-205.png)

</div>
<div class="r-card-text">
Next.jsが使われているか・そしてバージョンを確認する方法
</div>
</div>
</a>
</div>

<br/>

## Next.jsを学べる書籍

私は非IT出身からプログラミングを学び始め、現在は「専門用語なしでプログラミング」をテーマに教材制作や執筆を行っています。私の自己紹介はこちら▼

<div class="rich-card-link">
<a href="/blog/self-introduction">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-250.png)

</div>
<div class="r-card-text">
自己紹介（三好アキについて）
</div>
</div>
</a>
</div>

<br/>

私の経験からNext.jsを学ぶのに最適な教材を紹介します。

### 翔泳社から出版

2024年9月、翔泳社から『動かして学ぶ！Next.js/React開発入門』を出版しました。

Next.jsをはじめて使う人を対象にした実践形式の入門書で、バックエンドからフロントエンドまで、フルスタックアプリを一冊で開発できる内容になっています。

この本は韓国語にも翻訳され、韓国でも出版されています。

<div class="rich-card-link">
<a href="/blog/new-release-next-react-book">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-155.png)

</div>
<div class="r-card-text">
【新刊リリース】動かして学ぶ！Next.js/React開発入門（翔泳社）
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/korean-version-next-react-book">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-172.png)

</div>
<div class="r-card-text">
韓国でも出版されました
</div>
</div>
</a>
</div>

<br/>

### 最新バージョン16対応のKindle入門書

最新のNext.jsバージョン16に対応した入門書も用意しています。

ビギナー向けに、インストールからフルスタックアプリの公開まで実践形式で解説しています。

<div class="rich-card-link">
<a href="/blog/new-book-release-nextjs-v16-fullstack-supabase">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-220.png)

</div>
<div class="r-card-text">
【バージョン16対応】『Next.jsでつくるフルスタックアプリ（with Supabase）』リリース
</div>
</div>
</a>
</div>

<br/>

## よくある質問

### Next.jsを学ぶ前に、Reactは必要ですか？

Next.jsのベースはReactです。

Reactの基礎を知っていると、Next.jsの学習はスムーズに進みます。

しかし「Reactを完璧にマスターしてから」という必要はありません。

「Reactに入門した段階でNext.jsにも触り、往復しながら理解を深める」という方法もあります。

Reactを難しく感じている人はこちらのガイドを参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

### TypeScriptは必須ですか？

2026年の現場では、Next.js + TypeScriptの組み合わせがスタンダードです。

最初からTypeScriptで書き始めると、後がラクになるでしょう。

TypeScriptを難しく感じる理由と乗り越え方はこちら▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

### 新しいAppフォルダではなく、古いPagesフォルダを使っています。変更点を教えてください。

Next.jsバージョン13からデフォルトになった「Appフォルダ」と、それ以前の「Pagesフォルダ」の相違点などは下記記事を参考にしてください。

• <a href="/blog/nextjs-v13-new-features">Next.jsバージョン13の変更点を時短で解説</a>

• <a href="/blog/nextjs-version-13-migration">Next.js 13のコード変更点（パス取得／リダイレクト／リクエストbodyの解析など）</a>

また古い情報になりますが、Pagesフォルダを使ったブログ開発や、追加機能の開発方法は下記記事にあります。

• <a href="/blog/nextjs-making-markdown-blog">Next.jsにマークダウンのブログ機能を追加する方法</a>

• <a href="/blog/nextjs-pagination">Next.jsにページネーションをNPMパッケージなしで追加する方法</a>

• <a href="/blog/nextjs-blog-prev-next">Next.jsのブログに前後記事へのリンクを追加する方法</a>

### サーバーコンポーネントとクライアントコンポーネント、どちらを使えばいいですか？

Next.jsではデフォルトがサーバーコンポーネントです。

`useState`や`useEffect`などのHooksを使いたい場合、あるいはボタンクリックなどユーザー操作を扱う場合は、ファイル冒頭に`"use client"`を追加してクライアントコンポーネントに切り替えます。

「まずサーバーコンポーネントで書いてみて、Hooksやイベントが必要になったら切り替える」という進め方が推奨されている方法です。

<a href="/present?magnet=first-study-guide&from=/blog/guide-nextjs">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/guide-nextjs)

### フロントエンド全体の学習ロードマップを知りたい

HTML・CSSからReact、TypeScript、Next.jsまでの学習ステップを一本にまとめたロードマップはこちら▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

### React × TypeScriptを体系的に学べる教材はありますか？

「React × TypeScriptマスター」という教材があります。

「なぜそうなるのか」、「どうつながっているのか」を軸に、React × TypeScriptの全体像を体系的に学べる教材です。

Next.jsはReactの上に成り立っているので、その基礎となるReact × TypeScriptを体系的に理解しているほど、Next.js開発もスムーズになります。

この教材を作った理由や利用者の声、返金保証の話などを下記の記事で詳しく書いてあるので、参考にしてください▼

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

<br/>

Next.jsの基礎となるReact × TypeScriptを、正しい順番で体系的に学べる教材はこちらです▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/guide-nextjs">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/guide-nextjs)

---

# 【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説

URL: https://monotein.com/blog/guide-react-learning-roadmap
公開日: 2026.6.20
更新日: 2026.6.16
概要: Reactを学びたい初心者向けに、HTML・CSSからJavaScript、React、TypeScript、Next.jsまでの学習ロードマップを解説。2026年のAI時代に最適な勉強順と学習時のマインドセットまでを紹介します。

## はじめに：何をどれだけ学ぶのかの指針が必要な理由

「_Reactを学びたいけど、何から始めればいいだろう？_」

これは今も昔も、ビギナーが最初にぶつかる壁です。

私自身もぶつかりました。

特にReactはバージョンが上がるたびに機能が増えています。

つまり学ぶべきことは増えているのです。

「Reactの何を、どれだけ学べばいいのか」という疑問はより深刻化している、と言っていいでしょう。

これは別の角度から言うと次のようになります。

【 「Reactの何を、どれだけ、どの順番で学べばいいのか」を知っておく重要性が高まっている 】

---

Reactの情報自体はネット上でいくらでも、しかも無料で手に入ります。

しかし多すぎるが故に、「それをどう使えばいいのか？」という問題が出てきたのです。

加えてAI時代になり、こういった情報過多で悩む人は増加する一方です。

本記事ではReact学習のロードマップと、学習時のマインドセットについて包括的に紹介します。

本記事を参考にReact学習を進めてみましょう。

## ビギナーが最初にぶつかる壁

プログラミングを学び始めようと調べ始めると、最初にぶつかるのが「情報過多」という壁です。

HTML、CSS、JavaScript、React、Vue、Angular、Vite、Git、Node.js、API.....

横文字と英語の略語が山ほど出てきて、「何が何をするものなのか」、「どれが重要で、どれは後回しでいいのか」の見当がつかなくなるのです。

私自身もビギナー時代にそれを経験しました。

混乱の原因は大きく3つあります。

---

①各ツールの用途が分からない

②ツール同士の関係性（つながり）が分からない

③似た働きをするツールを個別に理解しようとしてしまう

---

この3つが重なると、「説明をいくら読んでも分からない」という状態に陥ります。

しかし実は「個別に理解すべきこと」と「まとめて理解していいこと」を区別するだけで、状況はかなり変わります。

情報過多で混乱している方は、まず下記記事をご覧ください▼

• <a href="/blog/information-overloaded">【情報過多】プログラミング初心者が挫折する原因</a>

<a href="/present?magnet=first-study-guide&from=/blog/guide-react-learning-roadmap">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/guide-react-learning-roadmap)

## AI時代になぜReact学習者が増えているのか？

具体的な学習ロードマップの前に、2026年のいま無視することができない「AIとReactの関係」を紹介します。

AIはReactのコードを書いてくれます。

24時間365日、休みなく書き続けてくれます。

「_それならReactなんてもう学ばなくていいじゃん！_」と誰もが思うでしょう。

しかし現実は少し逆の方向に動いています。

AIによって「Reactに触る人」は増えました。

同時に「理解不足を感じる人」も増えているのです。

なぜそれが問題か？

AIの出力を使うかを決めるのは人間だからです。

そして「使う」と決めること、つまり「使うという決断」には責任が伴います。

多くのユーザーが使う商業用アプリでは、この責任は重大です。

「_動いてはいるけど、なぜ動いているのか分からない....._」というのは責任ある態度ではないでしょう。

私自身も非IT出身からプログラミングを学び始めました。

JavaScriptで半年以上つまずき、専門用語が分からず前に進めなくなったこともあります。

そのため「専門用語なしでプログラミング」をテーマに教材制作や執筆を行っています。私の自己紹介はこちら▼

<div class="rich-card-link">
<a href="/blog/self-introduction">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-250.png)

</div>
<div class="r-card-text">
自己紹介（三好アキについて）
</div>
</div>
</a>
</div>

<br/>

AI時代になり、自分のReactの理解不足に対し危機感を覚える人、学習の必要性を感じる人は増えています。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/ai-era-why-more-people-learn-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-251.png)

</div>
<div class="r-card-text">
AIでReactアプリを作れる時代。なぜReact学習者は増えている？
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/ai-why-studying-programming">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-226.png)

</div>
<div class="r-card-text">
生成AI時代にプログラミングを学ぶワケ
</div>
</div>
</a>
</div>

<br/>

## React学習、ステップの全体像

2026年のReact学習の流れは、大きく次のようになります。

---

HTML／CSS\
↓\
JavaScript（基礎）\
↓\
React + Vite\
↓\
TypeScript\
↓\
Next.js

---

この順番が「王道ルート」ですが、完璧に一段ずつ登り切る必要はありません。

大事なことは「完璧な理解」ではなく、「歩みを止めないこと」、「先に進むこと」です。

各ステップの詳細と、先に進むタイミングについては、こちらの記事で解説しています▼

<div class="rich-card-link">
<a href="/blog/frontend-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-214.png)

</div>
<div class="r-card-text">
【2026年版】React・TypeScript・Next.js・AIを最短で学ぶロードマップ
</div>
</div>
</a>
</div>

<br/>

上の記事ではより詳しく書いていますが、本記事でも各ステップを少し見ていきましょう。

## ステップ① HTML／CSS

プログラミング学習はHTMLとCSSから始まります。

HTMLとCSSは「書いたコードとその結果が一対一の関係」にあるため、ビギナーでも比較的スムーズに進められます。

`<h1>`を使えば大きな文字が表示され、`color: blue;`と書けば文字が青色になるという、対応関係が分かりやすい一対一の関係です。

HTMLとCSSを使って簡単なウェブサイトを数個作ったら、次のステップに進みましょう。

目指すのはHTML／CSSで作る「ウェブサイト」ではなく、Reactで作る「ウェブアプリケーション」です。

なお下記記事では、完全未経験者向けに、HTMLとCSSの役割から、ウェブサイトの無料公開方法までを紹介しています▼

• <a href="/blog/making-the-first-website-and-deploy">はじめてのウェブサイトを作ってみよう（無料オンライン公開方法まで解説）</a>

Netlifyを使えば、HTMLとCSSで作ったウェブサイトを0円・1分で公開できます▼

• <a href="/blog/how-to-release-website-for-free">【0円・1分で完了】HTMLとCSSでつくったウェブサイトを無料で今すぐ公開する方法</a>

## ステップ② JavaScriptとReact入門

JavaScriptは最初にぶつかる壁、おそらく「最大の壁」です。

HTMLとCSSをスムーズに進められた人ほどぶつかる傾向があります。

実は私自身、半年以上JavaScriptで挫折していました。

先ほども見たように、HTMLとCSSは「書いたコード」と「その結果」が1対1で、`<h1>こんにちは</h1>`と書けば大きく「こんにちは」と表示され、`color: red`と書けば文字が赤くなります。

自分のした行動と、その結果の予測がしやすいのです。

しかしJavaScriptは違います。

JavaScriptには「JavaScriptの考え方」があり、HTMLとは頭の使い方を大きく切り替える必要があります。

この「1対1ではない」という構造の違いと対策法を解説したのが下記記事です▼

<div class="rich-card-link">
<a href="/blog/why-js-feels-difficult-not-one-on-one">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-206.png)

</div>
<div class="r-card-text">
JavaScriptを難しく感じる理由（HTML・CSSは簡単だったのに...）
</div>
</div>
</a>
</div>

<br/>

さて、JavaScriptで挫折した経験から気づいたのは、「JavaScriptをマスターしてからReactに進む必要はない」ということです。

HTML／CSSの知識だけでもReactに入門できます。

Reactを先に見て、そこから戻るようにしてJavaScriptの理解を深めていく進め方の方が、むしろ効果的なのです。

これは私個人の体験だけをもとに言っているのではなく、これまで長い間ビギナーにReactを教えてきた経験からもそう言えます。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/overcoming-js-to-react-1">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-194.png)

</div>
<div class="r-card-text">
私がJavaScriptで挫折した話（+ 乗り越えた方法）
</div>
</div>
</a>
</div>

<br/>

## ステップ③ React + Vite

React開発環境の現在の標準はViteです。

以前使われていたcreate-react-appは開発が止まり、Reactの公式ドキュメントでも推奨されなくなりました。

Viteのセットアップから、フォルダ構成、Next.jsとの違いまで、こちらのガイドで解説しています▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

Reactを学び始めて難しく感じてきたら、下記ガイドを読んでみてください。

Reactを難しく感じる理由と、その乗り越え方を一本にまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

## ステップ④ TypeScript

2026年の現場では、ReactとTypeScriptはセットで使うのが標準です。

TypeScriptは最初から学ぶ必要はありません。

Reactにある程度慣れてきた段階で少しずつ取り入れていく、というのがスムーズです。

TypeScriptを難しく感じる理由から、React開発で必要な知識まで、こちらのガイドで解説しています▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

## ステップ⑤ Next.js・RSC・React 19

Next.jsはReactのフレームワークです。

サーバーコンポーネントやストリーミングなど、本来は様々なセットアップが必要なReactの機能を、すぐに利用できるようになっています。

Next.jsについて包括的に理解したい方は、下記ガイドに目を通してください▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

サーバーサイドレンダリングやサーバーコンポーネント、SPA、React 19の新機能を体系的に理解したい人は、こちらのガイドを参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド
</div>
</div>
</a>
</div>

<br/>

さて、Next.jsは「Reactの上位ツール」といえるものです。

そのため、最近ではどのようなReact開発でもNext.jsを使うケースが多いですが、必ずしも毎回Next.jsが適切とは限りません。

Next.jsの機能が多すぎて、必要以上にアプリの構造が複雑になってしまうことも多いのです。

Next.jsとReact + Viteの違いや使い分けについて理解したい方は、この記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/react-vite-or-nextjs-which-to-choose">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-187.png)

</div>
<div class="r-card-text">
【2026年版】React + ViteとNext.js、どちらを選ぶべきか？
</div>
</div>
</a>
</div>

<br/>

## React学習を継続するために知っておくべきこと

### 停滞期は必ずある

学習を進めていると、必ず「いくら勉強しても進んでいる気がしない」という時期が訪れます。

これは誰もが経験する「停滞期」です。

しかしこの停滞期は、のちに来る「飛躍」の前触れです。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/learning-curve">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-178.png)

</div>
<div class="r-card-text">
学習曲線とは？プログラミング初心者が必ずぶつかる停滞期の正体と乗り越え方
</div>
</div>
</a>
</div>

<br/>

### 勉強が続かない理由は「成功体験の欠如」

勉強が続かない最大の理由、それは「成功体験がない」ことです。

「できた！」という喜びがあってこそ、「なぜうまくいったのか？」という学ぶ気持ちが生まれます。

まずは「できた！」を体験できる教材を選ぶことが継続の鍵です。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/reason-for-unable-to-continue-studying">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-229.png)

</div>
<div class="r-card-text">
勉強のモチベーションが続かない本当の理由
</div>
</div>
</a>
</div>

<br/>

### チュートリアルヘルに注意する

「勉強が楽しい」という状態は良いことです。

しかしそれが「勉強すること自体が目的」になってしまうと、本来のゴール（就職、案件獲得、アプリ完成など）から離れていきます。

これを「チュートリアルヘル」と呼びます。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/tutorial-hell">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-169.png)

</div>
<div class="r-card-text">
勉強が楽しい……でもそれは危険信号かも？【チュートリアルヘル】の怖さ
</div>
</div>
</a>
</div>

<br/>

### 「勉強すること」が目的になっていないか確認する

「チュートリアルヘル」と関連して、もう少し根本的な話をします。

プログラミング勉強を始める人の中には、ゴールを決めていない人が少なくありません。

---

「_なんとなく役に立ちそう_」\
「_AIの時代だから_」\
「_かっこよさそう_」

---

こういった理由で始めることに問題は何もありません。

しかし目標が曖昧なまま勉強を続けていると、ある時点で「自分は何のために勉強しているのか」が分からなくなります。

そして勉強自体がいつの間にか目的になってしまいます。

勉強とは、ある意味でラクな行動なのです。

---

• 自分一人で完結できる。\
• 誰にも傷つけられない。\
• 「頑張っているフリ」ができる

---

しかし「大人の勉強」において、勉強はあくまで手段です。

その先にある目標こそが主役であるべきです。

「_フリーランスとして案件を取る_」\
「_社内でReactを扱える開発者になる_」\
「_自分のアプリを完成させてリリースする_」

何でもいいので、具体的なゴールを先に決めておきましょう。

下記記事も参考にしてください▼

<div class="rich-card-link">
<a href="/blog/purposeless-studying-is-meaningless">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-184.png)

</div>
<div class="r-card-text">
プログラミング勉強に意味はない
</div>
</div>
</a>
</div>

<br/>

（フリーランスを目指すなら、スキルと一緒に[案件を得るための営業](/blog/what-is-cold-mail)についても知っておくと選択肢が広がります）

なお、日本のカフェでは、週末も年末年始も関係なく、パソコンを開いて勉強している人で溢れています。

これは私がかつて住んでいたヨーロッパでは見られない光景です。

「勉強はよいことだ」という価値観が強固にある日本では、特に勉強が手段ではなく目的になりやすいと私は思っています。

その構造とリスクについては下記記事で触れているので、目を通してみてください▼

• <a href="/blog/japanese-people-love-studying">勉強好きの日本人とそのリスク</a>

### 点と点がつながる喜びを知る

学習を続けていると、ある瞬間「あ、ここはあそことつながっているんだ」という気づきが来ます。

この「点と点がつながる瞬間」こそが、学習の最大の醍醐味です。

この喜びを一度経験すると、勉強を続ける原動力になります。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/connect-the-dot">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-201.png)

</div>
<div class="r-card-text">
プログラミング学習のモチベーションを維持する方法（点と線の話）
</div>
</div>
</a>
</div>

<br/>

### プログラミングが楽しくなる瞬間を知っておく

「続けられる人と挫折する人の違いは何か」という問いへの答えは単純です。

プログラミングの楽しさを一度でも感じたかどうか、です。

私自身、最初はWixでウェブサイトを作っていたところからHTML／CSSを学び始め、「意外に簡単に作れた」という体験が、その後の長いプログラミング学習の原動力になりました。

自分の手で何かを作る喜び、そして「自分にもできた」という満足感は、外から押しつけられたどんな動機よりも強いのです。

この点については下記記事を参考にしてください▼

• <a href="/blog/joy-of-creating">【プログラミング学習】続けられる人と挫折する人の違い</a>

私個人のプログラミング学習時の体験談、そしてそこで感じたプログラミングの闇については、下記記事で詳しく紹介しています▼

<div class="rich-card-link">
<a href="/blog/joy-of-learning">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-200.png)

</div>
<div class="r-card-text">
プログラミング勉強の楽しさ（私の体験談）
</div>
</div>
</a>
</div>

<br/>

### 「決められない」、「迷い続ける」という落とし穴

教材を探す前に、もう一つ確認しておきたいことがあります。

「情報は集めているのに、なぜか前に進めない」という状態です。

その昔、私がポーランドのワルシャワに住んでいた頃、ある男性にイベントで出会いました。

彼はReactとAngularの違い、PythonとJavaScriptの比較、各フレームワークの将来性など、プログラミングについてとても詳しく語れる人でした。

しかし実際にはコードを一行も書いたことがなく、「どの言語を学ぶか現在考え中」という状態でした。

知識を集めること自体が快感になってしまい、「選ぶ」という行動が取れなくなっている人は実は大勢います。

「新しいことを知ること」は、それがなんであれ楽しいからです。

「ノウハウ・コレクター」になってしまうのを避ける方法は下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/know-how-collector">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-188.png)

</div>
<div class="r-card-text">
プログラミング初心者が陥りやすい「決められない」問題【ノウハウ・コレクター】
</div>
</div>
</a>
</div>

<br/>

同じ落とし穴として、「どのプログラミング言語を選ぶか」で長期間迷い続けるパターンもあります。

「作りたいものを先に決めよう」というアドバイスはよく聞きますが、実はそれは初心者にとって非常に難しいと私は考えています。

「プログラミングでそもそも何ができるのか」ということが、ビギナーには分からないからです。

もっと現実的で、決断を早くする方法を下記記事で紹介しています▼

• <a href="/blog/how-to-choose-programming-languages">勉強するプログラミング言語の選び方</a>

IT資格についても同じことが言えます。

「基本情報技術者を取ってから始めよう」、「まず何か資格を持っておきたい」という考えで、本来のゴールへの歩みが止まってしまうケースも少なくありません。

資格が本当に必要かをまず問い直しましょう。

詳しくは下記記事を参考にしてください▼

• <a href="/blog/it-qualifications">IT資格の〇〇〇を取得した方がいいですか？</a>

## 教材の選び方

学習を進める上で、教材の選び方は非常に重要です。

### 書籍・動画・電子書籍、何が向いているか

書籍、動画、電子書籍はそれぞれに強みがあります。

書籍は情報がパッケージ化されていて、つまみ食いを防いでくれます。

動画は「勝手に進んでいく」という性質が、やる気のない日でも前に引っ張ってくれます。

電子書籍はブラウザの外にあるため、気が散りにくい集中環境を作れます。

各フォーマットのメリットと使い分けはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/books-advantages-and-disadvantages">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-175.png)

</div>
<div class="r-card-text">
書籍で学ぶメリットと賢い活用法【プログラミング学習】
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/videos-advantages-and-disadvantages">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-176.png)

</div>
<div class="r-card-text">
動画と本、勉強に最適なのはどっち？【プログラミング学習】
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/advantages-kindle-books">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-183.png)

</div>
<div class="r-card-text">
電子書籍のメリットとは？ ブログ記事との違いと初心者に最適な理由を解説
</div>
</div>
</a>
</div>

<br/>

React入門書を探している方は下記記事をご覧ください。

5年以上に渡り読まれ続け、Amazonで最高評価となっているReact教材の無料公開しています▼

<div class="rich-card-link">
<a href="/blog/first-chapter-from-react-book">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-230.png)

</div>
<div class="r-card-text">
AmazonでNo.1のReact入門書を無料公開
</div>
</div>
</a>
</div>

<br/>

### 無料教材だけで学ぶことの限界

学習教材は山ほどあります。

今ではAIも使えます。

「ネットに情報は山ほどある。なぜ教材にお金を払うの？」という疑問を一度も感じたことのない人の方が珍しいかもしれません。

しかし無料のブログ記事やYouTube動画、そしてAIには、ビギナーにとって致命的な問題があります。

「断片的」であることです。

その分野の全体像をまだ持っていない初心者が断片的な情報を得ても、「それをどこに使えばいいのか」が分かりません。

情報の量ではなく、情報の文脈が欠けているのです。

さらにネットでは次々と新しい情報が流れてくるため、「もっと良い記事があるはず」と教材をつまみ食いし続けてしまいます。

無料の教材を使う上で気をつけるべきこと、そして無料教材の落とし穴にはまらないための対策は、下記記事で紹介しています。

• <a href="/blog/why-we-pay-learning-materials">【プログラミング学習】なぜ有料の教材が〈まだ〉存在するのか？</a>

• <a href="/blog/recommended-study-method">【プログラミング初心者向け】本当に役立つ教材の選び方</a>

• <a href="/blog/difficulties-of-using-online-materials">【プログラミング初心者がハマる】ネット教材の落とし穴と解決策</a>

---

また「この教材は自分に合わない」と感じたとき、教材を変えることに罪悪感を覚える必要はありません。

しかし変えすぎは逆効果です。

新しいことを学ぶとは、そもそも脳に負荷がかかる行為です。

そのストレスを「教材が悪い」と誤解する人がいます。

自分で「これだ！」と決めた教材を最後までやり切ること。

実はこれがもっとも効率的で効果的な最短ルートであることは少なくありません。

詳しくは下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/switching-learning-materials">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-191.png)

</div>
<div class="r-card-text">
プログラミング勉強が進まないのは教材のせいだ
</div>
</div>
</a>
</div>

<br/>

なお、一番最初に手をつける入門書は、厚い本より薄い本を選ぶ方がうまくいきます。

「すべてが一冊に入っている」という安心感が欲しくて分厚い本を手に取りがちですが、そういう本が挫折率を高めます。

理想の入門書に求めるべきものは「網羅性」ではなく「この続きを学びたい」という気持ちを灯してくれることです。

この点については下記記事で詳しく述べています▼

• <a href="/blog/ideal-beginner-books">「これ一冊だけでOK！」という入門書が全然OKではない理由</a>

### 学習の進め方で変わること

良い教材を選んでも、進め方を間違えると遠回りになります。

プログラミング学習には「写経」という方法があります。

コードを自分の手で打ち込みながら進めることです。

「コピーすればいいのに」と思う人は多いですが、打ち込む過程で手と目と頭が同時に動くので、コードへの慣れと記憶の定着が高まります。

そして打ち込んだコードが意図通り動いたときの小さな達成感は、学習を続ける「中毒性」を生みます。

<div class="rich-card-link">
<a href="/blog/syakyo-transcribing-code">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-192.png)

</div>
<div class="r-card-text">
なぜ写経でプログラミング中毒になるのか？
</div>
</div>
</a>
</div>

<br/>

「一つひとつ完全に理解してから次に進む」というやり方は、一見正しく見えますが実は挫折リスクが高いアプローチです。

人間はそもそも理解に時間がかかり、覚えたこともすぐ忘れます。

薄く何度も塗り重ねるうるし塗りの技法のように、教材を繰り返すことで理解は徐々に深まっていきます。

一周目は「なんとなく」で大丈夫です。

詳しくは下記記事に書いてあります▼

<div class="rich-card-link">
<a href="/blog/repeating-learning-materials">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-202.png)

</div>
<div class="r-card-text">
「理解してから進む」が遠回りになる理由
</div>
</div>
</a>
</div>

<br/>

初心者にありがちな誤解が3つあります。

「_プログラミングは理系向けだ_」\
「_コードに正解がある_」\
「_教材は一回やれば十分_」

このような思い込みが、プログラミング学習への抵抗感や挫折率を高めています。

対処法は下記記事をご覧ください▼

• <a href="/blog/common-misunderstandings">プログラミング学習の初心者によくある誤解（with 解決法）</a>

### プログラミング学習の教材の選び方

プログラミング学習では、ハンズオン形式（作りながら学ぶスタイル）の教材を選ぶことも重要です。

知識を読んで「分かった気になる」のと、実際に手を動かして「動いた！」と体験するのでは、その後の定着度がまったく違います。

特に学習初期に「小さな成功体験」を早く得られるかどうかが、学習を継続できるかどうかの分かれ目です。

• <a href="/blog/hand-on-learning-materials">失敗しないプログラミング教材の選び方</a>

### プログラミングの専門用語

プログラミング特有の専門用語に惑わされないようにしましょう。

「オブジェクト」、「引数」、「返り値」といった言葉が分からなくても、先に進んで大丈夫です。

言葉の意味は実際に使っていると自然と分かってきます。

言葉の定義を理解してから進もうとすると、そこで止まってしまい、挫折率を高めます。

実際に私自身、専門用語が分からず、JavaScriptの学習が半年近く停滞していました。

詳しくは下記記事で紹介しています▼

<div class="rich-card-link">
<a href="/blog/avoiding-terminologies">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-190.png)

</div>
<div class="r-card-text">
プログラミング学習で挫折しないための方法
</div>
</div>
</a>
</div>

<br/>

## よくある質問

### ReactとVueとAngular、どれを選べばいいですか？

2026年の現場では、Reactが「デファクトスタンダード（事実上の業界標準）」として定着しています。

AIが生成するコードも大半がReactベースです。

ネット上にはReactの情報が最も多いため、AIもReactのコードを頻繁に、そしてより精度高く出力します。

これからフロントエンドを学ぶなら、Reactを選ぶのがおすすめです。

<a href="/present?magnet=first-study-guide&from=/blog/guide-react-learning-roadmap">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/guide-react-learning-roadmap)

### 途中で挫折しそうになったらどうすればいいですか？

挫折とまではいかなくても、学習が長期間ストップしてしまうこと。

やる気がなくなってしまうこと。

これらは珍しいことではありません。

私自身も何度もそういう時期を経験してきました。

そういうときに知っておいて欲しいのが、「学習曲線」の考え方です。

成果が出ない停滞期は必ず存在しますが、実はそれは飛躍の前触れなのです。

詳しくはこちらをご覧ください▼

<div class="rich-card-link">
<a href="/blog/learning-curve">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-178.png)

</div>
<div class="r-card-text">
学習曲線とは？プログラミング初心者が必ずぶつかる停滞期の正体と乗り越え方
</div>
</div>
</a>
</div>

<br/>

### AIを使いながらReactを学ぶとき、気をつけることはありますか？

AI利用にはメリットとデメリットがあります。

メリットは疑問へのスピーディな回答、エラー解決の速度、コード例の豊富さなどです。

以前は「useState　エラー」とGoogle検索して複数の記事を読み比べていましたが、今はAIに聞くだけで解決できます。

一方、無視できないAIのデメリットは知識の断片化です。

AIが高精度な答えを返してくれるほど、「理解しなくても前に進める」状態が起きます。

「_コードは動く、でもなぜ動いているのか分からない...._」

この問題は。2026年のReact学習者の間で特に広がっています。

この解決策は「体系的な理解を」身につけることです。

AIは便利ですが、どこかの地点で一度AIを離れ、React全体を体系的に学ぶことが大切です。

### Reactを体系的に学べる教材はありますか？

あります。

「なぜそうなるのか」、「どうつながっているのか」を軸に、React × TypeScriptの全体像を体系的に学べる教材です。

このロードマップで見てきた各ステップを、迷わない順番で一本につなげてあります。断片的に学んできた知識を、体系的につなぎ直すのにも向いています。

この教材が生まれた経緯や学習者の感想、返金保証のウラ話などをこちらの記事に書いてあるので、参考にしてください▼

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

<br/>

ロードマップの全体を、独学でも迷わず一本で辿れる教材はこちらです▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/guide-react-learning-roadmap">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/guide-react-learning-roadmap)

---

# 【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解

URL: https://monotein.com/blog/guide-rsc-and-react19
公開日: 2026.6.17
更新日: 2026.6.16
概要: AI時代だからこそ必要になるReactの本質的理解。RSC・SSR・SPA・MPAの歴史と違いを整理しながら、React 19の重要機能まで体系的に解説します。

## RSCはなぜ登場したのか

Reactサーバーコンポーネント（RSC）の登場から5年近くが経ちました。

しかし「_RSCって結局なんなの？_」、「_SSRとどう違うの？_」と感じている人はまだ大勢いる、というのが私の実感です。

Reactサーバーコンポーネント（RSC）を理解するには、その前身にあたるMPA、SPA、SSRという流れを知っておく必要があります。

RSCは突然登場した概念ではなく、ウェブアプリケーション技術の進化の延長線上にあるものだからです▼

|     |  登場時期  |
| :-: | :--------: |
| MPA | 2000年ごろ |
| SPA | 2010年ごろ |
| SSR | 2016年ごろ |
| RSC | 2022年ごろ |

本記事では、その歴史的な流れから、RSCの仕組み、そしてReactバージョン19の新機能まで、順を追って解説します。

<a href="/present?magnet=first-study-guide&from=/blog/guide-rsc-and-react19">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/guide-rsc-and-react19)

## AI時代だからこそ、RSCの体系的な理解が必要になっている

RSCの話をする前に、まず「なぜ今このテーマを学ぶのか」という問いに答えます。

AIがReactのコードを書いてくれる時代です。

Next.jsを使ったプロジェクトでも、AIがRSCを使ったコードを当然のように書いてきます。

しかし「_AIの書いたコードが正しいか_」、「_サーバーコンポーネントとクライアントコンポーネントの使い分けは合っているか_」といったことを判断するのは、人間です。

「_AIは人間のような日本語を書ける、だから日本人はもう日本語を学ばなくていい_」とはならないのと同じです。

AIが書いてきたものを判断する責任が人間にはあり、そして判断をするには知識と経験が必要です。

AI時代になっても、正確な理解が必要とされることは不変なのです。

---

AIによって「Reactに触る人」は増えました。

同時に「理解不足を感じる人」も増えました。

この問題の本質は、知識が断片的なまま積み上がっていくことにあります。

RSCのような発展的なテーマこそ、AIに頼る前に体系的な理解が必要です。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/ai-era-why-more-people-learn-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-251.png)

</div>
<div class="r-card-text">
AIでReactアプリを作れる時代。なぜReact学習者は増えている？
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/ai-era-fragmental-knowledge">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-252.png)

</div>
<div class="r-card-text">
AI時代のReact学習で加速する「断片学習」とは？
</div>
</div>
</a>
</div>

<br/>

私自身も非IT出身で、React以前にJavaScriptで挫折をしていました。私の自己紹介はこちら▼

<div class="rich-card-link">
<a href="/blog/self-introduction">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-250.png)

</div>
<div class="r-card-text">
自己紹介（三好アキについて）
</div>
</div>
</a>
</div>

<br/>

なお、これから触れるRSC（React Server Components）は、Reactの中でもやや発展的な内容です。

その前にReactの基礎を確認したい方は、こちらのガイドをどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

またReactの学習を進める中で「難しい」と感じている方は、こちらのガイドも参考にしてください。

Reactを難しく感じる本当の理由と、具体的な乗り越え方を整理しています▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

## レンダリングの進化：MPA → SPA → SSR → RSC

### MPA（マルチ・ページ・アプリケーション）

ウェブアプリ技術の歴史はMPAから始まりました。

WordPressが代表例です。

MPAではページが移動するたびにサーバーとのやりとりが発生し、HTMLとJavaScriptを受け取って表示する仕組みになっています。

現役の仕組みではありますが、ページ表示に時間がかかるという問題がありました。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/about-mpa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-179.png)

</div>
<div class="r-card-text">
MPAとは？SPAとの違いとマルチページアプリケーションの仕組みを2分で解説
</div>
</div>
</a>
</div>

<br/>

### SPA（シングル・ページ・アプリケーション）

MPAの「ページ表示に時間がかかる」という問題を改善したのがSPAです。

有名なところではGoogleマップが採用しています。

React + Viteで作るアプリもデフォルトではSPAです。

なお、HTMLとCSSの知識だけでReact + Viteは始められます。

こちらの記事で紹介しているの参考にしてください▼

<div class="rich-card-link">
<a href="/blog/react-vite-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-148.png)

</div>
<div class="r-card-text">
Vite + Reactの始め方｜インストールから起動まで3分で完了【2026年版】
</div>
</div>
</a>
</div>

<br/>

このSPAは、はページ描画をJavaScriptがクライアント（ブラウザ）側で行います。

ページ移動のたびにサーバーとやりとりをする必要がないため、ページをすばやく表示できるのです。

ただし「初回表示に時間がかかる」という別の問題があります。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/about-spa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-180.png)

</div>
<div class="r-card-text">
SPAとは？シングルページアプリケーションの仕組み・MPAとの違いを2分で解説
</div>
</div>
</a>
</div>

<br/>

### SSR（サーバー・サイド・レンダリング）

SPAの「初回表示に時間がかかる」という問題を改善したのがSSRです。

Next.jsでも使われています。

初回リクエスト時にサーバー側でHTMLを一部組み立ててから送るため、ユーザーが最初にページを見るまでの時間が短くなりました。

ただし「クライアントが使うJavaScriptをすべて送る」という点はSPAと変わらないままです。

つまり、不要なJavaScriptも送ってしまうのです。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/about-ssr">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-181.png)

</div>
<div class="r-card-text">
SSR（サーバーサイドレンダリング）とは？仕組みとSPAとの違いを2分で解説
</div>
</div>
</a>
</div>

<br/>

### RSC（Reactサーバーコンポーネント）

SPA・SSRのどちらも「クライアントが使うJavaScriptをすべて送る」という点が同じでした。

RSCはここに手を加えたものです。

ブラウザで必要な量だけに絞ってJavaScriptを送ります。

さらにページ移動時には「変更箇所だけを部分的に更新する（Partial Rendering）」という仕組みにより、ページ全体のリロードなしに高速な遷移を実現しています。

より詳しくは、こちらの記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/about-rsc">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-182.png)

</div>
<div class="r-card-text">
RSCとは？React Server Componentsの仕組みを2分で図解【2026年版】
</div>
</div>
</a>
</div>

<br/>

なお、ここまでみてきたサーバーサイドレンダリング（SSR）とReactサーバーコンポーネント（RSC）は、Next.jsの普及によって注目されるようになった技術です。

実際、RSCを使った開発に触れる機会の多くはNext.js経由になるでしょう。

Next.jsとは何か、Reactとの関係、そしてなぜ多くの企業が採用しているのかについては、下記記事で詳しく解説しています▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

## RSCとRCC（Reactクライアントコンポーネント）

RSCが登場したことで、それ以前から存在していたReactコンポーネントに「RCC（Reactクライアントコンポーネント）」という名前がつきました。

RSCとRCCは「どちらかを置き換えるもの」ではなく、相互補完的に使うものです。

それぞれに「できること」と「できないこと」があります。

|                                         | RSC | RCC |
| :-------------------------------------: | :-: | :-: |
|    データベースからデータを取得する     |  ○  |  ×  |
| onClickやonChangeなどのユーザー操作機能 |  ×  |  ○  |
|   useStateやuseEffectなどのHooks利用    |  ×  |  ○  |

この使い分けと、コードでの動きを確認したい人はこちらをどうぞ▼

<div class="rich-card-link">
<a href="/blog/rsc-and-rcc-name">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-163.png)

</div>
<div class="r-card-text">
明治時代とReactコンポーネント
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/rsc-and-rcc-with-code-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-162.png)

</div>
<div class="r-card-text">
【Next.js】Reactサーバーコンポーネントの動きをコードで確認しよう
</div>
</div>
</a>
</div>

<br/>

RSCを使うとJavaScriptのバンドルサイズがどれだけ削減されるか、実際に数字で確認した記事はこちらです▼

<div class="rich-card-link">
<a href="/blog/nextjs-react-server-component-less-size">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-145.png)

</div>
<div class="r-card-text">
【Next.js】Reactサーバーコンポーネントのメリットを実際に確認してみました
</div>
</div>
</a>
</div>

<br/>

RSCについてさらに深く、原理からメリット・デメリットまで知りたい人はこちらをどうぞ▼

<div class="rich-card-link">
<a href="/blog/react-server-components-complete-guide">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-165.png)

</div>
<div class="r-card-text">
Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで
</div>
</div>
</a>
</div>

<br/>

## React 19の新機能

現時点（2026年6月）でのReactの最新バージョンは19です。

React 19では様々な機能や仕組みが追加されました。

ここまで見てきたReactサーバーコンポーネント（RSC）がReact本体から提供され始めたのも、このバージョンです。

本記事ではこれ以降、RSC以外の新機能を見ていきましょう。

### Server ActionsとuseActionState

Server Actionsは、Next.jsでフォーム送信やデータ更新を、APIを作らずに直接サーバーで処理できる仕組みです。

React 19では、このServer Actionsと組み合わせると便利な`useActionState`というHooksが導入されました。

従来の`useState`を置き換える形で使えます。

`useActionState`の使い方と、関数の書き方の違いはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/passing-function-to-useactionstate">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-160.png)

</div>
<div class="r-card-text">
useActionStateに関数を渡す方法【React 19 Server Actions対応】
</div>
</div>
</a>
</div>

<br/>

Server Actionsでエラーをフロントエンドに表示する方法はこちらです▼

<div class="rich-card-link">
<a href="/blog/nextjs-server-actions-how-to-get-responses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-156.png)

</div>
<div class="r-card-text">
【Next.js】Server Actionsでエラーをフロントに表示する方法｜error.jsとuseActionState
</div>
</div>
</a>
</div>

<br/>

Next.jsにはAPI Routesという機能があります。

これはサーバー側の機能を提供するものですが、Server Actionsとの使い分けが少し複雑です。

いつ、どちらを使うのかが最適か、こちらの記事で理解してください▼

<div class="rich-card-link">
<a href="/blog/server-actions-or-api">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-131.png)

</div>
<div class="r-card-text">
Server ActionsとAPI、どっちを使う？違いと使い分けを分かりやすく解説
</div>
</div>
</a>
</div>

<br/>

またServer Actionsのコードでも型は重要です。

React × TypeScript開発の基礎、TypeScriptを難しく感じる理由などは、こちらのガイドにまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

### useOptimistic（楽観的更新）

React 19で追加されたもうひとつの注目Hooksが`useOptimistic`です。

「楽観的更新」とは、「データ投稿はたぶん成功するだろう」という希望的観測のもと、バックエンドからの完了通知を待たずに表示を先に反映させる手法です。

LINEなどのアプリでメッセージを送ったとき、送信完了を待たずに即座に表示に反映される仕組みが、まさにこの楽観的更新です。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/what-is-optimistic-update-react-v19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-161.png)

</div>
<div class="r-card-text">
楽観的更新（useOptimistic）とは？意味・仕組みをReact 19で2分で解説
</div>
</div>
</a>
</div>

<br/>

### useEffectEventと<Activity>

React 19（v19.2）ではさらに、`useEffectEvent`と`<Activity>`という2つの新機能も追加されています。

---

• `useEffectEvent`\
`useEffect`の依存配列問題を解決する新しいHooks

• `<Activity>`\
コンポーネントの表示・非表示をコントロールしながら、非表示時もstateを保持できる新機能

---

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/react-v19-2-use-effect-event">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-218.png)

</div>
<div class="r-card-text">
【React新機能】useEffectEventをビギナー向けにやさしく解説
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/react-v19-2-activity">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-217.png)

</div>
<div class="r-card-text">
【React新機能】&lt;Activity&gt;の2つの使い方を実例で分かりやすく紹介
</div>
</div>
</a>
</div>

<br/>

## よくある質問

### RSCはNext.jsでないと使えませんか？

現時点でRSCを実用的に使える環境としては、Next.jsが最も一般的です。

RSCはReact本体の機能ですが、実際の開発ではNext.jsと組み合わせて使うのが主流です。

### サーバーコンポーネントとクライアントコンポーネント、どちらを使えばいいですか？

Next.jsではデフォルトがサーバーコンポーネントです。

`useState`や`useEffect`などのHooksを使いたい場合、あるいはボタンのクリックなどユーザー操作を扱う場合は、ファイルの先頭に`"use client"`を追加してクライアントコンポーネントに切り替えます。

「まずサーバーコンポーネントで書いてみて、Hooksやイベントが必要になったらクライアントコンポーネントに変える」という進め方が現実的です。

<a href="/present?magnet=first-study-guide&from=/blog/guide-rsc-and-react19">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/guide-rsc-and-react19)

### React初心者です。どのような順番で学べばいいか分かりません

Reactはバージョンが上がるごとに機能が増えています。

そのため「何を、どれだけ学べばいいのか」と悩む人も増えています。

2026年版の学習ロードマップを作ったので参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

### React 19の新機能は今すぐ使う必要がありますか？

必須ではありません。

`useActionState`はServer Actionsを使う場合に便利です。

`useOptimistic`はリアルタイム性の高いUIで効果を発揮します。

`useEffectEvent`と`<Activity>`は、既存コードの問題を解決する場面で活躍します。

つまり、従来からある機能やコードを置き換えるというよりは、「より便利にする」「より簡単に実現できる」というのがReact 19の新機能です

### React基礎から、RSC／React19などの発展的技術まで、体系的に学べる教材はありますか？

「React × TypeScriptマスター」という教材があります。

「なぜそうなるのか」、「どうつながっているのか」を軸に、React × TypeScriptの全体像を体系的に学べる教材です。

RSCやReact 19のような発展的なテーマも、その基礎に体系的な理解があってはじめて活きてきます。

この教材を作った理由や利用者の声、返金保証の話などをこちらの記事で詳しく書いてあるので、参考にしてください▼

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

<br/>

発展的なテーマほど、体系的な理解が必須となります。

そのための教材がこちらです▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/guide-rsc-and-react19">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/guide-rsc-and-react19)

---

# 【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説

URL: https://monotein.com/blog/guide-typescript-for-react-programmers
公開日: 2026.6.14
更新日: 2026.6.16
概要: AIがコードを書く時代だからこそ、TypeScriptの重要性は高まっています。本記事ではTypeScriptの基礎から学習のコツ、React開発で必須となる知識まで初心者向けに解説します。

## TypeScriptは難しくない

「_TypeScriptは難しいな_」と感じる人は多くいます。

中級者でもそのように感じる人が珍しくありません。

私自身、かつてそう思っていた一人です。

しかしTypeScriptを難しく感じさせる理由を知れば、TypeScriptへの印象も大きく変わるでしょう。

本記事では、まず最初にTypeScriptが難しくみえる理由を説明します。

その後、ReactエンジニアがTypeScriptを身につける具体的な方法を紹介します。

各テーマを深く掘り下げた記事も紹介するので、ぜひ最後まで読んでください。

<a href="/present?magnet=first-study-guide&from=/blog/guide-typescript-for-react-programmers">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/guide-typescript-for-react-programmers)

## AI時代にTypeScriptの重要性は増している

TypeScriptの話をする前に、まず「_なぜ今TypeScriptなのか？_」という問いに答えます。

AIがコードを書いてくれる時代です。

「_TypeScriptを学ぶ必要はなくなったのでは？_」と考える人もいるでしょう。

しかし現実は少し違う方向に動いています。

---

AIが書いてくるコードの大半は、ReactベースでありTypeScriptベースです。

AIはネット上の情報を学習しており、ネット上でReact × TypeScriptの情報がもっとも多いからです。

そして「AIの書いたコードが正しいか」、「型定義に問題はないか」を最終的に判断するのは人間です。

AIは責任を取れません。

コードの責任は、AIに指示を出した人間が負います。

---

AIによって「Reactに触る人」は増えました。

同時に「理解不足を感じる人」も増えたのです。

「_動いてはいるけど、なぜ動いているのか分からない....._」

この問題の原因は、知識が断片的なまま積み上がっていくことにあります。

AIを使うからこそ、React × TypeScriptを体系的に学ぶことの重要性は一層増しています。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/ai-era-why-more-people-learn-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-251.png)

</div>
<div class="r-card-text">
AIでReactアプリを作れる時代。なぜReact学習者は増えている？
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/ai-era-fragmental-knowledge">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-252.png)

</div>
<div class="r-card-text">
AI時代のReact学習で加速する「断片学習」とは？
</div>
</div>
</a>
</div>

<br/>

## TypeScriptを難しく感じる2つの理由

### ① メリットが分かりにくい

TypeScriptを使う理由としてよく挙げられるのは、次のようなことです。

---

• アプリが堅牢になる\
• 開発スピードが上がる\
• エラーが減る

---

しかしこれらのメリットは、ビギナーには一番理解しにくいものです。

TypeScriptを使っても、アプリの見た目が良くなるわけでも、動くスピードが速くなるわけでもありません。

その一方で、書くコードの量は増え、エラーの発生も多くなります。

「_目に見えるメリットが感じられない_」、「_何で使うのか分からない_」というのが、ビギナーがTypeScriptで最初にぶつかる壁です。

### ② 「型」の概念に馴染みがない

TypeScriptは「型のついたJavaScript」とよく紹介されます。

しかしこの「型」という概念は、HTML／CSS開発ではまったく出てこないものです。

JavaScriptでもほぼ出てきません。

たとえばJavaScriptでは、次のように書けます。

```js
let data = "Hello"
data = 123 // エラーなし
```

TypeScriptで同じように書くと、エラーが出ます。

```js
let data: string = "Hello";
data = 123;        // エラー: string型にnumber型は代入不可
```

TypeScriptでは型を一致させる必要があります。

「型を意識する」というのは、HTML／CSSやJavaScriptだけを触ってきた人にとって、まったく新しい発想です。

この点について、より詳しい解説とその解決策を下記記事で紹介しています▼

<div class="rich-card-link">
<a href="/blog/why-typescript-is-difficult-for-beginners">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-177.png)

</div>
<div class="r-card-text">
【ビギナー向け】TypeScriptを難しく感じる理由と、その解決法
</div>
</div>
</a>
</div>

<br/>

プログラミング言語の本質的な役割は「データを操作すること」にあります。

TypeScriptの「型」は、そのデータが「どんな種類のものか」を明示するための仕組みです。

この前提を押さえておくと、TypeScriptで型を書く理由を納得しやすくなります。

「プログラミングとは何か」という問いや、データが重要である理由はこちらの記事をご覧ください▼

• <a href="/blog/purpose-of-programming">「プログラミングとは何か？」に一言で答えると……</a>

## TypeScriptをラクに学ぶコツ

TypeScriptは、コード量の多い中〜大規模アプリや、複数の開発者が関わるチーム開発で真価を発揮します。

しかしビギナーがそういった環境でいきなり学ぼうとするのは現実的ではありません。

その必要もありません。

最初はコード量の少ない簡単なReactアプリでTypeScriptを使い、「慣れる」ということが大切です。

慣れてしまえば、TypeScriptのメリットは自然と見えてきます。

Reactビギナーの方は、下記ガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

## React × TypeScriptの始め方

React開発でTypeScriptを使う場合、現在の標準はVite × React × TypeScriptの構成です。

セットアップの詳しい手順はこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/react-vite-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-237.png)

</div>
<div class="r-card-text">
【Vite + React + TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

2026年のReact開発で標準となっているVite、そしてその開発環境の構築はこちらのガイドから進めてください。

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

## TypeScriptの各テーマを深く学ぶ

### コンポーネント間でのやりとり

ReactでTypeScriptを使い始めると、コンポーネント間でデータを渡す場面で型の記述が必要になります。

さらに`export default`と`export`の違い、import時の`{ }`の有無など、最初は混乱しやすい部分です。

しかしこれらのルールも、一度理解してしまえば自信を持って使えます。

下記記事で整理しているので目を通してください▼

<div class="rich-card-link">
<a href="/blog/import-export-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-138.png)

</div>
<div class="r-card-text">
Reactのexportとimportを全解説｜default export・named exportの違いと使い方
</div>
</div>
</a>
</div>

<br/>

### イベントの型

React × TypeScript開発で特につまずきやすいのが、イベントの型の書き方です。

同じイベントでも、書く場所によって3つの記法があります。

---

① インライン記法（型の記述が不要）\
② パラメータ横に書く記法\
③ イベント名の横に書く記法

---

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/typescript-react-event-3-annotations">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-144.png)

</div>
<div class="r-card-text">
【全解説】React + TypeScriptのイベント型の書き方3パターン
</div>
</div>
</a>
</div>

<br/>

### ジェネリクス

TypeScriptを学んでいくと、必ず`<T>`や`<K>`のついたコードに出会います。

これが「ジェネリクス」です。

見た目から「難しそう」と感じる人が多いですが、ひとつひとつ理解していけばシンプルな仕組みです。

ジェネリクスは次の4回に分けて解説しています▼

<div class="rich-card-link">
<a href="/blog/typescript-generics-1">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-139.png)

</div>
<div class="r-card-text">
ジェネリクスとは？TypeScriptでの書き方・使い方を2分で理解する【初心者向け】
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/typescript-generics-2">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-140.png)

</div>
<div class="r-card-text">
TypeScriptジェネリクスをサクッと理解【functionに対して使うジェネリクス】
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/typescript-generics-3">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-141.png)

</div>
<div class="r-card-text">
TypeScriptジェネリクスをサクッと理解【型定義とfunction両方に対して使うジェネリクス】
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/typescript-generics-4">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-142.png)

</div>
<div class="r-card-text">
TypeScriptジェネリクスをサクッと理解【複数のジェネリクスをつかう】
</div>
</div>
</a>
</div>

<br/>

### Zod

TypeScriptとセットで語られることが増えたツールに「Zod」があります。

フォームやAPIから受け取るデータが「正しい形かどうか」を検証する処理はどんなアプリにも必要ですが、JavaScriptだけでそれを書くと冗長になります。

このバリデーション処理を短く、かつ安全に書けるようにするのがZodです。

しかしZodが急速に広まった最大の理由は、機能の良さだけではありません。

TypeScriptでは「型」を明示的に書く必要がありますが、Zodを使うとその型が自動で推論されるため、コード量をコンパクトに抑えられるのです。

つまりZodの人気の背景には、TypeScriptの普及そのものがあります。

「そもそもバリデーションとは何か」というところから丁寧に説明しているので、Zodが初めての方はまずこちらをご覧ください▼

<div class="rich-card-link">
<a href="/blog/what-is-zod">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-203.png)

</div>
<div class="r-card-text">
Zodとは？読み方やTypeScriptでの使い方を初心者向けに2分で解説
</div>
</div>
</a>
</div>

<br/>

## TypeScriptは「慣れる」もの

### ビギナーが感じる違和感

Reactと同じで、TypeScriptも最初は違和感があります。

「_なんでこんな面倒なことをするのか_」

私自身、TypeScriptを学び始めたときの第一印象はそれでした。

私自身が非IT出身だったというバックグラウンドも、理由としてはあったのだと思います。

私についての詳しい自己紹介はこちらの記事にあるので、目を通してみてください▼

<div class="rich-card-link">
<a href="/blog/self-introduction">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-250.png)

</div>
<div class="r-card-text">
自己紹介（三好アキについて）
</div>
</div>
</a>
</div>

<br/>

しかしTypeScript使い続けるうちに、型があることでコードの意図が明確になり、エラーが事前に防げることの価値が少しずつ見えてきます。

難しいのではなく、慣れていないだけです。

そしてTypeScriptは、特に「慣れ」が大きい言語であると個人的に感じます。

なので、TypeScriptは「目で読む」のではなく「実際に手を動かしてコードを書く」が重要です。

コードを書き、慣れていけば、必ず分かるようになります。

Reactそのものを難しく感じている方は、こちらのガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

TypeScriptに慣れてきたら、次のステップとして知っておきたいのがRSC（Reactサーバーコンポーネント）とReact 19の新機能です。

TypeScriptと組み合わせて使うNext.jsの実践的な開発では、これらの新しい技術への理解が欠かせません。

体系的にまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

現在のフロントエンド開発では、React + TypeScript + Next.jsの組み合わせもよく目にします。

Next.jsとは何か、React単体との違い、どのような場面で使うのかについては、下記記事にまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

### なぜ入門教材にTypeScriptが使われていないことがあるのか

私の教材にはJavaScriptを使っているものが多くあります。

「現場ではTypeScriptが標準なのに、なぜJavaScriptなのか？」という疑問を抱く人もいるでしょう。

---

TypeScriptとTailwindなどのCSSフレームワークを同時に使った教材では、学ぶべき事柄が一度に増えます。

「Next.jsを学びたい」と思って始めた教材に、TypeScriptのエラーとTailwindのクラス名が入り乱れていると、「何がNext.jsで、何がTypeScriptの問題なのか」の区別も難しくなります。

【 教材の難易度を意図的に下げることで、学びたいものの核心に集中させる 】

これが私の教材の意図です。

さらに詳しく知りたい方は下記記事をご覧ください▼

• <a href="/blog/reasons-for-not-using-ts-css-frameworks">私がTypeScriptやTailwindを使わない理由</a>

## よくある質問

### ReactはJavaScriptでも書けます。TypeScriptを使う必要はありますか？

2026年の現場では、TypeScriptを使うのがほぼデフォルトです。

チーム開発や中〜大規模アプリでは、型がないことで発生する問題が大きくなるからです。

最初からTypeScriptで書く習慣をつけておくと、後から移行する手間がかかりません。

### JavaScriptをまだ完全に理解していませんが、TypeScriptを始めていいですか？

始めましょう。

TypeScriptはJavaScriptの上に型の仕組みを追加したものなので、「JavaScriptを書きながらTypeScriptにも慣れていく」という進め方ができます。

「JavaScriptを完全に理解してから次に進む」という完璧主義の考え方では、何も始められません。

### ジェネリクスは実務で必須ですか？

必ず使うわけではありませんが、他の人が書いたコードを読む場面では頻繁に出てきます。

「_書けないけど読める・理解できる_」。

これを最初の目標にするのが現実的です。

<a href="/present?magnet=first-study-guide&from=/blog/guide-typescript-for-react-programmers">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/guide-typescript-for-react-programmers)

### React × TypeScriptを体系的に学べる教材はありますか？

あります。

「なぜそうなるのか」、「どうつながっているのか」を軸に、React × TypeScriptの全体像を学べる教材です▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/guide-typescript-for-react-programmers">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/guide-typescript-for-react-programmers)

### 社内でTypeScriptを導入したいのですがうまくいきません

「導入はしたが、誰も使いこなせていない」、「`any`が乱用されていてJavaScriptと変わらない」、「エラーが増えて開発が遅くなった」。

TypeScript社内導入でよくある失敗には、実は共通したパターンがあります。

最も多い失敗は「TypeScript導入自体をゴールにしてしまうこと」です。

パッケージを入れて設定ファイルを用意したら「導入完了」とするケースですが、これでは実態はJavaScriptのままです。

型の概念はJavaScriptにはない考え方なので、ツールを入れるだけでなく教育が必ず必要です。

具体的な失敗パターン3つとその対策については下記記事をご覧ください▼

• <a href="/blog/typescript-corporate-typical-mistakes">TypeScript導入に失敗する企業がやっていること【原因と対策も解説】</a>

### React × TypeScriptを実践レベルまで身につけたい方へ

「React × TypeScriptマスター」という教材があります。

これは2024年の初版リリースから2年間、何度もアップデートを重ねてきた教材です。

教材を作った理由や利用者の声、返金保証の話などを下記の記事で詳しく書いてあるので、参考にしてください▼

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/guide-typescript-for-react-programmers">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/guide-typescript-for-react-programmers)

---

# 【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説

URL: https://monotein.com/blog/guide-react-is-difficult-and-how-to-overcome
公開日: 2026.6.12
更新日: 2026.6.16
概要: Reactを難しく感じる人は多くいます。しかし問題はReactそのものではなく、JavaScriptやstate、コンポーネントなど前提知識にあることが多いのです。初心者がつまずく理由と乗り越え方を完全解説します。

## Reactは本当に難しいのか？

「_Reactって難しい...._」と感じるビギナーは多くいます。

しかし実際のところ、Reactそのものが難しいのではありません。

「難しく感じさせる仕組み」があるのです。

それを理解すれば、難しさの正体が見えてきます。

そして乗り越え方も分かります。

本記事では、Reactを難しく感じる理由を整理した上で、その乗り越え方と、各テーマを深く掘り下げた記事を紹介します。

## そもそもReactを学ぶ意味はあるのか？

難しさの話の前に、「_そもそもAI時代にReactを学ぶ意味はあるのか_」という疑問から始めましょう。

AIがReactのコードを書いてくれる時代です。

「_もう人間が学ばなくてもいいのでは？_」という考えは自然です。

しかし現実は逆の方向に動いています。

AIが書いてくるコードの大半はReactベースです。

AIはネット上の情報を学んでおり、ネット上ではReact関連の情報が最も多いからです。

そして「AIの書いたコードが正しいか」、「自分の意図通りか」を判断するのは、人間です。

AIは責任を取れません。

コードの責任は、AIに指示を出した人間が負うのです。

AIを使うからこそ、実はReactの正確な知識と理解がより重要になっています。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/ai-why-react-importance-increasing">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-223.png)

</div>
<div class="r-card-text">
AI時代にReactを学ぶ理由【初心者こそReactが最適なワケ】
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/ai-why-studying-programming">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-226.png)

</div>
<div class="r-card-text">
生成AI時代にプログラミングを学ぶワケ
</div>
</div>
</a>
</div>

<br/>

AIが書いてくるReactコードには、必ず登場する3つの概念があります。

最低限これだけは理解しておきましょう▼

• <a href="/blog/react-3-key-concepts-in-ai-era">ChatGPTに頼る前に理解すべきReactの3つの概念</a>

<a href="/present?magnet=first-study-guide&from=/blog/guide-react-is-difficult-and-how-to-overcome">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/guide-react-is-difficult-and-how-to-overcome)

## Reactを難しく感じる理由

### ① JavaScriptの理解が追いついていない

Reactでつまずく人の多くは、実はReactではなくJavaScriptでつまずいています。

ReactのコードのベースはJavaScriptのfunction（関数）です。

そしてfunction（関数）には、書き方にバリエーションがいくつもあります。

そこをしっかり理解していないと、いつまでもReactのコードを「なんとなく」しか理解できません。

この点について詳しく紹介した記事が、あるので参考にしてください▼

<div class="rich-card-link">
<a href="/blog/why-react-is-difficult-to-learn-1">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-134.png)

</div>
<div class="r-card-text">
Reactを難しく感じる理由と、その解決法【前編】
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/why-react-is-difficult-to-learn-2">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-135.png)

</div>
<div class="r-card-text">
Reactを難しく感じる理由と、その解決法【後編】
</div>
</div>
</a>
</div>

<br/>

また、Reactではコンポーネントを読み込むときに`import`と`export`を使います。

`export default`と`export`の違い、`{ }`の有無など、最初は混乱しやすい部分です。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/import-export-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-138.png)

</div>
<div class="r-card-text">
Reactのexportとimportを全解説｜default export・named exportの違いと使い方
</div>
</div>
</a>
</div>

<br/>

functionの記法や`import`／`export`の正確な知識は、Reactを理解する大きな一歩になります。

なお、React開発の前提となる開発環境のセットアップや、現在のReact開発のスタンダード「React + Vite」について理解したい方は、こちらのガイドをどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

### ② 状態（state）という新概念

HTMLとCSSには「状態」という概念がありません。

しかしReactでは、状態（state）がUIの変化をコントロールする中心的な仕組みです。

```jsx
const [count, setCount] = useState(0)
```

この1行が何をしているのか、最初は見当がつかないはずです。

「_stateとは何か？_」\
「_そもそも状態とは何か？_」

これらの疑問を解くことが、Reactを理解する近道です。

詳しくはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/what-is-state-in-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-133.png)

</div>
<div class="r-card-text">
Reactのstateとは？「状態」の意味と使い方を初心者向けにやさしく解説
</div>
</div>
</a>
</div>

<br/>

### ③ 情報が多すぎて、何から学べばいいか分からない

Reactに関する情報はネット上に大量にあります。

---

• YouTube動画\
• Qiitaの記事\
• Zenn\
• 英語の公式ドキュメント\
• Stack Overflow.......

---

これらを少しずつつまみ食いしていると、どうしても知識は断片的になります。

「_聞いたことはある、でも使えない_」、\
「_使ったことはある、でも仕組みは分かっていない_」という状態です。

自分の求める情報をピンポイントで入手できることは、とても便利です。とても効率的です。

しかしそれは全体像の把握を困難にもします。

そしてAI時代になり、このような「知識の断片化」はさらに加速しているのです。

詳しくは下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/ai-era-fragmental-knowledge">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-252.png)

</div>
<div class="r-card-text">
AI時代のReact学習で加速する「断片学習」とは？
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/ai-era-why-more-people-learn-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-251.png)

</div>
<div class="r-card-text">
AIでReactアプリを作れる時代。なぜReact学習者は増えている？
</div>
</div>
</a>
</div>

<br/>

## Reactを難しく感じるのは「順番の問題」でもある

Reactが難しく感じる理由の多くは、「難しいことに取り組んでいるから」ではなく、前段階の理解や知識が不足しているところにあります。

Reactは積み上げ式の技術です。

---

JavaScript\
↓\
JSX\
↓\
コンポーネント\
↓\
state\
↓\
非同期処理\
↓\
etc...

---

ところどころで先走っても問題はありません。

しかし、確かな理解とスキルを身につけるには、前段階のステップをしっかり理解してから次に進む必要があります。

順番で理解が積み上がっていかないと、いずれは「分からないことが分からない」という壁にぶつかります。

つまり難しく感じる原因は、「目の前のことが難しい」というよりもむしろ「一つ前のステップの理解不足」にあるのです。

Reactを学ぶ全体の流れを確認したい人は、こちらの記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/frontend-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-214.png)

</div>
<div class="r-card-text">
【2026年版】React・TypeScript・Next.js・AIを最短で学ぶロードマップ
</div>
</div>
</a>
</div>

<br/>

Reactを難しく感じている人の多くは、自分の能力不足を疑います。

しかし私はそうは思っていません。

私自身も非IT系出身で、ReactどころかJavaScriptや専門用語の段階で何度もつまずいたからです。

そのため「専門用語なしでプログラミング」をテーマに教材制作や執筆を行っています。

詳しい自己紹介はこちら▼

<div class="rich-card-link">
<a href="/blog/self-introduction">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-250.png)

</div>
<div class="r-card-text">
自己紹介（三好アキについて）
</div>
</div>
</a>
</div>

<br/>

## 乗り越え方

### JavaScriptを理解する

Reactを難しく感じたら、まず疑うべきはJavaScriptの理解です。

関数の記法、働き、アロー関数、分割代入、非同期処理などを一度整理してみましょう。

「Reactが難しい」と思っていた問題が、JavaScriptの知識で解決することはよくあります。

### 「理解してから進む」をやめる

Reactは実際に書いてみないと分からないことが多い技術です。

頭で理解しようとするより、手を動かしながら「あ、こういうことかな」と分かる瞬間を大切にしてください。

最初は分からなくていいのです。

【 コードを書いて、動かして、少しずつ分かっていく 】

こういう積み重ねが前進につながります。

### 停滞期があることを知っておく

学習を続けていると、必ず「いくら勉強しても進んでいる気がしない」という時期が訪れます。

停滞期と呼ばれるものです。

そして「停滞期」という名前が存在しているところからも分かるように、これは誰もが経験するものです。

この停滞期の正体と、その乗り越え方はこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/learning-curve">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-178.png)

</div>
<div class="r-card-text">
学習曲線とは？プログラミング初心者が必ずぶつかる停滞期の正体と乗り越え方
</div>
</div>
</a>
</div>

<br/>

### 全体像を先に把握する

断片的な情報を集め続けていても、全体は見えません。

Reactの様々なコンセプト（コンポーネント、state、props、レンダリングの仕組みなど）をまとまった形で一度学ぶことが、Reactをマスターする近道です。

【 全体像を先に知ること 】

それが遠回りのように見えて実は近道です。

### ReactとTypeScriptをなぜ一緒に学ぶのか

2026年の現場では、ReactとTypeScriptはセットで使うのが標準です。

ReactだけでなくTypeScriptも体系的に学んでおく必要があります。

「なぜ一緒に学ぶのか」という疑問は、下記の記事で解消してください。

TypeScriptを難しく感じる理由から、React開発で必要な知識まで幅広くまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

ReactとTypeScriptをセットで学んだ後、現場で使われている技術の全体像として知っておきたいのがRSC（Reactサーバーコンポーネント）とReact 19の新機能です。

Next.jsを使った実践的な開発へ進む前に、こちらのガイドで体系的に把握しておきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

## よくある質問

### Reactはライブラリですか？フレームワークですか？この言葉の違いが気になっています

どちらでも構いません。

厳密にはライブラリですが、フレームワークと呼ばれることが多々あります。

なぜこの議論が起きるのか、なぜ私がどちらでもいいと考えているのかはこちらで解説しています▼

• <a href="/blog/react-library-or-framework">Reactはライブラリ？フレームワーク？違いと意味を初心者向けに分かりやすく解説</a>

Reactがなぜ無料で使えるか、その理由が気になる方はこちらもどうぞ▼

• <a href="/blog/why-react-is-free-to-use">Reactはなぜ無料で使えるのか？</a>

### ReactとVue、どっちを選べばいいか迷っています。

私も迷いました。

学習というのは、時間もエネルギーもかかるものです。

失敗したくありません。

しかし私は最終的にReactを選びました。

その理由や、私がVueやAngularを選ばなかった理由は、下記記事で詳しく紹介しています。

<div class="rich-card-link">
<a href="/blog/why-i-chose-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-210.png)

</div>
<div class="r-card-text">
私がReactを選んだ理由（Not Angular or Vue）
</div>
</div>
</a>
</div>

<br/>

### Reactを学ぶ前に、JavaScriptは必須ですか？

必須ではありません。

JavaScriptの知識ゼロでも、HTML／CSSの知識だけでReactには入門できます。

実際に私は5年以上、その学習方法を推奨・実践してきました。

Reactの初歩はHTML／CSSの知識だけで十分だからです。

しかし「Reactに入門する」から「Reactを使える」というステージに進むには、JavaScriptの知識と理解が必須になります。

---

まずはReactに触ってみる。

そうすれば自分の目指していたものが、実はそこまで高い山でなかったことに気がつくはずです。

さらに自分に何が足りないのかも見えてくるでしょう。

まずはReactに触ってみてください。

HTML／CSSの知識だけで入門する方法を下記記事で紹介しています▼

<div class="rich-card-link">
<a href="/blog/react-vite-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-148.png)

</div>
<div class="r-card-text">
Vite + Reactの始め方｜インストールから起動まで3分で完了【2026年版】
</div>
</div>
</a>
</div>

<br/>

### AI時代にプログラミングを学ぶ意味はまだありますか？

あります。

AIはコードを書いてくれますが、判断と責任はすべて人間が負います。

むしろAIが浸透するほど、正確な知識の重要性は増しているといえるでしょう。

AI時代のプログラミングについて興味のある方は、下記の記事に目を通してみてください▼

• <a href="/blog/ai-programming-importance-decreasing">AI時代になって、プログラミングを学ぶ価値が下がった</a>

• <a href="/blog/ai-knowledge-is-necessary-for-thinking">AIがコードを書ける時代、『なぜ』人間の開発者に知識が『まだ』求められているのか？</a>

AI時代になり、開発者の間では学習熱が高まっています。

この逆説的な現象については下記記事をご覧ください▼

• <a href="/blog/ai-leads-developers-learning-fundamentals">AIが浸透する中、開発現場で起きている意外なこと</a>

### 今からReactを学び始めても遅くないですか？

遅くありません。

「完璧なタイミング」というものは永遠に来ないので、興味を持った今が始めどきです。

もう少し背中を押されたい方は、下記記事にも目を通してみてください▼

• <a href="/blog/perfect-moment-will-never-come">今さらReactを学び始めていいのだろうか、という不安感</a>

<a href="/present?magnet=first-study-guide&from=/blog/guide-react-is-difficult-and-how-to-overcome">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/guide-react-is-difficult-and-how-to-overcome)

### Next.jsはいつ学べばいいですか？

現在のReact開発では、Next.jsを使うことが非常に増えています。

「Reactを学んだら次は何を勉強すればいいの？」という方は、下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

### 独学でReactをマスターできますか？

できます。

ただし「何を学ぶか」と「どういう順番で学ぶか」の2つを間違えなければ、という条件がつきます。

断片的な情報をつまみ食いし続けると、時間だけが過ぎていきます。

全体を体系的に学べる教材を選ぶことが独学成功の鍵です。

下記ガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

### React入門のあと、AIのコードを正しく評価、判断できる実力をつけるには？

「React × TypeScriptマスター」という教材があります。

これは2024年の初版リリースから2年間、何度もアップデートを重ねてきた教材です。

教材を作った理由や利用者の声、返金保証を付けた経緯などは下記の記事で詳しく書いています▼

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/guide-react-is-difficult-and-how-to-overcome">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/guide-react-is-difficult-and-how-to-overcome)

---

# 【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説

URL: https://monotein.com/blog/guide-react-vite
公開日: 2026.6.9
更新日: 2026.6.16
概要: React開発の第一歩となるViteの役割からインストール方法、Next.jsとの違い、フォルダ構成、よくあるエラー対処法まで初心者向けに解説。React学習で次に何を学ぶべきかも紹介します。

## まず「Vite」とは何か？

Reactで始めるとき、多くのビギナーが次の壁にぶつかります。

「_どうやって始めればいいの？_」

Reactはそれ単体では動きません。

「Reactを開発するための環境」を最初に用意する必要があります。

ここで使われるのが「Vite（ヴィート）」です。

Viteとは、Reactアプリの開発環境をセットアップするツール。

具体的には次のことをViteはしてくれます。

---

• ローカル環境でReactを動かす

• コードを変更したとき、ブラウザに即反映する

• 完成したアプリを本番用にまとめる（ビルド）

---

Reactをゲームソフトだとすると、Viteはゲーム機です。

ソフトだけ持っていても、それを動かすゲーム機がなければ遊べません。

Reactを開発・実行できる環境を用意するのがViteの役割です。

## なぜViteなのか？

少し前までは、Reactの開発環境ツールには「create-react-app（CRA）」が使われていました。

しかし数年前にcreate-react-appの開発はほぼ止まり、Reactの公式ドキュメントでも推奨されなくなっています。

現在Reactを始めるなら、Viteが唯一の選択肢です。

理由は3つあります。

---

① シンプル\
余計な設定がなく、初心者にも扱いやすい構成になっています。

② メンテナンスが活発\
2026年現在も活発に更新が続いており、将来性があります。

③ 起動が速い\
create-react-appと比べ、開発サーバーの起動速度が高速です。

「コードの変更が反映されるまで待つ」というストレスがほぼなくなりました。

---

「今Reactを始めるならVite」と考えてください。

<a href="/present?magnet=first-study-guide&from=/blog/guide-react-vite">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&from=/blog/guide-react-vite)

## Next.jsとの違いは？

Viteの説明をすると必ず出てくる疑問があります。

「_Next.jsとは何が違うの？_」

この2つは似たようなことができるので、使い分けで混乱する人は多くいます。

### Vite + React

• フロントエンドのみ。サーバー機能は持たない

• シンプルなウェブアプリ、管理画面、SPA開発に向いている（SPAについては下記の記事参照）

<div class="rich-card-link">
<a href="/blog/about-spa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-180.png)

</div>
<div class="r-card-text">
【今スグ分かる】『SPA』とは？（シングル・ページ・アプリケーションの仕組み）
</div>
</div>
</a>
</div>

<br/>

### Next.js

• フロントとバックエンドを一体で扱える

• SEOが必要なウェブサイト、フルスタックアプリに向いている

---

「どちらを選ぶべきか」という答えは、何を作るかによって変わります。

詳しくはこちらの記事で解説しています▼

<div class="rich-card-link">
<a href="/blog/react-vite-or-nextjs-which-to-choose">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-187.png)

</div>
<div class="r-card-text">
【2026年版】React + ViteとNext.js、どちらを選ぶべきか？
</div>
</div>
</a>
</div>

<br/>

なお、ViteとNext.jsのどちらを選ぶかを考える前に、ウェブアプリの基礎的な構造を理解しておくことは必須です。

「フロントエンドとバックエンドの役割」、「クライアントとサーバーの違い」といった基礎知識は下記記事で確認してください▼

<div class="rich-card-link">
<a href="/blog/frontend-and-backend">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-82.png)

</div>
<div class="r-card-text">
フロントエンドとバックエンドの違いとは？APIやサーバーの役割も初心者向けに全解説
</div>
</div>
</a>
</div>

<br/>

## Vite + Reactのセットアップ方法

では実際に始めていきましょう。

必要なツールはターミナル（コマンドを入力する画面）です。

### ステップ① Node.jsをインストールする

Viteを使うにはNode.jsが必須です。

まだインストールしていない方は、[Node.jsの公式サイト](https://nodejs.org)から「LTS版」をインストールしてください。

インストール後、ターミナルで下記を入力して確認します。

```shell
node -v
```

バージョン番号が表示されればインストールができています。

なぜフロントエンドのReactの開発でNode.jsが必要なのか、疑問に思った方はこちらをどうぞ▼

<div class="rich-card-link">
<a href="/blog/why-nodejs-is-needed">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-235.png)

</div>
<div class="r-card-text">
なぜフロントエンドのReact開発でNode.jsが必要なの？
</div>
</div>
</a>
</div>

<br/>

なお、はじめてターミナルを触る方へ。

ターミナルに表示されるユーザー名は自由に変更できます。

自分の名前や好きな文字列にしておくと、より快適に開発ができるでしょう▼

<div class="rich-card-link">
<a href="/blog/how-to-change-names-in-terminal-zsh">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-153.png)

</div>
<div class="r-card-text">
ターミナル（zsh）の名前とホスト名を変更する方法
</div>
</div>
</a>
</div>

<br/>

### ステップ② プロジェクトを作る

ターミナルで次のように入力してください。

```shell
npm create vite@latest
```

「Enter」キーを押して実行すると、プロジェクト名やフレームワークの選択を求められます。

セットアップのより詳しい手順と、各ステップの意味については、こちらの記事で画像つきで解説しています▼

<div class="rich-card-link">
<a href="/blog/react-vite-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-148.png)

</div>
<div class="r-card-text">
Vite + Reactの始め方｜インストールから起動まで3分で完了【2026年版】
</div>
</div>
</a>
</div>

<br/>

言語選択ではJavaScriptだけでなく、TypeScriptも出てきます。

実は2026年のReact開発現場では、TypeScriptを使うのが標準です。

ReactとTypeScriptを最初から一緒に学ぶ方法は、こちらの記事で解説しています▼

<div class="rich-card-link">
<a href="/blog/react-vite-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-237.png)

</div>
<div class="r-card-text">
【Vite + React + TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

### ステップ③ 起動する

以下のコマンドを入れましょう。

```shell
cd my-app
npm install
npm run dev
```

そしてブラウザで`http://localhost:5173`を開いてください。

Vite + Reactの画面が表示されれば、開発環境のセットアップが成功です。

## 最初に理解しておくべきフォルダ構成

作成されたフォルダを見ると、中にはたくさんのファイルがあります。

最初はすべてを理解しなくて大丈夫です。

押さえるべきものは次の4つだけです。

### srcフォルダ

ここにReactのコードを書いていきます。

作業の99%はこのフォルダの中で行われます。

### App.jsx（またはApp.tsx）

最初に表示される画面のコンポーネントです。

ここを書き換えるところからReact学習は始まります。

### index.html

Reactアプリの土台となるHTMLファイルです。

Reactはこのファイルの中に埋め込まれる形で動きます。

### main.jsx（またはmain.tsx）

Reactコードと`index.html`の接点となるファイルです。

これが`index.html`とつながって、ブラウザにReactが表示されます。

## よく出るエラーと対処法

Viteでの開発中、初心者がよくぶつかるエラーを2つ紹介します。

### npm installでエラーが出る

Node.jsのバージョンが古い場合に起きることがあります。

`node -v`でバージョンを確認し、20以上でなければNode.jsを再インストールしてください。

### ターミナルに大量のメッセージが表示される

`npm run dev`を実行したとき、ターミナルにViteのメッセージが大量に表示されることがあります。

気になる場合は、表示を消す方法をこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/react-vite-turns-off-terminal-messages">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-208.png)

</div>
<div class="r-card-text">
【React + Vite】開発時のターミナル表示を消す方法
</div>
</div>
</a>
</div>

<br/>

## コード品質を高めるツール

開発環境が整ったら、コードの見た目を整えたり、ミスを自動で検出してくれるツールも導入しておきましょう。

Prettierはコードのインデントや改行などの「見た目」を整えてくれます▼

<div class="rich-card-link">
<a href="/blog/what-is-prettier">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-238.png)

</div>
<div class="r-card-text">
Prettierとは？インストールから設定、使い方まで初心者向けに全解説
</div>
</div>
</a>
</div>

<br/>

ESLintはコードのルール違反やバグを検出してくれます▼

<div class="rich-card-link">
<a href="/blog/what-is-eslint">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-239.png)

</div>
<div class="r-card-text">
ESLintとは？Biomeとの違い・使い方を初心者向けに解説
</div>
</div>
</a>
</div>

<br/>

そしてBiome（バイオーム）は新しいツールで、これひとつでPrettierとESLint、2つの役割をこなしてくれます▼

<div class="rich-card-link">
<a href="/blog/what-is-biome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-240.png)

</div>
<div class="r-card-text">
Biomeとは？ESLint・Prettierとの違い、使い方を2分で解説
</div>
</div>
</a>
</div>

<br/>

## React + Viteの次に学ぶこと

### ページ設定（ルーティング）

Reactアプリでは、ページの切り替えに専用のツールを使います。

React RouterやTanStack Routerというツールが人気です。

しかし実はそれらを使わずともページ設定は可能で、下記記事ではその方法を紹介しています。

ファイルをページとして使う方法はこちら▼

<div class="rich-card-link">
<a href="/blog/react-app-routing-without-external-packages-2">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-231.png)

</div>
<div class="r-card-text">
React RouterやTanStackを使わないページ移動の実装方法（File-based routing）
</div>
</div>
</a>
</div>

<br/>

コードでページを設定する方法はこちら▼

<div class="rich-card-link">
<a href="/blog/react-app-routing-without-external-packages-1">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-227.png)

</div>
<div class="r-card-text">
React RouterやTanStackを使わないページ移動の実装方法（Code-based routing）
</div>
</div>
</a>
</div>

<br/>

### Reactを難しいと感じている場合

ここまでで、ViteでReactプロジェクトのセットアップと、ブラウザに画面を表示するところまではできたと思います。

「React開発のスタートライン」には立てたことになります。

しかしReact学習を続けていくと、「なぜこんなに難しく感じるのだろう？」、「何から学べばいいのだろう？」と悩む瞬間が必ずあります。

私自身も非IT系出身で、専門用語や学習方法に何度も苦しみました。

その経験から【専門用語なしでプログラミング】というテーマで教材制作や執筆活動をしています。

詳しくは自己紹介の記事に目を通してください▼

<div class="rich-card-link">
<a href="/blog/self-introduction">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-250.png)

</div>
<div class="r-card-text">
自己紹介（三好アキについて）
</div>
</div>
</a>
</div>

<br/>

Reactを少し触ってみて難しく感じている方は、こちらの記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/why-react-is-difficult-to-learn-1">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-134.png)

</div>
<div class="r-card-text">
Reactを難しく感じる理由と、その解決法
</div>
</div>
</a>
</div>

<br/>

より包括的にReactを難しく感じる理由、そして乗り越え方をひとつにまとめたガイドもあります▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

## よくある質問

### Vite以外の選択肢はありますか？

先ほども少し触れましたが、React開発ではNext.jsも選択肢のひとつです。

ただしNext.jsはサーバーサイドの機能を含む分、学習する範囲が広くなります。

「まずReactそのものを学びたい」という方には、Viteを使ったシンプルなReactの開発環境から始めるのがおすすめです。

Next.jsを包括的に知りたい方は下記記事をご覧ください。

様々な面からNext.jsを紹介しています。

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

### MacとWindowsで手順は違いますか？

コマンド自体は同じです。

ターミナルアプリが異なります（Macは「ターミナル」、Windowsは「PowerShell」または「コマンドプロンプト」）が、入力するコマンドに違いはありません。

### Reactは勉強はどのように進めていけばいいですか？

HTML・CSSからReact・TypeScript・Next.jsまで、各ステップで何を学ぶかを整理した学習ロードマップがあります。

最初に学習の全体像を確認しておけば、スムーズに進むででしょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

### JavaScriptとTypeScript、どちらで始めるべきですか？

迷うならTypeScriptから始めてみましょう。

2026年の現場ではTypeScriptが標準になっているからです。

最初からTypeScriptで書く習慣をつけておけば、あとが楽になります。

TypeScriptがなぜ難しく感じるのか、そしてどう乗り越えるかはこちらで解説しています▼

<div class="rich-card-link">
<a href="/blog/why-typescript-is-difficult-for-beginners">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-177.png)

</div>
<div class="r-card-text">
【ビギナー向け】TypeScriptを難しく感じる理由と、その解決法
</div>
</div>
</a>
</div>

<br/>

TypeScriptをReact開発でどう使うか、始め方から各テーマまでひとつにまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=/blog/guide-react-vite">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/guide-react-vite)

### ReactサーバーコンポーネントやReact 19の新機能はどこで学べますか？

Reactの基礎を身につけた後、次のステップとして学びたいのがReactサーバーコンポーネント（RSC）やReact 19の新機能です。

SPA・SSR・RSCという流れと、useActionState・useOptimisticといった新しいHooksまで、こちらのガイドで解説しています▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド
</div>
</div>
</a>
</div>

<br/>

### 社内でReactを導入・研修したい場合はどうすればいいですか？

個人学習としてではなく、チームや会社でReactを導入したい、あるいは社員への研修を検討している担当者の方向けの情報をまとめています。

• <a href="/blog/corporate-react-engineers-road-map">未経験社員をReactエンジニアへ。失敗しない教育ロードマップと研修のポイント</a>

• <a href="/blog/choosing-react-corporate-lessons">React研修の失敗しない選び方｜外注研修の「現場で使えない」を防ぐ3つのポイント</a>

• <a href="/blog/important-thing-teaching-corporate-react">ビギナーへのReact研修。教える前に知っておきたかった3つのこと</a>

なお、次節で紹介する「React × TypeScriptマスター」という教材は、元は個人の学習者向けに作ったものですが、法人の研修などでも使われています（下記記事参照）。

• <a href="/blog/master-courses-for-corporate-training">個人向けに作ったReact教材が、法人の社内研修でも使われていた話</a>

### Reactを体系的に学ぶにはどうすればいいですか？

React入門ができても、就職や案件獲得、そしてAIが書いたコードを判断し、自分の作りたいものを形にするには、さらに実践的なスキルを身につける必要があります。

2026年のフロントエンド開発で必要なスキルをカバーした「React × TypeScriptマスター」という教材があります。

これは2024年の初版リリースから2年間、何度もアップデートを重ねてきた教材です。

教材を作った理由や利用者の声、返金保証の話などは下記の記事で詳しく書いています▼

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/guide-react-vite">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/guide-react-vite)

---

# 【AI × React】アプリ開発の新刊が出ました

URL: https://monotein.com/blog/new-book-release-ai-react
公開日: 2026.5.29
更新日: 2026.6.7
概要: AIを組み込んだReactアプリの作り方を専門用語なしで丁寧に解説する新刊を出版しました。好評の『はじめてつくるReactアプリ』の続編です。HTMLとCSSだけが前提知識。0円で完成・公開まで完結します。

## AI × React新刊リリース
*【追記】発売1週間でAmazonのランキング1位になりました ▼

<div class="img-border">

![preview-1](../../images/singleBlogPageImages/blogArticleImages/amazon-ranking/react-ai-7june2026.jpg)

</div>

先日、新刊『はじめてつくるAI × Reactアプリ』をリリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0H32RKRJH">
    <img class="bc-cover" src="/images/commonImg/reactbook-ai.svg" alt="はじめてつくるAI × Reactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるAI × Reactアプリ</p>
        <p class="bc-desc">【2026年5月発売】AIアプリをReactで作れるスキルが身につく本</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

この本は、リリースから5年以上読まれ続けているReact入門書『はじめてつくるReactアプリ』に、AI機能開発の内容を追加したものです。
 
TypeScriptを使ったバージョン（『はじめてつくるAI × Reactアプリ with TypeScript』）は、半月ほど前にリリース済みです▼

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0H1R95C2C">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts-ai.svg" alt="はじめてつくるAI × Reactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるAI × Reactアプリ with TypeScript</p>
        <p class="bc-desc">【2026年5月発売】AIアプリをReact × TypeScriptで作れるスキルが身につく本</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

## 本書の特徴
私の他の入門書同様、この本も下記のようなコンセプトで書いてあります。
 
---
 
▶︎ 2〜3時間で成功体験を作れる\
▶︎ 作りながら学ぶハンズオン形式\
▶︎ 専門用語を使わないビギナーフレンドリーな解説\
▶︎ 最新のReactバージョン19情報\
▶︎ 0円で開発・完成・公開までできる
 
----
 
前提知識はHTMLとCSSだけ。

JavaScriptの知識・経験は不要です。
 
本書では、都市名を入力すると、その日の天気と、AIが提案するおすすめの服装が表示されるReactアプリを開発・公開します。
 
![image](../../images/singleBlogPageImages/blogArticleImages/blog249/app-look.jpg)
 
完成見本はこちらからどうぞ▼
 
• [react-ai-weather-app-book.netlify.app](https://react-ai-weather-app-book.netlify.app)
 
## TypeScriptなしで始める理由
「AI × Reactアプリを作りたい」と思っても、TypeScriptが壁になって前に進めない人は少なくありません。
 
TypeScriptでは余計にコードを書く必要があり、ハードルが上がるからです

JavaScriptだけでも、ReactもAIとの接続もまったく同じように実装できるので、本書ではReactの基礎とAIとの接続により集中できます。
 
---
 
「*Reactに興味はあるけど、何から始めたらいいかわからない*」  
 
「*JavaScriptの経験が浅く、TypeScriptはまだ自信がない*」  
 
「*AIを組み込んだアプリを、なるべくシンプルなコードで作ってみたい*」  
 
---
 
そのような方に本書はぴったりです。
 
なお、将来的にTypeScriptに移行したい方にとっても、本書のReact + AIの土台が出来上がっていれば、TypeScriptの学習はずっとスムーズになります。
 
## こんな方におすすめです
• ReactとAI開発を同時に始めたい方
 
• HTML、CSSの知識がある方
 
• TypeScriptをまだ学んでいないが、AIアプリを作ってみたい方
 
• ポートフォリオに載せられる作品を短期間で作りたい方
 
詳細はAmazonのページでご確認ください▼
 
<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0H32RKRJH">
    <img class="bc-cover" src="/images/commonImg/reactbook-ai.svg" alt="はじめてつくるAI × Reactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるAI × Reactアプリ</p>
        <p class="bc-desc">【2026年5月発売】AIアプリをReactで作れるスキルが身につく本</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

なお、フロントエンドの学習を効率的に進めるための学習ガイドも無料でご利用可能です▼
 

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-ai-react">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)
 
</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-ai-react)

---

# AI時代のReact学習で加速する「断片学習」とは？

URL: https://monotein.com/blog/ai-era-fragmental-knowledge
公開日: 2026.5.27
概要: AIを使ったReact学習で増えている問題。知識は増えているのに、それを使えない。問題に対応できない....。AI時代に加速する「知識の断片化」と、その解決方法を解説します。

## AIで加速する「断片学習」
「断片学習」とはその言葉の通り、ある事柄の一部だけを学習することです。

プログラミング学習における「断片化」は、AI以前からすでに起きていました。

---

• *YouTube*\
• *Qiita*\
• *Zenn*\
• *Stack Overflow*\
• *ブログ記事*\
• *X等のSNS.......*

---

これらのサイトで、必要な部分だけを見て、目の前の問題だけを解決する。

こういう学習スタイルは以前から一般的だったのです。

ネットによって情報へのアクセスが簡単になり、学習しやすくなったのは大きなメリットです。

しかしAI時代になって、「知識の断片化」はさらに加速しています。

## AI以前／以後の調べかた
AI以前、エラーや疑問にぶつかったときは次のようにしていました。

---

*「useEffect　エラー」とGoogle検索*\
↓\
*複数の記事を自分で読み比べる*\
↓\
*自分でコードを試す*

---

時間も手間もかかっていました。

しかし今は違います。

「このエラーを直して」とAIに聞くだけで、すぐに修正コードが返ってきます。

加えて、回答は非常に高精度です。

すると何が起きるのでしょうか。

「理解しなくても前に進めてしまう」です。

---

• *画面も動く*\
• *UIもできる*\
• *エラーも解決する*

---

「Reactをかなり書けるようになった気がする」という感覚を持ちやすいのです。

その結果、起きるのは予想通りのことです。

---

・*なぜそのコードで動くのか分からない*\
・*少し変更すると崩れる*\
・*AIが生成したコードを読めない*

---

これは知識が「線」ではなく「点」のまま、断片的なまま、増えていったことの当然の結果です。

点をいくら集めても「使える知識」にはなりません

「新しいことを知った」というつかの間の喜びは与えてくれても、役には立たないのです。

## なぜAIで断片化が加速するのか？
断片化の理由。

それはAIの回答が高精度だからです。

AI以前の調べ方には、ノイズ（不要な情報）がたくさんありました。

私たちは情報を集め、取捨選択し、そして自分の状況に合うよう整形する必要がありました。

しかしこの時間のかかる過程こそが、気付かぬうちに私たちの視野を広げ、周辺知識を与えてくれていたのです。

AIはノイズを取り除き、正解だけを出してくれます。

とても効率的で、とても生産的で、とても断片的です。

この結果、物事の全体像は見えにくくなりました。

## AI時代、逆説的に高まる学習熱
AI登場以降、React学習者の2極化が進んでいます。

---

• 「*AIがアプリを作ってくれる。だからもう自分は何もしなくていい*」

• 「*AIが書いてくるコードを理解できない。実は自分には分かっていないことが多かった*」

---

AIによって「Reactに触る人」は増えました。

同時に「理解不足を感じる人」も増えたのです。

---

「*AI時代だからこそ、React全体をちゃんと理解したい*」

最近はこういう声を以前より多く聞くようになりました。

これも自然な流れです。

<div class="rich-card-link">
<a href="/blog/ai-era-why-more-people-learn-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-251.png)

</div>
<div class="r-card-text">
AIでReactアプリを作れる時代。なぜReact学習者は増えているのか
</div>
</div>
</a>
</div>

## 断片的学習を防ぐ方法
• 「*AIですべて完結すると考えない*」

そして、

• 「*最初に全体を理解する*」

---

これが断片的学習を防止する上で重要です。

AIは便利で、私自身も日常的に使っています。

しかし、AIだけで学習を完結させようとすると、どうしても理解が断片的になります。

どこかの地点で一度AIを離れ、React全体をまとまった形で学ぶ必要があるのです。

---

実は断片的な知識は、「全体を理解している人」に対してだけ役に立つものです。

たとえばパズル。

完成図を知らないまま、ピースだけ大量に渡されたとしましょう。

どれを、どこにあてはめればいいのか分かりません。

しかし全体像を知っている人なら、「これはここに入るな」と推測・判断ができます。

Reactでも同じです。

• props／state\
• コンポーネント\
• 非同期処理\
• useEffect\
• useReducer......

こういった部分知識は、全体の中でつながっています。

全体を知らないまま断片だけ集めていても、「知っている言葉」は増えても、「使える力」は得られません。

---

「*なぜそうなるのか*」

「*どうつながっているのか*」

これは私がReactを教える時に重視していることです。

ReactとTypeScriptを一緒に教えることも重要視しています。

2026年のいま、Reactだけではもう十分ではなくなっているからです。

実際、AIが生成するReactコードの多くもTypeScriptで書かれています。

しかしTypeScriptには「React開発でよく使う機能」と「ほとんど使わない機能」があり、すべてを学ぶ必要はありません。

React開発者向けに、何をどこまで学べばいいのかをまとめたガイドがあります▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

「なんとなく動く」から「自分で判断できる」開発者になるためには、React × TypeScript全体を体系的に学習しましょう。

Reactの難しさを感じているなら、まず「何がつまずきポイントなのか」を整理することが先決です。

JavaScriptの理解不足、stateの概念、断片的な学習の落とし穴など、初心者がつまずく理由と具体的な乗り越え方をまとめたガイドがあります▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

またReactをマスターするのに最適な教材があります。ぜひ活用してみてください。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/ai-era-fragmental-knowledge">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/ai-era-fragmental-knowledge)

## よくある質問
### AIを使っても学習はできますか？
できます。

重要なのは「AIを使う／使わない」ではなく、「AIの回答を評価できるか否か」です。

そしてこれは、React全体を体系的に理解している人だけができることです。

「全体」が見えないと「部分」や「断片」の評価はできません。

AIを使いこなすには、まず全体をしっかりと理解することが先決です。

### 動画やブログでReactを学んできました。体系的に学ぶこととは何が違うのですか？
動画やブログは「知りたいことをピンポイントで知る」には優れています。

その一方、全体の構造は教えてくれません。

体系的な学習とは、props、state、コンポーネント、レンダリングなどの概念が「なぜそうなるのか」「どうつながっているのか」という文脈を学ぶことです。

木を見たとき、その木だけしか見えないか。

あるいは、その背後の森も見えるか。

この違いが「知っている」と「使える」の差を生みます。

### ある程度Reactを書けるようになってから、体系的に学び直す意味はありますか？
むしろそのタイミングこそ、体系的な学習が効果を発揮します。

「なんとなくコードは書ける。でも自分でゼロから設計できない」という段階の人は、全体像をつかむことで一気に応用力が上がります。

学び直しと感じるかもしれませんが、実際には「点をつなげる」作業になります。

### 今のAIツールのレベルなら、Reactをちゃんと理解しなくてもアプリは作れますよね？
作れます。

複雑なReactアプリでも作れます。

しかし内部構造を理解していなくても許されるのは、それが趣味の範囲に収まっている時だけです。

仕事としてアプリ開発に携わるとき、つまり責任を持って行うときには、「AIが書いたから使いました」は通用しません。

AIの書いたコードを評価・判断し、責任を持って使えるのは、Reactの全体像を理解している人だけです。

###  React × TypeScriptを体系的に学べる教材はありますか？
あります。

私の教材『Reactマスター』と『TypeScriptマスター』は、「なぜそうなるのか」「どうつながっているのか」を軸に、React × TypeScriptの全体像を体系的に学べるように設計しています。

断片的に知識を集めてきた方が、全体像をつかみ直すのにも適した教材です。

### 「体系的に学ぶ」ための時間が取れるか不安です。どれくらいかかりますか？
人それぞれ学習ペースは異なるので、明確な回答は差し上げられません。

大切なのは時間の長さよりも、「全体をつなげて理解する」という目的を持って学ぶことです。

断片的に何時間学んでも埋まらない空白が、体系的な学習で短期間で埋まることがあります。

詳しくは下記リンクのページをご覧ください。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/ai-era-fragmental-knowledge">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/ai-era-fragmental-knowledge)

---

# AIでReactアプリを作れる時代。なぜReact学習者は増えている？

URL: https://monotein.com/blog/ai-era-why-more-people-learn-react
公開日: 2026.5.26
概要: AIがReactアプリを自動生成する時代。にもかかわらず、Reactを本気で学び直す開発者が増えています。AI時代のReact学習者に起きている変化を整理します

## バイブ・コーディングの時代
最近はAIコーディングが一般的になってきました。

• Cursor\
• Claude Code\
• v0\
• Bolt\
• Lovable

これらのAI開発ツールをほとんどの開発者は使っています。

ビギナーでも、いや、そもそもプログラミングの経験がない人でも使っています。

普通の日本語で指示を出すだけで、AIがアプリを作ってくれるからです。

AIにすべてを丸投げする「バイブ・コーディング」という言葉も、よく聞くようになりました。

そしてこういったAIツールの出すコードの大半はReactベースのものになります。

AIはオンライン上の情報を学んでいるからです。

オンライン上にはReact関係の情報がもっとも多いからです。

## React学習者の2極化
こういう状況を見れば、次のように考えるのは自然です。

「*Reactを勉強する人は減っている*」

しかし実際はもう少し複雑です。

二極化が進んでいます。

一方が、「*AIが全部書いてくれる。もう勉強する必要はないな*」というグループ。

他方が、「*AIの書いてくるコードがわからないな....。もっと勉強しなきゃ*」というグループ。

どちらのグループになるのかは、その物事が当人にとってどれだけ大切なのかによります。

趣味としてなら、前者のグループの意識で十分です。

しかし、プロとして、仕事としてなら、当然後者の意識を持つことになります。

自分の理解できないコードで作り上げたアプリの責任は取れないからです。

AIの登場で「AIの書いたコードを人間が理解できない」という場面が増えました。

そのため、逆説的ですが、人間の開発者の学習熱が高まっているのです。

Reactの「体系的な理解」を求める気持ちが高まっているのです。

そしてこれはReactやフロントエンドに限った話ではありません。

私は半年ほど前に下記の記事を書きました。

<div class="rich-card-link">
<a href="/blog/ai-leads-developers-learning-fundamentals">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-216.png)

</div>
<div class="r-card-text">
AIが浸透する中、開発現場で起きている意外なこと
</div>
</div>
</a>
</div>

この記事で触れているのは、AIによって基礎分野（アルゴリズム、データ構造、アーキテクチャ、セキュリティなど）の勉強を促す動きが広がっていることです。

AIによって、逆説的に開発者の学習意欲は高まっています。

そしてこれは日本だけの話でもなく、当然海外でも状況は同じです。

## React入門が簡単になって起きたこと
AIのおかげでReactに入門するハードルは下がりました。

以前は環境構築で脱落する人が大勢いましたが、今ではそれもすべてAIで簡単に解決できます。

エラーメッセージも、そのままコピペするだけで、AIが親切に対応方法を教えてくれます。

入門の壁は無くなりました。

しかし入門後に別の壁が現れました。

「*動いてはいるけど、なぜ動いているのか分からない.....*」という問題です。

つまり今起きているのは、こういうことです。

---

AIによって「Reactに触る人」は増えた。

しかし「理解不足を感じる人」も増えた。

---

なんとなくAIを使って作ったものは、結局なんとなく動くアプリなのです。

• なぜ動いているのか、わからない……\
• どうやって新機能を追加するのか、わからない……\
• エラーが出た時どう対処するのか、わからない……

「なんとなくの塊（かたまり）」になってしまう。

これがReact学習への関心が高まっている理由です。

同時に、AIによって「知識の断片化」はさらに加速しています。

これも体系的な学習の必要性を感じる人が増えているもう一つの理由です。

詳しくは下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/ai-era-fragmental-knowledge">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-252.png)

</div>
<div class="r-card-text">
AI時代のReact学習で加速する「断片学習」とは？
</div>
</div>
</a>
</div>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/ai-era-why-more-people-learn-react">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/ai-era-why-more-people-learn-react)

## よくある質問
### CursorやClaude CodeなどのAIツールを使いこなせれば、Reactを深く学ばなくても大丈夫ではないですか？
ツールを使いこなすことと、コードを理解することは別の話です。

AIツールは優秀ですが、「生成されたコードが正しいか？」、「自分の意図通りか？」、そして「実際に使うかどうか？」を判断するのは人間です。

こうした判断力はReactの理解から生まれます。

ツールが強力になるほど、使う側の判断力が重要になります。

「AIは人間のような日本語を書ける。だから日本人は日本語をもう勉強しなくていい」とはならないのと同じです。

### 趣味でアプリを作りたいだけでも、Reactをちゃんと学ぶ意味はありますか？
趣味レベルであれば、AI生成のReactアプリで十分だと思います。

コードやアプリに致命的な問題があっても、そのダメージも責任も小さいからです。

しかし、Reactを理解した上でAIツールを使えば、アイデアを形にする楽しさも充実感も上がることは確かでしょう。

「Reactのどこでつまずくのか」「どういう順番で理解していけばいいのか」を具体的に知りたい方は、こちらのガイドも読んでみてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

「体系的に学ぶ」と決めたら、次は「何から・どの順番で始めればいいか」という具体的なガイドが必要です。

HTML・CSSからReact・TypeScript・Next.jsまで、2026年版の学習ロードマップと各ステップの進め方をまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

###  学習のタイミングはいつがいいですか？ AIの進化でReactもすぐ使われなくなりますよね？
いまReact、TypeScript学習の必要性を感じているなら、今から始めるのが最善です。

Reactに関しては、現在の世界的な利用率から考えて、この先も当分の間は使われ続けることは確実です。

また、「テクノロジーやツールの進化は思っているよりも早くない」というのが私の実感です。

私は5年前にReactの入門書を出しました。

当時は「1年もすれば誰も読まない本になっているだろう」と思っていました。

「この変化の早いフロントエンド分野で、ひとつのツールがそんなにも長く使われ続けるわけがない」と考えていたのです。

それから5年が経ちました。

いまだに読まれています。

「ほそぼそと....」といったレベルではなく、Amazonの売上ランキング3位以内に入ることが今もあります。

こういう状況を見て、一番驚いているのは私自身です。

<div class="img-border">

![preview-1](../../images/singleBlogPageImages/blogArticleImages/amazon-ranking/react-ts-5june2026.jpg)

</div>

ツールの進化は思っていたよりもゆっくりだといえます。

いまReact・TypeScriptを必要と感じているなら、いまが始めるタイミングです。

「理解している人がAIを使う」と「理解していない人がAIを使う」では、半年後・一年後の差は広がり続けます。

また、AIが生成するReactコードのほとんどはTypeScriptで書かれています。

そのため現在のReact学習では、ReactだけでなくTypeScriptの理解も重要です。

「TypeScriptとは？」、「React開発ではどこまで学べばいいの？」という方は下記ガイドをご覧ください▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

### 「Reactを体系的に学ぶ」とは、具体的に何を学ぶことですか？
「React」と一言で言っても、その中には様々な仕組みやコンセプトが含まれています。

それらを「個別の知識」としてではなく、「なぜそうなるのか」、「他とどうつながっているのか」という文脈の中で理解すること。

これが体系的な学習です。

高校で習った日本史を思い出してください。

「奈良時代」、「平安時代」、「鎌倉時代」、「江戸時代」といった時代がありました。

これらは一見独立した個別の項目のようにも見えますが、実際にはそれぞれが深くつながっています。

戦国時代があったから江戸時代があり、平成があったから令和があるのです。

個別の知識、断片的な知識を得ることは楽しいですが、欠片（かけら）をいくら集めても全体は見えません。

ある時点で断片的なものからは一度離れ、全体を体系立てて学ぶことが重要です。

React × TypeScriptの体系的な学習に最適な教材があります▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/ai-era-why-more-people-learn-react">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/ai-era-why-more-people-learn-react)

---

# 【AI × React × TypeScript】アプリ開発の新刊が出ました

URL: https://monotein.com/blog/new-book-release-ai-react-typescript
公開日: 2026.5.15
概要: AIを組み込んだReactアプリの作り方を専門用語なしで丁寧に解説する新刊を出版しました。TypeScript使用。HTMLとCSSだけが前提知識。0円で完成・公開まで完結します。

## AI × React × TypeScript新刊リリース
本日、新刊『はじめてつくるAI × Reactアプリ with TypeScript』をリリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0H1R95C2C">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts-ai.svg" alt="はじめてつくるAI × Reactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるAI × Reactアプリ with TypeScript</p>
        <p class="bc-desc">【2026年5月発売】AIアプリをReact × TypeScriptで作れるスキルが身につく本</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

この本は、リリースから5年以上読まれ続けているReact入門書『はじめてつくるReactアプリ with TypeScript』に、AI機能開発の内容を追加したものです。

また5月27には、TypeScriptではない普通のJavaScriptを使ったバージョンもリリースしました▼

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0H32RKRJH">
    <img class="bc-cover" src="/images/commonImg/reactbook-ai.svg" alt="はじめてつくるAI × Reactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるAI × Reactアプリ</p>
        <p class="bc-desc">【2026年5月発売】AIアプリをReactで作れるスキルが身につく本</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

## 本書の特徴
私の他の入門書同様、この本も下記のようなコンセプトで書いてあります。

---

▶︎ 2〜3時間で成功体験を作れる  
▶︎ 作りながら学ぶハンズオン形式  
▶︎ 専門用語を使わないビギナーフレンドリーな解説  
▶︎ 最新のReactバージョン19情報  
▶︎ 0円で開発・完成・公開までできる

----

HTMLとCSSの知識だけで読み進められます。

JavaScript／TypeScriptの経験が無くても大丈夫です。

本書では、都市名を入力すると、その日の天気と、AIが提案するおすすめの服装が表示されるReactアプリを開発・公開します。

![image](../../images/singleBlogPageImages/blogArticleImages/blog249/app-look.jpg)

完成見本はこちらからどうぞ▼

[react-ai-weather-app-book.netlify.app](https://react-ai-weather-app-book.netlify.app)

## なぜAI × React × TypeScriptアプリなのか
現在のフロントエンド開発では、React + TypeScriptが事実上の標準になっています。

それも、「ただのReactアプリ」ではなく、「AI機能を組み込んだReactアプリ」が当たり前になってきています。

本書ではその両方を同時に学べる構成にしました。

---

「*Reactに興味がある*」 

「*JavaScriptが難しくてReactに進めない*」 

「*TypeScriptに苦手意識がある*」  

「*AIの組み込み方がわからない*」  

---

このような方でも、手を動かしながら自然にAI × Reactアプリ開発を始められます。

そして2026年のフロントエンド開発現場で求められるスキル、React + TypeScriptを使えます

## こんな方におすすめです
• React + TypeScriptをこれから本格的に学びたい方

• HTML、CSSの知識がある方

• AIを活用したアプリを自分で作ってみたい方

• ポートフォリオに載せられる作品を短期間で作りたい方

詳細はAmazonのページでご確認ください▼

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0H1R95C2C">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts-ai.svg" alt="はじめてつくるAI × Reactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるAI × Reactアプリ with TypeScript</p>
        <p class="bc-desc">【2026年5月発売】AIアプリをReact × TypeScriptで作れるスキルが身につく本</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-ai-react-typescript">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-ai-react-typescript)

---

# React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）

URL: https://monotein.com/blog/about-master-courses
公開日: 2026.5.11
概要: React × TypeScriptを体系的に学ぶ「Reactマスター」と「TypeScriptマスター」をリリースして2年。返金申請はゼロです。AI時代に価値が高まる体系的な教材のこれまでの歩み、進化の歴史、質問への回答をまとめました。

私は「Reactマスター」と「TypeScriptマスター」という教材を販売しています。

React × TypeScriptを体系的に学ぶための教材です。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/about-master-courses">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/about-master-courses)

両教材の最初のリリースから2年、増補版のリリースからは約1年が経ちました。

今回はこのReact・TypeScriptマスター教材について少し振り返ります。

## 構想5年、初版リリースから2年の歩み
### 自分がビギナーだったときに欲しかった教材
私がReactビギナーだった当時、「これだけあれば大丈夫」と言えるReact教材はありませんでした。

ネットで探せば、断片的な記事や動画はいくらでも出てきます。

しかし、その中から必要なことを選び出すのは自分。

とはいえ、ビギナーである自分には、「どれが大事で、どれがそんなに大事ではないか」という判断はほぼ不可能。

でもとにかくやるしかない.....。

ということで学習を進めていたのです。

あの時から時間がずいぶんと流れているので、いま振り返れば「あれはあれで楽しかったかな」という気もします。

毎日勉強しては「昨日の自分よりも今日の自分は進めている」という前進の感覚は、勉強の醍醐味です。

と同時に、効率は非常によくなかったと思います。

---

いまになって分かるのは、当時の私に足りなかったのは「情報の量」ではなかったということです。

記事も動画も、すでに十分すぎるほどありました。

足りなかったのは、「何を、どれだけ、どの順番で学べばいいのか」という道筋です。

つまり全体像。

Reactの全体像です。

【 必要なことが、正しい順番で、一カ所にまとまっている教材 】

そういうものがあれば、もっとスムーズに学習を進められたはずです。

そしてこれは、そのまま「私自身が作りたい教材」になりました。

---

またTypeScriptに関しては、当時も今も「React開発で使うTypeScriptにフォーカスしたビギナー向け教材」というものはほとんどありません。

TypeScriptには「React開発でよく使う機能」と「ほとんど使わない機能」があります。

すべてを学ぶ必要はなく、前者に絞った方が学習は効果的に進められるのです。

そういう中で、私は2021年にAmazonの電子書籍でReactの入門書を出しました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B094Z1R281">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts.svg" alt="はじめてつくるReactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ with TypeScript</p>
        <p class="bc-desc">【発売から5年読まれ続けているReact × TypeScript入門書の決定版。2026年1月第3版発売。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

これも「私がビギナーだったときに欲しかった教材」として作ったものですが、扱っている内容はReact未経験者向け。

「その先」まで導く教材は、この続編として作ろうと思っていました。

さらに読者からの声にも背中を押されます。

上記のReact入門書の読者から、

---

「*React入門に成功したけど、次はどの教材を使えばいいですか？*」

「*同じ先生の教材で学びたいので、続編を作ってください*」

---

という声がいくつもあったのです。

そうして作ったのが、Reactの全体像を一本につなげる「Reactマスター」と、【ReactでTypeScriptを使う】に的を絞った「TypeScriptマスター」です。

### 最初はテキスト版
リリースは2024年2月（<a target="_blank" rel="noopener" href="/blog/react-master-book-release">当時の記事</a>）。

この時はPDF、つまりテキスト版のみでの提供でした。

販売プラットフォームは、今でも使っているBase（ベイス）というオンラインショップ作成サービスで作ったものです。

ここで私には不安が一つありました。

それまで電子書籍を販売していたAmazonは、何もしなくても人がやってくるという、いわば「ショッピングモール」。

一方、Baseという独自のECショップは、オンラインという大きな海の中の「孤島」。

Amazonとは真逆の環境といえます。

「*見つけてくれる人、買ってくれる人、本当にいるのかな？*」という不安があったのです。

しかし販売初日から多くの人が購入し、学習を進め、「なんとなく書ける」を卒業していきました。

就職や案件獲得といった報告も届くようになりました。

さらにReact周りでも、2024年末にバージョン19のリリースがあり、多くの機能が追加されました。

そのため、次のステップとしてリリースしたのが動画版です。

### 動画版リリース
動画版では、テキスト版をベースに、Reactバージョン19の新機能の追加や古くなっていた解説の改訂を行いました。

そしてリリースしたのが2025年3月です（<a target="_blank" rel="noopener" href="/blog/react-master-video-release">当時の記事</a>）。

販売プラットフォームは、テキスト版販売でも使っていたBaseショップ。

そして動画は、Vimeoという動画プラットフォームにパスワード付きで用意。

これはこれで特に問題はなかったのですが、ユーザーの方から「*テキストでも学習したい*」という声がありました。

また私にも、「*Vimeoでは学習に集中しにくいかな*」という印象がありました。

そこで、動画のテキスト版を手打ち（＝AIを使った文字起こしではない、という意味です）で用意し、さらに学習専用のサイトも用意して、改めてリリースしたのが「増補版」です。

### 増補版リリース
増補版の目玉は学習専用サイトです。

目次と動画、そしてテキストが同時に確認できるようになっています▼

![react-ts-master-studying-site.png](../../images/commonImg/react-ts-master-studying-site.png)

このテキストは、動画の単なる文字起こしではなく、「読むだけでも理解できる」というのが特徴です。

PDFとして切り出しても、それだけで成立するレベルです。

これによって、動画視聴が難しい環境でも学習を継続できるようになりました。

さらに「1周目は動画、2周目はテキスト」というように、異なるスタイルで飽きずに学習を進めることも可能です。

実際の教材の中身は下記ページで確認できます。動画＋テキストの実際の学習環境です▼

• [master-courses-trial-learning-site.vercel.app](https://master-courses-trial-learning-site.vercel.app/course/react-master/?utm_source=/blog/about-master-courses)

---

.......このように本教材は、2024年のリリース以来、何度か大きく手を入れています。

教材を利用された方からは、これまでにレビューをいくつも頂きましたが、印象深かったのはある受講者のお母さんからのものです。

「*息子がこのマスター教材で勉強して、エンジニアとして就職できました*」というものでした。

なお、この増補版リリース時に合わせて「全額返金保証（購入後2週間以内は理由を問わず返金）」を付けました。

この話は少し後でします。

## AIの登場で変わった教材の役割
この2年間で一番大きな変化は、実は教材の外側で起きました。

AIです。

CursorやClaude Codeを使えば、ビギナーでもReactアプリを作れるようになりました。

環境構築やエラーで脱落する人はいなくなり、入門の壁はほぼ消えました。

しかし「Reactに触る人」が増えると同時に、「理解不足を感じる人」も増えたのは事実です。

AIの回答は高精度なので、理解しなくても前に進めてしまいます。

その結果、知識は「点」のまま増えていきます。

点をいくら集めても点にはならず、そして「使える知識」にはなりません。

この辺りのことは、下記の2つの記事に詳しく書いてあります▼

---

• <a target="_blank" rel="noopener" href="/blog/ai-era-why-more-people-learn-react">AIでReactアプリを作れる時代。なぜReact学習者は増えている？</a>

• <a target="_blank" rel="noopener" href="/blog/ai-era-fragmental-knowledge">AI時代のReact学習で加速する「断片学習」とは？</a>

---

2026年のアプリ開発では、かつての「コードを書く」という仕事は、「AIが書いたコードをチェックする」に変わっています。

しかし「チェックする」、「確認する」、「修正点があれば的確な指示を出す」という能力は、ある日いきなりできることではありません。

「全体像の理解」と「知識の体系的な積み上げ」があって初めてできることです。

【 *体系的な教材の必要性は、AI以前よりもむしろ高まっている* 】

これが、この2年間を通した私の実感です。

## 個人の方だけでなく、法人での利用も
ReactマスターとTypeScriptマスター、どちらも個人の学習者の利用を想定していました。

しかし増補版の購入者の中には、企業や法人の研修担当者もいて、話を聞いてみると、<a target="_blank" rel="noopener" href="/blog/master-courses-for-corporate-training">社内研修で使われている</a>ようです。

こういう使われ方は想定していなかったので意外でしたが、個人であれ、法人であれゴールは同じです。

【 React × TypeScriptを、自分で判断しながら使えるようになる 】

このゴールに到達できるのであれば、（多少のカスタマイズが必要な時もありますが）教材を厳密に区別する必要はありません。

個人学習から法人研修まで、少しずつ利用の幅が広がってきているのを感じます。

## 返金保証をつけた話（→ 返金申請ゼロ）
さて、先ほど増補版では返金保証を付けた話をしました。

これは私が買い手の立場に立った時のことを考えたからです。

ReactマスターとTypeScriptマスター、どちらも安い教材ではないので、買う方としては当然不安になるでしょう。

そこで思いついたのが返金保証、より詳しくは「購入後2週間以内は理由を問わず返金」です。

しかし私には若干のためらいもありました。

---

「*返金依頼が連発したらどうしよう*」

「*2週間のうちに教材をやり終えて返金、といったタダ乗りをされるかもなあ*」

---

教材のクオリティについての自信はありました。

それは私の主観的な自信だけでなく、2024年のテキスト版、2025年の動画版と、どちらも一度もクレームを受けなかったという客観的な事実から来る自信です。

それでも、こういったことは私が作り手・売り手だから思うことで、何も知らない買う側の立場に立ってみれば、やはり不安です。

なので理由を問わない返金保証を付けました。

----

それから1年以上が経ちます。

これまでの返金依頼はゼロです。

## よくある質問
### AIで無料で学べるのに、教材を買う意味はありますか？
AIは便利で、私自身も毎日使っています。

しかし、AIだけで学習を完結させようとすると、理解はどうしても断片的になります。

断片的な知識を評価して使いこなせるのは、全体像を理解している人だけです。

【 必要なことが、正しい順番で、一カ所にまとまっている 】

こういう教材の価値は、情報が無限に手に入るようになったAI時代のいま、むしろ上がっています。

### 値段が高くないですか？
UdemyなどのプラットフォームのReact教材と比べると、確かに高く見えるかもしれません。

しかし本教材の中心的な価値は、動画の本数ではなく「構成」にあります。

「何を、どれだけ、どの順番で学ぶか」を設計し終えた状態で学習を始められる、ということです。

さらに学習専用サイト、書き下ろしテキスト、永久アクセス保証といった特典も含まれています（詳しくは下記）。

React・TypeScriptの案件単価は高めなので、「コストではなく投資」という考え方をされる方が多いようです。

### 質問やサポートはありますか？
増補版には3大特典として、次のものが含まれています。

• 内容が更新された際の、追加料金なしのアクセス\
• 直接サポート\
• 永久アクセス保証

また上にも書きましたが、購入後2週間以内は全額返金保証があります。

### ReactマスターとTypeScriptマスター、両方買う必要がありますか？
必須ではありませんが、ReactマスターとTypeScriptマスターのセットが一番よく購入されています。

2026年のReact開発では、TypeScriptで書くのが一般的だからです。

AIが生成するReactコードの多くも、TypeScriptで書かれています。

「Reactマスター」でReactの全体像を固め、そのうえで「TypeScriptマスター」でReact × TypeScriptへと進む。

これが実務に一番近い形です。

なお、2つをまとめて購入できるまとめ買いプランも用意しています。

単品2つを別々に購入するよりお得になっているので、両方ご検討の方はまとめ買いプランを検討してみてください▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/about-master-courses">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/about-master-courses)

---

# 【エンジニア・ライター】執筆の依頼について

URL: https://monotein.com/blog/my-technical-writing-service
公開日: 2026.5.5
概要: 技術わかる × 書ける × 教えられる。技術記事を執筆するエンジニアライター。React・TypeScript・Next.jsなどのモダンフロントエンド開発に精通。商業出版・Amazonランキング1位・Google検索1位の実績あり。SEO記事、技術監修、書籍制作、英文記事のローカライズまで対応。

## React・Next.js等のフロントエンド技術記事ライティング
私は主にビギナーにプログラミングを教えています。

そういう中で何度か、技術記事の執筆を依頼されたことがあります。

「どんな記事が書けるのか」「どういうプロセスなのか」というご質問をいただくことが多かったので、今回わかりやすいようにここにまとめておきます。

執筆依頼を検討されている方は、まず本記事を読んでいただけると幸いです。

## 提供できるサービス
◾️ 技術記事執筆（ブログ／オウンドメディア／SEO）\
→ 企業の技術ブログやオウンドメディア向けに、主にフロントエンド領域の記事を執筆します。SEOを意識した記事設計も対応しています。

---

◾️ 技術監修（記事レビュー・リライト）\
→ 社内で作成された記事の内容確認や、表現の改善・リライトも行います。

---

◾️ 書籍・教材の制作支援・代行（ゴーストライティング）\
→ 技術書やプログラミング教材の制作サポートや執筆代行を承ります。

---

◾️ 英語記事の翻訳 ＋ ローカライズ\
→ 単なる翻訳ではなく、日本人の読者が理解しやすいように内容を再構成します。

---

◾️ ニュースレター／メルマガの執筆代行\
→ 現在進行形でメルマガを運営しています。継続的な配信コンテンツの制作も対応しています。

## こんな課題を解決できます
• 技術記事を書ける人材が社内にいない

• エンジニアが書くと、読者には難しすぎる内容になってしまう

• 技術ブログを始めたいが、何を書くべきかわからない

• 英語の技術情報を、日本語コンテンツとして発信したい

---

*本当に必要とされているのは「記事」ではない。検索流入の増加、認知の拡大、企業ブランドへの信頼構築といった「結果」である、ということを意識して執筆しています。

## 執筆スタイル
### 専門用語を使わない（ビギナーフレンドリー）
私は非IT出身です。

プログラミング学習を始めたときには、教材や記事で使われている専門用語の理解に苦労しました。

その経験から、「専門用語なし」というスタイルにこだわってプログラミングを教えています。

必要に応じて専門用語を使うこともありますが、平易な言葉で説明することを心がけています。

技術に明るくない読者やビギナーにも届けるためです。

### 読者が次に何をすればいいか明確
インプットは快適です。

しかし記事の本当の目的は、読者になんらかの行動を起こしてもらうこと。

読んで「なるほど」で終わらず、読んだあとに行動できる記事の執筆を意識しています。

### 「なぜ」まで書く
コードや手順の説明だけでなく、なぜそう書くのかという背景と理由まで伝えます。

それが読者の本当の理解につながり、「もっと知りたい」という気持ちを刺激するからです。

### でも、書きすぎない
前項と矛盾するようですが、説明過多になることを私は常に心配しています。

「正しさ」と「分かりやすさ」は、しばしば相反するものです。

そのような時、私が優先するのは「分かりやすさ」です。

技術の説明における正確さの重要性は重々知りながらも、「分かりやすさ」を取ります。

初心者や専門外の人には、「まず分かってもらう」ということが重要だと考えているからです。

## 他のライターとの違い
技術記事には、大きく次の2つのタイプがあります

---

• エンジニアが書く記事\
→ 技術的に正確だが、難しすぎて伝わらない

• ライターが書く記事\
→ 読みやすいが、内容が浅い

---

私はエンジニアとしてReact・TypeScript・Next.jsを代表とするモダンフロントエンドの開発に携わりながら、それと同時進行でプログラミング教育、教材制作（主に書籍・記事・動画）、発信活動を6年以上行ってきました。

最新の技術情報を反映させた、初心者にも伝わる内容を書ける理由の一端はここにあると考えています。

以下、これまでの実績を一部紹介します。

## 主な実績
### 商業出版・海外での出版
翔泳社より技術書を出版しています。

2025年には韓国でも翻訳・出版されました。

• [動かして学ぶ！Next.js/React開発入門](https://www.shoeisha.co.jp/book/detail/9784798184678)

• <a target="_blank" rel="noopener" href="/blog/korean-version-next-react-book">韓国語版</a>

### 電子書籍（30冊以上）
過去5年で30冊以上の技術書を制作してきました。

React、TypeScript、Next.jsをはじめ、JavaScript、Vue、Node.js、Expressの入門書も出しています。

「出して終わり」になる本が多い中、電子書籍であることを活かし、継続的に書籍内の情報をアップデートしていることが特徴です。

その結果、次に紹介するAmazonランキング1位の本や、第3版まで出ている本があります。

### Amazonランキング1位
Amazonのランキング1位を複数回、獲得しています

（*すべてではありませんが、私が気づいた範囲でのランキング1位になった時点のスクリーンショットはXにアップしてあります：[x.com/monotein_/media](https://x.com/monotein_/media)）

Amazonに数多くあるReact書籍の中で、拙著『[はじめてつくるReactアプリ with TypeScript](https://www.amazon.co.jp/dp/B094Z1R281)』がもっとも高い評価の本になっています（レビュー数100以上のReact書籍との比較）。

また同書はNo.1の高評価が付いた本にもなっています。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog247/react-ts-book-no1.jpg)

</div>

この『[はじめてつくるReactアプリ with TypeScript](https://www.amazon.co.jp/dp/B094Z1R281)』は個人の学習者だけでなく、社員教育用の教材として企業でも使われています。

---

私の書籍・電子書籍はすべて、上述の「専門用語なし」のメソッドに基づいて書いてあります。

これらの数字は、「専門用語なし」という教授法が机上の空論ではなく、5年以上にわたって多くのプログラミング初心者に支持されてきた客観的な証だと考えています。

### 250以上の記事とGoogleランキング1位
6年以上、私のサイト<a target="_blank" rel="noopener" href="/">monotein.com</a>にてフロントエンド関連の記事を書き続けています。

その中の複数の記事がGoogle検索1位です（5位以内のポジションを獲得している記事も多数）。

• 「React + Vite」関連キーワード Google検索1位 ▼\
（<a target="_blank" rel="noopener" href="/blog/react-vite-how-to-use">monotein.com/blog/react-vite-how-to-use</a>）

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog247/search-result-1.jpg)

</div>

• 「Next.js React + Vite」関連キーワード Google検索1位 ▼\
（<a target="_blank" rel="noopener" href="/blog/react-vite-or-nextjs-which-to-choose">monotein.com/blog/react-vite-or-nextjs-which-to-choose</a>）

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog247/which-react-next.jpg)

</div>

### 英語情報へのアクセス
海外に長く住んでいました。今でも1年の半分は海外にいます。

英語で発信されたフロントエンドの最新情報を、日常的に開発業務に活用しているので、日本語情報が少ない技術についてもいち早くコンテンツにできます。

## 制作プロセス
以下はこれまでの一般的な執筆の流れです。状況やニーズに応じて柔軟に対応します。

---

【1】\
ヒアリング（記事の目的、想定読者、トーン、キーワードなどの確認）

【2】\
構成案の提出・承認（執筆の構成確認）

【3】\
初稿の執筆

【4】\
修正（回数・条件等は事前相談）

【5】\
納品

## 料金
案件の内容や規模によって異なります。まずはご相談ください。

## その他できること
執筆に関係するサービスも提供しています。

◾️ プログラミング教材開発支援\
→ 企業研修向けの教材設計、社内勉強会用のスライド・ハンズオン資料の作成、新人研修カリキュラムの構築をサポートします。

---

◾️ 電子書籍制作サポート\
→ 電子書籍の制作を7年以上行っています。企画立案〜発売後の施策まで一連のサービスを提供しています。

• 構成づくり\
• 読みやすく伝わる形への編集\
• 編集・制作ノウハウの共有\
• 表紙デザイン・制作\
• 広告・販促素材の作成

## お問い合わせ
ご相談は下記メールアドレス／お問い合わせページからお気軽にどうぞ。

• contact@monotein.com

• <a target="_blank" rel="noopener" href="/contact">お問い合わせページ</a>

---

# ビギナーへのReact研修。教える前に知っておきたかった3つのこと

URL: https://monotein.com/blog/important-thing-teaching-corporate-react
公開日: 2026.4.30
概要: React研修の担当になったけど、何から教えればいい？JavaScriptを先に完璧にしなくても、ReactはHTML／CSSの延長で始められます。技術的な順番より先に知っておくべき、ビギナーを自走させるための根本的な考えを紹介。

## Reactを教える前に知っておくべきこと
私が以前教えていた生徒の中には、シニアやテックリードのポジションについている人もいます。

新年度のこの季節には、新卒エンジニアへのReact研修にアサインされている人もいます。

そういう彼ら彼女らから聞くのは、

---

「*どこから始めて、何を教えればいいのかよく分からない*」

---

といった言葉。

自分がReactを使えていても、それを教えるというのは別の能力です。

また、「Reactのことはあまり知らないのに研修担当に割り当てられた」という人もいるでしょう。

なので今回は、React研修を始める前に担当者が知っておきたいことを紹介します。

「まず最初にJSXを教えて、次にイベント処理を教えて」といった技術的な話ではなく、それよりも重要な、より根本的な話です。

## JavaScriptは理解してなくていい
最初に知っておいて欲しいこと。

それは次のような言葉を真に受けないことです。

---

「*ReactはJavaScriptのフレームワークだから、まずはJavaScriptをマスターしないといけない*」

---

確かにReactはJavaScriptをベースにしているので、JavaScriptの知識は必須です。

世に出ているReact本や動画教材の9割以上でも、「ある程度のJavaScriptの知識」といったことを前提知識として求めています。

しかし、これからReactを始めようとしているビギナーに一番必要なのは、「ある程度のJavaScriptの知識」ではありません。

---

新しいことを始めるとき、人はみな不安です。

そのようなビギナーの不安を和（やわ）らげるものは何でしょうか？

それは「これなら自分にもできそうだ」、「もしかしたらできるかもしれない」という前向きな気持ちです。

そしてそれを得る一番簡単で確実な方法、それは「小さな成功体験を早く作る」です。

なぜ成功体験が重要なのかは、わざわざ説明をしなくてもいいでしょう。

「自分には無理だろう」と最初からネガティブに感じることを始めるには、たくさんのエネルギーが必要です。

一方、「自分にもできるかも」といった少しでもポジティブな光を感じられることは、自分で進めていけます。

---

ビギナーにはなるべく早く成功体験を味わってもらいましょう。

そうすれば、教える側が手取り足取り指示を出さずとも、勝手に進んでいくようになります。

成功体験は気持ちがいいからです。

「これをもっと味わいたい」という気持ちが、自分で学習を前へ前へと進めていく推進力になります。

そしてこのように自分の中から湧いてきたパワーは、他のどんなもの（例えば「テストがあるから」、「上司に言われたから」といった外部からの力）よりも強く、ある意味で健康的な力です。

では、ビギナーにこの成功体験を早く味わってもらうにはどうすればいいのでしょうか？

ここでは、HTML／CSSを知っている人を「ビギナー」として話を進めます。

なお、現在のReact開発のスタンダード、React + Viteについて詳しくは下記ガイドも参考にしてください▼

• <a href="/blog/guide-react-vite">【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説</a>

## HTMLの延長でReactは使える
Reactのコードの`return`の中は、HTMLと同じように書けます。

CSSを当てる時は、`class`の代わりに`className`と書くだけの違いです。

「新しいことを身につけないとReactは使えない」といった角度からではなく、「あなたがすでに知っていることでReactは使えるよ」というアプローチです。

---

【 HTML／CSSの延長線上にReactはあり、すでに知っていること（HTML／CSS）を活かせばReactを使える 】

---

こういうことをできるだけ早く教えてあげるのです。

そうすれば多くのビギナーが持っている次のような固定観念、つまり、

---

「*あれ、今までHTML／CSSとReactの間にはJavaScriptが横たわっていて、それを最初に乗り越えないとReactは使えないと思っていた......*」

---

を溶かしてあげることができます。

そして「もしかして、Reactって意外に簡単かも」と感じる人が大勢出てきます。

これまでReactを教えてきて、私はこういう場面を何度も目にしてきました。

---

研修の受講生に到達してもらいたいのは、「Reactができる」というレベルです。

「JavaScriptができる」ではありません。

ゴールはReactなのだから、早くReactに触ってもらいましょう。

そうすれば、自分がいま登ろうとしている山が、実はそれほど高いものではないことに早く気付いてくれます。

## 動くものを作る
既知のこと（HTML／CSS）でReactが少しは使える、という理解と同じくらいビギナーにとって大事なこと。

それは「動くものを作る」です。

Reactを学ぶのはアプリを作るためです。

なので、サイズは小さくていいので、できるだけ早くアプリ制作の一連の流れを、最初から最後まで体験させてあげましょう。

細々とした文法を教えたり、例外事項などにいちいち言及するのは止めます。

こういったことは往々にして、教える側の自己満足や不安感に由来するものです。

ビギナーにとっては不要であるばかりではなく、退屈を生み混乱を招きます。

また「100%の理解をしてから次に進む」という完璧主義の態度も、この段階では不要であることを教えてあげましょう。

分からないことが多少はあっても先へと進み、できるだけ短い時間でアプリを完成してもらいます。

そうすれば達成感を味わえます。

それが次のステップへと進む最大のモチベーションになります。

そしてビギナーといっても盲目ではありません。

「アプリを作れた！だからもうこれでReactはマスターした！」と考える人は、私の経験ではほとんどいません。

---

「*アプリはとにかく一応作れた。でも自分には理解できていないことや、知らないことがまだたくさんある*」

---

このように大半のビギナーは考えます。

こういう、いわば謙虚な姿勢を持ってもらえたら、研修は成功です。

あとは彼ら彼女らが自分で学習を進めていきます。

自分には足りないものがあることを自覚できたからです。

自分で埋めていく楽しさを覚えたからです。

## 研修の本当の目的とは？
本記事の最後に、研修の目的とは何かを考えてみましょう。

もしReactの研修なら、もちろん「Reactを使えるようになる」が目的です。

しかし、あらゆる種類の学びというのは、本一冊や研修一本で終わるものではありません。

ずっと続いていくものです。

そして「学ぶ」というのは楽しいことです。

【 昨日はできなかったことが、今日はできている 】

これは人間の根本的な喜びのひとつでしょう。

前に進んでいる感覚を与えてくれるからです。

自分は進歩していると実感させてくれるからです。

---

「研修」や「講座」というのは、あるスキルや知識をマスターしてもらうことを名目に掲げています。

そしてそれは大事なことです。

しかしそれよりも大事なことは、受講生に何か明るいもの、前向きな気持ち、いわば「希望」といったものを感じてもらうことでしょう。

「自分にもできるかも」という、自分に対する期待と希望の気持ちです。

---

......心構えは分かった。

では実際に何を、どの順番で教えればいいのか？

そこが次の悩みになると思います。

無料の資料を用意しているので、ぜひご利用ください▼

---

# React研修の失敗しない選び方｜外注研修の『現場で使えない』を防ぐ3つのポイント

URL: https://monotein.com/blog/choosing-react-corporate-lessons
公開日: 2026.4.27
概要: React研修を外注するメリット・デメリットを解説。「時間もコストもかけたのに現場で使えない」を防ぐ、失敗しない選び方の3つのポイントも紹介します。

## React研修、外注すべきか否か？
「*社内でReactを使える人を育てたい*」

このように考えたとき、多くの企業が一度は悩むのが、研修を内製するか、それとも外注するかです。

内製と外注、それぞれに注意すべきことがあります。

本記事では、React研修を外注するメリット・デメリット、そして失敗しないための選び方を紹介します。

正しい選び方を理解して、「時間もコストもかけたのに現場で使える人材が育たなかった....」という失敗を避けましょう。

## React研修の外注【メリット】
外注の最大のメリットは、教育の立ち上がりが早いことです。

研修を専門にしているので、すぐに始められます。

一方、内製で行う場合には、教材づくり、進行設計、課題作成、質問対応まで、すべて自前で対応しないといけません。

カリキュラム制作ひとつとっても、Reactはカバーすべき範囲が広いため、設計に時間がかかります。

さらに企業内でReactを人に教えられるレベルにある人は、そもそも自分のプロジェクトですでに忙しいので、「教育にまで手が回らない」ということが普通です。

---

外部の研修サービスを使うと、これらがすでに揃っています。

設計済みのカリキュラムも最初から使えます。

新卒・中途・異動メンバーといったそれぞれ異なる経験を持った社員のスキルレベルを、スピーディに標準化しやすいのです。

実務に沿ったカリキュラムや、進捗の可視化、質問対応まで含まれている研修であれば、社内の担当者の負担も少なくて済みます。

---

もうひとつ大きいのは、学ぶレベルがそろうことです。

社内教育では、教える人によって説明の仕方も、重視する項目も異なります。

ある人はReactの見た目部分にフォーカスする、別の人はTypeScriptの安全性にこだわる、また別の人は最新のツールの使い方にこだわる。

これでは受講者ごとの差が大きくなります。

外注の研修を使うメリットは、こうした属人性を減らし、チーム内の基準をそろえやすいことです。

## React研修の外注【デメリット】
私が一番よく見かける失敗は、「社員のスキルレベルに合っていない研修を選んでいる」というものです。

例えば受講者がほぼ未経験で、「ウェブサイトとウェブアプリの違い」といったことすらも分かっていないのに、Reactの実装から始める研修だと受講生は付いていけません。

Reactのコードは、見た目だけならHTMLによく似ているため、最初は簡単そうに感じます。

そして実際、HTML／CSSといった既に知っている知識をベースにしてReactに入門してもらうことは、私の経験からいっても最も効果的です。

（*これを実践した教材が「[はじめてつくるReactアプリ](https://www.amazon.co.jp/dp/B08XWMVX76)」です）

しかし、ReactのベースはJavaScript。

JavaScriptの理解が足りないと、「なんとなくコードを書いている」という状態になります。

逆に、現場ですでにReactを使っているチームなのに、React + Viteのセットアップやコンポーネントの作り方だけ教えて終わる研修では、実務に結びつきません。

つまり、React研修の外注で起こりやすい失敗は、質が低いことよりも、レベル設計がずれていることに由来するのです。

---

もうひとつのよく見る失敗は、Reactだけを教えて終わる研修です。

現場で本当に必要なのはReact単体ではありません。

TypeScriptで型を付け、APIとつなぎ、フォームを扱い、チームで読みやすいコードを書くところまで含めて、はじめて実務で使えるようになります。

React研修という名前でも、このあたりが抜けていると、受講後に「結局まだ現場に入れない」という状態になることが少なくありません。

## React研修を外注するときの選び方（3つのポイント）
React研修を選ぶとき、失敗しないためのポイントは3つあります。

### 1. 受講者のスキルレベルと合っているか
先ほどのデメリットの話と重なりますが、これが最も重要です。

研修の内容ではなく、「誰向けに作られているか」を最初に確認してください。

未経験者が多いのであれば、HTMLやCSSの知識を前提に、JavaScriptの基礎から丁寧にカバーしているカリキュラムが必要です。

すでに開発経験のある社員が対象であれば、TypeScriptとの組み合わせや、APIとの連携、状態管理など、実務に直結する内容が含まれているかを確認しましょう。

### 2. カリキュラムが古くないか（簡単に見分ける方法）
フロントエンド開発は変化の激しい分野です（詳しくは<a href="/blog/frontend-learning-roadmap">こちらの記事</a>を参照）。

エンジニアでも、技術のキャッチアップに悩んでいる人は多くいます。

しかし誰でも簡単に、React講座のカリキュラムの鮮度を見分ける方法があります。

---

カリキュラムに「create-react-app」というものがあれば要注意です。

create-react-appはReact開発でよく使われていたツールですが、それも2022年ごろまでになります。

今はメンテナンスもされておらず、新規のReact開発で使われることもありません。

現在はcreate-react-appではなくReact + Viteというものが使われます。

詳しくは下記ガイド記事を参考にしてください▼

• <a href="/blog/guide-react-vite">【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説</a>

研修で使うツールが現場と異なっていると、受講後にギャップが生まれます。

「研修では動いたのに、実際の環境では違う」という状況は、現場にとっても本人にとっても困ります。

カリキュラムの新しさは、フロントエンド研修では特に重要な要素です。

### 3. ReactだけでなくTypeScriptまでカバーしているか
実際のReact開発では、TypeScriptがほぼセットです。

Reactだけを教えて終わる研修では、受講後に「TypeScriptが分からなくて現場に入れない」という状況が起きやすくなります。

## よくある質問
### Q1. 内製と外注、どちらが費用を抑えられますか？
短期的には内製の方が安く見えます。

しかし教材作成・進行設計・質問対応まで含めると、社内担当者の負担は想定より大きくなりがちです。

外注は初期費用がかかりますが、立ち上がりの速さと担当者の負担軽減を考えると、トータルコストで逆転するケースも多くあります。

### Q2. 受講者のレベルがバラバラでも対応できますか？
研修によります。

選ぶ際は「誰向けに設計されているか」を必ず確認してください。

未経験者とすでに開発経験のある社員を同じカリキュラムで進めると、どちらにとっても合わない内容になります。

### Q3. 研修の効果はどう測ればいいですか？
受講後に簡単なアプリを一人で作れるかどうかが、最もわかりやすい基準です。

「コードを書ける」ではなく、「アプリを作れる」という明確で具体的な基準にすると、到達度を確認しやすくなります。

monoteinでは、React・TypeScript等フロントエンド開発ツールの企業向け研修を提供しています。

カリキュラムはViteをベースにした現在のスタンダードに沿った内容で設計されており、HTMLやCSSの知識がある方を対象に、TypeScript・Reactスキルを実務レベルまで引き上げます。

詳しくは無料の資料をご利用ください▼

---

# TypeScript導入に失敗する企業がやっていること【原因と対策も解説】

URL: https://monotein.com/blog/typescript-corporate-typical-mistakes
公開日: 2026.4.23
概要: 「導入したのに誰も使いこなせない」「結局JavaScriptに戻した」。TypeScript社内導入でよくある3つの失敗と、その具体的な対策を解説します。

## TypeScript導入で失敗、というよくある話
「TypeScriptを社内に導入しようとしたけど、うまくいってない....」という話は、実は珍しくありません。

---

• *導入したものの、誰も使いこなせていない*

• *エラーが増えて、むしろ開発が遅くなった*

• *結局JavaScriptに戻してしまった*

---

私が企業研修をしていてもよく聞く話です。

今回は、TypeScript導入でよくある失敗と、それを避ける方法を具体的に紹介します。

なお、TypeScriptを使った<a target="_blank" rel="noopener" href="/blog/react-vite-typescript-how-to-use">実際の開発方法</a>や<a href="/blog/frontend-learning-roadmap">ロードマップ</a>も適宜参考にしてください。

## そもそもTypeScriptはなぜ難しいのか
TypeScriptは「JavaScriptに型を付けた言語」になります。

型を付けることで、コードのミスを事前に発見しやすくなるのです。

大きなプロジェクトや、複数人での開発で特に効果を発揮します。

しかし「*JavaScriptは書けるから、TypeScriptもすぐに書けるだろう*」というのは正しくありません。

型の考え方に慣れるまでに、一定の時間がかかります。

JavaScriptはある程度書けても、TypeScriptでつまずく人は実はとても多いのです。

ここを甘く見ると、導入後にさまざまな問題が起きます。

以下、よくある失敗を見ていきましょう。

対策方法も一緒に紹介します。

## 失敗１ とりあえず導入
もっとも多い失敗が、TypeScript導入自体をゴールにしてしまうことです。

パッケージをインストールして、設定ファイルを用意して、「TypeScript導入しました」で終わり。

しかしこれでは、実態はJavaScriptのままです。

型定義がほとんどなく、`any`という型を乱用するコードが増えていきます。

（`any`は「どんな型でもOK」という意味で、TypeScriptの恩恵をほぼ無効化します）

### 対策
導入と並行して、チームへの教育を行いましょう。

ツールを入れるだけでなく、使い方を全員が理解しているかをしっかり確認する仕組みが必要です。

## 失敗２ 学習コストを低く見積もっている
「*TypeScriptはJavaScriptの延長だから、すぐ覚えられるはずだ*」

こういう認識を持っている人も実は多くいます。

型の概念、型推論、ジェネリクス、ナローイング。

こういった内容は、TypeScriptに初めて触るエンジニアにとって簡単ではありません。

学習期間を短く見積もると、メンバーが消化しきれないまま実務に入ることになります。

結果として、エラーに悩まされながら開発を行うことになり、TypeScriptへの苦手意識だけが残ります。

### 対策
学習と実践を並走させる期間を設けてください。

いきなりすべての機能を覚えさせるのではなく、実務でよく使う型の書き方から段階的に習得できるよう、カリキュラムを組みましょう。

## 失敗３ 教えられる人が・・・
「*TypeScriptを導入したい。けど、社内に詳しい人がいない*」

これもよくあることです。

しかしこの対策が「自分で勉強してください」だと、学習の質がそろいません。

何が正しいのか分からないまま進んでしまい、誤った理解が定着することもあります。

未経験者に最も難しいのは、「何が正しくて、何が誤っているのか」、あるいは「どれがスタンダードで、どれがそうではないのか」の見極めです。

### 対策
社内に教育担当者を育てるか、外部の研修を活用するか、導入前に決めておくことが重要です。

「なんとかなるだろう」で始めると、あとから立て直すのに余計なコストがかかります。

---

他にもよくある失敗として、「既存のJavaScriptコードと混在させてしまう」、「型エラーが出るからと設定を緩める」といったこともあります。

## よくある質問
### Q1. anyを使うのはなぜ問題なのですか？
*any*は「どんな型でも許可する」という意味です。

型チェックが無効になるため、TypeScriptを使っているのにJavaScriptと同じ状態になります。

TypeScript導入の意味がなくなるので、基本的には避けるべきです。

### Q2. JavaScriptが書ければ、TypeScriptもすぐ書けるようになりますか？
「すぐ」は難しいケースがほとんどです。

型という概念がJavaScriptには無いからです。

ある程度の学習期間を見込んでおく方が、現場の混乱を防げます。

なお、TypeScript自体について詳しくは下記ガイドも参考にしてください▼

• <a href="/blog/guide-typescript-for-react-programmers">【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説</a>

### Q3. 社内にTypeScriptを教えられる人がいない場合、どうすればいいですか？
外部研修の活用が最も確実な方法です。

独学で進めると理解にばらつきが出て、誤った使い方が定着するリスクがあります。

導入前に教育体制を決めておくことが重要です。

## 失敗を防ぐために最初に考えておきたいこと
TypeScript導入を成功させるには、技術的な準備だけでなく、教育の準備も欠かせません。

特にチェックしておきたいのは次の点です。

---

• メンバーのJavaScript理解度はどの程度か\
• 誰が、どうやって教えるのか\
• 学習にどれくらいの期間を確保できるか\
• 導入後のフォロー体制はあるか

---

このあたりを整理しないまま進めると、本記事で紹介した失敗が起きやすくなります。

社内に教育の体制を作るのが難しい場合は、外部の研修サービスを利用するのがもっとも効果的です。

monoteinでは、React・TypeScriptなどのフロントエンドツールを対象とした企業向け研修を提供しています。

「TypeScriptを導入したいが、社内に教えられる人がいない」、「学習コストをかけずにチームのスキルを底上げしたい」といったご要望に対応しています。

詳しくは無料の資料をご利用ください▼

---

# 未経験社員をReactエンジニアへ。失敗しない教育ロードマップと研修のポイント

URL: https://monotein.com/blog/corporate-react-engineers-road-map
公開日: 2026.4.19
概要: 未経験社員をReactエンジニアに育てるための5段階ロードマップを紹介。実際の研修経験をもとに、社内研修でReactエンジニアに育てる効果的な方法紹介します。

## 未経験社員をReactエンジニアにする教育ロードマップ
私は企業向けのフロントエンド研修を行っています（詳しくは<a href="/corporate-training">こちら</a>）。

そういう中でよく聞くのが、

「*未経験の社員をReactが書ける人材に育てたい。手は一応打ってる*」

という担当者の声です。

しかし社員側では、次のような状態に陥っていることが少なくありません。

---

• 教材を渡されただけで終わり

• HTML／CSSまでは進んでも、JavaScriptでつまずいている

• Reactの基礎は分かっても戦力化までは届いていない

---

これは本人の能力の問題というより、むしろ教え方の順番に原因があることがほとんどです。

そこで今回は、未経験社員をReactエンジニアに育てるときの効果的な教育のステップを、できるだけシンプルに紹介します。

## 【なぜ失敗する？】React企業研修でつまずく3つの原因
結論から先に言うと、最大の原因はJavaScriptの基礎不足です。

ReactはJavaScriptの上にある技術。

基礎部分のJavaScriptの基本があいまいな状態でReactを使っていると、「なんとなく書いている」という状態から抜け出せません。

そしていつまでも「Reactを使える」という自信を得られないのです。

私が企業研修で見かけるReactに苦手意識を持っている人は、だいたい次のような経緯を辿っています。

---

HTML／CSSは一応分かる\
▼\
Reactの見た目の書き方も最初は分かる\
▼\
しかしイベント処理やフォームの実装は、コピペでしか対応しかできない

---

この原因はJavaScriptの基礎不足です。

問題の核心は、「Reactが難しい」というより、Reactに入るまでの準備段階にあります。

詳しくは下記記事に目を通してください▼

<div class="rich-card-link">
<a target="_blank" rel="noopener" href="/blog/why-react-is-difficult-to-learn-1">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-134.png)

</div>
<div class="r-card-text">
Reactを難しく感じる理由と、その解決法【前編】
</div>
</div>
</a>
</div>

## 教育ロードマップは5段階で考える
未経験社員をReactエンジニアに育てるときは、次の5段階で考えるとスムーズです。

### 1. HTML／CSSの延長でReactも使えることを知る
最初の段階で何より大切なことは、「小さな成功体験を早めに作ってもらう」です。

「すでに知っているHTML／CSSの延長線上でReactも使える」ということを分かってもらいましょう。

実際、Reactの`return`の中はHTML／CSSの知識で書けてしまいます。

厳密にはJSXというもので、HTML／CSS以上のことができますが、それは次のステップで学べば十分です。

初心者にとって大切なことは、「自分にもできそうだ」という前向きな気持ちです。

そしてそういう気持ちを得るには、「小さな成功体験」を早めに作ってもらうことが近道です。

HTML／CSSの延長でReactも使えることの重要性について、下記記事も参考にしてください▼

<div class="rich-card-link">
<a href="/blog/important-thing-teaching-corporate-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-246.png)

</div>
<div class="r-card-text">
ビギナーへのReact研修。教える前に知っておきたかった3つのこと
</div>
</div>
</a>
</div>

### 2. JavaScriptの考え方を学ぶ
次に必要なのがJavaScriptです。

JavaScriptでつまずく人が多いのは、HTML／CSSまでの勉強とは頭の使い方が変わるからです。

見た目を作るだけでなく、「条件によって何をするか」、「クリックされたらどう動くか」という、プログラミング的な思考を養う必要が出てきます。

とはいえ、この段階では全部を網羅する必要はありません。

次の項目にフォーカスすれば十分です。

---

• 変数\
• 配列とオブジェクト\
• if文\
• イベント処理\
• mapなどの基本操作\
• 関数

---

特に重要なのは<a target="_blank" rel="noopener" href="/blog/why-react-is-difficult-to-learn-2">関数</a>です。

Reactを使う上で「JavaScriptのすべて」は必要ありません。

Reactでよく使うJavaScriptの分野に集中しましょう。

### 3. Reactで「部品として画面を組み立てる」ことを覚える
次はReactの重要コンセプト、「コンポーネント」を学びましょう。

Reactでは、複数のパーツを組み合わせてページを作ります。

HTML開発時のように「ページ単位」ではありません。

画面を部品ごとに分けて考えられるようになることが重要です。

例えば、

• ヘッダー\
• ボタン\
• カード\
• 一覧\
• フォーム

こういったものをコンポーネントとして分けて作れるようになると、Reactらしい考え方が少しずつ身についてきます。

### 4. TypeScriptとAPI連携で実務に近い開発へ進む
Reactでは必ずデータを扱います。

下記のような場面です。

• フォーム処理\
• APIからデータを取る\
• 型をつける\
• エラー処理

ここで重要なのは、この時点でTypeScriptも導入することです。

2026年のReact開発ではTypeScriptがデフォルトです。

未経験者にTypeScriptを教えるときは、最初から細かい型理論に入る必要はありません。

まずは「型があるとバグが減る」、「チーム開発で読みやすくなる」という実感を持ってもらう方が大切です。

React + TypeScript + API連携まで進むと、実務に近いスキルが身につきます。

### 5. React + TypeScriptで「完成できる」レベルへ
最後のステップでは、TypeScriptを加えて実際のアプリを完成させることを目指します。

具体的には次のようなことです。

---

• TypeScriptの基本的な型定義\
• コンポーネントへの型の適用\
• イベント型の定義\
• ジェネリック型

---

TypeScriptを加えることで、コードのミスを事前に発見しやすくなります。

また、型が明示されることで、他のメンバーがコードを読んだときに意図が伝わりやすくなります。

つまりこのステップまで来ると、個人のスキルが上がるだけでなく、チーム全体のコード品質と開発速度が自然にそろっていくのです。

「コードの書き方がバラバラ」、「レビューのコストが高い」という課題は多くの現場で見られます。

しかしこれは、メンバー全員が同じ基準でReact + TypeScriptを書けるようになることで、徐々に解消されていきます。

## よくある質問
### Q1. 未経験者は本当にReactを習得できますか？
できます。ただし、順番が重要です。

HTML／CSSの基礎がある人なら、適切な順番で教えることで実務レベルまで到達可能です。

つまずく多くのケースは、能力ではなく「教える順番」に原因があります。

なお、現在のReact開発のスタンダード、React + Viteについて詳しくは下記ガイドも参考にしてください▼

• <a href="/blog/guide-react-vite">【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説</a>

### Q2. TypeScriptはいつから始めるべきですか？
Reactの基礎が身についたタイミングがベストです。

最初から導入しても型の概念で混乱しやすく、逆に遅すぎると後から修正コストがかかります。

「Reactで簡単なアプリが作れるようになった」という段階で導入すると、TypeScriptのメリットを実感しながら学べます。

## 「育てているつもりが育っていない」ときに見直したいこと
未経験社員をReactエンジニアに育てるロードマップは、次の順番が基本です。

---

小さな成功体験\
▼\
JavaScript基礎\
▼\
React基礎\
▼\
React実践\
▼\
TypeScript導入\
▼\
アプリ完成

---

React教育で大切なことは、難しい技術を一気に詰め込むことではなく、未経験者が途中で止まらず、最終的に現場で使えるところまで届く道筋を作ることです。

もし社内で、

• 新卒・未経験社員をReactで育てたい\
• 中途採用者のオンボーディングを早めたい\
• チーム全体のコード品質を底上げしたい

といった課題がある場合、教える順番を整理すると成果に結びつきやすくなります。

私が提供しているReact・TypeScript企業研修は、JavaScriptの基礎からReact・TypeScriptを使ったアプリ開発まで、4週間で体系的に習得できるプログラムです。

動画とテキストを組み合わせた学習環境に加え、質問無制限のチャットサポートと管理者向けの進捗レポートも含まれています。

「どこから手をつければいいかわからない」という段階からでも一緒に整理できます。

新卒・未経験社員のReact教育に悩んでいるご担当者様には、無料の資料をご用意してあります▼

---

# 【Next.js × TypeScript】3分で使えるようになる入門ガイド（2026年版）

URL: https://monotein.com/blog/nextjs-typescript-how-to-use
公開日: 2026.4.17
更新日: 2026.6.13
概要: 2026年のウェブ開発で最も使われているNext.js。その導入手順をビギナー向けにわかりやすく解説します。インストールからVercelやその他プラットフォームへの公開方法まで網羅しています。

## ウェブ開発で一番人気のNext.js
Next.jsはReactをベースにしたフレームワークです。

React単体では使うのが難しいさまざまな機能が入っています。

世界的に非常に人気のツールで、近年のウェブアプリ開発で最も使われているのがこのNext.jsです。

本記事ではそのインストール方法と公開方法を時短で紹介します。

使う言語はTypeScriptです。

本記事では解説していないNext.jsの全体像を知りたい方は、下記ガイドを参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

## Next.js（+ TypeScript）のインストール方法
ターミナル上で、Next.jsをインストールしたいフォルダに移動します。

ここでは「ダウンロード」フォルダにいるものとします。

そして次のコマンドをターミナルに打ち、「Enter」キーで実行してください。

```shell
npx create-next-app
```

ここで次のような表示が出ることがありますが、特に問題ではないので、「Enter」キーを押して次に進んでください。

```shell
Need to install the following packages:
    create-next-app@16.2.4
Ok to proceed? (y)
```

これ以降、質問がいくつか出てくるので回答していきましょう。

最初はこのアプリの名前で、これがフォルダの名前に使われます。

```shell
? What is your project named? ›
```

名前は好きなものが使えます。

ここでは「first-nextjs-app」と書きましょう。

```shell
? What is your project named? › first-nextjs-app
```

「Enter」キーを押すと次の質問が出ます。Next.jsの初期設定に関する質問です。

```shell
? Would you like to use the recommended Next.js defaults? › - Use arrow-keys. Return to submit.
    Yes, use recommended defaults
    No, reuse previous settings
❯   No, customize settings
    Choose your own preferences
```

選択肢は3つあります。

【1】\
TypeScriptやTailwind CSSなども一緒にインストールする（use recommended defaults）

【2】\
前回の設定を再利用する（reuse previous settings）

【3】\
自分で決める（customize settings）

ここではひとつひとつ自分で決めていきたいので、キーボードの矢印キーを使って3つ目の「No, customize settings」を選び、「Enter」キーで実行してください。

次の質問が出ます。Next.jsの具体的な初期設定の質問です。

```shell
? Would you like to use TypeScript? › No / Yes
? Which linter would you like to use? › - Use arrow-keys. Return to submit.
? Would you like to use React Compiler? › No / Yes
? Would you like to use Tailwind CSS? › No / Yes
? Would you like to use `src/` directory? › No / Yes
? Would you like to use App Router? (recommended) › No / Yes
? Would you like to customize the default import alias (@/*)? › No / Yes
? Would you like to include AGENTS.md to guide coding agents to write up-to-date Next.js code? › No / Yes
```

「Would you like to〜」とは「Do you want〜」の丁寧な聞き方です。

なので、これらの質問は「TypeScriptやTailwind CSSなども一緒にインストールしますか？」と聞いているのだと分かります。

ここでは最小限の設定で進めたいので、各質問には次のように回答してください。

```shell
✔ Would you like to use TypeScript?  → 「Yes」
✔ Which linter would you like to use?  → 「None」
✔ Would you like to use React Compiler?  → 「Yes」
✔ Would you like to use Tailwind CSS?  →  「No」
✔ Would you like your code inside a `src/` directory?  →  「No」
✔ Would you like to use App Router? (recommended) →  「Yes」
✔ Would you like to customize the import alias (`@/*` by default)?  →  「No」
✔ Would you like to include AGENTS.md to guide coding agents to write up-to-date Next.js code?  →  「No」
```

いくつかの質問について少し補足します。

この中で一番重要な質問は「App Router」に関するものです。

かならず「Yes」を選択してください。

これによって、Next.jsバージョン13以降でデフォルトになっている「Appフォルダ」が利用できます。

「TypeScript」に関する質問は必ず「Yes」を選びましょう。

「No」にするとJavaScript版がインストールされます。

React CompilerはReactのコードを最適化するツールで、これはNext.jsバージョン16から利用できるようになっています。

本記事でインストールしてもしなくても構いませんが、今後はReact Compilerの利用が標準になっていくと考えられるので、ここでは「Yes」を選択しています。

また、linterの質問の選択肢には「Biome」と「ESLint」が出てきます。

これらはコードの品質を高めるものです。

本記事では利用しないので「None」を選択しましたが、特にBiomeは近年注目を集めています。下記記事で使い方を確認しておきましょう。

<div class="rich-card-link">
<a href="/blog/what-is-biome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-240.png)

</div>
<div class="r-card-text">
【Biomeの使い方】PrettierとESLintを1つにまとめたツール（ビギナー向け）
</div>
</div>
</a>
</div>

<br/>

ESLintは下記記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/what-is-eslint">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-239.png)

</div>
<div class="r-card-text">
ESLintとは？Biomeとの違い・使い方を初心者向けに解説
</div>
</div>
</a>
</div>

<br/>


インストールが完了したら、ダウンロードフォルダを開いてください。

次のように、新しいフォルダができているのを確認できます。

<div class="img-border">

![dw-folder.jpg](../../images/singleBlogPageImages/blogArticleImages/blog242/dw-folder.jpg)

</div>

これをVS Codeで開きましょう（VS Codeにフォルダを直接ドラッグ&ドロップすれば開けます）。

中身は次のようになっています。

![image](../../images/singleBlogPageImages/blogArticleImages/blog242/pic-1.jpg)

この中には必要のないフォルダやコードがあるので、まずは整理をしていきましょう。

## Next.jsのクリーンアップ
まっさらな状態で始めたいので、不要なものを削除していきます。

`app`フォルダの中にある`page.module.css`を削除してください。

次は`app`フォルダの`globals.css`ファイルを開き、中に書かれているコードをすべて消しましょう。

次に`layout.tsx`を開き、中のコードをすべて消し、次のコードを書いてください。

```js
// app/layout.tsx

import "./globals.css"

const RootLayout = ({ children }: { children: React.ReactNode }) => {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    )
}

export default RootLayout
```

次は`page.tsx`を開き、ここでも同様に、書かれているコードをすべて消しましょう。

そして次のコードを書いてください。

```js
// app/page.tsx

const Home = () => {
    return (
        <div>
            <h1>こんにちは</h1>
        </div>
    )
} 

export default Home
```

VS Code上部メニューバーの「File」→「Save」、もしくは「Command」+「S」で、各ファイルに加えた変更を保存しましょう。

これでクリーンアップが完了して、Next.js開発を始める地ならしができました。

次はNext.jsを起動させましょう。

ターミナルに`npm run dev`を打ち、「Enter」で実行すると、次のように表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog242/pic-2.jpg)

</div>

指定されている`http://localhost:3000`を開いてみましょう。

次のように表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog242/pic-3.jpg)

</div>

VS Codeに戻り、`page.tsx`内の`<h1>`タグの文字列を、「さようなら」に変えて保存してみましょう。

ブラウザを見ると、表示も変わっています。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog242/pic-4.jpg)

</div>

つまり`page.tsx`の`return`横のカッコ`( )`内は、HTMLと同じ要領で編集できることがわかります。

これがNext.jsの使い方の初歩の初歩です。

## layout.tsxの役割
`layout.tsx`はNext.jsが用意している特殊なファイルです。

アプリ全体で適用したいスタイルやコンポーネントなどをここに書きます。

`layout.tsx`という名前のファイルに書いたコードは、次図のように`app`フォルダ内に作ったすべての`page.tsx`を包み込むように機能するのです。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog242/layout-tsx.png)

</div>

## Next.jsの公開方法
Next.jsはVercelで公開するのが一般的です。

VercelはNext.jsの開発元が運営しているプラットフォームなので、Next.jsのさまざまな機能を制約なしに実行できるからです。

Vercelでの公開には、コードをGitで管理していることが前提なので本記事では触れませんが、「Next.js + Vercel」が一般的な運用だと知っておきましょう。

Vercel以外で公開するには、buildとexportという作業を、あらかじめ手元のコンピューター内で行う必要があります。

exportを行う下記コードを`next.config.ts`に追加しましょう。

```js
// next.config.ts

import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  /* config options here */
  output: "export",            // 追加
};

export default nextConfig;
```

変更を保存しましょう。

ターミナル上で「control」を押しながら「C」を押して、Next.jsを停止させてください。

そしてbuildを行う下記コマンドを実行しましょう。

```shell
npm run build
```

`out`という新しいフォルダが生成されます。

この`out`フォルダをNetlifyなどにアップロードすれば、アプリをオンラインで公開可能です。

なお、Vercel以外のプラットフォームで公開するときの注意点は、次の記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/deploy-nextjs-to-other-hosting-platforms">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-151.png)

</div>
<div class="r-card-text">
Next.jsをVercel以外で公開する方法（Git不要／Appルータ使用／Netlify）
</div>
</div>
</a>
</div>

<br/>

## ここまで終えて、次のステップ
Next.js + TypeScriptのセットアップと公開方法までが完了しました。

これで「Next.js × TypeScript開発のスタートライン」に立てたことになります。

次に学ぶべきことは下記ガイドにまとめました。

TypeScriptを難しく感じる人が多い理由、乗り越え方、使いこなすための簡単な方法など、ビギナーが知っておきたい多くのことをカバーしています▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

Next.jsの中心機能であるReactサーバーコンポーネント（RSC）やReact 19の新機能まで体系的に理解したい人はこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

## よくある質問
### Q1. Next.jsとReact + Vite、選ぶ基準を教えて
現在のReact開発のツールは「Next.js」もしくは「<a href="/blog/react-vite-how-to-use">React + Vite</a>」の二択です。

この大まかな使い分けは次のようになります。

---

• 社内用アプリや管理画面のダッシュボードなど → React + Vite

• SEOが重要 → Next.js

• 規模が大きく複雑な機能が必要 → Next.js

• 軽量に運用したい → React + Vite

---

より詳しくはこちらの記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/react-vite-or-nextjs-which-to-choose">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-187.png)

</div>
<div class="r-card-text">
【2026年版】React + ViteとNext.js、どちらを選ぶべきか？ 用途別の選び方を分かりやすく解説
</div>
</div>
</a>
</div>

<br/>

React + Viteの使い方は下記記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/react-vite-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-237.png)

</div>
<div class="r-card-text">
【Vite + React + TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

### Q2. npm run dev以外のコマンドを教えて
Next.jsは、手元のパソコンでの開発時と、オンラインでの公開時の挙動が異なる場合があります。

開発環境と本番環境での動きに違いが発生するのは問題です。

そのため、本番環境の挙動もテストできるコマンドが用意されています。

先ほど紹介したビルドコマンド`npm run build`完了後に、次のコマンドを実行しましょう。

```shell
npm run start
```

これで本番環境での動きをチェックできます。

まとめたものが次表です。

|   **開発環境での挙動**  |  **本番環境での挙動**  | 
|:----:| :----:|
|npm run dev| npm run build → npm run start | 

### Q3. Reactそのものを難しく感じます。どうすればいいですか？
Next.jsは便利なフレームワークですが、ベースはReactです。

Next.jsで難しさを感じる場合、その原因がReact本体の理解不足にあるケースも少なくありません。

Reactを難しく感じる理由と乗り越え方は、こちらのガイドにまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

### Q4. フロントエンドの学習はどのように進めていけばいいですか？
Next.jsのセットアップができても、フロントエンド開発者として就職をしたり、フリーランス案件を獲得するにはまだ不十分です。

React、TypeScriptの基礎を含めた全体の学習ステップを把握しておく必要があります。

学習全体の流れを知りたい方は、こちらのロードマップを参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

### Q5. Next.js × TypeScriptのセットアップができたあと、何を学べばいいですか？
ここまでで、Next.js × TypeScriptを「動かす」ところまではできました。

しかしApp Routerの仕組みやReactサーバーコンポーネントなど、Next.js特有の概念はまだ何も触れていません。

そして、それらの概念を支えているのはReactとTypeScriptの理解です。

「なぜこのコードで動くのか」「なぜこのpropsの型が必要なのか」といった疑問は、React × TypeScriptを体系的に学ぶことで解消していきます。

詳しくは下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-typescript-how-to-use">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-typescript-how-to-use)

---

# Next.js × TypeScriptの新刊が出ました

URL: https://monotein.com/blog/new-book-release-nextjs-supabase-typescript
公開日: 2026.4.15
概要: 三好アキ著の好評既刊書のTypeScript増補版。Next.js・Supabase・JWTを使ったフルスタックアプリをJavaScriptで作り、その後TypeScriptへ書き換えます。初めて本格的なアプリ開発にトライする方に最適。

## ビギナー向けNext.js × TypeScript教材
ビギナー向けのNext.js教材として好評の「[Next.jsでつくるフルスタックアプリ with Supabase（前編・後編）](https://www.amazon.co.jp/dp/B0FYFXVMSF)」。

今回、これにTypeScriptへ書き換える章を追加した増補版をリリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0GX2WKN36">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1-ts.svg" alt="Next.js × TypeScriptでつくるフルスタックアプリ with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.js × TypeScriptでつくるフルスタックアプリ with Supabase</p>
        <p class="bc-desc">—2026年最新のアプリ開発スキルが身につく1冊</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

前編（バックエンド開発）・後編（フロントエンド開発）の2冊構成です。

最新のNext.jsバージョン16を使っています。

「コードを書き、アプリを作りながらNext.jsの使い方を紹介していく」という流れは私の他の本と同じです。

本書では、JavaScriptで開発したあと、最後にTypeScriptへと書き換える構成にしてあります。

TypeScriptの採用が広がる中で「既存のJavaScriptをTypeScriptに書き換える」という場面も増えており、これに対応するスキルを身につけるためです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-supabase-typescript">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-supabase-typescript)

## 主な使用ツール
• Next.jsバージョン16

• Reactバージョン19

• TypeScript、Supabase、Jose（JWT）など

## 対象者
「HTML／CSSの経験はあるけれど本格的なウェブアプリ開発にはじめて挑戦」という方です。

Next.js、React、TypeScript、JavaScriptの深い知識は必要ありません。

ビギナーの方でも無理なく読み進められる難易度です。

2026年最新のフロントエンド開発スキルを身につけたい方は、ぜひ手に取ってみてください。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0GX2WKN36">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1-ts.svg" alt="Next.js × TypeScriptでつくるフルスタックアプリ with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.js × TypeScriptでつくるフルスタックアプリ with Supabase</p>
        <p class="bc-desc">—2026年最新のアプリ開発スキルが身につく1冊</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-supabase-typescript">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-supabase-typescript)

---

# Biomeとは？ESLint・Prettierとの違い、使い方を2分で解説

URL: https://monotein.com/blog/what-is-biome
公開日: 2026.4.12
更新日: 2026.4.24
概要: Biomeとは、PrettierとESLintの役割をひとつにまとめたツールです。コードの整形とルール違反の検出を、1つのツールで完結できます。Biome.jsの導入方法と設定ファイルの書き方をビギナー向けにわかりやすく解説します。

## Biomeの簡単な紹介
コードの整形やエラーチェックには、PrettierとESLintが広く使われています。

---

• Prettier\
→ コードの「見た目」を整える（使い方は<a href="/blog/what-is-prettier">こちら</a>）

• ESLint\
→ コードの「ルール違反やバグ」を検出する（使い方は<a href="/blog/what-is-eslint">こちら</a>）

---

どちらも便利なツールですが、それぞれインストールして別々に設定する必要があり、少し手間がかかりました。

そこで近年注目を集めるのがBiome（バイオーム）です。

いわば「Prettier + ESLint = Biome」というものになります。

Biomeは、Next.jsのデフォルトツールとして採用されるほど人気です。

このNext.jsの使い方をビギナー向けに解説した記事があります▼

<div class="rich-card-link">
<a href="/blog/nextjs-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-242.png)

</div>
<div class="r-card-text">
【Next.js × TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

## Biomeで何が変わる？
PrettierとESLintを使う場合、次のことが必要です。

• 2つの拡張機能をVS Codeに入れる\
• 2つのパッケージをプロジェクトにインストールする\
• `settings.json`、`.prettierrc`、`eslint.config.js`など複数のファイルで設定する

---

Biomeを使うと次のようになります。

• 1つの拡張機能をVS Codeに入れる\
• 1つのパッケージをプロジェクトにインストールする\
• `biome.json`という1つのファイルで設定する

設定の手間が大幅に減るのです。

<a href="/present?magnet=first-study-guide&from=what-is-biome">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&from=what-is-biome)

## Biomeはなぜ速い？
Biomeには「速い」という特徴もあります。

JavaScriptで書かれたPrettierやESLintと比べ、Rustで書かれたBiomeは実行スピードが高速です。

大きなプロジェクトになるほど、この差が体感しやすくなります。

## Biomeの使い方
流れは次のようになります。

Biome本体\
▼\
Biome設定ファイル\
▼\
VS Codeのエクステンション\
▼\
Biomeを整形ツールとして設定

---

まずBiome本体のパッケージをインストールします

```shell
npm install --save-dev @biomejs/biome
```

次はBiomeの設定ファイルです。

下記コマンドで設定ファイルを自動生成できます。

```
npx @biomejs/biome init
```

ルートに`biome.json`が作られ、デフォルトで中身は次のようになっています（記事執筆時点）。

```json
// biome.json

{
	"$schema": "https://biomejs.dev/schemas/2.4.12/schema.json",
	"vcs": {
		"enabled": true,
		"clientKind": "git",
		"useIgnoreFile": true
	},
	"files": {
		"includes": ["**", "!!**/dist"]
	},
	"formatter": {
		"enabled": true,
		"indentStyle": "space",
		"indentWidth": 4
	},
	"linter": {
		"enabled": true,
		"rules": {
			"recommended": true
		}
	},
	"javascript": {
		"formatter": {
			"quoteStyle": "double"
		}
	},
	"assist": {
		"enabled": true,
		"actions": {
			"source": {
				"organizeImports": "on"
			}
		}
	}
}
```

色々と書いてありますが、ポイントだけを紹介します。

---

• `"linter"` → ESLintに相当する設定\
• `"formatter"` → Prettierに相当する設定\
• `"organizeImports"` → importの順番を自動で整理し、未使用のものは削除する機能

---

以上、Biome本体と設定ファイルでBiomeは利用可能です。

ターミナルからBiomeを実行します。

しかしそれだと、毎回コマンドを書く手間がかかるため、VS Codeのエクステンションを利用して、リアルタイムでBiomeを実行するのが一般的です。

なので次は、VS Codeにエクステンションを追加しましょう。

下記URLからVS Codeにインストールしてください。

[Biomeリンク](https://marketplace.visualstudio.com/items?itemName=biomejs.biome)

最後に、Biomeをコード整形ツールとしてVS Code上に設定します。

ルートに`.vscode/settings.json`を作り、次のように書きましょう。

```json
{
   "editor.defaultFormatter": "biomejs.biome",
   "editor.formatOnSave": true
}
```

これによって、BiomeとVS Codeのエクステンションが結びつき、リアルタイムでBiomeが実行されます。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-biome">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-biome)

## PrettierやESLintから移行する場合
すでにPrettierやESLintを使っているプロジェクトにBiomeを導入する場合、次のコマンドで設定を自動変換できます。

```shell
npx @biomejs/biome migrate eslint --write
npx @biomejs/biome migrate prettier --write
```

既存の設定を読み取って、`biome.json`上に書き換えてくれます。

完全に移行できないルールもあるので、移行後はよく確認をするようにしましょう。

## よくある質問
### Q1. BiomeはPrettierやESLintの代替になる？
ほとんどのケースでは代替になります。

ただし、ESLintはエコシステムが非常に充実しています。

特定のフレームワークや用途に特化したルールが必要な場合、ESLintの方が適切なこともあるでしょう。

「複雑なロジックチェックはESLint、基本的な整形と高速化はBiome」と分けているケースもあります。

しかし個人開発やビギナーの学習用途であれば、Biome1つで十分対応できます。

### Q2. Biomeはどんなファイルに対応している？
Biomeは、フロントエンド開発で使われるほとんどのファイル形式に対応しています。

例えば下記のファイルです。

• JavaScript（.js）\
• TypeScript（.ts）\
• JSX／TSX\
• JSON\
• CSS\
• HTML\
• Markdown

ReactやTypeScriptを使う開発であれば、ほとんどのファイルをカバーできると考えて大丈夫です。

### Q3. Biomeは小さなプロジェクトでも使う意味がある？
あります。

Biomeは設定がシンプルなので、小さなプロジェクトでもすぐに使い始められます。

特にこれからPrettierやESLintを初めて導入する場合は、最初からBiomeを選ぶことで設定の手間を減らせます。

### Q4. Biomeは将来的に主流になる？
Biomeは近年急速に注目を集めているツールですが、現在まだ発展途上の部分もあります。

その一方でESLintは長年使われてきた実績があり、豊富なプラグインが強みです。

そのためすぐに完全に置き換わることはないですが、Biomeは設定がシンプルで機能がまとまっているため、新しいプロジェクトでは採用される機会は増えています。

これから覚えておくとよいツールの1つと言えるでしょう。

Biomeの設定が終わったら、React + Viteの開発環境と学習の流れをこちらのガイドで確認しておきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="/present?magnet=first-study-guide&from=what-is-biome">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&from=what-is-biome)




<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-biome">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-biome)

---

# ESLintとは？Biomeとの違い・使い方を初心者向けに解説

URL: https://monotein.com/blog/what-is-eslint
公開日: 2026.4.11
概要: ESLintとは、JavaScriptやTypeScriptのコードにある問題を自動で検出してくれるツールです。VS Code拡張機能を使った導入方法から、設定ファイルの書き方まで、ビギナー向けにわかりやすく解説します。React + Viteにも使われています。

## ESLintが教えてくれること
ESLintは、コードの「ルール違反」や「潜在的なバグ」を自動で検出するツールです。

具体的には次のようなことを検出してくれます。

• 定義したのに使っていない変数\
• セミコロンの有無などのルール統一\
• Reactのフックの使い方の誤り\
• 到達しないコード（実行されないコード）の検出

コードを書いた瞬間に教えてくれるので、その場ですぐ修正できます。

<a href="/present?magnet=first-study-guide&from=what-is-eslint">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&from=what-is-eslint)

## ESLintとPrettierとの違い
ESLintと似たものに<a href="/blog/what-is-prettier">Prettier</a>があります。

違いを整理しておきましょう。

---

• Prettier\
→ コードの「見た目」を整える（インデント・改行など）

• ESLint\
→ コードの「ルール違反やバグ」を検出する

---

Prettierは見た目の問題、ESLintは中身の問題を扱います。

役割が違うので、実際の開発では両方を使うことが一般的です。

## ESLintの働きを今すぐ確認する（ブラウザ上）
ESLintの機能を今すぐ確認したい場合は、ESLint Playgroundを試してみましょう。

https://eslint.org/play

ブラウザ上でコードを貼り付けると、ESLintがどのように問題を検出するかをすぐに試せます。

## ESLintの使い方（ミニマム）
ESLintを使うには、いくつか準備するものがあります。

ここで混乱するビギナーが多いので、少し詳しく見ていきましょう。

---

必ず必要なのはESLint本体です。

これは次のコマンドでプロジェクトに追加します。

```shell
npm install --save-dev eslint
```

（`--save-dev`とは、開発時にのみ必要なパッケージである`devDependencies`への保存を指定するものです。）

ESLint本体とともに設定ファイルも必要です。

これは`eslint.config.js`という名前で、プロジェクトのルートに作ってください（以前は`.eslintrc`という設定ファイルでしたが現在は非推奨です）。

`eslint.config.js`には次のような設定を書きます（下記は<a href="/blog/react-vite-how-to-use">Vite + Reactプロジェクト</a>でよく使われる設定例です）。

```js
// eslint.config.js

import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import { defineConfig, globalIgnores } from 'eslint/config'

export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{js,jsx}'],
    extends: [
      js.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      ecmaVersion: 2020,
      globals: globals.browser,
      parserOptions: {
        ecmaVersion: 'latest',
        ecmaFeatures: { jsx: true },
        sourceType: 'module',
      },
    },
    rules: {
      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
    },
  },
])
```

ESLint本体と`eslint.config.js`が準備できたら、ターミナルで次のコマンドを実行しましょう。

```shell
npx eslint .
```

プロジェクト全体がチェックされ、問題があればターミナルに次のように表示されます。

```shell
src/main.js
  1:12  error  Missing semicolon  semi
  2:12  error  Missing semicolon  semi

✖ 2 problems (2 errors, 0 warnings)
```

`npx eslint .`コマンドではこのように問題が表示されるだけですが、自動修正まで行いたい場合は次のコマンドを使いましょう。

```shell
npx eslint . --fix
```

なお、`package.json`に次のように設定されている場合は、`npm run lint`コマンドが`npx eslint .`と同じ働きをします。

```js
// package.json

{
   "scripts": {
      "lint": "eslint ."
   }
}
```

また、ESLintでチェック対象の範囲も設定可能です。

`eslint .`ではプロジェクト全体、`eslint src`と書けば`src`フォルダがチェックされます。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-eslint">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-eslint)

## ESLintの使い方（おすすめ）
ここまで、`npm install eslint`でESLint本体を用意、`eslint.config.js`で設定ファイルを用意、というミニマムな使い方を見てきました。

これでも十分に動きますが、チェック時には毎回コマンドを実行する手間がかかります。

コードを書いている時にリアルタイムで教えてくれたら便利です。

そのため一般的には、VS Codeのエクステンションも使います。

---

下記URLを開き、VS Codeにインストールしましょう。

[ESLintリンク](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)

`eslint.config.js`内の`rules`を見てください。

`"error"`としてあるものは赤い波線、`"warn"`としてあるものは黄色い波線（警告扱い）で表示されます。

（拡張機能を入れた後にESLintが動かない場合は、VS Codeを一度再起動してみてください）

---

ここまでのことをまとめると次のようになります。

| 項目                             | 役割                         | 必要度      |
| ------------------------------ | --------------------------  | ----------- |
| ESLint本体（`npm install eslint`） | コードを解析してチェックを実行するツール本体 | 必須 |
| 設定ファイル（`eslint.config.js`）     | どのルールでチェックするかを定義する       | 必須 |
| VS Codeのエクステンション               | エディタ上でリアルタイムに結果を表示する   | 任意  |

## よくある質問
### Q1. PrettierとESLintは両方入れないといけない？
必須ではありませんが、両方入れるケースは少なくありません。

Prettierは「見た目」、ESLintは「コードの問題」が担当なので、役割が違います。

VS Codeの拡張機能を2つインストールするだけなので、手間もほとんどかかりません。

Prettierについては下記記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/what-is-prettier">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-238.png)

</div>
<div class="r-card-text">
Prettierとは？インストールから設定、使い方まで初心者向けに全解説
</div>
</div>
</a>
</div>

<br/>

また近年は、ESLintとPrettier両方の働きをするBiome（バイオーム）が人気です。

下記の記事で紹介しているので参考にしてください▼

<div class="rich-card-link">
<a href="/blog/what-is-biome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-240.png)

</div>
<div class="r-card-text">
Biomeとは？ESLint・Prettierとの違い、使い方を2分で解説
</div>
</div>
</a>
</div>

<br/>

### Q2. Viteで作ったプロジェクトにESLintが最初から入っているなら、エクステンションは不要？
VS Codeにエクステンションが入っていれば、コードの赤線や黄線が表示されるので、ミスにすぐ気が付けます。

エクステンションが無い場合、チェックのために`npx eslint .`コマンドを実行する必要があり、手間がかかります。

なお実際にESLintを使うReact + Vite開発、Next.js開発は下記記事を参考にしてください。

▼ React + Vite開発の始め方（JavaScript）

<div class="rich-card-link">
<a href="/blog/react-vite-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-148.png)

</div>
<div class="r-card-text">
Vite + Reactの始め方｜インストールから起動まで3分で完了【2026年版】
</div>
</div>
</a>
</div>

<br/>

▼ React + Vite開発の始め方（TypeScript）

<div class="rich-card-link">
<a href="/blog/react-vite-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-237.png)

</div>
<div class="r-card-text">
【Vite + React + TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

▼ Next.js開発の始め方（TypeScript）

<div class="rich-card-link">
<a href="/blog/nextjs-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-242.png)

</div>
<div class="r-card-text">
【Next.js × TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

### Q3. 波線が表示されたコードは、必ず直さないといけない？
ルールの種類によります。

赤い波線（"error"）は、そのままにするとビルドが止まる場合があるので修正が必要です。

黄色い波線（"warn"）は「警告」なので、動作はしますが修正することが推奨されています。

どうしても警告を消したい場合は、そのルール自体をオフにすることもできます。次に紹介します。

###  Q4. ESLintのエラーを一時的に無視する方法はある？
無視したい行の直前に次のコメントを書くと、その行だけESLintのチェックをスキップできます。

```js
// eslint-disable-next-line
const x = 1;
```

特定のルールだけを無視したい場合は、ルール名を指定します。

```js
// eslint-disable-next-line no-unused-vars
const x = 1;
```

多用するとESLintを入れている意味が薄れるので、本当に必要な時だけ使うようにしましょう。

ESLintの設定が終わったら、React + Viteの全体的な開発フローを確認しておきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="/present?magnet=first-study-guide&from=what-is-eslint">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&from=what-is-eslint)


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-eslint">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-eslint)

---

# Prettierとは？インストールから設定、使い方まで初心者向けに全解説

URL: https://monotein.com/blog/what-is-prettier
公開日: 2026.4.10
概要: Prettierとは、コードの見た目を自動で整えてくれるツールです。インデント・改行・セミコロンなどを毎回手動で直す必要がなくなります。VS Code拡張機能を使った一番かんたんな導入方法を、ビギナー向けにわかりやすく解説します。

## Prettierが自動で整えてくれるもの

Prettierはコードの「見た目」を整えてくれるツールです。

次のようなものを自動で統一してくれます。

• インデント（スペースの量）\
• 改行の位置\
• セミコロン `;` の有無\
• クォートの種類（`'`か`"`か）\
• 1 行の長さ\
• カッコの位置

例えば次のようなコードを書いたとします。

```js
const x = { a: 1, b: 2 }
```

Prettierを使うと次のようになります。

```js
const x = { a: 1, b: 2 }
```

スペースが入り読みやすくなりました。

<a href="/present?magnet=first-study-guide&from=/blog/what-is-prettier">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/what-is-prettier)

## PrettierとESLintの違い

Prettier と似たものに<a href="/blog/what-is-eslint">ESLint</a>があります。

違いを整理しておきましょう。

---

• ESLint\
→ コードの「ルール違反やバグ」を検出する

• Prettier\
→ コードの「見た目」を整える（インデント・改行など）

---

ESLintは中身の問題、Prettierは見た目の問題を扱います。

役割が違うので、実際の開発では両方を使うことが一般的です。

## 使い方は2つ

Prettierの使い方は大きく2つあります。

### 【1】VS Codeのエクステンションを使う方法（おすすめ）

VS Codeの拡張機能（エクステンション）で「Prettier」と検索して、インストールするだけです。

設定も最小限で済み、ビギナーにはこの方法がおすすめなので、後ほど導入ステップを紹介します。

### 【2】npmでインストールする方法

プロジェクト単位でPrettierを追加する方法もあります。

次のコマンドでインストールします

```shell
npm install --save-dev prettier
```

チーム開発など、全員の書き方を統一したいときに使われます。

## Prettierの設定方法（VS Codeにインストール）

ビギナーのうちはVS Codeのエクステンションが便利なので、これから設定方法を説明します。

---

【1】エクステンションをインストール

下記URLを開き、VS Codeにインストールしましょう。

[Prettierリンク](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

---

【2】設定ファイルを作る

プロジェクトフォルダの最上位（ルート）に`.vscode`というフォルダを作りましょう。

その中に`settings.json`というファイルを作ります。

ここには次の内容を書いて保存します。

```json
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}
```

これだけで、ファイルを保存するたびにPrettierが自動で動きます。

（`"editor.formatOnSave": true`が、「保存時に自動整形する」という設定です）

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-prettie">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-prettie)

## 整形ルールを自分でカスタマイズしたい場合

上記の設定では、Prettierのデフォルト設定でコードが整形されます。

もし自分の好みに合わせたい場合は、ルートに`.prettierrc`という設定ファイルを作って行います。

```json
// .prettierrc

{
    "semi": false,
    "singleQuote": false,
    "tabWidth": 4,
    "useTabs": false
}
```

• `"semi": false` → 文末にセミコロンをつけない

• `"singleQuote": false` → シングルクォートではなくダブルクォートを使う

• `"tabWidth": 4` → インデントをスペース4つにする

• `"useTabs": false` → インデントはタブキーではなくスペースキーで行う

## 特定のファイルを整形したくない場合

Prettierに整形して欲しくないファイルがある場合は、`.prettierignore`というファイルをルートに作ります。

そこに除外したいファイルやフォルダを書きましょう。

書き方は`.gitignore`と同じです。

```shell
# .prettierignore

node_modules
dist
```

## よくある質問

### Q1. PrettierとESLintは何が違う？

Prettierは「見た目」を整えるツール、ESLintは「コードのルール違反」を検出するツールです。

---

• インデントや改行を自動で直してくれるのがPrettier

• 「`var`の代わりに`const`を使うべき」といったルールを教えてくれるのがESLint

---

役割が違うので、実際の開発では両方を使うのが一般的です。

ESLintについては下記記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/what-is-eslint">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-239.png)

</div>
<div class="r-card-text">
ESLintとは？Biomeとの違い・使い方を初心者向けに解説
</div>
</div>
</a>
</div>

<br/>

また近年は、ESLintとPrettier両方の働きをするBiome（バイオーム）が人気です。

下記の記事で紹介しているので参考にしてください▼

<div class="rich-card-link">
<a href="/blog/what-is-biome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-240.png)

</div>
<div class="r-card-text">
Biomeとは？ESLint・Prettierとの違い、使い方を2分で解説
</div>
</div>
</a>
</div>

<br/>

### Q2. Prettierはフロントエンド開発以外にも使える？

使えます。

なおフロントエンド開発については、HTML、CSS、JSON、Markdown、JavaScriptなど幅広く対応しています。

React開発でよく出てくるファイルのほぼ全てをカバーしていると考えて大丈夫です。

### Q3. VS Codeにエクステンションを入れたのに、保存しても自動整形されない

多くの場合、`.vscode/settings.json`の設定が正しく書かれていないことが原因です。

ファイルの場所（プロジェクトのルートに`.vscode`フォルダがあるか）と、`"editor.formatOnSave": true`が書かれているかを確認してください。

それでも動かない場合は、VS Codeのデフォルトフォーマッターが別のものに設定されている可能性があります。

`.vscode/settings.json`を見て、`"editor.defaultFormatter": "esbenp.prettier-vscode"`が書かれているかも合わせて確認してください。

---

Prettierが分かったら、次は<a href="/blog/what-is-eslint">ESLintの記事</a>も読んでみましょう。

Prettierが「見た目」を整えるのに対して、ESLintは「コードのルール違反」を教えてくれるツールです。

この2つを組み合わせることで、コードの品質が上がります。

Prettierの次は、React + Viteの開発環境のセットアップ全体を確認してみましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=/blog/what-is-prettier">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/what-is-prettier)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-prettier">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-prettier)

---

# 【Vite + React + TypeScript】3分で使えるようになる入門ガイド（2026年版）

URL: https://monotein.com/blog/react-vite-typescript-how-to-use
公開日: 2026.4.8
更新日: 2026.6.13
概要: 完全未経験者向けに、Vite + React + TypeScriptの始め方を3分で解説。インストールから開発サーバーの起動、buildまでを画像付きで丁寧に説明します。

## create-react-appとVite + React & TypeScript
2022年ごろまで、React開発では「create-react-app」を使うのが一般的でした。

「create-react-app」とは、React開発を始めるまでに必要なセットアップをすべて済ませてあるツールです。

「create-react-app」を使うことで、React開発をすぐに始められたのです。

しかし「create-react-app」も登場から長い時間が経っており、それに代わる新しいツールが求められていました。

そこに登場したのが「Vite + React」で、2026年の開発シーンではこれを使うのが一般的です。

本記事では、ビギナー向けに、この「Vite + React」をTypeScriptで使う場合のインストール方法と使い方の初歩を紹介します。

今回はTypeScriptを使いますが、JavaScriptを使う場合は下記記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/react-vite-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-148.png)

</div>
<div class="r-card-text">
Vite + Reactの始め方｜インストールから起動まで3分で完了【2026年版】
</div>
</div>
</a>
</div>

<br/>

## 「Vite + React」について
最初に「Vite + React」を簡単に紹介します。

従来まで使われていた「create-react-app」との最大の違いは、JavaScriptファイルをまとめる仕組みです。

---

Reactでは大量のJavaScriptファイルが使われています。

そのため、ブラウザでJavaScriptを実行する前に、それらを一度まとめてあげる必要があるのです。

この大量のファイルを束ねるプロセスは「バンドル」、そこで使われるツールは「バンドラー」と呼ばれます。

「create-react-app」では、Webpackというバンドラーが使われていました。

バンドラーにはWebpack以外にも複数ありますが、近年、日本を含め世界的にポピュラーなものがViteになります。

このViteをWebpackの代わりに使ったもの、それが「Vite + React」です。

Viteは処理能力が高いため、Webpackを使っている「create-react-app」と比べ、ファイルの変更をブラウザに反映させるまでの時間や、build実行時の待ち時間が大幅に短くなっています。

【 よりスピーディに、ストレスなく開発を進められる 】

これが「Vite + React」が支持を集める理由のひとつです。

それでは次に、「Vite + React」のインストール方法とbuildについて紹介をしていきます。

使う言語はTypeScriptです。

<a href="/present?magnet=first-study-guide&from=react-vite-typescript-how-to-use">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&from=react-vite-typescript-how-to-use)

## 「Vite + React & TypeScript」のインストール方法
ターミナル上で、「Vite + React & TypeScript」をインストールしたいフォルダに移動します。

ここでは「ダウンロード」フォルダにいるものとします。

そして次のコマンドをターミナルに打ち、「Enter」キーで実行してください。

```shell
npm create vite@latest
```

ここで次のような表示が出ることがありますが、特に問題ではないので、「Enter」キーを押して次に進んでください。

```shell
Need to install the following packages:
    create-vite@9.0.4
Ok to proceed? (y) 
```

これ以降、質問がいくつか出てくるので回答していきましょう。

最初はこのアプリの名前で、これがフォルダの名前に使われます。

```shell
◆  Project name:
│  vite-project
└
```

名前は好きなものが使えます。

ここでは「first-react-app」と書きましょう。

```shell
◆  Project name:
│  first-react-app
└
```

「Enter」キーを押すと次の質問が出ます。

```shell
◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
└
```

Reactを使った開発をしたいので、キーボードの矢印キーで「React」を選び、「Enter」キーで決定します。

次は、開発言語／フレームワークとして何を使うかを決める質問です。

```shell
◆  Select a variant:
│  ● TypeScript
│  ○ TypeScript + React Compiler
│  ○ JavaScript
│  ○ JavaScript + React Compiler
│  ○ RSC
│  ○ React Router v7 ↗ https://reactrouter.com
│  ○ TanStack Router ↗ https://tanstack.com/router
│  ○ RedwoodSDK ↗ https://rwsdk.com
│  ○ Vike ↗ https://vike.dev
└
```

ここでは「TypeScript」とだけ書かれているものを選び、「Enter」キーを押しましょう。

次はnpmパッケージを一緒にインストールするかを問う質問です。「No」を選び、「Enter」キーを押しましょう。

```shell
◆  Install with npm and start now?
│  ○ Yes / ● No
└
```

次のような表示が出たら、セットアップは完了です。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog148/pic-3.jpg)

</div>

ダウンロードフォルダを見ると、「first-react-app」フォルダが出来ています。

これをVS Codeで開きましょう（VS Codeにフォルダを直接ドラッグ&ドロップすれば開けます）。

中身は次のようになっています。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog237/pic-4.jpg)

</div>

「Vite + React」のJavaScript版との主な違いは次の点です。

---

⚫︎ Reactファイルの拡張子が`.jsx`ではなく`.tsx`になっている

⚫︎ TypeScriptの設定ファイル`tsconfig.app.json`、`tsconfig.json`、`tsconfig.node.json`が追加されている

---

さて、先ほどの質問「Install with npm and start now?」では「No」を選びました。

なので、最初に「Vite + React & TypeScript」で必要なパッケージをインストールする必要があります。

VS Code上部メニューバーの「Terminal」から「New Terminal」を選び、VS Code下部にターミナルを出してください。

そこに、パッケージをインストールする下記コマンドを打ち、「Enter」で実行しましょう。

```shell
npm install
```

`node_modules`が作成されます。これはパッケージ関係のフォルダです。

これで起動コマンドである`npm run dev`を実行すると、「Vite + React」のTypeScript版が起動します。

しかし、その前にフォルダ内を整理しましょう。

## 「Vite + React & TypeScript」のクリーンアップ
まっさらな状態で始めたいので、不要なものを削除していきます。

`src`フォルダを開き、その中の`assets`フォルダ、`index.css`を削除してください。

さらに`public`フォルダ内に入っているファイルは、`favicon.svg`以外はすべて削除しましょう。

次のようになります。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog237/pic-5.jpg)

</div>

なお`eslint.config.js`とは、コードの誤りを検出するESLintに関係するファイルです。

使い方や設定方法は下記の記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/what-is-eslint">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-239.png)

</div>
<div class="r-card-text">
ESLintとは？Biomeとの違い・使い方を初心者向けに解説
</div>
</div>
</a>
</div>

<br/>

さて、次は`App.css`を開いてください。

コードがすでに書かれているので、すべて消しましょう。

次のようになります。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog237/pic-6.jpg)

</div>

次は`App.tsx`を開き、ここでも同様に、書かれているコードをすべて消しましょう。

そして次のコードを書いてください。

```jsx
// App.tsx

import './App.css';

function App() {
    return (
        <div>
            <h1>こんにちは</h1>
        </div>
    );
}

export default App;
```

クリーンアップの最後が`main.tsx`です。

`main.tsx`を開き、次のコードを消しましょう。

```jsx
// main.tsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'        // 削除
import App from './App.tsx'
  
createRoot(document.getElementById('root')!).render(
  <StrictMode>  
    <App />
  </StrictMode>,  
)
```

VS Code上部メニューバーの「File」→「Save」、もしくは「Command」+「S」で、各ファイルに加えた変更を保存しましょう。

これでクリーンアップが完了して、「Vite + React & TypeScript」開発を始める地ならしができました。

なおReactファイルで必ず使われている`export`、`import`は多くのビギナーがミスをするところです。使い分けは下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/import-export-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-138.png)

</div>
<div class="r-card-text">
Reactのexportとimportを全解説｜default export・named exportの違いと使い方
</div>
</div>
</a>
</div>

<br/>

次は「Vite + React & TypeScript」を起動させましょう。

ターミナルに`npm run dev`を打ち、「Enter」で実行すると、次のように表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog148/pic-7.jpg)

</div>

指定されている`http://localhost:5173`を開いてみましょう。

次のように表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog148/pic-8.jpg)

</div>

VS Codeに戻り、`App.tsx`内の`<h1>`タグの文字列を、「さようなら」に変えて保存してみましょう。

ブラウザを見ると、表示も変わっています。

つまり`App.tsx`の`return`横のカッコ`( )`内は、HTMLと同じ要領で編集できることがわかります。

これが「Vite + React & TypeScript」の使い方の初歩の初歩です。

## TypeScriptのメリットを体験
TypeScriptならではのメリットを実際に体験しておきましょう。

`src`フォルダの中に`Message.tsx`というファイルを作ってください。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog237/pic-8-5.jpg)

</div>

そこには次のコードを書きます。

```jsx
// Message.tsx

type MessageProps = {
    text: string;
};

function Message({ text }: MessageProps) {
    return (
        <div>
            <p>{text}</p>
        </div>
    );
}

export default Message;
```

`type MessageProps`の部分がTypeScriptならではの記述です。

「このコンポーネントが受け取る`text`は、`string`（文字列）でなければならない」ということを表しています。

次に`App.tsx`を開き、この`Message`コンポーネントを読み込みましょう。

```jsx
// App.tsx

import './App.css';
import Message from './Message';      // 追加

function App() {
    return (
        <div>
            <h1>さようなら</h1>
            <Message text="TypeScriptで開発中"/>      // 追加
        </div>
    );
}

export default App;
```

保存をしてブラウザを確認しましょう。

この時点では問題なく動きます。

さて現在、`text`には文字列を渡しています。

なので今度は、文字列ではなく数値を渡してみましょう。

次のように変更してください。

```jsx
// App.tsx

import './App.css';
import Message from './Message'; 

function App() {
    return (
        <div>
            <h1>さようなら</h1>
            <Message text={12345}/>         // 変更
        </div>
    );
}

export default App;
```

すると、VS Codeがこの行に赤い波線を表示します。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog237/pic-8-6.jpg)

</div>

「`text`は`string`型のはずなのに`number`型が渡されている」というエラーです。

コードを書いている時にVS Codeがエラーを教えてくれるのです。

これが、JavaScriptには無いTypeScriptの大きなメリットのひとつです。

---

確認できたら、`text`は元の文字列に戻しておきましょう。

```jsx
<Message text="TypeScriptで開発中"/>
```

もうひとつTypeScriptを使うメリットを確認してみましょう。

次のコードを消してください。

```jsx
// App.tsx

import './App.css';
import Message from './Message'; 

function App() {
    return (
        <div>
            <h1>さようなら</h1>
            <Message text="TypeScriptで開発中"/>       // 削除
        </div>
    );
}

export default App;
```

現在、`Message`は`import`で読み込まれていますが、使われてはいません。

この状態でも、手元のパソコンで開発している時はアプリは普通に動きます。

しかし、次項で説明する「build」を実行しようとすると、次のようにエラーが出てbuildが失敗します。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog237/pic-8-9.jpg)

</div>

JavaScriptでは未使用のimportがあってもbuildは通ります。

TypeScriptでは、このような不要なコードもbuildの段階で検出されるのです。

確認できたら、削除した`<Message text="TypeScriptで開発中"/>`を元に戻して次のbuildに進みましょう。

いま体験した「型を渡し間違えるとエラーが出る」という機能は、TypeScriptのごく一部です。

Reactで実際に使う場面ごとに、TypeScriptをどこまで・どう書けばいいのかを一本にまとめた教材があります▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-typescript-how-to-use">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-typescript-how-to-use)

## 「Vite + React & TypeScript」のbuild方法
開発が完了し、オンラインで公開するときには「build」という作業を行います。

まず、ターミナル上で「control」を押しながら「C」を押して、「Vite + React & TypeScript」を停止させてください。

そして下記buildコマンドを打って、「Enter」キーで実行しましょう。

```shell
npm run build
```

`dist`という新しいフォルダが生成されます。

この`dist`フォルダをNetlifyなどにアップロードすれば、アプリをオンラインで公開可能です。

## ここまで終えて、次のステップ
「Vite + React & TypeScript」のセットアップとbuildまでが完了しました。

これで「React × TypeScript開発のスタートライン」に立てたことになります。

React + Viteの全体像と、その先の学習の進め方についてはこちらのガイドをご覧ください▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

ここまでTypeScriptを触ってみて難しく感じた方には、その理由や乗り越え方、使いこなすための簡単な方法など、こちらのガイドでカバーしています▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

## よくある質問
### Q1. create-react-appはもう使えないのですか？
使えなくはありませんが、2023年春からメンテナンスが止まっています。

2026年現在、新しいプロジェクトで使うことを推奨されていないので、これからReact開発を始めるならVite + React一択です。

なおVite + Reactで作るアプリは、SPA（シングルページ・アプリケーション）と呼ばれるものです。

これはNext.jsアプリとは異なるものなので、違いを理解しておきましょう。

SPAについては下記ガイドを参考にしてください▼

<div class="rich-card-link">
<a href="/blog/about-spa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-180.png)

</div>
<div class="r-card-text">
SPAとは？シングルページアプリケーションの仕組み・MPAとの違いを2分で解説
</div>
</div>
</a>
</div>

<br/>

React + Viteとよく比較対象として挙げられるNext.jsの使い方は、下記記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/nextjs-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-242.png)

</div>
<div class="r-card-text">
【Next.js × TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

Next.jsとReact + Viteとの使い分けは下記ガイドをどうぞ▼

<div class="rich-card-link">
<a href="/blog/react-vite-or-nextjs-which-to-choose">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-187.png)

</div>
<div class="r-card-text">
【2026年版】React + ViteとNext.js、どちらを選ぶべきか？ 用途別の選び方を分かりやすく解説
</div>
</div>
</a>
</div>

<br/>

Next.jsの全体像を理解したい方は下記ガイド記事をご利用ください。

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

### Q2. Reactアプリでページを作るにはどうすればいいですか？
HTML開発時には`about.html`や`blog.html`というファイルを作れば、それがページになりました。

React開発では別の仕組みが必要です。

React RouterやTanStack Routerと呼ばれるツールを使って行います。

これらのツールはページを作る以外にも様々な便利な機能を提供しているため、Reactアプリでのページ生成時にはほぼ必ず使います。

しかし実は、React RouterやTanStack Routerを使わなくてもページの作成は可能です。

方法は下記の記事で紹介しています。

HTML開発時のように、ファイルをページとして使う方法はこちら▼

<div class="rich-card-link">
<a href="/blog/react-app-routing-without-external-packages-2">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-231.png)

</div>
<div class="r-card-text">
React RouterやTanStackを使わないページ移動の実装方法（File-based routing）
</div>
</div>
</a>
</div>

<br/>

コードでページを生成・管理する方法はこちら▼

<div class="rich-card-link">
<a href="/blog/react-app-routing-without-external-packages-1">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-227.png)

</div>
<div class="r-card-text">
React RouterやTanStackを使わないページ移動の実装方法（Code-based routing）
</div>
</div>
</a>
</div>

<br/>

### Q3. TypeScriptやJavaScriptをまだ学んでいなくても、Vite + Reactは使えますか？
使えます。

HTMLとCSSの知識があればReactの入門は可能です。

TypeScriptやJavaScriptの知識は、Reactに慣れたあとで少しずつ身につけていきましょう。

Reactを学び始めて難しく感じてきた方は、こちらのガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

### Q4. フロントエンドの学習はどのように進めていけばいいですか？
React + Viteのセットアップができても、フロントエンド開発者として就職をしたり、フリーランス案件を獲得するにはまだ不十分です。

TypeScript、Next.jsといったより高度なツールのスキルも必須になります。

学習全体の流れを知りたい方は、こちらのロードマップを参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

### Q5. 今回学んだ型チェック以外に、TypeScriptで何を学べばいいですか？
本記事で体験したのは「渡す値の型が違うとエラーになる」という基本の一部だけです。

実際のReact開発では、propsの型定義、useStateやuseEffectでの型の使い方、[イベントの型の書き方](/blog/typescript-react-event-3-annotations)、[Zod](/blog/what-is-zod)を使ったAPIデータの型チェックなど、覚えておくべきパターンがいくつもあります。

しかもTypeScriptには「Reactでよく使う機能」と「ほとんど使わない機能」があり、すべてを学ぶ必要はありません。

Reactで使う範囲に絞って、正しい順番で学べる教材があります。

詳しくは下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-typescript-how-to-use">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-typescript-how-to-use)

---

# 個人向けに作ったReact教材が、法人の社内研修でも使われていた話

URL: https://monotein.com/blog/master-courses-for-corporate-training
公開日: 2026.4.5
更新日: 2026.5.5
概要: 販売から1年経つReact + TypeScript教材。「基礎から体系的に学べる」「即戦力になる」「動画とテキストが揃っている」といった点が評価され、社内教育や研修でも利用されています。

## React × TypeScriptの社内研修
私はReactをはじめとするフロントエンド開発に関する教材の制作・販売をしています。

その中でも、ゼロから開発現場レベルまでスキルを高められる包括的な教材が「Reactマスター』および『TypeScriptマスター」です。

▼ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=blog/master-courses-for-cooperate-training)

![image](../../images/commonImg/react-master-video-square-ad-2026jul.png)

▼ [monotein.base.shop/p/00006](https://monotein.base.shop/p/00006/?utm_source=blog/master-courses-for-cooperate-training)

![image](../../images/commonImg/typescript-master-video-square-ad-2026jul.png)

販売を始めてから1年以上が経ち、購入者の方々の声を見てみると、企業や法人の経営者の方にもご購入いただいていることが分かりました。

理由を聞いてみると、「社内教育の教材として使っている」とのこと。

個人向けに作った教材ではあるのですが、

---

• 基礎から体系的に学べる構成になっている\
• 動画とテキストの両方が揃っている\
• 実践重視で、すぐに現場で使えるスキルが身につく

---

こういった点が評価されたようです。

対象ユーザーとして想定していたのは個人の学習者だったので、法人での活用は想定外でした。

とはいえ、教材の中身は開発現場ですぐに活かせる即効性の高いものなので、個人が使っても社内研修で使っても、高い効果が出るのは確かです。

また既刊の『[はじめてつくるReactアプリ with TypeScript](https://www.amazon.co.jp/dp/B094Z1R281)』も、企業の社内研修や社員教育でも使われており、一度に大量の注文が来ることがあります。

なお、「社内でReactやTypeScriptを扱える人材を育てたい」、「新人や異動メンバーの教育に困っている」といった場合には、個別のご相談も受けています。

ご興味があればお気軽にどうぞ▼

⚫︎ <a href="/corporate-training">monotein.com/corporate-training</a>

企業向けe-learning用教材も提供しています。

⚫︎ <a href="/corporate-materials">monotein.com/corporate-materials</a>

---

*研修に関係する記事一覧

• <a href="/blog/corporate-react-engineers-road-map">未経験社員をReactエンジニアへ。失敗しない教育ロードマップと研修のポイント</a>

• <a target="_blank" rel="noopener" href="/blog/typescript-corporate-typical-mistakes">TypeScript導入に失敗する企業がやっていること【原因と対策も解説】</a>

• <a target="_blank" rel="noopener" href="/blog/choosing-react-corporate-lessons">React研修の失敗しない選び方 ｜ 外注研修の『現場で使えない』を防ぐ3つのポイント</a>

• <a target="_blank" rel="noopener" href="/blog/important-thing-teaching-corporate-react">ビギナーへのReact研修。教える前に知っておきたかった3つのこと</a>

*現在のReact開発のスタンダード「React + Vite」完全ガイド。

• <a href="/blog/guide-react-vite">【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説</a>

無料の資料もご用意してあります。

ぜひご利用ください▼

---

# 【図解】なぜフロントエンドのReact開発でNode.jsが必要なの？

URL: https://monotein.com/blog/why-nodejs-is-needed
公開日: 2026.4.4
概要: Node.jsはバックエンドだけのものではありません。React、TypeScript、Next.js、現代のフロントエンド開発でNode.jsが必要な理由を、ブラウザとパソコンの関係から丁寧に説明します。

## Node.jsがフロントエンド開発で必要な理由

「_Node.jsはバックエンドで使うものでしょう？_」

「_なぜフロントエンドのReact開発でNode.jsがいるの？_」

こういった疑問を抱えているビギナーは多くいます。

Node.jsが必要な理由を1分で説明しましょう。

<a href="/present?magnet=first-study-guide&from=/blog/why-nodejs-is-needed">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/why-nodejs-is-needed)

パソコン内には様々なアプリケーションが入っています。

「パソコン」という「土台」の上でアプリケーションが動いているイメージです（次図）。

ブラウザもその内のひとつです。

![image](../../images/singleBlogPageImages/blogArticleImages/blog235/nodejs-1.png)

JavaScriptはウェブサイトやウェブアプリで使われています。

なので、ブラウザ上でJavaScriptが動くのは分かると思います。

![image](../../images/singleBlogPageImages/blogArticleImages/blog235/nodejs-2.png)

しかしもしここで、ブラウザ以外のアプリケーション上でもJavaScriptが使えたら便利です。

Node.jsはそのために開発されました。

パソコン上にNode.jsをインストールしたものが次図です。

![image](../../images/singleBlogPageImages/blogArticleImages/blog235/nodejs-3.png)

この結果、JavaScriptをブラウザ上だけでなく、ブラウザ以外の場所、つまりパソコン全体で使えるようになります。

![image](../../images/singleBlogPageImages/blogArticleImages/blog235/nodejs-4.png)

ブラウザ内で留まっていてはできない操作、例えば；

• パソコン内のファイルの読み・書き\
• データベースとやり取り\
• コマンドラインツールの開発

こういったことが、JavaScriptで行えるようになります。

（\*Node.jsが「JavaScriptの実行環境」と呼ばれるのはこのためです）。

---

TypeScript開発でNode.jsが必要なのも同じ理由です。

ブラウザはTypeScriptを処理できません。

ブラウザ以外の場所でJavaScriptへと変換してあげる必要があります。

そのためNode.jsが必要なのです。

Node.jsがインストールできたら、React + Viteのセットアップと学習の進め方はこちらのガイドをどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

Node.jsはNext.js開発でも当然必要になります。

Next.jsのセットアップからRSC・Server Actionsまでを体系的にまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=/blog/why-nodejs-is-needed">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/why-nodejs-is-needed)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-nodejs-is-needed">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-nodejs-is-needed)

---

# 今さらReactを学び始めていいのだろうか、という不安感

URL: https://monotein.com/blog/perfect-moment-will-never-come
公開日: 2026.4.2
概要: 「今学んだことがすぐ時代遅れになるかも」という不安を、多くのビギナーが感じています。しかし完璧なタイミングは存在しません。興味を持ったことをまず小さく試してみること。これが最善の手です。

## 「始めるのに最適なタイミング」は永遠に来ない
新しいツールやサービスが毎日のように登場しています。

AIだけを見ても、ChatGPTが広まったと思ったら、Gemini、Claude、Genspark、Grok......と、まるで雨後のタケノコのように出てきます。

このような状況の中、少なくないビギナーは「ある不安」を覚えているようです。

「*いま、Reactを学び始めていいのだろうか.....?*」

私に「*『Reactの次』に来るものは何ですか？*」と聞いてくる企業のIT研修担当の方もいます。

「*『Reactの次の新しいもの』がすぐ出てくるだろうから、それまで待とうかな.....*」

といった気持ちからでしょう。

誰も「すぐに時代遅れになるもの」に時間とエネルギーを投資したくありません。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/perfect-moment-will-never-come">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/perfect-moment-will-never-come)

## 考えてる ＝ 先延ばし

実は私も、かつてのビギナー時代、似たような不安を感じていました。

React、Vue、Angular。

どのフレームワークが今後一番長く残るのか、どれが一番「自分の時間の投資に見合うのか？」と考えていたのです。

しかしいま振り返れば、それは「考えていた」のではなく「先延ばしをしていた」でした。

---

変化のスピードは、私のビギナー時代よりも加速しています。

そのため、ビギナーが感じる「*自分の学んだことがすぐに役立たなくなるかも....*」という不安は、今の方がずっと大きいでしょう。

「*『次のReact』が出てきたらそれをやろう*」という気持ちになるのも当然です。

しかし事実は、次を待っていてもそれは来ない。

「完璧なタイミング」とか「完璧な機会」といったものは無いのです。

「完璧な学習教材」というものも存在しません。

「もう少し情報が揃ったら」、「もう少し状況が落ち着いたら」と待っていると、また新しいツールが登場し、また新しい不安が生まれます。

その繰り返しです。

結局、最善の一手とは「いま目の前にあることを始めること」。

完璧な準備が整ってからではなく、まず触ってみること。

興味を持ったことを、まずは小さく始めてみましょう。

始めてみないと、それが自分に合っているのかすら分からないのです。

Reactが合わなかったら、「じゃあ別のものを試そう」と思えます。

そう思えることが発見であり、大きな前進です。

「まず触ってみよう」と決めたとき、次に気になるのは「どこでつまずくのか」、「難しく感じたらどうすればいいのか」ということだと思います。

Reactでビギナーがつまずきやすいポイントと、その具体的な乗り越え方をまとめたガイドがあります▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/perfect-moment-will-never-come">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/perfect-moment-will-never-come)

---

# 【専門用語なし】でTypeScriptを学べる完全ビギナー向け入門書を出しました

URL: https://monotein.com/blog/typescript-book-new-release
公開日: 2026.3.14
更新日: 2026.3.31
概要: ビギナー向けTypeScript入門書『はじめてさわるTypeScript』を出版しました。HTMLとCSSだけが前提知識。天気アプリを作りながら、TypeScriptの便利さを実感できる1冊です。

## 『はじめてさわるTypeScript』を出版しました
昨日、新しいビギナー向け入門書『はじめてさわるTypeScript』をリリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C9C9SVFG">
    <img class="bc-cover" src="/images/commonImg/tsbook.svg" alt="はじめてさわるTypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてさわるTypeScript</p>
        <p class="bc-desc">—「TypeScriptって難しそう」が、「意外と楽しい！」に変わる1冊</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

今回はTypeScriptの入門書ですが、いつもの通り前提知識はHTML／CSSだけあれば進められます。

Amazonの複数ランキングNo.1になっています。

![ts-book-ranking1.jpg](../../images/singleBlogPageImages/blogArticleImages/blog233/ts-book-ranking1.jpg)

![ts-book-ranking1.jpg](../../images/singleBlogPageImages/blogArticleImages/blog233/ts-book-ranking2.jpg)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-book-new-release">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-book-new-release)

## こんな人に向いています

*• TypeScriptに興味はあるけど、難しそうで手が出せない*

*• 以前挑戦したけど途中で挫折してしまった*

*• HTMLとCSSは少し触ったことがあるけど、その先に進めていない*

*• TypeScriptやReactに進みたいけれど入り口が見えない*

---

こんな経験をした人は多いと思います。

こういう人のレベルにぴったり合うのが今回の本です。

## この本でやること
この本では、小さな天気アプリを作りながらJavaScriptとTypeScriptの基本を学びます。

使うのはHTML、CSS、JavaScript、TypeScriptの4つだけ。

余計なツールや複雑な設定は必要ありません。

実際に動くウェブアプリを作りながら進むので、モチベーションが続きます。

完成見本はこちらから▼

• [typescript-book-weather-app.netlify.app](https://typescript-book-weather-app.netlify.app)

![code-based-routing-1](../../images/singleBlogPageImages/blogArticleImages/blog233/app-top.jpg)

都市名を英語で入力して「Get Weather」ボタンを押すと、その街の現在の天気・気温・空模様がリアルタイムで表示されます。

開発だけでなく無料のオンライン公開方法も解説するので、完成したアプリを家族や友人と共有可能です。

## HTML／CSSの次のステップ
ウェブ制作を学び始めた人の多くは

```shell
HTML

▼

CSS

▼

JavaScript
```

という順番で進みます。

ただ、JavaScriptの段階で止まってしまう人がかなり多い。

私自身もそうでした（私のJavaScript挫折体験は[こちら](https://typescript-book-weather-app.netlify.app)）。

理由はシンプルで、急に難しく感じるからです。

HTMLやCSSは「書けば見た目が変わる」ので理解しやすいですが、JavaScriptは考え方がまったく違います。

そこでこの本では、「専門用語は使わずにアプリを作りながら理解する」という形にしました。

## TypeScriptも一緒に触れる

もう一つのポイントはTypeScriptも最初から触れることです。

近年のフロントエンド開発の学習ロードマップは次のように進みます。

```shell
JavaScript

▼

TypeScript

▼

React
```

この本ではJavaScriptとTypeScriptの入り口を扱っています。

そのため、本書でJavaScriptとTypeScriptを理解すると、Reactの学習にスムーズに入っていけるでしょう。

---

TypeScriptはJavaScriptに「型」と呼ばれるオプション機能を追加したものです。


【 JavaScript + オプション機能 = TypeScript 】

この「型」とはデータの「種類」と「形」をチェックする仕組みで、プログラムのミスを事前に見つけてくれます。

しかし言葉で説明されるだけではピンとこないことも多いはずです。

本書では、まずJavaScriptでアプリを完成させ、その後TypeScriptに書き換える、という流れで進みます。

そのため、TypeScriptの便利さと必要性が実感を伴って理解できるようになっています。

くわしくはAmazonでどうぞ ▼

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C9C9SVFG">
    <img class="bc-cover" src="/images/commonImg/tsbook.svg" alt="はじめてさわるTypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてさわるTypeScript</p>
        <p class="bc-desc">—「TypeScriptって難しそう」が、「意外と楽しい！」に変わる1冊</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

フロントエンド学習ロードマップ ▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-book-new-release">

![roadmap-for-react-book-wide](../../images/commonImg/roadmap-for-react-book-wide.png)

</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-book-new-release">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-book-new-release)

---

# 1時間でアプリ公開！ ロングセラーのJavaScript本が2026年版リニューアル

URL: https://monotein.com/blog/update-javascript-book
公開日: 2026.3.12
更新日: 2026.3.31
概要: 星4.5以上・3年間読まれ続けた『はじめてさわるJavaScript』が第2版になりました。情報を2026年版に刷新し、読みやすさもさらに向上しています。ペーパーバック版も利用可能です。

## 3年間読まれ続けたJavaScript入門書が新しくなりました
2023年に出版した『はじめてさわるJavaScript』は、Amazonで星4.5以上の評価をいただき、JavaScript入門書としてコンスタントに読まれ続けてきました。

---

*「JavaScript学習でつまずいていたけど、これで前に進めた！」*

*「HTMLとCSSだけ分かっていれば進められる！」*

---

そんな声を多くいただいてきた一冊です。

このたび第2版として生まれ変わりました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C9C9SVFG">
    <img class="bc-cover" src="/images/commonImg/jsbook.svg" alt="はじめてさわるTypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてさわるTypeScript</p>
        <p class="bc-desc">—「わたし、JavaScript使えるかも」と1時間で思える本</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/update-javascript-book">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/update-javascript-book)

## 今回の改訂ポイント
### 【情報の鮮度を2026年版に】

ツールのUI変更やサービスの仕様変更など、3年前とは異なる部分をすべて最新情報に書き換えました。

---

*• weatherApiの最新の登録・利用フローを反映*

*• VS Codeの最新インターフェースに基づいた解説*

*• Netlify Dropを使った、さらにスムーズな公開プロセス*

---

「本の手順通りにやったのに画面が違う！」という技術書特有のストレスを排除しています。

### 【「読みやすさ」の追求】

「技術書は文字が詰まっていて読むのがしんどい」という声に応え、文章の構成を見直しました。

---

*• 改行を大幅に増やし、スマホやタブレットの小さな画面でもスラスラ読めるよう調整*

*• 視覚的に迷わないよう、図解とコードの配置を最適化*

![many-breaks.png](../../images/singleBlogPageImages/blogArticleImages/blog232/many-breaks.png)

### 【1時間で小さな成功体験をゲット】

今回の第2版でもゴールは同じです。

「1時間で世界中の天気を表示するアプリを作り、オンラインで公開する」

---

*「アプリが動いた！」*

*「自分のアプリがネットで見られる！」*

*「知らないことを知るのは楽しい！」*

---

こういった「小さな成功体験」こそが、学習を続けるための、そして人生を楽しむための秘訣です。

この新しい『はじめてさわるJavaScript』が、新しい挑戦のきっかけになれば幸いです。

電子書籍だけでなく、紙の本（ペーパーバック）でもご利用いただけます。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C9C9SVFG">
    <img class="bc-cover" src="/images/commonImg/jsbook.svg" alt="はじめてさわるTypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてさわるTypeScript</p>
        <p class="bc-desc">—「わたし、JavaScript使えるかも」と1時間で思える本</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

フロントエンド学習ロードマップ ▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/update-javascript-book">

![roadmap-for-react-book-wide](../../images/commonImg/roadmap-for-react-book-wide.png)

</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/update-javascript-book">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/update-javascript-book)

---

# React RouterやTanStackを使わないページ移動の実装方法（File-based routing）

URL: https://monotein.com/blog/react-app-routing-without-external-packages-2
公開日: 2026.3.10
更新日: 2026.4.6
概要: React RouterなどのパッケージなしでファイルベースのルーティングをReact（Vite）に実装する方法を解説。カスタムLinkコンポーネントでSPAのスムーズなページ遷移も実現できます。

## パッケージなしでページを遷移（ファイルでページを設定）
React（+ Vite）アプリでページ切り替え（ルーティング）を実装する時には、React RouterやTanStack Routerを使うのが一般的です。

しかしこれらを使わずともルーティングは可能なので、その簡単な方法を紹介します。

本記事では、Next.jsのような『ファイルがページに対応している切り替え（File-based routing）』を説明します。

コードでページを切り替える方式（Code-based routing）については、<a target="_blank" rel="noopener" href="/blog/react-app-routing-without-external-packages-1">こちらの記事</a>をご覧ください。

まずはReact + Viteを用意しましょう。

そして`index.css`内のコードはすべて消しておいてください。

（*React + Viteのセットアップについては<a target="_blank" rel="noopener" href="/blog/react-vite-how-to-use">こちらの記事</a>をご覧ください）

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-app-routing-without-external-packages-2">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-app-routing-without-external-packages-2)

## ページの用意
ページとして使うファイルを入れる`pages`フォルダを用意します。

![page-based-routing-1](../../images/singleBlogPageImages/blogArticleImages/blog231/page-based-routing-1.jpg)

次のようにファイルを用意してください。

![page-based-routing-2](../../images/singleBlogPageImages/blogArticleImages/blog231/page-based-routing-2.jpg)

各ファイルには次のように書きます。

```js
// pages/home.jsx

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
        </div>
    )
}

export default Home
```

```js
// pages/about.jsx

const About = () => {
    return (
        <div>
            <h1>About</h1>
        </div>
    )
}

export default About
```

```js
// pages/notfound.jsx

const NotFound = () => {
    return (
        <div>
            <h1>Not Found</h1>
        </div>
    )
}

export default NotFound
```

## ページ切り替えの仕組みの用意
まず`App.jsx`のコードをすべて消して、次のように書いてください。

```js
// App.jsx

const App = () => {
    return 
}

export default App
```

そして先ほど作ったファイルをすべて読み込みます。

```js
// App.jsx

const pages = import.meta.glob("./pages/**/*.jsx", { eager: true })   // 追加

const App = () => {
    return 
}

export default App
```

参考ですが、この`pages`の中身は次のようになっています。

<div class="img-border">

![page-based-routing-3](../../images/singleBlogPageImages/blogArticleImages/blog231/page-based-routing-3.jpg)

</div>

次はファイルパスをURLに変換します。

```js
// App.jsx

const pages = import.meta.glob("./pages/**/*.jsx", { eager: true })

// ⬇追加
function normalizePath(filePath) {
    return filePath
        .replace("./pages", "")
        .replace("/home.jsx", "")
        .replace(".jsx", "") || "/"
}
// ⬆追加

const App = () => {
    return 
}

export default App
```

最後に、これらを使ってルーティングを実現するコードを追加しましょう。

```js
// App.jsx

import { useEffect, useState } from "react"         // 追加

const pages = import.meta.glob("./pages/**/*.jsx", { eager: true })

function normalizePath(filePath) {
    return filePath
        .replace("./pages", "")
        .replace("/home.jsx", "")
        .replace(".jsx", "") || "/"
}

const App = () => {
    // ⬇追加
    const [path, setPath] = useState(window.location.pathname)

    useEffect(() => {
        const onPopState = () => setPath(window.location.pathname)
        window.addEventListener("popstate", onPopState)
        return () => window.removeEventListener("popstate", onPopState)
    }, [])

    const Page = Object.entries(pages).find(
        ([file]) => normalizePath(file) === path
    )?.[1].default

    return Page ? <Page/> : <h1>エラー</h1>
    // ⬆追加
}

export default App
```

## Linkタグの用意
ページを移動するリンクに`<a>`タグを使い、次のように書くとします。

```js
<a href="/about">About</a>
```

しかしこれではページがリロードされてしまい、<a target="_blank" rel="noopener" href="/blog/about-spa">SPA（Single Page Application）</a>の特徴である「スムーズなページ遷移」にはなりません。

なので専用の`<Link>`タグを用意しましょう。

`Link.jsx`を作ってください。

![page-based-routing-4](../../images/singleBlogPageImages/blogArticleImages/blog231/page-based-routing-4.jpg)

次のように書きます。

```js
// Link.jsx

export function Link({ to, children }) {
    const handleClick = (e) => {
    e.preventDefault()
    window.history.pushState({}, "", to)
    window.dispatchEvent(new PopStateEvent("popstate"))
}

return (
        <a href={to} onClick={handleClick}>
            {children}
        </a>
    )
}

export default Link
```

`<Link>`タグを各ページに読み込みましょう。

```js
// pages/home.jsx
import Link from "../Link"     // 追加

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
            <Link to="/about">About</Link>     // 追加
        </div>
    )
}

export default Home
```

```js
// pages/about.jsx
import Link from "../Link"     // 追加

const About = () => {
    return (
        <div>
            <h1>About</h1>
            <Link to="/home">Home</Link>     // 追加
        </div>
    )
}

export default About
```

```js
// pages/notfound.jsx
import Link from "../Link"     // 追加

const NotFound = () => {
    return (
        <div>
            <h1>Not Found</h1>
            <Link to="/home">Home</Link>     // 追加
        </div>
    )
}

export default NotFound
```

これで、パッケージを使わない、ファイルベースでのルーティングをReactに実装できました。

しかしこのようなマニュアル方式には限界もあります。

## この実装方法の限界
ページが増えたときにコードも増えていく、動的ルートが扱いづらい、テストが書きづらいといった問題が典型的です。

そのためやはり一般的には、React RouterやTanStack Routerといったパッケージを使うことになります。

なお、もうひとつの切り替え方式である『コードでページを切り替える方法（Code-based routing）』については、<a target="_blank" rel="noopener" href="/blog/react-app-routing-without-external-packages-1">こちらの記事</a>をご覧ください。

React + Viteの基礎から学習の全体像まで確認したい方は、こちらのガイドもどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-app-routing-without-external-packages-2">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-app-routing-without-external-packages-2)

---

# AmazonでNo.1のReact入門書を無料公開

URL: https://monotein.com/blog/first-chapter-from-react-book
公開日: 2026.2.22
更新日: 2026.5.15
概要: 5年間読まれ続けるReact + Vite + TypeScript入門書の冒頭を無料公開。HTMLとCSSの知識だけでOK。2〜3時間でウェザーアプリを作りながらReactの基礎が身につく、ビギナー向けハンズオン教材です。2026年1月に第3版が発売された最新情報にも対応。

## 好評のReact教材

5年に渡って好評のReact入門教材『[はじめてつくるReactアプリ with TypeScript](https://www.amazon.co.jp/dp/B094Z1R281)』。

AmazonのReact関係本の中では一番の高評価になっています。

![react-ts-book-high-review.jpg](../../images/singleBlogPageImages/blogArticleImages/blog230/react-ts-book-high-review.jpg)

本書は電子書籍と紙の本、両方でご利用いただけます。

紙のバージョンは企業の研修等で利用されており、大量の注文が来ることがあります。

さて、今回この第3版リリースを記念して、冒頭部分を公開します。

自分に合いそうだと思ったら、ぜひ本編も読んでみてください。

2026年最新の情報に対応しています。

Amazonで購入可能です。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B094Z1R281">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts.svg" alt="はじめてつくるReactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ with TypeScript</p>
        <p class="bc-desc">【発売から5年読まれ続けているReact × TypeScript入門書の決定版。2026年1月第3版発売。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

さらに2026年5月には、AI開発の章を追加した新版をリリースしました。

詳しくは▼

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0H1R95C2C">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts-ai.svg" alt="はじめてつくるAI × Reactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるAI × Reactアプリ with TypeScript</p>
        <p class="bc-desc">【2026年5月発売】AIアプリをReact × TypeScriptで作れるスキルが身につく本</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

## 本書の特徴

▶︎ **2〜3時間で成功体験を作る**\
学び始めで大切なことは「小さな成功体験」をすばやく作ることです。本書を読むとアプリ開発の成功体験を短時間で得られます。

▶︎ **作りながら学ぶ**\
目で単に読むのではなく手を動かしながら進むので飽きづらく、さらに作り上げていく楽しさ、充実感も味わえます。

▶︎ **詰め込みすぎない**\
学び初めの段階では深い理解や枝葉の知識は不要です。むしろ詰め込みすぎるとかえって難易度が上がり、挫折する可能性が高まります。

▶︎ **専門用語なし**\
プログラミングでビギナーがつまづく最大の原因は、なじみのない専門用語、カタカナ語です。本書はそれらを使わずに進み、「正しさよりもわかりやすさ」「難しさよりも楽しさ」を優先しています。

▶︎ **最新情報に準拠**\
出版後も本書の内容は定期的にアップデートしており、開発現場のスタンダードとベストプラクティスを常に取り入れたものになっています。

## 作るもの

本書では、天気を取得して表示するウェザーアプリをReact + TypeScriptで作ります。

![app-look.jpg](../../images/singleBlogPageImages/blogArticleImages/blog230/app-look.jpg)

[• react-typescript-book-with-vite.netlify.app](https://react-typescript-book-with-vite.netlify.app)

都市の名前を英語で入力すると、その街の天気が表示されます。上記URLからアクセスして実際に使ってみましょう。

本書はHTMLとCSSの学習を終えた人を対象にしているので、JavaScriptやTypeScriptの前提知識は必要ありません。

本書ではMacを使って開発を行います。Windowsの方は一部コマンドラインの表示が異なることに注意してください。

Reactはバージョン19、ベースにはReact + Vite、ブラウザはGoogleクロームを使います。

## ねらいと対象読者

本書の初版を執筆・出版したのは2021年5月でした。

執筆の理由は、その2ヶ月前の2021年3月に出版した『はじめてつくるReactアプリ（下記）』に対して、多数の読者の方から「TypeScriptを使って欲しい」という声が寄せられたためです。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">【2026年1月第3版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

2020年以前、TypeScript導入は大規模なReactアプリ開発に限られていました。

しかし2021年ごろからは、React + TypeScriptの組み合わせがアプリの規模を問わずほぼデフォルトといえる状態になっています。

本書初版発行から5年経った2026年の現在においてもこの流れは強くなる一方で、商業用のReactアプリをJavaScriptで開発することはほぼないといっていいでしょう。

そうはいっても、これまでJavaScriptだけを書いてきた人がTypeScript開発へと自発的に進むには、次章で触れるような特有の難しさもあります。

そこで本書では、ビギナーの時から現在のReact開発のスタンダードとなっているTypeScriptを使い始め、TypeScriptへの苦手意識を持たないようにすることを狙いとしています。

本書の最大の目的は、「React、TypeScriptって難しそうだったけど意外に簡単だな」という達成感と、「この先も勉強を進めていけそうだ」という楽観的な気持ちを持ってもらうことです。

そのためReactやJavaScript、TypeScriptの網羅的な解説や理論的な説明は極力少なくしています。

本書でReact入門に成功した人は、本書続編であるReactおよびTypeScriptの教材に挑戦してみましょう。詳しくは第3章で紹介します。

## 構成

第1章ではReactとTypeScriptの簡単な解説と、必要な準備作業を行います。

第2章ではReact + TypeScriptアプリの開発を行います。

第3章では完成したアプリをネット上に公開します。

そして最後の第4章では、アプリをブラッシュアップしてクオリティを一段高めます。

## Reactの最新版（バージョン19）について

現在のReactの最新版は、2024年にリリースされたバージョン19です。本書で使うReact開発のひな形「React + Vite」を利用すると、このバージョン19が自動でインストールされます。

バージョン19では様々な機能が追加されました。本書で開発をしていくウェザーアプリも、この新しい機能を使って開発することが可能です。

しかし現時点（2026年）では、普段目にするReactのコードは19以前のものがまだ大半を占めます。

さらに本書で扱う内容の大部分は、バージョン19を使っても変わることがない基礎部分です。

そのため入門書である本書において、現時点ではバージョン19を「発展的事項」として扱い、最終章にて紹介します。

本書で開発するアプリに関係する部分でいうと、バージョン19で導入された新機能は「これまでのReactコードを置き換えるもの」ではなく、むしろ「書けるコードの選択肢を増やすもの」です。

また繰り返しになりますが、本書で学ぶ内容は「変わりやすい最先端の部分」ではなく、「ベースとなる基礎部分」です。

そのため、本書で学ぶ内容がバージョン19以降で役に立たなくなるということはないので、安心してください。

## AI時代にReactを学ぶ意味

今ではプログラミング初心者でも多くの人がAIを使っています。

疑問点やエラー発生時に助けてもらう「アシスタント役」としてだけでなく、アプリのコードの大半をAIに書かせる「バイブコーディング」も盛んです。

さて、AIはインターネット上の情報を学習しています。

つまりネット上の情報量が多いトピックほど、より質の高いアウトプットがAIから得られるのです。

では、フロントエンドのテクノロジーの中で「情報量が最も多い」ものは何でしょうか？

Reactです。

それに加えて、Reactと密接に関連するNext.jsやTypeScriptの情報です。

これはReactが過去数年間「一強」とも言えるポジションにあり、2026年の今でも積極的に選ばれるテクノロジーであることを考えれば当然の結果です。

現在の開発シーンでReactは「デファクトスタンダード（事実上の業界標準）」の地位を確立しており、もはや「フレームワーク」や「ライブラリ」の枠を超え、アプリ開発の必須「インフラ」として定着しています。

その結果、AIの応答でもReactベースのコードが頻繁に提案されるのです。

しかし、AIのコードの正誤を判断するのは私たち人間の開発者。

アプリ開発でAI利用がますます浸透する中、Reactの正確な知識と深い理解が、これまで以上に重要性を増しています。

「AIをReact学習にどう使うか」が気になっている方へ。

React開発でそのままコピペして使えるAIプロンプトを10個まとめたガイドを無料で配布しています。

学習・実装・デバッグ・レビューまで場面ごとに使えます。

<a href="/present?magnet=react-ai-prompts&from=/blog/first-chapter-from-react-book">

![image](../../images/commonImg/react-ai-prompts.png)

</a>

• <a href="/present?magnet=react-ai-prompts&from=/blog/first-chapter-from-react-book">monotein.com/present</a>

## よくある質問

_◾️ はじめてアプリケーションを作ります。大丈夫でしょうか？_

**▶︎ はい、経験がなくても作れるようになります。**

本書はウェブアプリケーション制作の完全ビギナーがスムーズに開発ツールに慣れ、そして短時間で完成までもっていけるよう、難易度と構成を工夫して執筆してあります。

本書を始めるための前提知識はHTMLとCSSですが、深い理解は必要ありません。

JavaScript、TypeScriptの知識も不要です。

HTMLとCSSで数回程度ウェブサイトを作った経験があれば十分です。

---

_◾️ 本書でのReactアプリ制作や、アプリのオンラインでの公開にはどれくらいお金がかかりますか？_

**▶︎ 0円です。**

Reactは無料で利用でき、またアプリの公開に使うオンラインサービスも料金はかかりません。

---

_◾️ 本書で学んだ内容はReact以外のフレームワークでも役立ちますか？（例えばVue、Astro、Remix、Svelte、Angularなど）_

**▶︎ はい、役立ちます。**

次章で触れるReactの基礎概念に「コンポーネント」というものがあります。

これを使った「コンポーネント指向」という設計概念は、他のフレームワークにおいても共通するものです。

それ以外にもフレームワーク間で共通していることは非常に多く、本書で学ぶReactの知識があれば、他のテクノロジーもすばやく身につけることができます。

---

_◾️ AIは、Reactやフロントエンド開発者にどのような影響を与えています？_

多くのフロントエンド開発者がAIを使っています。

最適なコードをAIに提案してもらうだけでなく、すべてのコードをAIに書かせる「バイブコーディング」も起きています。

そして先ほども触れたように、AIが提案してくるコードの大半はReactです。

オンライン上にはReact関係の情報が最も多く、AIはそれを学習しているからです。

このような状況を見ると、「React学習者は減っているのだろう」と考える人が多いでしょう。

しかし実態はもう少し複雑です。

「全部AIにやらせる」とAIに丸投げする人が出てくる一方、「あれ、自分はReactを分かっていなかったな」と感じる人も増えているのです。

AIの登場によって「AIの書いてきたコードを人間が理解できない」という場面が増えました。

これが逆説的に開発者の学習熱を高めているのです。

そしてこれはフロントエンドに限られた話でもありません。

AIによって基礎分野（アルゴリズム、データ構造、アーキテクチャ、セキュリティなど）の勉強を促す動きは広がっています（<a href="/blog/ai-leads-developers-learning-fundamentals">詳しくはこちら</a>）。

AIによってReactに触れる機会は増えました。

同時に、「Reactが分からない」と感じる人も増えているのです。

---

また、AIによって学習の断片化は進んでいます。

AIの出してくるものが、個別状況に最適化された、断片的な情報だからです。

しかし実は断片的な知識とは、「全体を理解している人」に対してだけ役に立つものです。

たとえばパズル。

完成図を知らないまま、ピースだけ大量に渡されたとしましょう。

どれを、どこにあてはめればいいのかが分かりません。

しかし全体像を知っている人なら、「これはここに入るな」と推測・判断できます。

Reactでも同じです。

全体像を理解する必要性はかつてないほど高まっています。

入門書である本書の目的は「Reactにスムーズに入門してもらうこと」なので、全体像まではカバーしていません。

しかし本書の続編となる教材は用意してあるので、Reactの全体像を理解し、AI時代にReactをしっかり使いこなしたい人は、そちらもご利用ください。

この本書続編の『React × TypeScriptマスター』という教材については、後の章で紹介します。

---

_◾️ AIでReactのスキルの価値はゼロになりますか？_

**▶︎ 答えは「No」です。**

先ほども触れたように、現在のReactはアプリ開発の「デファクトスタンダード（事実上の業界標準）」、あるいは「必須インフラ」の地位を占めています。

確かに50年後の未来では、Reactはもう使われていないでしょう。しかし、現れては消えていくのが全てのテクノロジーの宿命です。違いは「消えていくまでのスピード」です。

現在の世界的なReact採用率から見ると、仮に明日、新しいフロントエンド・テクノロジーが突如現れても、たちまちのうちにReactが置き換えられるということは非現実的です。

また、その新しいテクノロジーがReactとは根本的に異なるということも考えにくいことです。新しいものは古いものの上に積み上がっていくからです。

そのため今から学ぶReactは、現在だけでなく、この先の未来においても役に立つスキルといっていいでしょう。

---

---

---

......以上が2021年の発売以来、5年に渡って好評のReact入門教材『[はじめてつくるReactアプリ with TypeScript](https://www.amazon.co.jp/dp/B094Z1R281)』の冒頭部分です。

ビギナーがReactへスムーズに入門できるようになっているので、この冒頭部分を読んで「自分に合ってそうだ」と感じた方はぜひ本編に目を通してください。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B094Z1R281">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts.svg" alt="はじめてつくるReactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ with TypeScript</p>
        <p class="bc-desc">【発売から5年読まれ続けているReact × TypeScript入門書の決定版。2026年1月第3版発売。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

本記事でさらにReactに興味が湧いてきたら、次のステップとして学習全体の流れを把握しておきましょう。

JavaScript・React・TypeScript・Next.jsをどの順番でどう進めていくかを、2026年版のロードマップとしてまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

本書は「React入門の成功体験」を作ることに焦点を絞っているため、詰め込みすぎない構成にしています。

そのため、本書だけではReactを使いこなす能力やスキルまでは習得できません。

本書続編にあたる下記教材では、AI時代に通用するReact × TypeScriptスキルを体系的に習得できます▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/first-chapter-from-react-book">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/first-chapter-from-react-book)

---

# 勉強のモチベーションが続かない本当の理由

URL: https://monotein.com/blog/reason-for-unable-to-continue-studying
公開日: 2026.2.21
更新日: 2026.4.6
概要: なぜ勉強で挫折してしまうのか？答えは「成功体験がない」こと。理論より先に「できた！」を実感することが継続の秘訣です。プログラミングもハンズオン教材を選べば変わるります。英語学習との違いを例にわかりやすく解説

## 勉強で挫折する理由

これまで多くのプログラミング初心者を見てきました。

その経験から言える「勉強で挫折する最大の理由」、それは.....

「成功体験の欠如」です。

## 勉強で挫折しない理由

「できた！」という喜びがあってこそ、「なぜうまくいったんだろう？」という学ぶ気持ちは出てきます。

---

• まず感情があって、理由がくる\
• まず体験があって、理解がくる\
• まず現象があって、理論がくる

つまり、まずココロが動いて、アタマが動く。

---

私たちの人生の経験というものも、ほとんどがこれです。

例えば日本語。

子供の頃を思い出してみましょう。

まずは日本語を少し話せるようになって、その後、小学校の国語の授業で形容詞やサ行変格活用などの理屈を学びました。

「実践」があって、その後で「知識」です。

この真逆が英語の授業。

英語学習がうまくいきにくいのは、体験（＝成功体験）よりも先に理屈をやろうとしているからです。

「できた！」という「喜び」よりも前に、「アタマ（知識）」をやろうとするからです。

<a href="/present?magnet=first-study-guide&from=/blog/reason-for-unable-to-continue-studying">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/reason-for-unable-to-continue-studying)

では理論を学ぶのは余計なことで、ずっと「ココロ」に頼っていればいいのでしょうか。

Noです。

スタートが無事切れ、ある程度の波に乗れたあとは、理論も学ぶことで相乗効果が生まれます。

より深く分かり、より深く考えることができるのです。

## プログラミング学習を継続する方法

最初に選ぶ教材が肝心です。

「できた！」という気持ちを味わえる教材を選びましょう。

そのためには、コードを細々（こまごま）と解説しているものではなく、ウェブサイトやアプリケーションを実際に作りながら学ぶスタイル（ハンズオン形式）のものが効果的です。

私の教材はすべてそういうスタイルになっているので、効果的にプログラミングを身につけたい方は試してみてください。

また学習の前には、HTML・CSSからReact・TypeScriptまで、最適な順番と各ステップの進め方をまとめたロードマップにもしっかり目を通しましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/reason-for-unable-to-continue-studying">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/reason-for-unable-to-continue-studying)

---

# ChatGPTに頼る前に理解すべきReactの3つの概念

URL: https://monotein.com/blog/react-3-key-concepts-in-ai-era
公開日: 2026.2.19
更新日: 2026.3.31
概要: ChatGPTに頼る前に知っておきたいReactの基礎概念が「コンポーネント」「Props」「State」の3つです。この3つを理解するだけで、AIの回答が格段にわかりやすくなります。

## AIに頼る前に理解すべきReactの3つのコンセプト
2026年の今、プログラミング学習の景色は一変しています。

---

• エラーが出たらChatGPTに投げる\
• Cursor（AIエディタ）にコードを書かせる\
• UIをすべてBolt.newやLovableで作る

---

これらはビギナーの間でもごく一般的です。

しかしこのような学習法を続けたために、「Reactがわかった」という実感を得られない初心者が増えている.....

というのが私の印象です。

AIを「使いこなす」ためにも、最低限の理解は必要です。

本記事では、ChatGPTに頼る前に知っておきたいReactの3つの概念を簡潔に紹介します。

## 概念①コンポーネント
Reactの中心にある考え方が「コンポーネント」です。

コンポーネントとは、UIを部品に分けたもの。

例えばあるウェブアプリを思い浮かべてください。

ヘッダー、サイドバー、記事一覧、フッター。

Reactではこれら一つひとつを「コンポーネント」という「部品」として作ります。

部品に分けることで、それをアプリ内のどこでも使いまわせるからです。

修正も楽になります。そのコンポーネントを一箇所直せば、使われているすべての場所に反映されるからです。

---

コードで見ると、コンポーネントは次のような形をしています。

```js
const Header = () => {
    return (
        <div>
            <h1>サイトのタイトル</h1>
        </div>
    )
}
```

やや専門的に言うと、「コンポーネント」とは「JavaScriptのfunction」のことです。

「Reactのコンポーネント = JavaScriptのfunction」と覚えておくだけで、Reactコードが読み解きやすくなります。

<a href="/present?magnet=first-study-guide&from=/blog/react-3-key-concepts-in-ai-era">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/react-3-key-concepts-in-ai-era)

## 概念②Props（プロップス）
コンポーネントを部品として使いまわせることは分かりました。

しかし「使いまわす」だけでは不十分な場面があります。

例えば「ボタン」コンポーネントを複数の場所で使いたいとき、場所によってボタンの文言が違う場合はどうすればいいのでしょうか。

---

そこで使うのが「Props」です。

Propsとは、コンポーネントに渡すデータのこと。

コードで見てみましょう。

```js
const Button = (props) => {
    return <button>{props.label}</button>
}
```

このButtonコンポーネントに対して、呼び出す側から次のようにPropsを渡します。

```js
<Button label="送信する" />
<Button label="キャンセル" />
```

同じコンポーネントでも、渡すPropsによって表示が変わります。

「送信する」と書かれたボタン、「キャンセル」と書かれたボタン。両方とも同じコンポーネントをベースにしているのです。

---

ChatGPTが書いてきたコードにほぼ必ず使われているのが、このPropsです。

必ず理解しておきましょう。

## 概念③State（ステート）
コンポーネントとPropsを理解したら、次に覚えるべきが「State」です。

Stateとは、コンポーネントが持つ「変化するデータ」のことです。

---

例えば、ショッピングアプリに「カートに追加」というボタンがあるとします。

ボタンを押すたびにカートの数が1ずつ増えていく。

この「カートの数」のように、ユーザーの操作によって変化するデータがStateです。

ReactでStateを使うときは、下記コードのように`useState`というものを使います。

```js
import { useState } from "react"

const Counter = () => {
    const [count, setCount] = useState(0)

    return (
        <div>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>増やす</button>
        </div>
    )
}
```

`useState()`のカッコ内にある数字は初期値です。ここでは`0`になっています。

ボタンが押されるたびに`count`が1増えていき、それが画面に反映されます。

Stateという概念については、[「Reactのstateとは？「状態」の意味と使い方を初心者向けにやさしく解説」](/blog/what-is-state-in-react)でさらに詳しく解説しています。

Stateを理解すれば、AIにより的確な指示を出せるでしょう。

## AIは「わかっている人」をさらに速くするツール
コンポーネント、Props、State。

この3つはReactのベースとなるコンセプトです。

基礎を理解した上でAIを使うと、「このエラーはStateの問題だな」といったように「当たり」をつけて質問できるようになります。

質問の精度が上がり、AIの回答の精度も上がるのです。

AIは、分かっている人をさらに速くするツール

「AI時代でも基礎の理解は必須」ということを覚えておきましょう。

さて「基礎の理解」が大事だと分かったあとには、「Reactはどこが難しいのか」「どういう順番で理解を深めていけばいいのか」という疑問が残ると思います。

Reactでつまずくポイントを整理し、乗り越え方をまとめたガイドで、全体像をつかんでみましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>



<a href="/present?magnet=first-study-guide&from=/blog/react-3-key-concepts-in-ai-era">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/react-3-key-concepts-in-ai-era)




<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-3-key-concepts-in-ai-era">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-3-key-concepts-in-ai-era)

---

# React RouterやTanStackを使わないページ移動の実装方法（Code-based routing）

URL: https://monotein.com/blog/react-app-routing-without-external-packages-1
公開日: 2026.2.18
更新日: 2026.4.6
概要: React + ViteでReact RouterやTanStack Routerなどのパッケージを一切使わずにページ遷移を実装する方法を徹底解説。useStateでコードベースのルーティングを自作し、カスタムLinkコンポーネントまで作れる！初心者でもわかるステップバイステップガイド

## パッケージなしでページを遷移（コードでページを設定）
React（+ Vite）アプリでページ切り替え（ルーティング）を実装する時には、React RouterやTanStack Routerを使うのが一般的です。

しかしこれらを使わずともルーティングは可能なので、その簡単な方法を紹介します。

本記事では、『コードでページを切り替える方法（Code-based routing）』を説明します。

ファイルでページを切り替える方式（File-based routing）については、<a target="_blank" rel="noopener" href="/blog/react-app-routing-without-external-packages-2">こちらの記事</a>をご覧ください。

まずはReact + Viteを用意しましょう。

そして`index.css`内のコードはすべて消しておいてください。

（*React + Viteのセットアップについては[こちらの記事](https://monotein.com/blog/react-vite-how-to-use)をご覧ください）

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-app-routing-without-external-packages-1">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-app-routing-without-external-packages-1)

## ページの用意
ページとして「About」、「Home」、そしてページが存在しない場合の「Not Found」のファイルを用意しましょう。

![code-based-routing-1](../../images/singleBlogPageImages/blogArticleImages/blog227/code-based-routing-1.jpg)

各ファイルには次のように書きます。

```js
// Home.jsx

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
        </div>
    )
}

export default Home
```

```js
// About.jsx

const About = () => {
    return (
        <div>
            <h1>About</h1>
        </div>
    )
}

export default About
```

```js
// NotFound.jsx

const NotFound = () => {
    return (
        <div>
            <h1>Not Found</h1>
        </div>
    )
}

export default NotFound
```

## ページ切り替えの仕組みの用意
`App.jsx`のコードをすべて消したら、次のように書いてください。

```js
// App.jsx

const App = () => {
    return 
}

export default App
```

現在のページを保存するために、stateを用意します。

```js
// App.jsx

import { useState } from "react"        // 追加

const App = () => {
    const [path, setPath] = useState(window.location.pathname)  // 追加

    return 
}

export default App
```

そして、ブラウザのURLの変更を扱う次のコードを追加しましょう。

```js
// App.jsx

import { useEffect, useState } from "react"    // 追加

const App = () => {
    const [path, setPath] = useState(window.location.pathname)

    // ⬇追加
    const renderByUrl = () => {
        setPath(window.location.pathname)
    }

    useEffect(() => {
        window.addEventListener("popstate", renderByUrl)
        return () => window.removeEventListener("popstate", renderByUrl)
    }, [])
    // ⬆追加

    return
}

export default App
```

最後に、先ほど作ったページをURLに合わせて表示するコードを加えます。

```js
// App.jsx

import { useEffect, useState } from "react"
import Home from "./Home"               // 追加
import About from "./About"             // 追加
import NotFound from "./NotFound"       // 追加

const App = () => {
    const [path, setPath] = useState(window.location.pathname)

    const renderByUrl = () => {
        setPath(window.location.pathname)
    }

    useEffect(() => {
        window.addEventListener("popstate", renderByUrl)
        return () => window.removeEventListener("popstate", renderByUrl)
    }, [])

    // ⬇追加
    if (path === "/") return <Home />
    if (path === "/about") return <About />
    return <NotFound />
    // ⬆追加
}

export default App
```

## Linkタグの用意
ページを移動するリンクに`<a>`タグを使い、次のように書くとします。

```js
<a href="/about">About</a>
```

しかしこれではページがリロードされてしまい、[SPA（Single Page Application）](https://monotein.com/blog/about-spa)の特徴である「スムーズなページ遷移」にはなりません。

なので、専用の`<Link>`タグを用意しましょう。

`Link.jsx`を作ってください。

![code-based-routing-2](../../images/singleBlogPageImages/blogArticleImages/blog227/code-based-routing-2.jpg)

次のように書きます。

```js
// Link.jsx

export function Link({ to, children }) {
    const handleClick = (e) => {
    e.preventDefault()
    window.history.pushState({}, "", to)
    window.dispatchEvent(new PopStateEvent("popstate"))
}

return (
        <a href={to} onClick={handleClick}>
            {children}
        </a>
    )
}

export default Link
```


<a href="/present?magnet=first-study-guide&from=/blog/react-app-routing-without-external-packages-1">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/react-app-routing-without-external-packages-1)



`<Link>`タグを各ページに読み込みましょう。

```js
// Home.jsx
import Link from "./Link"      // 追加

const Home = () => {
    return (
        <div>
            <h1>Home</h1>
            <Link to="/about">About</Link>   // 追加
        </div>
    )
}

export default Home
```

```js
// About.jsx
import Link from "./Link"      // 追加

const About = () => {
    return (
        <div>
            <h1>About</h1>
            <Link to="/home">Home</Link>    // 追加
        </div>
    )
}

export default About
```

```js
// NotFound.jsx
import Link from "./Link"      // 追加

const NotFound = () => {
    return (
        <div>
            <h1>Not Found</h1>
            <Link to="/home">Home</Link>      // 追加
        </div>
    )
}

export default NotFound
```

これで、パッケージを使わない、コードベースでのルーティングをReactに実装できました。

しかしこのようなマニュアル方式には限界もあります。

## この実装方法の限界
ページが増えたときにコードも増えていく、動的ルートが扱いづらい、テストが書きづらいといった問題が典型的です。

そのためやはり一般的には、React RouterやTanStack Routerといったパッケージを使うことになります。

なお、もうひとつの切り替え方式である『ファイルでページを切り替える方法（File-based routing）』については、<a target="_blank" rel="noopener" href="/blog/react-app-routing-without-external-packages-2">こちらの記事</a>をご覧ください。

React + Viteの基礎から学習の全体像まで確認したい方は、こちらのガイドもどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-app-routing-without-external-packages-1">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-app-routing-without-external-packages-1)

---

# 生成AI時代にプログラミングを学ぶワケ

URL: https://monotein.com/blog/ai-why-studying-programming
公開日: 2026.2.17
更新日: 2026.3.31
概要: AI時代にプログラミングを勉強する本当の理由。AIは指示の質次第でしかアプリを作れず、責任を取れない。React、Next.js、フロントエンド初心者が挫折しないための学習モチベーション維持法も紹介。

## 「なぜまだプログラミングを勉強するの？」という疑問

私はビギナーにプログラミングを教えています。

生徒の多くが、次の質問を一度は抱いたことがあるようです。

【 _AIがあるのに、なぜまだプログラミングを勉強するの？_ 】

AIがまだ不完全で、適切な指示をしても期待通りのアプリが出てこないことを知っている人は、

【 _近い将来、AIはより完璧になって、プログラミングは不要になる_ 】

と考えるようです。

教える側の私としては、これをやや危ない兆候と見ています

生徒の学習するモチベーションに影響するからです。

誰も「近い将来に役立たなくなるもの」に時間とお金を投資したくありません。

しかし、そもそも前提となっている「AIでプログラミングは不要になる」というのは本当なのでしょうか。

<a href="/present?magnet=first-study-guide&from=/blog/ai-why-studying-programming">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/ai-why-studying-programming)

## 何も知らないと何もできない

AIでアプリを作るには、（当然ですが）まず最初に「指示」を出す必要があります。

【 _ビジネスパートナーを探している人同士を結びつけるモバイルアプリを作って_ 】

このような文章のことです。

この指示に従ってAIはアプリを作り始めますが、この指示が不正確だったりあいまいだったりすると、出てくるモノも不正確であいまいなものになります。

人間の指示（＝入力）の質に、AIからの応答（＝出力）の質も左右されるのです。

しかし何も知らないと指示も出せません。

「こんなアプリを作りたい」と思っても、プログラミングの知識がないと、的確な指示や正確なプロンプトが書けないのです。

---

しかしAIの急速な発達で、人間の不正確な指示であっても、問題のないコードやアプリをAIが作れるようになったとしましょう。

これで問題は解決！

.....となるのかというと、なかなかそうはならないでしょう。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/ai-why-studying-programming">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/ai-why-studying-programming)

## AIは法廷に立てない

結局、AIは責任を取れないのです。

現在の社会体制のもとでは、責任を取る主体、あるいは責任を取れる主体は人間だけだからです。

そのため、「AIが法廷に立った」という話は誰も耳にしたことがありません。

もっと日常のレベルで考えてみましょう。

上司に「君のこのコードが原因で問題が発生したんだけど......」と言われたとします。

そこで、「それはAIに書かせたコードです。責めるなら僕ではなくAIを責めてください」と言えるでしょうか。

少なくとも2026年現在、これは「言い訳」とみなされます。

そしてこれは今後も長く変わらないでしょう。

責任の主体が「AI」ではなく、「AIに指示を出した人間」とされているからです。

---

AIを使うからこそ、ますます適切な指示を出すこと、そしてその前提となる「プログラミングの正しい知識と理解」が重要になってきているのです。

AIがある時代でもプログラミングの知識が必要だとわかった。では「Reactをどう学べばいいのか」「どこでつまずきやすいのか」という疑問には、こちらのガイドが答えています▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

「_AIがある時代でもプログラミングを学ぶ必要はわかった、でもどうやって？_」

こう思った人向けに、いつ、どこから、どの順番で始めればいいかを整理したロードマップを用意しました。

HTML・CSSからReact・TypeScript・Next.jsまでの学習の全体像を2026年版で解説しています▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=/blog/ai-why-studying-programming">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/ai-why-studying-programming)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/ai-why-studying-programming">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/ai-why-studying-programming)

---

# AIがコードを書ける時代、『なぜ』人間の開発者に知識が『まだ』求められているのか？

URL: https://monotein.com/blog/ai-knowledge-is-necessary-for-thinking
公開日: 2026.2.16
更新日: 2026.3.31
概要: AIがあるから勉強しなくていい？その考えは危険かもしれません。フロントエンジニア視点で、AI時代にこそ求められる知識・学習・基礎力の本当の価値を解説します。React、Next.js学習者に必要なマインドセット

## 「詰め込み教育」は悪である
• 知識偏重

• 暗記重視

• 画一的教育

• 詰め込み教育

• 受験第一主義

etc...

これらは、昔からよく聞く日本の学校教育への批判です。

そのため「知識よりも、もっと考える力を！」ということで方向転換がなされた（なされようとしている？）わけです。

しかし、私は必ずしも詰め込み教育が悪いとは思っていません。

「考える」には最低限の「知識」が必要だからです。

「考える」よりも上位の力である「判断する」には、「知識」が必要だからです。

「知識」というのは、考えたり、判断したりするためのベース。​

知識の少ない人は、自分の知っていることの範囲でしか課題に向かわないので思考が深化しません。

<a href="/present?magnet=first-study-guide&from=/blog/ai-knowledge-is-necessary-for-thinking">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/ai-knowledge-is-necessary-for-thinking)

## イノベーションとは「編集能力」
私たちは「ゼロから何かを作る」ということはほぼありません。

すでにあるものを「変換」させたり、「融合」させたり、「修正」したりすることがほとんどです。

「イノベーション」も、その実態は「組み合わせ力」や「編集の能力」と言われます。

例えば、スマートフォンは「電話 ＋ カメラ ＋ インターネット」。

サブスクリプション型サービス（Netflixなど）は「レンタル ＋ 定額制 ＋ ストリーミング」。​

しかし、このような組み合わせを考えたり思いついたりするには、「組み合わせるもの」、つまり「既にあるもの」を最初に知っていないといけません。

この「既存のもの」とは「知識」です。

## AI時代にこそ、エンジニアに知識が必要な理由
AIは今後、単なる「補完ツール」から「協働パートナー」へと進化します。

私たちアプリ開発者の世界では、AIと協働する時代はすでに来ています。

そこにおいて、人間の開発者がプログラミングの知識ゼロでは、協働はもとより、AIのコードの正誤も判断できません。

AIの加速度的な進化を見せられていると、AIが全てを解決してくれるかのような期待も抱いてしまいますが、まだまだ私たちがしなければならないことはたくさんあります。

何より、知識を得ることは「苦痛」ではなく「喜び」のはずです。

---

誰でも旅行で新しい場所を訪ねるとワクワクします。

自分の世界が広がる感覚があるからです。

◾️ 知識を得ること\
◾️ 新しい事柄を知ること\
◾️ 昨日できなかったことが今日はできるようになっていること

これらは私たちの人生の最大の楽しみであり喜びのひとつでしょう。

AIがどれだけ発達しても、私たちが手放す理由はないのです。

さて、「Reactを学ぶ」と決めた後に直面するのが、「難しい」という壁です。

しかしその「難しさ」には共通した原因があります。

つまずくポイントと乗り越え方を体系的に整理したガイドがあるので、学習を始める前に目を通してください▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>



<a href="/present?magnet=first-study-guide&from=/blog/ai-knowledge-is-necessary-for-thinking">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/ai-knowledge-is-necessary-for-thinking)




<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/ai-knowledge-is-necessary-for-thinking">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/ai-knowledge-is-necessary-for-thinking)

---

# 発売『はじめてつくるReactアプリ』第3版／AI、Reactバージョン19等

URL: https://monotein.com/blog/update-2026-react-1-book-ts-vite
公開日: 2026.2.1
更新日: 2026.5.15
概要: 2026年1月29日、『はじめてつくるReactアプリ』とTypeScript版の第3版を発売。HTMLとCSSの知識だけで始められるReact開発を、人気のハンズオン形式で解説。React 19の新情報やViteの最新バージョンに対応し、初心者にもわかりやすく進化。基礎をしっかり学びつつ、新機能も押さえられる一冊

## *（追加情報） AI × Reactアプリ開発版リリース
2026年5月に、本記事で紹介しているReact入門書にAI開発の章を追加した新版をリリースしました。

詳しくは▼

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0H1R95C2C">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts-ai.svg" alt="はじめてつくるAI × Reactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるAI × Reactアプリ with TypeScript</p>
        <p class="bc-desc">【2026年5月発売】AIアプリをReact × TypeScriptで作れるスキルが身につく本</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

## React入門書の第3版リリース
2026年1月29日に、拙著『はじめてつくるReactアプリ』と、そのTypeScript版『はじめてつくるReactアプリ with TypeScript』の第3版をリリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">【2026年1月第3版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B094Z1R281">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts.svg" alt="はじめてつくるReactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ with TypeScript</p>
        <p class="bc-desc">【発売から5年読まれ続けているReact × TypeScript入門書の決定版。2026年1月第3版発売。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

本書は電子書籍と紙の本、両方でご利用いただけます。

紙のバージョンは企業の研修等で利用されており、一度に大量の注文が来ることがあります。

## 以前の版からの変更点
今回の第3版では、内容を2026年1月時点の最新情報に更新しました。

AIに関する記述も一部追加し、いまReactを学ぶ必要性を初心者の人が理解できるようになっています。

情報が古くなっていた記述の修正、およびコードの刷新も行ないました。

また改行も大幅に増やし、読みやすさを向上させています。

![many-breaks.png](../../images/singleBlogPageImages/blogArticleImages/blog232/many-breaks.png)

本書は<a target="_blank" rel="noopener" href="/blog/first-chapter-from-react-book">こちらのページ</a>で無料で試し読みできます。

## 本書でReact入門に成功した後はどうするのか？
本書で紹介しているのは、React（およびTypeScript）の初歩の初歩です

本書でReact入門に成功した人にぴったりの続編も用意してあります▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/update-2026-react-1-book-ts-vite">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/update-2026-react-1-book-ts-vite)

---

# AI時代にReactを学ぶ理由 【初心者こそReactが最適なワケ】

URL: https://monotein.com/blog/ai-why-react-importance-increasing
公開日: 2026.1.31
更新日: 2026.4.7
概要: AIを使ってプログラミングを学ぶ初心者が増える今、なぜReactが最重要スキルなのか？情報量・AIとの相性・2026年の開発トレンドから、その理由をわかりやすく解説します。

## AIがReactのコードばかり提案する理由、考えたことありますか？
プログラミング初心者でもAIを使う人はたくさんいます。

疑問点やエラー発生時に助けてもらう「アシスタント役」としてです。

そのAIは、インターネット上の情報を学習しています。

つまり、ネット上の情報量が多いトピックほど、より質の高い答えがAIから得られるのです。

では、フロントエンドのテクノロジーの中で「情報量がもっとも多いもの」とは何でしょうか？

Reactです。

（*参考情報：「[アンソロピックのClaudeが拡大するほど儲かる企業──評価額1.5兆円「Vercel」とは何者か（Forbes Japan ／2026年4月2日）](https://forbesjapan.com/articles/detail/94270)」）

加えて、Reactと密接に関連するNext.jsやTypeScriptの情報です。

なぜなら、2026年のアプリ開発シーンで、Reactが「デファクトスタンダード（ =事実上の業界標準）」の地位を確立しているからです。

（2026年のフロントエンド学習のステップは、次の記事をご覧ください。）

<div class="rich-card-link">
<a href="/blog/frontend-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-214.png)

</div>
<div class="r-card-text">
【2026年版】React・TypeScript・Next.js・AIを最短で学ぶロードマップ
</div>
</div>
</a>
</div>

今のReactは、もはや「フレームワーク」や「ライブラリ」の枠を超え、「アプリ開発の必須インフラ」として定着しています。

そのため、AIの応答でもReactベースのコードが頻繁に提案されるのです。

しかし、AIのコードの正誤を判断するのは私たち人間の開発者。

アプリ開発でAI利用がますます浸透する中、Reactの正確な知識と深い理解が、これまで以上に重要性を増しているのです。

---

ReactはJavaScriptフレームワークですが、実はHTML／CSSの知識だけで使い始めることができます。

とはいえ、使い始めてしばらくすると、どこかの地点で多くの人が「難しい」と感じます。

しかしその難しさは、Reactそのものではなく、前段階の理解不足から来ていることがほとんどです。

つまずきやすいポイントと乗り越え方をひとつにまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>



<a href="/present?magnet=first-study-guide&from=ai-why-react-importance-increasing">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&from=ai-why-react-importance-increasing)




<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/ai-why-react-importance-increasing">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/ai-why-react-importance-increasing)

---

# AI時代になって、プログラミングを学ぶ価値が下がった

URL: https://monotein.com/blog/ai-programming-importance-decreasing
公開日: 2026.1.29
更新日: 2026.3.31
概要: AI時代に「プログラミングはオワコン」と言われる理由とその誤解を解説。価値が下がった能力・逆に重要になった能力、これから学ぶべき本質を初心者向けにわかりやすく説明します。

## プログラミングはオワコン

「AI時代になって、プログラミングを学ぶ価値が下がった」

これは一昨年（2024年）ごろから特によく耳にする話です。

私の生徒（プログラミング初心者）の中にも、これで学習のモチベーションが下がってしまう人がいるようです。

しかし「 AI時代になって、プログラミングを学ぶ価値が下がった」というのは、かなり大雑把な主張で、そして誤りです。

正確には、「 AI時代になって、プログラミングで学ぶべき項目の重要度が変化した」というのが正確です。

英語学習を例にとって説明します。

## 「読む・書く」から「聞く・話す」へ

30年ほど前、中学校や高校での英語教育が変わりました。

それまでの「読む・書く」から、「聞く・話す」という会話力やコミュニケーション重視の方向性へのシフト。

グローバル化が進展し、世界的なヒト・モノの移動が多くなることに合わせての当然の変化です。

例えば明治時代であれば、先進的なヨーロッパの知識を吸収することが重要だったので、英語の読解力がもっとも身につけるべき能力でした。

しかし時代が下り、社会が変化するのに合わせて、こちらからも情報を発信していく能動的な能力、つまり会話力がより重要になってきたのです。

しかし、このどちらであっても一つの根本的な事実は変わっていません。

「英語学習自体の重要性」です。

変わったのは、「英語で学ぶべき項目の重要度」です。

「読む・書く」という項目から「聞く・話す」という項目への変化。

プログラミングにおいてもこれは同じです。

<a href="/present?magnet=first-study-guide&from=/blog/ai-programming-importance-decreasing">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/ai-programming-importance-decreasing)

## AI時代の最重要なプログラミング能力とは？

「コードが書ける」、「すばやくコードを書ける」、「ベストプラクティスに則ったコードが書ける」といった能力は価値が下がりました。

AIの方が人間よりも得意な分野だからです。

一方で「AIに適切な指示を出す力」、「正確に言語化する力」、「アプリが動く仕組みの理解」、「AIの書いたコードの正誤を判断する」、「ドメイン知識（解決すべきビジネス課題や業界特有の要件の理解）」といった能力の重要性は増しています。

そしてもうひとつ。

これまでも最重要で、そしてこれからも最重要であり続ける能力があります。

急速に変化する技術を学び続けるという「継続的な学習姿勢」です。

「_では実際にReactを学ぶ中でどこにつまずきやすく、どう乗り越えればいいのか？_」

こういった疑問を持った人は、Reactを難しく感じる具体的な原因と解決策を一本にまとめたガイドがあるので参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/ai-programming-importance-decreasing">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/ai-programming-importance-decreasing)




<a href="/present?magnet=first-study-guide&from=/blog/ai-programming-importance-decreasing">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/ai-programming-importance-decreasing)

---

# 【バージョン16対応】Server Actionsフルスタックアプリ開発の入門書リリース／Next.js

URL: https://monotein.com/blog/new-book-release-nextjs-v16-fullstack-server-actions
公開日: 2025.11.8
概要: Next.jsとServer Actionsを使うと、フルスタックアプリを時短ですばやく開発できます。最新のNext.jsバージョン16を使って、Server Actionsの使い方をビギナー向けにわかりやすく紹介するのが「Next.js Server Actionsでつくるフルスタックアプリ（三好アキ著）」です。

## Next.jsフルスタック開発入門書の改訂版リリース
10月21日にNext.jsの新しいバージョン16がリリースされました。

それに合わせ、Next.js入門書として好評の『[Next.js Server Actionsでつくるフルスタックアプリ](https://www.amazon.co.jp/dp/B0G144JJZT)』を改訂し、バージョン16対応版として新規リリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0G144JJZT">
    <img class="bc-cover" src="/images/commonImg/nextjs-server-actions-v16.svg" alt="Next.js Server Actionsでつくるフルスタックアプリ" />
    <div class="bc-body">
        <p class="bc-title">Next.js Server Actionsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【2025年11月リリース。少ないコードですばやく本格的なフルスタックアプリを開発する方法を紹介】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-v16-fullstack-server-actions">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-v16-fullstack-server-actions)

## 対象読者とカバー範囲
ビギナーを対象にしているので、JavaScriptやReact、Next.jsなどの深い知識は不要です。

Next.jsのインストール方法から、APIの開発、フロントエンドとの連携、データベース（MongoDB）のセットアップと接続、メタデータの設定、画像の保存、Vercelでのオンライン公開方法まで、Next.jsとServer Actionsを使ってフルスタックアプリを作るときに必要な基礎知識を短時間で習得可能です。

ReactサーバーコンポーネントとReactバージョン19についても触れています。

## 本書の特徴
本書はServer Actionsを使ったフルスタックアプリ開発を解説する本ですが、そもそもServer Actionsにはどのようなメリットがあるのでしょうか。

従来のフルスタックアプリ開発では、バックエンドとフロントエンドを分離させて開発するのが一般的でした。

バックエンドとして下図のようなデータ供給層を作り、これをフロントエンドで取得して表示するという流れです。

• バックエンドのデータ\
![image](../../images/singleBlogPageImages/blogArticleImages/blog157/api-example.jpg)

• フロントエンドで取得して表示\
![image](../../images/singleBlogPageImages/blogArticleImages/blog157/toppage.jpg)

しかしServer Actionsを使うと、バックエンドをあえて開発しなくとも、フルスタックアプリ開発が可能です。

結果としてコード量が減り、開発にかかる時間も大幅に短縮できるのがServer Actionsのメリットです。

本書はそのようなServer Actionsの使い方を初心者向けに解説する本です。

アプリを自分の手で作り上げながら進める、いつも通りのハンズオン形式になっています。

## 姉妹書について
本書には姉妹書があります。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFXVMSF">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1.svg" alt="Next.jsでつくるフルスタックアプリ 前編（バックエンド開発）with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ 前編（バックエンド開発）with Supabase</p>
        <p class="bc-desc">【2025年10月リリース。最新のNext.jsをつかった本格アプリの開発手法がわかる入門書】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFVXQ4J">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-2.svg" alt="Next.jsでつくるフルスタックアプリ 後編（フロントエンド開発）with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ 後編（フロントエンド開発）with Supabase</p>
        <p class="bc-desc">【2025年10月リリース。最新のNext.jsをつかった本格アプリの開発手法がわかる入門書】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

これらの本では、Next.jsのバックエンドをフロントエンドから分けて開発する方法を採用しています（Route Handlersを使用）。

そのため、本書と姉妹書を合わせて読むことで、Next.jsについての理解と経験がより深まります。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-v16-fullstack-server-actions">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-v16-fullstack-server-actions)

---

# 【バージョン16対応】『Next.jsでつくるフルスタックアプリ（with Supabase）』リリース

URL: https://monotein.com/blog/new-book-release-nextjs-v16-fullstack-supabase
公開日: 2025.10.31
概要: Next.js 16対応の最新入門書が登場！Supabaseを使ったフルスタックアプリ開発を実践形式で解説。初心者でもAPI・データベース連携からVercel公開まで短時間で習得できます。三好アキ著。

## Next.jsフルスタック開発入門書の改訂版リリース
先日10月21日にNext.jsの新しいバージョン16がリリースされました。

それに合わせ、Next.js入門書として好評の『[Next.jsでつくるフルスタックアプリ 前編・後編（Supabase版）](https://www.amazon.co.jp/dp/B0DTFMZRKZ)』を改訂し、バージョン16対応版として新規リリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFXVMSF">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1.svg" alt="Next.jsでつくるフルスタックアプリ 前編（バックエンド開発）with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ 前編（バックエンド開発）with Supabase</p>
        <p class="bc-desc">【最新のNext.jsバージョン16をつかった本格アプリの開発手法がわかる入門書。Route Handlers使用】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFVXQ4J">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-2.svg" alt="Next.jsでつくるフルスタックアプリ 後編（フロントエンド開発）with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ 後編（フロントエンド開発）with Supabase</p>
        <p class="bc-desc">【最新のNext.jsバージョン16をつかった本格アプリの開発手法がわかる入門書。Route Handlers使用】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-v16-fullstack-supabase">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-v16-fullstack-supabase)

## 対象読者とカバー範囲
ビギナーを対象にしているので、JavaScriptやReact、Next.jsなどの深い知識は不要です。

Next.jsのインストール方法から、APIの開発、フロントエンドとの連携、データベース（Supabase）のセットアップと接続、メタデータの設定、画像の保存、Vercelでのオンライン公開方法まで、Next.jsでフルスタックアプリを作るときに必要な基礎知識を短時間で習得可能です。

ReactサーバーコンポーネントとReactバージョン19の使い方についても触れています。

## 姉妹書について
本書には姉妹書があります。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0G144JJZT">
    <img class="bc-cover" src="/images/commonImg/nextjs-server-actions-v16.svg" alt="Next.js Server Actionsでつくるフルスタックアプリ" />
    <div class="bc-body">
        <p class="bc-title">Next.js Server Actionsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【2025年11月リリース。少ないコードですばやく本格的なフルスタックアプリを開発する方法を紹介】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

同一のフルスタックアプリを、今回の『Next.jsでつくるフルスタックアプリ（前編・後編）』ではRoute Handlersを使って、上記の姉妹書ではServer Actionsを使って開発しています。

そのためこの姉妹書と本書を合わせて読むことで、開発したいアプリにより適した設計手法を理解・選択できるようになります。


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-v16-fullstack-supabase">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-v16-fullstack-supabase)

---

# Next.jsバージョン16に対応する追加情報の公開

URL: https://monotein.com/blog/nextjs-books-additional-info-on-nextjs-v16
公開日: 2025.10.23
概要: Next.jsバージョン16対応の最新情報を追加公開しました。「動かして学ぶ！Next.js/React開発入門（翔泳社／三好アキ著）」や「Next.jsでつくるフルスタックアプリ」の読者向けにコード差分や注意点を解説しています。

## 【書籍向け】Next.jsバージョン16対応情報の追加
私はこれまでに数冊、Next.jsに関する本を出しています。

• [動かして学ぶ！Next.js/React開発入門（翔泳社／2024）](https://www.shoeisha.co.jp/book/detail/9784798184678)

• [Next.jsでつくるフルスタックアプリ（前編・後編 MongoDB版／2024）](https://www.amazon.co.jp/dp/B0DRHF4KGM)

• [Next.jsでつくるフルスタックアプリ（前編・後編 Supabase版／2025）](https://www.amazon.co.jp/dp/B0DTFMZRKZ)

これらの本ではNext.jsバージョン14あるいは15を使っています。

しかし、2025年10月21日にNext.jsバージョン16がリリースされたため、これらの書籍の解説の通りには進められない箇所が複数あります。

そのため、最新のNext.jsバージョン16に対応させるための追加情報を公開しました。

各書籍のリンク一覧ページに、Next.js 16対応の追加情報ページへのリンクを掲載しています。ぜひ参考にしてください。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-books-additional-info-on-nextjs-v16">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-books-additional-info-on-nextjs-v16)

---

# 【React新機能】useEffectEventをビギナー向けにやさしく解説

URL: https://monotein.com/blog/react-v19-2-use-effect-event
公開日: 2025.10.9
更新日: 2026.4.7
概要: React 19.2で追加された「useEffectEvent」をビギナー向けに紹介。React + Viteをベースに、実際にコードで動きを見ながら進むハンズオン形式。従来からあるuseEffectの問題点から解説するので、useEffectEventの具体的なメリット（依存配列の簡素化、新しいstateの参照、ロジックの分離）がスッキリわかる。React 19以降を学ぶ全エンジニア必読の内容。

## React 19.2新機能【 useEffectEvent 】
2025年10月1日にリリースされたReactバージョン19.2から、`useEffectEvent`が使えるようになりました。

名前が`useEffect`とよく似ています。

これは`useEffectEvent`が、`useEffect`の抱える問題点を解決するものとして作られたからです。

`useEffectEvent`の機能を一言でいうと、「最新のprops／stateを参照できる」です。

ここから次の3つの具体的なメリットが出てきます。

---

• 依存配列の削減

• 不要なレンダリングの抑制

• ロジックの分離

---

本記事では、最初に`useEffect`の問題点を確認し、次に`useEffectEvent`を使うメリットを実際にコードで紹介していきます。

Reactビギナー 〜 中級者向けの内容なので、事前知識は不要です。

なお、Reactバージョン19.2で導入された`<Activity>`については、下記記事をご覧ください。

<div class="rich-card-link">
<a href="/blog/react-v19-2-activity">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-217.png)

</div>
<div class="r-card-text">
【React新機能】<Activity>の2つの使い方を実例でわかりやすく紹介
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-v19-2-use-effect-event">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-v19-2-use-effect-event)

## useEffectの問題点（簡単な説明）
`useEffect`のコードの構造を見てみましょう。

```js
useEffect(() => {

    実行したい処理

}, [])       // ←依存配列
```

依存配列には、`useEffect`内で参照する`state`や`props`を入れます。

なぜ入れる必要があるかというと、`useEffect`内部に置かれた処理において、最新の`state`や`props`の値を利用できるようにするためです。

そのため、依存配列の中の値のどれか一つにでも変化があると、`useEffect`が実行されます。

---

しかし、依存配列内の`state`や`props`が変化しても`useEffect`の実行は不要、というケースもあります。

不要な`useEffect`の動きを抑制する一番簡単な方法は、「依存配列から`state`や`props`を取り除く」です。

確かにこれで不要な`useEffect`の実行は回避できますが、その一方で、`useEffect`内に置かれた処理で最新のデータを参照できず、古いデータが使われ続けることになります。

とはいえ、このように言葉で説明していてもわかりづらいので、この点をコードで実際に確認してみましょう。

その中で`useEffectEvent`を使うメリットが見えてきます。

まずはReact + Viteのセットアップです（[こちらの記事](/blog/react-vite-how-to-use)でも紹介しています）。

## 準備（React + Vite）
まずReact開発のひな形ツール「<a href="/blog/react-vite-how-to-use">React + Vite</a>」を用意します（今回使うのはJSです。<a href="/blog/react-vite-typescript-how-to-use">TS版</a>はこちら）。

ターミナルで次のコマンドを実行してください。

```shell
npm create vite@latest
```

質問がいくつか出てくるので、次のように答えてください。

```shell
Project name:
│  react-useeffectevent
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  JavaScript
│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  No
```

インストールが完了したら、VS Codeでフォルダを開きましょう。

最初に必要なパッケージをインストールします。

下記コマンドをターミナルに打ち、インストールを実行しましょう。

```shell
npm install
```

次に不要なファイルとコードを消します。

`src`フォルダ内の`App.css`は削除しましょう。

次に`App.jsx`と`index.css`内のコードをすべて消してください。

変更を保存したら、下記コマンドでReact + Viteを起動しましょう。

```shell
npm run dev
```

これで準備は完了です。

React 19.2の新機能`useEffectEvent`を見ていきましょう。

## useEffectの問題を実際に確認
まずは従来からある`useEffect`の動きを見て、問題を確認していきます。

`App.jsx`に次のコードを書いてください。

「ボタンを押す度に`count`stateが一つずつ増えていく」というだけのコードです。

保存したら、ブラウザで動きを確認してみてください。

```js
// App.jsx

import { useState } from "react"

const App = () => {
    const [count, setCount] = useState(0)

    return (
        <div>
            <p>カウント数: {count}</p>
            <button onClick={() => setCount(count + 1)}>＋ボタン</button>
        </div>
    )
}

export default App
```

次はここに`useEffect`を書き足しましょう。

下記コードを追加してください。

```js
// App.jsx

import { useEffect, useState } from "react"  // 追加

const App = () => {
    const [count, setCount] = useState(0)

    // ▼追加
    useEffect(() => {
        console.log("useEffectが実行されました")

        const timer = setTimeout(() => {
            alert(`現在のカウント数は ${count} です`)
        }, 5000)

        return () => clearTimeout(timer)
    }, [])
    // ▲追加

    return (
        <div>
            <p>カウント数: {count}</p>
            <button onClick={() => setCount(count + 1)}>＋ボタン</button>
        </div>
    )
}

export default App
```

いま書いたコードを解説します。

`useEffect`の最後を見てください。

カラの依存配列（`[]`）があるので、この`useEffect`は初回レンダリング時に一回だけ実行されるとわかります。

そこで行われる処理は次の2つです。

---

• `console.log()` ▶︎ `useEffect`の動きを確認するため

• `alert()` ▶︎ カウント数を表示する

---

なお`alert()`は、`setTimeout()`で挟まれています。

`setTimeout()`の働きは遅延を引き起こすことです。

そのため、初回レンダリングから5秒後に`alert()`が実行されることになります。

そして最後の`clearTimeout()`はクリーンアップ（後片付け）のためです（これがないと`setTimeout()`が意図通りに動かないことがあります）。

ブラウザで動きを確認してみましょう。

保存をしたらブラウザを開いてください。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog218/pic1.jpg)

</div>

5秒経つと`alert()`が表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog218/pic2.jpg)

</div>

次は、リロード（command + R）をしてください。

そして「＋ボタン」を数回押しましょう。

5秒経つと再び`alert()`が表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog218/pic3.jpg)

</div>

しかしここで、少しおかしなことに気がつきます。

カウント数は上がっているのに、`alert()`上の数は0のままなのです。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog218/pic4.jpg)

</div>

理由を説明します。

これは依存配列がカラで、`useEffect`が初回レンダリング時にしか動いていないためです。

つまり、ボタンが押されて数が増えた`count`stateではなく、初回レンダリング時点の`0`の`count`state、つまり「古い`state`」が参照されているのです。

この解決法は、「`count`stateが増える度に`useEffect`を実行する」となります。

そうすれば最新の`count`stateを参照できるでしょう。

`count`を依存配列に加えてください。

```js
// App.jsx

import { useEffect, useState } from "react"

const App = () => {
    const [count, setCount] = useState(0)

    useEffect(() => {
        console.log("useEffectが実行されました")

        const timer = setTimeout(() => {
            alert(`現在のカウント数は ${count} です`)
        }, 5000)

        return () => clearTimeout(timer)
    }, [count])    // 追加

    return (
        <div>
            <p>カウント数: {count}</p>
            <button onClick={() => setCount(count + 1)}>＋ボタン</button>
        </div>
    )
}

export default App
```

変更を保存してブラウザを開いたら、「＋ボタン」を数回押してください。

最後の押下から5秒経つと`alert()`が表示されます。

今回の数はカウント数と同じです。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog218/pic5.jpg)

</div>

ここで注目して欲しいのは、`alert()`の実行が「最後のボタン押下から5秒後」という点です。

これは`useEffect`が、ボタン押下の度に実行されていることに由来します。

確認してみましょう。

開発者ツールから「console」を開いてください。

リロード（command + R）をしたら、ボタンを数回押しましょう。

すると次のように表示が出て、ボタン押下の度に`useEffect`が動いているのがわかります。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog218/pic6.jpg)

</div>

しかし、このように毎回`useEffect`が実行されることはブラウザの負荷を高めます。

さらに`useEffect`が毎回実行されることによって、`alert()`の表示も「最後のボタン押下から5秒後」となってしまっています。

依存配列に`count`を加えた理由を思い出してください。

最新の`count`stateを参照するためです。

`count`stateの最新状態を取得できるのであれば、`useEffect`は毎回実行されなくていいのです。

ここで使うのが、本記事のメインテーマ`useEffectEvent`になります。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-v19-2-use-effect-event">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-v19-2-use-effect-event)

## useEffectEventで問題を解決する
まずは`alert()`の部分を`useEffect`外部に切り出しましょう。

`App.jsx`のコードを次のように変更してください。

`alert()`を`showAlert`というfunctionの中に移しただけなので、動きは先ほどと同じです。

```js
// App.jsx

import { useEffect, useState } from "react"

const App = () => {
    const [count, setCount] = useState(0)

    const showAlert = () => {
        alert(`現在のカウント数は ${count} です`)
    }

    useEffect(() => {
        console.log("useEffectが実行されました")

        const timer = setTimeout(() => {
            showAlert()
        }, 5000)

        return () => clearTimeout(timer)
    }, [count])

    return (
        <div>
            <p>カウント数: {count}</p>
            <button onClick={() => setCount(count + 1)}>＋ボタン</button>
        </div>
    )
}

export default App
```

保存をしたらブラウザを見てください。

先ほども確認した次の2つのことがわかります。

---

• `alert()`の実行は最後のボタン押下から5秒後

• ボタン押下の度に`useEffect`が実行

---

ここで`useEffectEvent`を使いましょう。

次のように加えてください。

```js
// App.jsx

import { useEffect, useState, useEffectEvent } from "react" // 追加

const App = () => {
    const [count, setCount] = useState(0)

    const showAlert = useEffectEvent(() => {  // 追加
        alert(`現在のカウント数は ${count} です`)
    })   // 追加

    useEffect(() => {
        console.log("useEffectが実行されました")

        const timer = setTimeout(() => {
            showAlert()
        }, 5000)

        return () => clearTimeout(timer)
    }, [])           // 削除

    return (
        <div>
            <p>カウント数: {count}</p>
            <button onClick={() => setCount(count + 1)}>＋ボタン</button>
        </div>
    )
}

export default App
```

依存配列から`count`stateを消すのを忘れないようにしましょう。

保存したら、ブラウザで動きを確認してください。

注目して欲しいのは3点で、`alert()`の実行タイミング、`alert()`上のカウント数、そして「console」です。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog218/pic7.jpg)

</div>

`useEffect`は初回レンダリング時にしか動いていないにもかかわらず、正しいカウント数が`alert()`に表示されているのがわかります。

さらに`alert()`の実行タイミングも、「最後のボタン押下から5秒後」ではなく「初回レンダリングから5秒後」になっています。

`useEffectEvent`を使うことで、`useEffect`を毎回実行させることなく、最新の`count`stateを参照できるようになったのです。

さらに、ロジック部分を切り出したので、コードの見通しがよくなったこともボーナス的なメリットとして挙げられます。

---

`useEffectEvent`を使うことで、依存配列の管理が楽になり、`useEffect`の不要な再実行を抑えることができます。

さらに処理の具体的な中身（WHAT to do）と、その処理の実行タイミング（WHEN to do）を分離できます。

なお、Reactバージョン19.2で追加されたもう一つの目玉機能`<Activity>`も<a href="/blog/react-v19-2-activity">こちらの記事</a>で紹介しているので、確認してください。

この`<Activity>`と`useEffectState`を含め、RSCの仕組み・useActionState・useOptimisticといったReact 19の全体像を一本でまとめたガイドがあります。

全体像を理解するのに役立ててください▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

`useEffectEvent`はNext.jsでも活用できる機能です。

Next.jsのセットアップからRSC・Server Actionsまで体系的に整理したガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-v19-2-use-effect-event">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-v19-2-use-effect-event)

---

# 【React新機能】<Activity>の2つの使い方を実例でわかりやすく紹介

URL: https://monotein.com/blog/react-v19-2-activity
公開日: 2025.10.6
更新日: 2026.4.7
概要: React 19.2の新機能<Activity>を初心者向けにわかりやすく解説。データやstateの保持、事前フェッチの方法、React最新バージョンの重要ポイントを実例で紹介します。React + Vite使用。

## React 19.2について
2025年10月1日に、Reactバージョン19のマイナーアップデート版19.2がリリースされました。

マイナーアップデートとはいえ、新機能がいくつも追加されています。

その中でもReactビギナー 〜 中級者に関係するのが`<Activity>`と`useEffectEvent`です。

これから目にする機会が増えるコードになるでしょう。

本記事では`<Activity>`を紹介していきます。

実際の動きを自分で確認しながら進めるとわかりやすいので、まずはReact + Viteのセットアップから始めましょう。

なお、`useEffectEvent`については下記記事をご覧ください。

<div class="rich-card-link">
<a href="/blog/react-v19-2-activity">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-218.png)

</div>
<div class="r-card-text">
【React新機能】useEffectEventをビギナー向けにやさしく解説
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-v19-2-activity">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-v19-2-activity)

## 準備（React + Vite）
まずReact開発のひな形ツール「<a href="/blog/react-vite-how-to-use">React + Vite</a>」を用意します（今回使うのはJSです。<a href="/blog/react-vite-typescript-how-to-use">TS版</a>はこちら）。

ターミナルで次のコマンドを実行してください。

```shell
npm create vite@latest
```

質問がいくつか出てくるので、次のように答えてください。

```shell
Project name:
│  react-activity
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  JavaScript
│
◇  Use rolldown-vite (Experimental)?:
│  No
│
◇  Install with npm and start now?
│  No
```

インストールが完了したら、VS Codeでフォルダを開きましょう。

最初に必要なパッケージをインストールします。

下記コマンドをターミナルに打ち、インストールを実行しましょう。

```shell
npm install
```

次に不要なファイルとコードを消します。

`src`フォルダ内の`App.css`は削除しましょう。

次に`App.jsx`と`index.css`内のコードをすべて消してください。

変更を保存したら、下記コマンドでReact + Viteを起動しましょう。

```shell
npm run dev
```

これで準備は完了です。

React 19.2の新機能`<Activity>`を見ていきましょう。

## Activityの2つの使い方
`<Activity>`は次の2つの場面で使えます。

---

1：データや状態を維持したい時

2：データを事前取得したい時

---

まずは「データや状態を維持したい時」から紹介します。

## Activity使用例①（データや状態を維持したい時）
`src`フォルダ内に`Form.jsx`を作ります

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic1.jpg)

</div>

そして下記コードを貼り付けてください。

```js
// Form.jsx

import { useState } from "react"

const Form = () => {
    const [message, setMessage] = useState("")
    return (
        <form>
            <input type="text" onChange={e => setMessage(e.target.value)}/>
            {message}
            <select>
                <option value="りんご">りんご</option>
                <option value="ぶどう">ぶどう</option>
                <option value="すいか">すいか</option>
            </select>
            <button type="submit">送信</button>
        </form>
    )
}

export default Form
```

`<input>`タグと`<select>`タグを使った、ごく普通の入力フォームです。

次はこの`Form`コンポーネントを`App`コンポーネントで読み込み、表示させます。

`App.jsx`に次のコードを書いてください。

```js
// App.jsx

import { useState } from "react"
import Form from "./Form"

const App = () => {
    const [show, setShow] = useState(false)
    return (
        <>
            <h1>トップページ</h1>
            <button onClick={() => setShow(!show)}>Formを表示</button>
            {show && <Form />}
        </>
    )
}

export default App
```

注目して欲しいのは、`Form`コンポーネントの表示に条件式が使われている点です。

ボタンが押され、`show`stateが`true`になると`Form`コンポーネントが表示されます。

変更を保存したらブラウザで動きを確認してみてください。

---

さて、「Formを表示」ボタンを押して入力フォームを表示させたら、適当な文字を打ち、そして「すいか」を選びましょう。

なお、`<input>`タグの横には`message`stateがあるため、入力された文字も表示されています。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic2.jpg)

</div>

次に、「Formを表示」ボタンを押して`Form`コンポーネントを消してください。

その後、再び「Formを表示」ボタンを押してください。次のように`Form`コンポーネントが表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic3.jpg)

</div>

意図通りの動きです。

しかし入力したデータ、および`message`stateは消えてしまっています。

これはなぜかというと、条件式で表示を切り替えると、そのHTML要素自体が削除されてしまうからです。

実際に確認してみましょう。

ブラウザの開発者ツールを開き、「Formを表示」ボタンを何回か押してみましょう。

▼ Form非表示時

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic4.jpg)

</div>

▼ Form表示時

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic5.jpg)

</div>

上図の赤矢印が指している`<form>`タグが、現れたり消えたりしているのがわかります。

入力したデータやstateが消えてしまうのは、`<form>`タグ自体が削除されてしまうからです。

しかし、入力したデータを保持した方がユーザー体験はよくなります。

ここで使うのが`<Activity>`です。

`App.jsx`を次のように変更してください。

```js
// App.jsx

import { useState, Activity } from "react"   // 追加
import Form from "./Form"

const App = () => {
    const [show, setShow] = useState(false)
    return (
        <>
            <h1>トップページ</h1>
            <button onClick={() => setShow(!show)}>Formを表示</button>
            {show && <Form />}    // 削除

            // ▼追加
            <Activity mode={show ? "visible" : "hidden"}>
                <Form />
            </Activity> 
            // ▲追加
        </>
    )
}

export default App
```

変更を保存したらブラウザを開きましょう。

そして「Formを表示」ボタンを押して入力フォームを表示させたら、適当な文字を打ち、「すいか」を選びましょう。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic2.jpg)

</div>

次に「Formを表示」ボタンを押し、`Form`コンポーネントを消してください。

ここまでは先ほどと同じです。

さて、「Formを表示」ボタンを押してください。`Form`コンポーネントが表示されます。

注目して欲しいのは、入力したデータがそのまま残っていることです。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic2.jpg)

</div>

従来の条件式での表示切り替えではデータが消えてしまいましたが、`<Activity>`を使うとデータが維持されるのです。

なぜこのようになるのか、開発者ツールで確認してみましょう。

まず`Form`コンポーネント表示時は次のようになっています。`<form>`タグが確認できます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic6.jpg)

</div>

次は「Formを表示」ボタンを押し、`Form`コンポーネントを消しましょう。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic7.jpg)

</div>

条件式を使っていた時は`<form>`タグ自体が消えていましたが、今回は残っています。

そして`display: none !important;`というCSSが追加されています。

このように`<Activity>`では、HTMLタグ自体を消してしまうのではなく、`display: none`を使い、タグは残したまま表示だけを見えなくしているのです。

そのため、ユーザーが入力したデータやstateの状態は維持されます。

`<Activity>`のこのような機能を使うと、データを事前に取得しておくことも可能です。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-v19-2-activity">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-v19-2-activity)

次はデータの事前取得を見てみましょう。

## Activity使用例②（データを事前取得したい時）
`src`フォルダ内に`Post.jsx`を作ってください。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic8.jpg)

</div>

このコンポーネントでは、ダミーのブログデータを取得して表示させます。

（*ここではReactバージョン19で導入された`use`を使っていますが、`use`の使い方はわからなくても大丈夫です。「`Post.jsx`でしていることはデータの取得・表示」と考えて、先に進んでください。）

```js
// Post.jsx

import { use } from "react"

const postsPromise = fetch("https://jsonplaceholder.typicode.com/posts?_limit=10")
                    .then(response => response.json())

const Post = () => {
    const data = use(postsPromise)
    console.log(data)
    return (
        <ul>
            {data?.map(post =>
                <li key={post.id}>
                    {post.title}
                </li>
            )}
        </ul>
    )
}

export default Post
```

これを`App.jsx`で表示させましょう。次のように変更してください（`use`使用コンポーネントは`<Suspense>`で挟む必要があります）。

```js
// App.jsx

import { useState, Activity } from "react"
import Form from "./Form"            // 削除
import Post from "./Post"            // 追加

const App = () => {
    const [show, setShow] = useState(false)
    return (
        <>
            <h1>トップページ</h1>                     // ▼文言を変更 
            <button onClick={() => setShow(!show)}>データを表示</button>
            // ▼追加
             <Suspense fallback={<p>データ取得中...</p>}>
                {show && <Post />}
            </Suspense>
            // ▲追加

            // ▼削除
            <Activity mode={show ? "visible" : "hidden"}>
                <Form />
            </Activity> 
            // ▲削除
        </>
    )
}

export default App
```

変更を保存したらブラウザを開きましょう。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic9.jpg)

</div>

「データを表示」ボタンを押すと、「データ取得中...」と表示された後、ダミーデータが表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic10.jpg)

</div>

ここまでは従来通りの動きです。

しかし、もしここで「データを表示」ボタンを押す前からデータを取得できていればユーザー体験はよくなります。

「データ取得中...」と表示させて、ユーザーを待たせる必要がなくなるのです。

ここで使うのが`<Activity>`ですが、その前に現在のコードにおけるデータ取得のタイミングを確認しておきましょう。

開発者ツールの「Console」を開き、リロード（command + R）しましょう。初期状態では次のようになっています。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic11.jpg)

</div>

そして「データを表示」ボタンを押すと、データが取得されて「Console」にも表示されます（`Post.jsx`の8行目に`console.log()`があります）。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic12.jpg)

</div>

「ボタンが押されてデータ取得」という従来通りの流れになっているのがわかります。

次は`<Activity>`を使います。

次のように`App.jsx`を書き換えてください。

```js
// App.jsx

import { useState, Activity, Suspense } from "react"
import Post from "./Post"

const App = () => {
    const [show, setShow] = useState(false)
    return (
        <>
            <h1>トップページ</h1>
            <button onClick={() => setShow(!show)}>データを表示</button>
            <Suspense fallback={<p>データ取得中...</p>}>
                {show && <Post />}   // 削除

                // ▼追加
                <Activity mode={show ? "visible" : "hidden"}>
                    <Post/>
                </Activity>
                // ▲追加
            </Suspense>
        </>
    )
}

export default App
```

変更を保存してブラウザを開いたら、「データを表示」ボタンを押しましょう。

すると「データ取得中...」の表示はなく、すぐにデータが表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic10.jpg)

</div>

これはデータを事前取得しているためで、この方がユーザー体験ははるかによくなります。

では、どのタイミングでデータを取得しているのでしょうか。

「Console」を開いてください。そしてリロード（command + R）します。

すると、「データを表示」ボタンを押さずとも、データの取得がバックグラウンドで行われているのがわかります。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog217/pic13.jpg)

</div>

このためデータを直ちに表示できるのです。

---

本記事ではReactバージョン19.2で導入された`<Activity>`を紹介してきました。

これまでのReact開発では、「データの維持」や「データの事前取得」といったユーザー体験の改善を実現するには、コードを余分に書く必要がありました。

しかし`<Activity>`を使うと、これを簡潔に済ませられるようになっています。

なお、Reactバージョン19.2で追加されたもう一つの目玉機能`useEffectState`も<a href="/blog/react-v19-2-activity">こちらの記事</a>で紹介しているので、確認してください。

この`useEffectState`と`<Activity>`を含め、RSCの仕組み・useActionState・useOptimisticといったReact 19の全体像を一本でまとめたガイドがあります。

全体像を理解するのに役立ててください▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

`<Activity>`はNext.jsでも活用できる機能です。

Next.jsのセットアップからRSC・Server Actionsまで体系的に整理したガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-v19-2-activity">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-v19-2-activity)

---

# AIが浸透する中、開発現場で起きている意外なこと

URL: https://monotein.com/blog/ai-leads-developers-learning-fundamentals
公開日: 2025.9.1
更新日: 2026.5.28
概要: AIを使っても、開発者側の理解不足・知識不足で開発スピードが落ちる現象。AI活用が進む開発現場で再評価されるのはプログラミングの基礎力です。詳しく紹介します。

## 基礎分野の学習の再評価
ウェブアプリの開発現場でも、AIの活用場面が広がっています。

そのような中で起きている興味深い現象。

それは「基礎分野の学習の再評価」です。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/ai-leads-developers-learning-fundamentals">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/ai-leads-developers-learning-fundamentals)

## AIが人間に気づかせたこと
AIを使えば、コードは自動で生成されます。

最適なコードを提案もしてくれます。

しかしこの結果、次のようなことが起きるようになりました。

「*人間のエンジニアが、AIの書いたコードを理解できない*」

当然ですが、提案されたコードを実際に使うかどうかを決定する責任は、人間のエンジニア側にあります。

そして「Yes」「No」を言うためには、そのコードの働きを理解している必要があります。

ここで多くのエンジニアが、「意外にも分かっていないことが多かった」「知らないことばかりだった」と気付かされているのです。

特に基礎分野（アルゴリズム、データ構造、アーキテクチャ、セキュリティなど）の勉強を促す動きが起きています。

---

AIで開発速度が必ずしも上がるわけではありません。

開発者側の理解不足・知識不足で開発スピードが落ちることも、実は多く起きているのです。

<div class="rich-card-link">
<a target="_blank" rel="noopener" href="/blog/ai-era-why-more-people-learn-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-251.png)

</div>
<div class="r-card-text">
AIでReactアプリを作れる時代。なぜReact学習者は増えているのか
</div>
</div>
</a>
</div>

## AIで学習意欲が上がった
世間では「AIによってエンジニアが不要になる」と声高に言われているので、学習意欲は低下傾向にある印象を受けてしまいます。

また、AIを使って悪い意味で「手抜き」をする開発者も少なくありません。

しかし、自分のスキル不足をAIで補おうとすることは、結局本人の首を絞めることになります。

自分が書いたコード、自分が作ったアプリケーションに責任を持てないからです。

ある程度の経験、そして良心のある開発者は、AI活用場面が広がってラクに出来ることが増えているまさに今、学習の必要性を再認識しています。

逆説的ですが、AIが人間の学習意欲を高めているのです。

学習意欲が高まったら、次のステップは「何から・どう学べばいいか」を理解することです。

Reactでビギナーがつまずく原因は共通しており、それを知っておくだけで学習の質は大きく変わります。

原因と乗り越え方をまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>


（*[Githubのブログ](https://github.blog/developer-skills/career-growth/why-developer-expertise-matters-more-than-ever-in-the-age-of-ai)等でも、本記事と同様のことが言及されています）

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/ai-leads-developers-learning-fundamentals">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/ai-leads-developers-learning-fundamentals)

---

# はじめてのウェブサイトを作ってみよう（無料オンライン公開方法まで解説）

URL: https://monotein.com/blog/making-the-first-website-and-deploy
公開日: 2025.8.22
更新日: 2026.7.10
概要: 超初心者必見。HTMLとCSSの知識ゼロから始めて、初めてのウェブサイトを作成・公開する方法をステップバイステップで徹底解説。ウェブの仕組みを理解し、シンプルなHTMLファイルを作り、Netlifyで無料オンライン公開まで。費用ゼロで誰でも簡単にウェブ開発の基礎をマスター。ReactやNext.jsへのステップアップの基盤にも最適。

## ウェブサイトは実は単純
本記事では、「完全ビギナー」を対象に、はじめてのウェブサイトの作り方から、オンライン上での公開方法までを紹介します。

本記事を最後まで読めば、「ウェブサイト」というものが実はとても単純で、自分でも作れてしまうのがわかるでしょう。

完全ビギナー対象なので、前提知識は不要です。

無料サービスを使うので、費用はゼロ円です。

---

本記事ではGoogleクロームをブラウザに使います。

下記リンクからダウンロードしてください。

• [google.com/intl/ja/chrome](https://www.google.com/intl/ja/chrome)

なお本記事ではMacを使っています。Windowsの方は一部表示が異なることに注意してください。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/making-the-first-website-and-deploy">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/making-the-first-website-and-deploy)

## ウェブサイトの材料を確認しよう
最初に、私たちが日常的に見ているウェブサイトとは、一体何から作られているのかを確認しましょう。

下記URLを開いてください。

• [nextbook-fullstack-app-folder.vercel.app](https://nextbook-fullstack-app-folder.vercel.app)

これは私が作った仮のウェブサイトです。

メルカリのような物販のウェブサイトと考えてください。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/top-page.jpg)

</div>

画面上で右クリックをすると、下記画面のように表示が出ます（画像では英語表示になっていますが、「検証（Inspect）」という項目を選んでください。）

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/inspect.jpg)

</div>

するとブラウザの右側に、次のような画面が表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/console-1.jpg)

</div>

表示されていない場合は、上部の「Elements」が選択されているかを確認してください。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/console-2.jpg)

</div>

さて、この部分には英語で色々と書かれてあります。

`<head>`、`<body>`、`<nav>`といった見慣れない記号も見えます。

しかし実は、これこそがウェブサイトを構成している部品なのです。

ウェブサイトとは、これらの部品を組み合わせて作ってあるのです。

確認してみましょう。

`<div class="grid-container-in">`というところに注目してください。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/console-3.jpg)

</div>

`<div`の左側に▶︎という三角マークがあるので、クリックしてみましょう。

次のように中身が展開されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/console-4.jpg)

</div>

`<a href="...`で始まるものが複数出てきました。

`<a`の左側にも▶︎のマークがあるので、これもクリックして展開してみましょう。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/console-5.jpg)

</div>

ここでもまた中身が複数出てきました。

注目して欲しいのは、一番下にある`<div>...</div>`というところです。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/console-6.jpg)

</div>

この`<div>`の左側の▶︎をクリックして中身を展開しましょう。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/console-7.jpg)

</div>

`<h3>メガネ</h3>`の下にある`<p>`の左側の▶︎をクリックしてください。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/console-8.jpg)

</div>

「使いやすいメガネです。Lorem ipsum dolor sit amet.....」という文章が表示されました。

ここで、ブラウザの左側に表示されているウェブサイトの画面に目を向けてください。

すると、この文章は「メガネ」という品物の部分に書かれているものと同じだとわかります。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/console-9.jpg)

</div>

同じような対応関係は他の部分にも成り立っています。

`<h2>`の左側の▶︎をクリックして展開してみましょう。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/console-10.jpg)

</div>

「¥」、「5500」といったメガネの価格部分と同じものが表示されています。

---

以上のことから、今ブラウザの右側に表示されているものは、左側のウェブサイトの情報と同じであるのがわかります。

このような対応関係は、他のウェブサイトを開き、右クリックから「検証」を選択し、ブラウザ右側に「Elements」を表示させてみても、同様に成り立っているものです。

なぜでしょうか？

ウェブサイトとは、`<div>`、`<h2>`、`<a>`といった部品（＝Elements）から成り立っているからです

これらの部品を組み合わせ、その内部に「メガネ」や「5500」といった、ウェブサイトで表示させたい情報を書き込んであるのです。

---

とはいえ、ここまでの説明ではまだ納得できないかもしれません。

今度は逆から確認してみましょう。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/making-the-first-website-and-deploy">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/making-the-first-website-and-deploy)

## ブラウザの役割を理解しよう
Macの方は、TextEditというアプリケーションを開いてください（Windowsユーザーは「メモ帳」を開いてください）。

TextEditは、「Launchpad」の「Other（その他）」内にあります。

見つからない場合は、Macの画面の右上、現在時刻が表示されている部分の並びにある虫眼鏡のマークを押し、「TextEdit」と入力してください。

次のようにTextEditが表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/textedit-1.jpg)

</div>

ここに、下記のものをコピーして貼り付けてください。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>私のウェブサイト</title>
</head>
<body>
    <h1>初めてのウェブサイト</h1>
    <p>今日の天気は晴れです</p>
    [Googleへのリンク](https://www.google.com)
</body>
</html>
```

次のようになります。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/textedit-2.jpg)

</div>

見るとわかる通り、ここにも`<p>`や`<a>`といった部品が使われています。

上で見た物販サイトとの違いは、こちらの方が構造がシンプルで、入り組んでおらず、また量も少ないということだけです。

さて先ほど、「ウェブサイトとは、`<div>`、`<h2>`、`<a>`といった部品から成り立っている」と説明しました。

これが正しいならば、いま貼り付けたものも「ウェブサイト」ということになります。

確認してみましょう。

上部の「File（ファイル）」から「Save（保存）」を選びます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/textedit-3.jpg)

</div>

ファイルの保存場所およびファイル名は好きなもので大丈夫です。

しかし、ここで注意が一つあります。

保存時、デフォルトでは`.txt`という拡張子が使われますが、これを必ず`.html`に変更してください。

拡張子の変更は、ファイルの保存時だけでなく保存後でも可能です。

本記事では、デスクトップに保存をし、ファイル名は「first-website.html」としてあります。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/textedit-4.jpg)

</div>

ブラウザを開きましょう。

そしてここに「first-website.html」をドラッグ＆ドロップしてください。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/textedit-5.jpg)

</div>

次のように表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/textedit-6.jpg)

</div>

いま表示したものは、あまり色がないので、もう少しカラフルにしてみましょう。

「first-website.html」ファイル内をすべて消し、代わりに下記のものをコピー＆ペーストしてください。

`<head>`内に`<style>`というものが新設され、そこにたくさんのものが書いてありますが、一番下を見ると、先ほどとほぼ同じ構造の`<div>`や`<a>`があるのがわかります。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
    <title>私のウェブサイト</title>
    <style>
        :root {
            --primary-color: #5d5dff;
            --secondary-color: #4a4aff;
            --background-color: #f4f7f6;
            --text-color: #333;
            --container-bg: #fff;
            --box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }

        body {
            font-family: 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
            background-color: var(--background-color);
            color: var(--text-color);
            line-height: 1.6;
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            text-align: center;
        }

        .container {
            width: 90%;
            max-width: 600px;
            background-color: var(--container-bg);
            border-radius: 20px;
            box-shadow: var(--box-shadow);
            padding: 50px;
            transform: translateY(0);
            transition: transform 0.4s ease-in-out;
        }

        h1 {
            color: var(--primary-color);
            font-size: 3.5em;
            margin-bottom: 10px;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.05);
            animation: fadeInDown 1.5s ease-out;
        }

        p {
            font-size: 1.2em;
            color: #666;
            margin-bottom: 40px;
            animation: fadeInUp 1.5s ease-out;
            animation-delay: 0.5s;
            animation-fill-mode: both;
        }

        a {
            display: inline-block;
            background-image: linear-gradient(45deg, #5d5dff, #8a8aff);
            color: #ffffff;
            text-decoration: none;
            padding: 15px 30px;
            border-radius: 50px;
            transition: all 0.3s ease;
            font-weight: bold;
            letter-spacing: 1px;
            text-transform: uppercase;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        a:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            background-image: linear-gradient(45deg, #4a4aff, #6f6fff);
        }

        @keyframes fadeInDown {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>初めてのウェブサイト</h1>
        <p>今日の天気は晴れです</p>
        [Googleへのリンク](https://www.google.com)
    </div>
</body>
</html>
```

保存したら、先ほどと同じように「first-website.html」ファイルをブラウザにドラッグ＆ドロップしてください。

次のように表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/textedit-7.jpg)

</div>

デザインが変わり、最初の方では文字が動くというアニメーションも付いているのがわかります。

---

さて、ここまで見てきたものから確認できたのは次のことです。

【 ウェブサイトは`<div>`や`<a>`といったタグから構成されていること 】

ここで見たのは非常にシンプルな構造のものでしたが、大きなウェブサイトではタグの数はより多く、構造もより入り組んだ複雑なものになります。

そしてもう一つわかったことがあります。

【 GoogleクロームやSafariといったブラウザは、これらのタグを使って書かれたファイルを表示させる機能があること 】

例えば`.docx`や`.doc`という拡張子のファイルを開くときは、Wordというアプリケーションを使います。

GoogleクロームやSafariも同じような機能のアプリケーションで、`.html`という拡張子のファイルを開くためのものなのです。

しかし大きな違いが一つあります。

通常私たちが`.docx`ファイルを開くとき、このファイルは私たちのパソコンの中にあります。

しかしGoogleクロームやSafariは、`.html`ファイルをインターネット上から入手して開きます。

つまりネット上には無数の`.html`ファイルがあり、それを開くためのアプリケーションが「ブラウザ」と総称されるGoogleクロームやSafariなのです。

なので、次はいま私たちのパソコン内にある「first-website.html」をオンライン上にアップロードしてみましょう。

そうすれば、「first-website.html」に世界中の誰もがアクセスできるようになるはずです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/making-the-first-website-and-deploy">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/making-the-first-website-and-deploy)

（*なお、先ほど出てきた`<style>`というものは、ウェブサイトに色やアニメーションを付けて整形するためのものです。CSSと呼ばれます。`<div>`や`<a>`などでウェブサイトの骨組みを作るためのものがHTML、そこに色やデザインを加えて魅力的にするためのものがCSSです。）

## ウェブサイトをオンラインに公開しよう
最初に準備を2つします。

現在、「first-website.html」ファイルはむき出しのままなので、フォルダに入れてあげましょう。

新規フォルダを作ってください。

名前は何でも構いませんが、ここでは「my-website」としてあります。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/netlify-1.jpg)

</div>

このフォルダ内に「first-website.html」を入れます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/netlify-2.jpg)

</div>

次にフォルダを開き、「first-website.html」というファイル名を「index.html」に変更してください。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/netlify-2-2.jpg)

</div>

これで準備は完了です。

次は下記リンクを開いてください。

• [netlify.com/drop](https://app.netlify.com/drop)

このサイトの中心部にフォルダ「my-website」をドラッグ＆ドロップしてください。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/netlify-3.jpg)

</div>

アップロードが完了すると表示が変わり、URLが表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/netlify-4.jpg)

</div>

これが、オンライン上にアップロードした「first-website.html」ファイルへアクセスするためのURLです。

クリックしましょう。

このNetlify Dropsでは、イタズラ防止のためのパスワードが設定されています。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/netlify-5.jpg)

</div>

「My-Drop-Site」というパスワードを入力しましょう（このパスワードは、前ページのURLの下部に書いてあります）。

ウェブサイトが表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog215/textedit-7.jpg)

</div>

これで、私たちがパソコン内で作った「first-website.html」というファイル、つまり「ウェブサイト」に、世界中の誰もがアクセスできるようになりました。

（*なおこのNetlify Dropsでは、1時間後にウェブサイトは自動で削除されます。永続化するにはNetlifyのアカウントを作ってください。メールアドレスだけで無料で作れます。アカウント作成の手順は[「【0円・1分で完了】HTMLとCSSでつくったウェブサイトを無料で今すぐ公開する方法」](/blog/how-to-release-website-for-free)で画像つきで解説しています。）

またNetlify Dropsと同様のサービスとして、2026年7月にリリースされたCLOUDFLAREのCloudflare Dropがあります。

• [cloudflare.com/drop](https://cloudflare.com/drop)

<div class="img-border">

![cloudflare-drop.jpg](../../images/singleBlogPageImages/blogArticleImages/blog215/cloudflare-drop.jpg)

</div>

## まとめ
ここまでわかったことをまとめてみましょう。

---

• すべてのウェブサイトは`<div>`や`<a>`といったタグから作られている

• ファイルの拡張子は`.html`

• GoogleクロームやSafariといったブラウザは、それらのタグを使って書かれた`.html`ファイルを表示するためのもの

• `.html`ファイルをオンライン上にアップすると、世界中どこからでもアクセスできる

• `<div>`や`<a>`といったウェブサイトの骨組みをHTML、そこにデザインを付けるものをCSSと呼ぶ

---

以上がウェブサイト制作の基本になります。

かつての私自身を含め「ウェブサイト」は複雑で、自分で作るのは難しいと思っている人が多いですが、その実態はとてもシンプルなのです。

ウェブサイトが作れたら、次のステップはJavaScriptを経てReactで「ウェブアプリケーション」を作ることです。

HTML・CSSの次に何を学ぶべきか、どの順番で進めばいいかを2026年版でまとめたロードマップはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/making-the-first-website-and-deploy">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/making-the-first-website-and-deploy)

---

# 【2026年版】React・TypeScript・Next.js・AIを最短で学ぶロードマップ

URL: https://monotein.com/blog/frontend-learning-roadmap
公開日: 2025.8.21
更新日: 2026.6.14
概要: HTML・CSSの知識だけで始められるフロントエンド学習ロードマップ。ReactからTypeScript・Next.jsのフルスタック開発まで、2026年のAI時代に必須スキルを身につける順番を解説します。

## フロントエンド学習の順番
私はフロントエンド開発のビギナー向け教本を複数出しています。

30冊を超えているため、時折りいただくのが「フロントエンド入門したいです。おすすめの方法を教えてください」というお問い合わせです。

そのため本記事では、2026年にフロントエンドにスムーズに入門するためのロードマップを紹介します。

なお、ここで紹介している教材を始めるときの前提知識はHTML・CSSだけで大丈夫です。

また、2026年の開発現場で避けては通れない「AIを使った開発」についても、記事の最後で触れます。

## React入門の方法
現在のフロントエンドで最も需要があるのがReactです。

必須スキルといえるでしょう。

このReactはJavaScriptをベースに作られているため、JavaScriptの理解がまず必要とされます。

しかし、Reactがどのようなものであるかという「さわり」や「基本」を知るためなら、JavaScriptの知識は不要です。

HTML・CSSの知識で十分です。

React入門のハードルを限界まで下げ、HTML・CSSだけでReactを使うことができる教材が『はじめてつくるReactアプリ』になります。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">【2026年1月第3版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

なおReact自体に難しさを感じている人は、こちらのガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

## React × TypeScriptがデフォルト
しかし実は開発現場では、「ReactをJavaScriptで書く」よりも「ReactをTypeScriptで書く」というのがデフォルトになっています。

TypeScriptを使うと、アプリの安全性と開発の効率が上がるからです。

つまりReact × TypeScriptが開発現場のマストなのです。

しかしTypeScriptに苦手意識を覚える人も多くいます。

特に、ReactをJavaScriptで使い始めた後でTypeScriptに移行したケースで苦手意識を持つ人が多い。

「それなら最初からReact × TypeScriptで始めよう」というコンセプトで書いたのが、上で触れた『はじめてつくるReactアプリ』のTypeScript版です。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B094Z1R281">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts.svg" alt="はじめてつくるReactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ with TypeScript</p>
        <p class="bc-desc">【発売から5年読まれ続けているReact × TypeScript入門書の決定版。2026年1月第3版発売。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

TypeScriptはJavaScriptの上位言語です。

そのためTypeScriptを使えるようになれば、JavaScriptも使えることになります。

最初から、開発現場で必須となっているTypeScriptで学ぶのがおすすめです。

なお、この本の冒頭部分を下記ページで無料で公開しています▼

<div class="rich-card-link">
<a href="/blog/first-chapter-from-react-book">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-230.png)

</div>
<div class="r-card-text">
AmazonでNo.1のReact入門書を無料公開
</div>
</div>
</a>
</div>

<br/>

さて、この『はじめてつくるReactアプリ』はReact完全入門ビギナー向けです。

未経験者に、React開発の「小さな成功体験」を作ってもらうことを最優先にしています。

そのためReactやJavaScript・TypeScriptの解説も最小限です。

しかしReactを使いこなすには、より広く深い知識が必須です。

『はじめてつくるReactアプリ』には、続編の『Reactマスター』と『TypeScriptマスター』があります。

これをすべて終えると、2026年に必要なフロントエンドスキルがしっかり身につきます。

「はじめてつくるReactアプリ」から「Reactマスター」「TypeScriptマスター」まで、教材のつながりを一枚にまとめた図はこちらです▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/frontend-learning-roadmap">

![roadmap-for-react-book-wide](../../images/commonImg/roadmap-for-react-book-wide.png)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/frontend-learning-roadmap)

なお現在のReact開発では`create-react-app`は使いません。

必ずReact + Viteというものを使います。

セットアップ方法と全体像はこちらのガイドにまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

TypeScriptを難しく感じる理由と、React開発での身につけ方は下記ガイドをどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

## バックエンド開発入門
Reactはフロントエンド側のツールです。

しかしフロントエンド担当であっても、最低限のバックエンドの知識は必要になります。

近年のアプリ開発は、フロントエンドだけで完結することがほぼなく、バックエンドとの連携作業が必ず発生するからです。

フロントエンドとバックエンドの違いについては下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/frontend-and-backend">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-82.png)

</div>
<div class="r-card-text">
フロントエンドとバックエンドの違いとは？APIやサーバーの役割も初心者向けに全解説
</div>
</div>
</a>
</div>

<br/>

バックエンドの基礎の基礎を学びたい人向けの教材が『はじめてつくるバックエンドサーバー基礎編（Node.js & Express）』になります。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B09HQZ1BW8">
    <img class="bc-cover" src="/images/commonImg/nodebook-intro.svg" alt="はじめてつくるバックエンドサーバー基礎編" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるバックエンドサーバー基礎編</p>
        <p class="bc-desc">【2時間でバックエンド開発の「初歩の初歩」を知りたいビギナーに最適の入門書】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

この本は「完全ビギナー」を対象にしているので、上記のReactの本を読んでいなくても進めていけます。

前提知識はHTMLだけです。

この本を終えると、バックエンドとフロントエンドの役割やAPIの仕組みがわかるようになります。

使用テクノロジーは、フロントエンド開発者に馴染みのあるJavaScriptをベースとしたNode.jsです。

---

この本には続編があります。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B09X56PSCQ">
    <img class="bc-cover" src="/images/commonImg/nodebook-advanced.svg" alt="はじめてつくるバックエンドサーバー発展編（Node.js & Express & MongoDB）" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるバックエンドサーバー発展編（Node.js & Express & MongoDB）</p>
        <p class="bc-desc">【2024年9月改訂版リリース。ログイン機能を持った本格的なNode.jsアプリ開発を、ビギナー向けにわかりやすく解説】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

この「発展編」では「基礎編」で触れなかったバックエンドの重要な機能、ログイン管理やデータベースとの連携を解説しています。

基礎編・発展編の2冊をやり終えれば、フロントエンド・エンジニアとして知っておきたいバックエンドの知識が十分身につきます。

## フルスタック開発に挑戦
ここまでの本をすべて読み終えたら、自分でフロントエンドとバックエンドの両方を開発するという大きなチャレンジをしてみましょう。

フロントエンドとバックエンドの両方を開発できるエンジニアを、「フルスタック・エンジニア」といいます。

以前は「MERN」という、フルスタック・アプリ開発でよく使われる定番テクノロジーの頭文字をつなげた言葉もよく聞きました。

（**MongoDB／データベース、Express／Node.jsのフレームワーク、React、Node.jsのこと*）

しかし2026年の今では、このように複数のテクノロジーを使わずともフルスタック・アプリが作れてしまいます。

Next.jsというものがあるからです。

## 最重要のNext.js
Next.jsは、現在のフロントエンド開発で主流となっている最重要ツールです。

しかしこのように書くと、「フロントエンドの必須テクノロジーはReactじゃなかったの？」と混乱する人がいると思います。

ReactとNext.jsの違いは何なのでしょうか？

---

Next.jsはReactをベースに作られており、一般的に「Reactフレームワーク」と呼ばれます。

つまり、JavaScriptをベースにReactが作られており、そのReactをベースとしてNext.jsが作られているのです。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog214/js-react-next.js.png)

</div>

ここで多くの人が疑問に思うのが、「なぜReactの上にさらにもう一段フレームワークがあるのか」という点です。

「なぜReactで十分ではないのか？」という疑問です。

---

上記の本でReactを実際に使ってみると、Reactで使える機能が実は最低限であるのがわかると思います。

アプリで必要な機能を実装するには、様々な外部ツールを個別に用意する必要があるのです。

それなら、「多くのReactアプリで必要となる機能をすべて最初からまとめて用意したスターターキットがあれば便利なのでは？」と考えるのは自然です。

そこで開発されたのがNext.jsで、現在の開発現場ではNext.jsを使うことが主流になっています。

フルスタック・アプリもNext.jsだけで開発可能です。

その方法を紹介するのが『Next.jsでつくるフルスタックアプリ（前編・後編）』になります。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFXVMSF">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1.svg" alt="Next.jsでつくるフルスタックアプリ 前編・後編 with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ 前編・後編 with Supabase</p>
        <p class="bc-desc">【2025年10月リリース。最新のNext.jsをつかった本格アプリの開発手法がわかる入門書】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

*なお翔泳社から出ている『[動かして学ぶ！Next.js/React開発入門](https://www.amazon.co.jp/dp/4798184675)』も内容はほぼ同一で、Next.jsを使ったフルスタック・アプリの開発方法を紹介しています。

2026年4月にはTypeScript版をリリースしました▼

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0GX2WKN36">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1-ts.svg" alt="Next.js × TypeScriptでつくるフルスタックアプリ with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.js × TypeScriptでつくるフルスタックアプリ with Supabase</p>
        <p class="bc-desc">—2026年最新のアプリ開発スキルが身につく1冊</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

Next.js本と、その先にある「Reactマスター」「TypeScriptマスター」との関係を一枚の図にまとめました▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/frontend-learning-roadmap">

![roadmap-for-next-book-wide](../../images/commonImg/roadmap-for-next-book-wide.png)

</a>

とはいえ、Next.jsが必ずしも最適解ではない状況も多くあります。

Next.jsを使うべきか、Reactを使うべきかの判断については、下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/react-vite-or-nextjs-which-to-choose">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-187.png)

</div>
<div class="r-card-text">
【2026年版】React + ViteとNext.js、どちらを選ぶべきか？ 用途別の選び方を分かりやすく解説
</div>
</div>
</a>
</div>

<br/>

Next.jsの全体像について理解したい方は、下記ガイドを参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

Next.jsのセットアップ方法は下記記事で紹介しています▼

<div class="rich-card-link">
<a href="/blog/nextjs-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-242.png)

</div>
<div class="r-card-text">
【Next.js × TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

Reactサーバーコンポーネント（RSC）やReact 19の新機能まで体系的に理解したい人はこちらのガイドをどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

## 【 AI開発時代 】に必須のフロントエンド・スキル
2026年の今では、ビギナーであってもAIツールを開発で使うのが一般的になっています。

「エラーが出た時にChatGPTに聞く」といった使い方をしている人も多いでしょう。

フロントエンド開発、特にReact × AI開発において、昨年中頃から特に人気を集めているのがAIを組み込んだエディター「Cursor」と、ターミナルで動かす「Claude Code」です。

これらよりも以前からあるAI支援ツール「Github Copilot」は今も人気ですが、いま触れた「Cursor」と「Claude Code」のどちらかに慣れておくと、一歩先んじたAI開発スキルを身につけることができます。

ビギナーには、VSコードとほぼ同じ操作性で、かつ無料プランもある「Cursor」の方が気軽にトライできるでしょう。

とはいえAIを使うことのリスクもあります。

AIをReact開発で使う上で気をつけたいことは、下記記事にまとめてあります▼

<div class="rich-card-link">
<a href="/blog/ai-era-why-more-people-learn-react">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-251.png)

</div>
<div class="r-card-text">
AIでReactアプリを作れる時代。なぜReact学習者は増えている？
</div>
</div>
</a>
</div>

<br/>

## AIがReactやフロントエンド開発者に与えている影響
多くのフロントエンド開発者がAIを使っています。

最適なコードをAIに提案してもらうだけでなく、すべてのコードをAIに書かせる「バイブコーディング」も起きています。

そしてAIが提案してくるコードの大半はReactです。

オンライン上にはReact関係の情報が最も多く、AIはそれを学習しているからです。

---

このような状況を見ると、「React学習者は減っているのだろう」と考える人が多いでしょう。

しかし実態はもう少し複雑です。

「全部AIにやらせる」とAIに丸投げする人が出てくる一方、「あれ、自分はReactを分かっていなかったな」と感じる人も増えているのです。

AIの登場によって「AIの書いてきたコードを人間が理解できない」という場面が増えました。

これが逆説的に開発者の学習熱を高めているのです。

詳しくは下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/ai-era-fragmental-knowledge">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-252.png)

</div>
<div class="r-card-text">
AI時代のReact学習で加速する「断片学習」とは？
</div>
</div>
</a>
</div>

<br/>

そしてこれはフロントエンドに限られた話でもありません。

AIによって基礎分野（アルゴリズム、データ構造、アーキテクチャ、セキュリティなど）の勉強を促す動きは広がっています▼

<div class="rich-card-link">
<a href="/blog/ai-leads-developers-learning-fundamentals">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-216.png)

</div>
<div class="r-card-text">
AIが浸透する中、開発現場で起きている意外なこと
</div>
</div>
</a>
</div>

<br/>

AIによってReactに触れる機会は増えました。

同時に、「Reactが分からない」と感じる人も増えています。

AIの出してくるものが、個別状況に最適化された、断片的な情報だからです。

しかし実は断片的な知識とは、「全体を理解している人」に対してだけ役に立つものです。

たとえばパズル。

完成図を知らないまま、ピースだけ大量に渡されたとしましょう。

どれを、どこにあてはめればいいのかが分かりません。

しかし全体像を知っている人なら、「これはここに入るな」と推測・判断できます。

Reactでも同じです。

全体像を理解する必要性はかつてないほど高まっています。

Reactの全体像を理解し、AI時代にReactをしっかり使いこなせる教材はすでにあります。

興味のある方はそちらもご利用ください。

本記事末にリンクがあります。

## よくある質問
### Q1. HTMLとCSSしか知らなくても、本当にReactから始められますか？
始められます。

JavaScriptの知識がなくても、HTMLとCSSだけでReactの基本を学べる教材があります。下記教材です。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B094Z1R281">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts.svg" alt="はじめてつくるReactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ with TypeScript</p>
        <p class="bc-desc">【発売から5年読まれ続けているReact × TypeScript入門書の決定版。2026年1月第3版発売。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

まずはReactがどんなものかを体感することが大切で、JavaScriptは後から必要に応じて学んでいけば問題ありません。

### Q2. 2026年にフロントエンドを学ぶなら、AIの知識も必要ですか？
ビギナーであれば必須とまでは言えませんが、AIツールに慣れておくと学習スピードや開発効率が上がります。

エラーをAIに質問したり、コードの書き方を確認したりといった使い方から気軽に始めてみましょう。

### Q3. 本ではなく、記事ベースで学習の流れを確認したい場合は？
本記事では書籍を中心にロードマップを紹介してきました。

ブログ記事ベースで全体の学習ステップを確認したい方は、こちらのロードマップ記事も参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

### Q4. 本記事の教材をすべて終えたら、次は何をすればいいですか？
本記事で紹介した教材をすべて終えたら、React、TypeScript、Next.js、Node.jsという、現在のフロントエンド開発で最も求められているスキルを一通り経験できたことになります。

しかしこれらの教材はすべて「入門編」です。

state、props、コンポーネント設計といったReactの中心部分や、Reactで使うTypeScriptの知識を体系的に身につけるには、より高度な教材が必要になります。

それが「React × TypeScriptマスター」です。

この教材について詳しくは下記の記事をご覧ください。

教材制作の裏話や利用者の声などを紹介しています▼

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

<br/>

### ロードマップは分かりましたが、ひとりで進める自信がありません
全体の流れが見えても、いざ自分ひとりで進めるとなると、判断に迷う場面は必ず出てきます。

今の状況を教えていただければ、次に何をすればいいか、どう進めていけばいいかを個別にお答えします。

「この進め方で合っているのかな？」という確認だけでも大丈夫です。

下のフォームからご連絡いただければ、三好アキが直接、目を通してお返事します（無料）。

---

# 【情報過多】プログラミング初心者が挫折する原因

URL: https://monotein.com/blog/information-overloaded
公開日: 2025.8.20
更新日: 2026.6.22
概要: プログラミング初心者が直面する「情報過多」の壁。情報過多で挫折してしまう原因を、3つに分けて細かく解説。対策として、挫折せずに学習を進める方法も紹介。

## 情報過多という問題

私はビギナーに、ReactやNext.jsといったウェブアプリ開発の技術を教えています。

その中で全員が間違いなく一度はぶつかっている問題。

それが「情報過多」です。

「_ウェブ・プログラミングを学びたい！_」と思い立ったものの、調べてみると・・・

---

_HTML、CSS、JavaScript、React、Vue、Angular、Webpack、Vite、バージョン管理、Git、バックエンド、Node.js、Django、データベース、フロントエンド、API、Netlify等々_

---

・・・といった横文字・英字が山ほど出てきて、混乱してしまうのです。

かくいう私自身、ビギナー時代に同じ経験をしました。

そしてAI時代のいま、さらに多くのプログラミング学習ビギナーが情報過多の波に襲われています。

## ビギナーが混乱する3つの原因

混乱の原因は3つあります。

まず、それぞれの用途がわからないこと。

Git、React、API、Viteなど各ツールが存在しているのは、それぞれに何らかの役割があるからです。

しかしビギナーは、その個別の役割がまず理解できません。

「_Viteはバンドルツールで、複数のJavaScriptファイルを一つのJavaScriptファイルにまとめます_」と突然言われても、ビギナーには理解することができないのです。

---

混乱の2つ目の原因。

それは、それぞれのツールの間の関係性、つまり「つながり」が分からないことです。

アプリを作るには、ツールを単独ではなく、複数組み合わせて使う必要があります。

それぞれのツールの役割がおぼろげながら分かってきていても、その間にある関係性がわからないと、頭の中に見取り図・全体像を描けません。

<a href="/present?magnet=first-study-guide&from=/blog/information-overloaded">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/information-overloaded)

そして混乱の原因の3つ目。

それは、同様の働きをするツールを個別に理解しようとしてしまうからです。

例えばReact、Vue、Angularは「JavaScriptフレームワーク」という括りでまとめられます。

これら3つのツールには違いが確かにありますが、大局的には同じ機能を持つからです。

しかしそれを知らず、React、Vue、Angularが何をするものであるかを個別に理解しようとすると、時間だけでなく、脳にも余計な負担がかかります。

---

例えば、日本人にはあまり馴染みがないWhatsAppというアプリがあります。

これがどのような機能を持つツールであるか聞かれた時、まず次のような説明が可能です。

「_WhatsAppは、スマートフォンやPCで使える無料のメッセージアプリで、テキストチャット・音声通話・ビデオ通話・画像やファイルの送受信ができて、エンドツーエンド暗号化によって安全にやり取りができるアプリ_」

しかし、次のような説明も可能です。

「_WhatsAppはLINEみたいなアプリ_」

ほとんどの日本人はLINEがどのようなアプリかを知っています。

なので、それを例に挙げて説明した方が簡潔で、理解の負担も軽くなります。

---

「個別に理解すべきこと」と「大雑把にまとめて理解していいこと」の区別が、ビギナーにはわからないのです。

「_すべてのツールを同じ力量をかけて分かろうとして、時間が必要以上にかかる・・・_」

「_しかし説明をいくら読んでもはっきり理解できないため、挫折してしまう・・・_」

このようなことが起こります。

## 百聞は一見にしかず

「_説明をいくら読んでもすっきりしなかったけど、一度実際に使ってみたら氷解した！_」

こうした経験を誰もが一度はしています。

プログラミングで学ぶことの大半は、抽象概念ではなく、ツールの使い方です。

一度実際に使ってみると、「_それまで説明をいくら読んでも理解できなかったことが、すぐに分かった！_」ということが起きてきます。

---

「実際に試す」というのは時間がかかることです。

しかし学習とは、そもそも時間がかかるものなのです。

焦らず、そして諦めずに進めていけば、いつの間にか遠くにまで来ていることに気が付きます。

そしてそこからかつての自分を振り返った時、「_なんであんなことが分からなかったのだろう？_」と不思議に思う。

こういった瞬間こそ自分の進歩を実感する時で、諦めなかった過去の自分に感謝できる時です。

情報過多の混乱を乗り越えたら、次に必要なのは「何を、どの順番で学べばいいか」というガイドです。

HTML・CSSからReact・TypeScript・Next.jsまで、2026年のReact学習の全体像と各ステップの進め方をまとめたロードマップがあります▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=/blog/information-overloaded">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/information-overloaded)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/information-overloaded">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/information-overloaded)

---

# 【プログラミング学習】続けられる人と挫折する人の違い

URL: https://monotein.com/blog/joy-of-creating
公開日: 2025.8.19
概要: プログラミングにハマった理由は「モノづくりの楽しさ」。サイト制作もアプリ開発も、すべてモノづくりです。そして、自分の手で作り上げた喜びは自信になり、プログラミング学習を続ける一番のモチベーションになります。

## 継続する人と止める人の違い
学習を継続できる人と、途中で止めてしまう人の間には、ある違いがあります。

プログラミングの楽しさを感じた体験の有無です。

このことを、私の体験談を通して説明しましょう。

---

私が最初に触れたのはHTML・CSSでした。

ウェブサイトを作るためです。

実はこれ以前にも、マウス操作で使えるWixでウェブサイトを作ったことはあったのですが、その完成度には満足できませんでした。

Wix以外の選択肢を調べる中で、「ウェブサイトを自分で作るにはHTMLとCSSが必要」と知り、HTML・CSSの勉強を始めたのです。

## 意外に簡単にできてしまった
普通の人にとって、「ウェブサイト」は作るのが難しそうに見えます。

私はそう思っていました。

しかし自分でHTML・CSSを勉強してみると、意外にすんなりとウェブサイトが作れてしまったのです。

そこで感じたことが2つありました。

---

【 ウェブサイトって意外に簡単に作れるんだな 】

そして

【 モノづくりの楽しさ 】

です。

<a href="/present?magnet=first-study-guide&from=/blog/joy-of-creating">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/joy-of-creating)

## モノづくりの喜びがモチベーションになる
ウェブサイトやアプリケーションはパソコン上で動きます。

物理的に触ることはできません。

しかし何もないところから自分の手で作っていく（＝コードを書いていく）という点では、これも間違いなく「モノづくり」です。

私が初めてウェブサイトを作った時に強く感じたこと。それはこの「モノづくりの楽しさ」でした。

自分の手で何かを作っていくことは楽しいものです。

作っている最中は楽しく、完成すると嬉しくなります。

このような楽しさ・喜びは私たちの根源的な感情の一つで、人類がここまで文明を発展させてきた原動力もそこにあるのかもしれません。

---

私が最初のウェブサイトを作ったときに感じた「モノづくりの喜び」は、その後も続いています。

より高度な技術を学び、より複雑なアプリケーションを作った時にも「モノづくりの喜び」を感じました。

いま仕事としてプログラミングをしていても、私の中に変わらずにあるのがこの「モノづくりの喜び」です。

そして、私が教材の中でハンズオン形式（作りながら学ぶスタイル）にこだわっているのは、ここに理由があります。

生徒の方に、自分の手で作り上げる楽しさと喜びを味わってもらいたいからです。

---

楽しさ・喜びを一度味わったら、また欲しくなります。

自分の手で作り上げられたら、それは自信になります。

---

このように自分の中から湧いてくる「もっと」という気持ちこそ、学習を継続させる一番強力なモチベーションです。

学習を継続できている人というのは、みな何らかの楽しさ・喜びを見つけられた人といえます。

そして瞬間的にでもプログラミングの楽しさを感じたなら、その勢いで学習を前へ進めていきましょう。

HTML・CSSの次に何を学ぶのか、Reactにはどうたどり着くのか——学習全体の流れとステップを2026年版ロードマップとしてまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/joy-of-creating">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/joy-of-creating)

---

# Reactはなぜ無料で使えるのか？

URL: https://monotein.com/blog/why-react-is-free-to-use
公開日: 2025.8.18
概要: ReactやAngular、VS Codeなど、企業が開発しているツールがなぜ無料で使えるのでしょう？人材採用コストの削減のためです。MetaやGoogleがオープンソースでツールを提供するメリット、業界影響力の拡大を解説。

## Reactは無償ボランティア？
Reactは非常に便利なテクノロジーで、開発・改善も継続的に行われています。

開発元はMeta社（旧Facebook）です。

私は以前、企業が開発を主導しているこのような高機能ツールが、なぜ無料で使えるのかと疑問に思っていました。

「どのようなメリットが企業にはあるのだろう？」という疑問です。

これが例えばNext.jsなら、「Vercelという有料サービスに誘導するため」と分かりやすい。

しかしReactには、そういった分かりやすい「課金への導線」はありません。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-react-is-free-to-use">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-react-is-free-to-use)

## 人材採用コストの削減
メリットはいくつもありますが、直接的なものとしてエンジニア採用コストの削減が挙げられるでしょう。

Reactが人気となり、学ぶ人が増えると、Meta社の欲しいエンジニアが「外部ですでに多く育った状態」になります。

母数が増えると、優秀な人材の数も多くなるので、その中から一番優れているエンジニアを選抜できます。

有能な即戦力を採用できるのです。

## 採用以外のMeta社のメリット
Reactはオープンソースとして無料で公開されています。

この結果、世界中の開発者がバグ報告や新機能の提案をしてくれます。

Meta社のメンテナンスコスト、開発コストは下がります。

これ以外にも

---

• 業界標準の地位の獲得（→ 影響力の拡大）

• 企業イメージの向上（「開発者に優しい会社」「技術力のある企業」など）

---

といったメリットも挙げられるでしょう。

## AngularやVS Codeが無料の理由
本記事ではReactに焦点を当てています。

しかし紹介したメリットの構造は、Angularの開発元Googleや、VS Code・TypeScriptの開発元Microsoftにも基本的に当てはまります。

GoogleとMicrosoftの場合には

---

• Angularエンジニアが、有料サービスのFirebaseやGoogle Cloudも使う

• VS Codeユーザーが、有料サービスのAzureを使う

---

といった、間接的な収益につなげられるメリットも加えられるでしょう。

このように企業がオープンソースとして無料でツールを提供するのは、長期的に自社に利益をもたらす仕組みがあるからなのです。

さて、Reactの背景が分かったら、次はReact自体の理解を深めてみましょう。

Reactを学び始めたときに「難しい」と感じる理由は、実はほとんどの人で共通しています。

先にその原因と乗り越え方を知っておくと、学習がずっとスムーズに進みます▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-react-is-free-to-use">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-react-is-free-to-use)

---

# 私がReactを選んだ理由（Not Angular or Vue）

URL: https://monotein.com/blog/why-i-chose-react
公開日: 2025.8.17
概要: React、Vue、Angularの選び方に迷う初心者向けに、Reactを選んだ理由や学習の実際の体験談を共有。JavaScriptフレームワークの選び方のヒントを提供します。

## JSフレームワーク選択で迷う
私はReactをビギナーに教えています。

そのため、生徒のほとんどはすでに「Reactを学ぶ」と決めている人たちです。

しかし中には、「VueとReact、どっちでいこうかな？」と迷っている人もいます。

また、どちらかを使ってみたあと小さな壁にぶつかり、「やっぱりあっちにしようかな」と、決められない人もいます。

---

私はVueやAngularを使うこともありますが、メインはReactです。

最初に選んだJavaScriptフレームワークもReactです。

当時、すでにVueとAngularも高い存在感を示す中、私がReactを選んだのは、消去法でReactが残ったからです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-i-chose-react">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-i-chose-react)

## 現実的な理由
当時の私は「JavaScriptフレームワーク」が、一体何をするものなのかすらわかっていませんでした。

そもそもJavaScript自体の知識がほぼなかったので、そのフレームワークの機能を想像できないのもむしろ当然だったかもしれません。

ただ、HTMLやCSS、WordPress、PHPといったウェブ関係のテクノロジーを学ぶ中で、ひとつの到達地点（＝ゴール）を「JavaScriptフレームワーク」に置いていました。

それを学べば、とにかくマーケットで最先端とされる技術を身につけられるだろう、と考えていたのです。

（*<a target="_blank" rel="noopener" href="/blog/why-i-chose-js">こちらの記事</a>でも書きましたが、私もかなり「現実的な理由」で学ぶことを決めていたのです。）

## Vueが最初に脱落
ネットや本で調べたあと、最初に脱落したのはVueでした。

私が「将来性」「学習にかけた時間とリターン」といったものを考慮したからです。

大企業がバックにいるReact（旧Facebook）やAngular（Google）とは違い、コミュニティ主導のVueは頼りなく見えました。

## ReactとAngularで迷う
残りはReactとAngularです。

この2つで私は少し迷っていました。

学習用の教材として、Angularの方が良いものが多いように見えたからです。

学ぶ上で、学習素材の充実度は無視できません。

本屋に足を運び、AngularとReactの教本を何度も見比べました。

しかし最終的にはAngularが脱落します。

TypeScriptが使われていたからです。

最初にTypeScriptを学ばなければならない、というのが負担でした。

---

いま振り返ってみると、もしこの時TypeScriptを学び、その後フレームワークに入っていたら、どうなっていたのかなとも思います。

私はReactを身につけた後にTypeScriptを学びました。

それまでJavaScriptで書いていたコードをTypeScriptで書く、というところから、TypeScriptの第一印象は「なぜこんな面倒なことをするのか」というものでした。

TypeScriptのメリットに気づくまでに少し時間がかかったのです。

しかしこの経験は、今ビギナーにTypeScriptを教えることに大きく役立っています。

ビギナーの方の気持ちがわかるからです。

## Reactを選んだ後に迷ったか？
今ではReactの本も、私の教本を含めて非常に充実していますが、当時の日本ではVueが一番人気でした。

そのためVueの教材がもっとも多く、次にAngular、Reactといった状態です。

教材の選択肢が少ないことは、挫折リスクの上昇につながります。

自分に合う教材を探すチャンスの数が少ないことを意味するからです。

実際、私が一番最初に買ったReactの本は自分に合いませんでした。

他の本も試しましたが、使いこなせないまま終わります。

---

結局私がReact入門をできたのは、日本語の教材ではなく英語の教材でした。

この辺りの話は<a target="_blank" rel="noopener" href="/blog/overcoming-js-to-react-1">こちらの記事</a>に書いてあるので、興味のある人は読んでください。

さて、Reactで行くと決めたものの、その後かなり長い間、学習がスムーズに進みませんでした。

そういう時、私が「やっぱりAngularにしようかな」「Vueなら分かりやすいかも」とは一度も思わなかったのは、いま思えば不思議です。

「Vueは将来性に不安がある」や「AngularはTypeScriptがマスト」という点が、やはり大きかったのでしょう。

しかし脇目を振らず、一つのことに集中していたからこそ、長い間試行錯誤ができ、最終的にはReact入門に成功し、そして今では人に教えるようになったのだと思います。

スムーズに進んでいたら、そもそもそこに困難があることに気が付けず、そしてそこでつまずいてしまう人の気持ちがわからなかったでしょう。

Reactを選んでからも、長い間うまく進めなかった.....このような経験を持つ人は少なくありません。Reactを難しく感じる理由と、その具体的な乗り越え方を整理したガイドがあります▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-i-chose-react">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-i-chose-react)

---

# 【React + Vite】開発時のターミナル表示を消す方法

URL: https://monotein.com/blog/react-vite-turns-off-terminal-messages
公開日: 2025.8.15
概要: React + Vite開発。vite.config.jsにコードをひとつ追加するだけで変更箇所や時刻の出力を非表示に。動画撮影時の時刻飛び問題も解決

## コードを一行追加するだけです
React + Vite開発時、コード変更の保存をするたびにターミナルに表示が出ます。

コードの変更箇所や時刻等の表示です。

これらは重要な情報ですが、もし表示させたくない場合は次のコードを`vite.config.js`に追加しましょう。

```js
logLevel: "silent"
```

`vite.config.js`ファイル全体としては次のようになります。

```js
// vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
    plugins: [react()],
    logLevel: "silent",          // 追加
})
```

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-turns-off-terminal-messages">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-turns-off-terminal-messages)


## なぜ消す必要があるのか？
ターミナルの表示をわざわざオフにする場面があるのかと思う人がいると思います。

実は私は、教材の動画撮影をしているときにこのコードを使っています。

動画撮影が複数日にまたがったり、休憩を取ったりしたとき、撮影した動画上でターミナルの時刻が大きく飛んでしまうからです。

マイナーな使い道ですが、ターミナルの表示は他にも様々なカスタマイズ可能なので、興味のある人は調べてみましょう。

なお現在のReact開発のスタンダード「React + Vite」の基本的な使い方や、その他の設定・学習の進め方はこちらのガイドでまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-turns-off-terminal-messages">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-turns-off-terminal-messages)

---

# Reactはライブラリ？フレームワーク？違いと意味を初心者向けに分かりやすく解説

URL: https://monotein.com/blog/react-library-or-framework
公開日: 2025.8.14
更新日: 2026.4.6
概要: Reactはライブラリかフレームワークか？この議論の背景と、なぜどちらでもいいのかを初心者向けに解説。VueやAngularとの比較や、言葉にこだわる理由、著者の経験談を交えて分かりやすく説明します。

## Reactはライブラリか、フレームワークかという話

「_Reactはライブラリですよね。でも、あの人はフレームワークと言っている。間違ってる！あの人の言うことはもう信用できない_」

最近このように言う人に会いました。

私は内心、「_ああ、またいつもの話だ_」と思いながら聞いていました。

というのは、Reactはライブラリか、フレームワークかという話は定期的に出てくるもので、こだわる人はそこに強くこだわるからです。

このように書くところから明らかなように、私は「_別にどっちでもいい_」という立場です。

<a href="/present?magnet=first-study-guide&from=/blog/react-library-or-framework">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/react-library-or-framework)

## Reactがフレームワークとされる理由

[React公式サイト](https://legacy.reactjs.org)を見ると、「A JavaScript library for building user interfaces（ユーザーインターフェイスを作るためのJavaScriptライブラリ）」と大きく書いてあります。

つまりReact公式は、自らを「ライブラリ」と呼んでいるのです。

この文章は長い間変わっていません。

ならばなぜ、「Reactはフレームワークである」と言う人が出てくるのでしょうか。

「Reactは事実上フレームワークだから」という、実際的な理由を挙げる人もいます。

他に便宜的な理由として、Vue、AngularというReactの類似テクノロジーが自らを「フレームワーク」と呼んでいることも挙げられるでしょう。

---

Vue、Angular、React。この3つはほとんど同じことを実現できます。

なので、例えば「人気のJavaScriptフレームワーク」といった記事を書く時、まずVueの説明を書き、次にAngular、そして最後に「ライブラリ」という別項目を立ててReactを書くのは煩雑です。

読む人（＝知識の少ない初心者）も、「フレームワーク」「ライブラリ」という2つの単語をまず理解しなければならず、負荷を感じます。

ならば、正確性を犠牲にしても「フレームワーク」という言葉で3つを一括りにした方がすっきりします。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-library-or-framework">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-library-or-framework)

## 私が「Reactはフレームワーク」と書く理由

私は教材の中でReactを「フレームワーク」とずっと呼んでいます。

「ライブラリ」という言葉は使ったことがありません。

これは上記の理由と同じで、記述の簡潔さを優先させているからです。

「Reactがライブラリであるか、フレームワークであるかといったことは、Reactを使えるようになった後に考えればいい話で、ビギナーの時点では不要なこと」と考えているからです。

---

「Reactはライブラリなのに、あなたの本にはフレームワークと書いてある」

と言ってくる人に、これまで私は運良く会ったことがありません。

しかしここにこだわる人が一定数いるのは知っていたので、昨年、翔泳社から出した[Reactの本](https://www.shoeisha.co.jp/book/detail/9784798184678)には、次の一文を加えてあります。

【_・・・なおReactは、厳密には「フレームワーク」ではなく「ライブラリ」であるとされますが、本書では読者のわかりやすさと記述の簡潔さを優先して「フレームワーク」で統一しています。_】

## 言葉にこだわるのは悪いことなのか？

ここまで私は、いわば「言葉の定義も重要だけど、より重要なのはそれが使えること。言葉とか分類法とかいうのは、後付け」といった立場で書いてきました。

しかし言葉にこだわる人の気持ちはよく理解できます。

特にビギナーの時には、言葉の一字一句に引っかかってしまう。

「別にそこまでこだわらなくてもよかったな」と思えるのは、ある程度時間が経ち、理解が深まり、全体を俯瞰する視野を持てたときです。

---

下記の記事でも書きましたが、私がJavaScriptで挫折したのは、まさに「言葉にこだわったから」です。

<div class="rich-card-link">
<a href="/blog/overcoming-js-to-react-1">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-194.png)

</div>
<div class="r-card-text">
私がJavaScriptで挫折した話（+ 乗り越えた方法）
</div>
</div>
</a>
</div>

<br/>

「オブジェクト」「引数」「メソッド」といった言葉が理解できず、先に進めなかったのです。

「別にそこまで言葉にこだわる必要はなかったな」と振り返れたのは、JavaScriptをある程度使えるようになってからでした。

このように考えてくると、「Reactはライブラリかフレームワークか」と言っている人を見たとき、私は些細なことにこだわっていた過去の古傷を思い出しているのかもしれません。

言葉の定義よりも、Reactを「使えること」の方がずっと重要です。

そしてReactを学び始めると、多くの人がある共通のポイントでつまずきます。

難しく感じる本当の理由と、その乗り越え方を整理したガイドがあります▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=/blog/react-library-or-framework">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/react-library-or-framework)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-library-or-framework">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-library-or-framework)

---

# JavaScriptを難しく感じる理由（HTML・CSSは簡単だったのに...）

URL: https://monotein.com/blog/why-js-feels-difficult-not-one-on-one
公開日: 2025.8.13
更新日: 2026.6.18
概要: HTMLとCSSをスムーズに学んだ人でも、JavaScriptでつまずく理由を解説。HTML・CSSのシンプルな1対1の関係性と、JavaScriptの複雑なプログラミング的アプローチの違いを明確にし、初心者がJavaScriptを学ぶ際の解決策を提案。

## JavaScriptでつまずく人は多い
私はReactやNext.jsといったJavaScript関係のテクノロジーを教えています。

すると、「JavaScriptを難しく感じる」という人に多く出会います。

HTMLとCSSをスイスイと進められた人ほど、特にそう感じるようです。

実は私もかつて同じことを感じ、JavaScriptで挫折したことがあります。

*その話の詳細はこちら▼

<div class="rich-card-link">
<a href="/blog/overcoming-js-to-react-1">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-194.png)

</div>
<div class="r-card-text">
私がJavaScriptで挫折した話（+ 乗り越えた方法）
</div>
</div>
</a>
</div>

<br/>


## HTML／CSSが簡単な理由
次のようなHTMLコードがあったとします。

```html
<h1>こんにちは</h1>
```

これをブラウザで表示すると、次のようになります。

<div class="img-border" style="padding-top: 30px;">

![aicp-model.svg](../../images/singleBlogPageImages/blogArticleImages/blog87/konnichiwa-html.jpg)

</div>

`<h1>こんにちは</h1>`を`<h1>おはよう</h1>`に変更すれば、ブラウザで表示される言葉も変わります。

次はここにCSSのスタイルを当ててみましょう。

まず文字の色を変えてみます。

```html
<h1 style="color: red;">こんにちは</h1>
```

ブラウザの表示は次のようになります。

<div class="img-border" style="padding-top: 30px;">

![aicp-model.svg](../../images/singleBlogPageImages/blogArticleImages/blog87/konnichiwa-html-red.jpg)

</div>

文字間を調整する`letter-spacing`も追加してみましょう。

```html
<h1 style="color: red; letter-spacing: 20px;">こんにちは</h1>
```
ブラウザを見ると、文字の間が広がっているのが分かります。

<div class="img-border" style="padding-top: 30px;">

![aicp-model.svg](../../images/singleBlogPageImages/blogArticleImages/blog87/konnichiwa-html-red-space.jpg)

</div>

このようにHTML／CSSでは加えた変更がとても分かりやすいのです。

`<h1>こんにちは</h1>`と書けば、大きな文字で「こんにちは」と表示されます。

`color: red;`と書けば、文字色が赤色になります。

「書いたコード」と「その結果」が1対1の関係なのです。

一方、JavaScriptはそうではありません。

<a href="/present?magnet=first-study-guide&from=why-js-feels-difficult-not-one-on-one">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&from=why-js-feels-difficult-not-one-on-one)

## JavaScriptを難しく感じる理由
大きく次の3つの理由があります。

### 理由①HTML／CSSとは異なるアプローチが必要
私自身を含め、多くの人が「HTML → CSS」と順調に進んで来ても、「CSS → JavaScript」で挫折してしまう理由。

それは、JavaScriptもHTML／CSSのような「1対1」の世界だと考えてしまうからです。

次のJavaScriptのコードを見てください。

```js
<script>
    document.getElementById("hero").innerHTML = "今日は天気がいいですね。";
</script> 
```

これはビギナー向けのJavaScript教材の最初の方によく出てくるコードで、次のように紹介されます。

---

「*getElementById()でHTMLのidを指定し、そこにinnerHTMLで文字を埋め込む.....*」

---

しかし当時の私がよく分からなかったのは、`getElementById()`や`innerHTML`といったものが、なぜそんな機能を持っているのかという点でした。

これまで、HTML／CSSのシンプルな「1対1」の世界にいたので、`getElementById()`などの「多機能・高機能なコード」についていけなかったのです。

そしてもう一つの疑問。

それは「*なぜこんなことをする必要があるのだろう？*」ということです。

「*わざわざこんな遠回りなことをしなくても、ストレートにHTMLやCSSを使えば済む話なのでは？*」と思ったことも数知れません。

あとになって分かったのは、JavaScriptには「JavaScriptの考え方」というものがあること。

HTML／CSSの勉強時とはアプローチの方法を変える必要があったのです。

### 理由②使う場面が想像できない
JavaScriptの教科書を開くと、様々な操作のコードが並んでいます。

例えば「文字を置き換える`replace()`」、「小数点以下を切り捨てる`floor()`」etc....

山ほどあるこれらのコードの必要性が、私には理解できませんでした。

こういったものをどこでどのように使うのか、その場面がまったく想像できなかったのです。

`replace()`や`floor()`などの使い方を私が理解できるようになったのは、実際にこれらを使わざるを得ない場面に遭遇したときです。

そうして知ったのは「実践を通して学んでいくことの重要性」です。

教科書の説明を目で追ったり、個別の機能をバラバラに学んだりしてみても、身になりにくい。

これは誰しもが経験のあることでしょう。

蛇足ですが、何かの勉強を始めるとき、私たちは往々にして網羅的でページ数の多い本を買ってしまう傾向があります。

その理由は下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/ideal-beginner-books">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-129.png)

</div>
<div class="r-card-text">
「これ一冊だけでOK！」という入門書が全然OKではない理由
</div>
</div>
</a>
</div>

<br/>

### 理由③専門用語が分からない
JavaScriptには専門用語が最初からたくさん出てきます。

• *メソッド*\
• *ファンクション*\
• *オブジェクト*\
• *配列*....

これらのプログラミング専門用語こそ、私がJavaScriptで挫折した最大の理由です。

本やネット記事、英語の解説などを読んでもまったく理解できず、ここで私はまったく前に進めなくなりました。

「HTML → CSS」と順調に勉強が進み、このまま成長していけると思っていた私の勢いを止めた最大の原因が、これらの専門用語でした。

振り返ってみると、「頭での理解」よりも「分からなくてもとりあえず手を動かしてコードを書いてみる」というアプローチをしていたら、停滞期をもっと早く抜け出せていたと思います。

*プログラミングの勉強をしていると必ず来る停滞期の乗り越え方は、下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/learning-curve">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-178.png)

</div>
<div class="r-card-text">
学習曲線とは？プログラミング初心者が必ずぶつかる停滞期の正体と乗り越え方
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=why-js-feels-difficult-not-one-on-one">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&from=why-js-feels-difficult-not-one-on-one)

## HTML／CSSだけでReactをはじめる方法
私はJavaScriptで一度挫折しました。

かなり長い間つまずいていました。

しかしそれがあったからこそ、いま「専門用語なしでプログラミング」という方法でプログラミングを教えています。

「災い転じて福となす」とも言いますが、自分がつまずいたからこそ、かつての自分と同じような問題にぶつかっている人のことが理解できるようになりました。

HTML／CSSの知識だけでReactやNext.jsを使える教材を多数出しているので、ぜひ使ってみてください。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">—5年以上読まれ続けている、HTMLとCSSの知識だけで始められるReact入門書決定版</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


React・TypeScript・Next.js学習の各ステップで何を学ぶか。

これを整理した2026年版学習ロードマップがあります。

JavaScript以降の全体像を今のうちに把握しておきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-js-feels-difficult-not-one-on-one">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-js-feels-difficult-not-one-on-one)

---

# Next.jsが使われているか・そしてバージョンを確認する方法

URL: https://monotein.com/blog/how-to-detect-nextjs
公開日: 2025.8.12
更新日: 2026.3.29
概要: WappalyzerでNext.jsの有無を調べられない場合の対策を紹介。ブラウザの開発者ツールを使って、Next.jsの有無を簡単に調べる方法を紹介。JavaScriptフレームワークからデプロイ先まで、気になる技術スタックを効率的にチェック。

## 使用されているテクノロジーの調べ方
ウェブ関係のテクノロジーを学んでいると、「このアプリは何で作られているのかな？」という興味が湧いてきます。

そこで便利なのが、Googleクロームの無料エクステンション、Wappalyzerです。

下記リンクから追加できます。

• [Wappalyzerのページ](https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja)

Wappalyzerを使うと、開発に使われたJavaScriptフレームワークやデプロイのサービスをはじめ、様々な利用テクノロジーがわかります。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-detect-nextjs">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-detect-nextjs)

## Next.jsだけに使える見つけ方
現在のフロントエンド開発で一番人気がNext.jsです。

Next.js使用の有無も、Wappalyzerでわかります。

しかし時折り、Wappalyzerが機能しないことがあります。

そのような時はブラウザの開発者ツールの「Console」に下記コマンドを打ち、「Enter」キーで実行しましょう。

```js
console.log(window?.next.version)
```

Next.jsが使われている場合は、次のようにバージョン情報が表示されます。

<div class="img-border">

![detect-nextjs.jpg](../../images/singleBlogPageImages/blogArticleImages/blog205/detect-nextjs.jpg)

</div>

次のようにすると、Next.js関係の情報（AppルータやTurbopack使用の有無）がわかります。

```js
console.log(window?.next)
```

Next.jsを使っているサイトが分かったところで、自分でNext.jsを始めてみたい方はこちらのガイドもご覧ください。

セットアップからRSC・Server Actionsまで体系的にまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-detect-nextjs">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-detect-nextjs)

---

# 私がTypeScriptやTailwindを使わない理由

URL: https://monotein.com/blog/reasons-for-not-using-ts-css-frameworks
公開日: 2025.8.11
概要: TypeScriptやTailwind CSSを使わないことで学習のハードルを下げ、ReactやNext.jsの核心に集中できる教材にするためです。ビギナーがスムーズに、見通しのいいコードで学べる教材を作っています。

## 難易度を低く抑える
私はビギナー向けReact・Next.js教材を作っています。

その中で時折り、次のような質問をされることがありました。

---

• 「なんでTailwindやBootstrapなどのCSSフレームワークを使っていないんですか？」

• 「なぜ、ほとんどの教材でTypeScriptではなくJavaScriptを使っているんですか？」

---

確かにTailwind CSSは非常に人気ですし、またCSSフレームワークを使った方が完成品のアプリの見た目は良くなるでしょう。

さらに、Reactを含めて近年のフロントエンド開発現場では、JavaScriptではなくTypeScriptの利用が一般的です。

こういう状況は私も認識しています。

しかしそれでもほとんどの教材で、CSSフレームワークやTypeScriptを使っていないのは

「教材の難易度を高めたくないから」

です。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/reasons-for-not-using-ts-css-frameworks">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/reasons-for-not-using-ts-css-frameworks)

## 「ひとつのことを学びたい」というニーズ
例えば「Next.jsを勉強したい」と思って私のNext.jsの教材を始めた人は、「まずはとにかくNext.jsをやりたい」と思っているはずです。

もしその教材に、Next.jsとともにTailwind CSSやTypeScriptも使われていたとします。

すると、一つの教材でそれらも学べるのは、確かにお得だといえます。

しかし同時に、ビギナーにとっての難易度も上がります。

---

特にCSS関係のコードというのは、CSSフレームワークの使用・不使用を問わず冗長になりがちで、コードの見通しを悪くします。

私はこれが、ビギナーがスムーズに進めるための大きな壁になると考えています。

私自身、他の人のチュートリアル教材などを見ていて、CSSなどのデザイン関係のコードを鬱陶（うっとう）しく感じることが多くありました。

スタイルやデザインといった「見た目」の部分よりも、「働き」「機能」といった部分を学びたかったからです。

私の教材では、学習者のCSS関係の負担をできるだけ軽減するため、次のような方針を取っています。

---

• CSSのコードはすべて一枚のファイルにまとめる

• スタイル適用のための`className`コードは最低限に抑える

---

この結果として、CSSのコードはメンテナンスしづらいものになっているのは事実です。

しかしビギナーの学習の面から見ると、余計なことを考えず、メインの核心的事項（ReactやNext.jsなど）の学習に集中できるようになっています。

さて、教材でTypeScriptを省いてあっても、実務ではほぼ必須です。

ビギナーがTypeScript × React開発を始める時につまずきやすいポイントやセットアップ、ジェネリクスやイベントの型まで、すべてをまとめたガイドがあるので、これを使ってTypeScriptの理解を深めてください▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/reasons-for-not-using-ts-css-frameworks">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/reasons-for-not-using-ts-css-frameworks)

---

# Zodとは？読み方やTypeScriptでの使い方を初心者向けに2分で解説

URL: https://monotein.com/blog/what-is-zod
公開日: 2025.8.10
更新日: 2026.6.16
概要: React × TypeScript開発でよく使われるZodを初心者向けに解説。フォームやAPIデータの検証ができるということだけがZod人気の理由ではなく、TypeScriptの一般化がその背景にあります。

## 人気のZod
近年のReact × TypeScript開発で非常によく目にするのが、Zodというパッケージです。

ビギナーの中には、このZodの機能や働きがよくわからないと感じている人がいるので、今回はそれを簡単に説明します。

初心者向けなので、具体的なZodのコードの話は出てきません。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-zod">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-zod)

## 「バリデーション」とは？
`<input>`タグで作る入力フォームには、次のような制約をつけられます。

```html
<input type="text" maxlength="20">
```

`maxlength`とは「最大文字数」の意味です。

なので、`maxlength="20"`で「この入力フォームには20文字以内で入力してください」という制約をつけられたことになります。

20文字以上の文字を打とうとすると、21文字目が入力できません。

20文字を超えるテキストをコピー＆ペーストすると、最初の20文字までしか入力されません。

他にも、次のような制約もつけられます。

```html
<input type="email" name="email">
```

`type="email"`により、メールアドレス以外のものが入力されると、「有効なメールアドレスを入力してください。」といったメッセージが表示されます。

---

このように、アプリがデータを受け入れる前には、そのデータの形や種類を検証するプロセスが必須です。

アプリが予期しないデータを取り込んでしまった場合、それが原因でアプリ内部で大きな問題が発生する可能性があるからです。

「入力されたデータが、アプリ側で求めているデータの形や種類に合致しているかを調べる検証作業」、これをバリデーション（Validation）と呼びます。

そして、このバリデーションのために使われるのがZodです。

## Zod人気の背景
正しくないデータが入力された場合、「20文字以内で入力してください」や「有効なメールアドレスを入力してください」といったメッセージを表示する必要があります。

これはJavaScriptを使っても可能ですが、Zodを使えば、より短く、より簡単なコードでそれを実装できます。

---

さて「データ」というのは、`<input>`を使ってユーザーからアプリに渡されるものだけではありません。

外部のAPIから取得したものも「データ」です。

それらもアプリに取り込む前に検証するのが安全です。

ここでもZodは使われます。

---

しかし、これだけの働きをするパッケージなら、Zod以前も複数ありました。

Zodが今このように広く使われている最大の理由、それはTypeScriptとの相性がいいからです。

近年のReact開発ではTypeScriptの導入がデフォルトになっています。

そしてTypeScriptでは、データの形と種類を明示した「型」を書く必要がありますが、Zodを使うことでその型が推論され、コード量をコンパクトにできるのです。

「コード量を抑えながらも、より効果的なデータの検証を行える」

これがTypeScriptとZodを一緒に使う大きなメリットになります。

つまりZod人気の背景には、Zodの機能だけでなく、TypeScriptの利用が増えていることもあるのです。

Zod以外にも、ジェネリクスやイベントの型など、React開発でTypeScriptを使う上では知っておきたいテーマは数多くあります。

まとめて確認したい方は、こちらのガイドが便利です▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-zod">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-zod)

---

# 「理解してから進む」が遠回りになる理由

URL: https://monotein.com/blog/repeating-learning-materials
公開日: 2025.8.9
概要: 「完璧に理解してから進む」勉強法が非効率な理由を解説。プログラミング初心者向けに、漆塗り勉強法で効率的に学び、挫折を防ぐ方法を紹介。全体像の把握や「点と点がつながる」楽しさを体感し、継続的な学習で理解を深めるコツを詳しく説明します。効果的な学習法を紹介。

## 一つひとつ理解して進む
私はプログラミングをビギナーに教えています。

すると、「教材の各単元を一つひとつ理解してからじゃないと進めない」という人を見かけます。

---

【 目の前のことをしっかり理解してから次に進む 】

---

勉強とは積み上げていくものなので、このアプローチは一見正解に見えます。

しかし頭の中で考えた正解らしいことが、現実で本当に機能するかは別の話です。

私の経験では、このようなアプローチは効率が悪いばかりか、挫折リスクも高めると考えています。

## うるし塗り勉強法
というのは、私を含む大半の人は、理解に時間がかかるからです。

さらに理解したこと・覚えたことも、すぐに忘れていってしまうからです。

ではどうすればいいのか。

簡単です。

繰り返すことです。

繰り返し繰り返し、何度も同じ部分に目を通すことで、ゆっくりと理解は深くなっていきます。

さらに何度も目にしたものは、記憶に残りやすくもなります。

---

これは「うるし塗り勉強法」とも呼ばれる方法です。

うるし塗りとは日本の伝統的な塗りの技術ですが、職人はうるしを食器に何度も重ね塗りをします。

「薄く塗っては乾かし、薄く塗っては乾かし・・・」と、薄いレイヤー（層）を何度も積み重ねていくことで、耐久性が高くなるのです。

勉強でいうと、「小さな知識」や「小さな理解」を何度も重ねてゆくことで、全体の理解につなげていきます。

小さな一歩を積み上げて大きくしていくのです。

<a href="/present?magnet=first-study-guide&from=repeating-learning-materials">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&from=repeating-learning-materials)

## 全体像の把握
教材をとにかく一度最後まで終えると、その教材のイメージが（漠然とですが）頭の中に描けます。

---

「あの項目は本の中盤あたりにあったな」

「終わりの方では、あんな話があったな」

---

といったことです。

これは「地図を手に入れた」ともいえます。

一回目を終えた時点では、まだ地図はぼんやりしていますが、何度も繰り返すことでハッキリとしてきて、それぞれの位置関係がよりクリアに見えてきます。

地図があれば、より効率的に進めていくことができるのは確かです。

さらに地図を得ることは、次に紹介する「つながり発見」を起こすための重要な下準備でもあります。

## 点と点がつながって線になる
勉強を続けていると、次のような体験を必ずします。

---

「あ、なるほど。あそことここは実はつながっているんだ！」

「教科書の10ページ目と200ページ目に書かれている一見まったく関係のないことが、実は同じ原理に由来している！」

---

このような「つながり」が見えた瞬間というのは、本当に楽しいものです。

また、ある種の不可思議さも感じます。

やや誇張していえば、地球、あるいは人生にあるものはすべて関係しているといったような、関係性に対する畏怖です。

それはさておき、この「つながり」の発見は勉強の醍醐味のひとつであることは間違いなく、これがさらに勉強継続のモチベーションを生みます。

（*この「つながり」については、下記記事にくわしく書いてあります▼）

<div class="rich-card-link">
<a  target="_blank" rel="noopener" href="/blog/connect-the-dot">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-201.png)

</div>
<div class="r-card-text">
プログラミング学習のモチベーションを維持する方法（点と線の話）
</div>
</div>
</a>
</div>

完璧主義的に一つひとつ理解してから次に進むのではなく、肩の力を抜いて「少しわかればいいか」という気持ちで教材を進めてみましょう。

できるだけ短時間で教材の一周目を終わらせ、何度も繰り返すことで、理解は確実に深まっていきます。

「繰り返すことで理解が深まる」という方法論の次に必要なのは、「何を繰り返すか」を知ることです。

HTML・CSSからReact・TypeScript・Next.jsまで、各ステップで学ぶべき内容と進め方を整理した学習ロードマップがあります。

まず全体像を把握してから繰り返し学習を始めると、効率がさらに上がります▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>



<a href="/present?magnet=first-study-guide&from=repeating-learning-materials">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&from=repeating-learning-materials)



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/repeating-learning-materials">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/repeating-learning-materials)

---

# プログラミング学習のモチベーションを維持する方法（点と線の話）

URL: https://monotein.com/blog/connect-the-dot
公開日: 2025.8.8
概要: 点と点がつながる瞬間が、勉強や人生を楽しくする鍵。知識のネットワークが頭の中で広がり、異なる分野や経験が結びつく喜びを、実際のエピソードと共に詳しく解説します。継続の力で『つながり』を見つけ、モチベーションを高める方法も紹介。

## 勉強の喜びを味わう方法

勉強の喜びを味わえる瞬間。

それは「つながり」が見えた時です。

「_あ、なるほど。あそことここは実はつながっているんだ！_」

「_教科書の10ページ目と200ページ目に書かれている一見まったく関係のないことが、実は同じ原理に由来している！_」

これは同一科目内でもそうですし、「数学」と「国語」、「農業」と「医療」といった異分野でも同じです。

---

• 知識のつながりが見え、頭の中にネットワークが構築されていくこと。

• 最初は独立して存在している「点」だったものが、「線」になっていくこと。

---

これは勉強をしている中で味わえる最も大きな醍醐味でしょう。

<a href="/present?magnet=first-study-guide&from=/blog/connect-the-dot">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/connect-the-dot)

## 見つけられるかは私たち次第

このような大きな楽しみをもたらしてくれる「つながり」は、何が生むのでしょうか。

実は「つながり」自体は、始めから存在しているのです。

最初からすでにそこにあるのです。

私たち「受け手側」が、「つながり」を見つけられるか、見つけられないか、ということだけが問題なのです。

では、見つけるためにはどうすればいいのか。

続けることです。

勉強を続けていれば、「つながり」が見つかって楽しくなっていくのです。

そして勉強へのモチベーションがさらに湧いてくる。

逆に言うと、継続できないと、この「点と点がつながって線になる快感」を味わえません。

モチベーションも下がっていきます。

## 「つながり」の根本条件（私の体験談）

ここまで、「勉強」というフィールドでの話をしてきました。

しかし「点と点がつながる喜び」は、日常生活にもたくさんあるのです。

以下、私の実体験を紹介します。

---

2年前、私はポーランド第二の都市クラクフを歩いていました。

すると、ある建物の壁に大きな絵が描かれているのが目に入ります。

私は絵に特段の興味は持っていません。

しかし印象的な絵だったので、スマホで写真を撮りました。

それで満足してしまったので、別にそれ以上調べることもせず、これだけで終わりです。

---

その一年後、私は同じ街の美術館で、ある絵を見ました。

とても印象的だったので、普段買うことはない画集もわざわざ買ってしまいました。

そして、その画家（Stanisław Wyspiańskiという人です）の他の絵も見ました。

するとその中に、一年前に見たあの絵があったのです。

つまり同じ画家の別の絵を、私は一年前にすでに見ていたのです。

私はその画家に一度出会っていた。

しかしその「つながり」には気がつけなかった。

一年という時間が経ち、私がまだ絵というものに興味を持っており、そして画集を買うということまでしたことで、点と点がつながったのです。

些細なきっかけですが、この瞬間には実に大きな嬉しさを感じました。

---

似たようなことが同じ時期に複数ありました。

そして私が思ったのは、「点と点がつながる条件」──より正確には「点と点をつなげるための根本条件」についてです。

先ほども書いたように、「つながり」はすでに存在しているのです。

今回の絵の話で言うと、「どちらの絵も同じ人によって描かれた」という事実は、私の意思とは関係なくすでに存在しており、あとはそれを私が見つけられるかどうかでした。

この「つながり」を見つけるための条件は「時間」です。

時間が流れたから、私の中で点が線になったのです。

つまり「つながり」を見つけ、この楽しさを感じるには、ある程度の時間の投資が必要なのです。

時の積み重ね、先に出た言葉で言えば「継続」です

---

勉強を続けられる人は、この「つながり」発見の喜びをコンスタントに味わっています。

だからもっと頑張れる。

一度でもこの楽しさを味わってしまうとクセになります。

新しい勉強を始めた時には、ある程度の期間、継続するようにしましょう。

小さな「つながり」が必ず見つかるはずです。

そして勉強をもっと続けられます。

「続けることで点と点がつながっていく」

この化学反応をより速く起こすためには、学習の全体像をあらかじめ把握しておくことが大切です。

HTML・CSSからReact・TypeScript・Next.jsまで、どの順番でどう進むかをまとめた2026年版ロードマップはこちらです▼

<div class="rich-card-link">
<a href="/blog/connect-the-dot">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

• <a href="/blog/information-overloaded">【情報過多】プログラミング初心者が挫折する原因</a>

<a href="/present?magnet=first-study-guide&from=/blog/connect-the-dot">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/connect-the-dot)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/connect-the-dot">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/connect-the-dot)

---

# プログラミング勉強の楽しさ（私の体験談）

URL: https://monotein.com/blog/joy-of-learning
公開日: 2025.8.7
概要: プログラミング学習の最大の喜びは、「昨日できなかったことが今日はできるようになっている」。日々、人生が前に進んでいるポジティブな感覚です。このゾーンに入ってしまうと、モチベーションが自然と湧いてきます。その一方、熱中してしまうことのリスクもあります。くわしく紹介します。

## ビギナーの頃
先日、昔の写真を見返していました。

私がプログラミング初心者だったころのもので、当時の心境を思い出しました。

## 人生が前に進んでいる
プログラミングに限らず、あらゆる種類の「勉強」の根源的な喜びは、次の一文に集約できるのではないでしょうか。

---

【昨日できなかったことが今日はできるようになっている】

---

これは「自分が確かに進歩している感覚」、「人生が確かに前進している実感」とも言えます。

そしてこの感覚に取り憑かれてしまうと、食事を取ることも、風呂に入ることも、映画を見ることも、友達に会うことも、すべてがどうでもいいことのように感じてしまいます。

特に私は、それ以前の長い間、人生がどうも停滞している感覚を覚えていたので、「熱中できるものがようやく見つかった」という喜びもあったのだと思います。

一度このような「ゾーン」に入ってしまえば、「脇目も振らずに」と自分に言い聞かせる必要もなく、前へ前へと進めてしまいます。

自分の内側から「やる気」がどんどんと湧いてくるからです。

## プログラミング勉強特有の危険性
当時私はヨーロッパに住んでいました。

春でした。

ヨーロッパの冬はとても陰鬱なので、それがようやく終わり、ついに輝かしい春を迎えたという喜びは非常に大きいのですが、私には外に出たい気持ちがまったくありませんでした。

パソコンの前に座って勉強していることの方に、はるかに大きな充実感と喜びを感じていたからです。

そのような時、プログラミング特有の危険も感じました。

---

プログラミングも、アプリケーションやソフトウェアを作るという「モノづくり」のひとつです。

そして普通モノを組み立てる時には、その材料を外に調達に行かないといけません。

家具ならホームセンター、料理ならスーパー、絵を描くなら画材屋といったように、「モノづくり」とは外の世界と密接に関わっているからです。

一方プログラミングでは、「材料」はすべてパソコンの中にあります。

家の外に材料を求めなくても、すべてを電子ネットワークの中から得て、その中で組み立てることができてしまいます。

「外に出る理由がない。快適で安全な自分の部屋にひきこもっていられる・・・」

こういった危険性も感じました。

---

近年は「自分で自分を満たせる」「精神的に自足できる」といったことがポジティブに語られます。

しかしこれも度が過ぎると、他者と外の世界とのつながりを弱めることになるので、注意することが大切です。

また、プログラミング学習はしっかりとロードマップに沿って進むことも大切です。

HTML・CSSからReact・TypeScript・Next.jsまで、何をどの順番で学べばいいかをまとめたガイドで学習の方向性を確認しておきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/joy-of-learning">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/joy-of-learning)

---

# 私がJavaScriptを選んだ理由【プログラミング言語選択】

URL: https://monotein.com/blog/why-i-chose-js
公開日: 2025.8.6
概要: ウェブサイト制作をきっかけにHTML・CSSを学び、JavaScriptとReactに出会った私の体験談。言語選択の多様な理由と、初心者向けの学びの第一歩を解説。言語選択のルートは人それぞれ。どれを選んでも間違いということはありません。

## 私の選択
私はReactやNext.jsといったJavaScript関連の技術を教えています。

他のプログラミング言語でも使えるものはありますが、一番馴染みがあるのはJavaScriptです。

JavaScriptをピックアップしたのは、ごく自然な流れでした。

## 「ウェブサイトを作りたい」とReact
10年以上前のことですが、ある理由で私は自分のウェブサイトを作る必要がありました。

当時の私はHTML・CSSの知識もありません。

そこでWebサイト構築サービスのWixを使って、初めてのウェブサイトを作ります。

操作はドラッグ＆ドロップとマウス操作だけで、専門知識はひとつも必要ありません。

しかし作り始めてみると、いろいろと細かなこだわりが出て来ます。

ところがWixでは機能が限られており、それらに対応できません。

そのため、より納得できるウェブサイトを作るためにHTML・CSSの学習を始めます。

この学習の延長線上には、当時はjQueryがありました。

なので私もjQueryに手をつけるのですが、この時すでにjQueryのデメリットや、「jQueryの次のテクノロジーは何か」という話も聞こえていました。

そこでさまざまに調べる中で、Reactを見つけます。

---

【ReactはJavaScriptをベースに作られており、使うにはJavaScriptの知識が必要】

・・・ということで私はJavaScriptをピックアップしました。

そうして学習を始めたJavaScriptですが、すぐに挫折します。

この辺りの詳しい話は、下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/overcoming-js-to-react-1">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-194.png)

</div>
<div class="r-card-text">
私がJavaScriptで挫折した話（+ 乗り越えた方法）
</div>
</div>
</a>
</div>

## 言語選択は人それぞれ
「ウェブサイトを作りたい → HTML・CSS → JavaScript」という流れで来た私には、どうしてもこれがもっとも自然に見えてしまいます。

ウェブサイトは誰もが使ったことのある身近なものですし、「自分のウェブサイトがある」というのは、今でもどこか本格的な感じがするからです。

しかし他のエンジニアやプログラマーの方に会うと、言語選択の理由は多様だと気付かされます。

---

「学校の科目で一番最初にJavaを教えられたから」

「自分の市場価値を高めたかったから、いくつも言語を学んできた」

「機械学習を試したかったからPython」

「職場の新規プロジェクトで必要だったからRubyを勉強した」

「調べた時に待遇のよい求人が多く出てきたから、GoとPythonを選んだ」

---

プログラミング言語の選択を「大きな決断」と捉え、身構えてしまっている初心者の方もいますが、実はそうではありません。

一つマスターできれば、他の言語も比較的簡単に習得できます。

まずは一つ選んで、実際に触ってみましょう。

「プログラミング」という言葉でなんとなく理解した気になっていたものが、実際何であるのか。

その実態が少しクリアに見えるようになるでしょう。


<a href="/present?magnet=first-study-guide&from=/blog/why-i-chose-js">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/why-i-chose-js)



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-i-chose-js">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-i-chose-js)

---

# 勉強するプログラミング言語の選び方

URL: https://monotein.com/blog/how-to-choose-programming-languages
公開日: 2025.8.5
概要: 勉強するプログラミング言語を選ぶ時、「作りたいアプリを決める」は難しい。より現実的で、より効果的なプログラミング言語の決め方があります。決断を早く、迷う時間を少なく、最短で目標を達成するための方法を紹介。

## どの言語がいいのかわからない
私はReactやNext.jsといったJavaScript関連のことを教えています。

そのため生徒の大半は、「プログラミング言語はJavaScriptでいく」と決めている人たちです。

しかし時折、「どのプログラミング言語を選べばいいのかわからない」という方がいます。

## 「作りたいもの」を決めるのは難しい
こういう状態にある人への一般的なアドバイス。

それは次のようなものです。

---

「作りたいもの（＝アプリやソフトなど）を決めよう。そしてそれに最適な言語を選ぼう」

---

私はこの「目標を先に決めよう。その後に手段を選ぼう」というアプローチには賛成です。

しかし同時に「作りたいものを決める」というのは、初心者にはかなりハードルが高いと思っています。

大半のビギナーは、プログラミングでどのようなものが作れるかのイメージすら持てていないからです。

<a href="/present?magnet=first-study-guide&from=/blog//how-to-choose-programming-languages">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/how-to-choose-programming-languages)

## 現実的な考え方
どの言語を選べばいいのかわからない、という方には、「現実的な目標」を見つけるようにアドバイスしています。

「現実的な目標」とは、就職や転職、キャリアアップ、給与といったことです。

これらは「応募要件：Java」「単価〇〇円」といったように、クリアすべきハードルがはっきりしています。

「どれだけ頑張ればいいか」ということが、すでに決まっているのです。

「やるか、やらないか」という状況に導いてくれます。

---

こういうアプローチを、あまりに現実的・実践的でつまらないと感じる方もいます。

私も「あんまり夢がないな」といつも思います。

これはいわば、「月の給与を〇〇円以上にするにはこの仕事に就けばよくて、そしてその応募要件で求められているのはこの言語だ」と考えることだからです。

それよりも、「『こういうアプリを作りたい！』という理想を掲げ、それに向かって邁進している」といったテンプレート的な成功ストーリーの方が美しく見えてしまいます。

しかし「自分で決める」というのは、実は非常に疲れることです。

そして多くの人は「迷う」という状況に陥ります。

「迷う」とは「未決定」の状態。

未決定の、白黒はっきりしないグレーの中間部分にいることは、精神的に非常に疲れます。

## 言語選択を間違えた
目標は後で変更してもいいのです。

まずはとにかく、「仮の決定」でもいいので、現実的な目標を選び、そこで求められている言語を確認してみましょう。

多くのプログラミング言語はできることが共通しており、さらに一つの言語を学ぶと、他の言語も比較的簡単に習得できます。

私はこれまで「言語選択を間違えた」と後悔している人に出会ったことはありません。

「間違えた」と後悔するよりも、「じゃあ新しく学べばいいか。すぐわかるだろう」と考える人がほとんどだからです。

もしJavaScriptとReactを選んだなら、次はどの順番で何を学ぶかを確認してみましょう。

HTML・CSSからReact・TypeScript・Next.jsまで、2026年版の学習ロードマップで最短ルートが分かります▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>



<a href="/present?magnet=first-study-guide&from=/blog/how-to-choose-programming-languages">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/how-to-choose-programming-languages)



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-choose-programming-languages">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-choose-programming-languages)

---

# 勉強好きの日本人とそのリスク

URL: https://monotein.com/blog/japanese-people-love-studying
公開日: 2025.8.4
概要: 日本人はなぜ勉強が大好きなのか。「勉強が好き」ということの危険性とリスクも紹介。ヨーロッパに住んでいた著者が見た、日本人とヨーロッパ人のカフェに対する考え方の違いを通して日本人の勉強好きを分析。

## カフェの使い方
私は以前ヨーロッパに住んでおり、今も毎年行きます。

そして日本に帰国するたびに思うのが、カフェの「使い方」の違いです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/japanese-people-love-studying">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/japanese-people-love-studying)

## 年末も勉強する人たち
日本の都市部のカフェでは、勉強や仕事をしている人が必ずいます。

スターバックスなどでは、そういう人で半数以上の席が占められている光景も普通です。

私もカフェで仕事をすることがあるので、「カフェは勉強や仕事をする場なのか？」という議論には立ち入りません。

しかし「日本人は本当に勉強が好きだなあ」と感じることはよくあります。

特にそれを思ったのは、去年の年末（12月31日）にカフェに行った時です。

年の瀬にも関わらず、店内はぎっしりと勉強（or 仕事）をしている人で埋め尽くされていました。

（*これよりも前のこと、私は12月31日にポーランドにおり、首都中心部にあるチェーンのカフェに行ったことがあるのですが、店内は空っぽでした。）

---

同じことは週末、特に日曜日にもいえます。

日本では日曜日でもカフェで勉強をしている人が大勢います。

むしろ平日より多いかもしれません。

## ヨーロッパのカフェ
それではヨーロッパでは、カフェで勉強・仕事をしている人はいないのでしょうか。

もちろんいます。

しかし日本のように、それが客の過半数を占めているような状況は稀（まれ）、より正確には、ほぼ見かけません。

大部分の人はカフェをカフェとして、つまり人に会ったりコーヒーを楽しんだりする場所として使っています。

特に週末は、カフェでパソコンを開いている人はほぼ見かけません。

私はヨーロッパに住んでいた頃、土日にカフェで仕事をしたことがありますが、妙な居心地の悪さを覚えました。

そんなことをしているのは、店内で私だけだったからです。

---

このような違いが生まれる理由はいくつもあるのでしょう。

例えば住宅環境の違い。

日本の都市部では特に家が狭いので、「勉強部屋」としてカフェが選ばれること。

例えば労働環境の違い。

プライベートを犠牲にする働き方が受け入れられていること。

例えば歴史的な認識の違い。

「カフェ」は外来の文化なので、日本人がヨーロッパ人とは異なる独自の認識を持っている可能性。

例えば宗教的な違い。

「週末は安息日で、家族（あるいは友達）と過ごす」という価値観の不在。

etc.....

## 「勉強はよいこと」という考え方の危険性
このような理由はどれもある程度正しいのでしょう。

しかし私は根本的な理由は、「日本人は勉強が好きだから」と思っています。

あるいは、「『勉強はなによりも良いこと』という価値観が社会に強固にあり、多くの人がそれに従っている」。

この結果、「勉強の目的化」「勉強のための勉強」「勉強しているつもり」「頑張っているフリ」といったことが起きてくるのだと思います。

私も勉強が好きです。

しかしそれ故、勉強には常に自己満足の「お勉強」へと堕するリスクがあるのも感じます。

つまり.....

---

• 自分一人で完結する

• 自分の世界にこもっていられる

• 誰かに傷つけられることがない

• 「やってるフリ」ができる、「進んでる感」を味わえる

---

このような状態に陥るのを防ぐには、達成したい目標を明確にし、「勉強はそこに至るための手段に過ぎない」と意識するようにしましょう。

はっきりとした締め切りを設けることも重要です。

時間が経つと、過去のことは忘れていきます。

目標やゴールに対する熱い気持ちも徐々に冷めていき、目の前のこと（＝勉強）だけに集中力を奪われていくのです。

最初に掲げた目標を日々見返したり、書き出したりして、しっかりと思い出すようにしましょう。

「勉強は手段で、ゴールは別にある」と意識できたら、次はゴールへ到達するための手順を理解しましょう。

HTML・CSSからReact・TypeScript・Next.jsまで、何をどの順番で学べばいいのかを整理したロードマップがあります。

学習を始める前に目を通しておくことで、迷わず前に進めます▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/japanese-people-love-studying">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/japanese-people-love-studying)

---

# アプリの機能はたった4つだけ

URL: https://monotein.com/blog/crud
公開日: 2025.8.3
概要: アプリの機能はたった4つだけ。日常で使うスマホアプリの操作を『作成・読み取り・修正・削除』（CRUD）で解説。Googleマップのレビューを例に、初心者にもわかりやすくアプリの仕組みを紐解きます。ウェブ開発におけるHTTPメソッドとの関係や、アプリ設計のヒントも紹介。プログラミング初心者必読。

## 4つことしかしないアプリ
私たちは毎日なんらかのアプリを使っています。

身近なのはスマホ内のアプリです。

メッセージアプリ、スケジュールアプリ、買い物アプリ、メモアプリ、天気アプリなど、さまざまな機能を持ったものがあります。

しかし実はそのどれも、根本的には次の4つの操作から成り立っているのです。

---

•（データを）作成する

•（データを）読み取る

•（データを）修正する

•（データを）削除する

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/crud">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/crud)

## 本当に4つか確認
たとえばあなたが、あるカフェの口コミを調べたいとします。

Googleマップではお店のレビューも確認できるので、Googleマップを開きましょう。

カフェを選んでレビュー欄をタップすると、口コミが表示されます。

まずこれが「読み取る」という操作です。

アプリがデータベースからデータを読み取って、画面に表示しているのです。

---

さて、好意的な口コミが多かったので、あなたも実際にカフェに行ってみます。

噂通りの心地よいカフェです。

なので、あなたもその感想をレビューとして投稿します。

これは、レビューというデータを「作成した」ということです。

---

しかし投稿後に読み返してみると、変換ミスの漢字がありました。

なので「編集ボタン」を押し、誤字を直します。

ここでしていることは、データの「修正」です。

そしてもし、このように投稿したレビューを消したくなったら、それは「削除」という操作を実行することになります。

---

このようにアプリが実行している操作は、実は「読み取り」「作成」「修正」「削除」の4つを組み合わせたものなのです。

## CRUDとHTTPメソッド
この4つの操作の総称を、頭文字を取ってCRUDと呼びます。

|  操作  |    CRUD    |
| :--: | :--------: |
| 読み取り |  **R**ead  |
|  作成  | **C**reate |
|  修正  | **U**pdate |
|  削除  | **D**elete |

この「CRUD」は、コンピューターやソフトウェア開発全般で広く使われる言葉です

ウェブアプリ開発の分野においては、CRUDの代わりに「HTTPメソッド」という総称もよく耳にします。

CRUDとHTTPメソッドの対応関係は次のようになっています。

|   HTTPメソッド | 操作| CRUD
| :------:| :------: | :------:|
|GET|読み取り|**R**ead|
|POST|作成|**C**reate|
|PUT|修正|**U**pdate|
|DELETE|削除|**D**elete|

もちろん、アプリにはCRUDに分類できない操作もあります。

たとえばAIやゲームアプリが実行する予測や推論、学習機能、物理演算等です。

しかし大半のアプリは、上記4つの操作の組み合わせで成り立っています。

ウェブ開発初心者の方は、自分が普段使っているアプリが、どの操作をどのように組み合わせてあるのかを考えてみましょう。

将来自分でアプリを設計するときのいい練習になります。

CRUDの概念が分かったら、次は実際のアプリ開発でこれらをどう実装するのかという点を理解しましょう。

現在のアプリ開発でもっとも使われているNext.jsを使って解説するガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/crud">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/crud)

---

# 私がJavaScriptで挫折した話（+ 乗り越えた方法）

URL: https://monotein.com/blog/overcoming-js-to-react-1
公開日: 2025.8.1
更新日: 2026.6.20
概要: JavaScriptで挫折した筆者が、初心者がつまずく理由を解説。HTML・CSSとの違いや理解しづらい専門用語の壁、Reactを学ぶために必要なJavaScriptの重要性を、自身の失敗談を通して紹介

## JavaScriptで挫折する人は多い

「_HTML・CSSの学習は、初心者でも大きな問題なく進められる人が多い_」

これが私の印象です。

しかしその次のJavaScriptで、壁にぶつかる人がたくさんいます。

特にHTML・CSSをスムーズに進め、「意外に簡単だ」と思った人こそ、この挫折感は大きくなるようです。

実は私もその一人で、半年以上JavaScriptで挫折していました。

今回はその挫折談と、乗り越えたきっかけの話をします。

<a href="/present?magnet=first-study-guide&from=/blog/overcoming-js-to-react-1">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/overcoming-js-to-react-1)

## JavaScript挫折の理由①

HTML・CSSは、「コード」とその「結果（ブラウザの表示）」はいわば一対一の関係です。

自分の書いたコードがどのように動くかを予想しやすい。

\*この点について詳しくは▼

<div class="rich-card-link">
<a href="/blog/why-js-feels-difficult-not-one-on-one">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-206.png)

</div>
<div class="r-card-text">
JavaScriptを難しく感じる理由（HTML・CSSは簡単だったのに...）
</div>
</div>
</a>
</div>

<br/>

一方、JavaScriptは本格的なプログラミング言語なので、コードひとつが複雑な働きをすることがあります。

つまり、HTML・CSSの学習時とはアプローチ方法やマインドセットを変える必要があるのです。

これが私にはわかっていませんでした。

しかし実はマインドセットを変えても、まだ挫折していました。

より大きな壁が別にあったからです。

「専門用語」です。

## JavaScript挫折の理由②

JavaScriptでは、「オブジェクト」「メソッド」「プロパティ」「引数」「返り値」といったプログラミングの専門用語が多く出てきます。

これらの意味が私にはつかめなかったのです。

言葉がわからないと、教材の文章を読んでも理解できません。

日本語だけでなく英語の解説などに目を通しても理解できず、ここで半年以上、足踏み状態になっていました。

## なぜJavaScript？

ここまで、「なぜ私がJavaScriptを学習する必要があったのか？」という点には触れずにいました。

「React」というフレームワークをマスターしたかったからです。

このReactはJavaScriptをベースに作ってあります。

そのため学習の流れは、「JavaScript → React」となるのが自然です。

当時も今も、「ReactはJavaScriptをマスターしてから使うべき」と言われています。

しかし当時の私は「JavaScriptができないため、React学習にも進めない」という状態だったのです。

JavaScriptで挫折していた時間は半年以上続きました。

## 小さな成功体験

当時、私はポーランドのワルシャワに住んでいました。

ある日の夕方、カフェの2階に来て、することはいつもと同じです。

ぼんやりとネット上のJavaScript教材を漁る。

いくら目を通しても、よく意味がわからないブログ記事やオンライン動画です。

しかしその日は1つの動画が目に留まります。

Reactを使って簡単な天気アプリを作る動画でした。

作った人はイギリスの男性。

その人は教材を専門に作っているという感じではなく、「時間があるから作った」といったような、かなりラフなスタイルの動画でした。

私は他にすることがなかったので、その動画に合わせてReactのコードを書き始めます。

JavaScriptの基礎知識もない当時の私には、理解できないところもたくさんありました。

しかしとにかく動画の指示に従ってコードを書いていると、Reactアプリがひとつ完成してしまいました。

---

「JavaScriptもわかっていない自分にも、Reactアプリが作れてしまった！」

---

当時の私にとってこれは衝撃的でした。

しかしこの小さな成功体験のおかげで、私は失っていたReact・JavaScript学習へのやる気を取り戻します。

## ゴールに到達する道は一つではない

この時の経験から学んだのは次のことです。

---

︎• 「JavaScriptをマスターしてからReactに進むべき」という誰もが言う学習ルートに従う必要はない

︎• HTML・CSSの知識だけでもReactへの入門は可能

︎• 教材と一緒に進めていくことができるハンズオン形式（作りながら学ぶスタイル）の楽しさ

︎• たったひとつの小さな成功体験がもたらしてくれる「やる気」と「モチベーション」の重要性

---

これらの「気づき」をベースに作ったものが、『はじめてつくるReactアプリ』という教材です▼

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">【2026年1月第3版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

この本は多くの人に受け入れてもらえ、発売から5年以上経った今でも「React入門に成功しました！」という声をいただきます。

しかし私が今回強調したいのは、「ゴール到達への道は複数ある」ということ。

「JavaScriptをマスターしてからReactに進むべき」という王道・定番となっている学習ルートを必ずしも踏む必要はないのです。

先にReactを見て、そこから戻るようにしてJavaScriptへの理解を深めていく、という学習ルートも可能、むしろ「より効果的」だと私は考えています。

Reactを使う上で「JavaScript全範囲の理解」は必要ないからです。

これはJavaScript・React学習だけに限りません。

高校生が志望する大学のオープンキャンパスに行くように、自分が最終的に達成したいゴール地点を先に見て、そこから今自分がいる地点との距離を測る、というアプローチはとても効果的です。

「目指しているゴール地点が実はそこまで遠くない・高くない」ということに気づけます。

---

「JavaScriptをマスターしてからReactに進む必要はない」という可能性に気付いたあと、では実際にどういう順番でReactを何を学べばいいのでしょうか？

その点を整理したロードマップがあります。

HTML・CSSからNext.jsまでの2026年版の学習ステップを確認しておきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=/blog/overcoming-js-to-react-1">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/overcoming-js-to-react-1)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/overcoming-js-to-react-1">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/overcoming-js-to-react-1)

---

# IT資格の〇〇〇を取得した方がいいですか？

URL: https://monotein.com/blog/it-qualifications
公開日: 2025.7.31
概要: IT資格は安心依存？プログラミング初心者向けに、資格取得のメリットとデメリットを解説。安心を求める勉強の罠とは、真のゴールに近づく方法、本当に身につけるべき力を解説。

## 資格を取るべきか
「IT資格の〇〇〇とか▲▲▲とかを取得した方がいいですか？」

私はビギナーにプログラミングを教えているので、生徒からこのような質問を受けることがあります。

かなりの確率で私の答えは「No」です。

## 資格を取るべき人
資格の中には「必ず取らなければいけないもの」があります。

たとえば医師や教員、会計士、建築士関係の資格（免許）です。

これらの職業には資格が必須だからです。

ここまでいかなくても、「ある役職に就くためには〇〇という資格が必要」「TOEICのスコア〇〇点以上が必要」というケースもあります。

このような場合も資格はマストなので、取得しないといけません。

しかし大部分の人はこういう状況下にありません。

それでも資格を求める人が多くいます。

安心したいからです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/it-qualifications">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/it-qualifications)

## 安心を買う
たとえば、日本語能力試験（JLPT）という日本語の力をはかる資格試験があります。

受験者は主に、日本語を勉強している外国人の方です。

この試験を私たち日本人が受けようと思うでしょうか。

思いません。

自分が日本語を使えることが明らかで、それをわざわざ誰かに証明してもらう必要もなければ、こちらから他の人に向かって証明する必要もないからです。

日本語を使える「自信」が私たちにはあるので、受ける必要性を感じないのです。

---

英語の資格として、TOEICや英検が有名です。

学生時代、私はこれらの試験を受けたことがあります。

しかし今は受けようと思いません。

自分が英語を使えるということが明らかで、それをわざわざ他人に証明してもらう必要性を感じないからです。

一方で、もし私が英語を使えるかどうかに不安を覚えていたら、これらの試験を受けたくなるでしょう。

高いスコアや上位の級を取得したら、自分の能力が他人にも認められたと思えて安心できるからです。

しかし、このようにして得た「安心」は、自分の内から出てきた「安心（＝自信）」よりもはるかに脆（もろ）いものです。

## 勉強に逃げる
本来、資格を取得するのは、なんらかの達成したい目的にその資格が必要だからです。

資格を取ることは「全体の一部」「ゴールに到達するために超えるべき一つのステップ」に過ぎないのです。

しかしいつの間にか、この資格取得自体が目的になってしまう・・・・・より具体的にいえば「勉強が目的化」してしまう人が少なくありません。

<a target="_blank" rel="noopener" href="/blog/purposeless-studying-is-meaningless">こちらの記事</a>でも書きましたが、「勉強」というのはある意味ラクなのです。

---

• 自分一人で完結する

• 自分の世界にこもっていられる

• 誰かに傷つけられることがない

• 「やってるフリ」ができる、「進んでる感」を味わえる

---

このような状態に陥るのを防ぐには、資格にフォーカスし過ぎないことが大切です。

プログラミング関係であれば、知識よりも実践の方が重要です。

【 できる　＞　知っている 】

そして往々にして、資格取得を目指すよりも、「その資格を使って実現したいゴール（＝真のゴール）」に集中する方がはるかに近道、ということも多いのが実情です。

最終的なゴールを達成した方が、資格で「一時的な安心」を得るよりもはるかにしっかりとした、長続きする「安心」、つまり「自信」を得られます。

資格勉強を始める前に、「自分がその資格に何を求めているのか？」ということをよく考えるようにしましょう。

さて、資格であれスキルであれ、効率よく身につけるには最初に全体像を把握する必要があります。

2026年版のフロントエンド学習ロードマップで、React・TypeScript学習の最短ルートを確認してみましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>




<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/it-qualifications">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/it-qualifications)

---

# なぜ写経でプログラミング中毒になるのか？

URL: https://monotein.com/blog/syakyo-transcribing-code
公開日: 2025.7.30
更新日: 2026.4.7
概要: プログラミング学習の写経は、実は勉強をラクにしてくれるものです。その理由は、間欠強化がもたらす中毒性。初心者にこそ写経が効果的な理由と、学習が楽しくなる心理的仕組みを解説

## 写経なんて馬鹿げている
プログラミングの学習方法で、「写経」という言葉を耳にした人は多いでしょう。

コードを自分で書き写すことです。

私はこの「写経」を、まったく意味がないと思っていました。

むしろ「馬鹿げている」とすら思っていました。

私が誤解をしていたからです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/syakyo-transcribing-code">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/syakyo-transcribing-code)


## 「写経」に対する誤解
「写経」とは見本を書き写すことです。

暗いお寺の中で、お坊さんが経典を筆で書き写しているアレです。

私はこういうイメージや、「書き写す」という語感から、ペンを使ってコードを紙に書くことを「写経」だと思っていたのです。

コンピュータ上で動くものを紙に書くなんて単なる時間の無駄ですし、自分がプログラミングを勉強している時に「写経」なんてしたことがないと思っていました。

しかし実際のところ、プログラミングでいう「写経」とは、「見本のコードを自分で打ってみること」を指します。

「ペンで紙にコードを書く」ではなかったのです。

---

• 見本に沿って、コードを自分で打ちながら教材を進めていくこと

---

これは私がプログラミング学習時、いつもしていたことでした。

つまり私も実は「写経」をしていたのです。

そして今も、新しいコードを学ぶときはしているのでした。

## 中毒がモチベーション
「写経はやるべき」というのが私の立場です。

特に学習を始めたばかりのビギナーには、写経の効果は絶大だと思っています。

理由は単純に「楽しい」からです。中毒になってしまうからです。

見本を見ながらであっても、自分でコードを書いてみると、意図通りに動かないことがあります。

ケアレスミスや誤字脱字があるからです。

その一方で、書き写したコードがすぐに教材の説明通り動くことがあります。

正しく書き写すことができたからです。

---

このように、「毎回成功するのではなく、不規則な間隔で成功する」ということには中毒性があります。

「間欠強化」とも呼ばれますが、ギャンブルやゲームなどでも使われている危険な仕組みです。

しかし学習においては、中毒になるのは必ずしも悪ではありません。

むしろ「勉強が楽しい」というのは、学習を継続させる最大のモチベーションになります。

「自分で書いたコードの実行の結果がすぐにわかる」、つまり「自分の行動に対するフィードバック（＝成功 or 失敗）がすぐにある」。

これは写経をしているからこそ味わえる楽しさで、コードを読んでいるだけでは体験できません。

写経のメリットにはこれ以外にも、「コードに慣れることができる」「記憶に残りやすい」「エラー対応能力がつく」「コードの基本形を覚えられる」といったことも挙げられます。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/syakyo-transcribing-code">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/syakyo-transcribing-code)

## 楽しい時間を過ごすために
私はビギナー向けのプログラミング教材を作っています。

教材の冒頭では毎回、「コードを自分で書きながら進めてください」ということをお願いしています。

これが実は「写経のお願い」であったことは、ずいぶん後になって知りました。

写経を、「時間がかかる」「面倒くさい」と感じる人もいると思います。

しかし特に初心者にメリットが多い学習方法が写経です。

---

人生の時間は有限です。

楽しい時間が多い方がいいのは、言うまでもありません。

プログラミング学習の時間を「苦」ではなく「楽（ラク・たのしい）」と感じながら過ごすため、写経をしましょう。

写経という方法で楽しく学習を進めながら、同時に「何を・どの順番で」学ぶかという全体像も持っておくことが重要です。

HTML・CSSから始まってReact・TypeScript・Next.jsまでたどり着くための、2026年版の学習ロードマップはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/syakyo-transcribing-code">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/syakyo-transcribing-code)

---

# プログラミング勉強が進まないのは教材のせいだ

URL: https://monotein.com/blog/switching-learning-materials
公開日: 2025.7.29
概要: 勉強が進まない原因は教材選びにあるかもしれません。自分に合う教材選びと、集中力を保つコツを解説。教材を何度も変えることが学習の満足度を下げる理由と、その対策方法を紹介。

## 勉強が進まないのは教材が原因

【勉強が進まないのは教材が原因】

これはかなりの部分、正しいと思います。

自分で本を書くようになってからよりわかりましたが、本には著者の人間性が想像以上に表れています。

著者のものの見方、考え方、感じ方、温度感、いわば「性格」です。

そして人の性格に自分と合うもの・合わないものがあるように、本にもそれがあります。

これは小説やエッセーだけでなく、ニュートラルであると一般的には考えられている学習教材でも同じです。

そのため、ビギナーが勉強をしているとき、「解説が頭に入ってこない」「うまくいかない」と感じたら、教材を変えるのが一番手っ取り早く、効果的な方法といえます。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/switching-learning-materials">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/switching-learning-materials)

## 勉強が進まないのは教材を変えるのが原因
その一方で、教材を変えてばかりの人もいます。

学習とは、知らないことを知ろうとする・理解しようとすることです。

当然、脳に負荷がかかります。

しかしこの負荷に耐えきれず、「スッと頭に入ってこないのは教材のせいだ」と考え、教材を取っ替え引っ替えしてしまうのです。

こういう人は、学習の進捗が遅くなるだけでなく、学習の満足度も低いように思います。

「学習の満足度」とは主観的な感じ方のことです。

実際には勉強がしっかりと前に進んでおり、理解していることも増えているのに、そうは感じられない状態。

なぜでしょうか。

## 勉強が進んでないと感じる原因（+ 対策方法）
私は個人的に、これはテレビのチャンネルをコロコロと何度も変える「ザッピング」と同じだと思っています。

YouTube動画を複数のタブで開き、異なる動画を次々と切り替えて視聴するのもここに含まれます。

これは「より良いものを見つけたい」「時間を無駄にしたくない」といった気持ちからです。

とはいえ、これで最終的に満足感を得られた人は多くないと思います。

注意や思考を切り替えることを心理学では「スイッチング」と呼びますが、切り替えるたびに集中力が妨害されるからです。

楽しむことにも一定の集中が必要になります。

勉強に集中力が必要なのも、いうまでもありません。

そしてこの「集中」こそ「学習の満足度」に関わってくるのです。

いくら勉強が進んでいても、本人がそのように思えないことは、自信や自己肯定感にマイナスに影響してしまいます。

これを防ぐには、「自分で『これだ』と決めた教材を、脇目を振らずにとにかくやり切ること」が重要です。

そして教材をやり切るためには、最初に全体像を把握しておくことも大切です。

自分が今どのステップにいて、次に何を学ぶのかが分かっていれば、迷わず一つの教材に集中できるからです。

HTML・CSSからReact・TypeScript・Next.jsまでの学習ステップをまとめたロードマップはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/switching-learning-materials">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/switching-learning-materials)

---

# プログラミング学習で挫折しないための方法

URL: https://monotein.com/blog/avoiding-terminologies
公開日: 2025.7.28
概要: 専門用語が学習の壁になる理由と、初心者向けにわかりやすい言葉で教える重要性を解説。プログラミング初心者の挫折を防ぐための実践的なアプローチを紹介

## 専門用語は私たちの心を閉ざす
もう長いことカタカナ語の氾濫が言われています。

---

• パーパス\
• ダイバーシティ\
• エシカル\
• コンセンサス\
• プライオリティ\
etc

---

馴染みのない言葉に出くわしたとき、私たちは無意識のうちに心の扉を少しだけ閉ざします。

スッと理解ができないからです\
違和感を覚えるからです\
認知に負荷がかかるからです

そのため、「よりよいコミュニケーション」という話には、必ず「共通言語」という言葉も出てきます。

「共通言語」とは、お互いがすでに知っていて、わざわざ脳みそを動かさなくても分かる言葉のこと。

それを使うことで、ストレスのない、スムーズかつ快適なコミュニケーションができるのです。

同じことは本にもいえます。

私たちが経済や医学や法律の専門書を読んでも、中身が頭に入ってきません。

説明されていることがわかる・わからない以前に、そこで使われている「専門用語」、つまり「言葉」に対して無意識のうちに拒絶反応が起きているからです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/avoiding-terminologies">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/avoiding-terminologies)

## 使わなくてもいい
私はこれまで、プログラミングのビギナー向け入門書を複数執筆してきました。

最初の一冊目を書く時から毎回注意を払っているのは、使う言葉です。

プログラミングで必ず出てくる「オブジェクト」「配列」「関数」などの言葉を、ビギナーはまだ知りません。

そのため一般的なプログラミング入門書では、図や例えを引きながらこれら専門用語の説明をします。

しかしそもそも、それらを使わずに進められたら、よりわかりやすいのは確かです。

ビギナーは、入門書を終えて学習を進めていく中で、そういった専門用語を自然と覚えていきます。

## 言葉で挫折した経験
私はJavaScriptの勉強で挫折したことがあります。

その最大の理由こそ「言葉」でした。

超初心者向けとされる入門書のどれを開いても、「オブジェクト」「引数」「返り値」といった言葉が出ていました。

それらが理解できなかったのです。

本を変えても、原語の英語の解説を読んでも、いまいちよくわかりません。

ここで私は一度諦めました。

---

私がそういった言葉を理解できるようになったのは、「ビギナー」というステージを抜け出てからのことでした。

これらの用語が指している「働き」や「使い方」を体験して以降です。

## 言葉の意味をわかろうとする危険
ビギナーは文章の一文一句にこだわります。

わからない言葉があると、その意味をひとつひとつ理解してから次に進みたい、あるいは「進むべきだ」と考えています。

生真面目なのです。

新しいことを学ぼうとしているのだから、これは当然の態度です。

しかしこのリスクは、意味をつかむのが難しい単語に出くわすと、そこから先に進めなくなること。

かつての私のようにです。

このような失敗を避けるため、学習の初期では「言葉の意味」よりも「使い方」を体験する方が安全です。

たとえば、「かつて一度は目にしたことがある感覚」を「デジャビュ」といいますが、私たちの多くは、まず先に「これ、前も見たことがある気がする……」という体験を何度かした後に、それが「デジャビュ」と呼ばれることを知ったと思います。

先に「デジャビュ」という言葉と意味を教えられても、すぐに納得できる人は多くないでしょう。

専門用語も同じです。

「言葉」という抽象概念からではなく、「使い方」「実際の働き」「機能」といった具象を先に体験した方がわかりやすい。

「体験が先にあり、それを名付ける言葉が後に来る」というのが、物事の流れから言っても最も自然だからです。

そのため私は、ビギナー向け教材では専門用語を使わないようにしています。

専門用語を避けて「使い方から学ぶ」というアプローチが分かったところで、次は「何をどの順番で学ぶか」という全体像を理解しましょう。

HTML・CSSから始まってReact・TypeScript・Next.jsまでたどり着くための、専門用語なしで進められる2026年版ロードマップはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/avoiding-terminologies">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/avoiding-terminologies)

---

# 失敗しないプログラミング教材の選び方

URL: https://monotein.com/blog/hand-on-learning-materials
公開日: 2025.7.27
概要: 初心者が挫折せずにプログラミングを習得するには「ハンズオン形式」が鍵。小さな成功体験を積む方法を解説。知識より実践が重要な理由と、学習初期に必要な心構えを紹介。

## 「ハンズオン」という言葉
ハンズオンとは「実地で体験する」、教材で言えば「作りながら学ぶ」という意味です。

このハンズオン形式で、これまで私はプログラミング教材を作ってきました。

そのため「ハンズオン」という言葉を私はよく使います。

しかし、この言葉に馴染みを覚えない人も多いようです。

実は私自身、一番最初の教材を作っていたときは「ハンズオン」という言葉自体を知りませんでした。

読者の方が書いてくれたAmazonのレビューを見て、初めてこの言葉とその意味を知ったくらいです。

しかし今では、「ハンズオン」は私の教材制作の中心コンセプトになっています。

プログラミング教材は「手を動かしながら学ぶ」という点に価値がある、と考えていることが理由のひとつ。

そして「初心者にこそ、ハンズオン形式の教材が重要」と考えているからです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/hand-on-learning-materials">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/hand-on-learning-materials)

## 「知っている」と「できる」
プログラミングというのは、アプリケーションやソフトウェアなどを作ることが目的です。

「モノづくり」です。

ここでは当然、「知っている」よりも「できる」ことが価値を持ちます。

同じことは英語にも言えます。

英語は他の人とコミュニケーションを取るためのものです。

いくら文法をすべて正確に知っていたとしても、それを（素早く）使えなければ意味がありません。

例えば「Morning, how was your weekend?（おはよう、週末は何してた？）」という友達からの簡単な質問に、5分も10分もかかって頭の中で文章を作って応答していたのでは、たとえそれが文法的に完璧であっても、誰もその人が「英語を使える」とは思わないでしょう。

## 知らなくても「できる」こと
その一方で、「知らないけどできる／使える」ということもたくさんあります。

例えば助詞と助動詞の違いを知らなくても、私たちは日本語を話せます。

スマートフォン内部の仕組みを知らなくても、私たちは問題なく使えています。

プログラミング学習の初期も同じです。

私は「ビギナーはとにかく、小さな成功体験を、できるだけ早く学習の初期に得るべき」と考えています。

そこで感じた楽しさや自己肯定感、好奇心が、その後の学習を進める一番の推進力になるからです。

そのためには「理屈を学ぶよりも、まずは手を動かし、アプリを作って完成させること」が重要です。

いずれ仕組みや理屈を詳しく知らなければならない時期が来ますが、最初からそこにこだわることは、むしろ挫折リスクを高めます。

【プログラミング初心者は、ハンズオン形式（作りながら学ぶスタイル）の教材から取り掛かれば失敗する可能性が大きく減る】

これは、私が教えてきた生徒を見てきて確信していることです。

ハンズオン形式で学ぶことの重要性が分かったら、次に必要なのは「何を、どの順番でハンズオンで学ぶか」というガイドです。

HTML・CSSからReact・TypeScript・Next.jsまで、2026年のReact学習の全体像と各ステップの進め方をまとめたロードマップはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/hand-on-learning-materials">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/hand-on-learning-materials)

---

# プログラミング初心者が陥りやすい『決められない』問題【ノウハウ・コレクター】

URL: https://monotein.com/blog/know-how-collector
公開日: 2025.7.26
概要: 知識はあるのに行動できない。プログラミング初心者が陥りがちな「ノウハウ収集ばかりで前に進めない」状態。そんな「ノウハウコレクター」の心理と落とし穴を実体験から解説します。

## ノウハウ・コレクターの話
以前私はポーランドに住んでいたのですが、その時のお話です。

---

あるイベントでベラルーシ出身の男性と話すことがありました。

年齢はおそらく20代中盤。

私の仕事について聞かれたので、「JavaScript」「React」といったプログラミング言語の名前を出しました。

すると、「xxxやyyyのアプリはReactで作られているんでしょ？」や「Angularと比べたときのReactのメリットは〜〜〜だよね？」といったことを、私に確認するように聞いてきます。

その後、Pythonの話が出ると、Pythonについてもずいぶん詳しいようで、色々なことを話していました。

彼の話を聞いていると、彼の仕事はプログラマー、特にJavaScriptやPythonを使っているのだと思うのは自然です。

しかし聞いてみると、まったくプログラミングとは関係ない職種でした。

しかし「プログラミング業界に転職したいと思っている」、そして「どの言語を選んで勉強するか、いま考え中」と言います。

内心、私は驚いていました。

彼の話だけを聞いていると、その知識の量は、それを実際に仕事で使っている人のようだったからです。

---

彼とはそのイベント以降、会うことはありませんでした。

しかし数年経って振り返ってみると、彼のような人を「ノウハウ・コレクター」というのだろうと思いました。

10分程度の会話しかしていないので、このように彼をジャッジすることは失礼かもしれません。

しかしプログラミングを私が教える中で、彼と似たような人に会うことが意外に多いのです。

---

「JavaやC#、JavaScriptなどの言語がどこに使われているかや、その特徴などは知っているけれど、実際には学んでいない人」

---

つまり「比較するための情報は数多く持っているけれど、『決断』『選択』の行動が取れていない人」です。

おそらく最初は「より良い選択をしたい」という動機で情報を集め始めたものの、知識が増えてしまうほどに「選択する（＝ひとつだけ選び、他を捨てること）」という決断が難しくなってしまった・・・

そしていつの間にか、周辺知識を得ること自体で満足してしまった・・・

という感じなのだろうと思います。

私にもそのようなノウハウコレクターの側面があるので、よくわかります。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/know-how-collector">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/know-how-collector)

## 知識を得る快感／行動しない安全
知識を得ることは快感ですし、行動をしないことは安全です。

しかし、結果が求められる「大人の勉強」においては、いつまでも迷ってはいられません。

知識の収集作業はある程度で止め、選択肢の中からひとつを選ぶという「行動」を取る必要があるのを忘れないようにしましょう。

知識収集をやめて行動を始めると決めたなら、次の問いは「何から始めるか」です。

HTML・CSSからReact・TypeScript・Next.jsまで、どの順番でどう進めるかを2026年版でまとめたロードマップがあります。

まずこれを見て、最初の一歩を決めましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/know-how-collector">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/know-how-collector)

---

# 【2026年版】React + ViteとNext.js、どちらを選ぶべきか？ 用途別の選び方を分かりやすく解説

URL: https://monotein.com/blog/react-vite-or-nextjs-which-to-choose
公開日: 2025.7.25
更新日: 2026.6.14
概要: ReactアプリをつくるときのツールはReact + ViteとNext.jsの2択です。それぞれの特徴・メリット・向いている用途の違いを、初心者向けにわかりやすく解説します。

## ReactとNext.js
Reactアプリを作るとき、開発ツールには次の2つがあります。

---

【1】React + Vite

【2】Next.js

---

これら開発ツールの特徴と、選び方を紹介します。

## 【React + Vite】について
もしReactをもっともシンプルな形で、余計な追加機能なく使いたい場合は「React + Vite」を選びましょう。

Reactだけにフォーカスして学びたい初心者も、こちらを選んでください。

ここで多くのビギナーが疑問に思うのは、なぜ「+ Vite」と記載されるのかということです。

少し説明をします。

---

Reactはいくつものテクノロジーを複雑に組み合わせて作られています。

そのため、開発を始めるまでの前段階、つまり環境整備やセットアップ作業に時間がかかるのです。

しかしそれでは開発効率が下がってしまいます。

また、ビギナーにも優しくありません。

そこで、Reactをすばやく始めるための「スターターキット」が作られます。

「create-react-app」というものです。

この「create-react-app」は、Reactだけをシンプルに使いたいケースで非常に人気でした。

しかし、内部で使用されているWebpackというツールが、開発効率を下げるデメリットも顕在化してきます。

そのため2022年ごろからは、WebpackをViteに変え、さらに開発効率を上げる様々なチューニングを施した「React + Vite」が広く使われ始めました。

そして2026年では「create-react-app」が使われることはありません。

代わりに「React + Vite」が使われます。

「React + Vite」は3分で使えるようになります。こちらの記事で確認してください▼

<div class="rich-card-link">
<a href="/blog/react-vite-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-148.png)

</div>
<div class="r-card-text">
Vite + Reactの始め方｜インストールから起動まで3分で完了【2026年版
</div>
</div>
</a>
</div>

<br/>


React + Viteの全体像と学習の進め方をまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

次はNext.jsを見てみましょう。

## 【Next.js】について
Next.jsは「Reactフレームワーク」と呼ばれます。

しかしここで多くの人は疑問に思うでしょう。

「*React自体がJavaScriptのフレームワークなのに、その上にさらにフレームワークがあるのはなぜ？*」

実はReact自体が提供している機能は最低限です。

開発スピードを上げたり、ページ設定をしたり、アプリを公開した後にSEO対策を施したりするには、様々な追加作業が必要なのです。

これらは多くのアプリで共通する定型化できる作業なので、最初からそれらすべてをReactに追加した「オールインワン」のReactスターターキットがあれば便利です。

そこで作られたのがNext.jsです。

Next.jsの全体像を理解したい方は下記ガイド記事をご利用ください▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

当初Next.jsは<a href="/blog/about-ssr">SSR</a>で有名でしたが、今ではそれに留まらず、ReactサーバーコンポーネントやPartial Renderingなど様々な最新機能が先行して導入されています。

Reactサーバーコンポーネント（RSC）やReact 19の新機能を体系的に理解したい人はこちらのガイドをどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

## 【まとめ】React + ViteとNext.js、どっちを選ぶ？
必要な機能がデフォルトですべて入ったNext.jsは便利です。

しかしすべてのReactアプリに、Next.jsが提供してくれる機能が必要かというと、そういうわけではありません。

Next.jsには「機能が多すぎる」とも言えるようなものも入っているからです。

これは学習コストの高さや、チーム開発における個々のスキル差といったことにもつながります。

---

一方でReact + Viteは、ミニマムで開発を始められ、徐々に必要な機能だけを追加できます。

とはいえ、React + Viteで作るReactアプリは<a href="/blog/about-spa">SPA</a>と呼ばれるもので、これはSEO（＝検索ランキング最適化）に弱いという問題があります。

しかしSEOを考慮しなくていいアプリも数多くあります。

例えば社内向けの管理アプリや、データ操作ツールといったものは、一般向けのアプリではなく、クローズドな環境で動けばいいものです。

そのため、このようなアプリ開発時にはReact + Viteで十分です。

アプリケーションの規模、SEOの重要性、リソース（時間・開発チームのスキルレベル等）といったことが、どちらのReact開発ツールを使うかを決める上での大きなファクターとなります。

なお、React + ViteとNext.jsのどちらを選んだとしても、共通して必要になるのがReactそのものへの理解です。

ツールの違いより先に、React × TypeScriptを体系的に押さえておくと、どちらを選んでも迷いにくくなります▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-or-nextjs-which-to-choose">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-or-nextjs-which-to-choose)

## よくある質問
### Q1. SPAとは何ですか？SEOに弱いとはどういう意味ですか？
SPAはReact + Viteで作れるアプリの形式です。

ページ全体をブラウザ側で描画するため、検索エンジンにコンテンツが読み込まれにくく、検索ランキングに影響が出ることがあります。

SEOが重要なサイトやアプリなどでは注意が必要です。

SPAの仕組みについては下記記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/about-spa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-180.png)

</div>
<div class="r-card-text">
SPAとは？シングルページアプリケーションの仕組み・MPAとの違いを2分で解説
</div>
</div>
</a>
</div>

<br/>

### Q2. React + ViteからNext.jsに途中で乗り換えることはできますか？
できます。

Next.jsからReact + Viteに切り替えることもできます。

実際、Next.jsの複雑さを嫌ってReact + Viteに移行する人も少なくありません。

しかしどちらの方向でも、書き直しが必要な部分が出てきます。

最初にどちらを使うかを決めておく方が効率的です。

アプリの用途とSEOの必要性をあらかじめ確認してから選びましょう。

React + Viteの使い方、Next.jsの使い方はそれぞれ下記記事で紹介しています▼

<div class="rich-card-link">
<a href="/blog/react-vite-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-237.png)

</div>
<div class="r-card-text">
【Vite + React + TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

<div class="rich-card-link">
<a href="/blog/nextjs-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-242.png)

</div>
<div class="r-card-text">
【Next.js × TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

### Q3. React + ViteとNext.js、初心者はどちらから始めるべきですか？
Reactの学習が目的なら、React + Viteがおすすめです。

余計な機能がなく、Reactそのものにフォーカスして学べます。

Reactを学び始めて難しく感じてきた方は、こちらのガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

### Q4. フロントエンドの学習はどのように進めていけばいいですか？
React + ViteとNext.jsのどちらを選ぶにしても、その前段階としてHTML、CSS、JavaScript、Reactの基礎を学ぶ必要があります。

学習全体の流れを知りたい方は、こちらのロードマップを参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

### Q5. AI時代にReactを学習する方法を知りたい
AIは便利ですが、React学習をAIだけで進めることにはリスクもあります。

全体像がつかめないリスクです。

ある地点で一度AIを離れ、Reactの全体をカバーしている教材で学習をするのがおすすめです。

先に全体を理解しておけば、AIの断片的な回答も正しく評価でき、正しく使えます。

2026年に必要なReact全体をカバーしている教材があります。

詳しくは下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-or-nextjs-which-to-choose">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-or-nextjs-which-to-choose)

---

# 【プログラミング学習】なぜ有料の教材が〈まだ〉存在するのか？

URL: https://monotein.com/blog/why-we-pay-learning-materials
公開日: 2025.7.24
概要: プログラミング初心者が無料教材に頼りすぎると失敗する理由とは？有料教材の本当の価値と選び方を解説。情報が多すぎる時代に、最短で身につけるための学習戦略。

## 無料教材の罠
プログラミングの学習素材はネット上に山ほどあります。

ブログ記事やYouTube動画です。

その99%は無料なので、次のように思う人は多いと思います。

---

「なんでお金を払って教材を買う必要があるの？　全部タダで手に入るじゃん」

---

かつて私自身もそう思っていました。

しかし、それが必ずしも正しくはないことに気がつきます。

無料教材を、特にプログラミング学習ビギナーが使うときの問題点を、いくつか見ていきましょう。


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-we-pay-learning-materials">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-we-pay-learning-materials)

## 情報が断片的
ブログ記事やYouTube動画など、オンラインで見つかる素材の一番の問題はここです。

これは、その分野の勉強を始めたばかりのビギナーに一番マイナスに影響します。

---

当然ですが、ビギナーはまだその分野の全体の見取り図を持っていません。

そのため、ブログ記事などの断片的な情報を見ても、

• 「それが他の分野と、どうつながっているのか」\
• 「それを具体的にどう使っていけばいいのか」

といったことが理解できないのです。

その無料情報の質がどれだけ高くても、「使い方」がわからないと意味がありません。

---

ネット上の情報が断片的になるのは、仕方のないことです。

アクセスを増やし、より多く見られるためには、サクッと終わる必要があります。

長く、ボリュームのあるものは、クリック1つで次の情報に移れてしまうネットとは相性が悪いのです。

## 情報が整理整頓されている
一方で有料教材には、このような量の制約はありません。

むしろ量が少なすぎたら、お金を払った人の不満の種となるでしょう。

「量が多い」というのは、プラスにもマイナスにも働く要素です。

しかしある一つの分野について、体系的に説明するとなると、一定の量になってしまうのは当然です。

さらに、初心者への「情報の交通整理」も有料教材ならではです。

• 「どの項目から学んでいけば挫折しにくいのか」\
• 「どの順番だと、よりわかりやすいのか」

といった点は、ネットの無料教材では配慮されていません。

---

ネット上に情報はあふれているので、「情報だけ」が欲しいのなら0円ですべて手に入ります。

しかし、それが初心者向けに整理整頓され、さらに全体の整合性を持つようにパッケージ化されているのかは別の話です。

有料の教材を買うとき、私たちは「情報そのもの」よりも、むしろ「情報の編集技術」にお金を支払っているのです。

そしてこの「情報の編集技術」は、次に触れる「時間の短縮効果」にもつながります。

## お金で時間を買う
繰り返しになりますが、情報というのはネット上にすべてあるのです（特にプログラミング分野は）。

0円で手に入るのです。

しかし、それらは断片的であり、かつ何の交通整理もされていないので、特に初心者にとっては扱いづらい。

とはいえ、「扱いづらい」というだけであって「不可能」ではない。

そのため、ネット上の無料教材だけでプログラミングをマスターしてしまう人もいます。

しかしそのデメリットは、時間が膨大にかかることです。

私自身もプログラミング学習ビギナーの頃はそのようにしていたので、よくわかります。

---

その分野の全体の見取り図も持っておらず、手に入るのは断片的な情報ばかり

作っている人もバラバラ

たまに「あ、この人の説明はわかりやすい」と思う記事があっても、その人はそれ以外の記事を書いてない

そのくせ、クリック1つで新しい情報が無限に出てくるので、「もっと分かりやすいものがあるはず」と、情報のつまみ食いが止まらない・・・

---

進んでいるのか、停滞しているのかわからず、多大な時間を無駄にしました。

## 有料教材を必要としない人
先ほど、「無料教材だけでプログラミングをマスターしてしまう人もいる」と書きました。

しかし皆がこうなれるのかというと、私はそう思いません。

特別な才能のある人、あるいはネット回遊に使える時間が無限にある人。このどちらかだけです。

私を含め、大部分の人はこのどちらにも該当しないでしょう。

## マインドセットの話
最後に、これは教材自体とは関係ない学び手の心構えの話です。

私たちは無料で手に入るものには真剣になれません。

【無料 ＝ 価値が低い】と無意識に思っているのでしょう。

一方、「お金を払う」という行動は、「元を取らなきゃ」＝「真面目に向き合おう」という態度を生みます。

態度の違いは、教材からの吸収率の違いにもつながります。

かつて実際に試したことがありますが、同じ教材を私の生徒に使ってもらっても、無料の場合と有料の場合とでは、その学習成果は大きく異なっていました。

教材の性質がわかったら、次に大事なことは、どのタイミングでどんな教材を使えばいいのかという点です。

HTML・CSSからReact・TypeScript・Next.jsまで、各ステップで何を学び、どんな教材を選べばいいかを整理した学習ロードマップがあります。

全体の道筋を先に把握しておくと、教材選びも迷わなくなります▼


<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-we-pay-learning-materials">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-we-pay-learning-materials)

---

# プログラミング学習の初心者によくある誤解（with 解決法）

URL: https://monotein.com/blog/common-misunderstandings
公開日: 2025.7.23
概要: プログラミング初心者が陥りがちな3つの誤解を解説。「理数系でないと難しい」「コードに正解がある」「教材は1回で十分」といった誤解を解き、効率的な学習法を紹介。プログラミング学習を始める前に知っておきたいことです。

## 誤解は現実になる
私はプログラミングをビギナーに教えています。

すると、多くの人が持っている「共通の誤解」があることに気がつきました。

誤解とは「誤った現実理解」です。

誤ったままの認識を持ったままでいると、知らず知らずのうちに行動も誤解に基づいたものになります。

そして、誤解はいずれ現実化してしまいます。

以下、よくある誤解をいくつか紹介していくので、誤解に基づいた「避けられる失敗」を防ぎましょう。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/common-misunderstandings">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/common-misunderstandings)

## 【1】プログラミングは理系の人向け
これは私もかつて思っていたことです。

私自身、大学では文系の科目を学んでいたので、まったく理系ではありません。

しかし自分でプログラミングを始めてみると、理系の要素はほとんどないことに気がつきました。

数学的な要素も、足し算や掛け算といった、一般的な日本人であれば皆がもっている能力で十分です。

むしろ、「コードを書く」という言葉からもわかるように、「書く」に関係する能力、つまり文系の能力の方が重要になります。

関数やファイル名にわかりやすい名前をつける力、コードを読み解く力、論理的に首尾一貫したコードを書く力など、文系の人が得意としていることです。

## 【2】正解があると思っている
これも私自身かつて思っていたことです。

そしてプログラミングがある程度できるようになってからも、かなり長い間とらわれていた誤解です。

「コードには正解がある」と考えていると、自分の書くコードが意図通りに動いたとしても、自信を持てなくなります。

「たしかに自分のコードは動くけど、でもこれが『正しい』のかがわからない・・・」。

その結果、ネットで何度も検索をして時間を浪費してしまいます。

---

たとえば、東京から大阪に行く手段には複数の選択肢があります。

プログラミングにおいても、同じ動きを実現するための書き方は複数あるのです。

そして、大阪まで徒歩で行く人はほぼおらず、公共交通機関を使って行く人が多いように、その複数の書き方には「ほとんど使われない書き方」「一般的な書き方」といった区分けがあります。

どちらであるかを見分けるには、経験と知識が必要です。

しかし、どちらであっても「絶対的な正解」というものはありません。

ビギナーのうちは、「とにかく自分が実現したい動きを達成できればいい」と楽観的に考え、前に進むことを優先させましょう。

途中で挫折してすべてが終わるよりも、継続の方が重要です。

## 【3】教材は一回やればいい
これはプログラミング勉強に限らないことです。

教材は最低2回は繰り返しましょう。

特にビギナー向けに作られた教材（主にその分野の基礎部分を説明する教材）は一回だけやっても、頭に残っているのは半分以下です。

「繰り返し」はどうしても退屈に聞こえてしまいますが、反復学習こそ実は最短ルートなのです。

適切な教材を見つけたら、骨の髄まで味わってしまいましょう。

誤解を解き、正しい姿勢で学習を始める準備ができたら、次に必要なのは「何をどの順番で学ぶか」というガイドマップです。

HTML・CSSからReact・TypeScript・Next.jsまで、2026年のReact学習に必要なステップと進め方をまとめたロードマップがあります。

最短ルートで学習を進めていきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/common-misunderstandings">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/common-misunderstandings)

---

# プログラミング勉強に意味はない

URL: https://monotein.com/blog/purposeless-studying-is-meaningless
公開日: 2025.7.21
概要: プログラミング初心者が陥りがちな「なんとなく勉強」の落とし穴とは？明確な目標設定で最短・最速で夢を実現する方法を解説。JavaScript・React学習やフリーランス・エンジニアを目指す方必見

## なんとなく勉強を始める人の末路
これまで私は、多くのプログラミング初心者と接してきました。

そういう中で気づくのは、「なんとなく」勉強を始めた人が意外に多いことです。

一番多い「なんとなく」の理由は、次のものです。

---

「プログラミングって言葉を最近よく聞くし、これから大事そうだし、価値が上がりそうだし、できたらかっこいいし……」

---

つまり、自分の中に内在的な動機があるのではなく、社会やメディアや他人や世間の空気やらといった外部事情を理由に勉強を始めているのです。

このような動機で勉強を始めた人はどうなるでしょうか？

勉強自体が目的化します。

（*これをプログラミング分野では「チュートリアル・ヘル」といいます。詳しくは▼）

<div class="rich-card-link">
<a  target="_blank" rel="noopener" href="/blog/tutorial-hell">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-169.png)

</div>
<div class="r-card-text">
勉強が楽しい……でもそれは危険信号かも？【チュートリアルヘル】の怖さ
</div>
</div>
</a>
</div>

## 勉強はラク
ある意味、勉強というのは楽なのです。

ひとりで、延々と進めていくことができてしまう。

他者と出会わずに、進めていくことができてしまう。

たとえば英語学習を例にとりましょう。

文法や単語を、ひたすら一人でコツコツ勉強している人をイメージしてください。

しかし英語は本来、他者とコミュニケーションを取るためのものです。

自分の部屋で一人で勉強していても、それはいつまでも「予行演習」をしているのと同じで、「実戦」ではない。

とはいえ、「予行演習」は快適で安全です。

自分の力が実際どれほどなのかを知らないでいられます。

傷つかなくて済みます。

---

先ほど「（勉強は）他者と出会わずに、進めていくことができてしまう」と書きましたが、この「他者」が指すのは人間だけではありません。

TOEICや英検といった検定試験、採用面接など、「自分の外部にあるもの」「自分のコントロール下にはないもの」を含みます。

そのため、傷つくのを恐れて、このような他者に出会うのを避け、さらに勉強が目的化してしまうのです。


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/purposeless-studying-is-meaningless">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/purposeless-studying-is-meaningless)

## 勉強自体に意味はない
これはプログラミングに限らず、すべての「大人の勉強」にいえますが、勉強そのものに意味はありません。

---

「その勉強の結果、どうなりたいのか？」　\
「何を達成したいのか？」　\
「自分がどうなりたいのか？」

---

といった「目的」こそが主役です。

そして「目的」は、勉強という「手段」よりも先立って存在すべきものです。

なので、プログラミング勉強が目的化してしまうことを避けるには、まず目標設定をするようにしましょう。

私はJavaScript・Reactといったことを主に教えていますが、生徒の多くは次のような目標を持っています。

---

「在宅・リモートの仕事をしたい」\
「高単価の案件を獲得したい」\
「フリーランス・エンジニアになりたい」\
「スキルアップしたい」\
「自分のアプリを開発したい」

---

このように目標がはっきりしていて、そしてそこに至るための適切な教材を使った人は、最短・最速で夢を実現しています。

ではReactの場合はどうなのでしょうか？

具体的に何から、どの順番で学ぶのが最短ルートなのでしょうか？

HTML・CSSから始まってReact・TypeScript・Next.jsまでを2026年版で整理した学習ロードマップを用意したので、React学習の全体像と各ステップを確認してください▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>



<a href="/present?magnet=first-study-guide&from=purposeless-studying-is-meaningless">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&from=purposeless-studying-is-meaningless)



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/purposeless-studying-is-meaningless">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/purposeless-studying-is-meaningless)

---

# 電子書籍のメリットとは？ ブログ記事との違いと初心者に最適な理由を解説

URL: https://monotein.com/blog/advantages-kindle-books
公開日: 2025.7.7
概要: 電子書籍はなぜ今も選ばれるのか？本記事では、ブログ記事にはない電子書籍の2つの強みを解説。情報のパッケージ化と集中できる読書環境という視点から、初心者にとっての最適な学習手段としての電子書籍の価値を紹介します。

## 無料ブログ全盛の時代に、電子書籍はなぜ選ばれるのか？
ネットではクリックひとつで、無数のブログ記事が無料で読めます。

そういう中で、電子書籍にはどのような存在価値があるのでしょうか。

私はビギナー向けプログラミング教本を多く出しているので、その立場からの話になります。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/advantages-kindle-books">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/advantages-kindle-books)

## 電子書籍が持つ2つの大きな強み
ブログ記事にない電子書籍の強みは、次の2点です。

---

• 情報がパッケージとしてまとめてあること

• ブラウザ外にあること

---

それぞれについて、少し解説をします。

## 電子書籍のメリット①【情報がパッケージ化されている】
[こちらの記事](/blog/difficulties-of-using-online-materials)でも触れましたが、ブログ記事の弱みは情報が断片的であることです。

そのため、ある特定の疑問や問題をピンポイントで解決することには役立ちますが、ある科目の全体像や包括的な知識を得るのは難しくなります。

ブログ記事は「ビギナー向け」というよりも、自分が必要している情報の「あたり」がある程度ついている中級者や上級者向けなのです。

また、ブログ記事はその性質上、長文には向いていないことも挙げられます。

ブログ記事に求められているのは「サクッと終わるもの」なので、文章量が多い記事は、すぐに離脱されてしまうのです。

その一方、電子書籍はある程度の分量を持つことが可能です。むしろ、ある程度の長さが期待されています。

「量がある」とは、その分野について最低限必要な情報がパッケージ化されているということです。

さらに、どの順番で読んでいけばいいのか不明なブログ記事とは異なり、電子書籍には章立てがあり、著者の方で内容を整理整頓してくれています。

これも、何をどの順番で進めていけばいいのかわからないビギナーにとって大きなメリットです。

そして電子書籍のもう一つの強みは、次に触れる【ブラウザの外にある】ということです。

## 電子書籍のメリット②【ブラウザ外にある】
ブログ記事はブラウザ上で読みます。

しかし私たちはブラウザ上で多くのことをします。

ブログ記事を読むだけでなく、ニュースや娯楽動画を見たりと、様々なことです。

さらにブログ記事にはリンクが貼られており、他の記事へと移動することが推奨されます。

つまり気が散るのです。一つのことに集中しにくいのがブラウザ上の環境なのです。

一方、電子書籍は専用のアプリで読むことになります。

同じスマホ上にあるとはいえ、少なくともブラウザから一定の距離を確保された、隔離された環境です。

そのため、ブラウザよりは遥かに集中して読み進めていくことができます。

（このような「隔離環境」の視点から見て一番いいのは、スマホやPCといったデバイス自体から離れられる紙の書籍ですが、電子書籍でも、一定程度の距離をブラウザから取れるのは確かです。）

## 断片的な情報に疲れたら、まとまった学びを電子書籍で
情報がブラウザ上にあふれる時代だからこそ、「まとまり」と「集中できる環境」が価値を持ってきます。

電子書籍は、内容だけでなく、その読書環境自体も学びやすさや継続性を支える仕組みになっているのです。

もしブログ記事を使った勉強に難しさを感じているなら、一度電子書籍にトライしてみましょう。

さて、電子書籍の強みである「まとまりと集中環境」を使って何を、どのように学ぶか？

HTML・CSSからReact・TypeScript・Next.jsまで、学ぶべきことと進める順番を2026年版ロードマップとして整理しています。

まず最初に全体像をつかんでおきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/advantages-kindle-books">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/advantages-kindle-books)

---

# RSCとは？React Server Componentsの仕組みを2分で図解【2026年版】

URL: https://monotein.com/blog/about-rsc
公開日: 2025.7.5
更新日: 2026.6.15
概要: Reactサーバーコンポーネント（RSC）の仕組みを図解で解説。SPA・SSRとの違い、ページ移動時のPartial Rendering、RSC Payloadとは何かまで、React初心者向けにわかりやすくまとめました。

## SSRからRSCへ
[SPAについての前々回の記事](/blog/about-spa)と、[SSRについての前回の記事](/blog/about-ssr)で、それぞれ「SPA（シングル・ページ・アプリケーション）」および「SSR（サーバー・サイド・レンダリング）」を紹介しました。

そしてSPA、SSR、どちらであっても「クライアントが使うJavaScriptをとにかくすべて送る」という点が同じであることにも触れました。

図で示すと、次のようになっています。

▼ SPA

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px; ">

![mpa.png](../../images/singleBlogPageImages/blogArticleImages/rsc/spa.png)

</div>

▼ SSR

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px; ">

![mpa.png](../../images/singleBlogPageImages/blogArticleImages/rsc/ssr.png)

</div>

ここを改善したものが、本記事で紹介する「RSC（Reactサーバー・コンポーネント）」です。

|    |  登場時期   |
| :----:|:------:|
|  MPA（マルチ・ページ・アプリケーション） | SPA以前（2000年ごろ）| 
|  SPA（シングル・ページ・アプリケーション） | 2010年ごろ|   
|  SSR（サーバー・サイド・レンダリング） | 2016年ごろ|  
|  RSC（Reactサーバー・コンポーネント） | 2022年ごろ| 

## RSCの仕組み
RSCにおいても、SSRのように初回リクエスト時に「一部組み立てたHTMLファイル」と「JavaScript」を送るという点は同じです（つまりRSCとSSRは一緒に使うことができます）。

しかし送るJavaScriptの量が違います。

ブラウザで必要な量だけにしぼって送るのです。

図にすると次のようになります。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![rsc-1.png](../../images/singleBlogPageImages/blogArticleImages/rsc/rsc-1.png)

</div>

なぜこのようなことが可能かというと、初回リクエストがあったとき、サーバーはRSCのコードを実行し、この段階でJavaScriptを処理しているからです。

ここでクライアントに送るJavaScriptの量が必要最低限になるよう絞っています。

このJavaScript削減を実際に確認したい人は、下記記事に目を通してください▼

<div class="rich-card-link">
<a href="/blog/nextjs-react-server-component-less-size">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-145.png)

</div>
<div class="r-card-text">
【Next.js】Reactサーバーコンポーネントのメリットを実際に確認してみました
</div>
</div>
</a>
</div>

<br/>

ではページ移動時にはどうなのでしょうか。

[SPAの記事](/blog/about-spa)と、[SSRの記事](/blog/about-ssr)で触れたように、SPAとSSRではサーバーとのやりとりがなく、これがページ移動のスピードが速い理由でした。

実はRSCでは、ページ移動時にはサーバーとのやりとりが発生します。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![rsc-2.png](../../images/singleBlogPageImages/blogArticleImages/rsc/rsc-2.png)

</div>

図を見るとリクエストが送られており、SPA以前の仕組み（＝MPA）に戻ったようですが、大きな違いがあります。

RSCでは「ページの変更箇所だけを部分的に更新する」ということが可能なのです。

## RSCとMPAの違い
MPAでは新しいページを表示するとき、ページは全体がリロードされていました。

サーバーから毎回、新しいページに必要なHTMLとJavaScriptを受け取り、それでページを上書きするように表示していたからです。

たとえばすべてのページで表示されるヘッダーやフッターも、クライアント側で使いまわされるのではなく、毎回サーバーから送られてきていました。

MAPについては下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/about-mpa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-179.png)

</div>
<div class="r-card-text">
MPAとは？SPAとの違いとマルチページアプリケーションの仕組みを2分で解説
</div>
</div>
</a>
</div>

<br/>

一方、RSCにおけるページ移動時には、「変更箇所だけを部分的に更新する」という方法が使われます（これはPartial Renderingと呼ばれます）。

<div style="border: 0.1px solid grey; border-radius: 20px; margin-bottom: 30px;">

![rsc-3.png](../../images/singleBlogPageImages/blogArticleImages/rsc/rsc-3.png)

</div>

この結果、サーバーから送られてくるものはごく少量で済み、さらにページ全体がリロードされることもなくなります。

サーバーから送られてくるものはHTMLやJavaScriptではなく、最適化・軽量化された「RSC Payload」と呼ばれるものです。

<div style="background: #d6d6d6; padding: 30px 10px 10px 10px; border-radius: 10px; margin-bottom: 35px;">

<span style="font-size: 20px; font-style: italic;">「RSC Payload」のコード例</span>

RSC Payloadとは下記のようなものです。HTMLではなくJSON形式のデータであるのがわかります。

```json
{
    "data": {
        "children": [
            {
                "type": "h1",
                "key": null,
                "props": {
                    "children": "Hello, Server Components!"
                }
            },
            {
                "type": "p",
                "key": null,
                "props": {
                    "children": "This is rendered on the server and streamed to the client."
                }
            }
        ]
    },
    "metadata": {
        "status": "complete"
    }
}
```

</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/about-rsc">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/about-rsc)

## よくある質問
### Q1. RSCはNext.jsを使わないと使えませんか？
現時点では、RSCを実用的に使える環境としてNext.jsが最も一般的です。

RSCはReact本体の機能ですが、実際の開発ではNext.jsと組み合わせて使うのが主流です。

Next.jsの全体像と使い方はこちらのガイドにまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

### Q2. データベースを使う場合、RSCのメリットはどう変わりますか？
データベースとの連携があるケースでは、RSCのメリットがより明確になります。

サーバーコンポーネントがデータベースに直接アクセスしてデータを取得し、その結果だけをクライアントに渡せるためです。

詳しくは次に紹介する記事をご覧ください。

## RSCをもっと詳しく知りたい人へ
以上、本記事まで4連続でウェブアプリケーションの発展の歴史を見てきました。

MPA、SPA、SSR、そしてRSCという流れです。

しかし実は、ここまでの説明はすべて「データベースを使っていない場合」の解説でした。

説明を簡略化するためです。

データベースとの連携があるケースでは、特にReactサーバー・コンポーネントのメリットがよりわかるようになります。

RSCについて、その原理からメリット、デメリットまで一段深く知りたい人はこちらをどうぞ▼

<div class="rich-card-link">
<a href="/blog/react-server-components-complete-guide">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-165.png)

</div>
<div class="r-card-text">
Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで
</div>
</div>
</a>
</div>

<br/>

RSCとReact 19の新機能（useActionState、useOptimistic、useEffectEventなど）を合わせて体系的に理解したい人はこちらのガイドをどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/about-rsc">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/about-rsc)

---

# SSR（サーバーサイドレンダリング）とは？仕組みとSPAとの違いを2分で解説

URL: https://monotein.com/blog/about-ssr
公開日: 2025.7.4
更新日: 2026.6.15
概要: SPAの課題である初回表示の遅さを解決するSSR（サーバー・サイド・レンダリング）の仕組みを図解で解説。ハイドレーションやSPAとの違い・関係性、次世代技術RSCへのつながりも紹介

## SPAからSSRへ

[前回の記事](/blog/about-spa)では「SPA（シングル・ページ・アプリケーション）」を紹介しました。

そしてSPAには、「ページの初回表示に時間がかかる」という問題があることにも触れました。

「からっぽのHTMLファイル（`index.html`）」と、大量のJavaScriptをクライアントに送ること、そしてページをJavaScriptで組み立てるプロセス、この2つに時間がかかるからです。

SPAの仕組みを図にしたものが下図です。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px; ">

![mpa.png](../../images/singleBlogPageImages/blogArticleImages/rsc/spa.png)

</div>

ここを改善したものが、本記事で紹介する「SSR（サーバー・サイド・レンダリング）」です。

|                                           |       登場時期        |
| :---------------------------------------: | :-------------------: |
|  MPA（マルチ・ページ・アプリケーション）  | SPA以前（2000年ごろ） |
| SPA（シングル・ページ・アプリケーション） |      2010年ごろ       |
|   SSR（サーバー・サイド・レンダリング）   |      2016年ごろ       |

## SSRの仕組み

SSRの仕組みを示したものが次図です。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![ssr.png](../../images/singleBlogPageImages/blogArticleImages/rsc/ssr.png)

</div>

SSRでは初回リクエストがあったとき、HTMLを一部だけすばやく組み立て、これとJavaScriptを送り返します。

送っているものだけを見ると、SPAと同じ「HTML + JavaScript」ですが、このHTMLファイルはSPAのような「からっぽ」のものではなく、サーバー側で一部組み立てたもので、最低限必要なデータが含まれたものです。

クライアント（ブラウザ）は「一部組み立てたHTMLファイル」を直ちに表示することができるので、ユーザー体験はよくなります。

<div style="background: #d6d6d6; padding: 30px 10px 10px 10px; border-radius: 10px; margin-bottom: 35px;">

<span style="font-size: 20px; font-style: italic;">「一部組み立てたHTML」のコード例</span>

SPAのHTMLファイルとは異なり`<body>`タグ内にブラウザで表示できるものがある、つまり「からっぽ」ではないのがわかります。

```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="description" content="ゲストさん、こんにちは" />
        <title>SSR</title>
    </head>
    <body>
        <div id="app">
            <h1>ようこそ！</h1>
            <p>こんにちは、<span id="username">ゲスト</span> さん。</p>
        </div>
        <script type="module" src="/main.js"></script>
    </body>
</html>
```

</div>

とはいえこの時点ではまだ、ブラウザに映っているページは完全なものではありません。

サーバーから送られたJavaScriptを使って、ページを完全なものに組み立てる作業が残っています。

この作業は主に`<button>`や`<form>`といったユーザーとのやりとりが発生するところにJavaScriptをつないでいく工程で、「ハイドレーション」と呼ばれます。

<span style="font-style: italic;">(\*ハイドレーションとは「水分補給」という意味です。サーバーから送られてきた「乾いたHTMLの骨組み」に、ダイナミックな機能を付与するJavaScriptを与えて「フレッシュで生気みなぎるもの」へと変えるイメージになります。)</span>

## SPAとSSRは一緒に使える

ひとつ覚えておいて欲しいことがあります。

SPAとSSRの最大の違いは初回表示時の仕組みだけであり、基本的にはSSRもハイドレーションが済んだあとにはSPAになることです。

SSRを使っても、ページ移動時にサーバーとのやりとりは行われず、JavaScriptでページを描画します。

このようにSPAとSSRの関係は、「SPAの後継がSSR」、「SPAの進化版がSSR」という直列的なものではなく、並列的、あるいは相互補完的なものなのです。

さて、すでに気がついた人もいると思いますが、SSRを使っても「クライアントが使うJavaScriptをとにかくすべて送る」という点は同じです。

この部分に手を加えたものが、次に紹介するRSC（Reactサーバー・コンポーネント）になります。

<div class="rich-card-link">
<a href="/blog/about-rsc">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-182.png)

</div>
<div class="r-card-text">
RSCとは？React Server Componentsの仕組みを2分で図解【2026年版】
</div>
</div>
</a>
</div>

<br/>

なお、SSRを実際の開発で使うには、Next.jsを使うのが現実的です。

Next.jsの全体像と使い方はこちらのガイドにまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

MPA・SPA・SSR・RSCの流れ全体と、React 19の新機能（useActionState、useOptimisticなど）まで体系的に理解したい方は、こちらのガイドもあわせてご覧ください▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=/blog/about-ssr">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/about-ssr)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/about-ssr">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/about-ssr)

---

# SPAとは？シングルページアプリケーションの仕組み・MPAとの違いを2分で解説

URL: https://monotein.com/blog/about-spa
公開日: 2025.7.3
更新日: 2026.6.15
概要: ReactやGoogleマップが採用するSPAの仕組みを図解で解説。MPAとの違い、ページ移動が速い理由、初回表示が遅くなる原因、なぜ「シングルページ」と呼ばれるのかまでわかりやすく紹介します。

## MPAからSPAへ

[前回の記事](/blog/about-mpa)では「MPA（マルチ・ページ・アプリケーション）」を紹介しました。

そしてMPAには、「ページの表示に時間がかかる」という問題があることにも触れました。

ページが移動するたびに毎回サーバーとのやりとりが発生するからです。

図にすると下図のようになっています。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px; ">

![mpa.png](../../images/singleBlogPageImages/blogArticleImages/rsc/mpa.png)

</div>

ここを改善したものが、本記事で紹介する「SPA（シングル・ページ・アプリケーション）」です。

|                                           |       登場時期        |
| :---------------------------------------: | :-------------------: |
|  MPA（マルチ・ページ・アプリケーション）  | SPA以前（2000年ごろ） |
| SPA（シングル・ページ・アプリケーション） |      2010年ごろ       |

## SPAの仕組み

SPAの仕組みを示したものが次図です。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![spa.png](../../images/singleBlogPageImages/blogArticleImages/rsc/spa.png)

</div>

SPAでは、ページ描画をJavaScriptがクライアント（ブラウザ）側で行うため、ページ移動のたびにサーバーとやりとりをする必要はなく、ページをすばやく表示できるのです。

しかし、SPAにもマイナス面がひとつあります。

ページの初回表示に時間がかかることです。

サーバーは最初のリクエストがあったとき「からっぽのHTMLファイル（`index.html`）」と、大量のJavaScriptをクライアントに送ります。まずここで時間がかかります。

さらに、クライアントがこれらを受け取ったあとには、HTMLファイルを下敷きにしてページをJavaScriptで組み立てる作業が始まりますが、ここでもさらに時間がかかります。

この結果、ブラウザには何もない真っ白なページ（＝からっぽのHTMLファイル）がしばらく映っていることになるのです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/about-spa">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/about-spa)

## メリット／デメリット

MPAでは、初回表示時を含め、ページ移動時には毎回時間がかかります。

一方SPAでは、ページ移動は素早く行えるものの、初回ページ表示時に時間がかかるのです。

ここを改善したものが、次の記事で紹介するSSR（サーバー・サイド・レンダリング）というものです。

<div class="rich-card-link">
<a href="/blog/about-ssr">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-181.png)

</div>
<div class="r-card-text">
SSR（サーバーサイドレンダリング）とは？仕組みとSPAとの違いを2分で解説
</div>
</div>
</a>
</div>

<br/>

なお、SPAについてもう少し掘り下げて理解したい方は下記記事をご覧ください。

「静的サイト・動的サイトの時代からどうSPAが生まれたのか」、そして「SPAのメリット・デメリット」を、より詳しく追った記事です▼

• <a href="/blog/what-is-spa">SPAサイトとは？仕組み・メリット・デメリット・実例を2分で解説</a>

## 参考情報①（「からっぽのHTMLファイル」のコード例）

SPAの初回リクエスト時に送られてくる「からっぽのHTMLファイル」とは次のようなものです。

`<body>`タグ内にはJavaScriptを読み込むコードしかなく、ブラウザで表示する具体的なものが何もないのがわかります。

```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="description" content="お天気アプリです" />
        <title>SPA</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/main.js"></script>
    </body>
</html>
```

## 参考情報②（なぜ「シングル」？）

SPA（シングル・ページ・アプリケーション）の具体例は、GoogleマップやGメール、Facebookなどです。

しかしここで多くの人が疑問に思うことがあります。

「アプリ内には複数のページがあるのに（`/home`、`/about`など）、なぜ「シングル・ページ」という名前が使われているの？」という疑問です。

---

これまでに「React + Vite」や「create-react-app」などを使ったことのある人は、フォルダ内に`index.html`というファイルがあったことに気がついたかもしれません。

SPAはこの`index.html`という一枚のHTMLファイル（シングル・ページ）を下敷きとして、JavaScriptで描写を行っているのです。

「シングル・ページ」という言葉は、使われているHTMLファイルが一枚（シングル）ということに由来しています。

SPAの次に現れたSSR（サーバーサイドレンダリング）は下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/about-ssr">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-181.png)

</div>
<div class="r-card-text">
SSR（サーバーサイドレンダリング）とは？仕組みとSPAとの違いを2分で解説
</div>
</div>
</a>
</div>

<br/>

SPA（React + Vite）の開発環境のセットアップから学習の進め方まで、まとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

SPAの次のステップであるSSR・RSCまで、技術の進化の流れをReact 19の新機能も含めて一本でまとめたガイドもあります。

参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

SPAの課題をSSR・RSCで解決するNext.jsの全体像（セットアップから各機能の使い方、デプロイまで）はこちらのガイドでまとめて確認できます▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=/blog/about-spa">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/about-spa)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/about-spa">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/about-spa)

---

# MPAとは？SPAとの違いとマルチページアプリケーションの仕組みを2分で解説

URL: https://monotein.com/blog/about-mpa
公開日: 2025.7.2
更新日: 2026.6.15
概要: MPA（マルチページアプリケーション）はWordPressも採用している現役の仕組みです。SPAとの違いやページ移動時の動作を、図解を使って初心者にもわかりやすく解説します。

## MPA：知っている人が少ない言葉

「MPA」とは「マルチ・ページ・アプリケーション」の略語です。

しかし、この言葉を聞いたことのある人は少ないと思います。

その一方で、「SPA（シングル・ページ・アプリケーション）」なら、一度はどこかで耳にしたことがあるでしょう。

この2つにはどのような違いがあるのでしょうか。

本記事は、MPAからRSCまでのウェブアプリ技術の発展を4回に分けて紹介するシリーズの最初の記事です。

## WordPressもMPAを使っている

ウェブアプリケーション・テクノロジーの発展の歴史では、まず最初に「マルチ・ページ・アプリケーション」が登場しました。

そして次に「シングル・ページ・アプリケーション」です。

|                                           |       登場時期        |
| :---------------------------------------: | :-------------------: |
|  MPA（マルチ・ページ・アプリケーション）  | SPA以前（2000年ごろ） |
| SPA（シングル・ページ・アプリケーション） |      2010年ごろ       |

MPAの代表例はWordPressです。

ではMPAとSPAの違いは、どこにあるのでしょうか。

大きな違いを一つ挙げると、それはサーバーからクライアント（ブラウザ）に送られる「モノ」です。

MPAでは、ページ移動時にサーバーにリクエストを行い、HTMLとJavaScriptを受け取って表示する仕組みになっています。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px; ">

![mpa.png](../../images/singleBlogPageImages/blogArticleImages/rsc/mpa.png)

</div>

WordPressが今でも広く使われているように、MPAは現役の仕組みです。

しかしMPAには「ページ表示に時間がかかる」という問題があります。

ページが移動するたびに毎回サーバーとのやりとりが発生するからです。

この部分を改善したものが、次の記事で紹介するSPAになります ▼

<div class="rich-card-link">
<a href="/blog/about-spa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-180.png)

</div>
<div class="r-card-text">
SPAとは？シングルページアプリケーションの仕組み・MPAとの違いを2分で解説
</div>
</div>
</a>
</div>

<br/>

MPA・SPA・SSR・RSCという技術の進化を、React 19の新機能まで含めて一本でまとめたガイドがあります。

全体の流れをまとめて把握したい方はこちらもどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

MPAの課題を解決したSSR・RSCを実際の開発で使うには、Next.jsが標準です。

セットアップからServer Actionsの使い方まで、Next.js開発の全体像をまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=/blog/about-mpa">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/about-mpa)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/about-mpa">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/about-mpa)

---

# 学習曲線とは？プログラミング初心者が必ずぶつかる停滞期の正体と乗り越え方

URL: https://monotein.com/blog/learning-curve
公開日: 2025.7.1
概要: 学習しても成果が出ない・・・そんな悩みの正体は「「学習曲線」にあります。初心者が挫折しやすい理由と、成果が現れるまでの過程を図解で解説します

## 「勉強すれば成果が出る」は本当？ 初心者が陥りやすい誤解
私たちが、何かの計画を立てるときのことを考えてみましょう。

ここでは「勉強の計画」とします。

多くの人は、勉強にかけた時間に正比例して成果も積み上がっていくと考えます。

図で表すと、次図の緑の線です。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog178/learning-curve-1.png)

</div>

しかし実際には、このようには進みません。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/learning-curve">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/learning-curve)

## 学習に時間をかけても成果が出ない理由
現実には次のようになります。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog178/learning-curve-2.png)

</div>

時間と成果は常に比例するとは限らず、むしろいくら時間をかけてもまったく成果が伸びない時期があるのです。

それと同時に、図の右端で「学習成果」が急上昇しているように、あまり時間をかけなくても成果が飛躍的に伸びる時もあるのです。

これを「学習曲線」、英語では「ラーニング・カーブ」といいます。

「曲線」という言葉が使われているように、「時間」と「成果」の関係は、「1 + 1」が「2」となるような直線的・数理的・直感的なものではありません。

むしろ直感に反するようなものなのです。

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

## なぜ学習曲線が、ビギナーにとって重要なのか
私はプログラミングをビギナーに教えています。

その中で、特にビギナーがこの学習曲線について知っておくことは、非常に重要だと実感しています。

本記事の冒頭でも書いたように、私たちは何かを始める前（＝頭の中で計画しているとき）には、物事はスムーズに進んでいくと考えてしまうからです。

しかし、実際には次図のようになります。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog178/learning-curve-3.png)

</div>

学習を進めていれば、時間をかけても成果が見えない時期が必ず訪れます。

しかし学習曲線について知っていれば、そのような一見「停滞」に見えてしまう時期も、のちに必ずやって来る「飛躍」の前触れだと考えられるでしょう。

目の前の学習に気を取られて短期的になってしまった視野を、長期的・鳥瞰的なものへとリフレッシュしてくれるのが、この学習曲線なのです。

停滞期はReactを学んでいる誰もが経験するものです。

それと同時に、「なぜReactを難しく感じるのか」「どう乗り越えればいいのか」という具体的な疑問には別のアプローチ必要です。

Reactでつまずくポイントと乗り越え方をまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/learning-curve">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/learning-curve)

---

# 【ビギナー向け】TypeScriptを難しく感じる理由と、その解決法

URL: https://monotein.com/blog/why-typescript-is-difficult-for-beginners
公開日: 2025.6.19
概要: TypeScript × Reactはなぜ初心者にとってハードルが高いのか？その理由と、無理なく学ぶためのステップ・教材をわかりやすく紹介します

## React現場ではTypeScriptが当たり前
実際の開発現場では、ReactとTypeScriptを使うことがデフォルトになっています。

JavaScriptではありません。

しかし、これまで私が教えてきたビギナーの方々を見ていて、「TypeScriptを初心者が使うのはハードルが高い」と感じます。

次の2つの理由からです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-typescript-is-difficult-for-beginners">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-typescript-is-difficult-for-beginners)


## 【理由１】 メリットがわかりにくい
JavaScriptではなくTypeScriptが使われるのは、当然なんらかのメリットがあるからです。

そこでネット記事などに目を通すと、「TypeScriptのメリット」として次のようなことが書かれています。

---

• アプリが堅牢になる

• 開発スピードが上がる

• エラーが減る

etc.

---

ビギナー向けを謳（うた）う記事を見ても、このようなことばかり書いてあります。

しかしこういうメリットは、実はビギナーには一番理解しにくいものです。

私自身もかつてそうでしたが、ビギナーのうちから「バグがないように」や「エラーがないように」といったことを意識している人はほとんどいません。

初心者のうちは、「とにかくアプリが完成すればOK」、「とにかくアプリが動けばOK」というのがゴール地点になります。

そして実際それでいいのです。

ビギナーにとって優先事項は、まずはとにかく完成させること、教材をひとつ終えること、そして「ここまで自力でできた！」という達成感と、「もっと知りたい！」という向上心を得ることです。

しかしTypeScriptを使っても、アプリの見た目が良くなるわけでもなければ、アプリの動くスピードが速くなるわけでもありません。

その一方で、書くコードの量は増え、エラーの発生も多くなるため、開発に時間がかかるようになります。

目に見えるようなメリットがわかりづらいのです。

## 【理由２】「型」の概念に馴染みがない
TypeScriptは、「静的型付け言語」や「型（かた）のついたJavaScript」とよく紹介されます。

しかし、これだけを聞いて意味をつかめる初心者はいません。

これは「型」という概念が、HTML／CSS開発ではまったく出てこないものだからです。

また、JavaScript（or jQuery）を使ったことが多少はあっても、「型」を意識する機会がほとんどないことも理由としてあります。

実はこの「型」は、JavaやC言語など他の言語でも出てくるプログラミングの基本コンセプトで、これを意識して開発していくことが今のReact開発の潮流になっています。

そのため、JavaScriptの「型」をより意識してコードを書けるTypeScriptの導入が進んでいるのです。

---

型について少し見てみましょう（*ここは読み飛ばしても大丈夫です）。

たとえばJavaScriptでは、次のように書けます。

```js
// JavaScriptの場合

let data = "Hello";
data = 123;        // エラーなし
```

TypeScriptで同じように書くと、エラーが出ます。

```js
// TypeScriptの場合

let data: string = "Hello";
data = 123;        // エラー: string型にnumber型は代入不可
```

TypeScriptでは型を合致させる必要があり、この例でエラーを消すには、たとえば次のように書けます。

```js
let data: string = "Hello";
data = "123";       // ""を使うことでnumber型をstring型に変換
```

## TypeScriptを楽に学ぶコツ
TypeScriptは、コード量が多い中〜大規模アプリ、さらに複数の開発者が関わるチーム開発時にメリットを発揮します。

商業用のアプリはチームで開発するのが一般的なので、TypeScriptが実際のReact開発現場ではデフォルトとなっているのです。

大規模アプリやチーム開発で真価を発揮するTypeScriptを、ビギナーがひとりで勉強するにはどうすればいいのでしょうか？

「慣れること」です。

コード量が少ない簡単なアプリでTypeScriptを使って、慣れていくことです。

そして徐々に、より規模の大きなアプリでもTypeScriptを使っていきましょう。

TypeScript × React開発を始める前段階のReact自体の開発環境セットアップや、学習の進め方の全体像はこちらのガイドが参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

下記教本は、この「小規模アプリでTypeScript + Reactに慣れる」という点に重点をおいてあるので、参考にしてください。

<a href="https://www.amazon.co.jp/dp/B08XWMVX76" target="_blank" rel="noopener">

![image](../../images/commonImg/react-book1-ts-ad.png)

</a>

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B094Z1R281">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts.svg" alt="はじめてつくるReactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ with TypeScript</p>
        <p class="bc-desc">【発売から5年読まれ続けているReact × TypeScript入門書の決定版。2026年1月第3版発売。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-typescript-is-difficult-for-beginners">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-typescript-is-difficult-for-beginners)

---

# 動画と本、勉強に最適なのはどっち？【プログラミング学習】

URL: https://monotein.com/blog/videos-advantages-and-disadvantages
公開日: 2025.6.16
概要: 動画と書籍の学習メリットを比較。動画のモチベーション維持力や視覚的理解、書籍の体系性を解説。最適な教材選びも伝授

## 動画と本、どちらを選ぶべきか
私は動画と書籍、両方のフォーマットでプログラミング教材を出しているので、次の質問をよく受けます。

「動画と書籍、どっちがいいの？」

模範的な回答を言うと、「どちらにも良さがあり、どっちが向いているかは人それぞれ」となります。

私はむしろ「動画を見る」よりも「文字を読む」方が好きな人間です。

<div class="rich-card-link">
<a target="_blank" rel="noopener" href="/blog/books-advantages-and-disadvantages">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-175.png)

</div>
<div class="r-card-text">
書籍で学ぶメリットと賢い活用法【プログラミング学習】
</div>
</div>
</a>
</div>

しかし動画が持っているあるユニークな強み、書籍にはない大きなアドバンテージを認めないわけにはいきません。

それは「前に引っ張ってくれる」ことです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/videos-advantages-and-disadvantages">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/videos-advantages-and-disadvantages)

## 動画教材のユニークな強み
動画は、再生ボタンを押したら勝手に進んでいきます。

私たちはそれに追いついていかないといけません。

ここに「自分のペースで進められない」と抵抗感を覚える人もいますが、しかし私はこれこそ書籍が絶対に手にできない動画の強みだと思っています。

書籍は、自分でページをめくって前に進んでいかないといけません。メンタルエネルギーが必要です。

一方で動画は、向こうで勝手に進んでいきます。なので、こちらは必死に追いついていかないといけません。

「人間が一番成長できるのは、半歩先を進んでいる人と一緒にいるとき」と言いますが、動画はまさにこれを実現してくれます。

---

こちらにやる気がいまいち湧いていなくても、向こうが進んでいくので、追いつこうとする

▼

「追いつこう」という行動がトリガーとなって「やる気」発生

---

私たちは往々にして「行動は感情の表れ」、「感情がまずあって、次に行動が伴う」と考えていますが、「行動をしてみたら、やる気が湧いてきた」ということが実は多い。

朝、起きたときにはまったくやる気がなくても、身支度を整えたり行動をしているうちに、活力が湧いてくる。

こういうことを助けてくれるのが、書籍にはない動画教材のアドバンテージです。

---

【勝手に進んでいく ▶︎▶︎▶︎ 見ているだけでも「やらざるを得ない」状態を作れる】

## 動画学習のその他のメリット
動画教材の他のメリットは、タイムマネジメントがしやすいことです。

動画は残り時間が表示されるので、「あと〇分で終わる」とゴールを計算できます。

書籍では、「あとどれくらいで終わるのか」がわかりません。

またプログラミングの動画教材では、コードを実行した挙動を見れることもメリットでしょう。

---

【残り時間がわかる ▶︎▶︎▶︎ 計画を立てやすい】

【実際の動きを視覚で見られる ▶︎▶︎▶︎ コードの動きが理解しやすい】

## 理想の教材
動画、書籍、どちらのフォーマットにも強みがあります。

理想は、両方のフォーマットが揃っている教材です。

先日、[最新のReactとTypeScriptを学べる教材](https://monotein.base.shop/p/00005/?utm_source=/blog/videos-advantages-and-disadvantages)をリリースしましたが、これは動画と文章、両方のフォーマットで学べるようになっているので、興味があればぜひチェックしてみてください。

動画という教材フォーマットの強みが分かったところで、次は「何を・どの順番で」学べばいいかという手順も理解しておきましょう。

2026年版のReact学習ロードマップで、各ステップの全体像を確認できます▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/videos-advantages-and-disadvantages">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/videos-advantages-and-disadvantages)

---

# 書籍で学ぶメリットと賢い活用法【プログラミング学習】

URL: https://monotein.com/blog/books-advantages-and-disadvantages
公開日: 2025.6.15
概要: プログラミング初心者向けに書籍学習のメリットを解説！ブログ記事と異なり、情報が整理され、つまみ食いを防ぐ書籍の強みとは？電子書籍の更新性や活用法も紹介

## 書籍が優れている理由
書籍は文字情報なので、種類としてはブログ記事と似ています。

しかしブログ記事には無い書籍の利点は、パッケージ化されていることです。

「パッケージ化」とは....

---

「情報が一か所にまとめられ」

かつ

「理解しやすいように整理されている」

---

ということです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/books-advantages-and-disadvantages">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/books-advantages-and-disadvantages)

## つまみ食いを防ぐ書籍の構造
<a target="_blank" rel="noopener" href="/blog/difficulties-of-using-online-materials">前回の記事</a>でも触れたように、ブログ記事に書かれている情報は断片的です。

情報はネット上に散らばっており、順序もバラバラです。

ある記事から別の記事へとつまみ食いも簡単です。

むしろ、つまみ食いが推奨されているといえます。

他の記事やサイトへのリンクが記事内に貼られているからです。

このようなものを活用するには、ある程度の知識や能力が読み手の側に要求されます。

つまり、受け手側の負担が大きいのがブログ記事なのです。

一方で書籍では、情報がひとつの場所にまとめてあります。

まずこれが「つまみ食い」を防止します。

そして、集められた情報が理解しやすいように順序づけて並べてあります。

これは読み手の負担軽減となり、ビギナーにとってのメリットです。

## 書籍のデメリットとその解決策
書籍のデメリットは、みなさんご存知のように、「情報が古い」や「更新に時間がかかる」という点です。

しかしこれは主に紙の書籍のデメリットで、電子書籍の場合は必ずしもそうではありません。

私はReactやNext.jsといったフロントエンド技術の電子書籍を何冊も出していますが、変化の激しいこの業界にもかかわらず、4年前に書いた本がいまだに一番読まれています。

『はじめてつくるReactアプリ with TypeScript』という本です。

読み続けられている理由の一つは、私が中身を定期的に最新情報に更新しているためでしょう。

また電子書籍は文字で、映像も音声もないため、動画を更新するよりもはるかに簡単にアップデートできる点も大きな強みです。

「出して終わり」にしてしまう人が多いため、電子書籍も古い情報が書かれたものが多いですが、「継続的に手を入れ続ける」という点から見ると、電子書籍はとても便利なフォーマットだと私は思います。

さて、本記事では勉強素材としての書籍を見たので、次は「動画」のメリット／デメリットを見てみましょう。

<div class="rich-card-link">
<a href="/blog/videos-advantages-and-disadvantages">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-176.png)

</div>
<div class="r-card-text">
動画と書籍、勉強に最適なのはどっち？【プログラミング学習
</div>
</div>
</a>
</div>

書籍という教材の使い方が分かったところで、実際に何をどの順番で学べばいいかという全体像も確認しておきましょう。

HTML・CSSからReact・TypeScript・Next.jsまでの学習ステップを、2026年版のロードマップでまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/books-advantages-and-disadvantages">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/books-advantages-and-disadvantages)

---

# 【プログラミング初心者がハマる】ネット教材の落とし穴と解決策

URL: https://monotein.com/blog/difficulties-of-using-online-materials
公開日: 2025.6.14
概要: ネットで独学するなら知っておきたい！ネット教材でつまずく理由を解説。断片的な内容、情報過多、集中を妨げる環境の課題と解決策を紹介

## なぜネットの記事や動画で学ぶのは難しいのか
オンライン上にあるブログ記事やYouTube動画の量は、もはや人間の一生では消費できないほどでしょう。

初心者向け教材も山ほどあります。

しかし振り返れば、その圧倒的な量に比べ、「役に立ったものは多くない」というのが私の実感です。

その理由を考えてみると、次のようなことが思い浮かびます。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/difficulties-of-using-online-materials">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/difficulties-of-using-online-materials)

## ネット教材が初心者にとって難しい3つの理由
【１】断片的

【２】目移りする

【３】ブラウザで見ている

---

以下、理由を簡単に見ていきましょう。

## 【理由１】断片的
ネットの記事・動画に私たちが求めるもの、それは「サクッと終わるもの」、「軽さ」です。

「腰を据えて読む・見る」ということはありません。

そのため、量は短くなり、中身は断片的になります。

---

実は「断片的な情報」というのは、その分野について全体的な理解をすでに持っている人向けです。

その人は自分がどのような情報を求めているか、すでにある程度の予測がついており、それだけを求めているのです。

しかし全体像がまだ理解できていないビギナーにとっては、断片的な情報を得ても、「それをどう使えばいいのかわからない」となってしまいます。

## 【理由２】目移りする
ネットでは山ほど情報が出てきます。

なので、「この記事、ちょっとわかりにくいな。他にもっといいものがあるはずだ」となります。

「わからないこと」を「わかろう」としているのだから、負荷を感じるのは当然です。

しかし、この自分の内部に感じる負荷を、「他にもっといいものがある（はず）」と、外部変化で対応しようとしてしまうのです。

## 【理由３】ブラウザで見ている
これは、「スマホ（or パソコン）で見ている」とも言えます。

私たちは、本当にさまざまなことをブラウザ（スマホ／パソコン）でしています。

プログラミング勉強だけではありません。

そのため、一つのことに集中ができないのです（心理学では「スイッチング」とも呼ばれます）。

マルチタスクを強いられる環境だと言えるかもしれません。

## ネット教材の限界を乗り越えるには？
以上のように見てくると、最適な勉強教材とはどのようなものになるのでしょうか。

オンライン以外で思い浮かぶのは書籍です。

私はReactやNext.jsといったフロントエンド技術の本を多く書いているので、次は書籍（電子書籍を含む）を勉強に使うメリット／デメリットを見ていきましょう▼

<div class="rich-card-link">
<a href="/blog/books-advantages-and-disadvantages">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-175.png)

</div>
<div class="r-card-text">
書籍で学ぶメリットと賢い活用法【プログラミング学習】
</div>
</div>
</a>
</div>

<br/>


ネット教材の断片性という問題が分かったところで、「どこに何があるか」を整理したガイドを先に手に入れておきましょう。

HTML・CSSからReact・TypeScript・Next.jsまで、2026年のReact学習に必要なステップを体系的にまとめたロードマップがあります。

断片的な情報に振り回されないためにも、全体像を先につかんでおくことをおすすめします▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/difficulties-of-using-online-materials">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/difficulties-of-using-online-materials)

---

# 【プログラミング初心者向け】本当に役立つ教材の選び方

URL: https://monotein.com/blog/recommended-study-method
公開日: 2025.6.13
概要: 短く断片的な情報に頼ると非効率。プログラミング初心者が確実に理解を深められる教材の条件を体系的に解説。

## なぜオンライン教材だけでは不十分なのか
これまで、多くのプログラミングの初心者の方に教える中で気づいた勉強法について書いていきます。

---

変化が激しいプログラミング関係の勉強では、オンライン情報（主に記事と動画）を使う人が多いと思います。

私自身、HTMLやJavaScript、Reactなどの勉強を思い立ったとき、最初に目を通したものは、すぐにアクセスできるそれらのオンライン素材でした。

しかし、今ふり返ってみると、それらがあまり役立たなかった、むしろ時間を浪費していたことも多かったと感じます。

というのは、ネットの記事・動画などの大半は短いからです。

細切れで断片的なので、全体像をつかむのが難しいのです。

では、初心者におすすめのプログラミング教材とはどのようなものでしょうか？

以下の3つの条件が鍵となります。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/recommended-study-method">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/recommended-study-method)

## 初心者に最適な教材の3つの条件
【１】ある程度の長さがあるもの

【２】終わらせるまでに数日かかるもの

【３】ハンズオン形式のもの

---

それぞれについて、少し説明します。

## 長さ、時間、ハンズオン
ある程度の長さがあれば、その内容は断片的ではなく、特定の分野についてある程度カバーしている、さらに一貫性もあると推測できます。

そして「長さ」があれば、やり終えるまでに日単位の時間がかかるでしょう。

「時間の投資が必要」というのはデメリットにも思えますが、そのような歯応えのある教材を終えることができれば、「こんな長いものをやり終えた」という充実感を味わえることは確かです。

充実感は「自信」を生みます。

前へと進んでいく推進力となるもの（特に独学で大事なもの）＝「自信」です。

さらにその教材が知識の羅列ではなく、ハンズオン（作りながら学ぶ）形式であれば、完成品が手元に残るので、それも終了時の充実感を高めてくれます。

## ネット教材の落とし穴
ネットで見つかる教材（主にブログ記事と動画）は、タイムリーなことを伝えるのには最適です。

ReactやNext.jsなど、最新のフロントエンド技術の情報がすぐに見つかります。

しかしビギナーが使う学習素材としては、「難しいところがある」と私は思っています。

上に挙げた条件を満たさないことも理由ですが、他にも理由があるのです。

長くなったので、この続きは次回の記事で詳しく説明します▼

<div class="rich-card-link">
<a href="/blog/difficulties-of-using-online-materials">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-174.png)

</div>
<div class="r-card-text">
【プログラミング初心者がハマる】ネット教材の落とし穴と解決策
</div>
</div>
</a>
</div>

さて、良い教材を見つけたら、その次に必要なのは「何を・どの順番で」学ぶかという学習の地図です。

ハンズオン形式の良質な教材を最大限に活かすためにも、HTML・CSSからReact・TypeScript・Next.jsまでの2026年版学習ロードマップで全体像を先に把握しておきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/recommended-study-method">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/recommended-study-method)

---

# 韓国でも出版されました

URL: https://monotein.com/blog/korean-version-next-react-book
公開日: 2025.6.9
更新日: 2025.7.1
概要: 『動かして学ぶ！Next.js/React開発入門（三好アキ著／翔泳社）』が韓国語に翻訳され出版。海外出版の経緯や、日本語版のNext.js 15やReact 19への対応情報もまとめています。

## 韓国版リリース
昨年9月に、翔泳社より『[動かして学ぶ！Next.js/React開発入門（三好アキ著）](https://www.shoeisha.co.jp/book/detail/9784798184678)』を出版しました。

今回、その韓国語版が出版されました。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog171/korean-ver.jpg)

</div>

• https://m.yes24.com/goods/detail/145013501

まだ私の手元にはこの韓国語版が届いていないため、実感は湧いていませんが、外国で自分の本が出版されるというのは不思議な気分です。

---

***2025年7月1日追記**

翔泳社より献本をいただきました。

日本語版よりも判型は大きく、厚みは薄くなっています。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog171/korean-ver-read.jpg)

</div>

## 意外に早かった出版
昨年の秋、『動かして学ぶ！Next.js/React開発入門』が日本で出版された翌月ごろ、翔泳社の担当の方から韓国語版出版の許可依頼が届きました。

もちろん私に断る理由はなく、一も二もなく「お願いします」とお返事しましたが、そこから数ヶ月で翻訳をはじめとした種々の作業が終わり出版に至ったのは、とても早いと感じています。

## 日本語版の最新情報
なお、『動かして学ぶ！Next.js/React開発入門』の日本語版は、全国の書店で購入いただけます。

書籍内で使用しているNext.jsのバージョンは、現時点（2025年6月）で最新のバージョン15の一つ前、バージョン14ですが、バージョン15への対応情報は、翔泳社の書籍ページ内の「よくある質問」に追加情報として掲載しています。

• https://www.shoeisha.co.jp/book/detail/9784798184678

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog171/next-react-book-update-info.jpg)

</div>

この追加情報では、ReactサーバーコンポーネントやReactバージョン19の新機能など、書籍に収録されていない最新情報も紹介しています。

『動かして学ぶ！Next.js/React開発入門』を購入された方は、ぜひご覧ください。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/korean-version-next-react-book">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/korean-version-next-react-book)

---

# 勉強が楽しい……でもそれは危険信号かも？【チュートリアルヘル】の怖さ

URL: https://monotein.com/blog/tutorial-hell
公開日: 2025.6.1
概要: 勉強しているのに成長実感がない…それは「チュートリアル・ヘル」かもしれません。プログラミング学習者必見の抜け出し方と本質的な気づき。

## プログラミング学習者がハマる罠​
「チュートリアル・ヘル」という言葉があります。

実は、多くのプログラミング学習者がぶつかる大きな問題です。

しかし、ほとんどの日本人はこの言葉を聞いたことがないと思います。

Google検索でも引っかかりません。

しかし、オリジナルの英語表記「Tutorial hell」で調べてみると、大量にヒットします。

「hell」とは「地獄」なので、「チュートリアルの地獄」ということですが、一体これはどういう意味なのでしょうか？

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/tutorial-hell">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/tutorial-hell)

## 手段の目的化 

たとえば、プログラミングを勉強する多くの方は、次のような目標を持っています。

---

「キャリアチェンジをしたい」​

「エンジニアとして就職したい」

「フリーランス案件を取りたい」

---

私の生徒も、ほぼ全員がこうした目標を持っています。

このような「仕事獲得」が「目標」の場合、「プログラミング学習」とは、そこへ到達するための「手段」です。

ところが、この「手段」であるはずの勉強が、いつの間にか「目的」になってしまうことがあります。

私も経験があります。

プログラミングの勉強だけでなく、受験勉強や英語学習など、これまでの人生でしてきた勉強のなかで必ず一度は、目標が見えなくなり、勉強自体が目的化してしまうことがありました。

この「手段の目的化」。

実はこれこそが「チュートリアル・ヘル（チュートリアルの地獄）」なのです。

## 教材の無限ループ
ブログ記事、書籍、動画などの教材を一つ終えるたび、私たちは快感を覚えます。

知らなかったことを知る喜び

人生がすこし前に進んでいる実感

つまり、「自分が変わる快感」です。

どんなに小さなタスクでも、それを終えることで、ドーパミンなどの快楽物質が放出されます。

最近では「作業興奮」とも呼ばれています。

「前に進んでいる感覚」はとても気持ちが良いものですし、実際に非常に大事なことだと私は考えています。

しかし勉強をしている「目的」は、就職や案件獲得といったことのはずです。

学習素材、特にオンラインと相性が良いプログラミングの学習素材というのは、探せば無限に出てきます。

このような「教材の無限ループ」にはまってしまい、抜け出せなくなる状態。

これが「チュートリアル地獄」です。

---

余談ですが、Reactの全範囲を網羅した『Reactマスター』コースおよび、そのTypeScript版である『TypeScriptマスター with React』コースを私が作ったのは、学習者の皆さんが「チュートリアル地獄」に陥るのを防ぎたかったからです。

Reactの知識を断片的に提供するのではなく、すべてを一つにまとめたパッケージとして構成することで、「このコースひとつで完結するオールインワンの学習教材」、「このコースさえやれば、ReactとTypeScriptは十分だ」と自信を持って言える構成になっています。

詳しくは▼

[monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/tutorial-hell)

## チュートリアル・ヘルは絶対悪ではない
さて、ここまでの記述でわかるように、「チュートリアル・ヘル」は、一般的にネガティブな文脈で使われる言葉です。

しかし私は個人的に、「勉強をしていたら、そういう時期もあるよね。むしろ大切だよね」と思っています。

ご飯を食べるのも、友だちと遊ぶのも、睡眠をとるのも惜しくなるほど、勉強が楽しくてのめり込んでしまう時間。

私自身もこういう時期を人生で何度か経験しました。

あの時は、脳内でドーパミンがドバドバと出ていたのでしょう。

単なる手段であるはずの「お勉強」が完全に目的化していました。

しかし振り返ってみれば、「とっても充実していた時間」として思い出されます。

「我を忘れて勉強に没頭すること」、「無我夢中であること」と、「チュートリアル・ヘル」とは、いわば背中合わせ、紙一重の関係にあるのだと思います。

さて、チュートリアルヘルにそもそも陥らないためには、学習の「ゴールと順番」を明確にすることが大切です。

HTML・CSSからReact・TypeScript・Next.jsまで、2026年のフロントエンド学習のロードマップを確認して、学ぶべき全体像をつかんでおきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/tutorial-hell">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/tutorial-hell)

---

# 【2026年2月版】できない？Vercelの自動生成ドメインの変更方法

URL: https://monotein.com/blog/vercel-domain-change
公開日: 2025.5.29
更新日: 2026.2.27
概要: Vercelの自動生成ドメインを変更する方法が分からない方必見！ダッシュボードから設定する最新の裏技手順を、2026年2月時点の仕様に沿って紹介します。

## Vercelのドメインが変更できない
先日Vercelを使っていて、ドメイン変更機能が見当たらないことに気づきました。

しかし実は、変更する方法がまだあるので、今回はそれを紹介します。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/vercel-domain-change">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/vercel-domain-change)

## Vercelが自動生成するドメインと、カスタムドメイン

これまでにVercelを使ったことのある人はご存知だと思いますが、Vercelでは2種類のドメインが使えます。

---

• Vercelが自動生成したドメイン

• 独自ドメイン（monotein.comやapple.comなど）

---

従来Vercelでは、上記1つ目の「自動生成ドメイン」も、自分の好きな文字に変更できていました。

これは、Vercelダッシュボード画面上部の「Settings」→「Domains」を開くと、わかりやすいボタンがありました。

しかし2026年2月現在、見当たりません。

私も一瞬、「もう変更できないのかな」と思いましたが、以下の方法で可能でした。

## ドメインの変更方法
Vercelダッシュボード画面上部の「Settings」を押し、Project Settings画面を表示させます。

そして左側から「Domains」を選択し、「Add Domains」ボタンを押しましょう。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog168/1.jpg)

</div>

好きなドメインを入力します。

ここで注意してほしいのは、末尾に`.vercel.app`とつけることです。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog168/2.jpg)

</div>

次のような画面が表示されます。ここで特に設定することはないので、「Save」ボタンを押下しましょう。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog168/3.jpg)

</div>

そして、一番最初に自動生成されたドメインを消すため、右側の「・・・」をクリックし、「Delete」を選びましょう。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog168/4.jpg)

</div>

これで完了です。

この方法がいつまで使えるか分かりませんが、少なくとも2026年2月の時点では使えるので、ぜひ試してみてください。

デプロイ後のドメイン設定まで含め、Next.jsの開発全体の流れ（セットアップからRSC・Server Actionsの活用まで）をまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/vercel-domain-change">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/vercel-domain-change)

---

# Reactマスター／TypeScriptマスターの新版（動画バージョン）をリリース

URL: https://monotein.com/blog/react-master-video-release
公開日: 2025.3.29
更新日: 2026.5.11
概要: Reactの全範囲をカバーした動画教材『Reactマスター』をリリース！初心者から最新バージョン19まで徹底解説。JavaScript基礎からReact的な思考力まで身につけ、AI時代に自信を持ってコードを書こう。増補版も好評発売中。

## *増補版リリースに合わせて追記
好評のReactマスターおよびTypeScriptマスターの【増補版】をリリースしました。

増補版では、学習専用サイトおよびテキスト版が利用できます。

さらに3大特典も付属。

詳しくは本記事で説明します。

また2026年5月に、教材の評価やあゆみについての振り返りの記事を書きました。参考にどうぞ▼

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

## React・TypeScript教材の新版をリリース
昨年のリリース以来、好評の「Reactマスター」「TypeScriptマスター」の新版をリリースしました。

今回はリクエストの多かった動画版でのご提供となります。

![image](../../images/commonImg/react-master-video-square-ad-2026jul.png)

![image](../../images/commonImg/typescript-master-video-square-ad-2026jul.png)

新しくリリースされたReactバージョン19の情報をプラスし、さらに内容も大幅に拡充しています。

▼ 詳しくはこちらから

• [Reactマスター](https://monotein.base.shop/p/00005/?utm_source=/blog/react-master-video-release)

• [TypeScriptマスター](https://monotein.base.shop/p/00006/?utm_source=/blog/react-master-video-release)

## 【増補版】学習専用サイトとテキストの提供
増補版では、学習に専念するための専用サイトを用意しました。

集中できる環境で学習できます。

![image](../../images/commonImg/react-master-video-square-ad4.png)

さらに、全動画に高品質なテキストが付いています。

AIの自動文字起こしではなく、すべて私自身が書き下ろした文章です。

図解やコードも挿入済みで、動画なしの文章だけでもしっかり理解できます。

電車内やカフェなどの音を出せない場所、動画視聴のむずかしい環境でも、学習をスムーズに進められます。

![image](../../images/commonImg/react-master-video-square-ad5.png)

これにより、次に説明する「ブレンディッド・ラーニング」も可能です。

## 動画と文章のブレンディッド・ラーニング
ブレンディッド・ラーニング（Blended Learning）とは、異なる学習スタイルを組み合わせて（＝ブレンドさせて）定着率を高める方法です。

例えば；

---

• ライブ講義とオンライン動画

• 紙の教材と電子教材

• グループワークと個人ワーク

• 座学と実技

そして、動画と文章

---

動画で学んでいる時と、文章から学んでいる時は、使っている感覚器官も、脳の部位も異なります。

脳に異なる刺激が与えられることで、より記憶が定着し、理解が深まるのです。

![image](../../images/commonImg/react-master-video-square-ad6.png)

本React、TypeScriptマスター教材でも、「1周目は動画、2周目は文章」と変化をつけることが可能で、学習効果を高められる構成になっています。

## 増補版の3大特典
増補版では次の特典が利用できます。

• 追加コンテンツの無料利用\
• 直接サポート\
• 永久アクセス補償

## なぜReact・TypeScriptを学ぶのか？
React・TypeScriptを学ぶとは、単にコードの書き方や、Reactで出来る機能を覚えることではありません。

「React的な考え方」を身につけることです。

この【Reactメンタルモデル】が一度身につくと、初見のReactコードでも、AIの書いたコードでも、適切な判断ができるようになります。

また他のフレームワークを学習する時でも、ゼロからではなく、Reactで学んだ知識・経験を応用できるようになります。

「メンタルモデル」とは、抽象的で、より根本的な能力だからです。

土台なのです。

そのため、「上に載せるモノ」が変わっても応用が利く。

「思考力」、「考える力」、「判断力」というものが、いつの時代でも、そしてどこであっても必要とされるのはそのためです。

本教材で、AI時代に必要となっているフロントエンド開発スキルをすべて身につけましょう。

▼ 詳しくはこちらから

• [Reactマスター](https://monotein.base.shop/p/00005/?utm_source=/blog/react-master-video-release)

• [TypeScriptマスター](https://monotein.base.shop/p/00006/?utm_source=/blog/react-master-video-release)

![image](../../images/commonImg/react-master-video-square-ad-2026jul.png)

![image](../../images/commonImg/typescript-master-video-square-ad-2026jul.png)

---

# Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで

URL: https://monotein.com/blog/react-server-components-complete-guide
公開日: 2025.3.24
更新日: 2026.6.15
概要: Reactサーバーコンポーネントを一段深く解説。ビギナー向けのやさしい説明。メリット、デメリットだけでなく、「なぜそうなるのか」がわかります。SPA、SSRといったものに触れるので、Reactサーバーコンポーネントが作られた経緯が明らかになり、Reactサーバーコンポーネントをしっかり理解ができるようになります

## この記事ですっかり理解できること
本記事を読めば、以下のことが分かります。

• Reactサーバーコンポーネント

• ハイドレーション

• サーバーサイド・レンダリング

• SPA（シングルページ・アプリケーション）

• Reactサーバーコンポーネント・ペイロード（RSCペイロード）

• ストリーミング

• パーシャル・レンダリング

など

## Reactサーバーコンポーネントはわかりにくい
「Reactサーバーコンポーネント」という名前を聞くようになってから、数年が経ちます。

しかし、「いまいちReactサーバーコンポーネントの仕組みがわからない....、と感じている人は多い」というのが私の印象です。

実際に私自身、最初の頃はReactサーバーコンポーネントがどういうものなのかわからないまま使っていました。

わからなくても、「なんとなく」使うことはできるからです。

---

ネットには、Reactサーバーコンポーネントについての記事がたくさんあります。

私もそういったものに目を通していました。

しかしそのほとんどは、「Reactサーバーコンポーネントのメリット／デメリット」といった、いわば「結果」の話に終始しています。

私が疑問に思っていた「なぜそうなるのか？」、「なぜそのようなメリット／デメリットが出てくるのか？」という一段深いところを解きほぐしたもの、さらにそれがビギナー向けにわかりやすく書いてあるものは、ほとんどありませんでした。

そこで本記事では、類似テクノロジーとの比較を通して、Reactサーバーコンポーネントを初心者向けにわかりやすく紹介していきます。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-server-components-complete-guide">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-server-components-complete-guide)

## Reactサーバーコンポーネント概略
Reactサーバーコンポーネントは、2020年に発表されたReactの新しい機能です。

まずNext.jsバージョン13（2022年10月リリース）で利用可能になり、Reactバージョン19（2024年12月リリース）ではReact本体からも安定版として提供が始まりました。

ReactフレームワークであるNext.jsでの提供が先行していたことから、現時点では依然としてNext.jsがReactサーバーコンポーネントをスムーズに使うためのほぼ唯一の選択肢です。

この点は後ほど確認します。

Reactサーバーコンポーネントとはその名前のとおり、サーバー側でReactが動いているということですが、従来のReactコンポーネント（＝Reactクライアントコンポーネント、くわしくは<a href="/blog/rsc-and-rcc-name">こちら</a>）とは何が違い、どのようなメリット／デメリットがあるのでしょうか。

## Reactサーバーコンポーネント以前のテクノロジー
遠回りのように思えますが、「過去」を振りかえることで、「現在」はよりクリアに見えるようになります。

なので、Reactサーバーコンポーネント登場以前のテクノロジーを見ていきましょう。

---

「Reactサーバーコンポーネント」のすこし前に、「サーバーサイドレンダリング」というものがありました。

名前を聞いたことのある人は多いと思います。

そして、どちらにも「サーバー」という言葉が使われているので、「似たような技術なのかな？」と感じる人も少なくありません。

なので、まずはこの「サーバーサイドレンダリング」から理解をしていきます。

しかし実は、「サーバーサイドレンダリング（SSR／Server Side Rendering）」の比較対象として適切なのは、シングルページ・アプリケーション（SPA／Single Page Application）というものです。

これらのテクノロジーの名が広まったのは、SPAが2010年ごろ、SSRが2016年ごろ、RSC（React Server Components）が2022年ごろですが、新しい技術というのはその前にあったテクノロジーが抱えていた問題を改善したものとして出てきます。

時系列で整理したものが次表です。

|    |  登場時期   |
| :----:|:------:|
|  MPA（マルチ・ページ・アプリケーション） | SPA以前（2000年ごろ）| 
|  SPA（シングル・ページ・アプリケーション） | 2010年ごろ|   
|  SSR（サーバー・サイド・レンダリング） | 2016年ごろ|  
|  RSC（Reactサーバー・コンポーネント） | 2022年ごろ| 

そして多くの場合、新しい技術は必ずしも古い技術を完全に置き換えるものではなく、むしろ補完する形で登場します。

これはそのままSPAとSSRの関係にも当てはまるので、まずこの2つを比較していきましょう。

最初にSPA（Single Page Application）を見ていきます。

## SPAのメリット／デメリット
SPAで多くの人がまず疑問に思うのが、その名前です。

アプリ内に複数のページがあるのに（`/home`、`/about`など）、なぜ「シングル・ページ」という名前がついているのでしょうか。

これまでに「React + Vite」や「create-react-app」などを使ったことのある人は、フォルダ内に`index.html`というファイルがあったことに気がついたかもしれません。

SPAはこの`index.html`という一枚のHTMLファイル（シングル・ページ）を下敷きとして、その上でJavaScriptを使ってページの描画を行っています。

ページが切り替わったり、URLが変わったりするのはすべてJavaScriptがそのように見せているだけで、実際に使われているのは一枚の`index.html`だけなのです。

これが「シングル・ページ」という名前の由来です。

JavaScriptで切り替えているSPAには「ページ移動のスピードが速い」という特徴があります。

それではSPA以前は、どのようにページ移動を行っていたのでしょうか。

---

SPA以前の仕組みでは、ページ移動時にはクライアント（ブラウザ）がサーバーにリクエストを行い、HTMLとJavaScriptを受け取って表示するという流れでした。

ページが移動するたびに毎回このやりとりを行うため、ページ表示に時間がかかっていたのです。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px; ">

![mpa.png](../../images/singleBlogPageImages/blogArticleImages/rsc/mpa.png)

</div>

<span style="font-style: italic;">（*このような従来型のアプリケーションを、SPA（Single Page Application）の対比としてMPA（Multi Page Application）と呼ぶことがあります。）</span>

---

SPAでは、ページ描画をJavaScriptがクライアント（ブラウザ）側で行うため、ページ移動のたびにサーバーとやりとりをする必要はなく、ページをすばやく表示できます。

しかしこのマイナス面は、ページの初回表示に時間がかかることです。

サーバーは最初のリクエストがあったとき「からっぽのHTMLファイル（`index.html`）」と、大量のJavaScriptをクライアントに送ります。まずここで時間がかかります。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![spa.png](../../images/singleBlogPageImages/blogArticleImages/rsc/spa.png)

</div>

それらをクライアントが受け取ったあとには、HTMLファイルを下敷きにしてページをJavaScriptで組み立てる作業が始まりますが、ここでもさらに時間がかかります。

この結果、ブラウザには何もない真っ白なページ（＝からっぽのHTMLファイル）がしばらく映っていることになるのです。

<div style="background: #d6d6d6; padding: 30px 10px 10px 10px; border-radius: 10px;">

<span style="font-size: 20px; font-style: italic;">「からっぽのHTMLファイル」のコード例</span>

SPAの初回リクエスト時に送られてくる「からっぽのHTMLファイル」は次のようなものです。

`<body>`タグ内にはJavaScriptを読み込むコードしかなく、ブラウザで表示する具体的なものが何もないのがわかります。

```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="お天気アプリです">
        <title>SPA</title>
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="/main.js"></script>
    </body>
</html>
```

</div>

## SSRのメリット／デメリット
このようなページ初回表示時の問題を解決するために登場したのがSSR（Server Side Rendering）です。

SSRでは初回リクエストがあったとき、HTMLを一部だけすばやく組み立て、これとJavaScriptを送り返します。

送っているものだけを見ると、SPAと同じ「HTML + JavaScript」ですが、このHTMLファイルはSPAのような「からっぽ」のものではなく、サーバー側で一部組み立てたもので、最低限必要なデータが含まれています。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![ssr.png](../../images/singleBlogPageImages/blogArticleImages/rsc/ssr.png)

</div>

クライアント（ブラウザ）は「一部組み立てたHTMLファイル」を直ちに表示することができるので、ユーザー体験はよくなります。

<div style="background: #d6d6d6; padding: 30px 10px 10px 10px; border-radius: 10px; margin-bottom: 35px;">

<span style="font-size: 20px; font-style: italic;">「一部組み立てたHTML」のコード例</span>

SPAのHTMLファイルとは異なり`<body>`タグ内にブラウザで表示できるものがある、つまり「からっぽ」ではないのがわかります。

```html
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="description" content="ゲストさん、こんにちは">
        <title>SSR</title>
    </head>
    <body>
        <div id="app">
            <h1>ようこそ！</h1>
            <p>こんにちは、<span id="username">ゲスト</span> さん。</p>
        </div>
        <script type="module" src="/main.js"></script>
    </body>
</html>
```

</div>

とはいえ、この時点ではまだ、ブラウザに映っているページは完全なものではありません。

サーバーから送られたJavaScriptを使って、ページを完全なものに組み立てる作業が残っています。

この作業は主に`<button>`や`<form>`といったユーザーとのやりとりが発生するところにJavaScriptをつないでいく工程で、「ハイドレーション」と呼ばれます。

<span style="font-style: italic;">(*ハイドレーションとは「水分補給」という意味です。サーバーから送られてきた「乾いたHTMLの骨組み」に、ダイナミックな機能を付与するJavaScriptを与えて「フレッシュで生気みなぎるもの」へと変えるイメージです。)</span>

---

ここで重要な点は、SPAとSSRの最大の違いはこの初回表示時の仕組みだけで、基本的にはSSRもハイドレーションが済んだあとにはSPAになることです。

ページ移動時にサーバーとのやりとりは行われず、JavaScriptでページを描画します。

このようにSPAとSSRの関係は、「SPAの後継がSSR」、「SPAの進化版がSSR」という直列的なものではなく、並列的、あるいは相互補完的なものなのです。

さて、すでに気がついた人もいると思いますが、SSRを使っても「クライアントが使うJavaScriptをとにかくすべて送る」という点は同じです。

この部分に手を加えたものがRSC（React Server Components）になります。

## Reactサーバーコンポーネントの仕組み
RSCにおいても、SSRのように初回リクエスト時に「一部組み立てたHTMLファイル」と「JavaScript」を送るという点は同じです（つまりRSCとSSRは一緒に使うことができます）。

しかし送るJavaScriptの量が違います。

ブラウザで必要な量だけにしぼって送るのです。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![rsc-1.png](../../images/singleBlogPageImages/blogArticleImages/rsc/rsc-1.png)

</div>

なぜこのようなことが可能かというと、初回リクエストがあったとき、サーバーはRSCのコードを実行し、この段階でJavaScriptを処理しているからです。

ここでクライアントに送るJavaScriptの量が必要最低限になるよう絞っています。


このJavaScript削減を実際に確認したい人は、下記記事に目を通してください▼

<div class="rich-card-link">
<a href="/blog/nextjs-react-server-component-less-size">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-145.png)

</div>
<div class="r-card-text">
【Next.js】Reactサーバーコンポーネントのメリットを実際に確認してみました
</div>
</div>
</a>
</div>

<br/>

では、ページ移動時にはどうなのでしょうか。

先ほど見たSPAとSSRではサーバーとのやりとりがなく、これがページ移動のスピードが速い理由でした。

実はRSCでは、ページ移動時にはサーバーとのやりとりが発生します。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![rsc-2.png](../../images/singleBlogPageImages/blogArticleImages/rsc/rsc-2.png)

</div>

図を見るとリクエストが送られており、SPA以前（＝MPA）に戻ったようですが、大きな違いがあります。

RSCでは「ページの変更箇所だけを部分的に更新する」ということが可能なのです。

---

MPAでは新しいページを表示するとき、ページは全体がリロードされていました。

サーバーから毎回、新しいページに必要なHTMLとJavaScriptを受け取り、それでページを上書きするように表示していたからです。

そのため、例えばすべてのページで表示されるヘッダーやフッターも、クライアント側で使いまわされるのではなく、毎回サーバーから送られてきていました。

一方、RSCにおけるページ移動時には、「変更箇所だけを部分的に更新する」という方法が使われます（＝Partial Rendering）。

<div style="border: 0.1px solid grey; border-radius: 20px; margin-bottom: 30px;">

![rsc-3.png](../../images/singleBlogPageImages/blogArticleImages/rsc/rsc-3.png)

</div>

この結果、サーバーから送られてくるものはごく少量で済み、さらにページ全体がリロードされることもなくなります。

なお、ここでサーバーから送られてくるものはHTMLやJavaScriptではなく、最適化・軽量化された「RSC Payload」と呼ばれるものです。

<div style="background: #d6d6d6; padding: 30px 10px 10px 10px; border-radius: 10px; margin-bottom: 35px;">

<span style="font-size: 20px; font-style: italic;">「RSC Payload」のコード例</span>

RSC Payloadとは下記のようなものです。HTMLではなくJSON形式のデータであるのがわかります。

```json
{
    "data": {
        "children": [
            {
                "type": "h1",
                "key": null,
                "props": {
                    "children": "Hello, Server Components!"
                }
            },
            {
                "type": "p",
                "key": null,
                "props": {
                    "children": "This is rendered on the server and streamed to the client."
                }
            }
        ]
    },
    "metadata": {
        "status": "complete"
    }
}
```

</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-server-components-complete-guide">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-server-components-complete-guide)


## Reactサーバーコンポーネントの仕組み（データベース連携時）
ここまではっきりとは書いていませんでしたが、今まで話したRSCの仕組みはすべて、実は「データベースからデータの取得をしない場合のRSCの仕組み」でした。

RSCでポートフォリオサイトやコーポレートサイトといった「普通のウェブサイト」、「静的なウェブサイト」を作った場合のRSCの仕組みです。

しかしReactアプリケーションでは、「データベースからデータを取得して表示する」というデータベースとの連携作業を行うのが一般的です。

なので、ここからはデータベースがある場合のRSCの仕組みについて見ていきましょう。

ここでも、以前のテクノロジーからの発展の流れを見て、RSCの何が新しいのかを確認します。

まず最初はSPA以前のMPAです。

---

MPAでは、リクエストがあったときには毎回データベースからデータを取得し、そのデータを組み込んだページをHTMLとJavaScriptで作って、クライアントに送っていました。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![mpa-with-database.png](../../images/singleBlogPageImages/blogArticleImages/rsc/mpa-with-database.png)

</div>

これがSPAになると、ページ移動のたびにリクエストを送る必要はなくなりました。

しかしページにおいてデータベースからのデータが必要な場合には、リクエストを送る必要があります。

例えば初回アクセス時に表示するページでデータが必要な場合には、最低でも2回のリクエストが行われるのです。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![spa-with-database.png](../../images/singleBlogPageImages/blogArticleImages/rsc/spa-with-database.png)

</div>

簡略化のため、図では同一のサーバーに毎回リクエストをしているようになっていますが、実際にはたとえばGoogle Fontsのリクエスト、Googleアナリティクスのリクエストなど、異なるサーバーに対して複数のリクエストが送られています。

SPAにおいてJavaScriptはすべてクライアント側で実行されるため、サーバーから送られてきた「大量のJavaScript」を受け取ったあと、`fetch()`のデータ取得やGoogle Fontsの取得といったリクエストが行われるのです。

実際に私たちはよくこの場面を目撃しています。

ウェブアプリを開いたとき、ローディングのアニメーションがまず表示されることがあります（下図参照）。

あれはデータ取得が初回リクエストとは別に行われているからなのです。

![loading-spa.png](../../images/singleBlogPageImages/blogArticleImages/rsc/loading-spa.png)

次はSSRです。

SSRとSPAの違いは初回リクエスト時のみなので、ここでもクライアントからデータ取得のリクエストが送られています。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![ssr-with-database.png](../../images/singleBlogPageImages/blogArticleImages/rsc/ssr-with-database.png)

</div>

さて、ここまでSPA、SSRと見てきて気がつくのは、リクエストが複数回行われていることです。

ここをもっと効率化できないかと注目したのがRSCです。

RSCではその名前の通り、Reactはサーバーで実行されるので、このときにデータベースからデータ取得を行ってしまえば効率がよさそうです。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![rsc-with-database-1.png](../../images/singleBlogPageImages/blogArticleImages/rsc/rsc-with-database-1.png)

</div>

しかしここだけだと、MPAとの違いは大きくないように見えます。

思い出してもらいたいのは、RSCではページの部分的変更を行えることです。

さらにRSCは、「データを取得しながらクライアントに渡していく」というストリーミング（Streaming）も行えます。

図にすると次のようになっているのです。

<div style="border: 0.1px solid grey; border-radius: 20px; padding-top: 35px;margin-bottom: 35px;">

![rsc-with-database-2.png](../../images/singleBlogPageImages/blogArticleImages/rsc/rsc-with-database-2.png)

</div>

たとえばスマートフォンで音楽を聴くとき、2つの方法があります。

---

• mp3化した音源をインターネットからダウンロードする方法

• Spotifyなどのストリーミングサービスを使う方法

---

mp3方式では、一度ダウンロードしてしまえば、ネット環境にいなくても使えます。

その音楽がmp3というひとつの完結したもの、いわばパッケージ化されたものとしてまるごとスマートフォンに入っているからです。

一方でストリーミング方式では、音楽再生中にはネット接続が必要になります。

「ストリーム（stream）」の意味は「（川のような）流れの途切れないもの」ですが、ストリーミング方式では音楽のデータがスマートフォンに継続的に流れ込んできているからです。

MPAにおけるデータベースからのデータ取得とは、mp3を使ったダウンロード方式に似ています。

サーバーはクライアントに、データを一括で送っていたからです。「完成品」を渡していたのです。

一方でRSCのストリーミングは、「未完成でも、いや一部でもいいから、とにかく早くクライアントに渡していく」というものです。

この結果、クライアント（ブラウザ）には、一部であってもデータがすぐに表示されていくので、ユーザー体験は向上します。

---

ストリーミングの例を見てみましょう。

たとえばページが「ヘッダー」、「サイドバー」、「ユーザーのリスト」、「検索履歴」の4つから構成され、それぞれにデータベースから異なるデータが必要だったとします。

![streaming-example-1.png](../../images/singleBlogPageImages/blogArticleImages/rsc/streaming-example-1.png)

MPAでは、すべてのデータを取得し、ページとしてしっかり完成してから、サーバーからクライアントに送っていました。

一方RSCでは、ページの部分的更新と、ストリーミングによる継続的なデータ取得が可能なので、ユーザーは流れ込んでくるデータをその都度見ていくことができます。

データの取得度合いを色の濃度で表したものが下図です。

![streaming-example-2.png](../../images/singleBlogPageImages/blogArticleImages/rsc/streaming-example-2.png)

RSCでは部分的更新とストリーミングにより、ひとつのページにはデータの取得度合いの異なるコンポーネントが混在します。

この結果ユーザーは、たとえ一部であってもデータをすぐに目にすることができるのです。

アプリが高速でスルスルと動いているように感じられるでしょう。

RSCの仕組みがわかったので、次はRSCのメリット／デメリットを見ていきましょう。

## Reactサーバーコンポーネントのメリット
Reactサーバーコンポーネントの特徴を2つ挙げるとすると、まず「サーバー側で動く」、もうひとつが「レンダリングを1回しか行わない」です。

多くのアプリケーションにはログイン機能がついており、ユーザーのメールアドレスやパスワードといった機密情報を扱うことが一般的ですが、RSCではログイン処理などをすべて、ブラウザよりも安全性の高いサーバー側で行います。

そしてクライアント（ブラウザ）には、Reactのコードを解釈し、レンダリングを実行したあとの結果（RSC Payload）を送ることになり、セキュリティ性が高くなります。

また「レンダリングを1回しか行わない」ということは、レンダリングを制御する必要がないことを意味します。

レンダリングの制御は、長い間React開発のボトルネックのひとつでした。

外部データの取得によって変わりうる、ユーザーの画面の表示をしっかりコントロールする必要があるためです。

しかし「レンダリングを1回しか行わない」という制約があるならば、レンダリングに細かな注意を払う必要はなくなります。

そしてレンダリングを1回しか行わず、そのあと変化しないとは、つまりユーザーの操作にも反応しないということなので、`onClick`などのユーザー操作機能がRSCでは使えないことの理由へとつながってきます。

「サーバー側で動く」、「レンダリングを1回しか行わない」ということの結果として、RSCではデータベースからのデータ取得と操作が、よりダイレクトに、かつより量の少ないコードで行えるようになっています。

「よりダイレクト、より量の少ないコードでデータ取得」を実際に確認したい人は、下記記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/rsc-and-rcc-with-code-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-162.png)

</div>
<div class="r-card-text">
【Next.js】Reactサーバーコンポーネントの動きをコードで確認しよう
</div>
</div>
</a>
</div>

<br/>

## Reactサーバーコンポーネントのデメリット
メリットが多いように見えるRSCですが、もちろんマイナス面もあります。

まずアプリの構造が複雑になることです。

RSCは比較的新しいテクノロジーであり、使い方のベストプラクティスがしっかり確立されているわけではありません。

さらにアプリ内にRSCとRCCという2種類のコンポーネントが共存するため、それぞれをどのように組み合わせるのかを考える必要もあります。

これは学習コストの高さ、チーム開発における個々のスキル差といったことにつながり、さらに開発環境構築の難しさにも波及します。

Reactバージョン19からRSCは安定版として提供されていますが、実際に本番環境でRSCを使うとなると、現時点での現実的な選択肢はNext.jsだけになります。

Node.jsのインストールとブラウザだけで基本的に事足りていた従来のRCC開発とは違って、RSCにはバンドラー、ルーター、そしてサーバーの高度な連携が必要になるからです。

しかしすべてのReactアプリに、Next.jsのようなフルスタックフレームワークが必要かというと、そういうわけではありません。

例えば社内向けの管理アプリや、データ操作ツールといったものは一般向けのアプリケーションではなく、SEOなどを考慮しなくてもいいので、React + ViteでつくるSPAでも十分でしょう。

一方で、一般向けの大規模アプリでは、パフォーマンス性やセキュリティ、そしてSEOといったことが重要になるため、Reactフレームワークの利用がより現実的な選択肢となるでしょう。

アプリケーションの規模、SEOの重要性、リソース（時間と、開発チームのスキルレベル）といったことが、どのReact開発ツールを使うかを決める上での大きなファクターとなります。

Next.jsの全体像と使い方はこちらのガイドにまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

本記事が、Reactサーバーコンポーネントの理解を深める手助けとなれば幸いです。

RSCの仕組みをより深く理解できたところで、MPA・SPA・SSRからRSCまでの技術の流れとReact 19の新機能（useActionState、useOptimisticなど）を体系的にまとめたガイドがあります。

開発全体の文脈の中でRSCを位置付けたい方は、こちらも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-server-components-complete-guide">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-server-components-complete-guide)

---

# 『はじめてつくるReactアプリ（with TypeScript）』改訂第2版／Reactバージョン19

URL: https://monotein.com/blog/update-2025-react-1-book-ts-vite
公開日: 2025.3.21
更新日: 2026.1.30
概要: 2025年3月19日、『はじめてつくるReactアプリ』とTypeScript版の改訂第2版を発売。HTMLとCSSの知識だけで始められるReact開発を、人気のハンズオン形式で解説。React 19の新情報やViteの最新バージョンに対応し、初心者にもわかりやすく進化。基礎をしっかり学びつつ、新機能も押さえられる一冊

## *第3版リリース（2026年1月追記）

**2026年1月29日に、「第3版」を発売しました。**

**くわしくは下記記事をご覧ください。**

<div class="rich-card-link">
<a href="/blog/update-2026-react-1-book-ts-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-224.png)

</div>
<div class="r-card-text">
『はじめてつくるReactアプリ（with TypeScript）』第3版
</div>
</div>
</a>
</div>

## React入門書の改訂第2版リリース
2025年3月19日に、拙著『はじめてつくるReactアプリ』と、そのTypeScript版『はじめてつくるReactアプリ with TypeScript』の改訂第2版をリリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">【2026年1月第3版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B094Z1R281">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts.svg" alt="はじめてつくるReactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ with TypeScript</p>
        <p class="bc-desc">【発売から5年読まれ続けているReact × TypeScript入門書の決定版。2026年1月第3版発売。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

## 以前の版からの変更点
今回の改訂第2版では、Reactバージョン19の情報とコードの追加を行っています。

書籍内で使用している開発ツールViteも最新バージョンが6なので、画像変更等のアップデートをしました。

それ以外の箇所においても、情報が古くなっていた記述の修正を行っています。

## Reactバージョン19について
現在のReactの最新バージョンは、2024年末に安定版がリリースされたバージョン19です。

このバージョン19を使って、本の内容を全面的に書き直すことも考えました。

しかしまだバージョン19のリリースから日が浅いこと、くわえて普段目にするReactコードの大部分はバージョン19以前のものであることを踏まえ、今回の改訂第2版ではバージョン19の情報は「発展事項」として扱っています。

書籍にも書いてありますが、本書で開発するアプリに関係する部分でいうと、バージョン19で導入された新機能は「これまでのReactコードを置き換えるもの」ではなく、むしろ「書けるコードの選択肢を増やすもの」です。

さらにビギナー向け入門書であるこの本で扱っていることは、「変わりやすい最先端の部分」ではなく、「ベースとなる基礎部分」です。

本書で学ぶ内容がバージョン19以降で役に立たなくなるということはないため、バージョン19はコードの簡単な紹介に留めてあります。

## こぼれ話など
本書の初版リリースは2021年3月です。

電子書籍であることを活かして、発売以後も定期的に手を入れて内容を更新していましたが、その中でも一番大きなアップデートはちょうど一年前でした。

React開発ツールを、初版以来使っていた「create-react-app」から「React + Vite」に変更するとともに、全面的な刷新を行ったのがこの時です（くわしくは下記記事参照）。

<div class="rich-card-link">
<a href="/blog/update-react-1-book-ts-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-147.png)

</div>
<div class="r-card-text">
『はじめてつくるReactアプリ（with TypeScript）』第2版をリリース／Vite使用
</div>
</div>
</a>
</div>

変更点が大きかったので、これを「第2版」として2024年4月に発売しました。

それからすぐに発表されたのが、Reactバージョン19のベータ版です。

ベータ版のうちは、その情報を書籍に反映させる必要性はそこまで高くないと考えていましたが、2024年末にベータは安定版となりました。

このバージョン19ではさまざまな新機能が導入されています。

本書はアプリを作りながら進めるハンズオン形式をとっていますが、このバージョン19の新機能を全面的に使ってアプリ開発を行うことも可能です。

そのため、バージョン19を使った内容に書き直すべきかしばらく迷っていました。

読者の立場からすれば、最新情報を知りたいと思うのが普通だからです。

しかし上述したように、バージョン19がリリースされたとはいえ、普段目にするコードの大半は19以前のものであること、そして本書はビギナー向け入門書であり、「最新」よりも「基礎」に比重を置いているため、最終的にバージョン19で全面的に書き直すことは今回は控えました。

---

Reactに限りませんが、新しいバージョンが出たとしても、それへの切り替えには年単位の時間がかかります。

たとえばNext.jsは、2022年10月リリースのバージョン13でAppフォルダを導入しました。

Appフォルダ導入は、それまでのNext.jsのフォルダ構成やコードの書き方を変えてしまう非常に大きなアップデートでしたが、それから2年以上たった現在でも、まだAppフォルダ以前のコードを目にすることが少なからずあります。

このようにコードの切り替えには時間がかかることを踏まえ、今回の書籍のアップデートでは、最新のReactバージョン19は発展的事項として扱い、コードの簡単な紹介にとどめています。

なお、Reactバージョン19についてくわしく知りたい方は、下記教材をご覧ください。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/update-2025-react-1-book-ts-vite">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/update-2025-react-1-book-ts-vite)

---

# 明治時代とReactコンポーネント

URL: https://monotein.com/blog/rsc-and-rcc-name
公開日: 2025.3.8
概要: Reactクライアントコンポーネントとは、従来からあるReactコンポーネントのことです。しかし以前からそう呼ばれていたわけではありまえん。Reactサーバーコンポーネントが登場してから、そう呼ばれるようになりました。区別をするためです。それぞれには、できることとできないことがあります。

## RSCとRCCの名前
Reactクライアントコンポーネント（RCC）とは、Reactサーバーコンポーネント（RSC）登場以前から使われている「従来のReactコンポーネント」のことです。

とはいえ、RSC登場以前からRCCという名前が存在していたわけではありません。

明治時代、開国をして外国の絵（洋画）が日本に入ってきたとき、それと区別する目的で従来から日本にあった絵に「日本画」と名前をつけましたが、RCCという名前も、「従来からあったもの」を「新しいもの（＝RSC）」と区別する目的で作られた名です。

RSCはNext.jsのデフォルトのコンポーネントとして使われていることもあり、「RCCを使うことは避けた方がいい」という意見を聞くことがあります。

しかしRSCはRCCを置き換えるものではなく、相互補完的に使っていくものです。

できることと、できないことがそれぞれにあるからです。

|     |     RSC（Reactサーバーコンポーネント）  | RCC（Reactクライアントコンポーネント） |
| :----:|:------:|:------:| 
|  データベースからデータを取得する | ○|  ×| 
|  onClickやonChangeなどのユーザー操作機能 |× | ○ | 
|  useStateやuseEffectなどのHooks利用 | ×| ○ | 

Reactサーバーコンポーネントの仕組みやSPA、SSRとの違いなどは、下記記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/react-server-components-complete-guide">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-165.png)

</div>
<div class="r-card-text">
Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで
</div>
</div>
</a>
</div>

<br/>

RSCとRCCの使い分けが分かったところで、RSCの仕組みとReact 19の新機能（useActionState、useOptimisticなど）をまとめて理解したい方は、こちらのガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

RSCとRCCの成り立ちが分かったところで、Next.js全体の開発の流れ（セットアップ・AppフォルダのしくみからServer Actionsの活用まで）はこちらのガイドで確認できます▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/rsc-and-rcc-name">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/rsc-and-rcc-name)

---

# 【Next.js】Reactサーバーコンポーネントの動きをコードで確認しよう

URL: https://monotein.com/blog/rsc-and-rcc-with-code-nextjs
公開日: 2025.3.6
概要: Reactサーバーコンポーネントの特徴やメリットを、Reactクライアントコンポーネントと比較しながら確認します。Next.jsで実際にコードを書きながら見ていきます。Reactサーバーコンポーネントでは、より短いコード量でデータ取得を実現できるのがわかります。

## 本記事の目的

Reactサーバーコンポーネントを使うと、データ取得のコード量が抑えられることを確認します。

Next.jsを使います。

Reactサーバーコンポーネントの仕組みやSSRとの違いなどは、下記記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/react-server-components-complete-guide">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-165.png)

</div>
<div class="r-card-text">
Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/rsc-and-rcc-with-code-nextjs">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/rsc-and-rcc-with-code-nextjs)

## Next.jsのインストール

まずNext.jsをインストールしましょう。

インストールする場所はどこでも構いません。下記コマンドをターミナルに打ってください。

```shell
npx create-next-app rsc-test
```

ここで次のようなメッセージが出ることがありますが、特に問題ではないので、「Enter」キーを押してください。

```shell
Need to install the following packages:
    create-next-app@15.2.1
Ok to proceed? (y)
```

インストールを実行すると、次のような質問が出てきます（2025年3月時点）。

「App Router」以外にはNoと答えてください。サーバーコンポーネントを使うにはApp Routerを利用する必要があります。

```shell
? Would you like to use TypeScript? … No / Yes
? Would you like to use ESLint? … No / Yes
? Would you like to use Tailwind CSS? … No / Yes
? Would you like your code inside a `src/` directory? … No / Yes
? Would you like to use App Router? (recommended) … No / Yes
? Would you like to use Turbopack for next dev? … No / Yes
? Would you like to customize the import alias (@/* by default)? … No / Yes
```

インストールが完了したらVS Codeで開きましょう。

![ssc-1.jpg](../../images/singleBlogPageImages/blogArticleImages/blog163/ssc-1.jpg)

`app`フォルダ内の`page.js`がトップページになります。

`page.js`のコードをすべて消し、次のように書き換えてください。

```js
// page.js

const App = () => {
    return <h1>こんにちは</h1>
}

export default App
```

保存し、ターミナルで`npm run dev`コマンドを実行しましょう。

Next.jsが起動し、ブラウザで`http://localhost:3000`を開くと次のように表示されます。

<div class="img-border">

![konnichiwa.jpg](../../images/singleBlogPageImages/blogArticleImages/blog162/konnichiwa.jpg)

</div>

## Reactクライアントコンポーネントの使い方

次のコードを加えてください。

```js
// page.js

import { useState } from "react"   // 追加

const App = () => {
    const[data, setData] = useState()   // 追加

    return (
        ...
```

stateを読み込んで使っているだけのベーシックなReactコードです。

保存したらブラウザを開きましょう。

するとブラウザにはエラーが出ます。

<a target="_blank" rel="noopener" href="/blog/rsc-and-rcc-name">こちらの記事</a>でも触れましたが、Reactサーバーコンポーネントでは`use-`で始まるHooksは使えないからです。

Hooksを使いたい場合は、「サーバーコンポーネント」を「クライアントコンポーネント」に変える必要があります。

下記コードを1行目に追加しましょう。

```js
// page.js

"use client"       // 追加
import { useState } from "react"

const App = () => {
    ...
```

保存してブラウザを見ると、先ほどと同じように「こんにちは」と表示されており、正常に動いているのがわかります。

## Reactサーバーコンポーネントでのデータ取得

Reactクライアントコンポーネントでは、データ取得時に次のようなコードを書いていました。

```js
"use client"
import { useState, useEffect } from "react"

const App = () => {
    const [data, setData] = useState()

    useEffect(() => {
        const getData = async () => {
            try {
                const response = await fetch("https://dummyjson.com/products/1")
                const jsonData = await response.json()
                setData(jsonData)
            } catch (err) {
                alert("エラーが起きました。再読み込みしてください")
            }
        }
        getData()
    }, [])

    return <h1>プロダクト名：{data?.title}</h1>
}

export default App
```

保存してブラウザで確認すると、アイテムの名前が次のように取得・表示されます。

<div class="img-border">

![ssc-4.jpg](../../images/singleBlogPageImages/blogArticleImages/blog163/ssc-4.jpg)

</div>

これと同じデータ取得を、今度はサーバーコンポーネントでしてみましょう。

次のコードを書いてください。

```js
// page.js

const App = async () => {
    const response = await fetch("https://dummyjson.com/products/1")
    const jsonData = await response.json()
    return <h1>プロダクト名：{jsonData.title}</h1>
}

export default App
```

保存してブラウザを確認すると、アイテムの名前が取得・表示されています。

<div class="img-border">

![ssc-4.jpg](../../images/singleBlogPageImages/blogArticleImages/blog163/ssc-4.jpg)

</div>

このようにサーバーコンポーネントを使うと、クライアントコンポーネントよりも短いコードで外部リソースからのデータ取得が可能だとわかります。

コードでRSCの動きを確認できたところで、RSCが登場した背景（MPA・SPA・SSRの歴史）やReact 19の新機能まで体系的に整理したガイドがあります。

実装の前に全体像を押さえておきたい方はこちらをどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

コードでRSCの動きが確認できたところで、Next.jsの全体的な開発フロー（AppフォルダのしくみやServer Actions、デプロイ方法まで）はこちらのガイドで確認できます▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/rsc-and-rcc-with-code-nextjs">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/rsc-and-rcc-with-code-nextjs)

---

# 楽観的更新（useOptimistic）とは？意味・仕組みをReact 19で2分で解説

URL: https://monotein.com/blog/what-is-optimistic-update-react-v19
公開日: 2025.2.10
概要: Reactバージョン19の新機能useOptimisticでは、UIの楽観的更新を簡単に実装できます。楽観的更新を毎日わたしたちは目にしています。LINEやInstagramなどでメッセージを送ったとき、表示にただちに反映させるのが、この「楽観的更新」です

## Reactバージョン19の新しいHooks
Reactバージョン19（2024年12月安定版リリース）では、`useOptimistic`という新しいHooksが導入されました。

`useOptimistic`は楽観的更新のために使うHooksですが、この「楽観的更新」とはどういう意味なのでしょうか。

本記事では「楽観的更新」について簡単に紹介します。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-optimistic-update-react-v19">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-optimistic-update-react-v19)

## 「楽観的更新」をする意味
「楽観的更新」とは、「データ投稿はたぶん成功するだろう」という希望的観測をもって表示に反映させることです。

投稿処理をはじめとするバックエンドとの連携作業は失敗するリスクが必ずありますが、だからといってバックエンドからの成功の可否の連絡を待ってから表示に反映させると、タイムラグが生じてしまい、表示面でスムーズとはいえません。

ここで楽観的更新が使われます。

## 毎日、目にしている「楽観的更新」
「楽観的更新」は、実は私たちが毎日のように目にしているものです。

LINEなどのアプリでメッセージを送るときのことを思い出してみましょう。次のように進みます。

![image](../../images/singleBlogPageImages/blogArticleImages/blog161/optimistic-ui-update-1.png)

注目をして欲しいのは中央の図です。

文字色や背景色などはやや薄く、そして下部にはローディングなどを表示して、処理が現在実行中であることを示しながらですが、送ったメッセージがただちに表示されています。

![image](../../images/singleBlogPageImages/blogArticleImages/blog161/optimistic-ui-update-2.png)

もしこれを、メッセージの送信がたしかに完了したことを待って表示に反映していたら、私たちユーザーは送信の可否の通知を、ローディングが出ているだけのスクリーンを数秒間見つめながら待たなければいけません（下図）。

![image](../../images/singleBlogPageImages/blogArticleImages/blog161/optimistic-ui-update-3.png)

「送信は成功するだろう」という希望的観測ですばやくデータを表示に反映させ、処理の成功の可否はそのあとで通知する、という方法にすることで操作の快適性は上がります。これが楽観的更新です。

Reactバージョン19で追加された`useOptimistic`は、この楽観的更新を簡単に実現できるHooksです。

useOptimistic以外にも、React 19では`useActionState`や`useEffectEvent`、`<Activity>`など注目の新機能が追加されています。

RSCの仕組みとあわせて全体を把握したい方はこちらのガイドをどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

useOptimisticはNext.js開発でも活用できる機能です。

RSC・Server Actions・AppフォルダのしくみなどNext.js全体の流れは、こちらのガイドにまとめています▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-optimistic-update-react-v19">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-optimistic-update-react-v19)

---

# useActionStateに関数を渡す方法【React 19 Server Actions対応】

URL: https://monotein.com/blog/passing-function-to-useactionstate
公開日: 2025.2.7
概要: Reactバージョン19の新機能useActionStateには関数を渡す必要があります。この関数はfunctionのキーワードを使った記法で書くと、useActionStateより下に書くことができます。

## useActionStateの関数の位置
Reactバージョン19（2024年12月安定版リリース）で導入された`useActionState`に渡す関数は、次のように`function`を使った記法にすると、`useActionState`よりも後（下部）に書くことができます。

```js
import { useActionState } from "react"

const App = () => {
    const[state, getDataAction, isPending] = useActionState(getData, "")

    async function getData(prevState, formData){
        
        ...
        
    }

    return (
        <form action={getDataAction}>
            
            ...

        </form>
    )
}

export default App
```

`function`を使った記法（＝関数宣言）には巻き上げがあるため、それよりも前に利用可能なのです。

以下、もう少し具体的に見ていきましょう。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/passing-function-to-useactionstate">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/passing-function-to-useactionstate)

## useStateをuseActionStateで置き換える
次のようなベーシックなReactのコードを考えてみます。

「phone」や「car」といったデータを送ってダミーのJSONデータを取得するコードです。

```js
import { useState } from "react"

const App = () => {
    const [data, setData] = useState("")
    const [result, setResult] = useState("")

    const getData = async(e) => {
        e.preventDefault()
        const response = await fetch(`https://dummyjson.com/products/search?q=${data}`)
        const jsonData = await response.json()
        setResult(jsonData)
    }

    return (
        <form onSubmit={getData}>
            <input type="text" onChange={(e) => setData(e.target.value)}/>
            <button>送信</button>
        </form>
    )
}

export default App
```

`useActionState`を使うと、次のように書き換えられます。


```js
import { useActionState } from "react"

const App = () => {
    const getData = async(prevState, formData) => {
        const data = formData.get("random")
        const response = await fetch(`https://dummyjson.com/products/search?q=${data}`)
        const jsonData = await response.json()
        return jsonData
    }

    const[state, getDataAction, isPending] = useActionState(getData, "")

    return (
        <form action={getDataAction}>
            <input type="text" name="random"/>
            <button>送信</button>
        </form>
    )
}

export default App
```

## 関数の記法を「const」から「function」に変える
`useActionState`は`getData`の下部に書かれています。

`const...`を使った記法では、それよりも前に利用ができないからです。

しかし`useActionState`で`useState`を置き換えた経緯を考えると、`useState`と同じ位置に`useActionState`を書きたいとも感じます。

その時は次のように、`const...`で始まる記法を`function`を使った記法に書き換えましょう。

```js
// 変更前
const getData = async(prevState, formData) => {...

// 変更後
async function getData(prevState, formData){...
```

すると、`useActionState`を次のように上部に書けます。

```js
import { useActionState } from "react"

const App = () => {
    const[state, getDataAction, isPending] = useActionState(getData, "")

    async function getData(prevState, formData){
        const data = formData.get("random")
        const response = await fetch(`https://dummyjson.com/products/search?q=${data}`)
        const jsonData = await response.json()
        return jsonData
    }

    return (
        <form action={getDataAction}>
            <input type="text" name="random"/>
            <button>送信</button>
        </form>
    )
}

export default App
```

`const...`で始まる記法（＝関数式）では、それよりも前に関数を利用できません。

一方で`function`を使った記法（＝関数宣言）ではそれが可能なため、`getData`よりも前に`useActionState`を書けます。

useActionStateはReact 19の新機能のひとつです。

useOptimisticや`<Activity>`といった他の新機能、そしてRSCの仕組みまでまとめて理解したい方は、こちらのガイドが参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

useActionStateはNext.jsのServer Actionsと組み合わせて使う機能です。

Server ActionsやRSCを含むNext.js全体の開発の流れはこちらのガイドで確認できます▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/passing-function-to-useactionstate">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/passing-function-to-useactionstate)

---

# 【改訂版リリース】「Next.jsでつくるフルスタックアプリ」Next.jsバージョン15対応版／Supabase

URL: https://monotein.com/blog/new-book-release-nextjs-fullstack-route-handlers-15
公開日: 2024.11.26
更新日: 2025.11.7
概要: Next.jsをバックエンドとフロントエンドの両方に使ってフルスタックアプリを開発する入門書をリリース。2024年10月リリースのNext.jsバージョン15対応。ビギナーを対象にしているので、JavaScriptやReact、Next.jsなどの深い知識は不要。三好アキ著。

## *改訂版リリース（2025年11月追記）
2025年10月のNext.jsバージョン16に合わせ、内容を最新情報に準拠させた改訂版をリリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFXVMSF">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1.svg" alt="Next.jsでつくるフルスタックアプリ　前編（バックエンド開発）Supabase版" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ　前編（バックエンド開発）Supabase版</p>
        <p class="bc-desc">【2025年10月リリース。最新のNext.jsをつかった本格アプリの開発手法がわかる入門書】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFVXQ4J">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-2.svg" alt="Next.jsでつくるフルスタックアプリ　後編（フロントエンド開発）Supabase版" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ　後編（フロントエンド開発）Supabase版</p>
        <p class="bc-desc">【2025年10月リリース。最新のNext.jsをつかった本格アプリの開発手法がわかる入門書】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-fullstack-route-handlers-15">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-fullstack-route-handlers-15)

## *Supabase版もリリース（2025年3月16日追記）
既刊の「Next.jsでつくるフルスタックアプリ　前編・後編」ではデータベースにMongoDBを使っていましたが、今回Supabaseを使ったバージョンをリリースしました。

また、本書で開発するアプリの編集・削除ページにReactサーバーコンポーネントとReactバージョン19を導入する方法も、参考情報として追加しました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DTFMZRKZ">
    <img class="bc-cover" src="/images/commonImg/nextbook-app-fullstack-1-supabase.svg" alt="Next.jsでつくるフルスタックアプリ　前編（バックエンド開発）Supabase版" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ　前編（バックエンド開発）Supabase版</p>
        <p class="bc-desc">【2025年1月リリース。最新のNext.jsをつかった本格アプリの開発手法がわかる入門書】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DTG2XVSB">
    <img class="bc-cover" src="/images/commonImg/nextbook-app-fullstack-2-supabase.svg" alt="Next.jsでつくるフルスタックアプリ　後編（フロントエンド開発）Supabase版" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ　後編（フロントエンド開発）Supabase版</p>
        <p class="bc-desc">【2025年1月リリース。最新のNext.jsをつかった本格アプリの開発手法がわかる入門書】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

## Next.jsフルスタック開発入門書の改訂版リリース
昨日、Next.jsをバックエンドとフロントエンド両方に使ってアプリを開発する入門書『Next.jsでつくるフルスタックアプリ　前編・後編（三好アキ著）』をリリースしました。

ビギナーを対象にしているので、JavaScriptやReact、Next.jsなどの深い知識は不要です。

本書は同名既刊書の改訂版にあたり、使っているNext.jsのバージョンが14から、先月（2024年10月）リリースされたばかりの15に変えてあります。

Kindle Unlimited利用者は無料購読可能です。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DRHF4KGM">
    <img class="bc-cover" src="/images/commonImg/nextbook-app-fullstack-1.svg" alt="Next.jsでつくるフルスタックアプリ　前編（バックエンド開発）" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ　前編（バックエンド開発）</p>
        <p class="bc-desc">【2024年12月リリース。最新のNext.jsをつかった本格アプリの開発手法がわかる入門書】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DRHRKVYV">
    <img class="bc-cover" src="/images/commonImg/nextbook-app-fullstack-2.svg" alt="Next.jsでつくるフルスタックアプリ　後編（フロントエンド開発）" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ　後編（フロントエンド開発）</p>
        <p class="bc-desc">【2024年12月リリース。最新のNext.jsをつかった本格アプリの開発手法がわかる入門書】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

## 3度目の改訂版
本書の最初のバージョンを出したのは2022年4月です。

その時は、当時の最新のNext.jsバージョン12を使っていました。

その後、Appルーターを採用した新しいバージョンのNext.jsがリリースされたので、それに合わせた改訂版を出したのが2023年11月です。

この時はNext.jsバージョン14を使っていました。

その後、このバージョン14版をベースにした『[動かして学ぶ！Next.js/React開発入門](https://www.shoeisha.co.jp/book/detail/9784798184678)』が、翔泳社より今年（2024年）9月にリリースされました。

<div class="rich-card-link">
<a href="/blog/new-release-next-react-book">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-155.png)

</div>
<div class="r-card-text">
【新刊リリース】動かして学ぶ！Next.js/React開発入門（翔泳社）
</div>
</div>
</a>
</div>

その翌月には、Reactバージョン19の正式リリースを待たずしてNext.jsの新しいバージョンである15がリリースされたので、それに合わせて内容を改定したものが今回出したものになります。

## 変更点や追加した内容など
今回のNext.jsバージョン15では、14から大きな変更（Breaking changes／破壊的変更）はありませんでした。

本書に関係する小さな変更点としては、キャッシュ関係のコード、および`context`が非同期となり`await`が必要になった点です。

なお、本書では後編の最後に参考情報として、データベースのデータをサーバーコンポーネントから直接取得する内容を追加してあります。

## 姉妹書について
本書は、数週間前に出した下記書籍と姉妹書の関係にあります。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DMQLP8Z9">
    <img class="bc-cover" src="/images/commonImg/nextjs-server-actions.svg" alt="Next.js Server Actionsでつくるフルスタックアプリ" />
    <div class="bc-body">
        <p class="bc-title">Next.js Server Actionsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【2024年11月リリース。少ないコードですばやく本格的なフルスタックアプリを開発する方法を紹介】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

同一のフルスタックアプリを、今回の『Next.jsでつくるフルスタックアプリ（前編・後編）』ではRoute Handlersを使って、上記の姉妹書ではServer Actionsを使って開発しています。

そのためこの姉妹書と本書を合わせて読むことで、開発したいアプリにより適したコードの設計方法を理解できるようになります。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-fullstack-route-handlers-15">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-fullstack-route-handlers-15)

---

# 【新刊】Astroのビギナー向け入門書リリース

URL: https://monotein.com/blog/new-book-release-astro
公開日: 2024.11.11
更新日: 2024.12.22
概要: 「はじめてつくるAstroサイト（三好アキ著）」を2024年11月にリリース。1.5時間ですばやくAstroの使い方をマスター。静的サイトジェネレーター。コードを書きながら進むので、楽しく飽きづらい。JavaScriptやReact／Vueの経験がないビギナーでもついていける難易度。

## Astroの入門書リリース

***2024年12月22日追記**

*2024年11月発売の本書初版ではAstroバージョン5 Beta版を使っていましたが、2024年12月初旬にAstroバージョン5が正式リリースされたので、それに合わせて書籍の内容を一部更新しました。*

---
---

本日、日本でも人気を集めるウェブフレームワークAstroの入門書『はじめてつくるAstroサイト（三好アキ著）』をリリースしました。

ビギナーを対象にしているので、JavaScriptやReact、Vueなどの知識は不要です。

Astroは最新バージョンの5を使っています。

Kindle Unlimited利用者は無料購読可能です。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DMLKMTZX">
    <img class="bc-cover" src="/images/commonImg/astrobook.svg" alt="はじめてつくるAstroサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるAstroサイト</p>
        <p class="bc-desc">【1時間半で、人気のフレームワーク「Astro」の使い方をすばやくマスターできる本】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-astro">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-astro)

## HTMLとCSSを終えたビギナーに最適なAstro
Astroは2021年にベータ版がリリースされた比較的新しいウェブ開発ツールです。

シンプルなウェブサイト（静的サイトジェネレーター）から、ログイン機能をもった本格的なウェブアプリケーションまで開発できる守備範囲の広さを強みとしています。

Astroは他のフロントエンド・フレームワーク、特にNext.jsやNuxtなどと並んで紹介されることがよくありますが、実際にはこれらとはやや異なる位置付けの開発ツールです。

Astroは、ReactやVueといった特定のJavaScriptフレームワークをベースにしていません。

そのため必要となる前提知識が少なくてよく、HTMLとCSSを知っていればAstroを使えてしまいます。

本書を読んでもらうとわかりますが、Astroで使う`.astro`ファイル内で書くコードはHTMLとほとんど同じです。

同時に`.astro`ファイルでは、`import`で他のコンポーネントを読み込んだり、JavaScriptのコードを書くことも可能です。

つまりAstroであれば、HTMLというすでに慣れ親しんだ知識をベースとしながら、ゆっくりとJavaScriptのコード、さらにはReact／Vue開発で標準となっているコンポーネントの使い方にも慣れていくことができるのです。

HTMLとCSSを終えた人が、次の一歩へ進むときに最適なツールがAstroだと思います。

フロントエンド学習の順番として「HTML → CSS → JavaScript」、あるいは「HTML → CSS → React・Vue（JavaScript）」という流れが一般的です。

ここにAstroを「HTML → CSS → **Astro** → React／Vue／JavaScript」と挟めば、よりスムーズにモダンなウェブ開発スキルを身につけられるでしょう。

## 本書の特徴（2部構成）
本書の大きな目的の一つは、「Astroサイトをできるだけ早く完成させて達成感を得る」ということです。

細かな知識や包括的理解を最初から目指すのではなく、とにかくAstroサイトをひとつ、すばやく完成させるのです。

そのため本書は以下のような2部構成となっています。

---

• 最低限の機能を使ってすばやくAstroサイトを完成させ、達成感を得る前半部（第1-3章）

• 発展的事項を紹介しながらサイトの完成度を高める後半部（第4-5章）

---

各章のくわしい内容は本記事下部にある目次を参考にしてください。

## 姉妹書について
本書は下記既刊書の姉妹書という位置付けです。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
    <img class="bc-cover" src="/images/commonImg/nextbook.svg" alt="はじめてつくるNext.jsサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるNext.jsサイト</p>
        <p class="bc-desc">【最新バージョンのNext.jsとAppフォルダで、時短でNext.jsを習得。作りながら学ぶ実践形式】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0B5N8QJ2Y">
    <img class="bc-cover" src="/images/commonImg/nuxtbook.svg" alt="はじめてつくるNuxtサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるNuxtサイト</p>
        <p class="bc-desc">【Vueフレームワークで一番人気のNuxt。最新Nuxtの基礎と使い方をしっかりマスターできる】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0BNQBDHFH">
    <img class="bc-cover" src="/images/commonImg/gatsbybook.svg" alt="はじめてつくるGatsbyサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるGatsbyサイト</p>
        <p class="bc-desc">【人気フレームワークGatsbyを2時間でマスター。ハイパフォーマンスのウェブサイトを時短で試してみよう！】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

これらの既刊書では同一のウェブサイトを、Next.js、Nuxt、Gatsbyという異なるツールで作りました。

本書はAstroを使って同じウェブサイトを作り上げます。

上記姉妹書と合わせて読むことで、AstroとNext.js／Nuxt／Gatsbyの違いや、どの場面でどのツールを選ぶべきかを理解できます。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DMLKMTZX">
    <img class="bc-cover" src="/images/commonImg/astrobook.svg" alt="はじめてつくるAstroサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるAstroサイト</p>
        <p class="bc-desc">【1時間半で、人気のフレームワーク「Astro」の使い方をすばやくマスターできる本】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-astro">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-astro)

---

# 【新刊】Server Actionsフルスタックアプリ開発の入門書リリース／Next.js

URL: https://monotein.com/blog/new-book-release-nextjs-fullstack-server-actions
公開日: 2024.11.1
更新日: 2025.11.7
概要: Next.jsとServer Actionsを使うと、フルスタックアプリを時短ですばやく開発できます。最新のNext.jsバージョン15を使って、Server Actionsの使い方をビギナー向けにわかりやすく紹介するのが「Next.js Server Actionsでつくるフルスタックアプリ（三好アキ著）」です。

## *改訂版リリース（2025年11月追記）
2025年10月のNext.jsバージョン16に合わせ、内容を最新情報に準拠させた改訂版をリリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0G144JJZT">
    <img class="bc-cover" src="/images/commonImg/nextjs-server-actions-v16.svg" alt="Next.js Server Actionsでつくるフルスタックアプリ" />
    <div class="bc-body">
        <p class="bc-title">Next.js Server Actionsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【2025年11月リリース。少ないコードですばやく本格的なフルスタックアプリを開発する方法を紹介】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-fullstack-server-actions">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-fullstack-server-actions)

## Server Actionsの新刊リリース
本日、Next.jsとServer Actionsを使ってフルスタックアプリを開発する新刊をリリースしました。

私の他の本と同じように、本書もビギナーを対象にしているので、Next.jsやReactの深い理解や経験は不要です。

Next.jsは、1週間前にリリースされた最新バージョンの15を使っています。

Kindle Unlimited利用者は無料で読めます。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DMQLP8Z9">
    <img class="bc-cover" src="/images/commonImg/nextjs-server-actions.svg" alt="Next.js Server Actionsでつくるフルスタックアプリ" />
    <div class="bc-body">
        <p class="bc-title">Next.js Server Actionsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【2024年11月リリース。少ないコードですばやく本格的なフルスタックアプリを開発する方法を紹介】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

## 本書の特徴
本書はServer Actionsを使ったフルスタックアプリ開発を解説する本ですが、そもそもServer Actions利用にはどのようなメリットがあるのでしょうか。

従来のフルスタックアプリ開発では、バックエンドとフロントエンドを分離させて開発するのが一般的でした。

バックエンドとして下図のようなデータ供給層を作り、これをフロントエンドで取得して表示するという流れです。

• バックエンドのデータ\
![image](../../images/singleBlogPageImages/blogArticleImages/blog157/api-example.jpg)

• フロントエンドで取得して表示\
![image](../../images/singleBlogPageImages/blogArticleImages/blog157/toppage.jpg)

しかしServer Actionsを使うと、バックエンドをあえて開発しなくとも、フルスタックアプリ開発が可能です。

結果としてコード量は少なく、開発にかかる時間も大幅に短縮できるのがServer Actionsのメリットです。

本書はそのようなServer Actionsの使い方を初心者向けに解説する本です。

アプリを自分の手で作り上げながら進める、いつも通りのハンズオン形式になっています。

## 姉妹書との違い
私はすでに、Next.jsでフルスタックアプリを開発する本を出しています（下記2冊）。

![image](../../images/singleBlogPageImages/blogArticleImages/blog157/next-book-2-types.jpg)

• [動かして学ぶ！Next.js/React開発入門（翔泳社／2024／*韓国でも出版）](https://www.shoeisha.co.jp/book/detail/9784798184678)

• [Next.jsでつくるフルスタックアプリ（前編・後編）](https://www.amazon.co.jp/dp/B0DRHF4KGM)

---

本書はこの2冊の姉妹書にあたります。

上記既刊書では、Next.jsのバックエンドをフロントエンドから分けて開発する方法をとっていました（Route Handlersを使用）。

本書は、まったく同じアプリを異なる手法で開発する、つまりServer Actionsを使って開発する、というコンセプトの本です。

上記2冊と合わせて読むことで、Next.jsフルスタックアプリ開発への理解がより深まるでしょう。

なお、『Next.jsでつくるフルスタックアプリ（前編・後編）』に関しては2024年11月に改訂版を出しました。Next.jsバージョン15に対応した内容となっています。

くわしくは下記記事もご覧ください。

<div class="rich-card-link">
<a href="/blog/new-book-release-nextjs-fullstack-route-handlers-15">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-159.png)

</div>
<div class="r-card-text">
【改訂版リリース】「Next.jsでつくるフルスタックアプリ」Next.jsバージョン15対応版
</div>
</div>
</a>
</div>

## 執筆時のエピソードなど
上記のNext.jsでフルスタックアプリを開発する本を出したときから、Server Actions版を出そうと考えていました。

最初にとりかかったのは、上記既刊書で作った見本アプリをServer Actionsで作り直すことですが、他の作業の合間にしていたので、ここに結構時間がかかったと思います。

そして執筆を始めてからは、その途中でNext.jsのバージョン15がリリースされるということがありました。

この本における私の優先事項は「Server Actionsの使い方の紹介」であり、「最新バージョンのNext.jsの紹介」ではなかったので、特に大きな影響というものはなかったのですが、Next.jsバージョン15では、`context`や`cookies()`が非同期になり、`await/async`が必要になっている変更点などは反映させる必要がありました。

Next.js関係の解説書を書いているときはいつも思うことですが、これだけアップデートが多く、変更点も多いツール（＝Next.js）について書くことの難しさをまた改めて感じました。

*他の方と同じように、私も「Reactバージョン安定版19リリースまでNext.jsバージョン15のリリースはないだろう」と思っていました。Next.js公式の[こちらの発言](https://www.reddit.com/r/nextjs/comments/1g4h0wj/comment/ls50dxf/)のように、React 19安定版リリース前にNext.jsのアップグレードを決めたようですね。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DMQLP8Z9">
    <img class="bc-cover" src="/images/commonImg/nextjs-server-actions.svg" alt="Next.js Server Actionsでつくるフルスタックアプリ" />
    <div class="bc-body">
        <p class="bc-title">Next.js Server Actionsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【2024年11月リリース。少ないコードですばやく本格的なフルスタックアプリを開発する方法を紹介】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-fullstack-server-actions">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-book-release-nextjs-fullstack-server-actions)

---

# 【Next.js】Server Actionsでエラーをフロントに表示する方法｜error.jsとuseActionState

URL: https://monotein.com/blog/nextjs-server-actions-how-to-get-responses
公開日: 2024.10.21
更新日: 2026.3.29
概要: Next.jsのServer Actionsでエラーをフロントに表示するには、error.jsを使う方法とuseActionState使う方法があります。2つの違いと使い分けを、React 19・Next.js 16対応のコードで紹介します。

## Server Actionsのエラー処理方法
Next.jsのServer Actionsでは、returnしたvalue（戻り値）の扱い方にややクセがあります。

たとえば下記のようなServer Actionsのコードを考えてみましょう。

フロントエンドのユーザー登録画面に入力された「名前」「メールアドレス」「パスワード」を、データベースに書き込むServer Actionsのコードです。

```js
"use server"
import { redirect } from "next/navigation"
import connectDB from "../utils/database"
import { UserModel } from "../utils/schemaModels"

export const userRegister = async (formData) => {

    const userData = {
        name: formData.get("name"),
        email: formData.get("email"),
        password: formData.get("password"),
    }

    try{
        await connectDB() 
        await UserModel.create(userData) 
    }catch{
        return {message: "エラー：ユーザー登録失敗"}
    } 

    redirect("/")
}
```

このコードの挙動を説明しましょう。

`try`の中のコードでデータベースへの書き込みが成功すれば、`redirect("/")`でトップページへと移動しますが、もし途中でなんらかのエラーが発生した場合には`catch`内のコードが実行される、という挙動です。

ここで、このエラーメッセージをどのようにフロントエンド側に表示するかで、方法が大きく2つあります。

1つ目は`error.js`を使う方法、2つ目はReact Hooks（`useFormState`、あるいは`useActionState`）を使う方法です。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-server-actions-how-to-get-responses">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-server-actions-how-to-get-responses)

## error.jsを使ったエラーハンドリング
`error.js`を、`app`フォルダ直下（`layout.js`や`page.js`のある階層）に作り、下記のようなコードを書きます。

```js
// error.js

"use client"
import { useEffect } from "react"

const Error = ({ error, reset }) => {
    return (
        <div>
            <h2>{error.message}</h2>
            <button onClick={() => reset()}>再試行</button>
        </div>
    )
}

export default Error
```

`error.js`は、設置した階層以下で発生したエラーをキャッチする機能を持ちます。

注意してもらいたいのは、`error.js`はクライアントコンポーネントにする必要があることです。`"use client"`を忘れないようにしましょう。

次に、本記事冒頭のServer Actionsの`catch`内のコードを、エラー発生を通知する下記コードに変更します。

```js

    ...

    try{
        await connectDB() 
        await UserModel.create(userData) 
    }catch{
        throw new Error("エラー：ユーザー登録失敗")  // 変更
    } 

    redirect("/")
}
```

`Error()`の中に書かれた言葉は、`error.js`に渡された`error`の中に入っているので、そこへアクセスをするために`<h2>`タグの中で`error.message`と書いています。

なお`error.js`では、`reset`という特別なfunctionが利用可能です。

以上が`error.js`のエラーハンドリングで、次に紹介するのがHooksを使った方法です。

## Hooksを使ったエラーハンドリング
React Hooks、具体的には`useFormState`を使います

Hooksを使うので、フロントエンド側のコンポーネントは、サーバーコンポーネントではなくクライアントコンポーネントにすることに注意しましょう。

```js
"use client"
import { useFormState } from "react"
import { userRegister } from "@/app/actions/userRegister"

const initialState = {
    message: "",
}

const Register = () => {
    const [state, formAction] = useFormState(userRegister, initialState)
    return (
        <div>
            <h1>ユーザー登録</h1>
            <form action={formAction}>
                <input type="text" name="name" placeholder="名前" required/> 
                <input type="text" name="email" placeholder="メールアドレス" required/>
                <input type="text" name="password" placeholder="パスワード" required/>
                <p>{state?.message}</p>
                <button>登録</button>
            </form> 
        </div>
    )
}

export default Register
```

この方法では、Server Actionsの`catch`内では`Error`を使う必要はなく、本記事冒頭で示した`return`を使ったコードで大丈夫です。

```js
"use server"
import { redirect } from "next/navigation"
import connectDB from "../utils/database"
import { UserModel } from "../utils/schemaModels"

export const userRegister = async (prevState, formData) => {

    const userData = {
        name: formData.get("name"),
        email: formData.get("email"),
        password: formData.get("password"),
    }

    try{
        await connectDB() 
        await UserModel.create(userData) 
    }catch{
        return {message: "エラー：ユーザー登録失敗"}
    } 

    redirect("/")
}
```

ここで注目して欲しいのが、Server Actionsに`formData`だけでなく`prevState`も渡されていることです。

このようにすることで、フロントエンドの`state`の中に、`catch`内に書かれた`message`が渡されます。

---

なお、Reactバージョン19では`useFormState`は`useActionState`となり、この場合は次のように書きます。

`useActionState`では新たに`isPending`が利用可能なので、`<button>`タグの中に処理中であることを知らせるコードを追加しています。

```js
"use client"
import { useActionState } from "react"
import { userRegister } from "@/app/actions/userRegister"

const initialState = {
    message: "",
}

const Register = () => {
    const [state, formAction, isPending] = useActionState(userRegister, initialState)
    return (
        <div>
            <h1>ユーザー登録</h1>
            <form action={formAction}>
                <input type="text" name="name" placeholder="名前" required/> 
                <input type="text" name="email" placeholder="メールアドレス" required/>
                <input type="text" name="password" placeholder="パスワード" required/>
                <p>{state?.message}</p>
                <button>{isPending ? "処理中..." : "登録"}</button>
            </form> 
        </div>
    )
}

export default Register
```

## 使い分け
本記事では`error.js`とHooks（`useFormState`、あるいは`useActionState`）を使う方法を紹介してきましたが、使い分けになにか指標はあるのでしょうか。

[Next.js公式](https://github.com/vercel/next.js/blob/canary/docs/02-app/01-building-your-application/01-routing/05-error-handling.mdx)では、「起きることが予期できているエラー」にはHooksを、「起きることが予期できていないエラー」には`error.js`を使う方法が紹介されています。

「起きることが予期できているエラー」とは、たとえばログイン機能を担うServer Actionsなどで、「ログインの前にユーザー登録をしてください」、「パスワードが間違っています」といった場合分けのエラー対応を行うケースです。

「`throw new Error()`でエラーを発生させて`error.js`で表示する」というのは、より一般的で守備範囲の広い対応方法ということになります。

（*なお、`Error()`の中にオブジェクトを含める方法や、`throw`／`throw Error()`／`throw new Error()`の違いといったことは、[こちらのstackoverflowのページ](https://stackoverflow.com/questions/9156176/what-is-the-difference-between-throw-new-error-and-throw-someobject)を参考にしてください。）

## お知らせ：新刊書リリース
Server Actionsを使ってフルスタックアプリを開発する新刊書をリリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DMQLP8Z9">
    <img class="bc-cover" src="/images/commonImg/nextjs-server-actions.svg" alt="Next.js Server Actionsでつくるフルスタックアプリ" />
    <div class="bc-body">
        <p class="bc-title">Next.js Server Actionsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【少ないコードですばやく本格的なフルスタックアプリを開発する方法を紹介】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

Next.js／Reactビギナー向け入門です。

2025年6月時点で最新のNext.jsバージョン15を使用しています。

Server Actionsは、RSCと組み合わせて使うことで真価を発揮します。

RSCの仕組みや背景、useActionState・useOptimisticといったReact 19の新機能を体系的に把握したい方は、こちらのガイドもあわせてご覧ください▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

Server Actionsのエラー処理が分かったら、RSC・AppフォルダのしくみからデプロイまでをまとめたNext.js入門ガイドもあわせてご覧ください▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-server-actions-how-to-get-responses">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-server-actions-how-to-get-responses)

---

# 【新刊リリース】動かして学ぶ！Next.js/React開発入門（翔泳社）

URL: https://monotein.com/blog/new-release-next-react-book
公開日: 2024.9.18
更新日: 2025.10.24
概要: 翔泳社より「動かして学ぶ！Next.js/React開発入門（三好アキ著）」を発売。Next.jsをはじめて使うビギナー向け。コードを自分の手でひとつひとつ書きながら進むので、飽きづらく、わかりやすい内容。バックエンド、フロントエンドを持ったフルスタックアプリケーションを開発します。

## *追加情報と韓国語版（2025年10月追記）
書籍内で使っているNext.jsのバージョンは14ですが、最新の16に対応するための追加情報は下記ページよりご利用いただけます。

• https://monotein-books.netlify.app/nextjs-react-book-additional-info-nextjs16

また、本書の韓国語版も出版されています。

<div class="rich-card-link">
<a href="/blog/korean-version-next-react-book">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-172.png)

</div>
<div class="r-card-text">
韓国でも出版されました
</div>
</div>
</a>
</div>

## Next.js新刊書リリース
明日9月19日に翔泳社より『動かして学ぶ！Next.js/React開発入門』が発売になります。

くわしい書籍の情報は、下記の翔泳社のページでご覧ください。

https://www.shoeisha.co.jp/book/detail/9784798184678

![image](../../images/singleBlogPageImages/blogArticleImages/blog155/example-book.jpg)

[X(Twitter)リンク](https://x.com/shoeisha_books/status/1831987747990774040)

目次は本記事の最後にあります。

## 内容と対象読者
この本では、Next.jsをはじめて使うウェブ開発者の人向けに、Next.js（バージョン14／Appルーター）を使ったウェブアプリケーションの開発方法を紹介しています。

書名にもある通り、「動かしながら学ぶこと」に重点を置いた本なので、実際に手を動かしてコードをひとつひとつ書きながら進めてみて下さい。

前半（1章〜5章）でNext.jsのAPI（Route Handlers）を使ったバックエンド開発、後半（6章〜9章）がフロントエンド開発を行う章です（最後の10章は本編で触れなかった追加事項の解説）。

バックエンド、フロントエンド両方のオンラインでの公開方法も解説しているので、本書を終えたときには本格的なフルスタックアプリケーションがひとつ、オンラインで公開されている状態になります。

対象読者としてNext.jsをはじめて使う人を想定しているように、この本はNext.jsの全事項をマスターしたり、高度な使い方を解説する本ではなく、ビギナーにNext.jsに慣れてもらうこと、そしてNext.jsで開発できるアプリの青写真を描いてもらうことに主眼を置いた本です。

Next.jsはReactのフレームワークなので、Reactの初歩についても本書では触れていますが、React自体の解説は多くありません。

なお、ビギナーを対象としていること、およびNext.js自体に集中してもらうため、スタイリングはシンプルなCSS（Tailwind CSS未使用）、開発言語にはTypeScriptではなくJavaScriptを使用しています。

また、[より汎用的なバックエンド開発手法](/blog/server-actions-or-api)を紹介するため、Server Actionsも使っていません。

本書は、私の既刊書「Next.jsでつくるフルスタックアプリ　前編・後編」をベースに、全体的な文章の刷新、「まえがき」と「あとがき」の追加、さらに複数の補足情報およびコラムを加えたものになります。

## 使用テクノロジー
本書で使っている主なテクノロジー、外部サービス、npmパッケージなどは次のものです。

---

• Next.js（バージョン14.1.4）\
• React（バージョン18）\
• Node.js（バージョン20.9.0）\
• npm（バージョン10.1.0）\
• VS Code（バージョン1.87.2）\
• mongoose（バージョン8.2.2）\
• jose（バージョン5.2.3）\
• highlight.js（バージョン11.9.0）\
• MongoDB（Atlas）\
• Vercel\
• Cloudinary\
• Thunder Client\
• JSON Formatter

*本書はWindowsではなくMacを使って解説を進めています。Windows向けの説明はないので注意してください。

## 目次

『動かして学ぶ！Next.js/React開発入門』

三好アキ著／2024年9月19日刊

---

• Chapter 1　基礎知識と開発ツールの準備

• Chapter 2　バックエンド開発の準備

• Chapter 3　アイテム操作機能

• Chapter 4　ユーザー登録とログイン機能

• Chapter 5　バックエンドのデプロイ

• Chapter 6　フロントエンド開発の準備／Reactの書き方／サーバーコンポーネント

• Chapter 7　ユーザー登録ページとログインページ

• Chapter 8　アイテムページ

• Chapter 9　フロントエンドのデプロイ

• Chapter 10　ブラッシュアップ

書籍でNext.jsの全体像をつかみながら、RSC・Server Actions・デプロイ方法まで体系的に確認したい方は、こちらのガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/new-release-next-react-book">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/new-release-next-react-book)

---

# はじめてつくるバックエンドサーバー発展編【改訂版発売】

URL: https://monotein.com/blog/update-node-book-2-advanced
公開日: 2024.9.12
概要: 「はじめてつくるバックエンドサーバー発展編（Node.js & Express & MongoDB）」を2年ぶりに改訂。動かなくなっていたコードや、古くなっていた記述を2024年9月現在の最新の情報で書き改めました。ビギナー向けに、Node.js、Express、MongoDBを使ったアプリケーション開発をわかりやすく解説しています。

## 2年ぶりのアップデート
『はじめてつくるバックエンドサーバー発展編（Node.js & Express & MongoDB）』の改訂版を発売しました。

電子書籍とペーパーバック、両方でご利用いただけます。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B09X56PSCQ">
    <img class="bc-cover" src="/images/commonImg/nodebook-advanced.svg" alt="はじめてつくるバックエンドサーバー発展編（Node.js & Express & MongoDB）" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるバックエンドサーバー発展編（Node.js & Express & MongoDB）</p>
        <p class="bc-desc">【2024年9月改訂版リリース。ログイン機能を持った本格的なNode.jsアプリ開発を、ビギナー向けにわかりやすく解説】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/update-node-book-2-advanced">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/update-node-book-2-advanced)

## 改訂の理由
『はじめてつくるバックエンドサーバー発展編』を書いたのは2022年4月なので、発売からすでに2年半ほど経っていました。

2年半といえば、npmパッケージのバージョンが上がり、コードの書き方が変わっていてもおかしくはない時間の長さです。

実際、書籍内で使っているコードで動かないところが出ており、Amazonのレビューのコメント欄でもその点に触れたものがありました。

## コードの変更点
コード上の変更点は、書籍内で使っているmongoose関係のコードです。

2年半前の初版執筆時、`mongoose`のバージョンは`6.2.9`で、次のように書いていました。

```js
// 初版のコード

app.post("/blog/create", (req, res) => {
    BlogModel.create(req.body, (error, savedBlogData) => {
        if(error){
            res.render("error", {message: "/blog/createのエラー"})
        }else{
            res.redirect("/")
        }
    })     
})
```

しかし最新の`mongoose`はバージョンが`8.6.1`で、上のようなcallbackは使えなくなっており、「MongooseError: Model.create() no longer accepts a callback」といったエラーが出ます。

そこでcallbackベースのアプローチから、promiseベースのアプローチに変え、`then()`を使った記法に変えました。

```js
// 改訂版のコード

app.post("/blog/create", (req, res) => {
    BlogModel.create(req.body) 
        .then(() => {
            res.redirect("/") 
        })
        .catch((error) => {
            res.render("error", {message: "/blog/createのエラー"}) 
        })
})     
```

実はここで`then()`を使うべきか、それとももっとモダンな`try ~ catch`を使うべきかで迷ったのですが、私の他の書籍（[「MERNでつくるフルスタックアプリ」](https://www.amazon.co.jp/dp/B0BJN4H1NF)など）では`try ~ catch`をよく使っているので、私の本を複数読まれている読者が触れるコードのバリエーションを増やすため、この本ではあえて`then()`で書きました。

## 時間のかかったこと
コードの変更があるとはいえ、その規模はそこまで大きくないので、改訂版の作業もすぐに終わると思っていました。

しかし実際には予想以上に時間がかかったのは、コードの変更作業ではなく、文章の修正に時間を取られたからです。

2年半も経っていると私の言葉づかいも変わっており、いま読み返すと「おかしな日本語だな」と感じるところが多々ありました。

この本は技術書なので、文章の正しさだとか言葉づかいだとかに過度に注目する人はいないと思います。

それでも書き手としては、そういう「些細な点」が気になり、修正するところが多くあったのです。

すべての部分を直すと終わらないので、平均以上に気になるところしか修正していませんが、それでも初版よりは幾分まともな文章になったかと思います。

コード、文章以外では、書籍内で使っているMongoDBとRenderのウェブサイトのUIが変わっており、その画像の変更にも意外と時間をとられました。

## うれしかったこと
先日、X（Twitter）で次のようなポストを見かけました。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog154/mybooks-in-uni-library.jpg
)

</div>

[https://x.com/OUC_Library/status/1830841332870586418](https://x.com/OUC_Library/status/1830841332870586418)

電子書籍版もペーパーバック版も、個人の方が購入・利用するものだと私は考えていたので、図書館のような公共機関に購入していただいているとは思っていませんでした。

手に触れられず共有もできない電子書籍ではなく、物理的な「モノ」としてのペーパーバックには、こういう強みもあるんですね。

そして大学の図書館という、若い学生の方たちが無料で読める環境に私の本があることもうれしく思いました。

私自身学生の時には、1000円、いや500円の文庫本を買うのにもためらいを覚えていたので、このように大学図書館に購入いただいたことで、間接的にも学生の方たちの助けになればと思っています。

## 目次

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B09X56PSCQ">
    <img class="bc-cover" src="/images/commonImg/nodebook-advanced.svg" alt="はじめてつくるバックエンドサーバー発展編（Node.js & Express & MongoDB）" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるバックエンドサーバー発展編（Node.js & Express & MongoDB）</p>
        <p class="bc-desc">【2024年9月改訂版リリース。ログイン機能を持った本格的なNode.jsアプリ開発を、ビギナー向けにわかりやすく解説】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/update-node-book-2-advanced">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/update-node-book-2-advanced)

---

# ターミナル（zsh）の名前とホスト名を変更する方法

URL: https://monotein.com/blog/how-to-change-names-in-terminal-zsh
公開日: 2024.8.9
更新日: 2026.3.30
概要: ターミナル（zsh）に表示されるユーザー名とホスト名を変更する方法。コマンドを2つ実行するだけ。1分で終わります。プログラミングのビギナーや初心者向け。Macユーザー向け。

## 前提
*本記事はMacOS Catalinaからターミナルに使われているzsh向けの説明になります。Catalinaより前（Mojave）のMacOSで使われていたbashはカバーしていません。

## ターミナルの表示名を変更する簡単３ステップ
Macでターミナルを開くと、次のようにユーザー名とホスト名が表示されます（下記は私のケース）。

```shell
monotein@akimiyoshi-MacBook-Pro ~ % 
```

これを、たとえば次のような任意のものに変える方法を紹介します。

```shell
tokyo@japan ~ % 
```

## STEP 1

まず`.zshrc`ファイルというものを作成しましょう。

ターミナルに下記コマンドを入力し、Enterキーで実行してください。

```shell
touch ~/.zshrc 
```

特に何も変化はありませんが、これで`.zshrc`ファイルができました。

## STEP 2

次は下記コマンドで`.zshrc`ファイルを開きましょう。

```shell
open ~/.zshrc 
```

テキストエディターが開くので、ここに表示させたい名前を入力します。

## STEP 3

たとえば表示を`mod728@Mac ~ `としたい場合には、次の文字列を入力して保存しましょう。

```shell
export PS1="mod728@Mac ~ "
```

最後に`%`をつけて`mod728@Mac ~ %`としたい場合には、次の文字列を入力して保存します。

```shell
export PS1="mod728@Mac ~ %# "
```

ターミナルを再起動すれば、表示名が変わっているはずです。

名前の変更方法がわかったら、次は実際に開発を始めてみましょう。

現在のReact開発のスタンダード「React + Vite」のガイド記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-change-names-in-terminal-zsh">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-change-names-in-terminal-zsh)

---

# Next.jsのbuild時、特定のURLを除外する方法

URL: https://monotein.com/blog/nextjs-excluding-specific-path-from-build
公開日: 2024.7.28
更新日: 2024.8.1
概要: Next.jsの開発時（development）には必要なものの、オンラインでの公開時（production）には隠しておきたいURLには、redirectsを使いましょう。next.config.jsに下記コードを貼り付ければ、すぐにリダイレクト機能を実現できます。

## build時に特定のURLを除外するコード（Next.js）
build時に特定のURLを除外する方法。

一番簡単なのはもちろん、該当のフォルダ（or ファイル）自体を`app`フォルダや`pages`フォルダから取り除いてbuildする方法です。

しかしこれ以外の方法はないのかと、サッと調べてみました。

見た限りでは、Next.jsで特定のURLを`npm run build`コマンド実行時に除外するコードはないようです。

しかし「ユーザーからのアクセスを妨げる」という効果を実現する方法はいくつかあります。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-excluding-specific-path-from-build">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-excluding-specific-path-from-build)

そのひとつは[pageExtensionsを使う方法](https://nextjs.org/docs/pages/api-reference/next-config-js/pageExtensions)ですが、もっとシンプルなのは`redirects`を使うもので、コードは次のようになります（下記は`next.config`の拡張子が`.mjs`のケース）。

```js
// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    redirects: () => {
        if(process.env.NODE_ENV === "production"){
            return[
                {
                    source: "/hobby/:path*",
                    destination: "/",
                    permanent: true,
                }
            ]
        }else{
            return []
        }
    },
    reactStrictMode: true,
}

export default nextConfig
```

`next.config`の拡張子が`.js`のケースでは、最終行のexport部分のコードが変わり、次のようになります。

```js
// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
    redirects: () => {
        if(process.env.NODE_ENV === "production"){
            return[
                {
                    source: "/hobby/:path*",
                    destination: "/",
                    permanent: true,
                }
            ]
        }else{
            return []
        }
    },
    reactStrictMode: true,
}

module.exports = nextConfig
```

`next.config`に上記コードを書くと、build後の公開時（production）、`/hobby`を含む`/hobby`から下のURLへのアクセスは、すべてトップページの`/`にリダイレクトされます。

Next.jsバックエンドAPIのURLなど、手元のコンピューターでの開発時には利用するものの、オンラインでの公開時には存在しなくてもいい、あるいは別の理由で除外したいURLなどを隠すときに使える方法です。

---

*Next.jsバージョン13以前のPagesフォルダでは、たとえば次のように`destination`に`404`と書けば、404ページに遷移します（ファイル名を`404.js`とした404ページを用意しておきましょう）。

```js
source: "/hobby/:path*",
destination: "404",
permanent: true,
```

Next.jsの公開方法やApp Routerの全体像は、こちらのガイドでまとめて確認できます▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

Next.jsを実際にコードを書きながら理解したい人には、ぴったりの教材があります。

最新のNext.js Appルータとともに、API（Route Handlers）、Supabase、JWT、Cloudinaryなどを使って本格的なフルスタックアプリを開発する方法を、ビギナー向けにわかりやすく紹介しています（2026年時点で最新のNext.jsバージョン16使用）。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFXVMSF">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1.svg" alt="Next.jsでつくるフルスタックアプリ 前編（バックエンド開発）with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【最新のNext.jsバージョン16をつかった本格アプリの開発手法がわかる入門書。Route Handlers使用】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-excluding-specific-path-from-build">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-excluding-specific-path-from-build)

---

# Next.jsをVercel以外で公開する方法（Git不要／Appルータ使用／Netlify）

URL: https://monotein.com/blog/deploy-nextjs-to-other-hosting-platforms
公開日: 2024.6.13
概要: GitもVercelも使わずにNext.jsを公開する方法です。1分で終わる簡単な作業で、Next.jsをNetlifyに公開します。Appルータ使用。export時にはNext.jsのImageコンポーネントの最適化が行われないので、画像最適化をオフにするコードをnext.config.mjsに追加しましょう

## Vercel以外でNext.jsをデプロイ
Next.jsは開発元のVercelで公開するのがほぼデフォルトになっていますが、他のプラットフォームでもデプロイは可能です。

本記事ではその方法を、ドラッグ＆ドロップで簡単に公開できるNetlifyを使って紹介します。

GitHubやGitLabなどへのコードのプッシュも不要です。

（*Next.jsの使い方は、3分でNext.jsが使えるようになる<a target="_blank" rel="noopener" href="/blog/nextjs-typescript-how-to-use">こちらの記事</a>を参考にしてください。）

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/deploy-nextjs-to-other-hosting-platforms">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/deploy-nextjs-to-other-hosting-platforms)

## Next.jsをexportするコード
Vercel以外で公開するには、buildとexportという作業を、あらかじめ手元のコンピューター内で行う必要があります。

exportを行う下記コードを`next.config.mjs`に追加しましょう。

```js
// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: "export",     // 追加
};

export default nextConfig;
```

保存します。

次にターミナルでbuildを行う下記コマンドを実行してください。

```shell
npm run build
```

すると`out`フォルダが作られます。

![image](../../images/singleBlogPageImages/blogArticleImages/blog151/opt-folder.jpg)

このフォルダをNetlifyやNetlify Dropなどに直接ドラッグ&ドロップすれば公開完了です。

Netlify Drop: https://app.netlify.com/drop

## Next.jsをexportすると画像が表示されない
さて、公開されたサイトを確認すると、画像が正しく表示されていないかもしれません。

`next/image`の`<Image>`を使って表示させている画像です。

これは`<Image>`の画像最適化がexport時には機能しないためです。

この解決には2つの方法があり、ひとつ目はCloudinaryなどの[外部サービスで画像最適化を行う方法](https://nextjs.org/docs/app/api-reference/components/image#loaderfile)、ふたつ目が画像最適化をしない方法です。

簡単に済むのはふたつ目なので、`<Image>`の画像最適化をオフにする下記コードを`next.config.mjs`に追加してください。

```js
// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: "export",
    // ↓追加
    images: {
        unoptimized: true,
    }
    // ↑追加
};

export default nextConfig;
```

保存後、再び`npm run build`を実行して`out`フォルダをドラッグ&ドロップすると、画像が表示されます。

デプロイ方法が分かったら、Next.jsのセットアップからRSC・Server Actionsまでを体系的に整理したガイドもあわせて確認しておきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

Next.jsについてもっとくわしく知りたい方は、下記教本を参考にしてください。

最新のNext.js Appルータとともに、API（Route Handlers）、Supabase、JWT、Cloudinaryなどを使って本格的なフルスタックアプリを開発する方法を、ビギナー向けにわかりやすく紹介しています（2026年時点で最新のNext.jsバージョン16使用）。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFXVMSF">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1.svg" alt="Next.jsでつくるフルスタックアプリ 前編（バックエンド開発）with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【最新のNext.jsバージョン16をつかった本格アプリの開発手法がわかる入門書。Route Handlers使用】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/deploy-nextjs-to-other-hosting-platforms">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/deploy-nextjs-to-other-hosting-platforms)

---

# 腐る本を書きつづける空虚感 ― 賞味期限の長い本と、賞味期限の短い本

URL: https://monotein.com/blog/writing-practical-books-and-its-emptiness
公開日: 2024.5.19
概要: 技術書は「時間が経つと読めなくなってしまう本」の典型です。本の寿命を伸ばし、そしてできるだけ長く読んでもらうためにすべきこと、それは「情報」「知識」だけでなく「感情」についても書くことです。

## この記事の内容

次のことに触れています。

---

• 本の「賞味期限」の意味

• 技術書がすぐに腐る理由

• 時間の経過とともに読まれなくなる本の特徴

• 長く生き残る本を書くために必要なこと

• 私自身が本を書きながら感じていた空虚感と、それを乗り越えた方法

---

それでは以下、本編です。

## 本の賞味期限
私はこれまでプログラミングの入門書を20冊以上書いてきましたが、その初めの1冊目を3年前に書いていたとき、あることに気がつきました。

本には賞味期限があることです。

## 賞味期限が短い本
「賞味期限が短い本」とは、すぐに読まれなくなる本、もっと正確にいうと「読めなくなる本」のことです。

技術書はその典型で、時間の経過とともに内容が陳腐化してしまい読めなくなります。

たとえば「Windowsの最新バージョンの使い方」について世界でもっともくわしく書いた書籍を今年出したとしても、来年になって新しいバージョンのWindowsが出たら、その本を読む人はいなくなるでしょう。

つまり書いた時点での価値がもっとも高く、その後は時間の経過とともに猛烈な勢いですり減っていくような本。これが賞味期限の短い本です。

あつかう内容が最先端であればあるほど、実用的であればあるほど、具体的であればあるほど、そして現実に密着していればいるほど、陳腐化のスピードは速まり、賞味期限も短いものになります。

（書籍ではないですが）新聞や週刊誌といったものを考えれば、時間とともに現実との関係性を失っていくような本があることを理解しやすいと思います。

情報提供を目的としたものはもっとも腐りやすいのです。

## 賞味期限が長い本
一方で賞味期限の長い本、つまり50年、100年、500年、1000年といった時間のあとでも読める本とはどのようなものでしょうか。

それは人間について書いた本、より正確にいえば感情について書いた本です。

小説はその典型でしょう。

1000年前の源氏物語をいまでも面白く読めるのは、この本が当時の最先端の稲作技術だとか、流行していた着物の柄だとか、あるいはおすすめの京都の飲食店の情報だとかについての本ではなく、人間について、人間の感情について書いてあるからです。

小説だけでなく、随筆やエッセー、あるいは哲学書もこの賞味期限の長い本に含まれます。

2000年も読まれているギリシャ哲学の本や、1000年も読まれている源氏物語は例外的といってもいいですが、しかし10年前や20年前といった短いスパンで考えても、今でも読める昔の本というのは小説であったりエッセーであったりで、決して技術書ではないと思います。

## 外部に依存した本は一緒に腐る
ここまでのことをまとめると、「情報」あるいは「現実」のような「書き手の外部」にあるものについての本は、賞味期限が短く、その対象と一緒に腐ってしまうとわかります。

一方で、「人間」あるいは「感情」のような「書き手の内部」にあるもの、自分の中から養分をくみ取って生み出した自家発電のような書き物は賞味期限が長いのです。

## 虚無感を感じながらの執筆
冒頭にも書いた通り、このような本の賞味期限の長短について私が気がついたのは3年前、プログラミング入門書（下掲）をはじめて書いていたときでした。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">【2026年1月第3版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

この本がプログラミングの中でも特に変化の激しいフロントエンドと呼ばれる分野の技術についてのものであったことも、このような賞味期限への私の感覚を鋭くしていたのでしょう。

そしてここにある種の空虚感を覚えました。

誰しもそうですが、自分が苦労して作ったものは「できるだけ長く使えるものになってほしい」、本でいえば「できるだけ長く読まれてほしい」と思うからです。

しかし現実には、本の中であつかっている題材ゆえ、その終わりがすぐに来てしまうことは明らかでした。

「これが役に立つのは出版してからせいぜい6ヶ月だけ」「1年後には新しいテクノロジーが出てきて、誰にも読まれないものになっている」という認識を持つこと、つまりすぐに使えなくなるものに人生の時間を費やしている空虚感があったのです。

最初の一冊を書いて以降、かなり長い間このような感覚……自分は使い捨てのものを作っている、うすっぺらいことをしている……という感覚がどこかにありました。

## 賞味期限の短い本は他にもあった
賞味期限が短い本になってしまうのは、これがプログラミングという変化の激しい分野だからと思い、その分野の本を書かざるを得ないことに、やや自己憐憫を覚えることもありました。

しかしよく考えてみれば、賞味期限が短い本はプログラミング分野だけではなかったのです。

たとえば法律書。

本屋にいけば、立派な装丁の法律専門書がたくさん並んでいます。

プログラミングの本なんかよりもはるかに制作費がかかっていそうなその見た目は重厚で、真面目で、堅牢で、賞味期限も実に長そうです。

しかし法律というものが実は不変ではなく、むしろその時々の社会情勢に応じてすぐに変わっていくことを思えば、法律書も実はとても腐食しやすいことに気がつきます。

同じことは経済の本にも、歴史の本にも、医学の本にも、料理の本にもいえるでしょう。

このことに気がついたとき、私は「腐りやすいのはプログラミングの本だけじゃなかったんだ」とわずかに救われた感覚を覚えましたが、同時にこれが「賞味期限の長い本」についてもう少し深く考えるきっかけのひとつになりました。

## 3年経っても読まれている
下記記事にも書きましたが、フロントエンド技術をあつかった本が出版から3年経ってもまだ読まれているのは、著者である私にとってまったく予想していないことでした。

<div class="rich-card-link">
<a href="/blog/update-react-1-book-ts-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-147.png)

</div>
<div class="r-card-text">
『はじめてつくるReactアプリ（with TypeScript）』第2版をリリース／Vite使用
</div>
</div>
</a>
</div>

先ほど触れたように、半年ほどで時代遅れになると思っていたからです。

実際のところ、この3年のあいだ、電子書籍である特徴を活かして内容のアップデートを重ねていたので、「出して終わり」となってしまう普通の紙の書籍とはやや異なるアプローチが可能だったことは事実でしょう。

しかしまだ腐らずに読まれていることには、もうひとつ理由があるように思います。

## ノウハウ系とメンタル系
以前どこかで、「オンライン上のコンテンツにはノウハウ系とメンタル系の2種類しかない」と耳にしました。

この見方を私が面白く感じたのは、書籍も「ノウハウ系」と「メンタル系」に分けられると思ったからです。

ノウハウ系の本とはスキル（技）についての本で、情報提供や技術の伝達を目的とするもの。

メンタル系の本とはマインド（心）についての本で、こころ構えや物の見方・考え方、つまり感情について書いてある本です。

あたりまえですが、情報提供を目的としている本はそもそも書籍というフォーマットである必要もないため、賞味期限は短くなります。

一方で心について、感情について書かれた本は、その内容や書き方にもよりますが、少なくともノウハウ系の本よりも長く読まれる可能性が高いでしょう。

感情をあつかうマインド系の究極の形が小説や随筆、哲学書で、ここまで行けば100年後でも誰かに読んでもらえるかもしれません。

---

先日、第2版への改訂のため、3年前に書いた本を読み返していました（くわしくは下記記事参照）。

<div class="rich-card-link">
<a href="/blog/update-react-1-book-ts-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-147.png)

</div>
<div class="r-card-text">
『はじめてつくるReactアプリ（with TypeScript）』第2版をリリース／Vite使用
</div>
</div>
</a>
</div>

そこで思ったことは、この入門書が3年経っても読まれている理由のひとつは、ここにはスキル系だけなく、メンタル系の内容も書いてあるからではないかということです。

この本では「読者に最新技術を習得してもらう」ということと同時に、「ビギナーに『自分にもできた』という小さな成功体験を作ってもらう」ことにも重点を置いています。

小さな成功体験こそが自信を生み、それが前へと進む推進力となるからです。

それは学習を進める推進力であると同時に自分の人生を進めていく推進力で、より良い方へ、より明るい方へ、より居心地の良い方へと進んでいく力です。

『[はじめてつくるReactアプリ](https://www.amazon.co.jp/dp/B08XWMVX76)』を読み返していて、この本にはこういった「メンタル系」の記述が少なからずあることに気がつきました。

Amazonのレビューを読んでいても、こういったところに気がつき、賛意を示してくれている人は多いようです。

## 長く読まれる本を書く方法
以上のことを踏まえると、本の賞味期限を延ばし、できるだけ長く読まれるようにするには次のことが有効だとわかります。

つまり情報や知識、テクニックだけなく、読者の感情を少しでも揺さぶるような事柄も書くこと。そしてこの2つが本の中でうまく混ざっていること。

この考え方は、賞味期限が長いものとして上で挙げた随筆やエッセーにも当てはまることかもしれません。

エッセーの難しさは、そもそも読んでもらえないところにあります。

「私はこう感じました」「私はこう思いました」という感情世界の出来事は、本人にとっては一大事でも、他人にとってはどうでもいいことだからです。

一方で芸能人や有名作家の書いたエッセーは読まれます。

読者の側に「あの人は普段どんなことを考えているんだろう？」「この人は物事をどう感じているんだろう？」といった、著者の感情に対する好奇心があるからです。

このような著者の重要度は、プログラミングの本や知識の伝達を目的とした本では下がります。むしろほぼないといってもいいでしょう。

読者は「JavaScriptについて知りたい」「アメリカの経済政策について知りたい」という内容に引かれて本を開くからです。

ここでは「誰が書いたのか」ではなく、「何が書いてあるのか」という点にだけ読み手の関心はあります。

そのため、無名の書き手が自分のエッセーをもっと読んでもらうには、自分の感じたことを書くだけでなく、その中で扱う対象には多くの人が興味をもっている事柄を選ぶのがポイントになるでしょう。

たとえば、佐藤さんという普通の人が『ザンビア滞在記』というエッセーを書いたとき、この本に対する読者の興味の入り口はほぼ存在しないことになります。

ほとんどの日本人はザンビアという国自体知りませんし、佐藤さんの感情の動きなんかにも関心を払っている余裕はないからです。

本への入り口、つまり本を手に取る理由やきっかけが見えにくいのです。

一方、同じ佐藤さんが『フランス滞在記』というエッセーを書いたら、日本人はほぼ全員フランスという国を知っているので、「フランスに対する興味」、つまり「本が扱っているテーマ」に対する興味から手に取る人が出てくるでしょう。

佐藤さんの感情世界の出来事になんかこれぽっちも興味がなくとも、「フランス」というテーマが読者を誘うエサ、つまり本への入り口となり得るのです。

そしてもしこの本がうまく書けているなら、多くの人に読まれ、長く読み継がれることにもなるかもしれません。

「テーマ（本の内容）」だけにフォーカスすると、人に読んでもらえる可能性は高まるが賞味期限は短い。

一方、「感情（本の著者）」にフォーカスすると、賞味期限は長くなるが人に読んでもらえる可能性は低くなる。

そのため、特に有名でもない普通の書き手が賞味期限の長いもの、つまり感情について書きたい場合、本のメインテーマには多くの人が興味のあることを選べばうまくいく可能性が高くなるかもしれません。

## 文章は形容詞から腐る
三島由紀夫は小説『禁色』で「文章は形容詞から古くなる」と書いています。

本当に形容詞から古くなるのか私にはわかりませんが、しかし言葉自体が古くなったり、意味が変わったり、使われなくなったりすることは誰もが知っていることです。

たとえば現代語で「女房」は「妻」という意味ですが、平安時代は「宮廷で働く女性」のことを指していました。

本が扱う内容だけでなく、本を構成する最小の要素「言葉」というものすらも古びていくのです。

感情だけを上手に扱っても、それが保証する賞味期限はある一定の期間に過ぎない。そしてこの世に腐らないものはない、ということがわかります。

## 私と読者の二者関係から生まれるもの
さて、ここまで本の賞味期限の長短や、メンタル系の内容を混ぜて腐食を防ぐといった、やや分析的なことを書いてきました。

これらは、賞味期限の短い本を書いているところから来るある種の空虚感を解消するために考え始めたことですが、しかしこれで私の気持ちが晴れたのかというと、そうではありません。

「賞味期限の短い本の執筆に人生の時間を費やしている」という見方を変えられたのは、もっと別のことに気がついたからです。

それは、読者からメールで直接いただいたある感想を読んでいて、ふと思ったことでした。

「*……賞味期限が短いとしても、この本で読者の人生が変わったり、何かポジティブな気持ちを得てくれたりしたなら、その読者の未来において私の本は『2024年当時最新とされていた、でも今では誰も使っていないテクノロジーについて書いてある、もはや完全に腐食してしまった本』ではなく、『人生を変える手伝いをしてくれた本』になりえるのかもしれない……*」

単なる本という存在を超えた、もっと超越したなにかに読者の中ではなり得るのかもしれない。

私自身をふりかえってみても、そういった本に何度か出会ってきました。

そこに書いてある情報や知識は今では意味を失っているものの、しかし文章の中に見えた作者からのメッセージ、つまり作者の感情は、今でも自分の中で生きていて、時折り思い出してしまうような本です。

私がひとり頭の中で考えていたら空虚でしかないものであっても、読者の存在について考えたとき、つまり私と読者という二者の関係の中にその本を置いたとき、そこからまた別の意味が立ちのぼってくる可能性があることに気がついた瞬間でした。

## 読者について考える
本というのは書いて終わりではなく、あるいは内容をアップデートし続けてすべてよしでもなく、誰かに読まれることでまた別の命が吹き込まれていくのだと知りました。

読者との関係の中で、まったく新しい、書き手が予想していなかった意味が立ち上がってくることに気がつくと、読者について考える大切さがもう少し深くわかるようになりました。

これまでも「読みやすさ」「わかりやすさ」という点には注意を払って執筆していましたが、そういういわば表面的・技術的なことではなく、「本当に役に立つものを読者に渡したい」という気持ちです。

こんなことに3年経ってようやく気がつきました。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/writing-practical-books-and-its-emptiness">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/writing-practical-books-and-its-emptiness)

---

# 私たちが入門書で挫折するわけ

URL: https://monotein.com/blog/reasons-for-avoiding-comprehensiveness
公開日: 2024.5.2
更新日: 2026.3.27
概要: 入門書には網羅性や包括性をめざしたものがたくさんありますが、例外なく退屈です。細切れで断片的な知識の羅列となっているからです。読者はそれぞの項目の「つながり」と「使い方」がわからず挫折します。私は「はじめてつくるReactアプリ」などでは包括性は目指さないアプローチをとっています。

## 網羅性を避けた理由
これまでに私はいくつかのプログラミングの教本を書いてきましたが、そこにはひとつ共通するコンセプトがあります。

【 *網羅性を目指さない* 】

たとえばReactについて書いた『[はじめてつくるReactアプリ](https://www.amazon.co.jp/dp/B08XWMVX76)（2026年1月第3版リリース）』であれば、Reactというツールの全事項の紹介はしないということです。

教科書風の入門書でよく見る網羅性を目指すものとは真逆のアプローチでした。

網羅性や包括性を目指さなかったことには、次の2つの理由があります。

---

• 列挙は退屈

• 親切じゃない

---

それぞれについて簡単に説明しましょう。

## 列挙は退屈
ある分野のすべてをカバーしたものを作ろうとするとき、その中身はどうしてもそれぞれの項目を列挙したものになります。

高校時代に使っていた英語の文法書を思い出してみましょう。

「動名詞」「不定詞」「仮定法」「関係代名詞」といった英語文法の各項目が並んでいたはずです。

全範囲をカバーしようという網羅性・包括性をめざすとき、構成がこのような知識の列挙型となるのは避けられません。

辞書も同じです。

すべての言葉の意味を網羅しようとする結果として、辞書の構成は知識の羅列になっています。

そしていわずもがな、このような列挙は退屈です。

なぜ退屈なのでしょうか？

この理由は、今から書いていく私が網羅性を目指さなかった2つ目の理由につながります。

<div class="rich-card-link">
<a href="/blog/ideal-beginner-books">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-129.png)

</div>
<div class="r-card-text">
「これ一冊だけでOK！」という入門書が全然OKではない理由
</div>
</div>
</a>
</div>

## 読者に親切じゃない
知識の羅列が退屈な理由。

それは、それぞれの項目の「つながり」がわかりにくいからです。

「不定詞」「仮定法」といった個別の項目を解説されても、読者は「それらはどうつながっているのか」、そして「どう使うのか」がわかりません。

「不定詞」の知識を得て不定詞の文は作れるようになっても、文章には通常複数の文法が使われているのが普通なので、不定詞の知識を他の文法と組み合わせて意味のある文章を作ること、つまり「使い方」がわからないのです。

（この例外は「不定詞について知りたい」「関係代名詞について知りたい」という、はっきりした目的を持って本を開く人ですが、こういう人たちはすでに該当の知識をある程度持っている中級者や上級者たちで、「知識の確認」のために必要なところだけを見返しています。1ページ目から順々と読んでいく人たちではないでしょう。）

各項目のつながりがはっきりせす、そしてそれをどう使うのかもわからなければ、当然わたしたちは退屈します。

各項目の関係性、いわば「ストーリー」が見えなければ、記憶にも定着しません。

バラバラと細切れになったことの羅列を読み進めるモチベーションが湧かないのは当然でしょう。

さらに知識の列挙は、そもそも読者に不親切といえます。

読者はずらっと並べられた断片的な知識の関係性と使い方を自ら見つけていく必要がありますが、それがいつ見つかるのか、そしてそれまでにどれだけ時間がかかるのかは誰にもわかりません。

「仮定法」の知識を得ても、それを実際に使ってみて「本当の使い方」を体得するまで読者は待たなければいけないのです。

このような「余計な負担」は、読者に親切とはいえません。

---

私たちが本を開いて1ページ目から読んでいくのは（それが小説ではない場合）、いま役に立つ、いま使える、そしていま学ぶ価値があったと思えることを、できるだけすばやく、できるだけラクに身に付けたいからです。

そういうニーズが読者にあることを書き手が意識しているなら、できるだけ読者の負担が少ない伝え方や構成を選ぶのがもっとも自然な選択肢となります。

<a href="/present?magnet=first-study-guide&from=6april">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=6april">monotein.com/present</a>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/reasons-for-avoiding-comprehensiveness">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/reasons-for-avoiding-comprehensiveness)

---

# Vite + Reactの始め方｜インストールから起動まで3分で完了【2026年版】

URL: https://monotein.com/blog/react-vite-how-to-use
公開日: 2024.4.25
更新日: 2026.7.6
概要: 2026年現在、create-react-appの使用はもはや推奨されていません。React + Viteを使うのがデフォルトです。本記事ではそのReact + Viteの使い方をビギナー向けに紹介します。

## create-react-appとVite + React
私は2021年から、Reactビギナー向けの入門教材を数多く作っています。

▶︎[Amazonの著者ページへ](https://www.amazon.co.jp/stores/author/B099Z51QF2)

当初の教材では、React開発ツールとして「create-react-app」を使っていました。

「create-react-app」は機能がしぼられている分、React自体に集中でき、初心者には最適だからです。

しかし2026年現在、「create-react-app」は推奨されていません。

「create-react-app」のメンテナンスも2023年春から止まっています。

近年のReact開発では、「Vite + React」というものを使うのがスタンダードです。

本記事では、ビギナー向けに、この「Vite + React」のインストール方法と使い方の初歩を紹介します。

今回はJavaScriptを使いますが、TypeScriptを使う場合は下記記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/react-vite-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-237.png)

</div>
<div class="r-card-text">
【Vite + React + TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

## 「Vite + React」について
最初に「Vite + React」を簡単に紹介します。

従来まで使われていた「create-react-app」との最大の違いは、JavaScriptファイルをまとめる仕組みです。

---

Reactでは大量のJavaScriptファイルが使われています。

そのため、ブラウザでJavaScriptを実行する前に、それらを一度まとめてあげる必要があるのです。

この大量のファイルを束ねるプロセスは「バンドル」、そこで使われるツールは「バンドラー」と呼ばれます。

「create-react-app」では、Webpackというバンドラーが使われていました。

バンドラーにはWebpack以外にも複数ありますが、近年、日本を含め世界的にポピュラーなものがViteになります。

このViteをWebpackの代わりに使ったもの、それが「Vite + React」です。

Viteは処理能力が高いため、Webpackを使っている「create-react-app」と比べ、ファイルの変更をブラウザに反映させるまでの時間や、build実行時の待ち時間が大幅に短くなっています。

【 よりスピーディに、ストレスなく開発を進められる 】

これが「Vite + React」が支持を集める理由のひとつです。

それでは次に、「Vite + React」のインストール方法とbuildについて紹介をしていきます。

## 「Vite + React」のインストール方法
ターミナル上で、「Vite + React」をインストールしたいフォルダに移動します。

ここでは「ダウンロード」フォルダにいるものとします。

そして次のコマンドをターミナルに打ち、「Enter」キーで実行してください。

```shell
npm create vite@latest
```

ここで次のような表示が出ることがありますが、特に問題ではないので、「Enter」キーを押して次に進んでください。

```shell
Need to install the following packages:
    create-vite@9.0.4
Ok to proceed? (y) 
```

これ以降、質問がいくつか出てくるので回答していきましょう。

最初はこのアプリの名前で、これがフォルダの名前に使われます。

```shell
◆  Project name:
│  vite-project
└
```

名前は好きなものが使えます。

ここでは「first-react-app」と書きましょう。

```shell
◆  Project name:
│  first-react-app
└
```

「Enter」キーを押すと次の質問が出ます。

```shell
◆  Select a framework:
│  ○ Vanilla
│  ○ Vue
│  ● React
│  ○ Preact
│  ○ Lit
│  ○ Svelte
│  ○ Solid
│  ○ Qwik
│  ○ Angular
│  ○ Marko
│  ○ Others
└
```

Reactを使った開発をしたいので、キーボードの矢印キーで「React」を選び、「Enter」キーで決定します。

次は、開発言語／フレームワークとして何を使うかを決める質問です。

```shell
◆  Select a variant:
│  ○ TypeScript
│  ○ TypeScript + React Compiler
│  ● JavaScript
│  ○ JavaScript + React Compiler
│  ○ RSC
│  ○ React Router v7 ↗ https://reactrouter.com
│  ○ TanStack Router ↗ https://tanstack.com/router
│  ○ RedwoodSDK ↗ https://rwsdk.com
│  ○ Vike ↗ https://vike.dev
└
```

ここでは「JavaScript」とだけ書かれているものを選び、「Enter」キーを押しましょう。

次はnpmパッケージを一緒にインストールするかを問う質問です。「No」を選び、「Enter」キーを押しましょう。

```shell
◆  Install with npm and start now?
│  ○ Yes / ● No
└
```

次のような表示が出たら、セットアップは完了です。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog148/pic-3.jpg)

</div>

ダウンロードフォルダを見ると、「first-react-app」フォルダが出来ています。

これをVS Codeで開きましょう（VS Codeにフォルダを直接ドラッグ&ドロップすれば開けます）。

中身は次のようになっています。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog148/pic-4.jpg)

</div>

かつて使われていた「create-react-app」との主な違いは次の点です。

---

⚫︎ Reactファイルの拡張子が`.js`ではなく`.jsx`になっている

⚫︎ ファイル名が`index.js`の代わりに`main.jsx`となっている

⚫︎ `index.html`が`public`フォルダの外に置かれている

⚫︎ Viteの設定ファイル`vite.config.js`がある

⚫︎ 起動コマンドが`npm start`ではなく`npm run dev`になっている

---

さて、先ほどの質問「Install with npm and start now?」では「No」を選びました。

なので、最初に「Vite + React」で必要なパッケージをインストールする必要があります。

VS Code上部メニューバーの「Terminal」から「New Terminal」を選び、VS Code下部にターミナルを出してください。

そこに、パッケージをインストールする下記コマンドを打ち、「Enter」で実行しましょう。

```shell
npm install
```

`node_modules`が作成されます。

これはパッケージ関係のフォルダです。

これで起動コマンドである`npm run dev`を実行すると、「Vite + React」が起動します。

しかし、その前にフォルダ内を整理しましょう。

なお「React + Vite」とよく一緒に名前が挙がるのがNext.jsです。

このNext.jsも本記事と同じように3分で使えます。

詳しくはこちらの記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/nextjs-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-242.png)

</div>
<div class="r-card-text">
【Next.js × TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

React + ViteとNext.jsには、それぞれメリット／デメリットがあります。

目的ごとの適切な選び方は下記記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/react-vite-or-nextjs-which-to-choose">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-187.png)

</div>
<div class="r-card-text">
【2026年版】React + ViteとNext.js、どちらを選ぶべきか？ 用途別の選び方を分かりやすく解説
</div>
</div>
</a>
</div>

<br/>

## 「Vite + React」のクリーンアップ
まっさらな状態で始めたいので、不要なものを削除していきます。

`src`フォルダを開き、その中の`assets`フォルダ、`index.css`を削除してください。

さらに`public`フォルダ内に入っているファイルは、`favicon.svg`以外はすべて削除しましょう。

次のようになります。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog148/pic-5.jpg)

</div>

（*eslint.config.jsについては<a href="/blog/what-is-eslint">こちらの記事</a>を参照）

次は`App.css`を開いてください。

コードがすでに書かれているので、すべて消しましょう。

次のようになります。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog148/pic-6.jpg)

</div>

次は`App.jsx`を開き、ここでも同様に、書かれているコードをすべて消しましょう。

そして次のコードを書いてください。

```js
// App.jsx

import './App.css';

function App() {
    return (
        <div>
            <h1>こんにちは</h1>
        </div>
    );
}

export default App;
```

クリーンアップの最後が`main.jsx`です。

`main.jsx`を開き、次のコードを消しましょう。

```js
// main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'        // 削除
import App from './App.jsx'
  
createRoot(document.getElementById('root')).render(
  <StrictMode>  
    <App />
  </StrictMode>,  
)
```

VS Code上部メニューバーの「File」→「Save」、もしくは「Command」+「S」で、各ファイルに加えた変更を保存しましょう。

これでクリーンアップが完了して、「Vite + React」開発を始める地ならしができました。

（*なおReactファイルで必ず使われている`export`、`import`は多くのビギナーがミスをするところです。使い分けは<a href="/blog/import-export-react">こちらの記事</a>をご覧ください。）

次は「Vite + React」を起動させましょう。

ターミナルに`npm run dev`を打ち、「Enter」で実行すると、次のように表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog148/pic-7.jpg)

</div>

「create-react-app」の経験者は、この起動時間が「Vite + React」の方が短いことに気づいたと思います。

指定されている`http://localhost:5173`を開いてみましょう。

次のように表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog148/pic-8.jpg)

</div>

VS Codeに戻り、`App.jsx`内の`<h1>`タグの文字列を、「さようなら」に変えて保存してみましょう。

ブラウザを見ると、表示も変わっています。

つまり`App.jsx`の`return`横のカッコ`( )`内は、HTMLと同じ要領で編集できることがわかります。

これが「Vite + React」の使い方の初歩の初歩です。

とはいえ、ここで触れたのはコンポーネントの表示を書き換えるという、ごく基本の一歩だけです。

state、props、イベント処理など、Reactアプリらしい動きをつけるにはまだ多くの知識が必要になります。

次はReactアプリ公開に必要なbuildを行いましょう。

## 「Vite + React」のbuild方法
開発が完了し、オンラインで公開するときには「build」という作業を行います。

まず、ターミナル上で「control」を押しながら「C」を押して、「Vite + React」を停止させてください。

そして下記buildコマンドを打って、「Enter」キーで実行しましょう。

```shell
npm run build
```

「create-react-app」と比べ、「Vite + React」では、buildの完了までにかかる時間が非常に短いのが特徴です。

さて、`dist`という新しいフォルダが生成されています。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog148/pic-9.jpg)

</div>

これは「create-react-app」のbuild後に作られる`build`フォルダと同様のもので、`dist`フォルダをNetlifyなどにアップロードすれば、アプリをオンラインで公開可能です。

## ここまで終えたら、次は
「Vite + React」のセットアップとbuildまでが完了しました。

これで「React開発のスタートライン」に立てたことになります。

スタートラインに立てたということは、ここからが本番です。

次に学ぶべきことはなんでしょうか？

詳しくまとめたガイドがあるので参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

state、props、コンポーネント設計など、React本体の理解を体系的に進めたい方はこちらの教材をどうぞ▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-how-to-use">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-how-to-use)

## よくある質問
### Q1 create-react-appはもう使えないのですか？
使えなくはありませんが、2023年春からメンテナンスが止まっています。

2026年現在、新しいプロジェクトで使うことを推奨されていないので、これからReact開発を始めるならVite + React一択です。

なおVite + Reactで作るアプリは、SPA（シングルページ・アプリケーション）と呼ばれるものです。

これはNext.jsアプリとは異なるものなので、違いを理解しておきましょう。

SPAについては下記ガイドを参考にしてください▼

<div class="rich-card-link">
<a href="/blog/about-spa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-180.png)

</div>
<div class="r-card-text">
SPAとは？シングルページアプリケーションの仕組み・MPAとの違いを2分で解説
</div>
</div>
</a>
</div>

<br/>


### Q2 Reactアプリでページを作るにはどうすればいいですか？
HTML開発時には`about.html`や`blog.html`というファイルを作れば、それがページになりました。

React開発では別の仕組みが必要です。

React RouterやTanStack Routerと呼ばれるツールを使って行います。

これらのツールはページを作る以外にも様々な便利な機能を提供しているため、Reactアプリでのページ生成時にはほぼ必ず使います。

しかし実は、React RouterやTanStack Routerを使わなくてもページの作成は可能です。

方法は下記の記事で紹介しています。

HTML開発時のように、ファイルをページとして使う方法はこちら▼

<div class="rich-card-link">
<a href="/blog/react-app-routing-without-external-packages-2">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-231.png)

</div>
<div class="r-card-text">
React RouterやTanStackを使わないページ移動の実装方法（File-based routing）
</div>
</div>
</a>
</div>

<br/>

コードでページを生成・管理する方法はこちら▼

<div class="rich-card-link">
<a href="/blog/react-app-routing-without-external-packages-1">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-227.png)

</div>
<div class="r-card-text">
React RouterやTanStackを使わないページ移動の実装方法（Code-based routing）
</div>
</div>
</a>
</div>

<br/>

### Q3 TypeScriptやJavaScriptをまだ学んでいなくても、Vite + Reactは使えますか？
使えます。

HTMLとCSSの知識があればReactの入門は可能です。

TypeScriptやJavaScriptの知識は、Reactに慣れたあとで少しずつ身につけていきましょう。

Reactを学び始めて難しく感じてきた方は、こちらのガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

### Q4 フロントエンドの学習はどのように進めていけばいいですか？
React + Viteのセットアップができても、フロントエンド開発者として就職をしたり、フリーランス案件を獲得するにはまだ不十分です。

TypeScript、Next.jsといったより高度なツールのスキルも必須になります。

学習全体の流れを知りたい方は、こちらのロードマップを参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

### Q5. 最新バージョンのReactについて知りたい。
最新のReactバージョン19や、新しいReactサーバーコンポーネントなどの機能を紹介したガイドがあります。

参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

### Q6. 本記事はJavaScriptでしたが、TypeScriptはどのタイミングで学べばいいですか？
Reactの基本的な動かし方に慣れてきたタイミングがおすすめです。

本記事のようにまずJavaScriptで感覚をつかんでからTypeScriptに進むと、「なぜTypeScriptの記法が必要なのか」を実感しながら学べます。

とはいえ、JavaScriptからTypeScriptへの移行で、違和感を感じる人がいるのも事実です。

その理由と乗り越え方をまとめたガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

### Q7. React入門から一歩進んで、AI時代にも通用するスキルを身につけるにはどうすればいいですか？
本記事で作ったのは、画面に文字を表示するだけの最小限のアプリです。

state、props、コンポーネント設計といったReact本体の理解、そしてReactで使うTypeScriptの知識を、正しい順番で身につける必要があります。

詳しくは下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/about-master-courses">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-248.png)

</div>
<div class="r-card-text">
React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-how-to-use">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-vite-how-to-use)

---

# 『はじめてつくるReactアプリ（with TypeScript）』第2版をリリース／Vite使用

URL: https://monotein.com/blog/update-react-1-book-ts-vite
公開日: 2024.4.12
更新日: 2026.1.30
概要: 人気の『はじめてつくるReactアプリ』（三好アキ著）の第2版を発売。React + Viteを使用。2024年の最新React開発手法を学べるビギナー向け教本。専門用語なしでReact + TypeScriptに入門。

## *第3版リリース（2026年1月追記）

**2026年1月29日に、「第3版」を発売しました。**

**くわしくは下記記事をご覧ください。**

<div class="rich-card-link">
<a href="/blog/update-2026-react-1-book-ts-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-224.png)

</div>
<div class="r-card-text">
『はじめてつくるReactアプリ（with TypeScript）』第3版
</div>
</div>
</a>
</div>

## React + Viteを採用した新版発売
本日（2024年4月12日）、『はじめてつくるReactアプリ』と、そのTypeScript版『はじめてつくるReactアプリ with TypeScript』の第2版をリリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">【2026年1月第3版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B094Z1R281">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts.svg" alt="はじめてつくるReactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ with TypeScript</p>
        <p class="bc-desc">【発売から5年読まれ続けているReact × TypeScript入門書の決定版。2026年1月第3版発売。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

## 最大の変更点（create-react-appからReact + Viteへ）
変更点は、開発ツールをReact + Viteに切り替えたことです。

2021年3月の初版以来「create-react-app」を使っていましたが、今回の新版でReact + Viteに変更しました。

ネットや書籍には「create-react-app」を使う教材がまだまだ多いですが、2024年の開発現場のスタンダードな手法を読者に学んでもらうため、React + Viteを使った第2版へと全面的な改訂を施しました。

---

*• HTMLとCSSの知識だけでReactを始められる*

*• 小さな成功体験を最短最速で読者に作ってもらう*

---

……この初版以来のコンセプトはそのままに、2024年最新のReactおよびReact+ TypeScript開発手法を学べる教材になっています。

2021年の出版以来、定期的にアップデートを施してきましたが、今回がもっとも大きな変更となったので「第2版」という形で出版をしました。

React + Viteへの変更とともに、それ以外の内容にも全面的に手を加えてあります。

## 本書のねらいと対象読者
本書はHTML／CSSの学習を終えた人を対象にしているので、JavaScriptやTypeScriptの知識は不要です。

2時間ほどで完成する簡単なReactアプリ作りを通して、「ビギナーでもReactアプリを作れるんだ」という達成感と、「Reactって難しそうだったけど自分でも勉強を進めていけそうだ」という自信をもってもらうことが本書のねらいです。

サクサクと前に進んでいる感覚を味わいながら短時間でアプリを完成させて達成感を得てもらうため、ReactやJavaScript、TypeScriptの網羅的な解説は大胆に削っています。

この方針については下記記事も参考にしてください。

<div class="rich-card-link">
<a href="/blog/reasons-for-avoiding-comprehensiveness">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-149.jpg)

</div>
<div class="r-card-text">
私たちが入門書で挫折するわけ
</div>
</div>
</a>
</div>

## ハンズオン形式のReact入門書
「作りながら学ぶこと」、「自分の手を動かすこと」が本書のキーポイントです。

下記のような天気アプリの作り方をゼロから解説し、最後は無料でオンライン公開するまでをカバーしています。

https://react-typescript-book-with-vite.netlify.app

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog147/app-weather.jpg)

</div>

## 著者として意外に思うこと
本書初版を出版したのは3年前の2021年です。

著者としては、3年経ってもまだ『はじめてつくるReactアプリ』が多くの人に読まれていることを意外に感じるときがあります。

情報の鮮度が要となるプログラミング分野、その中でも特に変化の激しいフロントエンドのことを扱っている本だからです。

読まれている理由としては「内容を定期的にアップデートして古くならないようにしていること」「網羅性は目指さず、読者の小さな成功体験獲得にフォーカスしていること」「専門用語の使用を避けていること」etc….、いくつも思い浮かびますが、「まだ読まれている」「まだ読者の役に立っている」というのは、著者としては嬉しい限りです。

この点に関しては、下記記事でより深く触れています。

<div class="rich-card-link">
<a href="/blog/writing-practical-books-and-its-emptiness">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-150.png)

</div>
<div class="r-card-text">
腐る本を書きつづける空虚感 ― 賞味期限の長い本と、賞味期限の短い本
</div>
</div>
</a>
</div>

## 予想を超える時間がかかった理由
以下、今回の改訂作業のこぼれ話です。

改訂作業を始める前、これは2、3日あれば終わるだろうと思っていました。

開発ツールをcreate-react-appからReact + Viteに切り替えるといっても、各ファイルに書くReactコードは同じなので、手を加えるところは少ないと思っていたのです。

しかし結果的には、予想の数倍の時間がかかりました。

その原因はViteへの切り替え・書き換えに関する部分ではありません。

「日本語の文章」です。

## 許しがたいこと
当たり前ですが、『はじめてつくるReactアプリ』は文学書でもなければ、文章の美しさを味わう本でもありません。

99%以上の読者は、「Reactを学びたい」という現実的・実利的な目的でこの技術書を開いているでしょう。

なので私も、3年前の初版執筆時にはたいして日本語にはこだわらずに書いていたのです。

しかし時間が経って読み返してみると、当時は気にならなかった「アラ」が目につくようになりました。

この3年間、プログラミングの教本を20冊以上書き、他の場所では随筆のようなものを日本語と英語で大量に書いていたので、いつのまにか私の中での文章の基準が上がっていたのでしょう。

今回の新版執筆にあたって『はじめてつくるReactアプリ』を読み返していると、「よくこんなふざけた日本語を書けたなあ」と思う場面が何度もありました。

ここでいう「ふざけた日本語」というのは、内容がふざけているのではなく、下記のような文章の形式面・技術面のことです。

---

• 一文が非常に長い

• ひとつの文章に複数のトピックが入っていてわかりづらい

• 句点が少なく読みづらい

• 「〜です。〜です。」、あるいは「〜ます。〜ます」と、語尾の同じ文章が連続していて単調

## 実は直すつもりはなかった
今回の新版執筆の作業を始める前から、文章的に気に入らないところがたくさんあることは予想していました。

しかし、それを直すつもりはありませんでした。

実用書の本質とはあまり関係がない「文章」という部分の修正作業、別の言い方をすると、私の自己満足でしかないような作業には時間をかけたくなかったのです。

他にも……

---

• 「いまふり返ってみたら至らない点もあるけど、それでも3年前の自分が書いたもの」という過去の記録として残しておきたい気持ち

• 「多くの人に読まれていながらも、私の文章に対する不満を聞かないのは、意外に読者はこの文章が好きなのかもしれない。受け入れられているなら、あえて手を入れない方がいいかもしれない」というやや保守的な理由

---

……こういった理由もありました。

しかしやはりどうしても文章が気に入らないこと、さらにこの『はじめてつくるReactアプリ』は私の本のなかでもっとも読まれているもので、これで私をはじめて知る人もいることを考えた結果、やはり直すことにしました。

これが今回の新版執筆に時間がかかった理由です。

繰り返すように、『はじめてつくるReactアプリ』はプログラミングを学ぶ実用書なので、私の文章が美しいとか詩的である必要はない……むしろそうであれば有害ですが、本全体の文章をすべて再考して修正を加えたことで、今回の第2版ではより読みやすく、よりわかりやすく、よりスムーズに読者がReactへと入門できるようになったと思います。

以下、興味のある人向けに、今回直した文章のビフォー／アフターをいくつか紹介します。

## 文章のビフォー／アフター
Before;\
`Form.tsx`ファイルを`components`フォルダの中に作ってください。

After;\
`components`フォルダの中に`Form.tsx`ファイルを作ってください。

（*修正理由：「フォルダ → ファイル」という、大きな単位から小さな単位へと言及）

---

Before;\
左辺の`2 > 4`は、4が2よりも小さいことはないので誤っています。

After;\
左辺の`2 > 4`は、2が4よりも大きいことはないので誤っています。

（*修正理由：「2 > 4」のあとに「4が2」と書くのは、並びがスムーズではない）

---

Before;\
これがJSX、つまりReactの場合は次のようになります。

After;\
これがReactの場合は次のようになります。

（*修正理由：必ずしも必要のない「JSX」という専門用語への言及。著者のエゴ的な、余計な補足情報を削除）

---

Before;\
この`results`stateは、`App.tsx`から`Results.tsx`に渡す必要があります。コンポーネント間でのやりとりにはpropsを使うので、まずは`App.tsx`の`<Results/>`タグにデータを書き加えましょう。

After;\
この`results`stateは、`App.tsx`から`Results.tsx`に渡す必要があります。`App.tsx`の`<Results/>`タグに書き加えましょう。

（*修正理由：直前にすでに説明していることを繰り返す冗長な文章を削除）

---

Before;\
ボタンをクリックするとAPIコールが実行されるようになっているので、「Get Weather」ボタンを押してみましょう。

After;\
ボタンをクリックするとデータ取得が実行されるようになっているので、「Get Weather」ボタンを押してみましょう。

（*修正理由：必ずしも必要のない「APIコール」という専門用語を削除）

---

Before;\
しかし`city`を直接URLの中に書いてもうまくいきません。

After;\
しかし`city`をURLの中に直接書いてもうまくいきません。

（*修正理由：修飾語を近くに置き直し）

---

Before;\
この2つには多くの違いがありますが、

After;\
この2つには違いが多くありますが、

（*修正理由：個人的な好みもあると思いますが、Afterの方がスムーズに読めます）

## 文章に反映される身体のリズム
文章……特に自分の書いた文章……というのは時間をおいて読み直すと、いつも気に入らないところが出てきます。

おそらくその時の気分や体調や身体のバイオリズムというものが、文章には反映されるのでしょう。

なので今回の新版も、来週になって読み返したら気に入らない文章が出てくると思いますが、技術書・実用書ということを考えたとき、現時点では合格点の文章になっていると思います。

React、TypeScriptの2024年最新の開発手法を学びたい方は、ぜひご覧ください。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">【2026年1月第3版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B094Z1R281">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts.svg" alt="はじめてつくるReactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ with TypeScript</p>
        <p class="bc-desc">【発売から5年読まれ続けているReact × TypeScript入門書の決定版。2026年1月第3版発売。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a href="/present?magnet=first-study-guide&from=6april">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=6april">monotein.com/present</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/update-react-1-book-ts-vite">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/update-react-1-book-ts-vite)

---

# ドラゴン桜とプログラミング

URL: https://monotein.com/blog/difference-knowing-and-doing
公開日: 2024.4.11
概要: プログラミング初心者に必要なのは「知識」より「できること」。React入門書の執筆経験と英語学習書『ドラゴン・イングリッシュ基本英文100』から学んだ、成功体験を重視する学習法と教育コンセプトを解説します。

## 私の本のコンセプト
私は過去3年間で20冊以上のビギナー向けプログラミング教本を書いてきましたが、最初に出した本から重視しているコンセプトがあります。

「知っていること」よりも「できること」。

頭の中での抽象的な理解や知識の拡充を目指すのではなく、「自分の手で何かができるようになる」という行動性の重視です。

私たちが助詞と助動詞の違いを知らなくても日本語を話せるように、「知っていること」と「できること」は違います。

## ビギナーに必要なのは「小さな成功体験」
学び始めの初心者はみな不安です。

そのような不安を打ち消してくれるもの、それは先生・講師の励ましや小さな一言だったりしますが、それよりももっと力強いのは、「自分にもできそうだ」という楽観的な気持ち、いわゆる「自己肯定感」や「自信」と呼ばれるものです。

このような楽観的な気持ちを感じてもらうため、私の教本では最速最短でひとつ成功体験を作ることを一番の狙いとしています。

---

ここ数日、私が一番最初に出した教本『はじめてつくるReactアプリ』とその発展版『はじめてつくるReactアプリ with TypeScript』という本の第2版への改訂作業を行っていました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B094Z1R281">
    <img class="bc-cover" src="/images/commonImg/reactbook-ts.svg" alt="はじめてつくるReactアプリ with TypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ with TypeScript</p>
        <p class="bc-desc">【発売から5年読まれ続けているReact × TypeScript入門書の決定版。2026年1月第3版発売。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

読み返していて、この本こそ「最短最速で成功体験をつくる」や「『知っている』よりも『できる』こと」というコンセプトを徹底したものであり、そして以後の教本執筆のベースになった本だったと改めて感じました。


## コンセプトの由来となった英語の本
「小さな成功体験によるモチベーション上昇」というコンセプトは、私がJavaScriptというプログラミング言語の勉強で<a target="_blank" rel="noopener" href="/blog/overcoming-js-to-react-1">挫折したときの経験</a>がもとになっています。

そして「『知っている』よりも『できる』こと」というコンセプトは、私が英語学習で使っていたある本の一文に由来します。

---

話が少しそれますが、英語であれ日本語であれ、会話で重要なことはなんでしょうか。

たくさんありますが、そのひとつは間違いなく応答速度です。

どれだけ文法的に正しい文章だとしても、それを口に出すまでに10分も20分もかかっているようでは会話が成り立ちません。

先ほど触れた英語学習本には、「正しい英文でも、それを15分もかかってようやく話せる／書けるようでは意味がない」といったことが書かれており、この一文は10年以上経っても頭の中にこびりついています。

私がこの本を使って勉強をしていたのは留学をする前でしたが、留学してから実際に「正しい英文を頭で考えるのに時間がかかりすぎて、会話がスムーズに進まない」という体験を自分自身で何度も味わったことも、この文章が頭にのこった大きな理由でしょう。

## 『ドラゴン桜』の英語
「15分もかかってようやく話せる／書けるようでは意味がない」と書かれていた英語学習書とは、『ドラゴン・イングリッシュ　基本英文100（竹岡広信／講談社／2005年）』という本です。

今回、数年ぶりに読み返してみて、この本には実用的なメッセージが数多く書かれていることに気がつきました。

以下、引用しながら紹介します。これらはすべて冒頭の「はじめに」に書かれていることです。

---

（*既存の英語教本との違いを述べる箇所）

『.....市販されている英文集を分類すると、次のようになります。

1. 日本人の著者が「自信をもって」書いた英文のため、英文そのものが不自然なもの。もしくは英米人の発想が前面に出すぎていて、日本人にはとうてい書けないもの。

2. 文法・構文を網羅しようとするため、一昔前の「頻出熟語」や「頻出構文」を意識しすぎていて、英作文には必要のないものまで多く含んだもの。

3. 筆者の趣味が色濃く出ており、とりわけ時事的なものを取り入れることによって「新しさ」を主張するが、実際に使う場面がほとんどないか、あるいは使う必要のないものを多数含んだもの。

そのような無駄で非効率的な英文集と、この基本英文100は一線を画します。』

竹岡広信「ドラゴン・イングリッシュ基本英文100」p.3

---

（*英語を書くために必要な知識は限られていると述べる箇所）

『そもそも、まともな英文が書けないレベルの日本人の学習者に、「表現の幅」だとか「気の利いた表現」が必要だとは思えません。とにかく、「ある状況に対して最低限ひとつの表現が必ずできるようにすること」--- これが英語上達の基本です。』

竹岡広信「ドラゴン・イングリッシュ基本英文100」p.4

---

（*日本語を英語に訳す試験問題について、従来の英語教育の問題を述べる箇所１）

『「いちばん有り難い」「素朴な疑問」「触発されて」「思いもかけない発見」などを何分もかけて考え「英作文」しているうちは、英語は絶対話せるようになりません。日本人は、そんなことばかりしていたから英語が使えなくなってしまったような気がします。大学受験で問われているのは、「あなたは英語が使えますか？」ということです。「話せる英語なんて安物だ」なんて訳のわからないことを言っている時代ではないのです。』

竹岡広信「ドラゴン・イングリッシュ基本英文100」p.6

---

（*日本語を英語に訳す試験問題について、従来の英語教育の問題を述べる箇所２）

『「好奇心のかたまり」「好奇心を示さなくなる」「さまざまなことに興味を持ち続ける」「いつまでも子どもでいられなくなる」と同じような表現がダラダラと出てきて、最後が「かもしれない」といかにも日本語という感じの文。こんな文を1文ずつ分析して教えるなんて化石のような授業ですね。「とにかく訳す」ではなくて「何を伝えるか」を考えてください。』

竹岡広信「ドラゴン・イングリッシュ基本英文100」p.8

---

（*いまだに私の印象に残っている箇所）

『語学で大切なことは「ぱっと口から出てくるかどうか」です。基本英文100も、受験生が覚えやすく、かつ使いやすいことは選定基準となりました。「15分も考えてやっと1文書けました」なんていうことをやっていると、試験で得点できないばかりか、「本当の英語力」も身につきません。』

竹岡広信「ドラゴン・イングリッシュ基本英文100」p.10

## 人が本を執筆する理由
今回「ドラゴン・イングリッシュ　基本英文100」を読み返していて、人が本を執筆する理由のひとつは、やはりある種のフラストレーション、つまり「怒り」にあるのだと思いました。

既存のものが「真実」を語っていないというフラストレーションと、その「真実」を世に問うてみたいという欲望。

「ドラゴン・イングリッシュ　基本英文100」の著者も、既存の英語教本がシンプルなことをいたずらにむずかしく、必要以上にゆがめて語り、それが多くの人を苦しめていることに苦々しさを感じていたのでしょう。

上に引用した「まえがき」に並ぶ刺激的な言葉だけを読んでもそれは明らかです。

## 自分の「正しさ」を証明する理由
「ドラゴン・イングリッシュ　基本英文100」のコンセプトは、「英作文はこの100個の英文を覚えるだけで十分」ということです。

最近の英語学習書のトレンドを私は知りませんが、少なくともこの本の初版が出た2005年当時は革新的なコンセプトであったのではないでしょうか。

そのため、既存の英語教材を使っていた人や、それらの教本の著者たちが「100文で英語が使えるわけがない」や「英語を使うためには文法をすべて覚えないといけない」といったことを主張したり、少なくともこころの中で考えたりしていたであろうことは容易に想像ができます。

それでも出版から20年近く経ち、Amazonではポジティブなレビューが圧倒的で、そして何より私自身がこの本のおかげで「使える英語」が身についたことを考えると、「ドラゴン・イングリッシュ　基本英文100」の著者が考える「正しさ」は、本当に正しかったのだと証明されています。

「一般的ではないが、しかし少なくとも自分は『正しい』と考えているあるコンセプトを世に問うこと。そして人々の支持を受けることをもって、その『正しさ』を証明すること」。

誰に対して証明するのかと言えば、「社会に対して」でも「ライバルに対して」でも「親に対して」でもなく、「自分に対して」です。

私たちは、どんな奇天烈なことでも頭の中では「正しい」と考えることができます。

しかし「他の人は信じていないけど、この世の中で自分だけがそう考えている」という状態に不安を覚えない人はいません。

「正しいんだ」と自分自身で本当に受け入れるためには、他の人からも「正しい」と認めてもらう承認が不可欠だからです。

私たちがたったひとりでは自分自身を信じられないのは、人間が根本的に社会的な動物であり、社会、つまり他者とのつながりのなかでしか生きられないからでしょう。

他の人から批判されたり、拒絶されたりすることに不安を覚えながらも、それでも自分が正しいと信じることを世に問うこと。そしてそれを他の人に受け入れてもらい、自分自身に対して「ああ、やっぱり自分の考えていたことは正しかったんだ」と言えること……。

このような人生の真実の姿をひとつ、数年ぶりに「ドラゴン・イングリッシュ　基本英文100」を読み返しながら垣間見たような気がしました。

<a href="/present?magnet=first-study-guide&from=6april">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=6april">monotein.com/present</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/difference-knowing-and-doing">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/difference-knowing-and-doing)

---

# 【Next.js】Reactサーバーコンポーネントのメリットを実際に確認してみました

URL: https://monotein.com/blog/nextjs-react-server-component-less-size
公開日: 2024.3.23
更新日: 2025.3.10
概要: 至るところで「セキュリティ性が高い」や「パフォーマンスに優れる」と言われているReactサーバーコンポーネント。言葉の説明だけではよくわからないので、実際に確認をすると、4メガバイト削減されました。

## サーバーコンポーネントのメリットを実際に確認
Next.js AppフォルダでデフォルトになっているReactサーバーコンポーネント。

その特徴として、「セキュリティ性が高い」や「パフォーマンスに優れる」といたるところで書かれていますが、言葉の説明だけではよくわからないので、本記事では実際に確認をしてみましょう。

クライアントコンポーネントよりも「パフォーマンスに優れる」という点を見ていきます。

なお、Reactサーバーコンポーネントの仕組みやSSRとの違いなどは、下記記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/react-server-components-complete-guide">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-165.png)

</div>
<div class="r-card-text">
Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで
</div>
</div>
</a>
</div>

## 4メガバイト、減りました
まずNext.jsをインストールしましょう。

```shell
npx create-next-app test
```

表示される各質問に、Appルーター以外はすべて「No」で答えます。

インストール完了後にVS Codeで開いたら、下記パッケージをインストールしてください。

コードのハイライトに使うパッケージはサイズの大きいものが多いので、例として`highlight.js`を使います。

```shell
npm install highlight.js
```

`/app/page.js`を開き、読み込みます。

```js
// app/page.js

import * as highlightjs from "highlight.js";       // 追加
import Image from "next/image";
import styles from "./page.module.css";

export default function Home() {
    return (
            ...
```

Next.jsを`npm run dev`で起動して、ブラウザを開きましょう。

そして開発者ツールから「Network」タブを選択してください。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog145/network-tab-1-red.jpg)

</div>

画面をリロードし、このページで読み込んでいるリソースのサイズを確認しましょう。

これは「Network」タブの一番下に表示されており、ここでは「7.7MB」となっています。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog145/network-tab-2-red.jpg)

</div>

次は`/app/page.js`に、下記コードを加えてください。

```js
// app/page.js

"use client"          // 追加 
import * as highlightjs from "highlight.js"; 
import Image from "next/image";
import styles from "./page.module.css";

export default function Home() {
    return (
            ...
```

これによってこのコンポーネントは、デフォルトのサーバーコンポーネントからクライアントコンポーネントになりました。

保存したらブラウザに戻り、「Network」タブを開いたままリロードしてください。

下部のリソースサイズを確認しましょう。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog145/network-tab-3-red.jpg)

</div>

今度は「12.3MB」と4MB以上重くなっています。

サーバーコンポーネントではパッケージをサーバー側ですべて処理するのに対し、クライアンコンポーネントではブラウザ側で処理するためです。

これでサーバーコンポーネントの「JavaScriptバンドルサイズの削減」というメリットを実際に確認できました。

RSCでバンドルサイズが削減される仕組みが分かったら、RSCが登場した背景（MPA・SPA・SSRの流れ）や、useActionState・useOptimisticといったReact 19の新機能にも触れてみましょう。

体系的に整理したガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

RSC利用時にはNext.jsが一般的に使われます。

Next.jsのセットアップからRSC・Server Actionsの活用、デプロイまでを一本で整理したガイドもご覧ください▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

このNext.jsでコード書きながらアプリを作って理解を深めたい人は、下記教材を参考にしてください。

最新のNext.js Appルータとともに、API（Route Handlers）、Supabase、JWT、Cloudinaryなどを使って本格的なフルスタックアプリを開発する方法を、ビギナー向けにわかりやすく紹介しています（2026年時点で最新のNext.jsバージョン16使用）。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFXVMSF">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1.svg" alt="Next.jsでつくるフルスタックアプリ 前編（バックエンド開発）with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【最新のNext.jsバージョン16をつかった本格アプリの開発手法がわかる入門書。Route Handlers使用】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-react-server-component-less-size">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-react-server-component-less-size)

---

# 【全解説】React + TypeScriptのイベント型の書き方3パターン

URL: https://monotein.com/blog/typescript-react-event-3-annotations
公開日: 2024.3.19
更新日: 2026.3.29
概要: React + TypeScriptでイベントの型を書くとき、インライン記法・パラメータ横・関数名横の3種類があります。それぞれの違いと使いどころをコードで比較しながら解説します。

## 3種類の型の記法 
React + TypeScript開発で使うイベントの型の記法には、次の3つがあるので紹介します。

---

1：インライン記法

2：パラメータ横に書く記法 

3：イベント名の横に書く記法

## １インライン記法（React + TypeScriptのイベントの型）
次のようなコードがあったとします。

```js
// Form.tsx

const Form = () => {
    const [data, setData] = useState("")
    return (
        <form> 
            <input onChange={(e) => setData(e.target.value)}
                   type="text" 
                   required
            />
        </form>
    )
}

export default Form
```

functionを内部に書くこのようなインライン記法では、`e`に対する型は不要です。

マウスを`e`に乗せると、TypeScriptが次のように型の推測をしてくれています。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog144/type-1.jpg)

</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-react-event-3-annotations">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-react-event-3-annotations)


## ２パラメータ横に書く記法（React + TypeScriptのイベントの型）

先ほどのインラインのfunctionを、外部定義するものに変えてみましょう。

```js
// Form.tsx

import { useState } from "react"

const Form = () => {
    const [data, setData] = useState("")

    const changeHandler = (e) => {
        setData(e.target.value)
    }

    return (
        <form> 
            <input onChange={changeHandler}
                   type="text" 
                   required
            />
        </form>
    )
}

export default Form
```

すると`e`は`any`になります。

しかし、先ほどのインライン記法時の型情報を次のように持ってくれば解決します。これが2つ目の記法です。


```js
// Form.tsx

    ...

    const changeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
        setData(e.target.value)
    }

    return (
        ...
```

## ３名前の横に書く記法（React + TypeScriptのイベントの型）
次のように書くこともできます。これは`e`などのパラメーターが複数あるときに便利な記法です

```js
// Form.tsx

    ...

    const changeHandler: React.ChangeEventHandler<HTMLInputElement> = (e) => {
        setData(e.target.value)
    }

    return (
        ...
```

本記事で紹介した3つの記法はどれを使っても違いはありませんが、3つ目の記法を目にすることあまりないでしょう。

イベントの型が分かったところで、TypeScript × React開発で押さえておきたいテーマがあります。

ジェネリクス、Zod、開発環境のセットアップなど、必要なテーマをまとめて確認したい方はこちらのガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>


<a href="/present?magnet=first-study-guide&from=6april">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=6april">monotein.com/present</a>

---

# 【Next.js Appフォルダ】メタデータをクライアント・コンポーネントに設定する方法

URL: https://monotein.com/blog/nextjs-app-router-metadata-for-client-component
公開日: 2024.3.18
更新日: 2024.10.30
概要: Next.js Appフォルダで使えるメタデータ設定コード「generateMetadata」と「metadata」は、サーバー・コンポーネントにしか使えません。しかし実は簡単にクライアント・コンポーネントにメタデータを設定する方法があるのです。

## Next.jsのメタデータはサーバー・コンポーネントにしか設定できない
メタデータとはブラウザのタブに表示されるページ名や、ページ概要の書かれた`description`のことで、SEOには非常に重要なデータです。

このメタデータ設定のため、Next.js（Appルーター）には`generateMetadata`や`metadata`といった専用タグが用意されていますが、制限がひとつあります。

これらのタグがサーバー・コンポーネントでしか使えないことです。

しかし実は使えるようにする方法もあるので、本記事ではクライアント・コンポーネントにメタデータを設定する下記2つの方法を紹介します。

---

1 ― タグを使う

2 ― クライアント・コンポーネントをサーバー・コンポーネントにする

## クライアント・コンポーネントにメタデータを設定する方法　１
最初に簡単な方法からです。

`<title>`タグや`<meta>`タグを直接書き込みます。

```js
"use client"
import { useState } from "react"

const App = () => {
    const [data, setData] = useState("")

    return (
        <div>       // ↓追加
            <title>トップページ</title>       // ↓追加   
            <meta name="description" content="会社案内のページです"/> 
            <h1>会社案内</h1>
            <p>{data}</p>
        </div>
    )
}

export default App
```

ブログ記事などの、データによって表示の変わるダイナミックページでは次のように書けます。

```js
"use client"
import { useEffect } from "react"

const Blog = (props) => {
    return (
        <div>       // ↓追加
            <title>{props.title}</title>       // ↓追加        
            <meta name="description" content={props.description}/>
            <h1>最新記事：{props.title}</h1>
            <p>{props.text}</p>
        </div>
    )
}

export default Blog
```

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-app-router-metadata-for-client-component">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-app-router-metadata-for-client-component)

## お知らせ：新刊書リリース
2024年11月に、Server Actionsを使ってフルスタックアプリを開発する新刊書をリリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DMQLP8Z9">
    <img class="bc-cover" src="/images/commonImg/nextjs-server-actions.svg" alt="Next.js Server Actionsでつくるフルスタックアプリ" />
    <div class="bc-body">
        <p class="bc-title">Next.js Server Actionsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【2024年11月リリース。少ないコードですばやく本格的なフルスタックアプリを開発する方法を紹介】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

Next.js／Reactビギナー向け入門です。

2024年11月時点で最新のNext.jsバージョン15を使用しています。

## クライアント・コンポーネントにメタデータを設定する方法　２
2つ目の方法は、「クライアント・コンポーネントをサーバー・コンポーネントに読み込む」という方法です。

たとえば下記のようなログインページがあったとします。

![image](../../images/singleBlogPageImages/blogArticleImages/blog143/next-client-metadata-1.jpg)

中のコードは次のようになっています。

```js
// app/login/page.js

"use client"
import { useState } from "react"

const Login = () => {
    const [email, setEmail] = useState("")
    const [password, setPassword] = useState("")
    return (
        <div>
            <h1>ログイン</h1>
            <form>
                <input onChange={(e) => setEmail(e.target.value)}/>
                <input onChange={(e) => setPassword(e.target.value)}/>
                <button>ログイン</button>
            </form>
        </div>
    )
}

export default Login
```

Next.jsの用意している`generateMetadata`や`metadata`はサーバー・コンポーネントでしか使えないので、このコンポーネントをサーバー・コンポーネントにしましょう。

新しいファイルを作ってください。ここでは`myPage.js`としていますが、名前はなんでも大丈夫です。

![image](../../images/singleBlogPageImages/blogArticleImages/blog143/next-client-metadata-2.jpg)

`myPage.js`には、`app/login/page.js`のコードを丸ごとコピー＆ペーストします。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog143/next-client-metadata-3.jpg)

</div>

次に、`myPage.js`にコピー＆ペーストした`app/login/page.js`のコードをすべて消し、次のコードを書きます。

```js
// app/login/page.js

import MyPage from "./myPage"

const Login = () => {
    return <MyPage/>
}

export default Login
```

クライアント・コンポーネントである`myPage.js`を読み込み、そのまま`return`しているだけですが、これでこのファイルはサーバー・コンポーネントになりました。

なので、ここにメタデータを設定するコードを追加しましょう。

```js
// app/login/page.js

import MyPage from "./myPage"

// ↓追加
export const metadata = {
    title: "ログインページ",
    description: "これはログインページです",
}
// ↑追加

const Login = () => {
    return <MyPage/>
}

export default Login
```

データによって表示が異なるページには、次のコードを使います。

```js
import MyPage from "./myPage"

// ↓追加
export async function generateMetadata(){
    
    // データ取得のコード

    return { 
        title: data.title,
        description: data.description
    }
}
// ↑追加

const Blog = () => {
    return <MyPage/>
}

export default Blog
```

これがクライアント・コンポーネントにメタデータを設定する2つの方法です。

メタデータの設定方法が分かったところで、Next.js開発のそれぞれのテーマのつながりも確認をしましょう。

AppフォルダやRSCを含むNext.jsの全体像をまとめたガイドがこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

また、Next.jsアプリをコードを書きながら開発したい人は下記教材を参考にしてください。

最新のNext.js Appルータとともに、API（Route Handlers）、Supabase、JWT、Cloudinaryなどを使って本格的なフルスタックアプリを開発する方法を、ビギナー向けにわかりやすく紹介しています（2026年時点で最新のNext.jsバージョン16使用）。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFXVMSF">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1.svg" alt="Next.jsでつくるフルスタックアプリ 前編（バックエンド開発）with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【最新のNext.jsバージョン16をつかった本格アプリの開発手法がわかる入門書。Route Handlers使用】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


<a href="/present?magnet=first-study-guide&from=/blog/nextjs-app-router-metadata-for-client-component">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=/blog/nextjs-app-router-metadata-for-client-component">monotein.com/present</a>

---

# TypeScriptジェネリクスをサクッと理解【複数のジェネリクスをつかう】

URL: https://monotein.com/blog/typescript-generics-4
公開日: 2024.3.16
概要: TypeScriptのジェネリクスを難しく思う人はたくさんいます。しかし「型定義に対して使うもの」、「functionに対して使うもの」と分けて考えると簡単に理解できます。本記事では複数のジェネリクスに慣れましょう。

## TypeScriptのジェネリクスはむずかしい？
この記事はジェネリクスをサクッと解説する全4回の記事の4つ目です

1 → [TypeScriptジェネリクスをサクッと理解【その１ 型定義に対して使うジェネリクス】](/blog/typescript-generics-1)

2 → [TypeScriptジェネリクスをサクッと理解【その２ functionに対して使うジェネリクス】](/blog/typescript-generics-2)

3 → [TypeScriptジェネリクスをサクッと理解【その３ 型定義とfunction両方に対して使うジェネリクス】](/blog/typescript-generics-3)

*4（本記事）→ [TypeScriptジェネリクスをサクッと理解【その４ 複数のジェネリクスをつかう】](/blog/typescript-generics-4)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-4">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-4)

## ジェネリクスを複数使う
次のコードがあったとします。

```js
// main.ts

function example(a: string, b: string){
    return [a, b]
}

console.log(
    example("三島", "由紀夫")
)
```

`a`と`b`の2つのデータを`example`に渡して実行後すると、`a`と`b`は`[a, b]`という配列になってreturnされます。

上の例では`[三島, 由紀夫]`とブラウザのコンソールに表示されます。

TypeScriptが推測してくれているので不要ですが、returnするデータの型を書いてみましょう。

配列のデータがreturnされるので、次のように書きます。

```js
// main.ts

function example(a: string, b: string): [string, string]{   // 追加
    return [a, b]
}

...
```

さて、ここで次のようなデータを入れようとするとエラーが出ます。`2005`がnumber型だからです。

```js
// main.ts

function example(a: string, b: string): [string, string]{
    return [a, b]
}

console.log(
    example("三島", "由紀夫")
)

// ⬇追加
console.log(
    example(2005, "谷崎")
)
// ⬆追加
```

どのような型のデータにも`example`functionが対応できるようにするために、ジェネリクスを使いましょう。

まず渡すデータを仮置きの`T`と`K`に変えます。

本連載[1回目](/blog/typescript-generics-1)でも書きましたが、ここで使う文字は`<ArgType>`や`<Name>`など任意の文字も可です。

```js
// main.ts
                    ⬇変更
function example(a: T, b: K): [string, string]{
    return [a, b]
}

...
```

渡すデータの型が仮のものになったので、returnするデータの型も仮のものに変える必要があります。

```js
// main.ts
                              ⬇変更
function example(a: T, b: K): [T, K]{
    return [a, b]
}

...
```

最後に、このfunctionではジェネリクスを使っていると明示するコードを追加します。

```js
// main.ts
                 ⬇変更
function example<T, K>(a: T, b: K): [T, K]{
    return [a, b]
}

...
```

今回も型の推測によってこの時点でエラーは消えますが、次のように実際の型情報を注入する必要があるケースも存在します。

```js
// main.ts

function example<T, K>(a: T, b: K): [T, K]{
    return [a, b]
}

console.log(
    example<string, string>("三島", "由紀夫")     // 追加
)

console.log(
    example<number, string>(2005, "谷崎")     // 追加
)
```


React + TypeScript開発においては、型定義に対するジェネリクスとfunctionに対するジェネリクスが同時に使われ、さらにジェネリクスの数も`<T>`のように1つだけでなく、`<T, K, U>`などと複数使われることがあります。

## ジェネリクスはいつ使う？　そして注意点は？
ジェネリクスが欠かせないのは、npmパッケージやライブラリの開発時です。

これらは多くの人が使うものであり、汎用的であることがマストなので、柔軟性を付与できるジェネリクスが活躍するのです。

しかし、ごく限られた人だけ、あるいは自分だけしか使わないファイルやReactコンポーネントにジェネリクスを過度に使うことは、むしろいたずらに抽象度を高め、時間が経って見返すと何をしているのか自分でもわからなくなってしまう可能性を高めます。

ジェネリクスを使うときはこの点に注意しましょう。

ここまでジェネリクスを理解できると、TypeScript × Reactのコードがより分かるようになります。

ジェネリクス以外にも[イベントの型](/blog/typescript-react-event-3-annotations)や[Zod](/blog/what-is-zod)、開発環境のセットアップなど、React開発でTypeScriptを使う上で必要なテーマをまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-4">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-4)

---

# TypeScriptジェネリクスをサクッと理解【型定義とfunction両方に対して使うジェネリクス】

URL: https://monotein.com/blog/typescript-generics-3
公開日: 2024.3.16
概要: ビギナーがつまづきやすいTypeScriptのジェネリクス。しかし「型定義に対して使うもの」、「functionに対して使うもの」と分けて考えると簡単に理解できます。本記事では型定義とfunction両方に対して使うジェネリクスを完全理解しましょう。

## TypeScriptのジェネリクスはむずかしい？
この記事はジェネリクスをサクッと解説する全4回の記事の3つ目です

1 → [TypeScriptジェネリクスをサクッと理解【その１ 型定義に対して使うジェネリクス】](/blog/typescript-generics-1)

2 → [TypeScriptジェネリクスをサクッと理解【その２ functionに対して使うジェネリクス】](/blog/typescript-generics-2)

*3（本記事）→ [TypeScriptジェネリクスをサクッと理解【その３ 型定義とfunction両方に対して使うジェネリクス】](/blog/typescript-generics-3)

4 → [TypeScriptジェネリクスをサクッと理解【その４ 複数のジェネリクスをつかう】](/blog/typescript-generics-4)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-3">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-3)

## 型定義とfunction両方のジェネリクス
次のfunctionがあったとします。

```js
// main.ts

function example(b: any){
    return b.data
}
```

これは、渡された`b`というany型のデータをreturnするだけのfunctionですが、`b.data`となっているところから、`b`はオブジェクトだとわかります。

実際の動きを見るには、次のコードを追加しましょう。

```js
// main.ts

// ⬇追加
const userOne: any = {
    data: "太郎",
    color: "赤"
}
// ⬆追加

function example(b: any){
    return b.data
}

// ⬇追加
console.log(
    example(userOne)
)
// ⬆追加
```

そしてJavaScriptに変換して実行すると、ブラザウのコンソールには「太郎」と表示されます。`b.data`、つまり`userOne.data`は「太郎」だからです。

ここで次のデータを足してみます。ここからは1回目で触れた「[型定義のジェネリクス](/blog/typescript-generics-1)」の復習となります。

```js
// main.ts

const userOne: any = {
    data: "太郎",
    color: "赤"
}

// ⬇追加
const userTwo: any = {
    data: 2002,
    color: "緑"
}
// ⬆追加

function example(b: any){
    return b.data
}

console.log(
    example(userOne)
)

// ⬇追加
console.log(
    example(userTwo)
)
// ⬆追加
```

`any`となっているところにジェネリクスを使って型情報を追加しましょう。まず`userOne`と`userTwo`の型定義です。

繰り返しになりますが、ここでジェネリクスを使う理由は、stringとnumberという異なる型が`data`に入っている`userOne`、`userTwo`両方に適用可能な柔軟な型定義を作るためです。

```js
// main.ts

// ⬇追加
type User<T> = {
    data: T;
    color: string;
}
// ⬆追加

const userOne: User<string> = {     // 追加
    data: "太郎",
    color: "赤"
}

const userTwo: User<number> = {     // 追加
    data: 2002,
    color: "緑"
}

function example(b: any){
    ...
```

次はfunctionの`any`を修正しましょう。

まず`b`というオブジェクトに型定義`User`を当てはめます。

```js
function example(b: User){
    return b.data
}
```

次のエラーが出ます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog141/generics-both-1.jpg)

</div>

「Generic type 'User' requires 1 type argument(s)」とは「Userには型引数がひとつ必要です」という意味なので、型引数である`<T>`を追加します。

```js
function example(b: User<T>){
    return b.data
}
```

returnするデータの型も追加します。

returnする`b.data`は、`userOne`であれば「太郎」というstring、`userTwo`であれば「2002」というnumberといったように定まっていないので、「型はあとで決める」という柔軟さを得られるジェネリクスを使い、次のように書きましょう。

```js
function example(b: User<T>): T{
    return b.data
}
```

最後に、このfunctionがジェネリクスを使っていることを明示する必要があるので、さらにもうひとつ`T`を書き足します。

```js
function example<T>(b: User<T>): T{
    return b.data
}
```

これが型定義とfunctionの両方にジェネリクスを使ったケースになります。

いまコード全体は次のようになっています。

```js
// main.ts

type User<T> = {
    data: T;
    color: string;
}

const userOne: User<string> = {
    data: "太郎",
    color: "赤"
}

const userTwo: User<number> = {
    data: 2002,
    color: "緑"
}

function example<T>(b: User<T>): T{
    return b.data
}

console.log(
    example(userOne)
)

console.log(
    example(userTwo)
)
```

型定義とfunction両方へのジェネリクスが分かれば、コードをより深く読めるようになります。

ジェネリクスを含め、TypeScript × React開発で必要なテーマを一本に整理したガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

ジェネリクスは複数使うこともできるので、本連載の最後に見てみましょう。

<div class="rich-card-link">
<a href="/blog/typescript-generics-4">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-142.png)

</div>
<div class="r-card-text">
TypeScriptジェネリクスをサクッと理解【その４ 複数のジェネリクスをつかう】
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-3">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-3)

---

# TypeScriptジェネリクスをサクッと理解【functionに対して使うジェネリクス】

URL: https://monotein.com/blog/typescript-generics-2
公開日: 2024.3.16
概要: 苦手意識を持つ人が多いTypeScriptのジェネリクス。しかし「型定義に対して使うもの」、「functionに対して使うもの」と分けて考えると簡単に理解できます。今回はfunctionに対して使うジェネリクスを理解しましょう。

## TypeScriptのジェネリクスはむずかしい？
この記事はジェネリクスをサクッと解説する全4回の記事の2つ目です。

---

1 → [TypeScriptジェネリクスをサクッと理解【その１ 型定義に対して使うジェネリクス】](/blog/typescript-generics-1)

*2（本記事）→ [TypeScriptジェネリクスをサクッと理解【その２ functionに対して使うジェネリクス】](/blog/typescript-generics-2)

3 → [TypeScriptジェネリクスをサクッと理解【その３ 型定義とfunction両方に対して使うジェネリクス】](/blog/typescript-generics-3)

4 → [TypeScriptジェネリクスをサクッと理解【その４ 複数のジェネリクスをつかう】](/blog/typescript-generics-4)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-2">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-2)

## functionのジェネリクス
次のコードがあったとします

```js
// main.ts

function example(a: string){
    return a
}
```

これは`a`で渡されたstringのデータをreturnするだけのfunctionです。

次のコードを追加して、JavaScriptに変換すると、ブラウザのコンソールには「東京」と表示されます。

```js
// main.ts

function example(a: string){
    return a
}

// ⬇追加
console.log(
    example("東京")
)
// ⬆追加
```

さて、functionにはデータが2つ登場します。

「渡すデータ」と「操作後のデータ（＝returnするデータ）」です。

```js
function 名前(渡すデータ){ 
    
    実行したい操作
    
    return 操作後のデータ
}
```

「returnするデータ」の型は「渡すデータ」の型によってTypeScriptが推測してくれるので、実際は書く必要のないケースがほとんどですが、次のように明示も可能です。

```js
// main.ts

function example(a: string): string{   // 追加
    return a
}

...
```

つまりfunctionに書く型の記法は次のようになっています。

```js
function 名前(渡すデータ: 渡すデータの型): returnするデータの型{ 
    
    実行したい操作
    
    return 操作後のデータ
}
```

`main.ts`に次のコードを追加したとします。

```js
// main.ts

function example(a: string): string{ 
    return a
}

console.log(
    example("東京")
)

// ⬇追加
console.log(
    example(2005)
)
// ⬆追加
```

エラーが出ます。渡すデータの型がstringと指定されているからです。

ここで使うのがジェネリクスです。まず`a`の横の`string`を`T`に変えます。

```js
// main.ts

function example(a: T){   // 変更
    return a
}
...
```

渡すデータの型が`T`という実質的な中身のないものになり、TypeScriptの推測が働かなくなったので、returnするデータの型を明示してあげる必要があります。

```js
// main.ts

function example(a: T): T{    // 変更
    return a
}
...
```

これで済めばコードの見た目は比較的シンプルですが、「ジェネリクスを使っています」ということを明示する必要があるので、次のコードも必要です。

```js
// main.ts

function example<T>(a: T): T{   // 追加
    return a
}
...
```

これでジェネリクス化は完了し、`example`functionの型は、実際に`example`を利用する時に注入するようになりました。しかし型の推測によって、この時点でエラーは消えます。

次のように、実際の型情報を注入する必要があるケースも存在するので、覚えておきましょう。

```js
// main.ts

function example<T>(a: T): T{
    return a
}

console.log(
    example<string>("東京")      // 追加
)

console.log(
    example<number>(2005)      // 追加
)
```

これがfunctionに対するジェネリクスです。

functionに対するジェネリクスが分かると、TypeScript × Reactのコードはよりはっきり読めるようになります。

イベントの型やZod、開発環境のセットアップまで含め、TypeScript × React開発の全体像を一本でまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

次回は「型定義とfunctionの両方に対してジェネリクス」を使う例を見ましょう。

<div class="rich-card-link">
<a href="/blog/typescript-generics-3">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-141.png)

</div>
<div class="r-card-text">
TypeScriptジェネリクスをサクッと理解【その３ 型定義とfunction両方に対して使うジェネリクス】
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-2">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-2)

---

# ジェネリクスとは？TypeScriptでの書き方・使い方を2分で理解する【初心者向け】

URL: https://monotein.com/blog/typescript-generics-1
公開日: 2024.3.16
更新日: 2026.3.31
概要: <T>や<K>が入って難しく見えるTypeScriptのジェネリクス。しかし実は簡単です。型定義に対して使うもの、functionに対して使うものと分けて考えると簡単に理解できます。今回は型定義に対して使うジェネリクスです。

## TypeScriptのジェネリクスはむずかしい？
下記のような`T`や`K`の入ったTypeScriptのコードを「ジェネリクス」といいます。

```js
function example<T, K>(a: T, b: K): [T, K]{
    return [a, b]
}
```

`T`や`K`が入っていて、見た目だけですでに難しく感じます。

実際ジェネリクスに苦手意識を感じている人は世界中にたくさんいます。

しかし、ひとつひとつ理解をしていけば実はシンプルなのがジェネリクスです。

4回に分けて紹介します。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-1">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-1)

この記事は全4回の1つ目です

*1（本記事）→ [TypeScriptジェネリクスをサクッと理解【その１ 型定義に対して使うジェネリクス】](/blog/typescript-generics-1)

2 → [TypeScriptジェネリクスをサクッと理解【その２ functionに対して使うジェネリクス】](/blog/typescript-generics-2)

3 → [TypeScriptジェネリクスをサクッと理解【その３ 型定義とfunction両方に対して使うジェネリクス】](/blog/typescript-generics-3)

4 → [TypeScriptジェネリクスをサクッと理解【その４ 複数のジェネリクスをつかう】](/blog/typescript-generics-4)

## ジェネリクスは何に使う？
ジェネリクスとは、「とりあえずの仮置きとして置かれた、実質的な中身のない型情報」のことです。

「型はあとで決める」という柔軟さと、複数のオブジェクトやfunctionに対して使い回すことのできる汎用性がジェネリクスのメリットになります。

とはいえ、このような言葉の説明ではわかりづらいのでコードで確認しましょう。

ジェネリクスを「型定義に対して使うもの（1回目／本記事）」と「[functionに対して使うもの（2回目）](/blog/typescript-generics-2)」に分け、最後に「[両方を合わせたケース（3回目）](/blog/typescript-generics-3)」と、「[複数のジェネリクスの使い方（4回目）](/blog/typescript-generics-4)」を紹介します。

本記事で触れるのは1つ目の「型定義に対して使うもの」です。

## ジェネリクスを型定義に対して使う
次のコードがあったとします

```js
// main.ts

const userOne: any = {
    data: "太郎",
    color: "赤"
}
```

`any`の代わりに、しっかりした型定義を用意しましょう。

```js
// main.ts

// ⬇追加
type User = {
    data: string;
    color: string;
}
// ⬆追加

const userOne: User = {    // 修正
    data: "太郎",
    color: "赤"
}
```

しかしもしここで、次のような2つ目のデータがあると、この型定義ではエラーが出ます。`userTwo`の`data`の型がnumberだからです。

```js
// main.ts

type User = {
    data: string;
    color: string;
}

const userOne: User = {
    data: "太郎",
    color: "赤"
}

// ⬇追加
const userTwo: User = {
    data: 2002,
    color: "緑"
}
// ⬆追加
```

なので型定義`User`をもっと抽象化して、より広く使えるようにしましょう。

次の変更を加えてください。

```js
// main.ts

type User<T> = {           // 変更
    data: T;               // 変更
    color: string;
}

const userOne: User = {
    ...
```

`<T>`は仮置きの型、実質的な中身のない型に過ぎません。

これを意味あるものにするには、実際の型を注入する必要があります。次のコードを追加しましょう。

```js
// main.ts

type User<T> = {
    data: T;
    color: string;
}

const userOne: User<string> = {       // 追加
    data: "太郎",
    color: "赤"
}

const userTwo: User<number> = {         // 追加
    data: 2002,
    color: "赤"
}
```

これが型定義対して使うジェネリクスです（型引数／Type parametersとも呼ばれます）。

一般的には`<T>`や`<K>`、`<U>`などが使われますが、`<ArgType>`や`<Name>`など任意の文字でも大丈夫です。

ジェネリクスはTypeScript × React開発の中でも理解に時間がかかる部分です。

イベントの型の書き方やZodとの組み合わせなど、React開発でTypeScriptを使う上で必要なテーマをまとめて確認したい方にぴったりのガイドがあります▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

次の記事では「functionに対するジェネリクス」を解説します。

<div class="rich-card-link">
<a href="/blog/typescript-generics-2">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-140.png)

</div>
<div class="r-card-text">
TypeScriptジェネリクスをサクッと理解【その２ functionに対して使うジェネリクス】
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-1">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-generics-1)

---

# Reactのexportとimportを全解説｜default export・named exportの違いと使い方

URL: https://monotein.com/blog/import-export-react
公開日: 2024.3.15
更新日: 2026.4.6
概要: Reactのexportにはdefaultとnamed（名前付き）の2種類があります。それぞれの違い・使い分け・import方法を、コードと表でまとめて整理しました。

## exportとimportいろいろ
Reactを使っていると、`default export`というコードをかならず目にします。最後の行です。

```js
const App = () => {
    return (
        <div>
            <h1>こんにちは</h1>
        </div>
    )
}

export default App
```

そうかと思えば、単に`export`だけのコードを見ることもあります。

```js
export const addData = (userName) => {
    return userName
}
```

そしてこれらをimportする場面では、次のように`{ }`付きのものと、無しのものがあります。

```js
import Header from "./components/Header"
import { useDarkMode } from "./hooks/useDarkMode" 
```

これらの違いと使い分けをサクッと紹介しましょう。

## 違いを表でまとめると…
まず名前です。

`default`付きのものはそのまま「default export（デフォルトexport）」、無しのものは「named export（名前付きexport）」と呼ばれます。

後ほどコードを見ますが、最初に違いを表にまとめると次のようになります。

|        |   デフォルトexport  |  名前付きexport | 
| :------:| :------: |:------:|
|  ファイルからexportできる数  | 1つ | 複数可 |
|  import時の名前  | 任意の名前を利用可 | export時と同じ名前（asで任意の名前利用可） |
|  import時の記法  | カッコなし | カッコあり |

では、コードで確認していきましょう。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/import-export-react">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/import-export-react)

## コードで確認しよう
まずデフォルトexportの例です。

```js
const myDefaultFunction = () => {
    ...
}

export default myDefaultFunction
```

Reactコンポーネントでよく見るコードです。

これをexportしてみましょう。

```js
import myDefaultFunction from "./myDefaultFunction.js"
```

これもReactでよく目にするコードです。

しかしデフォルトexportでは、import時に任意の名前を使えます。

```js
import tokyo from "./myDefaultFunction.js"
```

次は名前付きexportを見ましょう。

名前付きexportは、ひとつのファイルで複数使えます。

```js
export const myNamedFunction1 = () => {
    ...
}

export const myNamedFunction2 = () => {
    ...
}
```

そしてこれをimportするときには`{ }`が必要です。

```js
import { myNamedFunction1 } from "./myNamedFunctions.js"

import { myNamedFunction1, myNamedFunction2 } from "./myNamedFunctions.js"
```

一括でimportしたいときは次のように書きます。

```js
import * as MainFunctions from "./myNamedFunctions.js"
```

そして次のように使います。

```js
MainFunctions.myNamedFunction1()
MainFunctions.myNamedFunction2()
```

import時に任意の名前を使う場合は`as`を使います。

```js
import { myNamedFunction1 as tokyo } from "./myNamedFunctions.js"
```

## default exportと普通のexportの使い分け
明確な基準はありませんが、目安として、ファイルから大きな機能をひとつexportするときには「デフォルト・エクスポート」。

小〜中規模の複数の機能をexportしたいときは「名前付きエクスポート」が使われます。

なおReact自体に難しさを感じている人は、こちらのガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

## よくある質問
### Q1. Reactコンポーネントのファイルは、なぜほぼ必ずexport defaultで書かれているのですか？
Reactコンポーネントは「1ファイルに1つ」というのが基本的な設計のためです。

1ファイルから大きな機能をひとつexportするケースにはデフォルトexportが向いており、Reactコンポーネントのファイルはその典型例です。

### Q2. 1つのファイルにデフォルトexportと名前付きexportを混在させることはできますか？
できます。

ただし、デフォルトexportは1ファイルに1つだけという制限は変わりません。

名前付きexportは複数あっても問題ないため、用途に応じて使い分けることができます。

### Q3. カスタムフック（useDarkModeなど）のimportに{ }がついているのはなぜですか？
カスタムフックは名前付きexportで書かれることが多いためです。

名前付きexportをimportするときは必ず{ }が必要になります。

逆に{ }がないものはデフォルトexportと判断できます。

TypeScriptで開発する場合、`export`と`import`を使ったコンポーネントには型が関わってきます。

React開発でのTypeScriptの使い方を体系的にまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

### Q4. React学習を進めていくステップを知りたい。
学習ガイドを用意してあります。

参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

### Q5. Reactを使うにはどうすればいいですか？
まずは現在の主流であるReact + Viteに触ってみましょう。

3分で済みます。

下記記事を参考に進めてください▼

<div class="rich-card-link">
<a href="/blog/react-vite-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-148.png)

</div>
<div class="r-card-text">
Vite + Reactの始め方｜インストールから起動まで3分で完了【2026年版】
</div>
</div>
</a>
</div>

<br/>

上記記事ではJavaScriptを使っていますが、TypeScriptを使う場合は下記記事をどうぞ▼

<div class="rich-card-link">
<a href="/blog/react-vite-typescript-how-to-use">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-237.png)

</div>
<div class="r-card-text">
【Vite + React + TypeScript】3分で使えるようになる入門ガイド（2026年版）
</div>
</div>
</a>
</div>

<br/>

しかしこれらの記事が扱っているのは「初歩の初歩」です。

実際の開発で必要な実践的なReactスキル、そしてTypeScriptスキルを身に付けたい方は、下記教材を使ってください▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/import-export-react">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/import-export-react)

---

# 新刊書『React + TS徹底フォーカス：TypeScriptマスター with React』リリース

URL: https://monotein.com/blog/typescript-master-book-release
公開日: 2024.3.14
更新日: 2025.3.29
概要: 「TypeScriptをReactで使う」という点にフォーカスした学習書。TypeScriptに苦手意識を持っていても、自信をもってReact + TypeScript開発を進められるようになります。

## 2025年版の発売（*2025年3月日追記）
2025年3月に新版をリリースしたので、この記事の内容をアップデートしました。

アップデート版の下記記事をご覧ください。

<div class="rich-card-link">
<a href="/blog/react-master-video-release">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-166.png)

</div>
<div class="r-card-text">
Reactマスター／TypeScriptマスターの新版（動画バージョン）をリリース
</div>
</div>
</a>
</div>

<a href="/present?magnet=first-study-guide&from=6april">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=6april">monotein.com/present</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-master-book-release">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/typescript-master-book-release)

---

# Reactを難しく感じる理由と、その解決法【補足】

URL: https://monotein.com/blog/why-react-is-difficult-to-learn-3
公開日: 2024.3.13
更新日: 2026.4.6
概要: Reactビギナーがつまづく大きな壁のひとつが「イベント」の記法です。わかりやすく紹介します。イベントの実態はJavScriptのfunctionなのです。

## 分かりやすくなりました

本記事は、より分かりやすく書き直し、下記記事へと統合しました。

<div class="rich-card-link">
<a href="/blog/why-react-is-difficult-to-learn-2">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-135.png)

</div>
<div class="r-card-text">
Reactを難しく感じる理由と、その解決法【後編】
</div>
</div>
</a>
</div>

<a href="/present?magnet=first-study-guide&from=/blog/why-react-is-difficult-to-learn-3">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/why-react-is-difficult-to-learn-3)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-react-is-difficult-to-learn-3">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-react-is-difficult-to-learn-3)

---

# Reactを難しく感じる理由と、その解決法【後編】

URL: https://monotein.com/blog/why-react-is-difficult-to-learn-2
公開日: 2024.3.13
更新日: 2026.6.14
概要: Reactビギナーがつまづく最大の壁が「JavaScriptのfunction」の記法です。時短で解決策を紹介します。functionの理解、アロー関数の記法のマスターが、Reactをマスターする近道です。

## Reactが難しい原因は知識不足

<a href="/blog/why-react-is-difficult-to-learn-1">本記事の前編</a>に書きましたが、React入門に成功して、最初のハードルを超えた人が感じるReactの難しさの原因。

それはJavaScriptの知識不足になります。

具体的には次の2つの項目です。

---

- function（コンポーネント）の記法

- イベントの記法

---

本記事では、前半で【function】、後半で【イベント】を確認します。

この2つがわかれば、Reactに感じる苦手意識がぐっと減るでしょう。

<a href="/present?magnet=first-study-guide&from=/blog/why-react-is-difficult-to-learn-2">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/why-react-is-difficult-to-learn-2)

## 【function編】なぜfunctionの理解がReactの理解につながるのか

まず最初に丸暗記してもらいたいのは、次のことです。

---

【 _Reactのコンポーネント = JavaScriptのfunction_ 】

---

例えば下記のコードはReactのコンポーネントです。

```js
const List = () => {
    return (
        <div>
            <h1>こんにちは</h1>
        </div>
    )
}

export default List
```

これは「Reactのコンポーネントである」と同時に、「JavaScriptのfunctionである」ともいえます。

JavaScriptのfunctionを理解することは、Reactのコンポーネントを理解することとまったく同じなのです。

なぜでしょうか？

具体的に見ていきましょう。

## 【function編】functionの構造

functionの記法、つまり構造は次のようになっています。

```js
function 名前() {
    実行したい操作

    return 操作後のデータ
}
```

「名前」は好きなものが使えます。

しかし、書き方はこれだけではありません。

## 【function編】functionの記法いろいろ

いま見たfunctionは、`const`を使って次のようにも書けます。

```js
const 名前 = function () {
    実行したい操作

    return 操作後のデータ
}
```

さらに2015年のJavaScriptのアップデートで導入された「アロー関数／arrow function」を使うと、次のようにも書けます。

```js
const 名前 = () => {
    実行したい操作

    return 操作後のデータ
}
```

`function`という文字が`=>`に変わり、場所が右に移動しています。

ここまで見た3つはすべて同じ働きです。

ただ記法が違うだけです（\*厳密には細かな違いがありますが、当面重要ではありません）。

functionには、この3つ以外にもさまざまな書き方があります。

次のような、カッコと矢印だけのものも立派なfunctionです。

```js
;() => 実行したい操作
```

以上紹介した以外にも、まだバリエーションがあります。

しかし、このようなfunctionの記法を覚えることで、Reactをより自由に使えるようになります。

次は、もうひとつのポイント「イベントの記法」を見てみましょう。

## 【イベント編】イベントとはfunctionのこと

Reactではさまざまな「イベント」が出てきます。

「イベント」とはユーザーがアプリ上でするアクションのことですが、React開発で出てくる90%以上は次の3つです。

---

- `<button>`を押す

- `<input>`に文字を入力する

- `<form>`を提出（submit）する

---

これらのユーザーのアクションを検知するために、Reactでは次の専用コードを使います。

---

- `<button>`を押す => `onClick`

- `<input>`に文字を入力する => `onChange`

- `<form>`を提出（submit）する => `onSubmit`

---

さて、ユーザーがこれらのアクションをしてくれたら、アプリは何らかの反応を返さないといけません。

もし「`<input>`に文字を入力する」なら、その入力してくれた文字を表示することが反応になりますし、「`<button>`を押す」なら「ポップアップを出す」といった反応です。

これらを担うのはfunctionなので、Reactの「イベント」とは常にfunctionと一緒であると想像できます。

具体的にコードで見てみましょう。

```js
import { useState } from "react"

const List = () => {
    const [data, setData] = useState("")

    return <input onChange={(e) => setData(e.target.value)} />
}

export default List
```

これは`<input>`に入力した文字が、stateの`data`に書き込まれるコードになります。

ここで注目してもらいたいのは、`<input>`タグ内の次のコードです。

```js
onChange={(e) => setData(e.target.value)}
```

## 【イベント編】イベントの記法いろいろ

このようにタグ内に書く記法（インライン方式）とともに、次のように別の場所で書いたものを持ってくる記法もあります。

```js
import { useState } from "react"

const List = () => {
    const [data, setData] = useState("")

    const handleChange = (e) => {
        setData(e.target.value)
    }

    return <input onChange={handleChange} />
}

export default List
```

上記のように他所から持ってきても、最初のようにインラインで書いても、働きはまったく同じです。

ここで思い出してもらいたいのが、本記事の最初で紹介したfunctionの構造です。

```js
const 名前 = () => {
    実行したい操作

    return 操作後のデータ
}
```

これをいま見たReactのコードに当てはめてみると、次のようになります。

```js
import { useState } from "react"

const List = () => {
    // ▼ 実行したい操作
    const [data, setData] = useState("")

    const handleChange = (e) => {
        setData(e.target.value)
    }
    // ▲ 実行したい操作

    return (
        // ▼ 操作後のデータ
        <input onChange={handleChange} />
    )
}

export default List
```

ここから、Reactのコンポーネントとはfunctionであり、「操作後のデータ」として`<input>`、あるいは`<div>`などのHTMLタグをreturnしているのがわかります。

<a href="/present?magnet=first-study-guide&from=/blog/why-react-is-difficult-to-learn-2">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/why-react-is-difficult-to-learn-2)

以上見てきたように、Reactのコンポーネントの実態はfunction、さらにReactで使うイベントもfunctionなのです。

様々なfunctionの記法を覚えることは、Reactを難しく感じる原因を取り除くいちばんの近道です。

Reactを難しく感じる理由と乗り越え方を、全体像としてまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

## よくある質問
### Q1. functionとイベントの記法さえ覚えれば、Reactは書けるようになりますか？
書けるようにはなりますが、それだけでは足りません。

state、props、コンポーネント設計、レンダリングの仕組みなど、Reactにはまだ理解しておきたい概念がいくつもあります。

本記事のfunctionとイベントは、それらすべてのベースになる部分だと考えてください。

ここが揺らいでいると、その先の概念も「なんとなく」の理解で終わってしまいます。

### Q2. functionの書き方が複数あることに混乱します。どれを覚えればいいですか？
大切なのは「書き方が違っても働きは同じ」という知識を持っておくことです。

それがあれば、AIが書いたコードや他の人が書いたコードで見慣れない記法に出会っても、慌てずに読み解けるようになります。

### Q3. functionとイベントの次は、何を体系的に学べばいいですか？
state、props、コンポーネント設計といったReactの中心となる概念です。

これらを断片的に一つずつ調べながら学ぶよりも、正しい順番で一本につなげて学んだ方が、結果的に早く「なんとなく」から抜け出せます。

Reactで使うTypeScriptも含めて体系的に学べる教材があります▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-react-is-difficult-to-learn-2">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-react-is-difficult-to-learn-2)

---

# Reactを難しく感じる理由と、その解決法【前編】

URL: https://monotein.com/blog/why-react-is-difficult-to-learn-1
公開日: 2024.3.13
更新日: 2026.6.14
概要: Reactビギナーがつまづく最大の原因はJavaScriptの理解不足。具体的にどのJavaScriptの知識が必要かを説明します。functionの記法です。

## Reactの第一印象は「簡単」

Reactを一度でも触った人や、私の記事「<a href="/blog/react-vite-how-to-use">3分で使えるようになるVite + React入門</a>」を読まれた人は、「Reactって思ってたほどは難しくないな」と感じる人が多いようです。

その理由は下記コードのように、Reactの`return`内はほとんどHTMLと同じように書けてしまうからです。

```js
const App = () => {
    return (
        <div>
            <h1>こんにちは</h1>
        </div>
    )
}

export default App
```

`return`以下のコードを取り出してみましょう。

```js
<div>
    <h1>こんにちは</h1>
</div>
```

これだけ見ればHTMLとまったく同じです。

`index.html`にコピペしたら機能します。

CSSを書くときも、HTMLの`class`がReactでは`className`になるだけで、他はまったく同じです。

```js
// HTMLの場合
<div class="container">

// Reactの場合
<div className="container">
```

「Reactは難しい」と思っている人の多くは、実はまだReactを触っていない人たちで、一度でもReactを触れば「自分にもできそうだ」と思えるでしょう。

しかしそうやってReact入門が無事成功したあとに待っているのが、「やっぱりReactは難しい」というハードルです。

どういうことでしょうか？ 少し説明します。

<a href="/present?magnet=first-study-guide&from=/blog/why-react-is-difficult-to-learn-1">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/why-react-is-difficult-to-learn-1)

## やっぱりReactは難しい

実は私も、使い始めの時は「Reactって意外に簡単だな」と思ったものの、「いや、やっぱり難しい……」と意見を変えた人間です。

この理由は「JavaScriptの理解が足りてない」というありがちなものでした。

ReactはJavaScriptをベースに作られているので、その基礎部分の知識がないとすぐに壁にぶつかってしまうのです。

なので私はJavaScriptにもどって勉強をしました。

その中で気がついた「Reactを理解する上でもっとも足りていなかったJavaScriptの知識」、逆からいうと「Reactを構成するもっとも重要なJavaScriptの項目」は次の2つです。

---

- function（コンポーネント）の記法

- イベントの記法

---

まだReactに触れていない方は、React + Viteのセットアップから始めてみましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

## Reactをマスターする方法

HTML／CSSでもそうですが、同じ結果を得るための方法は一つではなく複数あります。

たとえばCSSを適用するときには、`style.css`と別ファイルに書く方法もあれば、`<div style="color: red;">`のようにインラインで書く方法もあります。

これはReactでも同じです。

たとえばReactコンポーネントの下記2つは、記法が違っていても働きは同じです。

```js
// 書き方 1
const App = () => {
    return(
        ...

// 書き方 2
function App(){
    return(
        ...
```

しかし、「書き方（記法）が違うだけで、働きや結果は同じなんだ」ということを知らないと、自分の書くコードに自信が持てません。

「なんとなく」の感覚では書けても、本当にそれが正しいのかという確信を得られないからです。

本記事は長くなったのでここで一旦終わりますが、本記事の後編では「functionの記法」と「イベントの記法」について紹介します▼

<div class="rich-card-link">
<a href="/blog/why-react-is-difficult-to-learn-2">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-135.png)

</div>
<div class="r-card-text">
Reactを難しく感じる理由と、その解決法【後編】
</div>
</div>
</a>
</div>

<br/>

「functionの記法」と「イベントの記法」が分かれば、Reactに感じる難しさはグッと減ります。

Reactを難しく感じる理由と乗り越え方を、全体像としてまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=/blog/why-react-is-difficult-to-learn-1">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/why-react-is-difficult-to-learn-1)

## よくある質問
### Q1. JavaScriptを一から学び直す必要がありますか？
必要ありません。

本記事で触れた「functionの記法」と「イベントの記法」のように、Reactの理解に直結する部分だけをピンポイントで押さえるのが効率的です

Reactを使う場面に絞って知識をつなげていく方が近道になります。

### Q2. 「なんとなく」書けるようになったコードに、自信を持てるようになりますか？
本記事で触れたように、書き方が違うだけで働きが同じ場合、その仕組みを知らないままだと「これで合っているのか」という不安がつきまといます。

逆に言えば、仕組みを理解しさえすれば、その不安はなくなります。

「なんとなく動く」から「なぜ動くか分かる」への変化は、知識の量ではなく、つながりが見えるかどうかで決まります。

### Q3. functionとイベント以外に、Reactを理解する上で重要なポイントはありますか？
あります。

state、props、コンポーネント設計など、Reactにはまだいくつも重要な概念があります。

これらを一つずつ断片的に学んでいくよりも、正しい順番で一本につなげて学ぶ方が、結果的に早く「使える理解」に到達します。

そのための教材があります▼

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-react-is-difficult-to-learn-1">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-react-is-difficult-to-learn-1)

---

# Reactのstateとは？「状態」の意味と使い方を初心者向けにやさしく解説

URL: https://monotein.com/blog/what-is-state-in-react
公開日: 2024.3.12
概要: 「状態」とは「アプリ内のデータの状態」を指します。データは不変のものではなく、時間経過やユーザーのアクションによって刻一刻と変化しているものです。そのような「データの状態」を追跡し、管理するためにReactはstateを使うのです。

## 状態とは？
Reactでは「状態」という言葉がひんぱんに使われます。

「状態を管理する」や「状態を更新する」といったように。

日本語ではいまいち意味のつかみにくい「状態」という言葉ですが、この「状態」とは「データの状態」のことを指しています。

「アプリ内のデータの状態」です。

では「アプリ内のデータ」とは具体的に何を指すのでしょうか？

アプリが私たちユーザーに表示している「世界各地の天気」や「為替」、「料理レシピ」「口コミ」などは当然「アプリ内のデータ」です。

他にも「ユーザーがボタンをクリックしたか否か」「合計何回クリックしたか」「ユーザーがフォームに入力した文字」なども「アプリ内のデータ」に含まれます。

そして重要なポイントは、これらは時間の経過やユーザーのアクションによって常に変化していくという点です

たとえばユーザーのクリック数が今の時点では5回でも、10秒後には7回になっていることもあるでしょう。

時間の経過やユーザーの操作などによって変化するアプリ内のデータの「状態」を追跡し、管理すること。

そのためにReactではstateが使われています。

このstateはReactを難しく感じる理由のひとつです。

stateだけでなく、JavaScriptの理解やコンポーネントの概念など、Reactでつまずきやすいポイントと乗り越え方を一本でまとめたガイドがあります▼

<div class="rich-card-link">
<a href="/blog/guide-react-is-difficult-and-how-to-overcome">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-255.png)

</div>
<div class="r-card-text">
【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=/blog/what-is-state-in-react">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=/blog/what-is-state-in-react">monotein.com/present</a>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-state-in-react">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-state-in-react)

---

# 「プログラミングとは何か？」に一言で答えると……

URL: https://monotein.com/blog/purpose-of-programming
公開日: 2024.3.12
概要: データをなにか意味のあることに使うには「データを分類・整理する」、つまり「データを操作する」というプロセスが不可欠で、そこで使われるのがプログラミング言語なのです。

## プログラミング言語 ＝ データを操作すること

「プログラミング言語の役割はなにか？」という質問に対する答えは人それぞれ異なるでしょう。

私は、プログラミング言語の本質的な役割は「データを操作すること」にあると考えます。

例えば世界各都市の天気や気温や湿度、また総人口や出生数などは、私たちにもっとも馴染みのあるデータの典型例です。

しかしデータだけが大量にあっても、無用の長物となってしまいます。

データをなにか意味のあることに使うには「データを分類・整理する」、つまり「データを操作する」というプロセスが不可欠で、そこで使われるのがプログラミング言語なのです。

同じことはプログラミング言語を使って作る各種のアプリケーションにもいえ、アプリケーションの本質的な役割もデータも操作する点にあるといえるでしょう。

データ操作時に型を使うTypeScriptは、こういった「データを扱う」という発想とつながっています。

TypeScript × React開発の始め方や、型・ジェネリクスの学び方をまとめたガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-typescript-for-react-programmers">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-256.png)

</div>
<div class="r-card-text">
【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説
</div>
</div>
</a>
</div>

<br/>

<a href="/present?magnet=first-study-guide&from=6april">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=6april">monotein.com/present</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/purpose-of-programming">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/purpose-of-programming)

---

# Server ActionsとAPI、どっちを使う？違いと使い分けをわかりやすく解説

URL: https://monotein.com/blog/server-actions-or-api
公開日: 2024.2.28
更新日: 2025.3.30
概要: Next.jsのServer ActionsとAPI（Route Handlers）の違いと使い分けを解説。それぞれのメリット・デメリットを表で比較し、アプリの規模や目的に応じた選び方を紹介します。ビギナー向けのやさしい解説です。

## APIとServer Actions、どっちを使うか
Next.jsバージョン14から、Server Actionsが安定版として提供されています。

Server Actionsを使えば、Route HandlersでAPIを作らなくても、ダイレクトにデータベースとの連携やCRUD操作が可能です。

では違いは何なのでしょうか。

表にすると次のようになります。

|| **API（Route Handlers）**    |  **Server Actions**  | 
|:----:| :----:|:------:|
|特徴|汎用的 | 限定的 |  
|用途|データベースとの複雑な連携操作があるケース|シンプルなCRUD操作が主のケース |
|メリット|　APIを、他のアプリケーションやモバイルアプリも利用可 | コードの記述量を抑え、コンパクトかつ短時間で開発可 |  
|デメリット|コードの記述量や開発工程が増える |  そのNext.js／Reactアプリでしか利用できない|  

私は汎用的なアプローチができるAPIが好みですが、それぞれにメリット／デメリットがあるので、アプリの規模や目的に応じて適切なものを選びましょう。

Server Actionsは、RSCとセットで使う場面が多い機能です。

RSCの仕組みやその背景（SPA・SSR・MPAの流れ）、そしてuseActionState・useOptimisticといったReact 19の新機能まで体系的にまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-rsc-and-react19">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-257.png)

</div>
<div class="r-card-text">
【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解
</div>
</div>
</a>
</div>

<br/>

また、Server Actionsを含むNext.js全体の開発の流れ（RSCの仕組み・セットアップ・デプロイまで）をまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/server-actions-or-api">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/server-actions-or-api)

## Server Actionsを学べる入門書
Server Actionsを学びたい方は、下記教材をどうぞ。

Next.js／Reactビギナー向け入門です。

2026年4月時点で最新のNext.jsバージョン16を使用しています。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0G144JJZT">
    <img class="bc-cover" src="/images/commonImg/nextjs-server-actions-v16.svg" alt="Next.js Server Actionsでつくるフルスタックアプリ" />
    <div class="bc-body">
        <p class="bc-title">Next.js Server Actionsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【2025年11月リリース。少ないコードですばやく本格的なフルスタックアプリを開発する方法を紹介】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

この本にはRoute Handlersを使う姉妹書もあります。

両方の教材に目を通すことで、違いや使い分けを実際に理解できます。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFXVMSF">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1.svg" alt="Next.jsでつくるフルスタックアプリ with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ with Supabase</p>
        <p class="bc-desc">【最新のNext.jsバージョン16をつかった本格アプリの開発手法がわかる入門書。Route Handlers使用】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a href="/present?magnet=first-study-guide&from=/blog/server-actions-or-api">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=/blog/server-actions-or-api">monotein.com/present</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/server-actions-or-api">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/server-actions-or-api)

---

# 新刊書『React全部入り：Reactマスター Zero To Hero』リリース

URL: https://monotein.com/blog/react-master-book-release
公開日: 2024.2.22
更新日: 2025.3.29
概要: JavaScriptの基礎、Reactの基本コンセプト、そして発展的内容まで、Reactのほぼ全範囲をカバーする新刊書。2024年の開発現場で必要となるReactの知識をすべて習得。ハンズオン・スタイル（作りながら学ぶ形式）で進むので、飽きずに学習を進められます。

## 2025年版の発売（*2025年3月日追記）
2025年3月に新版をリリースしたので、この記事の内容をアップデートしました。

アップデート版の下記記事をご覧ください。

<div class="rich-card-link">
<a href="/blog/react-master-video-release">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-166.png)

</div>
<div class="r-card-text">
Reactマスター／TypeScriptマスターの新版（動画バージョン）をリリース
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/react-master-book-release">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/react-master-book-release)

---

# 「これ一冊だけでOK！」という入門書が全然OKではない理由

URL: https://monotein.com/blog/ideal-beginner-books
公開日: 2024.1.7
更新日: 2024.5.9
概要: 分厚い入門書を選んでしまう理由。それは「安心感が欲しい」ため、そして「これ一冊だけやっていればいい」という盲目思考を許してくれるから。

## 入門書を選ぶむずかしさ
新しい分野の勉強を始めるときにぶつかる最初の壁。

それは「どの本を『最初の一冊』としてピックアップするか？」でしょう。

私は「できるだけ薄い入門書を選ぶ」という方法を実践しています。

このメリットは、「簡単なものからはじめて、挫折を防止する」や「深い理解ではなく、やり終える／読み終えることを目的とする」といった点にありますが、周りを見るとぶ厚い入門書を買っている人が意外に多い。

書店に行くと、ページ数が300を超えるような厚い入門書がたくさん並んでいるので、ニーズは高いのでしょう。

実は私も以前はぶ厚い本を最初に買っていた人間で、今でも時々そういう入門書にこころ惹かれたりするので、厚みのある入門書を買ってしまう心理はある程度想像がつきます。

## ぶ厚い本がくれる「安心感」

ぶ厚い入門書には心理的な「安心感」があります。

「必要な知識はすべてこの一冊にまとまっている！」

「この本をマスターすれば or この本に書かれていることをすべて覚えれば、今はできないアレ（例：アプリ制作や英会話など）ができるようになるんだ！」

といったような。

受験勉強で暗記を頑張ってきた人にはわかる心理だと思います。

## ぶ厚い本は「聖書」

上に書いた安心感ともつながりますが、ぶ厚い本はその分野で学ぶべきすべての事柄をカバーしているように見えるので、「この本だけやりこめばいい」という気持ちを与えてくれます。

つまり盲目的になれることを許してくれる聖書的な存在に見えるのです。

あるいは、「この本があれば大丈夫」といったようなお守り的存在。

これも受験勉強で「試験に出る全単語」や「これ一冊だけで合格レベル」といったものを使ってきた影響でしょうか。

ここまでのことをまとめると、ぶ厚い入門書は「知るべきことはすべてこの一冊にまとまっている」という安心感を与えてくれ、さらに「この本だけあればいい」といった盲目思考を私たちに許してくれるものなのです。


<div class="rich-card-link">
<a href="/blog/reasons-for-avoiding-comprehensiveness">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-149.jpg)

</div>
<div class="r-card-text">
私たちが入門書で挫折するわけ
</div>
</div>
</a>
</div>

## 「これ一冊だけでOK」が失敗する理由

しかしどの分野の勉強であれ、「これ一冊だけ読めば大丈夫」ということはありえず、普通は類似の内容の本を数冊読むことになります。

むしろ、理解を深めるためには複数の本を読むことはマストだともいえます。

それには次のようなメリットがあるからです。

---

1 ― すでに知っていることでも、くりかえし目にすることで記憶がより定着する

2 ― 同じテーマの本でも、カバーしている内容は本ごとに微妙に異なるため、周辺知識が徐々に増える

3 ― テーマは同じでも、著者によってアプローチの方法／説明の仕方が異なるため、新しい発見があったり理解が深まったりする

---

あるテーマの学習が一冊で済むことはなく、数冊の本を読むことがマストだとわかると、入門書として最初にどの本を選ぶのかが意外に重要であると気が付きます。

最初の一冊がむずかしすぎれば、やる気をくじかれるでしょうし、読み終わるまでに時間がかかるような厚い本だと、途中で投げ出してしまうでしょう。

## 理想の入門書

私の考える「理想の入門書」は、「難しいと思ったけど自分でもできるかも！」「もっと知りたい！」というモチベーションを与えてくれるもの。

独学の場合はいわずもがな、予備校／メンターを利用していても、勉強を進めていくのは自分自身です。

なので勉強を続けていけるかどうかの分かれ目は、「もっと知りたい！」というポジティブな方向へと自分自身をどのように導いていくかにかかっています。

私はウェブ・プログラミング関係の入門書（JavaScript／React／Vue／Next.jsなど）をいくつも書いていますが、すべて同じ方針で書いています。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">【2026年1月第3版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

つまり、全分野をカバーするような包括的アプローチは取らず、初心者の方に成功体験をひとつ（そしてできるだけ短時間で）作ってもらい、その先の学習へと自主的に進んでいけるような明るい気持ちを抱いてもらうこと。

あるいは、ビギナーの方の背中をそっと軽く押してあげること。

レビューなどを読むと、そういう方針に共感し、ポジティブなスタートダッシュを実現できている人が多いようで、著者としてはうれしい限りです。

「理想の入門書は成功体験を早く得られるもの」と分かったら、次に考えたいのは「どのステップでどの入門書を使えばいいか」です。

HTML・CSSの最初の一冊からReact・TypeScript・Next.jsまで、各ステップで何を学ぶかを整理した学習ロードマップがあります。

入門書を選ぶ前に、学習の全体像を確認しておきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>



<a href="/present?magnet=first-study-guide&from=/blog/ideal-beginner-books">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=/blog/ideal-beginner-books">monotein.com/present</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/ideal-beginner-books">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/ideal-beginner-books)

---

# 【0円・1分で完了】HTMLとCSSでつくったウェブサイトを無料で今すぐ公開する方法

URL: https://monotein.com/blog/how-to-release-website-for-free
公開日: 2023.12.26
更新日: 2026.7.10
概要: HTML／CSS／JavaScriptで作ったウェブサイトを、無料、1分で公開する方法。Netlifyを使って公開。

## HTML／CSSでつくったウェブサイトを公開

1分で作業は終わるので、1分で読み終わる記事にします。

手元にHTML／CSSで作ったウェブサイトを用意しましょう。JavaScriptが含まれていても大丈夫です。

ここでは「my-website」という名前のフォルダの中に、下図のように3つのファイルが入っているものとします。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog126/img1.jpg)

</div>

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog126/img2.jpg)

</div>

次に下記URLを開いてください。

[https://app.netlify.com/drop](https://app.netlify.com/drop)

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog126/img3.jpg)

</div>

この中心部に、`index.html`などの入った先ほどのフォルダをドラッグ & ドロップします。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog126/img4.jpg)

</div>

アップロードが完了すると次のように表示されます。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog126/img5.jpg)

</div>

上図の赤枠のURLをクリックすると、ウェブサイトが公開されているのが確認できます。

これで1分、0円でウェブサイトの公開が完了です。

<a href="/present?magnet=first-study-guide&from=/blog/how-to-release-website-for-free">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/how-to-release-website-for-free)

なおひとつ注意点は、URLの下に「Your site will be live for 1 hour（このウェブサイトの有効期限は1時間です）」とあるように、いま公開したウェブサイトが1時間後に削除されてしまうことです。

これを防ぐには、このNetlifyというサービスのアカウントを作る必要があるので本記事で一緒に紹介します。

必要なのはメールアドレスだけで、お金は一切かかりません。

またNetlify Dropsと同様のサービスとして、2026年7月にリリースされたCLOUDFLAREのCloudflare Dropがあります。

• [cloudflare.com/drop](https://cloudflare.com/drop)

<div class="img-border">

![cloudflare-drop.jpg](../../images/singleBlogPageImages/blogArticleImages/blog215/cloudflare-drop.jpg)

</div>

## アカウント作成のステップ

URL下にある「Sign up for free」ボタンを押しましょう。

<div class="img-border">

![image](../../images/singleBlogPageImages/blogArticleImages/blog126/img6.jpg)

</div>

次のようなページが開きます。登録にはメールアドレスを使うので、「Sign up with email」をクリックしましょう。

<div class="img-border">

![netlify-sign-up](../../images/singleBlogPageImages/blogArticleImages/netlify/signup-with-email.jpg)

</div>

下の画面が開くので、自分の「Email」と好きな「Password」を入力し、アカウントを作成します。

<div class="img-border">

![pic3](../../images/singleBlogPageImages/blogArticleImages/netlify/create-account.jpg)

</div>

「登録したメールアドレスに確認メールを送りました」という下記ページが開くので、登録したメールアドレスのフォルダを確認します。

<div class="img-border">

![pic3.5](../../images/singleBlogPageImages/blogArticleImages/netlify/send-confirm-email.jpg)

</div>

確認メールを開き、「Verify email」ボタンを押します。

<div class="img-border">

![pic3.8](../../images/singleBlogPageImages/blogArticleImages/netlify/email-verify.jpg)

</div>

簡単なアンケートのページが開きます。

<div class="img-border">

![pic3.8](../../images/singleBlogPageImages/blogArticleImages/netlify/questions.jpg)

</div>

何を答えるのかは重要で無いので、好きな答えを選択してください。ここでは各設問の一つ目の選択肢、「Work」→「Web3.0」 → 「Freelancer」を選択していきます。

最後に「What is the name of your team?」と質問が出ますが、無視して構わないので、最後の「Continue to deploy」ボタンを押します。

<div class="img-border">

![pic3.8](../../images/singleBlogPageImages/blogArticleImages/netlify/continute-deploy.jpg)

</div>

ページが移動します。下記「Skip this step for now.」を押しましょう。

<div class="img-border">

![pic3.8](../../images/singleBlogPageImages/blogArticleImages/netlify/skip-to-next.jpg)

</div>

以上でアカウント作成までが完了です。

これでアップロードしたウェブサイトは1時間で消えず、いつでも好きな時にアクセスできるようになりました。

なお、このように有料サーバーなしでウェブサイトを公開できる理由や、Netlify以外の無料ホスティングサービスについては、[「サーバー料金をゼロにする方法」](/blog/how-to-host-website-for-free)で解説しています。

ウェブサイトを公開できたら、次のステップはアプリ開発です。

HTMLとCSSの知識だけで、最新のフロントエンド開発ツール「Next.js」を3分で体験できる無料ガイドを配布しています。

「作れる」の幅がぐっと広がります▼

<a href="/present?magnet=first-study-guide&from=/blog/how-to-release-website-for-free">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=/blog/how-to-release-website-for-free">monotein.com/present</a>

HTML／CSSの次に何を学ぶかは、こちらのロードマップで確認できます▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap" target="_blank" rel="noopener">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-release-website-for-free">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-release-website-for-free)

---

# Next.jsだけでお問い合わせフォームを作る方法を解説

URL: https://monotein.com/blog/nextjs-making-contact-function
公開日: 2023.12.23
更新日: 2024.5.10
概要: 外部サービスを使わずにNext.jsだけでお問合せフォームを作る方法を紹介。Next.jsのAppフォルダとapiフォルダ、そしてNodemailerを使用

## 作業の流れ
本記事では、Next.jsをフロントエンドとバックエンドに使ってお問い合わせ機能を作ります。

AppフォルダとPagesフォルダ、両方のコードを紹介するので参考にしてください。

作業は以下の流れで進みます。

---

1 ― Next.jsをインストール

2 ― フロントエンドに「お問い合わせページ」を作成

3 ― バックエンドの`api`フォルダに、「お問い合わせページ」からPOSTリクエストを受ける機能を作成

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-making-contact-function">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-making-contact-function)

お問合せがあったことをメールで知るために、Nodemailerというパッケージを使用します。

（*本記事ではNext.jsバージョン13で導入されたAppフォルダを使って解説を進めますが、以前使われていたPagesフォルダでも同じ流れでお問合せ機能を開発できるので、その互換性を重視して、サーバーコンポーネントとServer Actionsは使いません。）

## Next.jsのインストール

まずNext.jsの新しいプロジェクトを用意しましょう。

```shell
npx create-next-app example-site
```

インストール時に出てくる質問については、下から2つ目のAppフォルダに関するもの以外はすべて`No`を選びます。

```shell

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? › No / Yes
```

Next.jsをVSコードで開きましょう。

本記事ではCSSのスタイル関係には触れませんが、`globals.css`のコードがやや邪魔になるので、`globals.css`のコードはすべて消しておいてください。

![image](../../images/singleBlogPageImages/blogArticleImages/blog125/delete-css.jpg)

## お問い合わせページ作り（フロントエンド）

フロントエンド側にお問い合わせページを作りましょう。

`app`フォルダ内に`contact`フォルダを作り、その中に`page.js`ファイルを作ってください。

![image](../../images/singleBlogPageImages/blogArticleImages/blog125/contact-page.jpg)

そこに次のコードを打ちます。なおPagesフォルダを使っている場合は、1行目の`use client`は不要です。

```js
// app/contact/page.js

"use client"

const Contact = () => {
    return (
        <div>
            <h1>コンタクト</h1>
            <form>
                <input type="text" placeholder="お名前" required/>
                <input type="text" placeholder="メールアドレス" required/>
                <textarea type="text" placeholder="メッセージ" rows="10" required></textarea>
                <button type="submit">送信</button>
            </form> 
        </div>
    )
}

export default Contact
```

保存して`npm run dev`でNext.jsを起動し、`http://localhost:3000/contact`を開くと、次のように表示されます。

![image](../../images/singleBlogPageImages/blogArticleImages/blog125/contact-page-browser.jpg)

次は、データをバックエンドに投稿するコードを追加しましょう。現時点ではまだバックエンドがないので、`fetch()`のURLは`xxx`としています。

```js
// app/contact/page.js

"use client"
import { useState } from "react" 

const Contact = () => {
    const [name, setName] = useState("")
    const [email, setEmail] = useState("")
    const [message, setMessage] = useState("")

    const handleSubmit = async(e) => {
        e.preventDefault()  
        try{
            const response = await fetch("xxx", {
                method: "POST",
                headers: { 
                    "Accept": "application/json", 
                    "Content-Type": "application/json"
                },
                body: JSON.stringify({
                    name: name,
                    email: email,
                    message: message
                })
            })
            const jsonData = await response.json()
            alert("メッセージを送信しました")
        }catch(err){
            alert("メッセージの送信が失敗しました")
        }
    }

    return (
        <div>
            <h1>コンタクト</h1>
            <form onSubmit={handleSubmit}>
                <input value={name} onChange={(e) => setName(e.target.value)} type="text" placeholder="お名前" required/>
                <input value={email} onChange={(e) => setEmail(e.target.value)} type="text" placeholder="メールアドレス" required/>
                <textarea value={message} onChange={(e) => setMessage(e.target.value)} type="text" placeholder="メッセージ" rows="10" required></textarea>
                <button type="submit">送信</button>
            </form> 
        </div>
    )
}

export default Contact
```

ユーザーがメッセージを入力するフロントエンド側のページができたので、次はここから問い合わせを受け付けるバックエンド機能を作ります。

## 問い合わせを受け付ける機能の開発（バックエンド）

`app`フォルダ内に`api`フォルダを作り、その中にフォルダ`contact-handler`、さらにその中にファイル`route.js`を作りましょう。

![image](../../images/singleBlogPageImages/blogArticleImages/blog125/api-folder.jpg)

ここにフロントエンドからのデータ（＝メッセージ）を受け付けるコードを書きますが、その前にまず必要なパッケージをインストールしましょう。

```shell
npm install nodemailer
```

そこに次のコードを打ちます。

注意してもらいたいのは`transporter`に入力するSMTP関連のデータで、これはOutlookやZohoなど各自のメールアカウントから持ってきてください（Outlookの[SMTPデータ](https://support.microsoft.com/ja-jp/office/outlook-com-%E3%81%AE-pop-imap-%E3%81%8A%E3%82%88%E3%81%B3-smtp-%E3%81%AE%E8%A8%AD%E5%AE%9A-d088b986-291d-42b8-9564-9c414e2aa040)）。なおGmailは、Vercelにデプロイしたあと、意図通りに動かないことがあります。

```js
// app/api/contact-handler/route.js

import { NextResponse } from "next/server"
import nodeMailer from "nodemailer"

export async function POST(request) {
    const reqBody = await request.json()
    const { email, name, message } = reqBody

    try{
        const transporter = nodeMailer.createTransport({
            host: "smtp-mail.outlook.com",               // メールサーバー。ここではHotmail/Outlookを使った例
            port: 587,
            secure: false,
            auth: {
                user: "my-email@hotmail.co.jp",           // メールアドレス
                pass: "my-password"                       // パスワード
            }
        })
    
        const mailOptions = {
            from: "My website",
            to: "receive-email@gmail.com",
            subject: "Next.jsコンタクトページ",
            text: `名前: ${name} \n\nメールアドレス: ${email} \n\nメッセージ: ${message}`
        }
    
        const info = await transporter.sendMail(mailOptions)
        return NextResponse.json({message: "成功しました"})
    }catch(err){
        return NextResponse.json({message: "失敗しました"})
    }
}
```

もしPagesフォルダを使っている場合は、`pages`フォルダ内に`api`フォルダ、その中に`contact-handler.js`ファイルを作り、次のコードを打ちます。

```js
// pages/api/contact-handler.js

import nodeMailer from "nodemailer"

export default function contactHandler(req, res){
    if (req.method === "POST") {
        const { email, name, message } = req.body

        const transporter = nodeMailer.createTransport({
            host: "smtp-mail.outlook.com",         // メールサーバー。ここではHotmail/Outlookを使った例
            port: 587,
            secure: false,
            auth: {
                user: "my-email@hotmail.co.jp",           // メールアドレス
                pass: "my-password"                       // パスワード
            }
        })
    
        const mailOptions = {
            from: "My website",
            to: "receive-email@gmail.com",
            subject: "Next.jsコンタクトページ",
            text: `名前: ${name} \n\nメールアドレス: ${email} \n\nメッセージ: ${message}`
        }

        transporter.sendMail(mailOptions, (err, info) => {
            if(err){
                return res.json({message: "失敗しました"})
            }else{
                return res.json({message: "成功しました"})
            }
        })
    }
}
```

これでバックエンド側の機能は完成です。

最後にフロントエンド側の`fetch()`のURLを修正しましょう。

```js
// app/contact/page.js

const response = await fetch("http://localhost:3000/api/contact-handler", {....
```

なおデプロイする場合には、`http://localhost:3000`をデプロイ後の公開URLに変更することを忘れないようにしましょう。

お問い合わせフォームを実装できたら、Next.js開発の全体像（RSC・Server Actions・デプロイ手順など）を一本でまとめたガイドを参考にしてNext.jsの理解を深めてください▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>



<a href="/present?magnet=first-study-guide&from=/blog/nextjs-making-contact-function">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=/blog/nextjs-making-contact-function">monotein.com/present</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-making-contact-function">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-making-contact-function)

---

# 英語はプログラミング学習に役立つ？

URL: https://monotein.com/blog/english-and-programming-study
公開日: 2023.12.19
概要: プログラミングは英語ベースなので、英語を知っているとプログラミング学習もはかどると思われていますが、本当でしょうか。英語を使える状態でプログラミング勉強を始めた私の経験を書きます。

## 人気のスキル：英語とプログラミング

日本人が身につけたいスキルの上位は「英語」と「プログラミング」だそうです。

そのためか、ときどき私は次のような質問を受けることがあります。

「英語を知っているとプログラミング学習に役立ちますか？」

私はヨーロッパに長い間住んでおり、今でも海外に毎年数ヶ月は滞在する生活をしているので、英語でのコミュニケーションは普通のものになっています。

また私はプログラミング関係の仕事をしているので、そういうところから上の質問がくるのでしょう。

今日はこのことについて書いてみます。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/english-and-programming-study">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/english-and-programming-study)

## 私の英語力

最初に私の英語力についてです。

普通はここでTOEICのスコアだとか英検の保有級などについて書くところですが、（残念ながら）私に書くものはありません。

（........はるか昔、大学生のころにとった英検が二級、またこれもはるか昔、留学をしていたときに受けたTOEICが890点だったことが唯一書けることですが、どちらも10年以上前のことなので、すでに「有効期限切れ」でしょう。TOEICなどの資格に興味がないのは、「英語を使える」という事実が自分にとって明らかで、またそれをわざわざ数字やペーパーで他人に向かって証明する必要（履歴書に書くなど）がなかったからだと思います。）

なので私の言葉を信じてもらうしかありませんが、今の私は英語でのコミュニケーションに苦労は感じません。むしろ日本語を使う方が難しく感じます。

これは私がプログラミングの勉強を始めた時も同じで、当時から英語を使うことにストレスはありませんでした。

それでは、これはプログラミング学習に役立ったのでしょうか？

## プログラミング学習の初期

私が最初に勉強したのはHTMLとCSSで、日本語の本を使いました。

使っている教材が日本語で、またHTMLとCSSの学習もかなりスムーズに進んだので、この時点で英語を使う機会はありませんでした。

英語を意識し出したのは、HTMLとCSSの学習後、JavaScriptの勉強を始めたときです。

JavaScriptには「メソッド（Method）」や「オブジェクト（Object）」といった概念が出てきます。

これらの理解で私は大きくつまづきました。

日本語の解説をいくら読んでもまったく理解できません。

なので私は次のように考えます。

「・・・・・これは日本語で書かれてるからわかりにくいんだ。プログラミングは英語ベースのものなんだから、英語で読めば理解できるはずだ！」

そこでネットの英語の説明を読みます。

ですが、まったく理解できません。

むしろ英語の説明の方がわかりにくいと感じました。

ここからかなり長い間JavaScriptの学習が進まず、ほぼ「挫折状態」になるのですが、ここから言えることは、英語がプログラミング学習の初期にはそこまで役に立たなかったことです。

## プログラミング学習の中期〜後期

JavaScriptの挫折状態が長く続いてモチベーションも失っていたころ、偶然目にしたYouTubeの動画でまたやる気を取り戻して、プログラミング学習を前に進められるようになります。

それからさまざまなテクノロジーの知識やスキルを身につけていくのですが、ここでは英語が大きく役に立ちました。

むしろ英語がなかったら、ここまで進めていくことはできなかったと思います。

というのは、私は独学で勉強を進めており、またこの時は海外にいたので、使える学習素材がネットのものしかなかったからです。

英語で得られる情報量、そして教材の質は、日本語のものとは比較になりません。

有料・無料を問わず、文章、動画、音声などどのような形式であっても、質の高い素材が山ほど英語のネット空間にはあります。

英語を使ってこれらの情報にアクセスできなかったら、私はプログラミング学習を進められなかったでしょう。

そのためプログラミング学習の中期〜後期にかけては、英語がなかったら、学習を進めることも知識を増やすこともできなかったと思います。

## プログラミング能力が向上して以降

勉強を一通り終えて、プログラミングを使って仕事をするようになってからも、英語とは不可分の関係にあります。

プログラミング中に出くわすエラーはすべて英語なので、それをネットで調べて出てくる回答もすべて英語です。

実現したい機能があって、そのコードを調べたとき、英語の方が質の高い情報が出てきます。

そもそも世界最大のプログラミングQAサイト「Stack Overflow」や、コード管理のGithubなどもすべて英語なので、プログラミングにおいて英語はデフォルトの言語になっているといえるでしょう。

そのため、英語なしでプログラミングを行っている自分を想像することは困難です。

## 英語を知っているとプログラミング学習がはかどる？

ここまで私の個人的な経験を書いてきましたが、客観的な事実として、プログラミングが英語圏発のものであり、また英語がグローバル言語としての地位を確立していることを考えると、プログラミングと英語は切り離せない関係にあります。

そういう中で英語がプログラミング学習に役立つのかというと、私の学習初期のころは大して役に立ちませんでした。

しかし学習が進み、さらに仕事でプログラミングを使うようになると、英語情報の質と量の恩恵を大きく受けるようになったので、英語は大きく役に立ったといえます。

むしろ英語情報がなかったら、あそこまで前に進むことができなかったので、英語能力はマストだったと思います。

これからプログラミング学習を始める人は、最初の時点では英語とプログラミングの両方を進める必要はありませんが、「どこかの時点で英語が必要になる」、あるいは「英語が使えると学習のスピードが格段に上がる」と知っておくといいでしょう。

なお、プログラミング自体を何からどの順番で学んでいくかについては、[「【2026年版】React初心者のための学習ロードマップ」](/blog/guide-react-learning-roadmap)で解説しています。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/english-and-programming-study">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/english-and-programming-study)

---

# Next.js Appフォルダでの変更点を20個、時短で紹介

URL: https://monotein.com/blog/nextjs-app-folder-new-things-list
公開日: 2023.12.12
更新日: 2026.3.30
概要: Next.jsバージョン13でデフォルトになったAppフォルダの特徴や知っておくと便利なことを20個以上、時短で紹介します。

## お知らせ：新刊書リリース
2024年11月に、Server Actionsを使ってフルスタックアプリを開発する新刊書をリリースしました。

Next.js／Reactビギナー向け入門です。

2024年11月時点で最新のNext.jsバージョン15を使用しています。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DMQLP8Z9">
    <img class="bc-cover" src="/images/commonImg/nextjs-server-actions.svg" alt="Next.js Server Actionsでつくるフルスタックアプリ" />
    <div class="bc-body">
        <p class="bc-title">Next.js Server Actionsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【2024年11月リリース。少ないコードですばやく本格的なフルスタックアプリを開発する方法を紹介】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

## 0 Reactサーバーコンポーネント
Next.jsでデフォルトとなっているReactサーバーコンポーネント。

意外に理解しにくいその仕組みについて知りたい方は、下記記事を参考にしてください。

ビギナー向けに、やさしくReactサーバーコンポーネントの解説をしています。

<div class="rich-card-link">
<a href="/blog/react-server-components-complete-guide">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-165.png)

</div>
<div class="r-card-text">
Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-app-folder-new-things-list">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-app-folder-new-things-list)

## 1 フォルダ構成（フロントエンド）

Appフォルダではフォルダ名がURLとして使われ、コードはその中に作ったpage.jsに書きます。

動的ページ（ブログの記事ページやアイテムページなど）では、`[id]`や`[slug]`のように`[ ]`を使った名前をフォルダ名として使います。

|   URL     | **従来（Pagesフォルダ）**|**v13以降（Appフォルダ）**|
| :------:| :------: |:------:|
|/      | /pages/index.js |  /app/page.js|
|/blog | /pages/blog.js | /app/blog/page.js |
|/blog/2024-12-1-cafe-book | /pages/blog/[id].js | /app/blog/[id]/page.js |


## 2 フォルダ構成（バックエンド）
API／バックエンド開発を行う場合も、フォルダの名前がURLに使われるという規則は同じです。

従来（Next.jsバージョン12以前）は`api`というフォルダを作るのがマストでしたが、Appフォルダでは`api`フォルダ作成が必須ではありません。`route.js`という名前のファイルを作れば、それがRoute Handlersとして機能します。

|   URL    |**従来（Pagesフォルダ）** | **v13以降（Appフォルダ）**|
| :------:| :------: |:------:|
|/api/item/create |  /pages/api/item/create.js   | /app/api/item/create/route.js   |
|/api/article/2024-12-1-cafe-book |  /pages/api/article/[id].js   | /app/api/article/[id]/route.js   |
|/api/blog/readsingle/20240914-studying-english |  /pages/api/blog/readsingle/[id].js   | /app/api/blog/readsingle/[id]/route.js   |

## 3 サーバーコンポーネントとクライアントコンポーネントの比較

Appフォルダ内ではReactサーバーコンポーネントがデフォルトです。

|   目的  |     サーバーコンポーネント  | クライアントコンポーネント |
| :----:|:------:|:------:| 
|  データベースから直接データを取得する | ○|  ×| 
|  onClickなどのユーザー操作機能 |× | ○ | 
|  useStateやuseEffectの使用 | ×| ○ | 

## 4 従来のReactを使う方法（use client）
デフォルトのReactサーバーコンポーネントで`useState`や`useEffect`などを使いたい場合には、ファイル冒頭に`"use client"`と書き、従来のReactコンポーネント（クライアントコンポーネント）へと変更します。

```js
"use client"

import { useState } from "react"

const Hello = () => {
    const [data, setData] = useState()

    return (
        <div>
            ...
```

## 5 URLパスの取得（フロントエンド）
`next/navigation`を使って次のように書きます。

```js
import { usePathname } from "next/navigation"

const Hello = () => {
    const pathname = usePathname()
    console.log(pathname)  　　// /blog/first-article

    return(
        <div>
            ...
```

従来（Next.jsバージョン12以前）は次のように書いていました。

```js
import { useRouter } from "next/router"

const Hello = () => {
    const router = useRouter()
    console.log(router.asPath)     　// /blog/first-article
    
    return(
        <div>
            ...
```

## 6 リダイレクト（フロントエンド）

`next/navigation`を使って次のように書きます。

```js
import { useRouter } from "next/navigation"

const Hello = () => {
    const router = useRouter()
    router.push("/success")
    OR
    router.replace("/success")

    return(
        <div>
            ...
```

従来（Next.jsバージョン12以前）は次のように書いていました。

```js
import { useRouter } from "next/router"

const Hello = () => {
    const router = useRouter()
    router.push("/success")
    OR
    router.replace("/success")
    
    return(
        <div>
            ...
```

## 7 APIルートの作り方（GETリクエスト）
Appフォルダ内でAPI開発をするときのコードも大きく変わっています。下記はGETリクエストを行う最もベーシックなコードです。

```js
// app/api/hello/route.js

import { NextResponse } from "next/server"

export async function GET() {
    return NextResponse.json("ハロー")
}
```

従来（Next.jsバージョン12以前）は次のように書いていました。

```js
// pages/api/hello.js

export default function hello(req, res){
    return res.json("ハロー")
}
```

## 8 APIルートのPOSTとPUTとDELETEメソッド
HTTPメソッドの変更は、`GET`や`POST`や`DELETE`を明示して行います。

```js
export async function POST() {
    return NextResponse.json("ハロー")
}
```

```js
export async function DELETE() {
    return NextResponse.json("ハロー")
}
```

## 9 リクエストBodyの解析方法
Appフォルダでは`request.json()`を使います。

```js
import { NextResponse } from "next/server"

export async function POST(request) {
    const reqBody = await request.json()
    console.log(reqBody)        // リクエストbodyの中身が表示
    return NextResponse.json("ハロー")
}
```

従来（Next.jsバージョン12以前）は次のように書いていました。

```js
export default function hello(req, res){
    console.log(req.body)      // リクエストbodyの中身が表示
    return res.json("ハロー")
}
```

## 10 バックエンドでのパラメータ取得（context）
バックエンド側でURLのパラメータを取得したい場合、`context.params.id`を使って次のようにします。

なお`context`はカッコ内の2つ目の値として書く必要があるので、ここでは`request`も書いています。

```js
import { NextResponse } from "next/server"

export async function GET(request, context) {
    console.log(context.params.id) 
    return NextResponse.json("ハロー")
}
```

従来（Next.jsバージョン12以前）は`req.query.id`で取得をしていました。

```js
const getSingleItem = async(req, res) => {
    console.log(req.query.id)
    return res.json("ハロー")
}

export default getSingleItem
```

## 11 _app.jsの廃止とlayout.jsの導入
従来（Next.jsバージョン12以前）、すべてのページで適用したいスタイルや設定などは`_app.js`で行っていましたが、Appフォルダでは`layout.js`がその代わりを果たします。

`layout.js`という名前のファイルを作ると、そのフォルダ配下のすべてのファイルに適用されます。

（下記例では`blog`フォルダ内に`layout.js`を作ると、配下にある`summer`、`winter`にも適用されます。）

![layout.jpg](../../images/singleBlogPageImages/blogArticleImages/blog121/layout.jpg) 

## 12 getStaticPathsの廃止とgenerateStaticParamsの導入
動的ページのURL生成・登録のために使われていた`getStaticPaths`は、`generateStaticParams`に変更されました。

```js
const SingleBlog = () => {
    return (
        <h1>SingleBlogページ</h1>
    )
}

export default SingleBlog

export async function generateStaticParams() {

    // マークダウンファイルや外部データベースなどからURL名／ファイル名を取得するコード
    
    return paths
}
```

従来（`getStaticPaths`）は次のように書いていました。

```js
const SingleBlog = () => {
    return (
        <h1>SingleBlogページ</h1>
    )
}

export default SingleBlog

export async function getStaticPaths() {

    // マークダウンファイルや外部データベースなどからURL名／ファイル名を取得するコード

    return {
        paths: paths,  
    }
}
```

## 13 getStaticPropsの廃止
スタティック・サイトの動的ページのデータ取得時に使われていた`getStaticProps`や、サーバーサイドレンダリング時のデータ取得に使われていた`getServerSideProps`は廃止され、データベースへの直接アクセスや、JavaScriptの`fetch()`でデータ取得を行えるようになりました。

（*この`fetch()`はNext.jsによって高機能化されており、キャッシュの設定なども行えます）

```js
const getSingleItem = async(id) => {
    const response = await fetch("http://localhost:3000/api/item/readsingle/${id}") 
    const jsonData = await response.json() 
    const singleItem = jsonData.singleItem         
    return singleItem 
}

const ReadSingleItem = async(context) => {                        
    const singleItem = await getSingleItem(context.params.id)     
    return (
        <div>
            ....
```

## 14 プロジェクト全体に適用したい機能（middleware.js）
`middleware.js`という名前のファイルを作ると、ユーザーからのアクセスはすべてこの`middleware.js`を通過します。アクセス認証やリダイレクト処理のコードを書くときに便利です。

ポイントは`app`フォルダと同じ階層に作ること、そして名前を必ず`middleware.js`にすることです。

![middleware1.jpg](../../images/singleBlogPageImages/blogArticleImages/blog121/middleware1.jpg) 

## 15 middleware.jsの適用範囲を制限する
`middleware.js`はデフォルトでは、全ルートに対するすべてのリクエストが通過する設定になっています。

もし`middleware.js`の働きを特定のルートだけに制限したい場合は、`matcher`を使いましょう。

（*フォルダ配下すべてに適用したい場合は`:path*`と書きます）

```js
// middleware.js

import { NextResponse } from "next/server"

export async function middleware() {
    return NextResponse.next()
}

export const config = {
    matcher: ["/about", "/api/item/create", "/api/item/update/:path*"],
}
```

## 16 メタデータの設定方法
ページタイトルや`description`などのメタデータは、従来（Next.jsバージョン12以前）は`<Head>`を使っていましたが、Appフォルダでは次のように設定します。

```js
// app/page.js

export const metadata = {
    title: "トップページ",
    description: "弊社はAI分野のリーディングカンパニーです。",
}

const Index = () => {
    return (
        <div>
            ...
```

データによって表示内容の変わる動的ページの場合は、`generateMetadata`を使い、データ取得のコードを書く必要があります。

```js
// app/blog/[id]/page.js

export async function generateMetadata() {

    // マークダウンファイルや外部データベースなどからデータを取得するコード
    
    return { 
        title: data.title,
        description: data.excerpt,
    }
}

const SingleBlog = async() => {
    return (
        <div>
            ...
```

しかし実はもっと簡単に設定する方法もあり、それはクライアント・コンポーネントにも使える方法です。下記記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/nextjs-app-router-metadata-for-client-component">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-143.png)

</div>
<div class="r-card-text">
【Next.js Appフォルダ】メタデータをクライアント・コンポーネントに設定する方法
</div>
</div>
</a>
</div>

## 17 ローディングの設定方法
APIなどからデータを取得するファイルと同じフォルダ内に`loading.js`という名前のファイルを作ると、データ取得中にはそれが表示されます。

![loading.jpg](../../images/singleBlogPageImages/blogArticleImages/blog121/loading.jpg) 

## 18 404ページの設定方法
`not-found.js`を`app`フォルダ内に作ると、404ページとして機能します。

![404-1.jpg](../../images/singleBlogPageImages/blogArticleImages/blog121/404-1.jpg) 

次のように表示されます。

![404-2.jpg](../../images/singleBlogPageImages/blogArticleImages/blog121/404-2.jpg) 

## 19 next/imageをheightとwidthの設定なしで使う
`next/image`では`height`と`width`の設定がマストですが、`import`で読み込んだ画像の場合は、それらの設定は不要になります。

```js
import Image from "next/image"
import profilePic from "./myself.png"
 
const Hello = () => {
    return (
        <Image src={profilePic} />
    )
}
```

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFXVMSF">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1.svg" alt="Next.jsでつくるフルスタックアプリ 前編（バックエンド開発）with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【最新のNext.jsバージョン16をつかった本格アプリの開発手法がわかる入門書。Route Handlers使用】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


## 20 環境変数の使い方　
`.env.local`ファイル内で設定した環境変数は、`process.env.変数名`で呼び出せます。

```plaintext
// .env.local

URL = https://nextjsbook-fullstack-app-folder.vercel.app
```

呼び出し。

```js
fetch(`${process.env.URL}/api/item/readall`)
```

しかしこれはサーバーサイドのコードでしか呼び出せないため、クライアント（ブラウザ）サイドのファイルから呼び出したい場合は`NEXT_PUBLIC_`をつけます。

```plaintext
// .env.local

NEXT_PUBLIC_URL = https://nextjsbook-fullstack-app-folder.vercel.app
```

呼び出し。

```js
fetch(`${process.env.NEXT_PUBLIC_URL}/api/item/readall`)
```

## 21 開発環境と本番環境（Vercel）のURLを自動で切り替える
手元のコンピューターでの開発時にバックエンドのURLとして`http://localhost:3000`を使っている場合、デプロイのたび、URLをVercelが割り当てている公開URLに変更する必要があり、手間がかかります。

開発環境でのURLは`.env.development`に、本番環境でのURLは`.env.production`に次のように設定し、プロジェクト内のURLをすべて`process.env.変数名`に置き換えると、手元のコンピューターでは`.env.development`のURLが、デプロイ時には`.env.production`のURLを、Vercelが自動で切り替えてくれます。

![env-vari-dev-pro.jpg](../../images/singleBlogPageImages/blogArticleImages/blog121/env-vari-dev-pro.jpg) 
　
```js
// .env.development

NEXT_PUBLIC_URL=http://localhost:3000
```

```js
// .env.production

NEXT_PUBLIC_URL=https://nextjsbook-fullstack-app-folder.vercel.app
```

## 22 フォントの設定方法 

最適化されたGoogle fontが`next/font`で簡単に使えます。

フォント設定は、サイトやアプリ全体に適用するのが普通なので、多くの場合`layout.js`に書きます。

```js
// app/layout.js

import { Eczar } from "next/font/google"
// ⬆フォントを読み込み

const font = Eczar({ subsets: ["latin"] })
// ⬆フォントの設定

export default function RootLayout({ children }) {
  return (
      <html>
          　　　　　　　　　// ⬇フォントを適用
          <body className={font.className}>
              {children}
          </body>
      </html>
  )
}
```

以下、ビギナーの方がよく挙げる不明点を2つ解説します。

### フォント名について

2文字以上のフォント名、たとえば「Shantell Sans」や「 Advent Pro」のようなフォントは、間にアンダースコアを挟んで次のように書きます。

```js
import { Shantell_Sans } from "next/font/google"

const font = Shantell_Sans({ subsets: ["latin"] })

...
```

```js
import { Advent_Pro } from "next/font/google"

const font = Advent_Pro({ subsets: ["latin"] })

...
```

### subsetsについて

「subsets」とは必要な文字だけを抜き出すことです。

文字には「A、B、C、a、b、c....」といったアルファベットの文字だけでなく、キリル文字やギリシャ文字、ハングル、ひらがな、カタカナ、漢字といった表記法もあります。

フォントによっては、アルファベットだけでなくギリシャ文字なども含まれているものがあり、その場合ギリシャ文字の読み込みの分だけ負荷が上がるので、「subsets」でアルファベットの読み込みだけを指定しましょう。

アルファベットだけを読み込むときには、上記例のように`subsets: ["latin"]`と書きます。

*フォントによっては、次のように`weight`の設定がマストの場合もありますが、その場合はエラーが表示されるので、それに従って修正しましょう。

```js
import { Klee_One } from "next/font/google"

const font = Klee_One({ 
    subsets: ["latin"], 
    weight: "400",
})

...
```

## 23 フォルダ名をURLに反映させない方法

`app`フォルダ内では、フォルダの名前がURLに反映されます

たとえば次のように、マーケティング（`marketing`）とセールス（`sales`）フォルダを作成し、その中に`about`と`profit`フォルダを作ったとします。

![file-folder-1.jpg](../../images/singleBlogPageImages/blogArticleImages/blog121/file-folder-1.jpg) 

URLは次のようになります。

`app/marketing/about/page.js` → `/marketing/about`

`app/sales/profit/page.js` → `/sales/profit`

しかし、グループ分けや整理整頓のためにフォルダを作りたい場合もあります。つまりURLに反映されないフォルダを作りたいときです。

その場合は、下図のように丸カッコでフォルダ名をはさみましょう。

![file-folder-2.jpg](../../images/singleBlogPageImages/blogArticleImages/blog121/file-folder-2.jpg) 

このようにすると、フォルダ名がURLに反映されなくなり、URLは次のようになります。

`app/(marketing)/about/page.js` → `/about`

`app/(sales)/profit/page.js` → `/profit`


<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFXVMSF">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1.svg" alt="Next.jsでつくるフルスタックアプリ 前編（バックエンド開発）with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【最新のNext.jsバージョン16をつかった本格アプリの開発手法がわかる入門書。Route Handlers使用】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

## 24 Server ActionsとAPI、どっちを使う？
Server Actionsを使えば、API（Route Handler）を作らなくてもダイレクトにデータベースとの連携やCRUD操作が可能ですが、それぞれに強み／弱みがあります。

|| **API（Route Handlers）**    |  **Server Actions**  | 
|:----:| :----:|:------:|
|特徴|汎用的 | 限定的 |  
|用途|データベースとの複雑な連携操作があるケース|シンプルなCRUD操作が主のケース |
|メリット|　APIを、他のアプリケーションやモバイルアプリも利用可 | コードの記述量を抑え、コンパクトかつ短時間で開発可 |  
|デメリット|コードの記述量や開発工程が増える |  そのNext.js／Reactアプリでしか利用できない|  

くわしくは下記記事も参考にしてください。

<div class="rich-card-link">
<a href="/blog/server-actions-or-api">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-131.png)

</div>
<div class="r-card-text">
Server ActionsとAPI、どっちを使う？違いと使い分けをわかりやすく解説
</div>
</div>
</a>
</div>

## 25 Next.jsをVercel以外でデプロイする方法
手元のコンピューターで、あらかじめexportとbuildを行う必要があります。exportのコードを`next.config.mjs`に追加しましょう。

```js
// next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
    output: "export",     // 追加
};

export default nextConfig;
```

そして`npm run build`コマンドを実行すると`out`フォルダができるので、それをデプロイします。

なおデプロイ後、画像が表示されない問題などが発生する場合は、下記記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/deploy-nextjs-to-other-hosting-platforms">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-151.png)

</div>
<div class="r-card-text">
Next.jsをVercel以外で公開する方法（Git不要／Appルータ使用／Netlify）
</div>
</div>
</a>
</div>

## 26 build時に特定のURLを除外する方法
特定のURLをbuild時に除外する方法で一番簡単なのは、該当のフォルダ（or ファイル）自体を`app`フォルダや`pages`フォルダから取り除く方法です。

しかし`next.config.mjs`にコードを書いて行う方法もあるので、くわしくは下記記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/nextjs-excluding-specific-path-from-build">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-152.png)

</div>
<div class="r-card-text">
Next.jsのbuild時、特定のURLを除外する方法
</div>
</div>
</a>
</div>

<br/>

Appフォルダの細かい仕様が分かったところで、Next.jsのセットアップからRSC・Server Actionsの使い方、デプロイまでを一本にまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-app-folder-new-things-list">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-app-folder-new-things-list)

---

# 新書リリース。「Next.jsでつくるフルスタックアプリ　前編・後編」

URL: https://monotein.com/blog/release-book-nextjs-fullstack-app-folder
公開日: 2023.11.28
更新日: 2023.12.11
概要: 最新のNext.js（Appフォルダ）を使ってフルスタックアプリを開発する新書を出版します。前編ではMongoDBを使ったバックエンド開発、後編ではReactを使ったフロントエンド開発を解説します。

## Next.js + Appフォルダ
今週末（2023年11月30日）に最新のNext.jsを使ってフルスタックアプリを開発する書籍を発売します。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DRHF4KGM">
    <img class="bc-cover" src="/images/commonImg/nextbook-app-fullstack-1.svg" alt="Next.jsでつくるフルスタックアプリ" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【最新バージョンのNext.jsとAppフォルダで、フルスタックアプリを自力で作る力を手にいれる】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

この本は昨年2022年4月に発売した同名書籍のアップデート版になります。

旧版ではNext.jsバージョン12を使って開発を行っていましたが、2022末にリリースされたNext.jsバージョン13では「Appフォルダ」の導入やサーバーコンポーネントのデフォルト化など、非常に大きな変更が加わり、Next.jsのコードの書き方も大きく変わりました。

本書はそのような最新のNext.jsに準拠してフルスタックアプリ開発を行う教本です。

私がこれまで書いてきた本のように、本書もビギナー向けとなっているのでReactやNext.jsの知識がなくてもトライできる難易度です。

前編ではAppフォルダの`api`フォルダを使ってバックエンド開発を進めます。ユーザー登録機能、ログイン機能、アイテムの作成・読み取り・編集・削除といったCRUD操作、データベース（MongoDB）との連携を解説します。

後編ではReactの基本的な書き方に始まり、サーバーコンポーネントの使い方、ユーザー登録ページ、ログインページ、アイテムの各操作ページ、画像のアップロード方法などを紹介しています。

前書からの主な変更点は下記のようになっています。

|  変更点    |**前書** | | **本書**|
| :------:| :------: |:------: |:------:|
|Next.jsのバージョン|   12  |  → | 14 |
|フォルダ|   Pagesフォルダ  |  → | Appフォルダ |
|サーバーコンポーネント|   ×  |  → | ○ |
| ログインの判定 |  オリジナルの`auth.js`を作成  | →  | Next.jsの`middleware.js`を使用|
|開発時とデプロイ時のURL|  手動で変更  |  → | 環境変数を設定　|
|ローディングの設定|  × |  → | ○　|
|SSG、SSR、CSRの比較|  ○ |  → | ×　|
|フロントエンドからのリクエストのテスト|  HTMLページを作成  |  → | Thunder Client（VS Codeのエクステンション）を使用　|


なお現在のNext.jsではServer Actionsという機能が安定版となっており、これを使えばあえてバックエンドを分離して開発せずとも、いわゆるフルスタックアプリを作れますが、本書では「フロントエンド + バックエンド = フルスタックアプリ」と定義して、それぞれを分けて開発を行う手法を説明しています。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/release-book-nextjs-fullstack-app-folder">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/release-book-nextjs-fullstack-app-folder)

## 本書で扱う主なテクノロジー

前編・後編では以下のようなことをカバーしています。

• Appフォルダ

• サーバーコンポーネント

• middleware.js（Next.js）

• カスタムフック（React）

• useState / useEffect

• ログイン

• トークン（JSON Web Token）

• データベース（MongoDB）

• CRUD操作

• 画像のアップロード（Cloudinary）

• 環境変数

## 執筆スケジュールの遅れ

本書はもともと今夏に出版をする予定でしたが、さまざまなスケジュールが重なり時間が取れなかったため、出版が遅れに遅れていました。

幸い先月と今月（10 - 11月）は時間的に余裕があったため、何とか執筆を終えて、2023年が終わるよりも前に出版まで至ることができました。

年末年始の休暇時、本書が読者の方のNext.jsへの理解を深める一助となることを願っています。

## 目次

• 前編

第1章　基礎知識と開発ツールの準備

ウェブアプリケーションとは？

フロントエンドとバックエンド

CRUD操作

React／Next.jsを使う理由

ターミナルの使い方

Node.js

npm

VS Code

エラーが発生した場合の対処方法

第2章　Next.jsバックエンド開発の準備

Next.jsのインストール

フォルダの中身

バックエンド開発で使うフォルダ

必要なファイルとフォルダの作成

第3章　アイテム操作機能

アイテムの作成　その1

アイテムの作成　その2

アイテムの読み取り（アイテムをすべて）

アイテムの読み取り（アイテムをひとつ）

アイテムの修正

アイテムの削除

第4章　ユーザー登録とログイン機能

ユーザー登録機能

ログイン機能

ログイン状態の維持

ユーザーのログイン状態を判定する機能

誰がログインしているかを判定する機能

第5章　バックエンドのデプロイ

デプロイの手順（Vercel）

---

• 後編

第6章　フロントエンド開発の準備／Reactの書き方／Next.jsのサーバーコンポーネント

アイテムデータの保存

コードのクリーンアップ

コードの書き方とスタイルの適用方法

サーバーコンポーネント（Next.js Appフォルダ）

第7章　ユーザー登録ページとログインページ

必要なフォルダとファイル

ユーザー登録ページ

ログインページ

複数の項目を含んだstateの書き方（補足）

第8章　アイテムページ

すべてのアイテムデータを読み取るページ

1つだけアイテムデータを読み取るページ

アイテムデータを作成するページ

アイテムデータを編集するページ

アイテムデータを削除するページ

ページの表示を制限する

スタイルの適用とコンポーネント

第9章　フロントエンドのデプロイ

バックエンドURLの修正（環境変数の設定）

第10章　ブラッシュアップ

画像のアップロード

ローディング

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/release-book-nextjs-fullstack-app-folder">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/release-book-nextjs-fullstack-app-folder)

---

# Next.js開発中、画面の表示をモバイル端末で確認する方法

URL: https://monotein.com/blog/use-nextjs-in-the-same-wifi-network
公開日: 2023.06.08
更新日: 2024.05.02
概要: 同WiFiネットワーク内のパソコン、タブレットでも同じ画面を表示でき、Next.js開発時の共有に非常に便利です

## Next.jsの開発画面を共有する方法
Next.jsをパソコンで開発中、モバイル端末での表示を確認したいときがあります。

パソコンとモバイル端末が同じWiFiネットワークに接続しているときは、下記の方法で簡単に確認できます。

---

最初に現在のWiFiのIPアドレスを取得します。

ターミナルに次のコマンドを打ち、「Enter」で実行してください（Macの場合）。

```shell
ipconfig getifaddr en0
```
現在つながっているIPアドレスが次のように表示されます（下記は私の現在のIPアドレス）。

```shell
142.11.0.3
```

この数字をコピーしたら、次にVSコードなどのエディターのターミナルに、下記Next.js起動コマンドを打ちましょう。

`-H`以降のコマンドがIPを指定するものです。

```shell
npx next dev -H 142.11.0.3
```

起動が完了するとターミナルには`http://142.11.0.3:3000`のようにURLが表示されるので、これをモバイル端末で開くと、変更を確認しながら開発を進められます。

これはモバイル端末だけではなく、同じWiFiネットワークにつながっているパソコン、タブレットなどでも同じ画面が表示されるので、開発時の共有に非常に便利です。

（参考：[nextjs.org/docs/pages/api-reference/next-cli#development](https://nextjs.org/docs/pages/api-reference/next-cli#development)）

Next.jsの全体像はこちらのガイドで確認できます▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs" target="_blank" rel="noopener">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

なおNext.jsバージョン13で導入されたAppフォルダを使った最新のNext.js開発に興味のある方は、今月（2023年6月）リリースした下記書籍を参考にしてください。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
    <img class="bc-cover" src="/images/commonImg/nextbook.svg" alt="はじめてつくるNext.jsサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるNext.jsサイト</p>
        <p class="bc-desc">【最新バージョンのNext.jsとAppフォルダで、時短でNext.jsを習得。作りながら学ぶ実践形式】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/use-nextjs-in-the-same-wifi-network">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/use-nextjs-in-the-same-wifi-network)

---

# Next.js 13のコード変更点（パス取得／リダイレクト／リクエストbodyの解析など）

URL: https://monotein.com/blog/nextjs-version-13-migration
公開日: 2023.05.18
概要: Next.js 13ではReactサーバーコンポーネントがデフォルトで導入されたことで、v12までで使われていたコードからの変更点が多くなっています。 本記事ではv12からv13へのマイグレーション中に書き換えた変更点を紹介します。

## Next.js v13の変更点

Next.js 13ではReactサーバーコンポーネント採用によりコードの変更点が多くなりました。

本記事では、私が個人的に運用している小規模サイトで、Next.js v12からv13へマイグレーションする中で加えたコードの変更を箇条書きで紹介します。

なお、本記事よりも細かくAppフォルダ導入による変更点を知りたい方は下記記事をご覧ください。

<div class="rich-card-link">
<a href="/blog/nextjs-app-folder-new-things-list">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-121.png)

</div>
<div class="r-card-text">
Next.js Appフォルダでの変更点を20個、時短で紹介
</div>
</div>
</a>
</div>

Next.jsバージョン13で導入されたAppフォルダを使った最新のNext.js開発に興味のある方は、今月（2023年6月）リリースした下記書籍を参考にしてください。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
    <img class="bc-cover" src="/images/commonImg/nextbook.svg" alt="はじめてつくるNext.jsサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるNext.jsサイト</p>
        <p class="bc-desc">【最新バージョンのNext.jsとAppフォルダで、時短でNext.jsを習得。作りながら学ぶ実践形式】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-version-13-migration">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-version-13-migration)

## Next.js v13でパス取得

従来は次のように書いていました。

```js
import { useRouter } from "next/router"

const Hello = () => {
    const router = useRouter()
    console.log(router.asPath)     // /blog/first-article
    
    return(
        <div>
            ...
```
Next.js v13では次のようになります。

```js
import { usePathname } from "next/navigation"

const Hello = () => {
    const pathname = usePathname()
    console.log(pathname)  // /blog/first-article

    return(
        <div>
            ...
```

## Next.js v13でリダイレクト

従来は次のように書いていました。

```js
import { useRouter } from "next/router"

const Hello = () => {
    const router = useRouter()
    router.push("/success")
    router.replace("/success")
    
    return(
        <div>
            ...
```

Next.js v13では次のようになります。

```js
import { useRouter } from "next/navigation"

const Hello = () => {
    const router = useRouter()
    router.push("/success")
    OR
    router.replace("/success")

    return(
        <div>
            ...
```

## Next.js v13のAPIルート

従来は次のように書いていました。

```js
/pages/api/hello.js

export default function hello(req, res){
    return res.json("Hello!")
}
```

Next.js v13ではAppフォルダに合わせてフォルダ構成とコードが変わり、次のようになります。

```js
/app/api/hello/route.js

import { NextResponse } from "next/server"

export async function GET(request) {
    return NextResponse.json("Hello!")
}
```

## Next.js v13でリクエストbodyを解析

従来は次のように書いていました。

```js
/pages/api/hello.js

export default function hello(req, res){
    console.log(req.body)     // リクエストbodyの中身が表示
    return res.json("こんにちは")
}
```

Next.js v13では次のようになります。

```js
/app/api/hello/route.js

import { NextResponse } from "next/server"

export async function POST(request) {
    const reqBody = await request.json()
    console.log(reqBody)     // リクエストbodyの中身が表示
    return NextResponse.json("Hello!")
}
```

v13の変更点が分かったところで、現在のNext.jsの標準的な開発スタイル（AppフォルダでのRSC・Server Actionsの活用など）を一本でまとめたガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-version-13-migration">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-version-13-migration)

---

# Next.jsビギナー向け入門書（v13／Appフォルダ）最新版を発売

URL: https://monotein.com/blog/release-book-nextjs-version-13-app-folder
公開日: 2023.05.12
概要: Next.jsバージョン13とAppフォルダを使った現時点で唯一のNext.js入門書。2時間程度でストレスなく終えられることをコンセプトに書かれているので、ビギナーでも挫折することなく進められます。

## Next.jsビギナー向け書籍リリース
最新版のNext.jsバージョン13と、本バージョンで導入されたAppフォルダを使ったビギナー向け入門書を本日リリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
    <img class="bc-cover" src="/images/commonImg/nextbook.svg" alt="はじめてつくるNext.jsサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるNext.jsサイト</p>
        <p class="bc-desc">【最新バージョンのNext.jsとAppフォルダで、時短でNext.jsを習得。作りながら学ぶ実践形式】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/release-book-nextjs-version-13-app-folder">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/release-book-nextjs-version-13-app-folder)

## 全面的な書き直し（Appフォルダ採用）
私がNext.jsの書籍をはじめてリリースしたのは2021年です。

2021年発売の初版時点でのNext.jsの最新版がバージョン10で、バージョン11、12と上がるたびに書籍の修正や書き直しをしてきましたが、今回はもっとも大きな変更となり、全面的に書き直しました。

それはバージョン13からフォルダ構成が大きく変わり、従来の`pages`フォルダがなくなって`app`フォルダに移行したためです。

それに合わせてデータ取得の方法も大きく変わりました。

これらの変化を盛り込むために、全面的に書き直しをしたのが本書になります。

## これが2度目のリリース
実は私はすでにNext.jsバージョン13を使った同名書籍を昨年末にリリースしています。

しかしその時点ではまだ`app`フォルダは`experimental（実験版）`であり、どれほど普及するのか未知数だったため、本の内容にも大きな変更は加えず、従来の`pages`フォルダを使ったコードで解説をしていました。

しかし今月（2023年5月）始めにリリースされたNext.js v13.4で`app`フォルダが`stable（安定版）`となったため、内容をすべてこの新しい`app`フォルダに準拠したものに書き改めました。

本書ではバージョン13で導入された下記の項目をカバーしています。

―`app`フォルダを使った新しいルーティング

―`generateStaticParams`を使った新しいパス操作

―廃止された`getStaticProps`に変わる新しいデータ取得の方法

―Reactサーバーサイドコンポーネント

―新しいAPIルート

―メタデータの追加

---

また本書の前バージョンまでは、マークダウンファイルの読み込みにWebpackの`require.context(...`を使っていましたが、本書からはNode.jsネイティブモジュールの`fs`を使っています。

## ビギナー向けの唯一の書籍
私の他の本にも共通する基本的なコンセプトを本書でも踏襲しています。

つまり、2時間程度でストレスなく、かつ挫折することなく終えられること。

そのため内容を詰め込みすぎず、また専門用語もできるだけ避けて書かれています。

今日の時点では、Next.jsバージョン13とAppフォルダを使った日本語の解説書はまだ出ていないので、本書が最新のNext.jsを学べる唯一の書籍です。

どうぞご利用ください。

以下目次です。

---

はじめに

**第１章　基礎編**\
Reactフレームワークについて\
ターミナルの使い方\
Node.js\
npm\
VS Code\
エラーが発生した場合の対処方法

**第２章　開発編　その１**\
create-next-appのダウンロード\
create-next-appの中身\
Next.jsを動かす\
create-next-appのクリーンアップ\
Reactの書き方\
appフォルダ\
Linkの使い方\
フォルダ構成\
記事一覧ページの作成\
記事ページの作成　その１（概要）\
記事ページの作成　その２（ひな形フォルダ／ファイル作り）\
記事ページの作成　その３（slugの生成と登録）\
記事ページの作成　その４（データを読み込む）

**第３章　開発編　その２**\
必要なファイルのダウンロード\
next/image\
Indexページの画像\
記事一覧ページの画像\
記事ページの画像\
コンタクトページの作成\
共通コンポーネントの作成\
Layoutコンポーネント\
CSSの適用

**第４章　デプロイ**\
Vercel\
終わりに

**第５章　ブラッシュアップ**\
この章ですること\
404ページの追加\
コンタクトフォーム\
前後のブログ記事へと移動する\
記事一覧ページを分割する（ページネーション）\
メタデータの設定\
APIルート\
Reactサーバーコンポーネント\
関連書

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/release-book-nextjs-version-13-app-folder">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/release-book-nextjs-version-13-app-folder)

---

# 電子書籍を紙の本で読めるようになりました

URL: https://monotein.com/blog/publishing-paperback-version
公開日: 2023.04.29
更新日: 2023.12.07
概要: 「はじめてつくるReactアプリ with TypeScript」や「はじめてつくるバックエンドサーバー」を紙の本で読めるようになりました。

## 紙の書籍の販売開始
これまで私はプログラミングに関するいくつかの電子書籍を発売していますが、時折り「電子書籍ではなく紙の本で読みたい」という声をいただくことがありました。

そこで今回、以下の本のペーパーバック版（紙の書籍）の販売を開始しました。

サイズは持ち運びのしやすいA5（一般的なビジネス書のサイズ／14.8 × 21cm）、全ページフルカラーの印刷です。

2023年12月時点では下記の本がご利用いただけます。

---

<a target="_blank" rel="noopener" href="https://amazon.co.jp/dp/B0CPL9ZLKS">
<div class="img-border img40percent" style="padding-top: 30px;">

![nextbook-app-fullstack-1.svg](../../images/commonImg/nextbook-app-fullstack-1.svg)

</div>
</a>

[【Amazonで見る】](https://amazon.co.jp/dp/B0CPL9ZLKS)

---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/gp/product/B0C2RTN9FC">
<div class="img-border img40percent" style="padding-top: 30px;">

![reactbook](../../images/commonImg/reactbook.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/gp/product/B0C2RTN9FC)

---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/gp/product/B0C2SQ218G">
<div class="img-border img40percent" style="padding-top: 30px;">

![reactbook-ts](../../images/commonImg/reactbook-ts.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/gp/product/B0C2SQ218G)

---


<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C2S9T9RD">
<div class="img-border img40percent" style="padding-top: 30px;">

![reactbook2](../../images/commonImg/reactbook2.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C2S9T9RD)

---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C2ST1DQB">
<div class="img-border img40percent" style="padding-top: 30px;">

![reactbook2-ts](../../images/commonImg/reactbook2-ts.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C2ST1DQB)

---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C6VZ2WHC">
<div class="img-border img40percent" style="padding-top: 30px;">

![nextbook](../../images/commonImg/nextbook.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C6VZ2WHC)


---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/gp/product/B0C2S7MKB8">
<div class="img-border img40percent" style="padding-top: 30px;">

![nodebook-intro](../../images/commonImg/nodebook-intro.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/gp/product/B0C2S7MKB8)

---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C481K5HJ">
<div class="img-border img40percent" style="padding-top: 30px;">

![nodebook-advanced](../../images/commonImg/nodebook-advanced.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C481K5HJ)

---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C6BSSC7L">
<div class="img-border img40percent" style="padding-top: 30px;">

![nextbook2-1.svg](../../images/commonImg/nextbook2-1.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C6BSSC7L)

---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C5YQLBYS">
<div class="img-border img40percent" style="padding-top: 30px;">

![mern-book-1.svg](../../images/commonImg/mern-book-1.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C5YQLBYS)

---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C6BM13J5">
<div class="img-border img40percent" style="padding-top: 30px;">

![gatsbybook.svg](../../images/commonImg/gatsbybook.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C6BM13J5)

---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C6BM4H24">
<div class="img-border img40percent" style="padding-top: 30px;">

![proxyserver-book.svg](../../images/commonImg/proxyserver-book.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C6BM4H24)

---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C47X6TVB">
<div class="img-border img40percent" style="padding-top: 30px;">

![vuebook](../../images/commonImg/vuebook.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C47X6TVB)

---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C47Q3TKX">
<div class="img-border img40percent" style="padding-top: 30px;">

![jsbook](../../images/commonImg/jsbook.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C47Q3TKX)

---

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C5PCYG7N">
<div class="img-border img40percent" style="padding-top: 30px;">

![jsbook](../../images/commonImg/nuxtbook.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C5PCYG7N)



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/publishing-paperback-version">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/publishing-paperback-version)

---

# Next.jsバージョン13の変更点を時短で解説

URL: https://monotein.com/blog/nextjs-v13-new-features
公開日: 2023.04.19
更新日: 2023.05.18
概要: Next.js v13のappフォルダ、layout、getStaticPropsの廃止、getStaticPathsに変わる新API、generateStaticParamsなどをコードを見ながら解説します。

## Next.js v13のAppフォルダ
Next.jsバージョン13ではAppフォルダが導入され、これによってルーティングやデータ取得の方法が大きく変わりました。

本記事ではその変更点をコードを見ながら紹介します。

よりくわしくAppフォルダを使った最新のNext.jsについて知りたい方は、先日リリースした下記書籍を参考にしてください。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
    <img class="bc-cover" src="/images/commonImg/nextbook.svg" alt="はじめてつくるNext.jsサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるNext.jsサイト</p>
        <p class="bc-desc">【最新バージョンのNext.jsとAppフォルダで、時短でNext.jsを習得。作りながら学ぶ実践形式】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

なお本記事では全般的な「大きな」変更点について紹介しています。パス取得やリダイレクトのコード、apiフォルダといった個別的な「小さな」変更点は次の記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/nextjs-app-folder-new-things-list">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-121.png)

</div>
<div class="r-card-text">
Next.js Appフォルダでの変更点を20個、時短で紹介
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-v13-new-features">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-v13-new-features)

## v13のインストール
最新版のNext.jsのインストールから始めましょう。ターミナルを開いて任意のフォルダへ移動し、次のコマンドでNext.jsをインストールしてください。

```shell
npx create-next-app@latest nextjs13-app-test
```

最後の`@latest`によって、その時点での最新版がインストールされます。フォルダ名はここでは`nextjs13-app-test`としています。

インストール開始前に次のような質問が出ます（2023年5月現在）。

```shell
? Would you like to use TypeScript with this project? … No / Yes
? Would you like to use ESLint with this project? … No / Yes
? Would you like to use Tailwind CSS with this project? … No / Yes
? Would you like to use `src/` directory with this project? … No / Yes
? Use App Router (recommended)? › No / Yes
? Would you like to customize the default import alias? › No / Yes
```

「Yes」か「No」を矢印キーで選択して「Enter」で決定します。TypeScript、ESLint、Tailwind CSS、`src` directory利用の質問には「No」を選択してください。そして「Use App Router (recommended)」の質問には「Yes」を選ぶことで、v13の新機能`app`フォルダが利用できるようになります。最後の「customize the default import alias」は今回重要ではないので「No」を押して進んでください。

インストールが完了したらVSコードで開きましょう。`package.json`を見ると、`"next": "13.x.x"`とあり、Next.jsのversion 13がインストールされているのがわかります（執筆時点では`"next": "13.3.0"`）。

## appフォルダ
v13ではフォルダ構成の方法に根本的な変更が加えられました。なお現時点（2023年4月）ではこの機能はまだ「experimental（実験段階）」ですが、今後はこれがデフォルトになっていくと考えられます。

（**5月4日にリリースされたNext.js v13.4よりstable（安定版）となりました）*

まず`next.config.js`を見てください。

```js
// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig
```

`experimental`という文字が見え、`appDir`つまり「app Directory（appフォルダ）」機能が追加されているのがわかります。

次にフォルダ構成を見ると、最初に気がつくのは`app`フォルダのあることです。

<div class="img-border">

![pic1.jpg](../../images/singleBlogPageImages/blogArticleImages/blog115/pic1.jpg) 

</div>

従来までは`pages`フォルダ内に`about.js`、`contact.js`といったような各ページを作ってきましたが、`app`フォルダでは各ページ毎にひとつフォルダを作り、その中に`page.js`というファイルを作る構成となります。

表にすると以下のようになりますが、実際に試した方がわかりやすいのでコードを見ながら解説していきます。

|   URL     | **従来**|**v13**|
| :------:| :------: |:------:|
|/| /pages/index.js |  /app/page.js|
|/about | /pages/about.js |/app/about/page.js |
|/contact | /pages/contact.js | /app/contact/page.js |

まず`app/page.js`を見てください。これは従来の`pages/index.js`にあたります。

最初に`/about`ページを作ってみましょう。`app`フォルダ内に`about`というフォルダを作ります。

<div class="img-border">

![pic2.jpg](../../images/singleBlogPageImages/blogArticleImages/blog115/pic2.jpg) 

</div>

この中にファイル`page.js`作ります。

<div class="img-border">

![pic3.jpg](../../images/singleBlogPageImages/blogArticleImages/blog115/pic3.jpg) 

</div>

そこに次のコードを打ってください。普通のReactのコードです。

```js
// app/about/page.js

const About = () => {
    return (
        <h1>Aboutページ</h1>
    )
}

export default About
```

保存し、Next.jsを次のコマンドで起動しましょう。

```shell
npm run dev
```

`http://localhost:3000/about`にアクセスするとAboutページが開きます（CSSスタイルとして`globals.css`が当たっています）。

同じ要領でコンタクトページを作ってみましょう。まず`contact`フォルダを`app`フォルダ内に作ります。

<div class="img-border">

![pic4.jpg](../../images/singleBlogPageImages/blogArticleImages/blog115/pic4.jpg) 

</div>

その中に`page.js`ファイルを作りましょう。

<div class="img-border">

![pic5.jpg](../../images/singleBlogPageImages/blogArticleImages/blog115/pic5.jpg) 

</div>

次のコードを打ちます。

```js
// app/contact/page.js

const Contact = () => {
    return (
        <h1>Contactページ</h1>
    )
}

export default Contact
```

保存して、`http://localhost:3000/contact`にアクセスするとContactページができているのがわかります。

ここまでで、従来のようにファイル名ではなく、フォルダ名がページのURLと対応しているのがわかりました。

従来のNext.jsの動的ページで使った特殊な名前を持つファイル、`[slug].js`の作り方も発想としては同じです。`[slug]`という名前をファイルではなくフォルダに使います。実際に確認してみましょう。

まず`blog`フォルダを作り、その中に`page.js`を作ります。

<div class="img-border">

![pic6.jpg](../../images/singleBlogPageImages/blogArticleImages/blog115/pic6.jpg) 

</div>

そこに次のコードを打てば`/blog`ページができます。

```js
// app/blog/page.js

const Blog = () => {
    return (
        <h1>Blogページ</h1>
    )
}

export default Blog
```

`blog`フォルダの中に`[slug]`フォルダを作ってください。

<div class="img-border">

![pic7.jpg](../../images/singleBlogPageImages/blogArticleImages/blog115/pic7.jpg) 

</div>

その中に`page.js`ファイルを作ります。

<div class="img-border">

![pic8.jpg](../../images/singleBlogPageImages/blogArticleImages/blog115/pic8.jpg) 

</div>

そこに次のコードを打ちます。

```js
// app/blog/[slug]/page.js

const SingleBlog = () => {
    return (
        <h1>SingleBlogページ</h1>
    )
}

export default SingleBlog
```

保存します。URL欄の`http://localhost:3001/blog/`の`/blog/`以下にどの文字列をつなげても、いま作ったページが表示されるようになります。たとえば`http://localhost:3001/blog/aabbcc`や`http://localhost:3001/blog/xxyyzz`などです。

なおこのページでURLのパラメータを取得するには次のようにします。

```js
// app/blog/[slug]/page.js

const SingleBlog = (props) => {     // 追加
    console.log(props.params.slug)     // 追加
    return (
        <h1>SingleBlogページ</h1>
    )
}

export default SingleBlog
```

`props`に含まれた`params`内部の`slug`で、URLのパラメーターを取得できます。なおここで`slug`となっているのはフォルダ名が`[slug]`であるからで、もしフォルダ名が`[id]`や`[abc]`の場合、それぞれ`props.params.id`、`props.params.abc`となります。

## Layoutコンポーネント
従来までサイト全体に適用したいスタイルなどは`_app.js`に書き加えていましたが、v13では`app`フォルダ内に`layout.js`というファイルを作ると、それがサイト全体に適用されます。

現在`app`フォルダを見ると、すでに`layout.js`があり、これがサイト全体で適用されています。本当に適用されているのか確認したいので、次のように余分なタグを書き加えてみましょう。

```js
// app/layout.js

import './globals.css'

export const metadata = {
  title: 'Create Next App',
  description: 'Generated by create next app',
}

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body><h1>テスト</h1>{children}</body>     // 追加
    </html>
  )
}
```

保存して`/about`、`/contact`などにアクセスすると、「テスト」という文字が表示され、たしかに`layout.js`ファイルが全ページに適用されているのがわかります。

しかし一部のページでは別のレイアウトを適用したいというケースもあります。その場合はどうすればいいのでしょうか。

実はページ毎に作ったフォルダの中に`layout.js`を作ると、それがフォルダ内のすべてのページに適用されます。試してみましょう。

`blog`フォルダ内に`layout.js`を作ります。

<div class="img-border">

![pic9.jpg](../../images/singleBlogPageImages/blogArticleImages/blog115/pic9.jpg) 

</div>

次のコードを打ちます。

```js
// app/blog/layout.js

export default function BlogLayout({ children }) {
    return (
        <body>
            <div>
                <h1>ブログページレイアウト</h1>{children}
            </div>
        </body>
    )
}
```

保存して`http://localhost:3000/blog`を開くと、`app/layout.js`のレイアウトではなく、いま作った`app/blog/layout.js`が適用されているのがわかります

`http://localhost:3000/blog/xyz`を開いてもそれが適用されているので、`/blog/`以下のページにはすべて`blog`フォルダ内の`layout.js`が適用されているのがわかります。

## getStaticPathsとgetStaticPropsの変更点
`app`フォルダには[React Server Components](https://nextjs.org/docs/getting-started/react-essentials#server-components)という仕組みが使われているため、`app`フォルダ内では`getStaticPaths`と`getStaticProps`が使えなくなりました。`app`フォルダ内で動的データをあつかう新しいコードの書き方の例を紹介します。

まず準備として、ダミーデータの入った`data`フォルダとそのデータ取得のための`utils`フォルダを拙著『[はじめてつくるNext.jsサイト](https://www.amazon.co.jp/dp/B0C7746ZC4)』の下記完成見本コードよりダウンロードし、`app`フォルダ内に配置してください。

---

完成見本コード: [https://github.com/mod728/nextjs-book-portfolio-site](https://github.com/mod728/nextjs-book-portfolio-site)

<div class="img-border">

![pic10.jpg](../../images/singleBlogPageImages/blogArticleImages/blog115/pic10.jpg) 

</div>

次にマークダウンファイルを扱うためのパッケージをインストールしましょう。

```shell
npm install raw-loader gray-matter
```

そして`next.config.js`に`raw-loader`を使うコードを書き加えます。

```js
// next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: true,
  },
  // ⬇追加
  webpack: function (config) {
    config.module.rules.push({
        test: /\.md$/,
        use: "raw-loader",
    })
    return config
  },
  // ⬆追加
}

module.exports = nextConfig
```

以上で準備が完了です。

---

URLの生成・登録に使われる`getStaticPaths`の新しいバージョンとして導入されたのが`generateStaticParams`です。次のように書きます。


```js
// app/blog/[slug]/page.js

import { getAllBlogs } from "../../utils/mdQueries"

const SingleBlog = () => {
    return (
        <h1>SingleBlogページ</h1>
    )
}

export default SingleBlog

export async function generateStaticParams() {
    const { orderedBlogs } = await getAllBlogs()
    const paths = orderedBlogs.map((orderedBlog) => `/${orderedBlog.slug}`)
    return paths
}
```

`getStaticPaths`とともに、ページで表示するデータ取得のために使っていたのが`getStaticProps`でした。

`app`フォルダ内では`getStaticProps`は廃止され、データに直接アクセスする方法（下記例）や、JavaScriptの`fetch()`でデータ取得ができるようになっています。コード例として次のようになります。なお非同期処理の`async`を書き忘れないようにしましょう。

```js
// app/blog/[slug]/page.js

import { getAllBlogs, getSingleBlog } from "../../utils/mdQueries"

const SingleBlog = async(props) => {
    const { singleDocument } = await getSingleBlog(props)
    console.log(singleDocument)
    return (
        <h1>SingleBlogページ</h1>
    )
}

export default SingleBlog

export async function generateStaticParams() {
    const { orderedBlogs } = await getAllBlogs()
    const paths = orderedBlogs.map((orderedBlog) => `/${orderedBlog.slug}`)
    return paths
}
```

---

さらにくわしく知りたい方はビギナー向けの下記書籍を参考にしてください。

2時間程度でストレスなく、かつ挫折することなく終えられるビギナーに優しい内容になっています。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
<div class="img-border img40percent" style="padding-top: 30px;">

![nextbook](../../images/commonImg/nextbook.svg)

</div>
</a>

Next.js 13の変更点が分かったら、現在の標準的な開発スタイル（AppフォルダのRSC・Server Actionsを活用した開発フロー）をまとめたガイドもあわせて確認しておきましょう▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-v13-new-features">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-v13-new-features)

---

# GatsbyではなくNext.jsを選ぶ理由

URL: https://monotein.com/blog/why-i-chose-nextjs-over-gatsby
公開日: 2022.12.23
概要: GatsbyよりもNext.jsを選ぶようになった理由や、next/imageの使いにくさに関して思うところを書きます。

## Next.jsとGatsby入門書を書いてみて
私は昨年よりGatsbyとNext.jsの入門書を書いていますが、先日最新バージョンに準拠して書き直したものをリリースしました。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
    <img class="bc-cover" src="/images/commonImg/nextbook.svg" alt="はじめてつくるNext.jsサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるNext.jsサイト</p>
        <p class="bc-desc">【最新バージョンのNext.jsとAppフォルダで、時短でNext.jsを習得。作りながら学ぶ実践形式】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0BNQBDHFH">
    <img class="bc-cover" src="/images/commonImg/gatsbybook.svg" alt="はじめてつくるGatsbyサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるGatsbyサイト</p>
        <p class="bc-desc">【人気フレームワークGatsbyを2時間でマスター。ハイパフォーマンスのウェブサイトを時短で試してみよう！】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

そこでこの2つのフレームワークについての印象の変化を、技術的な話は少なくして書いてみます。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-i-chose-nextjs-over-gatsby">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-i-chose-nextjs-over-gatsby)

## Gatsbyを使わなくなった理由
私がGatsbyをはじめて触ったのは数年前のゴールデンウィークで、その時のGatsbyはバージョン2。

最初の印書はページ遷移がものすごく速いことで、そこには驚きというより感動のようなものすらありました。

それから趣味でも仕事でもGatsbyばかり使うようになるのですが、当然その一方でNext.jsのことも知っていました。

そのNext.jsの第一印象はというと、「....たしかに複雑なこと（API開発、サーバーサイドレンダリングなど）ができるのはわかるけれども、そういった機能は必要ないな。そしてSSGとして使うにしてもGatsbyよりも遅いな」といった感じです。

なので依然としてGatsbyばかり使っていたのですが、そのうちやや感情的なつかいにくさを感じはじめました。

「感情的」と書いたのは、この「使いにくさ」の理由がコードの書き方やGatsby自体の仕組みといった技術的なこととは関係ないからです。

その一つが、Gatsbyのインストール時にwarningやerrorがターミナルに出ること。

ここには私のコンピューターのNode.jsバージョンなども関係していたと思われますし、また`npm audit fix`などを実行してもいいのですが、最初のインストール時にwarningとerrorが出ていると、今後はますます増えていきそうで、あまり気持ちのいいものではありません。

下のように最初は`found 0 vulnerabilities`とターミナルに出てもらいたいものです。

<div class="img-border">

![novulna.jpg](../../images/singleBlogPageImages/blogArticleImages/blog114/novulna.jpg) 

</div>

またいま一つはGatsbyのプラグインの仕組みです。

プラグインはGatsbyでしか使えない専用のものですが、Gatsbyのバージョンが上がるたびに動かないものが出てきました。

公式がサポートしているものはバージョンアップに合わせて上がりますが、そうではないもの（コミュニティが開発しているもの）はやはり遅れがあったり、あるいは開発がストップしているものもあります。

ここには「Gatsbyでしか使えない」というプラグイン自体の裾野の狭さにも一因があるのでしょう。

また小さなことでは、`gatsby develop`で立ち上げるときにかかる時間です。

バージョンが3、4、5と上がるにつれてこのスピードも短縮されてきましたが、例えば瞬時に立ち上がるNext.jsと比べると、やはりかなり時間がかかるといえます。

---

そういう中で私は徐々にGatsbyではなくNext.jsを使うようになりました（SSGメイン）。

久しぶりにNext.jsを使って最初に気づいたのは、ページ遷移のスピードです。

一年ほど前はページ遷移にもっと時間がかかっていましたが、今ではGatsbyと同じようにほぼ瞬間的に切り替わります。

初回インストール時にはwarningやerrorは出ないですし、Vercelというプラットフォームも提供している企業が開発しているという安心感もあります。

なので最近はNext.jsばかり使っていますが、Gatsbyの方が使いやすい思うのは、マークダウンブログまわりの機能です。

また画像の扱い方にもNext.jsでは難を覚える時があるので、次はその点について書きます。

## next/imageの使いにくさ
Next.jsには画像を専用で扱うコンポーネント`next/image`があります。

`next/image`について調べると、日本語でも英語でもそのベネフィットに注目した情報を見る一方で、その使いにくさにふれたものはなぜかあまり見かけません。

ここで言っている「つかいにくさ」とは、具体的には`height`と`width`の設定がマストであることで、なぜこれを設定しないといけないのかが、`next/image`導入時より私には不明でした。

Gatsbyには「Gatsby Image」というものが「next/image」よりも前からありましたが、私はGatsby Imageの方が今も数倍使いやすいと感じています。

`next/image`で`height`と`width`の設定をしないといけないことに関して、英語の情報をあさると一部で出てきますが（[一例](https://www.reddit.com/r/nextjs/comments/vhujbf/nextjs_image_component_auto_width_and_height/)）、日本語の情報ではこのような「不満」は見かけません。

2021年にNext.js v10を使った「はじめてつくるNext.js」を出した時も、そして今回のv13への書き直し時もそうでしたが、実は一番時間を取られたのがこの`next/image`で画像をただしく表示させることでした。

`height`と`width`を使うと意図通りに画像が表示されないので、普通の`<img>`タグを使いたいと思うことが何度もありましたが、この本はNext.jsを紹介する教材のため`next/image`を使わないで済ますということはできません。

CSSの`object-fit: cover`や、`next/image`の`fill`といった、「王道」からはやや外れた、あまりストレートではないコードが一部使われているのはそのためです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-i-chose-nextjs-over-gatsby">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-i-chose-nextjs-over-gatsby)

---

# Next.jsビギナー向け入門書、最新版を発売【はじめてつくるNext.jsサイト】

URL: https://monotein.com/blog/release-books-nextjs-v13-gatsby-v5
公開日: 2022.12.21
更新日: 2023.6.2
概要: 一年半ほど前に初版をリリースした「はじめてつくるNext.jsサイト」を、2022年11月に発表された最新バージョンv13を使って書き直し、今回リリースしました。

## Next.js入門書「はじめてつくるNext.jsサイト」
一年半ほど前に初版をリリースした「はじめてつくるNext.jsサイト」を、2022年11月に発表された最新バージョンv13を使って書き直し、今回リリースしました。

（*2023年6月追記：全面的に書き直して再リリースしました。くわしくは<a target="_blank" rel="noopener" href="/blog/release-book-nextjs-version-13-app-folder">こちら</a>*）

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
<div class="img-border img40percent" style="padding-top: 30px;">

![nextbook](../../images/commonImg/nextbook.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C7746ZC4)

私がこれまで書いてきた本のように、本書もビギナー向けとなっているので、HTML／CSSの知識があればトライできる難易度です。

Next.jsは次に説明するGatsbyと合わせて「Reactフレームワーク」と呼ばれ、技術的にはReactの上に成り立っているものですが、その便利さと使い勝手のよさで実際の開発現場で使われる機会が非常に多いテクノロジーです。

なおこれまでにNext.jsバージョン10、バージョン12を使った教本をそれぞれ2021年3月と2022年5月に発売していますが、今回のバージョン13版では下記のような変更を本に加えています。

どれもNext.js本来のところに関係のない枝葉の部分です。Next.js自体により集中してもらうために変更しました。

---

• CSS Modulesをやめて普通のCSSを採用 

• `react-helmet`をやめて`next/head`を採用

• 画像まわりにいくつかのCSSコードを追加

---

**「はじめてつくるNext.js」目次**

**• 第１章　基礎編**

Reactフレームワークとは？

ターミナルの使い方

VS Code
エラーが発生した場合の対処方法

**• 第２章　開発編　その１**

create-next-appのダウンロード

create-next-appの中身

Next.jsを動かす
create-next-appのクリーンアップ

Reactの書き方

CSSスタイルのあて方

pagesフォルダ

Linkの使い方

記事一覧ページの作成

記事ページの作成　その１（概要）

記事ページの作成　その２（ひな形ファイル作り）

**• 第３章　開発編　その２**

next/image

Indexページの作成

記事一覧ページの作成

記事ページの作成

コンタクトページの作成

layout.jsの作成

**• 第４章　デプロイ**
Vercel

**• 第５章　ブラッシュアップ**

404ページの追加

コンタクトフォーム

前後のブログ記事へと移動する

記事一覧ページを分割する（ページネーション）

SEO

ファビコンの変更

APIルート

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/release-books-nextjs-v13-gatsby-v5">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/release-books-nextjs-v13-gatsby-v5)

## Gatsby入門書「はじめてつくるGatsbyサイト」
Next.jsと同じく、一年半ほど前に初版をリリースした「はじめてつくるGatsbyサイト」を、2022年10月に発表された最新バージョンv5を使って書き直し、リリースしました。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0BNQBDHFH">
<div class="img-border img40percent" style="padding-top: 30px;">

![gatsbybook](../../images/commonImg/gatsbybook.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0BNQBDHFH)

「はじめてつくるGatsbyサイト」では以下のようなことをカバーしています。

---

**• 第１章　基礎編**

Reactフレームワークとは？

ターミナルの使い方

エラーが発生した時の対処法

**• 第２章　開発編　その１**

スターターキットのダウンロード

スターターキットのクリーンアップ　その１

Gatsbyを動かしてみる

スターターキットのクリーンアップ　その２

Reactの書き方

CSSスタイルのあて方

pageフォルダ

Linkの使い方

記事一覧ページの作成

記事ページの作成　その１（概要）

記事ページの作成　その２（テンプレートファイル作り）

記事ページの作成　その３（slugの生成）

記事一覧ページと記事ページをつなげる

**• 第３章　開発編　その２**

Gatsby Image

index.jsの作成

blog.jsの作成

single-blog.jsの作成

contact.jsの作成

layout.jsの作成

**• 第４章　デプロイ**
Netlify

ファイルを最適化する

**• 第５章　ブラッシュアップ**

404ページの追加

Forms機能の使い方

ファビコンの追加

URLを変更する

前後のブログ記事へと移動する

記事一覧ページを分割する（ページネーション）

マークダウンの写真を表示する

SCSSの書き方（補足）

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/release-books-nextjs-v13-gatsby-v5">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/release-books-nextjs-v13-gatsby-v5)

---

# エラーの見つけ方と対処方法

URL: https://monotein.com/blog/how-to-find-and-fix-errors
公開日: 2022.11.27
更新日: 2026.3.31
概要: 本や動画などの教材を使って勉強している時に発生するエラーの最大の原因は、使用しているパッケージやソフトのバージョンが変わっているためです。なので、まずは教材で使われているバージョンを確認しましょう。

## エラーの見つけ方
教材の指示通りにコードを書いてきたのに、エラーが出たり意図通りに動かない状態になったとき。

その1番の原因は、パッケージのバージョンが異なるためです。

2番目の原因は、単純なスペルミス。

本記事ではこの2つのエラーの見つけ方と修正方法を紹介します。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-find-and-fix-errors">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-find-and-fix-errors)

## バージョン情報を確認する方法
アプリ開発では様々なパッケージ（npmパッケージ）を使います。

その中には、教材の発売後に新しいバージョンがリリースされているものも多いでしょう。

このバージョンアップの時、コードの書き方にも変更が加えられていると、教材の指示通りにコードを書いてもミスが出てしまいます。

そのため、エラーが出た場合は、まずパッケージのバージョンを疑いましょう。

バージョンの確認は、GitHubにある完成見本のコードの中の`package.json`ファイルで可能です。

`package.json`の`dependencies`に書かれている各パッケージのバージョンを見てください。

そして、手元で開発しているアプリの`package.json`の`dependencies`とを比較しましょう。

例えば、完成見本の`package.json`が次のようになっているとします。

<div class="img-border">

![packagejson1.jpg](../../images/singleBlogPageImages/blogArticleImages/blog111/packagejson1.jpg) 

</div>

そして手元のパソコンで開発しているアプリの`package.json`は、次のようになっているとします。

<div class="img-border">

![packagejson1.jpg](../../images/singleBlogPageImages/blogArticleImages/blog111/packagejson2.jpg) 

</div>

「mongoose」と「next」の右側の数字、つまりバージョンが異なっているのがわかります。

完成見本アプリの「mongoose」のバージョンは`6.5.4`、一方で手元のバージョンは`6.5.9`。

また、「next」は完成見本が`12.2.5`、手元では`13.0.0`となっています。

これは教材の発売後に新しいバージョンがリリースされたためです。

パッケージによって異なりますが、一般的に最初のドット`.`までの数字が変わっている場合（「next」のケース）には、コードの書き方も変化している可能性が高くなります。

一方で最初のドット`.`以降の数字が変わっている場合（「mongoose」のケース）は、そこまで大きな変化は加えられていないことが多い傾向にあります。

しかしどちらであれ、教材の指示通りのコードを書いてスムーズに進めていくには、完成見本のバージョンに合わせるのがベストです。

なので以下、バージョンを合わせる方法を紹介します。

---

アプリを一旦停止させましょう。

そして、ターミナルに次のコマンドを打って実行してください。

```shell
npm install next@12.2.5
```

これは「next」のバージョンを`12.2.5`に変更するコマンドです。

パッケージ名のあとに`@`を付け、インストールしたいバージョンを指定しています。

こうすると現在の`13.0.0`が`12.2.5`で上書きされるのです。

同じ要領で「mongoose」も次のようにしましょう。

```shell
npm install mongoose@6.5.4
```

こうすると、完成見本と同じバージョンの`6.5.4`が上書きでインストールされます。

（*なお`npm install next`や`npm install mongoose`のように、`npm install パッケージ名`というコマンドを実行すると、そのパッケージの最新バージョンが自動でインストールされます。）

## エラーのあるファイルと場所を特定する方法
上記の方法で、パッケージのバージョンが同じであることを確認してもまだエラーが出るとき。

その原因の大半は「単純なスペルミス」です。

例えばバッククオートを使うべきところに、シングル・クオテーションマークを使っている場合などです。

```js
// 正解（バッククオート）

`https://api.weatherapi.com/v1/current.json?key=b613`
```

```js
// 誤り（シングル・クオテーションマーク）

'https://api.weatherapi.com/v1/current.json?key=b613'
```

```js
// 誤り（ダブル・クオテーションマーク）

"https://api.weatherapi.com/v1/current.json?key=b613"
```

とはいえ、このような小さなミスを自分で発見するのは大変です。

そのため、まずどのファイルにミスがあるのかを特定し、次にそのファイルのどこにミスがあるのかを発見するという、2ステップを踏みましょう。

ここでは区切りのいいところまでコードが書けていることを前提に話を進めます。

<a target="_blank" rel="noopener" href="/present?magnet=react-study-guide-3-roadmap&from=/blog/how-to-find-and-fix-errors">

![image](../../images/commonImg/react-study-guide-3-roadmap.png)

</a>

⚫︎ <a target="_blank" rel="noopener" href="/present?magnet=react-study-guide-3-roadmap&from=/blog/how-to-find-and-fix-errors">monotein.com/present</a>

### エラーのあるファイルを特定する
問題のあるファイルを特定するために、下記の手順で完成見本のアプリのコードを手元のコンピューターにダウンロードし、起動させます。

---

１：完成見本のコードをGitHubからダウンロードする

２：`npm install`で必要なパッケージをインストールする（APIのURLやMongoDBなどのデータベースのURLも設定してください）

３：`npm run dev`や`npm start`などの起動コマンドでアプリを起動する

---

次に自分の開発しているアプリの任意のファイルのコード全体をコピーして、起動している見本アプリの同じファイルに貼り付けてください。

以下、例として`App.js`を使って具体的に解説します。

まず自分のアプリの`App.js`のファイル全体のコードをコピーしてください。

<div class="img-border">

![packagejson1.jpg](../../images/singleBlogPageImages/blogArticleImages/blog111/appjs-1.jpg) 

</div>

次に、起動している見本アプリの`App.js`のコード全体を消し、代わりにコピーしてきたコードを貼り付けます。

<div class="img-border">

![packagejson1.jpg](../../images/singleBlogPageImages/blogArticleImages/blog111/appjs-2.jpg) 

</div>

保存をしてアプリが正常に起動したら、自分の`App.js`のコードにミスはないことになります。

同じ作業をアプリ内の他のファイルでも繰り返します。

そうすると、ある時点で起動ができない時が来るので、そこでその直前にコピー＆ペーストしたファイルに何らかのミスがあると予想できます。

### エラーのある箇所を特定する
エラーのあるファイルが特定できた後、エラーの正確な場所を見つけるには次の2つの方法があります。

ひとつはAIを使う方法、もうひとつはコードの差分を表示するツールを使う方法です。

ChatGPTやGeminiなどのAIに、完成見本のファイルと、手元の自分のファイルをアップロード（もしくはコピペ）して、「違いを教えて」と聞きましょう。

この方法が現在では一番効率的です。

AIを使わない場合は差分ツールを使いましょう。

差分ツールは2つのコードを比較して、違いを表示するツールです。

同様のものはいくつもありますが、今回はブラウザで簡単に使える下記サイトを使いましょう。

[3docs.com/tools/code-diff](https://www.w3docs.com/tools/code-diff)

下記画像のように赤で囲った左側に完成見本のコード、青で囲った右側に自分のコードを貼り付けてください。

<div class="img-border">

![diff-site-1.jpg](../../images/singleBlogPageImages/blogArticleImages/blog111/diff-site-1.jpg) 

</div>

コードが比較され、異なる箇所がマークして表示されます。

<div class="img-border">

![diff-site-2.jpg](../../images/singleBlogPageImages/blogArticleImages/blog111/diff-site-2.jpg) 


</div>

以上がエラーを特定する方法になります。

<a href="/present?magnet=first-study-guide&from=/blog/how-to-find-and-fix-errors">

![image](../../images/commonImg/first-study-guide.png)

</a>

⚫︎ <a href="/present?magnet=first-study-guide&from=/blog/how-to-find-and-fix-errors">monotein.com/present</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-find-and-fix-errors">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-find-and-fix-errors)

---

# Next.jsサーバーでCORS問題が起きる時の解決方法

URL: https://monotein.com/blog/nextjs-vercel-server-cors
公開日: 2022.11.14
概要: Next.jsのサーバーとは異なるURLからリクエストをした時に起きるCORSを解決するコードを紹介。next.config.jsに次のコードを追加するだけで、CORSは解決します。

## Next.jsサーバーとCORS
Next.jsにコードを書いてVercelにデプロイすると簡単にサーバー機能を実現できるので、非常に便利です。

ここでNext.jsをフロントエンドとバックエンド両方に使っている場合、URLが同じなので特に問題は起きないですが、もしURLが別のフロントエンドからリクエストをする場合にはCORSの問題が起きます。

この解決のためには、下記のようにheadersに関する設定を`next.config.js`に追加してデプロイしましょう（ここではVercelへのデプロイを想定）。

```js
// next.config.js

const nextConfig = {
  reactStrictMode: true,
  // ⬇追加
  async headers() {
    return [
      {
        "source": "/(.*)",
        "headers": [
          { "key": "Access-Control-Allow-Credentials", "value": "true" },
          { "key": "Access-Control-Allow-Origin", "value": "*" },
          { "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
          { "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
        ]
      }
    ]
  },
  // ⬆追加
}

module.exports = nextConfig
```

Next.jsについてもっとくわしく知りたい方は、下記教本を参考にしてください。

最新のNext.js Appルータとともに、API（Route Handlers）、Supabase、JWT、Cloudinaryなどを使って本格的なフルスタックアプリを開発する方法を、ビギナー向けにわかりやすく紹介しています（2026年時点で最新のNext.jsバージョン16使用）。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0FYFXVMSF">
    <img class="bc-cover" src="/images/commonImg/nextbook-fullstack-v16-1.svg" alt="Next.jsでつくるフルスタックアプリ 前編（バックエンド開発）with Supabase" />
    <div class="bc-body">
        <p class="bc-title">Next.jsでつくるフルスタックアプリ</p>
        <p class="bc-desc">【最新のNext.jsバージョン16をつかった本格アプリの開発手法がわかる入門書。Route Handlers使用】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


CORSの解決後も、Next.jsの開発全体の流れを把握しておくと役立ちます。

RSC・Server Actions・デプロイ方法までまとめたNext.jsの入門ガイドはこちらです▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-vercel-server-cors">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-vercel-server-cors)

---

# 新書をリリースしました。「MERNスタックでつくるフルスタックアプリ　前編・後編」

URL: https://monotein.com/blog/book-release-mern-fullstack
公開日: 2022.08.06
更新日: 2022.10.15
概要: MERNスタックを使ってメルカリのようなフリマアプリを開発する新書「MERNスタックでつくるフルスタックアプリ」を出版しました。前編ではNode.js、Express、MongoDBを使ったバックエンド開発、後編ではReactを使ったフロントエンド開発を解説しています。

## MERNスタック
今回出版した本では、MongoDB、Express、Node.js、Reactの頭文字を並べたMERNスタックを使って、バックエンドとフロントエンドを持ったフルスタックアプリを開発する方法を解説しています。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0BJN4H1NF">
<div class="img-border img40percent" style="padding-top: 30px;">

![mern-book-1](../../images/commonImg/mern-book-1.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0BJN4H1NF)

これまで書いてきた本のように、本書もビギナー向けとなっているので、HTML／CSSの知識があればトライできる難易度です。

<div class="img-border">

![ranking](../../images/singleBlogPageImages/blogArticleImages/blog109/ranking.jpg)

</div>

数ヶ月前に出版した「Next.jsでつくるフルスタックアプリ」を読まれた複数の方から、「Next.jsをつかわないフルスタックアプリの開発方法を知りたい」という声を多数いただいたため、今回Reactフレームワークは使わずにMERNスタックだけで開発する本を書きました。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B09YWSHR58">
<div class="img-border img40percent" style="padding-top: 30px;">

![next-book2-1"](../../images/commonImg/nextbook2-1.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B09YWSHR58)

本書（前編・後編）では以下のようなことをカバーしています。

---

• JavaScriptの基礎

• React、Node.jsの基礎

• データベース（MongoDB）

• useState / useEffect

• カスタムフック（React）

• ログイン

• トークン（JSON Web Token）

• CRUD操作

• 画像のアップロード（Cloudinary）

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/book-release-mern-fullstack">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/book-release-mern-fullstack)

## 「MERNスタックでつくるフルスタックアプリ」目次

• 前編

第1章　基礎知識と開発ツールの準備

ウェブアプリケーションとは？

フロントエンドとバックエンド

CRUD操作

ReactとExpressを使う理由

ターミナルの使い方

第2章　バックエンド開発の準備

フォルダの準備とExpressのインストール

第3章　アイテム操作機能

アイテムの作成　その1

アイテムの作成　その2

アイテムの読み取り（アイテムをすべて）


アイテムの読み取り（アイテムをひとつ）

アイテムの修正

アイテムの削除

第4章　ユーザー登録とログイン機能

ユーザー登録機能

ログイン機能

ログイン状態の維持

ユーザーのログイン状態を判定する機能

誰がログインしているかを判定する機能

第5章　バックエンドのデプロイ

デプロイの準備

Gitのダウンロード

Herokuのアカウント作成とログイン

Heroku CLIのダウンロード

Herokuへのデプロイ

Herokuのスリープを防止する（補足）

---

• 後編

第6章　フロントエンド開発の準備とReactの使い方

アイテムデータの保存

create-react-appのインストール

コードのクリーンアップ

コードの書き方とスタイルの適用方法

第7章　ユーザー登録ページとログインページ

必要なフォルダとファイル

ユーザー登録ページ

ログインページ

複数の項目を含んだstateの書き方（補足）

第8章　アイテムページ

すべてのアイテムデータを読み取るページ

1つだけアイテムデータを読み取るページ

アイテムデータを作成するページ

アイテムデータを編集するページ

アイテムデータを削除するページ

ページの表示を制限する

スタイルの適用とコンポーネント

第9章　フロントエンドのデプロイ

バックエンドURLの修正

Netlifyの準備

_redirectsファイルの作成

buildプロセス

第10章　ブラッシュアップ

画像のアップロード

404ページ

タブ名を変える

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/book-release-mern-fullstack">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/book-release-mern-fullstack)

---

# 新しい本をリリースしました【はじめてつくるバックエンドサーバー発展編】

URL: https://monotein.com/blog/book-release-node-express-advanced
公開日: 2022.04.07
更新日: 2024.09.12
概要: Node.js、Express、MongoDBを使ってブログアプリを開発する実践的な内容の本をリリースしました。本書はビギナー向けにわかりやすく丁寧に解説することを心がけて書かれているので、HTML／CSSの学習が終わった人であればトライできる難易度になっています。

## *改訂版をリリース（2024年9月追記）

2024年9月に本書の改訂版を出しました。詳しくは下記記事をご覧ください。

<div class="rich-card-link">
<a href="/blog/update-node-book-2-advanced">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-154.jpg)

</div>
<div class="r-card-text">
【改訂版リリース】はじめてつくるバックエンドサーバー発展編
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/book-release-node-express-advanced">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/book-release-node-express-advanced)

## 新しい本のリリース
先日、新しいプログラミング教本を発売しました。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B09X56PSCQ">
<div class="img-border img40percent" style="padding-top: 30px;">

![nodebook-advanced](../../images/commonImg/nodebook-advanced.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B09X56PSCQ)

この本は去年書いた「はじめてつくるバックエンドサーバー基礎編」の続編にあたります。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B09HQZ1BW8">
<div class="img-border img40percent" style="padding-top: 30px;">

![nodebook-intro](../../images/commonImg/nodebook-intro.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B09HQZ1BW8)

「基礎編」では、Node.jsとExpressの基本的な事項を解説しながらサーバーがどのように働くのかを説明しましたが、本書では下記のようなブログアプリを作りながら進めるのでは、前書よりも実践的な内容となっています。

<div class="img-border">

![nodebook2-app-example](../../images/singleBlogPageImages/blogArticleImages/blog107/nodebook2-app-example.jpg)

</div>

[https://nodebook-advanced-blog.herokuapp.com](https://nodebook-advanced-blog.herokuapp.com)

## 本書を書いたきっかけ
本書のようなNode.jsとExpress、そしてデータベース（MongoDB）を使ったアプリの教本をずっと書きたいと思っていました。

私が人生で最初に作ったアプリがNode.js/Express/MongoDBを使ったものだったからです。

当時の私はHTMLとCSS、そしてReactが少しといった程度の知識で、次はサーバーサイドにトライしてみたいと思っていました。

しかしなかなかいいレベルの教材が見つかりません。

内容がつめ込まれすぎておらず、しかしビギナーにも優しく解説されているような教材を探していたのです。

そんなある日、英語のサイトでNode.js/Express/MongoDBでアプリを作る教材を見つけます。

いまなら数時間で終わる内容でしたが、当時の私には朝から晩までパソコンの前に座ってもやり終えるまでに一週間以上かかりました。

しかしその時間はとても濃厚で、満ち足りていたのを今でも覚えています。

毎日少しずつ新しい知識が増えて、小さなステップであっても自分が前に進んでいると感じられる喜びや充実感を、本当に久しぶりに味わったのがあの一週間でした。

ちょうどあれは3月の終わりから4月の頭にかけての春のころだったので、それから数年経った同じ時期に、同じような内容をあつかう教本を自分の手で書き、こうやって読者の方に届けられることを嬉しく思います。

私の使った英語の教本では、必ずしも必要でないパッケージが使われていたり、ファイル分割が途中で出てきてそのあとの説明が複雑になるなどのわかりづらさが多々ありました。

そういう不要と思われるところは削り、その代わり丁寧な説明を加えて、あの教材よりも質が高く一層わかりやすいものにしたのが今回の本で、読まれた方が当時の私の味わったようなポジティブで明るい気持ちになれば幸いです。

## 内容について
以下「基礎編」と「発展編」の目次を紹介します。

### 「はじめてつくるバックエンドサーバー　基礎編」

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B09HQZ1BW8">
<div class="img-border img40percent" style="padding-top: 30px;">

![nodebook-intro](../../images/commonImg/nodebook-intro.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B09HQZ1BW8)

• 第1章　基礎編

JSONデータの整形

ウェブサイトとウェブアプリケーションの違い

フロントエンドとバックエンドの違い

JSONデータとは？

ウェブアプリケーションが実行する操作（CRUD）

Node.jsとExpress

ターミナルの使い方

• 第2章　開発編（Node.js + Express）

フォルダとファイルの作成

package.jsonの作成

最初のコードを書いてみる

Expressのダウンロード

Expressのひな形コード

GETリクエスト（文字を返す）

GETリクエスト（JSONを返す）

GETリクエスト（HTMLを返す）

POSTリクエスト

POSTリクエストのデータを保存する

PUTリクエスト

DELETEリクエスト

• 第3章　デプロイ編

デプロイの準備

Gitのダウンロード

Herokuのアカウント作成とログイン

Heroku CLIのダウンロード

Herokuへのデプロイ

• 第4章　開発編（Node.js）

フォルダとファイルの作成

GETリクエスト

reqの中身

ルート（URL）の指定

HTTPメソッドの判別

• 第5章　補足

セッション管理

データベース

MVCモデル

API開発ツール

HTMLテンプレートエンジン

近年のフロントエンド開発

### 「はじめてつくるバックエンドサーバー　発展編」

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B09X56PSCQ">
<div class="img-border img40percent" style="padding-top: 30px;">

![nodebook-advanced](../../images/commonImg/nodebook-advanced.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B09X56PSCQ)

• 第1章　基礎編

JSONデータの整形

ウェブサイトとウェブアプリケーションの違い

フロントエンドとバックエンドの違い

ウェブアプリケーションが実行する操作（CRUD）

• 第2章　ブログ機能作り

フォルダとファイルの作成

package.jsonの作成

ブログのデータ作成機能

MongoDBのセットアップ

MongoDBにデータを書き込む

MongoDBのデータを読み取る（すべての記事データ）

MongoDBのデータを読み取る（記事データを1つ）

MongoDBのデータを修正する

MongoDBのデータを削除する

データをブラウザで表示・操作する

• 第3章　ログイン機能作り

ユーザー登録機能

ログイン機能

ログイン状態を維持する（セッション）

コードの整理とスタイル

• 第4章　デプロイ

デプロイの準備

Gitのダウンロード

Renderへのサインアップとログイン

Renderへのデプロイ

本書を書くきっかけ

• 第5章　ブラッシュアップ

存在していないページ

MVCアーキテクチャを採用したファイル分割

近年のフロントエンド開発

本書を読んだあとの勉強の進め方

著者について

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/book-release-node-express-advanced">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/book-release-node-express-advanced)

---

# Next.jsにページネーションをNPMパッケージなしで追加する方法

URL: https://monotein.com/blog/nextjs-pagination
公開日: 2021.12.25
更新日: 2023.6.7
概要: 最初にマークダウンのブログ機能を追加し、次にページネーションの作り方を解説していきます。

## ページネーションとは？
記事数が増えたときに、1ページあたりに表示する記事の数を5つや10つなどに制限したいときに使うものがページネーションです。

<p style="padding: 5%; margin: 0 20px 16px; border: 1px solid rgb(187, 187, 187); border-radius: 5px;">
<span style="background-color: #5dbcff; color: #fff; padding: 10px; border-radius: 5px; margin: auto 1.5%">1</span>
<span style="background-color: #5dbcff; color: #fff; padding: 10px; border-radius: 5px; margin: auto 1.5%">2</span>
<span style="background-color: #5dbcff; color: #fff; padding: 10px; border-radius: 5px; margin: auto 1.5%">3</span>
<span style="background-color: #5dbcff; color: #fff; padding: 10px; border-radius: 5px; margin: auto 1.5%">4</span>
<span style="background-color: #5dbcff; color: #fff; padding: 10px; border-radius: 5px; margin: auto 1.5%">5</span>
</p>

本記事ではまず最初にNext.jsにマークダウンのブログ機能を実装し、その後ページネーションを作ります。

ロジック部分の説明だけなので、スタイルは各自お好みで適用してください。

なお前後の記事へと移動するリンクの作り方は、こちらの記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/nextjs-blog-prev-next">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-98.png)

</div>
<div class="r-card-text">
Next.jsのブログに前後記事へのリンクを追加する方法
</div>
</div>
</a>
</div>


Next.jsバージョン13で導入されたAppフォルダを使った最新のNext.js開発に興味のある方は、今月（2023年6月）リリースした下記書籍を参考にしてください。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
<div class="img-border img40percent" style="padding-top: 30px;">

![nextbook](../../images/commonImg/nextbook.svg)

</div>
</a>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-pagination">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-pagination)

## マークダウンブログ機能の作成
まずNext.jsにマークダウンのブログ機能を追加します。

内容は下の記事で解説したものなので、すでに読んでいる人はパスしてください。

<div class="rich-card-link">
<a href="/blog/nextjs-making-markdown-blog">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-79.png)

</div>
<div class="r-card-text">
Next.jsにマークダウンのブログ機能を追加する方法
</div>
</div>
</a>
</div>

---

`create-next-app`をダウンロードします。

```shell
npx create-next-app nextjs-blog
```
記事を一覧表示するページとなる`blog.js`、そして記事データのマークダウンファイルを収納するフォルダ`data`を作ります。

```shell
nextjs-blog
├── data      ←追加
├── pages   
│       ├── api                
│       │    └── hello.js       
│       │
│       ├── _app.js
│       ├── blog.js  ←追加
│       └── index.js   
│     
```
次に、`data`の中にブログ記事のファイルを作ります。

```shell

├── data
│      ├── first.md    
│      ├── second.md  
│      ├── third.md   
│      ├── fourth.md  
│      ├── fifth.md   
│      └── sixth.md    
```

それぞれのマークダウンファイルには、下のように基本的な情報を書きます。

```md
// first.md

---
id: "1"
title: "記事1"
date: "2021-06-21"
summary: "記事1の要約"
---

1つ目の記事。
```

```md
// second.md

---
id: "2"
title: "記事2"
date: "2021-06-22"
summary: "記事2の要約"
---

2つ目の記事。
```

```md
// third.md

---
id: "3"
title: "記事3"
date: "2021-06-23"
summary: "記事3の要約"
---

3つ目の記事。
```

```md
// fourth.md

---
id: "4"
title: "記事4"
date: "2021-06-24"
summary: "記事4の要約"
---

4つ目の記事。
```

```md
// fifth.md

---
id: "5"
title: "記事5"
date: "2021-06-25"
summary: "記事5の要約"
---

5つ目の記事。
```

```md
// sixth.md

---
id: "6"
title: "記事6"
date: "2021-06-26"
summary: "記事6の要約"
---

6つ目の記事。
```

次にNext.jsでマークダウンファイルを扱うためのパッケージもダウンロードしておきます。

```shell
npm install raw-loader gray-matter react-markdown
```
トップレベル（ルート）の`next.config.js`に下のコードを書きます。

```js
// next.config.js

module.exports = {
    webpack: function (config) {
        config.module.rules.push({
            test: /\.md$/,
            use: "raw-loader",
        })
        return config
    },
}
```

`blog.js`を開き、次のコードを追加します。

```js
// blog.js

import Link from 'next/link'
import matter from "gray-matter"

const Blog = (props) => {
    return (
        <>
            <p>ブログ一覧ページ</p> 
            {props.blogs.map((blog, index) => (
                <div  key={index}>
                    <h2>{blog.frontmatter.title}</h2>
                    <Link href={`/blog/${blog.slug}`}><a>Read More</a></Link>
                </div>
            ))}
        </>
         
    )
}

export default Blog

export async function getStaticProps() { 
    const blogs = ((context) => {
        const keys = context.keys()  
        const values = keys.map(context) 
        const data = keys.map((key, index) => {
            let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)
            const value = values[index]
            const document = matter(value.default)
            return {
                frontmatter: document.data,
                slug: slug
            }
        })
        return data
    })(require.context('../data', true, /\.md$/))
        
    const sortingArticles = blogs.sort((a, b) => {
        return b.frontmatter.id - a.frontmatter.id
    })

    return {
      props: {
        blogs: JSON.parse(JSON.stringify(sortingArticles))
      }
    }
}

```

個別の記事ページでは、まずテンプレートとして使うファイルを次のように作ります。

```shell

├── pages  
│       ├── api    
│       ├── blog  ←作成
│       │      └── [slug].js ←作成 
│       ├── _app.js
│       ├── blog.js      
│       └── index.js  

```
そして次のコードを書きます。
```js
// [slug].js

import matter from "gray-matter"
import ReactMarkdown from 'react-markdown'

const SingleBlog = (props) => {
    return (
        <div>               
            <h1>{props.frontmatter.title}</h1>
            <p>{props.frontmatter.date}</p> 
            <ReactMarkdown>
                {props.markdownBody}
            </ReactMarkdown>
        </div>   
    )
}

export default SingleBlog

export async function getStaticPaths() {
    const blogSlugs = ((context) => {
        const keys = context.keys()
        const data = keys.map((key, index) => {
          let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)
        return slug
    })
    return data
    })(require.context('../../data', true, /\.md$/))

    const paths = blogSlugs.map((blogSlug) => `/blog/${blogSlug}`) 

    return {
        paths: paths, 
        fallback: false,
    }
}

export async function getStaticProps(context) {    
    const { slug } = context.params
    const data = await import(`../../data/${slug}.md`)
    const singleDocument = matter(data.default)
    
    return {
      props: {
        frontmatter: singleDocument.data,         
        markdownBody: singleDocument.content,      
      }
    }
}
```

以上で、Next.jsにマークダウンのブログ機能を作成することができました。

## ステップ１（コードの整理）
`getStaticProps`と`getStaticPaths`の整理を最初に行います。

`utils`フォルダを作り、その中に`mdQueries.js `ファイルを作成します。

```shell

nextjs-blog
├── data   
.
.
.
├── styles 
└── utils         ← 作成   
            └── mdQueries.js  ← 作成  
```
`mdQueries.js`には`getStaticProps`と`getStaticPaths`で行っていた処理を移動し、同じ働きをするコードの共有を効率化します。

次のコードを打ちます。`blog.js`と`[slug].js`の`getStaticProps`、`getStaticPaths`のコードとほぼ同じですが、`getSingleBlog`の`'../data'`のパスが変わっていることに注意してください。

```js
// mdQueries.js

import matter from 'gray-matter'

export async function getAllBlogs() {
    const blogs = ((context) => {
        const keys = context.keys()     
        const values = keys.map(context)
        const data = keys.map((key, index) => {
            let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)
            const value = values[index]
            const document = matter(value.default)
            return {
                frontmatter: document.data,
                slug: slug
            }
        })
        return data
    })(require.context('../data', true, /\.md$/))

    const orderedBlogs = blogs.sort((a, b) => {
        return b.frontmatter.id - a.frontmatter.id
    })

    return {
        orderedBlogs: JSON.parse(JSON.stringify(orderedBlogs))
    }
}

export async function getSingleBlog(context) {
    const { slug } = context.params
    const data = await import(`../data/${slug}.md`)
    const singleDocument = matter(data.default)

    return {
        singleDocument: singleDocument
    }
}

```

これらを`blog.js`と`[slug].js`で読み込んで使うので、それぞれ次のように修正します。

```js
// blog.js

import Link from 'next/link'
import matter from "gray-matter"    // 削除
import { getAllBlogs } from "../utils/mdQueries"    // 追加

...

export default Blog

export async function getStaticProps() {
    const { orderedBlogs } = await getAllBlogs()   // 置き換え

    return {
      props: {
        blogs: orderedBlogs  // 置き換え
      }
    }
}

```

```js
// [slug].js

import matter from "gray-matter"   // 削除
import ReactMarkdown from 'react-markdown'
import { getAllBlogs, getSingleBlog } from "../../utils/mdQueries"  // 追加

...

export default SingleBlog

export async function getStaticPaths() {
    const { orderedBlogs } = await getAllBlogs()    // 置き換え
    const paths = orderedBlogs.map((orderedBlog) => `/blog/${orderedBlog.slug}`)    // 修正

    return {
        paths: paths,  
        fallback: false,
    }
}

export async function getStaticProps(context) {    
    const { singleDocument } = await getSingleBlog(context)   // 置き換え

    return {
      props: {
        frontmatter: singleDocument.data,         
        markdownBody: singleDocument.content,  
      }
    }
}
```

## ステップ２（コードの修正）
ページあたりに表示する記事の数（`blogsPerPage`）と、記事の合計数から必要なページの数（`numberPages`）を計算するコードを`mdQueries.md`に追加します。


```js
// mdQueries.md

import matter from 'gray-matter'

export const blogsPerPage = 5       // 追加

export async function getAllBlogs() {
    const blogs = ((context) => {
        const keys = context.keys()     
        const values = keys.map(context)
        const data = keys.map((key, index) => {
            let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)
            const value = values[index]
            const document = matter(value.default)
            return {
                frontmatter: document.data,
                slug: slug
            }
        })
        return data
    })(require.context('../data', true, /\.md$/))

    const orderedBlogs = blogs.sort((a, b) => {
        return b.frontmatter.id - a.frontmatter.id
    })

    const numberPages = Math.ceil(orderedBlogs.length / blogsPerPage)      // 追加

    return {
        orderedBlogs: JSON.parse(JSON.stringify(orderedBlogs)),  // ,を忘れないように。
        numberPages: numberPages       // 追加
    }
}

...
```

`pages`フォルダの`blog`フォルダの中に`page`フォルダを作り、その中に`[pagination].js`を作ります。

```shell

src
.
.
├── pages 
│           ├── blog 
│           │        ├── page   ←追加
│           │        │           └── [pagination].js   ←追加
│           .        └── [slug].js
│           .  
.
.
```

`[pagination].js`のコードは基本的に`blog.js`と同じですが、いくつかの修正と必要なコードを追加します。

```js
// [pagination].js

import Link from 'next/link'
import { getAllBlogs, blogsPerPage } from "../../../utils/mdQueries"  // パスの修正とblogsPerPageの追加

const PaginationPage = (props) => {     // 変更
    return (
        <>
            <p>ブログ一覧ページ</p> 
            {props.blogs.map((blog, index) => (
                <div  key={index}>
                    <h2>{blog.frontmatter.title}</h2>
                    <Link href={`/blog/${blog.slug}`}><a>Read More</a></Link>
                </div>
            ))}
        </>
         
    )
}

export default PaginationPage　　// 変更

// ⬇追加
export async function getStaticPaths() {
    const { numberPages } = await getAllBlogs()

    let paths = []
    Array.from({ length: numberPages }).slice(0, 1).forEach((_, i) => paths.push(`/blog/page/${i + 2}`))

    return {
        paths: paths,  
        fallback: false,
    }
}
// ⬆追加

export async function getStaticProps(context) {       // 追加
    const { orderedBlogs, numberPages } = await getAllBlogs()   // 追加

    const currentPage = context.params.pagination   // 追加
    const limitedBlogs = orderedBlogs.slice((currentPage -1) * blogsPerPage, currentPage * blogsPerPage)    // 追加

    return {
      props: {
        blogs: limitedBlogs,    // 修正
        numberPages: numberPages,    // 追加
      }
    }
}
```

次に`blog.js`でも表示するブログ記事を5つに制限する必要がありますが、ここは常に`id`番号の高い記事5つしたいので、次のように書きます。

```js
// blog.js

import { getAllBlogs, blogsPerPage } from "../utils/mdQueries"  // 追加

...

export async function getStaticProps() { 
    const { orderedBlogs, numberPages } = await getAllBlogs() // 修正

    const limitedBlogs = orderedBlogs.slice(0, blogsPerPage)   // 追加
    
    return {            
        props: {
            blogs: limitedBlogs,  // 修正
            numberPages: numberPages, // 追加
        },      
    }                   
}  

```

## ステップ３（コンポーネントの作成）
`components`フォルダを作り、その中に`pagination.js`を作成します。

```shell

nextjs-blog
├── components                  ←追加
│           └── pagination.js    ←追加
├── data   
.
.
.
```

次のコードを書きます。

```js
// pagination.js

import Link from 'next/link'

export const Pagination = ({ numberPages }) => {
  return (
    <h2>
      {Array.from({ length: numberPages }, (_, i) => (
          <Link key={i + 1} href={ i === 0 ? `/blog` : `/blog/page/${i + 1}`}>
            <a>{i + 1}</a>
          </Link>
      ))}
    </h2>
  )
}

export default Pagination

```

あとはこれを`blog.js`と`[pagination].js`で読み込み、次のようにするとページネーションが表示されます。

```js
// blog.js

import Pagination from '../components/pagination'

const Blog = (props)) => {
  return (
    ...
        <Pagination numberPages={props.numberPages} />
    ...

```

```js
// [pagination].js

import Pagination from '../../../components/pagination'

const PaginationPage = (props)) => {
  return (
    ...
        <Pagination numberPages={props.numberPages} />
    ...

```

以上でNext.jsにページネーションを追加することができました。

本記事では細かい説明を省略して足早に解説しましたが、Next.jsについてよりくわしく知りたい方は、拙著「[はじめてつくるNext.jsサイト](https://www.amazon.co.jp/dp/B0C7746ZC4)」を参考にしてください。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
<div class="img-border img40percent" style="padding-top: 30px;">

![nextbook](../../images/commonImg/nextbook.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C7746ZC4)

前後の記事へと移動するリンクの作り方は、こちらの記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/nextjs-blog-prev-next">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-98.png)

</div>
<div class="r-card-text">
Next.jsのブログに前後記事へのリンクを追加する方法
</div>
</div>
</a>
</div>

<br/>

現在のNext.jsの標準スタイルであるApp Router・RSC・Server Actionsを使った開発の全体像はこちらのガイドで確認できます▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-pagination">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-pagination)

---

# Next.jsのブログに前後記事へのリンクを追加する方法

URL: https://monotein.com/blog/nextjs-blog-prev-next
公開日: 2021.12.25
更新日: 2023.6.7
概要: 最初にマークダウンのブログ機能を追加し、次に前後の記事へ移動するリンクの作り方を解説していきます。

## 前後の記事へのリンク
本記事ではまず最初にNext.jsにマークダウンのブログ機能を実装し、その後前後の記事へのリンクを作ります。

ロジック部分の説明だけなので、スタイルは各自お好みで適用してください。

なおページネーション機能は、こちらの記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/nextjs-pagination">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-99.png)

</div>
<div class="r-card-text">
Next.jsにページネーションをNPMパッケージなしで追加する方法
</div>
</div>
</a>
</div>

Next.jsバージョン13で導入されたAppフォルダを使った最新のNext.js開発に興味のある方は、今月（2023年6月）リリースした下記書籍を参考にしてください。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
<div class="img-border img40percent" style="padding-top: 30px;">

![nextbook](../../images/commonImg/nextbook.svg)

</div>
</a>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-blog-prev-next">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-blog-prev-next)

## マークダウンブログ機能の作成
まずNext.jsにマークダウンのブログ機能を追加します。

内容は下の記事で解説したものなので、すでに読んでいる人はパスしてください。

<div class="rich-card-link">
<a href="/blog/nextjs-making-markdown-blog">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-79.png)

</div>
<div class="r-card-text">
Next.jsにマークダウンのブログ機能を追加する方法
</div>
</div>
</a>
</div>

---

`create-next-app`をダウンロードします。

```shell
npx create-next-app nextjs-blog
```
記事を一覧表示するページとなる`blog.js`、そして記事データのマークダウンファイルを収納するフォルダ`data`を作ります。

```shell
nextjs-blog
├── data      ←追加
├── pages   
│       ├── api                
│       │    └── hello.js       
│       │
│       ├── _app.js
│       ├── blog.js  ←追加
│       └── index.js   
│     
```
次に、`data`の中にブログ記事のファイルを作ります。

```shell

├── data
│      ├── first.md    
│      ├── second.md  
│      ├── third.md   
│      ├── fourth.md  
│      ├── fifth.md   
│      └── sixth.md    
```

それぞれのマークダウンファイルには、下のように基本的な情報を書きます。

```md
// first.md

---
id: "1"
title: "記事1"
date: "2021-06-21"
summary: "記事1の要約"
---

1つ目の記事。
```

```md
// second.md

---
id: "2"
title: "記事2"
date: "2021-06-22"
summary: "記事2の要約"
---

2つ目の記事。
```

```md
// third.md

---
id: "3"
title: "記事3"
date: "2021-06-23"
summary: "記事3の要約"
---

3つ目の記事。
```

```md
// fourth.md

---
id: "4"
title: "記事4"
date: "2021-06-24"
summary: "記事4の要約"
---

4つ目の記事。
```

```md
// fifth.md

---
id: "5"
title: "記事5"
date: "2021-06-25"
summary: "記事5の要約"
---

5つ目の記事。
```

```md
// sixth.md

---
id: "6"
title: "記事6"
date: "2021-06-26"
summary: "記事6の要約"
---

6つ目の記事。
```

次にNext.jsでマークダウンファイルを扱うためのパッケージもダウンロードしておきます。

```shell
npm install raw-loader gray-matter react-markdown
```
トップレベル（ルート）の`next.config.js`に下のコードを書きます。

```js
// next.config.js

module.exports = {
    webpack: function (config) {
        config.module.rules.push({
            test: /\.md$/,
            use: "raw-loader",
        })
        return config
    },
}
```

`blog.js`を開き、次のコードを追加します。

```js
// blog.js

import Link from 'next/link'
import matter from "gray-matter"

const Blog = (props) => {
    return (
        <>
            <p>ブログ一覧ページ</p> 
            {props.blogs.map((blog, index) => (
                <div  key={index}>
                    <h2>{blog.frontmatter.title}</h2>
                    <Link href={`/blog/${blog.slug}`}><a>Read More</a></Link>
                </div>
            ))}
        </>
         
    )
}

export default Blog

export async function getStaticProps() { 
    const blogs = ((context) => {
        const keys = context.keys()  
        const values = keys.map(context) 
        const data = keys.map((key, index) => {
            let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)
            const value = values[index]
            const document = matter(value.default)
            return {
                frontmatter: document.data,
                slug: slug
            }
        })
        return data
    })(require.context('../data', true, /\.md$/))
        
    const sortingArticles = blogs.sort((a, b) => {
        return b.frontmatter.id - a.frontmatter.id
    })

    return {
      props: {
        blogs: JSON.parse(JSON.stringify(sortingArticles))
      }
    }
}

```

個別の記事ページでは、まずテンプレートとして使うファイルを次のように作ります。

```shell

├── pages  
│       ├── api    
│       ├── blog  ←作成
│       │      └── [slug].js ←作成 
│       ├── _app.js
│       ├── blog.js      
│       └── index.js  

```
そして次のコードを書きます。
```js
// [slug].js

import matter from "gray-matter"
import ReactMarkdown from 'react-markdown'

const SingleBlog = (props) => {
    return (
        <div>               
            <h1>{props.frontmatter.title}</h1>
            <p>{props.frontmatter.date}</p> 
            <ReactMarkdown>
                {props.markdownBody}
            </ReactMarkdown>
        </div>   
    )
}

export default SingleBlog

export async function getStaticPaths() {
    const blogSlugs = ((context) => {
        const keys = context.keys()
        const data = keys.map((key, index) => {
          let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)
        return slug
    })
    return data
    })(require.context('../../data', true, /\.md$/))

    const paths = blogSlugs.map((blogSlug) => `/blog/${blogSlug}`) 

    return {
        paths: paths, 
        fallback: false,
    }
}

export async function getStaticProps(context) {    
    const { slug } = context.params
    const data = await import(`../../data/${slug}.md`)
    const singleDocument = matter(data.default)
    
    return {
      props: {
        frontmatter: singleDocument.data,         
        markdownBody: singleDocument.content,      
      }
    }
}
```

以上で、Next.jsにマークダウンのブログ機能を作成することができました。

## ステップ１（コードの整理）
`getStaticProps`と`getStaticPaths`の整理を最初に行います。

`utils`フォルダを作り、その中に`mdQueries.js `ファイルを作成します。

```shell

nextjs-blog
├── data   
.
.
.
├── styles 
└── utils         ← 作成   
            └── mdQueries.js  ← 作成  
```
`mdQueries.js`には`getStaticProps`と`getStaticPaths`で行っていた処理を移動し、同じ働きをするコードの共有を効率化します。

次のコードを打ちます。`blog.js`と`[slug].js`の`getStaticProps`、`getStaticPaths`のコードとほぼ同じですが、`getSingleBlog`の`'../data'`のパスが変わっていることに注意してください。

```js
// mdQueries.js

import matter from 'gray-matter'

export async function getAllBlogs() {
    const blogs = ((context) => {
        const keys = context.keys()     
        const values = keys.map(context)
        const data = keys.map((key, index) => {
            let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)
            const value = values[index]
            const document = matter(value.default)
            return {
                frontmatter: document.data,
                slug: slug
            }
        })
        return data
    })(require.context('../data', true, /\.md$/))

    const orderedBlogs = blogs.sort((a, b) => {
        return b.frontmatter.id - a.frontmatter.id
    })

    return {
        orderedBlogs: JSON.parse(JSON.stringify(orderedBlogs))
    }
}

export async function getSingleBlog(context) {
    const { slug } = context.params
    const data = await import(`../data/${slug}.md`)
    const singleDocument = matter(data.default)

    return {
        singleDocument: singleDocument
    }
}

```

これらを`blog.js`と`[slug].js`で読み込んで使うので、それぞれ次のように修正します。

```js
// blog.js

import Link from 'next/link'
import matter from "gray-matter"    // 削除
import { getAllBlogs } from "../utils/mdQueries"    // 追加

...

export default Blog

export async function getStaticProps() {
    const { orderedBlogs } = await getAllBlogs()   // 置き換え

    return {
      props: {
        blogs: orderedBlogs  // 置き換え
      }
    }
}

```

```js
// [slug].js

import matter from "gray-matter"   // 削除
import ReactMarkdown from 'react-markdown'
import { getAllBlogs, getSingleBlog } from "../../utils/mdQueries"  // 追加

...

export default SingleBlog

export async function getStaticPaths() {
    const { orderedBlogs } = await getAllBlogs()    // 置き換え
    const paths = orderedBlogs.map((orderedBlog) => `/blog/${orderedBlog.slug}`)    // 修正

    return {
        paths: paths,  
        fallback: false,
    }
}

export async function getStaticProps(context) {    
    const { singleDocument } = await getSingleBlog(context)   // 置き換え

    return {
      props: {
        frontmatter: singleDocument.data,         
        markdownBody: singleDocument.content,  
      }
    }
}
```

## ステップ２（前後の記事の指定）
前後の記事へ移動するには、現在のページの一つ前と一つ後のページを特定する必要があります。

そこで必要なのが各マークダウンファイルのfrontmatter部分の`id`なので、まずマークダウンの全データを取得し、現在の記事の`id`の一つ前と一つ後を選びます。

次のコードを追加します。

```js
// [slug].js

...

export async function getStaticProps(context) {    
    const singleDocument = await getSingleBlog(context)   

    ⬇追加
    const { orderedBlogs } = await getAllBlogs()
    const prev = orderedBlogs.filter(orderedBlog => orderedBlog.frontmatter.id === singleDocument.data.id - 1)
    const next = orderedBlogs.filter(orderedBlog => orderedBlog.frontmatter.id === singleDocument.data.id + 1)
    ⬆追加

    return {
      props: {
        frontmatter: singleDocument.data,     
        markdownBody: singleDocument.content,  
        prev,  // 追加（prev: prevも可）
        next,  // 追加（next: nextも可）
      }
    }
}

```

これで前後のページのデータが`prev`と`next`に格納されました。

## ステップ３（コンポーネントの作成）
`components`フォルダを作り、その中に`prevNext.js`を作成します。

```shell

nextjs-blog
├── components                 ←追加
│           └── prevNext.js    ←追加
├── data   
.
.
.
```
そこに次のコードを打ちます。

```js
// prevNext.js

import Link from 'next/link'

const PrevNext =(props) => {
    return (
        <div>
            {0 < props.prev.length && 
                <Link href={`/blog/${props.prev[0].slug}`}>
                    <a><h3> {props.prev[0].frontmatter.title}</h3></a>
                </Link>
            }
            {0 < props.next.length && 
                <Link href={`/blog/${props.next[0].slug}`}>
                    <a><h3>{props.next[0].frontmatter.title}</h3></a>
                </Link>
            }
        </div>
    )
}

export default PrevNext 
```

これを`[slug].js`で読み込み、`props`で`prev`と`next`を渡します。

`[slug].js`ファイル全体は次のようになります。

```js
// [slug].js

import matter from "gray-matter"
import ReactMarkdown from 'react-markdown'

const SingleBlog = (props) => {
    return (
        <div>               
            <h1>{props.frontmatter.title}</h1>
            <p>{props.frontmatter.date}</p> 
            <ReactMarkdown>
                {props.markdownBody}
            </ReactMarkdown>
            <PrevNext prev={prev} next={next} />
        </div>   
    )
}

export default SingleBlog

export async function getStaticPaths() {
    const { orderedBlogs } = await getAllBlogs()    
    const paths = orderedBlogs.map((orderedBlog) => `/blog/${orderedBlog.slug}`)   

    return {
        paths: paths,  
        fallback: false,
    }
}

export async function getStaticProps(context) {    
    const { singleDocument } = await getSingleBlog(context)   

    const { orderedBlogs } = await getAllBlogs()
    const prev = orderedBlogs.filter(orderedBlog => orderedBlog.frontmatter.id === singleDocument.data.id - 1)
    const next = orderedBlogs.filter(orderedBlog => orderedBlog.frontmatter.id === singleDocument.data.id + 1)

    return {
      props: {
        frontmatter: singleDocument.data,         
        markdownBody: singleDocument.content,  
        prev,
        next,
      }
    }
}
```

以上でNext.jsに前後の記事へのリンクを追加することができました。

本記事では細かい説明を省略して足早に解説しましたが、Next.jsについてよりくわしく知りたい方は、拙著「[はじめてつくるNext.jsサイト](https://www.amazon.co.jp/dp/B0C7746ZC4)」を参考にしてください。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
<div class="img-border img40percent" style="padding-top: 30px;">

![nextbook](../../images/commonImg/nextbook.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C7746ZC4)

Next.jsのページネーション機能は、こちらの記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/nextjs-pagination">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-99.png)

</div>
<div class="r-card-text">
Next.jsにページネーションをNPMパッケージなしで追加する方法
</div>
</div>
</a>
</div>

<br/>

現在のNext.jsの標準スタイルであるApp Router・RSC・Server Actionsを使った開発の全体像はこちらのガイドで確認できます▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-blog-prev-next">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-blog-prev-next)

---

# Gatsbyに前後の記事へのリンクを追加する方法

URL: https://monotein.com/blog/gatsby-blog-prev-next
公開日: 2021.11.28
概要: Gatsbyで作ったサイトのブログページに、前後の記事へと移動する機能を追加する方法をわかりやすく解説します。gatsby-nodeにGraphQLクエリを追加し、それをcontextで渡す方法を使います。

## 前後の記事へのリンク
Jamstackサイト制作でよく使われるGatsbyに、前後の記事へと移動する仕組みを追加します。

本記事は、まず最初にGatsbyサイトに最もベーシックなブログ機能を実装し、そこに前後の記事へのリンクを追加するという流れです。

ロジック部分の説明だけなので、スタイルは各自お好みで適用してください。

なお、本記事ではGatsbyの最新バージョン（2021年11月時点）であるv4を使いますが、v2でもv3でも本記事と同じコードで前後の記事へと移動する仕組みを実装できます。

なおページネーション機能は、こちらの記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/making-pagination-for-gatsby-blog">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-89.png)

</div>
<div class="r-card-text">
Gatsbyブログのページネーションの作り方
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/gatsby-blog-prev-next">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/gatsby-blog-prev-next)

## ベーシックなブログ機能の作成
まずGatsbyのスターターサイトに、マークダウンのブログ機能を追加しましょう。

最初にスターターサイトをダウンロードするので、ターミナルで以下のコマンドを実行します。

```shell
npx gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
```

次にブログ記事を一覧表示する`blog.js`、個別記事を表示する`singleBlog.js`を作ります。

まずは`blog.js`から始めます。

```shell

├──pages
│       ├── 404.js   
│       ├── blog.js    ←追加
│       ├── index.js  
│       ├── pages-2.js   
│       ├── using-ssr.js  
│       └── using-typescript.tsx 

```
次のコードを書きます。

```js
// blog.js

import * as React from "react"
import { graphql, Link } from "gatsby"
 
const Blog = (props) => {
    return (
        <div>    
            <h1>ブログページ</h1>
            {props.data.allMarkdownRemark.edges.map((singleBlog, index) => 
                <div key={index}>              
                    <h2><Link to={`/blog${singleBlog.node.fields.slug}`}>{singleBlog.node.frontmatter.title}</Link></h2>       
                    <p>{singleBlog.node.frontmatter.date}</p>      
                </div>              
            )}  
        </div>  
    )
}

export default Blog

export const query = graphql`
    query BlogQuery { 
        allMarkdownRemark(
            sort: {fields: frontmatter___id, order: DESC}     
        ) {
            edges {
                node {
                    fields {
                        slug
                    }
                    frontmatter {
                        date
                        summary
                        id
                        title
                    }
                }
            }
        }
    }
`
```

`singleBlog.js`を`templates`フォルダ内に作ります。
```shell

├──templates 
│       ├── singleBlog.js    ←追加  
│       └── using-dsg.js

```
次のコードを書きます。

```js
// singleBlog.js

import * as React from "react"
import { graphql } from "gatsby"
 
const SingleBlog = (props) => {
    return (
        <div>                       
            <h1>{props.data.markdownRemark.frontmatter.title}</h1> 
            <p>{props.data.markdownRemark.frontmatter.date}</p> 
            <div dangerouslySetInnerHTML={{ __html: props.data.markdownRemark.html }} />  
        </div>     
    )
}

export default SingleBlog

export const query = graphql`
    query SingleBlogQuery($slug: String!) {
        markdownRemark(fields: { slug: { eq: $slug } }) {
            frontmatter {
                date
                title
                summary
                id
            }
            html
        }
    }
`
```
次に、ブログ記事のマークダウンファイルを収納するフォルダを`src`内に作ります。

```shell

├──src
│  ├── components    
│  ├── data    ←追加
│  ├── images  
│  ├── pages   
│  └── templates    

```

`data`内には6つのマークダウンファイルを作ります。

```shell

├── data
│      ├── first.md    
│      ├── second.md  
│      ├── third.md   
│      ├── fourth.md  
│      ├── fifth.md   
│      └── sixth.md    
```
それぞれのマークダウンファイルには、下のように基本的な情報を書きます。

```md
// first.md

---
id: "1"
title: "記事1"
date: "2021-06-21"
summary: "記事1の要約"
---

1つ目の記事。
```

```md
// second.md

---
id: "2"
title: "記事2"
date: "2021-06-22"
summary: "記事2の要約"
---

2つ目の記事。
```

```md
// third.md

---
id: "3"
title: "記事3"
date: "2021-06-23"
summary: "記事3の要約"
---

3つ目の記事。
```

```md
// fourth.md

---
id: "4"
title: "記事4"
date: "2021-06-24"
summary: "記事4の要約"
---

4つ目の記事。
```

```md
// fifth.md

---
id: "5"
title: "記事5"
date: "2021-06-25"
summary: "記事5の要約"
---

5つ目の記事。
```

```md
// sixth.md

---
id: "6"
title: "記事6"
date: "2021-06-26"
summary: "記事6の要約"
---

6つ目の記事。
```

これでブログのデータと、それを表示する部分ができました。

次は表示するための仕組みづくりです。

ブログ機能に必要なプラグインをインストールします。

```shell
npm install gatsby-transformer-remark
```

これと、デフォルトですでに入っている`gatsby-source-filesystem`を`gatsby-config.js`に追加します。

```js
// gatsby-config.js

module.exports = {
  siteMetadata: {
     
      ...

  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-image`,
    // ⬇ 追加
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data`,
      },
    },
    `gatsby-transformer-remark`,
    // ⬆ 追加
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,

    ...

```
`gatsby-node.js`に、上で作ったコンポーネントにマークダウンファイルを流し込むためのコードを追加します。

```js
// gatsby-node.js

// ⬇ 削除
exports.createPages = async ({ actions }) => {
  const { createPage } = actions
  createPage({
    path: "/using-dsg",
    component: require.resolve("./src/templates/using-dsg.js"),
    context: {},
    defer: true,
  })
}
// ⬆ 削除

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
    const { createNodeField } = actions
  
    if (node.internal.type === `MarkdownRemark`) {
        const slug = createFilePath({ node, getNode })   
        createNodeField({         
            node,                   
            name: `slug`,           
            value: slug,            
        })
    }
}

exports.createPages = async ({ graphql, actions }) => {  
    const { createPage } = actions   

    const result = await graphql(`              
        query {
            allMarkdownRemark {
                edges {
                    node {
                        fields {
                            slug
                        }
                    }
                }
            }
        }
    `)
  
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
            path: `blog${node.fields.slug}`,
            component: path.resolve(`./src/templates/singleBlog.js`),
            context: {
                slug: node.fields.slug,
            },
        })
    })
}
```

ここまで加えた変更をすべて保存します。

`gatsby develop`でGatsbyを起動し、`http://localhost:8000/blog`をブラウザで開くと、ブログ機能が追加されているのがわかります。

これ以降、本題の前後のページへと移動する機能を追加していきます。

## 実装に必要なもの3つ
前後の記事へのリンク実装には次の3つが必要です。

---

`1` `gatsby-node.js`に前後の記事の情報を取得するGraphQLクエリを追加

`2` 取得した前後の記事の情報を`singleBlog.js`コンポーネントに渡す

`3` `prevNext.js`コンポーネント

---

それでは順番通りに作っていきます。

## gatsby-node.jsにGraphQLクエリを追加
次のコードを`gatsby-node.js`に追加します。

```js
// gatsby-node.js

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
    const { createNodeField } = actions
  
    if (node.internal.type === `MarkdownRemark`) {
        const slug = createFilePath({ node, getNode })   
        createNodeField({         
            node,                   
            name: `slug`,           
            value: slug,            
        })
    }
}

exports.createPages = async ({ graphql, actions }) => {  
    const { createPage } = actions   

    const result = await graphql(`              
        query {
            allMarkdownRemark (sort: { order: ASC, fields: [frontmatter___id] }){    // 追加
                edges {
                    node {
                        fields {
                            slug
                        }
                    }
                    // ⬇ 追加
                    next {
                        frontmatter {
                            title
                        }
                        fields {
                            slug
                        }
                    }
                    previous {
                        fields {
                            slug
                        }
                        frontmatter {
                            title
                        }
                    }
                    // ⬆ 追加
                }
            }
        }
    `)
  
    result.data.allMarkdownRemark.edges.forEach(({ node, next, previous }) => {    // 追加
        createPage({
            path: `blog${node.fields.slug}`,
            component: path.resolve(`./src/templates/singleBlog.js`),
            context: {
                slug: node.fields.slug,
                next,       // 追加
                previous,   // 追加
            },
        })
    })
}
```
いま追加したコードは、まずGraphQLで前後の記事のタイトル(`title`)とパス情報(`slug`)を取得しています。

次に`context`の中にそれを置きます。

これによって、`singleBlog.js`から`pageContext`によってそのデータにアクセスできます。

なお`allMarkdownRemark`に追加したコードは、前後の記事の順番を整えるためのものです。
　　　　　　　　
## 前後の記事の情報をsingleBlog.jsに渡す
`context`内のデータは`pageContext`で渡されるので、次のコードを追加します。

```js
// singleBlog.js

import * as React from "react"
import { graphql } from "gatsby"
import PrevNext  from "../components/prevNext"   // 追加
 
const SingleBlog = (props) => {
    return (
        <div>                       
            <h1>{props.data.markdownRemark.frontmatter.title}</h1> 
            <p>{props.data.markdownRemark.frontmatter.date}</p> 
            <div dangerouslySetInnerHTML={{ __html: props.data.markdownRemark.html }} />  
            <PrevNext pageContext={props.pageContext} />  // 追加
        </div>     
    )
}

export default SingleBlog

export const query = graphql`
    query SingleBlogQuery($slug: String!) {
        markdownRemark(fields: { slug: { eq: $slug } }) {
            frontmatter {
                date
                title
                summary
                id
            }
            html
        }
    }
`
```
最後に、いま追加した`prevNext.js`コンポーネントを作ります。

## prevNext.jsコンポーネント
`prevNext.js`を`components`フォルダに作ります。

```shell
src
.
.
├── components    
│      ├── header.js
│      ├── layout.css
│      ├── layout.js  
│      ├── prevNext.js    ←追加    
│      └── seo.js
.
.
```

そこに次のコードを書きます。

```js
// prevNext.js

import * as React from "react"
import { Link } from 'gatsby'

const PrevNext =({ pageContext }) => {
    const { previous, next } = pageContext
    return (
        <div>
            {previous && 
                <Link to={`/blog${previous.fields.slug}`}>
                    <h3>{previous.frontmatter.title}</h3>
                </Link>
            }
            {next && 
                <Link to={`/blog${next.fields.slug}`}>
                    <h3>{next.frontmatter.title}</h3>
                </Link>
            }
        </div>
    )
}

export default PrevNext
```

変更を保存して`gatsby develop`でGatsbyを起動させ、ブラウザで`http://localhost:8000/blog`に表示されている記事を開くと、前後の記事へと移動する機能が追加されているのがわかります。

本記事では細かい説明を省略して足早に解説しましたが、Gatsbyについてよりくわしく知りたい方は、拙著「[はじめてつくるGatsbyサイト](https://www.amazon.co.jp/dp/B0BNQBDHFH)」を参考にしてください。

なお、Gatsbyブログの記事一覧ページ(`blog.js`)に表示される記事数を制限するページネーション機能については、こちらの記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/making-pagination-for-gatsby-blog">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-89.png)

</div>
<div class="r-card-text">
Gatsbyブログのページネーションの作り方
</div>
</div>
</a>
</div>

その他、Gatsbyに興味のある人は次の記事も参考にしてください。

<div class="rich-card-link">
<a href="/blog/gatsby-seo-and-optimisations">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-57.png)

</div>
<div class="r-card-text">
Gatsbyの検索エンジン最適化（SEO）の全まとめ
</div>
</div>
</a>
</div>



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/gatsby-blog-prev-next">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/gatsby-blog-prev-next)

---

# Gatsbyブログのページネーションの作り方

URL: https://monotein.com/blog/making-pagination-for-gatsby-blog
公開日: 2021.11.27
概要: Gatsbyで作ったサイトのブログ一覧ページに、表示される記事数を制限し、残りを次ページへと割り当てるページネーションを実装します。ページネーションは日本語では「ページ送り」「ページ割り」と呼ばれます。

## ページネーションとは？
記事数が増えたときに、1ページあたりに表示する記事の数を5つや10つなどに制限したいときに使うものがページネーションです。

<p style="padding: 5%; margin: 0 20px 16px; border: 1px solid rgb(187, 187, 187); border-radius: 5px;">
<span style="background-color: #5dbcff; color: #fff; padding: 10px; border-radius: 5px; margin: auto 1.5%">1</span>
<span style="background-color: #5dbcff; color: #fff; padding: 10px; border-radius: 5px; margin: auto 1.5%">2</span>
<span style="background-color: #5dbcff; color: #fff; padding: 10px; border-radius: 5px; margin: auto 1.5%">3</span>
<span style="background-color: #5dbcff; color: #fff; padding: 10px; border-radius: 5px; margin: auto 1.5%">4</span>
<span style="background-color: #5dbcff; color: #fff; padding: 10px; border-radius: 5px; margin: auto 1.5%">5</span>
</p>

Jamstackサイト制作でよく使われるGatsbyにページネーションを追加します。

本記事は、まず最初にGatsbyサイトに最もベーシックなブログ機能を実装し、そこにページネーションを追加するという流れです。

ロジック部分の説明だけなので、スタイルは各自お好みで適用してください。

なお、本記事ではGatsbyの最新バージョン（2021年11月時点）であるv4を使いますが、v2でもv3でも本記事と同じコードでページネーションの設置が可能です。

なお前後の記事へと移動する仕組みは、こちらの記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/gatsby-blog-prev-next">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-90.png)

</div>
<div class="r-card-text">
Gatsbyに前後の記事へのリンクを追加する方法
</div>
</div>
</a>
</div>

## ベーシックなブログ機能の作成
まずGatsbyのスターターサイトに、マークダウンのブログ機能を追加しましょう。

最初にスターターサイトをダウンロードするので、ターミナルで以下のコマンドを実行します。

```shell
npx gatsby new gatsby-starter-default https://github.com/gatsbyjs/gatsby-starter-default
```

次にブログ記事を一覧表示する`blog.js`、個別記事を表示する`singleBlog.js`を作ります。

まずは`blog.js`から始めます。

```shell

├──pages
│       ├── 404.js   
│       ├── blog.js    ←追加
│       ├── index.js  
│       ├── pages-2.js   
│       ├── using-ssr.js  
│       └── using-typescript.tsx 

```
次のコードを書きます。

```js
// blog.js

import * as React from "react"
import { graphql, Link } from "gatsby"
 
const Blog = (props) => {
    return (
        <div>    
            <h1>ブログページ</h1>
            {props.data.allMarkdownRemark.edges.map((singleBlog, index) => 
                <div key={index}>              
                    <h2><Link to={`/blog${singleBlog.node.fields.slug}`}>{singleBlog.node.frontmatter.title}</Link></h2>       
                    <p>{singleBlog.node.frontmatter.date}</p>      
                </div>              
            )}  
        </div>  
    )
}

export default Blog

export const query = graphql`
    query BlogQuery { 
        allMarkdownRemark(
            sort: {fields: frontmatter___id, order: DESC}     
        ) {
            edges {
                node {
                    fields {
                        slug
                    }
                    frontmatter {
                        date
                        summary
                        id
                        title
                    }
                }
            }
        }
    }
`
```

`singleBlog.js`を`templates`フォルダ内に作ります。
```shell

├──templates 
│       ├── singleBlog.js    ←追加  
│       └── using-dsg.js

```
次のコードを書きます。

```js
// singleBlog.js

import * as React from "react"
import { graphql } from "gatsby"
 
const SingleBlog = (props) => {
    return (
        <div>                       
            <h1>{props.data.markdownRemark.frontmatter.title}</h1> 
            <p>{props.data.markdownRemark.frontmatter.date}</p> 
            <div dangerouslySetInnerHTML={{ __html: props.data.markdownRemark.html }} />  
        </div>     
    )
}

export default SingleBlog

export const query = graphql`
    query SingleBlogQuery($slug: String!) {
        markdownRemark(fields: { slug: { eq: $slug } }) {
            frontmatter {
                date
                title
                summary
                id
            }
            html
        }
    }
`
```
次に、ブログ記事のマークダウンファイルを収納するフォルダを`src`内に作ります。

```shell

├──src
│  ├── components    
│  ├── data    ←追加
│  ├── images  
│  ├── pages   
│  └── templates    

```

`data`内には6つのマークダウンファイルを作ります。

```shell

├── data
│      ├── first.md    
│      ├── second.md  
│      ├── third.md   
│      ├── fourth.md  
│      ├── fifth.md   
│      └── sixth.md    
```
それぞれのマークダウンファイルには、下のように基本的な情報を書きます。

```md
// first.md

---
id: "1"
title: "記事1"
date: "2021-06-21"
summary: "記事1の要約"
---

1つ目の記事。
```

```md
// second.md

---
id: "2"
title: "記事2"
date: "2021-06-22"
summary: "記事2の要約"
---

2つ目の記事。
```

```md
// third.md

---
id: "3"
title: "記事3"
date: "2021-06-23"
summary: "記事3の要約"
---

3つ目の記事。
```

```md
// fourth.md

---
id: "4"
title: "記事4"
date: "2021-06-24"
summary: "記事4の要約"
---

4つ目の記事。
```

```md
// fifth.md

---
id: "5"
title: "記事5"
date: "2021-06-25"
summary: "記事5の要約"
---

5つ目の記事。
```

```md
// sixth.md

---
id: "6"
title: "記事6"
date: "2021-06-26"
summary: "記事6の要約"
---

6つ目の記事。
```

これでブログのデータと、それを表示する部分ができました。

次は表示するための仕組みづくりです。

ブログ機能に必要なプラグインをインストールします。

```shell
npm install gatsby-transformer-remark
```

これと、デフォルトですでに入っている`gatsby-source-filesystem`を`gatsby-config.js`に追加します。

```js
// gatsby-config.js

module.exports = {
  siteMetadata: {
     
      ...

  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-image`,
    // ⬇ 追加
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data`,
      },
    },
    `gatsby-transformer-remark`,
    // ⬆ 追加
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,

    ...

```
`gatsby-node.js`に、上で作ったコンポーネントにマークダウンファイルを流し込むためのコードを追加します。

```js
// gatsby-node.js

// ⬇ 削除
exports.createPages = async ({ actions }) => {
  const { createPage } = actions
  createPage({
    path: "/using-dsg",
    component: require.resolve("./src/templates/using-dsg.js"),
    context: {},
    defer: true,
  })
}
// ⬆ 削除

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.onCreateNode = ({ node, getNode, actions }) => {
    const { createNodeField } = actions
  
    if (node.internal.type === `MarkdownRemark`) {
        const slug = createFilePath({ node, getNode })   
        createNodeField({         
            node,                   
            name: `slug`,           
            value: slug,            
        })
    }
}

exports.createPages = async ({ graphql, actions }) => {  
    const { createPage } = actions   

    const result = await graphql(`              
        query {
            allMarkdownRemark {
                edges {
                    node {
                        fields {
                            slug
                        }
                    }
                }
            }
        }
    `)
  
    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
        createPage({
            path: `blog${node.fields.slug}`,
            component: path.resolve(`./src/templates/singleBlog.js`),
            context: {
                slug: node.fields.slug,
            },
        })
    })
}
```

ここまで加えた変更をすべて保存します。

`gatsby develop`でGatsbyを起動し、`http://localhost:8000/blog`をブラウザで開くと、ブログ機能が追加されているのがわかります。

これ以降、本題のページネーションを追加していきます。

## ページネーションに必要なもの
ページネーションには次の3つが必要です。

---

`1` `gatsby-node.js`で`blog.js`に表示する記事数を制限する仕組み

`2` `blog.js`ファイルの移動

`3` paginationコンポーネント

---

それでは順番通りに作っていきます。

## gatsby-node.jsで記事数を制限する

まず1つ目の、表示する記事数を制限するコードを`gatsby-node.js`に追加します。

ここでは`blog.js`に表示される記事の数は2つとし、3つ目以降は次のページへと表示させます。

```js
// gatsby-node.js

...

    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
            createPage({
                path: `blog${node.fields.slug}`,
                component: path.resolve(`./src/templates/singleBlog.js`),
                context: {
                    slug: node.fields.slug,
                },
            })
        })

    ⬇追加
    const blogs = result.data.allMarkdownRemark.edges
    const blogsPerPage = 2
    const numberPages = Math.ceil(blogs.length / blogsPerPage)
    Array.from({ length: numberPages }).forEach((_, i) => {
        createPage({
            path: i === 0 ? `/blog` : `/blog/${i + 1}`,
            component: path.resolve(`./src/templates/blog.js`),
            context: {
                limit: blogsPerPage,
                skip: i * blogsPerPage,
                numberPages,
                currentPage: i + 1,
            },
        })
    })
    ⬆追加

}
```
これにより、2記事ごとに新しいページが作られます。

`limit`と`skip`があるのは、`blog.js`のGraphQLクエリで使うためで、`context`の中に書いて`blog.js`へと渡します。

## blog.jsを移動する
ページネーション用に新しい`blog-list.js`のようなコンポーネントを作り、そこに記事を表示することも可能ですが、今回はすでにある`blog.js`を使います。

しかしそうすると、いま打った`createPage`のコードで作った`/blog`のURLと、`pages`フォルダにある`blog.js`のURL`/blog`が衝突するので、`blog.js`を`templates`フォルダへと移します。


```shell
src
.
.
├── templates 
│           ├── blog.js    ←pagesから移動 
│           ├── singleBlog.js 
│           └── using-dsg.js   
.
.
```
そして`blog.js`には次のコードを追加します。

```js
// blog.js

import * as React from "react"
import { graphql, Link } from "gatsby"
 
const Blog = (props) => {
    return (
        <div>    
            <h1>ブログページ</h1>
            {props.data.allMarkdownRemark.edges.map((singleBlog, index) => 
                <div key={index}>              
                    <h2><Link to={`/blog${singleBlog.node.fields.slug}`}>{singleBlog.node.frontmatter.title}</Link></h2>       
                    <p>{singleBlog.node.frontmatter.date}</p>      
                </div>              
            )}  
        </div>  
    )
}

export default Blog

export const query = graphql`
    query BlogQuery ($skip: Int!, $limit: Int!) {       // 追加
        allMarkdownRemark(
            sort: {fields: frontmatter___id, order: DESC}
            limit: $limit                               // 追加
            skip: $skip                                 // 追加
        ) {
            edges {
                node {
                    fields {
                        slug
                    }
                    frontmatter {
                        date
                        summary
                        id
                        title
                    }
                }
            }
        }
    }
`
```

## paginationコンポーネントの作成
paginationコンポーネントを`components`フォルダに作ります。

```shell
src
.
.
├── components    
│      ├── header.js
│      ├── layout.css
│      ├── layout.js  
│      ├── pagination.js    ←追加    
│      └── seo.js
.
.
```

そこに次のコードを書きます。

```js
// pagination.js

import * as React from "react"
import { Link } from 'gatsby'

const Pagination = ({ pageContext }) => {
    const { numberPages } = pageContext
    return (
        <h2>
            {Array.from({ length: numberPages }, (_, i) => (
                <Link key={`pagination-number${i + 1}`} to={`/blog/${i === 0 ? "" : i + 1}`}>
                {i + 1}
                </Link>
            ))}
        </h2>
    )
}

export default Pagination
```
そして`blog.js`に、いま作ったpaginationコンポーネントを読み込みます。

```js
// blog.js

import * as React from "react"
import { graphql, Link } from "gatsby"
import Pagination from "../components/pagination"   // 追加
 
const Blog = (props) => {
    const { pageContext } = props   // 追加
    return (
        <div>    
            <h1>ブログページ</h1>
            {props.data.allMarkdownRemark.edges.map((singleBlog, index) => 
                <div key={index}>              
                    <h2><Link to={`/blog${singleBlog.node.fields.slug}`}>{singleBlog.node.frontmatter.title}</Link></h2>       
                    <p>{singleBlog.node.frontmatter.date}</p>      
                </div>              
            )} 
            <Pagination pageContext={pageContext} />    // 追加
        </div>  
    )
}

export default Blog

export const query = graphql`
    query BlogQuery ($skip: Int!, $limit: Int!) {      
        allMarkdownRemark(
            sort: {fields: frontmatter___id, order: DESC}
            limit: $limit                              
            skip: $skip                               
        ) {
            edges {
                node {
                    fields {
                        slug
                    }
                    frontmatter {
                        date
                        summary
                        id
                        title
                    }
                }
            }
        }
    }
`
```

変更を保存して`gatsby develop`でGatsbyを起動させ、ブラウザで`http://localhost:8000/blog`を開くと、ページネーションが追加されているのがわかります。

本記事では細かい説明を省略して足早に解説しましたが、Gatsbyについてよりくわしく知りたい方は、拙著「[はじめてつくるGatsbyサイト](https://www.amazon.co.jp/dp/B0BNQBDHFH)」を参考にしてください。

なお、Gatsbyブログの記事ページ(`singleBlog.js`)に前後の記事へのリンクを追加する方法は、こちらの記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/gatsby-blog-prev-next">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-90.png)

</div>
<div class="r-card-text">
Gatsbyに前後の記事へのリンクを追加する方法
</div>
</div>
</a>
</div>

その他、Gatsbyに興味のある人は次の記事も参考にしてください。

<div class="rich-card-link">
<a href="/blog/gatsby-seo-and-optimisations">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-57.png)

</div>
<div class="r-card-text">
Gatsbyの検索エンジン最適化（SEO）の全まとめ
</div>
</div>
</a>
</div>


<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/making-pagination-for-gatsby-blog">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/making-pagination-for-gatsby-blog)

---

# Figmaのグラデーションがブラウザで表示されない時の直し方

URL: https://monotein.com/blog/figma-gradient-not-working
公開日: 2021.11.27
更新日: 2021.12.01
概要: Figmaで作ったグラデーションのSVG画像がブラウザで正しく表示されない時は、SVG画像を開き、<linearGradient>タグを探し、その中のidを修正することで、正しく表示されるようになります。

## Figmaで作ったグラデーションが表示されない

私は普段Figmaを画像やイメージの制作に使っており、先日グラデーションを使った下のようなSVG画像を当サイトのために作りました。

<div class="img-border" style="padding-top: 30px;">

![process-desktop](../../images/singleBlogPageImages/blogArticleImages/blog88/process-desktop.svg)

</div>

しかしこれを当サイトで読み込み、Googleクロームで表示させると、下のようにグラデーションが消えて、ベタ塗りの色となっていました。

<div class="img-border" style="padding-top: 30px;">

![gradient-not-working.svg](../../images/singleBlogPageImages/blogArticleImages/blog88/gradient-not-working.svg)

</div>

## グラデーションを表示させる方法

調べてみると、下のような情報を見つけました。

---

• [SVG gradient not working](https://stackoverflow.com/questions/38990880/svg-gradient-not-working)

• [Figma exported SVGs with gradients not working as expected](https://geeknet.me/figma-exported-svgs-with-gradients-not-working-as-expected/)

---

これらのサイトでは、SVG画像内の`<linearGradient>`というタグに含まれる`id`を変更することで、グラデーションが表示されると書かれています。

それを試したところ、クロームでもグラデーションが表示されるようになりました。

具体的には次のようなステップです。

---

`ア` SVG画像をVSコードなどのエディタで開く

`イ` `<linearGradient>`タグを探す

`ウ` `<linearGradient>`タグ内の`id`の文字列（例えば`paint0_linear`）を`paint0`に書き換える

`エ` 通常、いま修正した文字列`paint0_linear`は別のタグでも使われているので、そこも同じように`paint1`に書き換える（補足は下記）

`オ` 保存する

---

ここで注意が二つあります。

1つ目は文字列の書き方に特に指定はないことです。

上の例では`paint0_linear`を`paint0`と書き換えていますが、`paint2`でも`paint3`でも大丈夫です。

この点の理由は不明で、上のサイトでも説明はありません。

そして2つ目が`エ`で触れたところです。

私の場合、グラデーションを含んだSVG画像を作ってそのファイルを開くと、`<linearGradient>`タグ内の`id`でつかわれている文字列が、`<path>`タグの`fill`でも使われていることがよくあります。

例としては下のようなコードで、`paint0_linear`が2ヶ所で使われています。

```html
<path
    d="M796 2070L-2.47534 1426.5L1594.48 1426.5L796 2070Z"
    fill="url(#paint0_linear)"
/>

...

<linearGradient
    id="paint0_linear"
    x1="23.0001"
    y1="2070"
    x2="1589"
    y2="1440"
    gradientUnits="userSpaceOnUse"
></linearGradient>
```

この2つの`paint0_linear`を同じ文字列に書き換えるようにしないと、グラデーションはうまく表示されません。

つまり次のように書き換えます。

```html
<path
    d="M796 2070L-2.47534 1426.5L1594.48 1426.5L796 2070Z"
    fill="url(#paint0)"
/>

<linearGradient
    id="paint0"
    x1="23.0001"
    y1="2070"
    x2="1589"
    y2="1440"
    gradientUnits="userSpaceOnUse"
></linearGradient>
```

おそらくグラデーション一つあたり、このような`<linearGradient>`と`<path>`が1ペアずつあるために、両方を書き換える必要があるのだと思います。

なぜこれで直るのかは不明ですが、グラデーションが正しく表示されない時は当記事で紹介した方法を試してみましょう。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/figma-gradient-not-working">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/figma-gradient-not-working)

---

# HTMLとCSSを勉強したあと、次に何をすればいい？おすすめの学習順序を解説

URL: https://monotein.com/blog/what-to-do-after-studying-html-css
公開日: 2021.11.26
更新日: 2026.6.18
概要: HTMLとCSSを勉強したあと、次に何を勉強すればいいのでしょうか？JavaScriptを基礎から学ぶ方法と、アプリを作りながら学ぶ方法を比較し、初心者におすすめの学習順序を解説します。Reactを使った効率的な勉強法も紹介。

## HTMLとCSSを終えると、次に何を勉強すればいいのか迷う
HTMLとCSSを勉強して、ウェブサイトを作れるようになった。

自分のウェブサイトや友達のウェブサイトも作った。

しかしそのあと、「*次は何をすればいいのだろう？*」と迷う....

---

こういう人は少なくありません。

HTMLとCSSまでは順調に進めたのに、その先で立ち止まってしまうのです。

一般的に、HTML／CSSの次はJavaScriptを勉強します。

JavaScriptを使うことで、動きのあるウェブサイトや、ReactやNext.jsといった人気の技術を使えるようになるからです。

しかし実は、多くの人がJavaScriptでつまずきます。

私もその一人でした。

*なぜJavaScriptは難しいのかについては、下記記事で詳しく解説しています▼

<div class="rich-card-link">
<a href="/blog/why-js-feels-difficult-not-one-on-one">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-206.png)

</div>
<div class="r-card-text">
JavaScriptを難しく感じる理由（HTML・CSSは簡単だったのに...）
</div>
</div>
</a>
</div>

<br/>

## 選択肢は2つある
HTMLとCSSを終えてJavaScriptに進む人には、大きく2つの道があります。

### ①JavaScriptを基礎からじっくり勉強する
一つ目はJavaScriptを基礎から学ぶ方法です。

変数、配列、関数、オブジェクト....

こうした知識を順番に身につけていく王道のやり方です。

多くの人がこちらの方法を一度は試します。

この方法は、基礎をしっかり固められるメリットがある一方、デメリットもいくつかあります。

「時間がかかる」ということもその一つですが、より深刻なデメリットは挫折率が高くなること。

ひとつひとつの事柄を学んでも、それを使う場面が具体的にイメージしにくいので、モチベーションが湧きにくいのです。

そのため、この「JavaScriptを基礎からじっくり勉強する」という方法を私はお勧めしません。

### ②作りながらJavaScriptを学ぶ
もう一つの進め方は、実際にアプリを作りながら必要なJavaScriptの知識を身につけていく方法です。

私はこちらの方法で長い停滞期を抜け出しました。

また、生徒を教えていても、こちらの方法で進める人の方が明らかに成功率が高くなっています。

以下、私自身の体験談です。

---

私がビギナーだった頃、最初に手を出した教材は紙のJavaScriptの教科書です。

最初から最後まで読んでも、「これをどこで使うのだろう？」と思うことがたくさんありました。

ところが実際にアプリを作ってみると、「だから配列が必要だったのか」、「オブジェクトはこう使うのか」ということが体験として分かりました。

そして振り返ってみれば、私たちの人生の経験というものも、そのほとんどで「体験が先で、その後で理論」という流れです。

あるいは、体験があったからこそ「なんでそうなるんだろう？」という疑問が自分の内側から湧いてきて、より真剣に取り組める。

---

私は最初からReactを使いたかったので、Reactアプリを作り始めました。

ReactはJavaScriptのフレームワークなので、「JavaScriptを理解してからReactへ進まなければいけない」と考える人は大勢います。

しかし、ReactはHTML／CSSの知識だけあれば使い始めることができます。

Reactの導入部分はHTML／CSSの知識で十分なのです。

しかしそのうち、JavaScriptの知識がないと進められない部分が出てきます。

なので、そこでJavaScriptを勉強するのです。

といっても全体ではありません。必要なJavaScriptの知識だけを勉強する。

「いつ必要になるか分からないこと」ではなく、「いま必要なこと」なので、高いモチベーションで取り組めます。

Reactを目指していない人でも発想は同じです。

まずはJavaScriptでアプリを作ってみましょう。

「必要になったときに必要な知識を覚える」。

これが最も効率的で、挫折率の低い方法です。

## 私がおすすめする進め方
HTMLとCSSを終え、「*次に何をすればいいのか分からない*」と思っているなら、まずはJavaScriptで小さなアプリを作ってみましょう。

勉強だけを続けるよりも、実際に作る経験を増やしていく方が知識は定着します

分からないことが出てきたら、その都度調べる。そして作る。そしてまた調べる。

この小さな積み重ねは時間と共に大きくなり、いつの日にか大きなものになっています。

HTMLとCSSの知識だけでJavaScriptのアプリやReactアプリを作れる教材があるので、参考にしてみてください▼

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C9C9SVFG">
    <img class="bc-cover" src="/images/commonImg/jsbook.svg" alt="はじめてさわるTypeScript" />
    <div class="bc-body">
        <p class="bc-title">はじめてさわるTypeScript</p>
        <p class="bc-desc">—「わたし、JavaScript使えるかも」と1時間で思える本</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>


<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">—5年以上読まれ続けている、HTMLとCSSの知識だけで始められるReact入門書決定版</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

---

# コールドメールとは？成功率を上げる書き方と具体例【実体験あり】

URL: https://monotein.com/blog/what-is-cold-mail
公開日: 2021.11.25
概要: コールドメール（cold email）とは、面識のない相手に送る営業メールのこと。 意味や定義から、開封率を上げる件名の作り方、具体的な文章例まで、 実体験をもとにわかりやすく解説します。日本語では見つからない情報を解説しています。

## コールドメールとは？
日本語で書かれた記事等では、「コールドメール（もしくはコールドEメール）」が次のようによく紹介されています。

---

「*接点のない<ruby>エラい人<rt>・・・・</rt></ruby>や、社会的地位が自分よりも高い人と、コネクションを作るために送るメール*」

---

しかし実は、英語の「Cold mail」とはこの用途に限定されたものではありません。

ビジネスやセールスの目的で送るメールはすべて「コールドメール」と呼ばれます。

つまり日本語でいうところの「営業メール」は「コールドメール」なのです。

「コールドメール」という言葉を使うメリットは、長年使い古された「営業メール」という言葉が持つネガティブな印象がここにはない、という点でしょうか。

言葉が私たちに与える影響力は計り知れないものがあります。

「営業メールを送る」ということには抵抗を感じても、「コールドメールを送る」と言い換えればずいぶん違った印象を受けます

ところで、なぜ「コールド（冷たい）」という単語が名前に使われているのでしょうか？

## 「コールド」の意味
友達にメールを送る場面を考えてみましょう。

ここでメールの送り手と受け手は、メールを受け取る前からすでに知り合いです。

関係性は「暖かい（Warm）」と言えます。

一方でコールドメールは、これまでつながりのなかった「他人」に連絡をとる方法なので、当然、送り手と受け手の間の関係性は暖かくありません。

「コールド」とは、相手とのつながりの薄さを意味しているのです。

一連のカスタマージャーニー、つまり「顧客となるポテンシャルのある人にメールを送ってきっかけを作り、その後のミーティングやニュースレターなどで徐々に関係性を暖めて、セールスにつなげていく」の最初でステップで使われるものが、このコールドメールになります。

## 誰がコールドメールを活用？
先ほど書いたように、「コールドメール」とは「営業メール」なので、営業が必要な人はみな活用しています。

企業の営業部などで仕事をしている人たちは、絶えず知らない人に「コールドメール」を送っては、つながりを築こうとしているでしょう。

特にフリーランスや個人事業主のように、販売や制作、顧客対応までをすべて一人でこなし、時間的リソースが常に不足しているような人たちには、コールドメールは特にコストパフォーマンスの高い方法です。

## コールドメールのメリット
最大のメリットは、コストパフォーマンスに優れている点です。

メールはいつでもどこからでも送れますし、電話のように相手の時間を取ることもありません。

さらに「5分で100人以上に送る」ということも可能なので、その「コスパ」は非常に優れています。

知らない人とつながりを築ける点も大きなメリットでしょう。

イベントや共通の知人からの紹介などの方法は、つながれる人のタイプや数に大きな限界があります。

その点コールドメールは、相手の連絡先さえわかれば、自分の望む相手にメールを送ることができてしまいます（返事があるかは別の話ですが）。

そして「気が楽」という点も大きなメリットでしょう。

知らない人にいきなり電話をかける営業電話（コールドコーリングとも呼びます）や、相手のお店や事務所を訪ねる飛び込み営業のように、他人と直面することがない方法なので精神的には楽といえます。

それでも知らない人にいきなりメールを送ることに抵抗を感じる人は多いと思うので、本記事の最後でその乗り越え方を紹介します。

## コールドメールのデメリット
私たちは日々大量の営業メールを受け取っています。

そのため営業やセールスのにおいがすると、そのメールをそもそも開封しません。

コールドメールはこの「開封されない」「読まれない」という確率が非常に高い方法です。

開封されなかったら、メールの本文に書かれた魅力的な商品やサービスの説明も意味がなくなります。

また「開封されない」以前に、相手の迷惑メールフォルダーに入ってしまって、メールの存在自体気がつかれない可能性も低くありません。

そして相手の受信フォルダに無事届いて、無事開封されても、「所詮はメール」なので、相手も深刻にとらえず無視をする、もしくはそこに書かれたサービスやオファーに魅力を感じてもすぐに忘れてしまう、といったこともよく起きます。

つまりコールドメールは、どちらの側にとっても負担が少ない分、成功率が非常に低い方法といえます。

コールドメールを送ったことのない人は、まずこの点をよく覚えておきましょう。

「そもそも開封されない」「開封されても真面目に読まれない」「真面目に読まれても、すぐに忘れられる」...。

このことを最初に知っておけば、1通や2通送ってなんの反応もないというのは普通で、むしろそれで反応のある方が例外的な状況であるということがわかるでしょう。

## コールドメールの方法
始め方は簡単です。

相手のウェブサイトにメールアドレスは書かれているので、それをコピーして使いましょう。

メールの本文は、事業の種類やそのメールで何を達成したいのかによって異なります。

しかし一つ覚えておきたいことはこれです。

【*メールを読んだだけでいきなり商品やサービスを買おうとする企業・人はいない*】

例えば私のようなウェブサイト制作をしている場合、コールドメールのゴールは「ミーティング」です。

しかし私のメールを読んだだけで、「それではウェブサイト制作をお願いします」という人は普通いません。

ゴールは現実的に考えましょう。

逆から言うと、ゴールを決めていないコールドメールは効果がありません。

送り手がそのコールドメールで何を達成したいのか不明だと、それを読む方はさらに混乱します。

そのためゴールを事前に決め、そこへ読み手を導いていくことが大切です。

私の場合はミーティングの設定なので、コールドメールの最後には「都合のつく時間を教えてください」といったことを書きます。

これはいわゆるCTA（Call To Action）と呼ばれるもので、コールドメールにはしっかり「あなたに〜してもらいたい」「〜してください」といったことを書きましょう。

もちろん、押し付けがましくならないようにすることも大切です。

## よくある失敗と成功させるコツ
ここでは初心者がよくしてしまう間違いを紹介しながら、コールドメールを成功させるコツを説明していきます。

### コピペ文章
コールドメールは「数打ちゃあたる」、つまり「送れば送るほど成功率も上がる」とよく言われますが、これは半分正解で半分間違いです。

理由を少し説明しましょう。

---

営業の方法はコールドメール以外にもたくさんあります。

電話、飛び込み、SNS経由、広告、ネットワーキングイベントetc

その中でもメールを送るだけのコールドメールはかける労力が少ない分、成功率は低くなります。

そしてこの低い成功率を高めるには、そのベースとなるメールの送信数を上げる必要がありますが、当然数が増えれば一通あたりにかけられる労力や時間も減ります。

このようなところから、100人に対してまったく同じ文面を送る「コピペ」のコールドメールが生まれるわけです。

しかし、これはただでさえ成功率の高くないコールドメールの成功率を下げるだけでなく、後で触れるようなメールアドレスがスパム認定される可能性も高めます。

これを避けるには、まず最低でもメールを受け取る人や企業の名前を調べ、メールの冒頭に宛名として書くようにしましょう。

これができている人には当たり前に聞こえると思いますが、実はそうではありません。

私もよくコールドメールを受け取ります。

しかし本ウェブサイトの至る所に書かれている私の名前や、「monotein」という事業名すら書かれていないメールが多くあります。

相手の企業名や代表者名などは、文頭だけでなく文章中にも入れることで、さらにコールドメールをパーソナライズできます。

コールドメールの成功のコツは「このメールは私だけに送っているんだ」と思ってもらうことなので、その受取人固有のもの、たとえば相手の会社の住所やサイトURLなどを文章に含めるのは効果的です。

### 件名が魅力的でない
メールを開封するかどうかは件名にかかっています。

本文の内容がどれだけよくても、件名で相手の興味を惹きつけられないと開封してもらえず、それまでの努力は無になります。

明らかにセールスだと思うメールは開封されないので、私は簡潔で短い件名を使っています。

たとえば「ホームページのアクセスを増やす方法にご興味ないですか？」といった件名は営業のにおいが強いですが、「【ご質問】ホームページについて」という件名だと、まるで一般の人が問い合わせをしてきたように見えます。

件名は重要なポイントなので、自分でトライ＆エラーを繰り返して、効果的なものを見つけましょう。

### メールが長い
コールドメールを受け取った時点では、相手はあなたのことを誰か知りません。

そんな人のメールに時間をかけていられるほど相手は暇でないので、どんなに熱い思いをこめたメールを送るにしても、文章はできるだけ短くしましょう。

一文を短く、かつ一文ごとに改行を入れて、文章がスカスカしているイメージです。

「簡単にさらっと読めそうだ」という印象を持ってもらえます。

### 目的（CTA）が不明確
先ほども書いたように、コールドメールの目的は、売りたいサービスや商品をすぐに買ってもらうことではありません。

多くの場合、まずは一度話し合いの場を機会を作ってもらうことです。

なのでコールドメールの文末には「都合のいい時間を教えて下さい」というような、「相手に取ってもらいたい行動を明確に書いた文章」を必ず入れる必要があります。

意外にこれが抜けているコールメールは多く、その場合、受け取り手は一体何をすればいいのかわからないので、当然何もしません。

相手に取ってもらいたい行動を、あなたの方からしっかりとお願いすることがマストです。

そしてその行動とは「Aをして、次にBをして、次にCをしてetc.」といった複雑なものでなく、頭を使わなくても一瞬で終わるような行動にする必要があります。

たとえば、ミーティングの予約がその場で出来るリンクを添付することなどは効果的です。

### 取得したばかりのドメインで送っている
これは意外に盲点です。

このことに触れている日本語の情報はほとんど見つかりませんが、取得したばかりのドメインで大量にメールを送ると、すぐにスパム認定され、メールが相手に届かなくなります。

実はメールプロバイダーは各ドメインごとに信用度を格付けしており、これが低いとスパム認定され、メールを送っても相手の迷惑メールフォルダへと直行してしまうのです。

こうなるともちろん読まれません。

---

少し具体的に考えてみましょう。

普通の状況、たとえば友達にメールを一通送ったら、一通返信がきます。

そしてこちらがまた返信をして、相手も返事をするという風に続いていくのが普通です。

10分間にメールを100通も送るというのは、さらには返信が0とか1通というのは、メールプロバイダーからすると不審な動きに見えるので、これでドメインがスパム認定されてしまうのです。

これを避ける方法があります。

ドメインのウォームアップ期間を設けることです。

ドメインを取得後、最初の2〜3週間をこのウォームアップに当て、友達にメールを送って返事をもらうなどして、このドメインを普通の用途に使ってることをメールプロバイダーにアピールします。

いくつかのニュースレターに登録したり、SNSの登録アドレスにしたりすると、大量のメールを受信できるので、これも手っ取り早い方法です。

ウォームアップ期間後も、いきなり1日に100通も送るのは控えます。

1週目は20通、2週目は40通、3週目は60通というように徐々に増やしていくのが安全です。

また、これは噂の域を出ない話ですが、メールアドレスが`info@mono-tein.com`や`contact@mono-tein.com`などの一般的なものよりも、`aki-miyoshi@mono-tein.com`や`tanaka@mono-tein.com`といったように、`@`の前が個人名の方がスパム認定されづらい、という情報もあります。

### 1通しか送らない
1通しか送らないのは、ただでさえ成功率の高くないコールドメールの確率をさらに下げる原因です。

1通だけ送ってあとは反応を待つ人は多いですが、これはコールドメールを1通送ることにすら「相手に迷惑をかけている」といった心理的抵抗を感じたのに、2通目なんて押し付けがましい、と考えてしまうためでしょう（この心理的抵抗への対処法は次に紹介します）。

しかし、「メールを見て興味を引かれたけど返事を忘れている」や、「そもそもメールに気が付いていない」といった状況は普通なので、確認の意をこめて2通目、3通目を送ることが成功率を高めます。

## 見ず知らずの人にメールを送る心理的抵抗をなくす方法
コールドメールは他の営業方法と比べて時間も労力も低く済むといっても、見ず知らずの人にメールを送ることに抵抗を感じる人は多いでしょう。

私もその一人で、この心理的抵抗を乗り越えるのにしばらくかかりました。

これを乗り越えるには、相手に何かを売ろうとするセールスの態度や心構えを、自分の中から消すようにしましょう。

コールドメールを送るのは、相手にあなたの商品やサービスを買ってもらい、利益を得るためです。

しかし、ここで利益を受け取るのはあなただけなのでしょうか？

そうではなく、あなたの提供するものが相手の利益になった結果、あなたも利益を手にする、つまりお互いにプラスとなってウィンウィンの関係であるのが普通であり、当然そうなるべきです。

たとえば私が誰かのホームページを制作することによって、私は報酬を得ることができ、相手もネット集客ができるようになって売り上げが増えるという、お互いにプラスの状況が生まれます。

もし片方しか利益を得られないならば、それは単なる詐欺です。

コールドメールを送ることに心理的抵抗を感じる場合は、自分の提供しているサービスや商品が相手のためにもなるという自信をまず持つようにしましょう。

ここが不安定だと、コールドメールに限らず、他の営業／セールスの場面でも弱腰となってしまいます。

私の場合、毎回コールドメールにその相手だけの見本のデモサイトを載せて送っています。

これには2つの効果があります。

まず一つはパーソナライゼーションで、サイトには相手の事業名や住所などが書かれているので、それが使いまわしているものではないことがコールドメールの相手にも明らかになっています。

二つ目は「価値を提供している」という意識です。

デモサイトは一つ一つ作っているので時間がかかりますが、その分「相手に価値を提供している」という感覚も強くなります。

適当に「数打ちゃ当たる」の精神で送らないこと、つまり一通一通にある程度の時間と労力を傾けることは、その分心理的抵抗を減らす効果も高くなります。

## 営業の前提となる「作れるスキル」
最後に一つ。営業やコールドメールは「仕事を得るための手段」ですが、その前提として「自分は何を提供できるのか」という「作れるスキル」があると、営業の選択肢も説得力も大きく変わります。

私はプログラミング（React／フロントエンド開発）を教えていますが、しっかりとしたスキルをつけたい方は、下記の学習ロードマップも参考にしてみてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-learning-roadmap">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-258.png)

</div>
<div class="r-card-text">
【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-cold-mail">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-cold-mail)

---

# Gatsby v4にアップデートしました

URL: https://monotein.com/blog/gatsby-v4-upgrade
公開日: 2021.11.20
概要: v3から半年ほどでリリースされたGatsby v4には、サーバーサイドレンダリングなどの新機能が搭載され、Gatsbyが単なる静的サイトジェネレーター（SSG）から大幅に進化しつつあるのがうかがえます。その他、ビルド時間を短縮する仕組みも導入されています。

## すぐにリリースされたGatsby v4

先日のGatsby v4のリリースに合わせて、本サイトもv3からv4にアップデートしました。

<div class="img-border">

![v4](../../images/singleBlogPageImages/blogArticleImages/blog84/v4.jpg)

</div>

今回のv4のリリースはとても早く、v3から半年ほどしか経っていません。

<div class="rich-card-link">
<a href="/blog/gatsby-v3-upgrade">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-74.png)

</div>
<div class="r-card-text">
当サイトをGatsby v3にアップデートしました
</div>
</div>
</a>
</div>

v2（2018年9月リリース）からv3（2021年3月リリース）までにおよそ3年ちかくあったので、特にそう感じます。

## Gatsby v4の特徴
今回のv4の特徴は次の3つです。

---
• SSR (Server Side Rendering)

• Parallel query running

• DSG (Deferred Static Generation)

---

これまでSSG（Static Site Generation）として主に使われていたGatsbyにも、SSR（Server Side Rendering）がついに導入されました。

これはGatsbyがさまざまなところで使われ、SSGだけでは対応できない場面が見えてきたためでしょう。

SSG以外のParallel query runningとDeferred Static Generationはビルドを高速化する仕組みで、これでさらにビルド時間が短縮されます。

とはいえ全体的には、v3リリース時のような大きな変更はなかったのが個人的な印象です。

## Gatsby v3からv4への移行
v3リリース時には画像を扱う`gatsby-image`が`gatsby-plugin-image`へと変わり、それに合わせてコード変更を行う必要がありました。

今回は、当サイトのようにシンプルな静的サイトとしてGatsbyを使っており、かつv3にすでに移行しているのであれば、v4へのアップデートはスムーズに進むと思います。

当サイトも`gatsby-cli`や各パッケージのアップデートだけでv4移行は完了しました。

## Gatsby v4移行のメリット
v3移行時にもビルド時間は明らかに短くなっていましたが、v4移行後はさらにビルド時間が短くなりました。

目に見えるような恩恵は、今のところこのあたりくらいかと思います。

このように速いペースでアップデートが行われると、過去のバージョンのGatsbyサイトをどうしていくのかという、長期的なメンテナンスの課題も感じます。

Gatsbyに興味のある人は次の記事も参考にしてください。

<div class="rich-card-link">
<a href="/blog/gatsby-seo-and-optimisations">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-57.png)

</div>
<div class="r-card-text">
Gatsbyの検索エンジン最適化（SEO）の全まとめ
</div>
</div>
</a>
</div>



<div class="rich-card-link">
<a href="/blog/making-pagination-for-gatsby-blog">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-89.png)

</div>
<div class="r-card-text">
Gatsbyブログのページネーションの作り方
</div>
</div>
</a>
</div>


<div class="rich-card-link">
<a href="/blog/gatsby-blog-prev-next">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-90.png)

</div>
<div class="r-card-text">
Gatsbyに前後の記事へのリンクを追加する方法
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/gatsby-v4-upgrade">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/gatsby-v4-upgrade)

---

# 出版した本のインタビューを受けました。

URL: https://monotein.com/blog/interview-about-my-books
公開日: 2021.10.06
更新日: 2021.10.08
概要: 私は「はじめてつくるReactアプリ」など計8冊の本を出版していますが、今回そのインタビューを受けました。ここでは、教本執筆前の自分の失敗談や、執筆で工夫した点、苦労したこと、読者からの声で励まされたことなどを話しています。

## 本を書くに至った経緯 
**私の書いた[プログラミング教本](https://www.amazon.co.jp/mod728/e/B099Z51QF2/ref=ntt_dp_epwbk_0)のインタビューを先日受けました。その一部を私のサイトに掲載する許可をもらいましたので、ここで公開します。*

---

―*三好さんはこれまで計8冊（2021年10月時点）のプログラミング教本を執筆されています。中にはAmazonのランキングで一位を何度か取っている本もありますが、三好さんの本業は教本の執筆ということしょうか？*

<div class="img-border">

![book-ranking-page](../../images/singleBlogPageImages/blogArticleImages/blog83/book-ranking-page.jpg)

</div>

三好：いえ、執筆活動は本業とは別でやっています。

本業では、monoteinという事業名のフリーランスとしてウェブ関連分野の課題解決を行ってます。

―*本業のかたわらで本を執筆した理由はなにかあったのでしょうか？　執筆作業は、時間もエネルギーもかなりとられるものだと思いますが。*

三好：そうですね、最初は本を書きたいという気持ちはありませんでした。

そもそも本というのは、誰かその業界の権威なり、その道を極めた人が書くものだという考えがありましたから。

―*それが書くに至った経緯というのは？*

三好：私は、プログラミングを学校で学んでIT企業に就職したとか、文系の大学を出て新卒でIT企業に入ってプログラミングを身につけたというような、日本の一般的なエンジニアの王道ルートを歩んできたわけではありませんでした。

以前はこの業界とは全然別のところ、映像業界やメディア関係にいました。

そういう中で色々あってプログラミングに興味を持つようになるのですが、そこで私がした勉強法というのは自力で教材を見つけ、自分のペースで進める方法でした。

今ではプログラミングスクールが人気ですけど、当時の自分には、学校に行ってみんな一緒にカリキュラムに沿ってやっていくというのが合いそうにないと感じたからです。

自分で色々と調べてみると、「ウェブサイトを作るにはまずHTMLとCSSを知る必要がある」というので、そのための教本を買ってきてやってみました。

そうすると、自分が思っていたよりも簡単にウェブサイトができてしまって。そこで「ウェブサイトって意外に簡単に作れるんだな」ということがわかったのですが、それ以上に「ものづくりをする楽しさ」みたいなものに気がつきました。

ウェブサイトというのは物理的に手で触れるものではないですが、それでも何もないところから自分の手で組み上げていくという点では、まさに「ものづくり」であって、そういった「ものづくりの喜び」は、ウェブサイトを初めて作った時も、いま仕事ととして作るときも変わらずにありますね。

## 最初の挫折

―*そのように、ウェブサイト制作の一歩を順調に踏み出した先で、大きな挫折があったと伺いました。*

三好：ウェブ制作ビギナー向けに書かれたどの本やサイトでも、学習の流れは「HTML → CSS → JavaScript」になっています。

なので私もそれにならって、HTML／CSSの学習の後にJavaScriptの教本を買ってきて読み始めたのですが、まったく頭に入ってきませんでした。

これは後で知ったのですが、こういう風にJavaScriptでつまづく人は実はとても多いようで。

HTMLとCSSは結構直感的にわかるというか、HTMLとCSSはウェブサイトの見た目とダイレクトにつながっていて、コードとその結果表示されるものがある意味で1対1の関係にあるので、「このコードはこういう風な見た目になる」というのがビギナーでも簡単に推測できます。

しかしJavaScriptというのは本格的なプログラミング言語で、そのような1対1にはないので、書いたコードが何をしているのかわかりづらいのです。

私はここで数ヶ月、勉強が止まりました。JavaScriptの本やネット記事などを色々見ても、まったく頭に入ってこないという状態。

一番最初につまづいたのは「オブジェクト」や「メソッド」「関数」といった専門用語です。

JavaScriptをビギナーにも使いやすくしたjQueryというのもありましたが、それすらも当時はよくわかりませんでした。

ただこの時期のことは、「[はじめてつくるReactアプリ](https://www.amazon.co.jp/dp/B08XWMVX76)」などの教本の執筆に大きく役立っていると思います。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">【2026年1月第3版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

―*というのは？*

三好：これまで出版した私の本のほぼすべてが、ReactというFacebookが開発したテクノロジーに関係したものです。

Reactは近年のウェブ制作やウェブアプリケーション制作の現場で広く採用されており、私も普段の業務で欠かさず使うテクノロジーです。

このReactはJavaScriptをベースにしているので、当然学習の順序としては「JavaScript → React」になります。

私は最終的にはReactをマスターしたかったのですが、先ほども言ったようにJavaScriptでつまづいていて、Reactへと進めなかったのです。

Reactの教本を買ってきたりネットの情報を見ても、「JavaScriptを理解してからReactに進むべし」と書かれていました。それでも時折り「とりあえずReactを始めてみよう」と思って勉強を開始しても、すぐに「関数」「定数」「オブジェクト」「配列」「連想配列」などのJavaScriptで使われる専門用語が出てきて、結局先に進めないという状況でした。

## 停滞を抜け出すきっかけとなった動画

―*その停滞の時期を抜け出すきっかけはなんだったのでしょうか？*

三好：ある日YouTubeで、イギリス人のプログラマーがReactを使って小さなアプリの作り方を説明している動画を見たことです。

それは当時の私のようなビギナー向けに作られた動画ではなかったので、彼の説明や書いているコードなどで理解できないところがたくさんあったのですが、それでもとにかく説明に沿って作業を進めていると、アプリがひとつ完成しました。

それは、JavaScriptで長い間つまづいていて忘れていたあの「ものづくりの喜び」をまた思い出した瞬間でしたね。

数年経った今でも、この動画を見ていた場所や時間、周りの景色などをはっきりと思い出せるので、自分の中では大きな出来事だったのだと思います。

そして実際、この日を境にそれまで失いかけていた意欲が戻ってきて、Reactの勉強を精力的に進められるようになり、それまでの停滞の数ヶ月がなんだったのかと思うほどでした。

この時の体験は私の本の基本コンセプトになっています。

アプリをとにかくひとつ自分の手で完成させることが、どれだけ自信を高め、どれだけやる気を引き出すかがわかったので、私の本ではシンプルな説明と最短のルートで、読者をアプリ完成へと導くようにしてあります。

## 実はビギナーには最適でない入門書

プログラミングの教本というと、全範囲をカバーしようとして網羅的な解説が続くものや、例外事項も漏れなく盛り込んだ教科書風のものがたくさんあります。そしてこういった本が往々にして「ビギナー向け」と大々的に宣伝されています。

しかし私としては、こういった本が実はビギナーに一番読ませていけないものだと思います。

私自身こういう本に一番最初に手を出し、そこに書かれていることに圧倒され、つまづいてしまいましたから。

ビギナーが一番最初にすべきことは、とにかく成功体験を作って、「自分でもできるんだ！」という小さな自信を得ることだと思います。

ウェブサイトの見た目（フロントエンド）は、プログラミング業界の中でも特に変化の速いところなので、自分から新しい技術を学んでいくという「自習」の姿勢が特に重要です。

そういう姿勢を養うには、何よりも「自分でもできるんだ」という自己肯定感を高めること、つまり小さな成功体験を積み重ねることが一番有効だと私は思っています。

―*なるほど。自身の挫折経験がこの本の執筆には活きているのですね。「網羅的な解説は目指さない」というのは意外に斬新なコンセプトのように思います。あまり日本的でないというか。*

三好：そうかもしれませんね。

私は大学卒業後に海外に長期で住んでいたので、日本や日本人というものを客観視しているところがあります。

重要でない枝葉の事柄にいつまでもこだわったり、物事に軽重をつけず平等に扱おうとして結果的にうまくいかなかったり、極度の傷つきやすさの裏返しとしての丁寧さと潔癖主義などは、実に日本人的であると感じます。

私も日本人なので、そういった側面が自分の中にも間違いなくあるのですが、そこはなるべく表に出さないようにしていますね。

―*先ほど言われた「人生を変えた」動画ですが、イギリス人のプログラマーということは英語の動画ですか？*

そうです。ただ私はかなり長い間海外に住んでいましたし、イギリスにも数年間いたので、英語は日常のものというか。

いまでも毎日海外の友達とやりとりをしてますし、英語でブログのようなものをよく書いたりしてるので、むしろ「日本語より英語の方が話しやすいな」と思うことも多くありますね。

## 工夫したことや苦労したこと

―*三好さんの本で工夫した点やユニークだと思う点はどこだと思いますか？*

三好：書く上で気をつけたのは、専門用語をなるべく使わないようにすることです。

先ほども言ったように、自分がJavaScriptの勉強を始めた時につまずいたのが、「関数」「オブジェクト」「メソッド」などの言葉の意味や定義でした。

しかし別に専門用語を知らなくてもコードを書いていくことはできます。

例えば私たちが「助詞と助動詞の違い」といったことを知らなくても日本語を話せるように、「知っていること」と「できること」は違うからです。

私の本の最大の目的は読者に小さな成功体験を作ってもらうことなので、専門用語を使わずに済ませられるところはそうしました。

専門用語は、私の本のあと、学習を進めていく中で自然と理解していけることだと思います。

「用語の正しさ」よりも「読みやすさ」を優先させているので、スムーズに進むことの足かせとなる脚注やページ外での補足次項も書かないようにしました。

また、コードを示す時は省略をせず、そのファイル全体のコードをなるべく載せるようにしています。

ネット上の記事などを読んでアプリを作っていると、突然新しいコードが出てきて一体どこの話をしているのか分からなくなることが多かったので、私の本ではコードは毎回しつこいくらいに載せて、本を単独で読んでも理解できるようにしました。

あとは本編前の前書きを少なくすることですね。

だいたいこういう本では、VueやAngularといった他のJavaScriptフレームワークとの比較や、Reactがどのサイトで使われているか、将来性が云々、「仮想ドム」だとか「単方向データバインディング」だとかの話が本編に入るまでに延々と続くことが多いですが、私の本の優先事項はReactに慣れてもらうことなので、こういった前書きは書いていません。

この本を読む人はすでにReactの基本的な情報は知っているでしょうし、「仮想ドム」などの理屈は、自分で実際に使っていく中で理解していくのが一番だと思います。

―*執筆時に苦労したことや大変なことはありましたか？*

三好：教本を書くときは毎回そうですが、本の中で制作する見本アプリを作るのに時間がかかります。

普通の教本で作るウェブサイト、特にアプリ系は、機能重視で見た目がイマイチというパターンが多いと思います。

私の本では冒頭で「この本ではこういうものを作ります」と示すことにしていて、そこでデザインやスタイルが中途半端なものを示すと、読者もやる気が出ないと思うで、なるべく見た目が悪くないもの、最近のデザインのトレンドを盛りこんだものを見本アプリとして作るようにしました。

![weather-app](../../images/singleBlogPageImages/blogArticleImages/blog83/weather-app.jpg)

意外に時間がかかるのは、書き終わった後の読み直しのプロセスです。

そこで誤字脱字やコードのミスなどを直していきますが、読み直しは執筆作業と同じくらい疲れます。

また、書く作業をしている人は皆これを経験していると思いますが、何度か読み直して「もう誤字脱字はない！」と思っても、まだ抜けている文字があったりするのは、執筆作業の七不思議だと思いますね。

## 読者からの声に励まされる

―*そうやってこだわりを込めて完成した本ですが、出版後の反応はどうでしたか？*

三好：読者からメッセージを頂いたり、Amazonでここまでポジティブなレビューを付けて頂けたりしたのは意外でしたね。

日本だと、ReactのライバルともいえるVueというテクノロジーの方がポピュラーなので、Reactにはそこまでニーズはないだろうと思っていました。

「学習していて面白かった」や「アプリを完成させた経験が前に進むモチベーションになります」といったような言葉を頂き、私の本を純粋に楽しみながら役立てて頂いたようで嬉しく思いました。

―*読者からのリクエストなどはありましたか？*

三好：一番最初に出版した「はじめてつくるReactアプリ」の発売後しばらくして、「TypeScript版を書いて欲しい」という声を読者の人から頂きました。

たしかに最近の開発現場では、TypeScriptと一緒にReactを使うことが多いので、「[はじめてつくるReactアプリ with TypeScript](https://www.amazon.co.jp/dp/B094Z1R281)」を書きました。

現時点で、これが一番読まれている本です。

<div class="img-border">

![book-single-page](../../images/singleBlogPageImages/blogArticleImages/blog83/book-single-page.jpg)

</div>

これまで書いてきた各本の違いについては、次の記事を参考にしてください。


<div class="rich-card-link">
<a href="/blog/what-to-do-after-studying-html-css#react%E3%81%AE%E5%8B%89%E5%BC%B7%E3%81%AE%E9%80%B2%E3%82%81%E6%96%B9">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-87.png)

</div>
<div class="r-card-text">
HTMLとCSSの勉強後、何をすればいいのかわからない・・・
</div>
</div>
</a>
</div>

この本は私の本の中で一番評価が高いものになってます。

―*最後に、今後書きたい本などはありますか？*

三好：HTMLとCSSの本を書きたいと思っています。

最近忙しいのでいつになるのかわかりませんが、ウェブサイトを今まで作ったことがない完璧なビギナー向けにHTMLとCSSを解説した本を書きたいと思っています。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/interview-about-my-books">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/interview-about-my-books)

---

# フロントエンドとバックエンドの違いとは？APIやサーバーの役割も初心者向けに全解説

URL: https://monotein.com/blog/frontend-and-backend
公開日: 2021.10.04
更新日: 2026.5.25
概要: ウェブ開発でよく出てくるフロントエンド・バックエンド・サーバー・データベース・APIという言葉。それぞれの役割と関係を、実際のアプリを例に使いながら、初心者向けに図解でわかりやすく解説します。

## ウェブアプリの開発プロセス
ウェブアプリケーションの開発は、『フロントエンド開発』と『バックエンド開発』とに分けられます。

「フロントエンド」とは、GoogleクロームやSafariなどのブラウザ上で表示される部分です。

ユーザーが目にするところになります。

一方で「バックエンド」とは、フロントエンド上でユーザーが入力したデータを処理したり、保存したりする部分です。

ユーザーが目にすることはありません。

![back-front.png](../../images/singleBlogPageImages/blogArticleImages/blog82/frontend-backtend.png)

しかしこういった言葉だけの説明ではわかりづらいので、実例を見ていきましょう。

## フロントエンドとバックエンドを実例で確認
下記URLを開いてください。

• [https://react-book-corona-tracker-app.netlify.app/world](https://react-book-corona-tracker-app.netlify.app/world)

これは私が制作・販売している教材で作った見本ウェブアプリです。

フロントエンド開発で使われるReactというテクノロジーをビギナー向けに解説した『[はじめてさわるReact & JavaScript](https://www.amazon.co.jp/dp/B09693ZJCV)」』という教材です。

URLを開くと、次図のように世界各国のコロナウィルスのデータが表示されています。

![frontexample](../../images/singleBlogPageImages/blogArticleImages/blog82/frontexample.jpg)

ここで考えたいことがひとつあります。

「ここに表示されているデータはどこから来ているのか？」ということです。

答えを見てみましょう。

下記URLにアクセスしてください。

• [https://monotein-books.vercel.app/api/corona-tracker/summary](https://monotein-books.vercel.app/api/corona-tracker/summary)

次のように表示されます。

<div class="img-border">

![json.jpg](../../images/singleBlogPageImages/blogArticleImages/blog82/json.jpg)

</div>

文字や数字がいくつも書かれていて複雑に見えます。

なので、ページの上のあたり（次図の青でカバーされている部分）に注目してください。

<div class="img-border">

![json-blue](../../images/singleBlogPageImages/blogArticleImages/blog82/json-blue.jpg)

</div>

ここに改行を入れて見やすくすると、次のようになっています。

```js
...

"Countries": [
    {
        "ID": "002d8576-d908-4d9c-a5e3-4f7b27426ec5",
        "Country": "Afghanistan",
        "CountryCode": "AF",
        "Slug": "afghanistan",
        "NewConfirmed": 0,
        "TotalConfirmed": 155191,
        "NewDeaths": 0,
        "TotalDeaths": 7206,
        "NewRecovered": 0,
        "TotalRecovered": 0,
        "Date": "2021-10-04T22:48:42.803Z",
        "Premium": {}
    },

...
```

`"Country"`という「国名」には`"Afghanistan"`とあります。

`"TotalConfirmed"`、つまり「感染者総数」には`155191`とあります。

次に、先ほど開いたウェブアプリケーションの左上（下図の赤枠）を見てみましょう。

![frontexample-red.jpg](../../images/singleBlogPageImages/blogArticleImages/blog82/frontexample-red.jpg)

そうすると「Afghanistan」とあり、「感染者総数」には、上で見た`"TotalConfirmed"`と同じ数字が表示されています。

「Afghanistan」以外の国を見ても、上の2つのURLには同じような対応関係が成りたっています。

ここから考えられるのは、次のことです。

---

• *表示されている全世界の感染データは、このウェブアプリケーションが自ら計算や測定をして生み出しているのではない*

• *ウェブアプリケーションがデータを`https://monotein-books.vercel.app/api/corona-tracker/summary`から取得しているだけ*

• *私たちが目にしている紫色の背景やピンクの文字といったウェブアプリケーションのフロントエンド部分は、バックエンドから取得した数字と文字だけの無機質なデータに、色や形をつけて見やすくしているだけ。*

---

つまり、ウェブアプリケーションにおけるフロントエンドとは、バックエンドからのデータを表示する空（から）の入れ物なのです。

バックエンドのデータがあって初めて意味があるのです。

テレビを考えてみましょう。

もしケーブルのつながっていないテレビがあったら、それは単なる大きな黒い箱に過ぎません。

しかしそこにケーブルをつなぎ、放送を受信できるようにしてあげると、画面に色とりどりの景色や人や物が表示され、私たちの役に立つものとなります。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/frontend-and-backend">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/frontend-and-backend)

## データベースやサーバー、APIはどのような関係にあるか？
多くのウェブアプリケーションには、データを保存する場所が必要です。

「データベース」です。

そのため通常「バックエンド」というと、「データベース」と「サーバー」を合わせたものを指します。

ここまで「フロントエンド」「バックエンド」「データベース」「サーバー」など、さまざまな言葉が出てきましたが、これらは次図のような関係にあります

![front-back-end-new-ver-oct2024.png](../../images/singleBlogPageImages/blogArticleImages/common/front-back-end-new-ver-oct2024.png)

なお、先ほどの感染データのように、バックエンドが提供するデータは通常「API」と呼ばれます。

• 「*APIにつなぐ*」\
• 「*APIからひっぱってくる*」\
• 「*APIから取得する*」

これらは、バックエンドが提供するデータについて話しています。

![back-front-api.png](../../images/singleBlogPageImages/blogArticleImages/blog82/frontend-backtend-api.png)

世界の天気や人口動態、外国為替、株価、AI回答など、様々なデータを提供しているAPIサービスは数多くあります。

それらのサービスはバックエンドの代わりになります。

フロントエンドを作るだけで、ウェブアプリケーションを作れるのです。

## フロントとバック、両方作れるNext.js
2026年のアプリ開発では、Next.jsというツールを使うのが主流です。

フロントエンドとバックエンドを一緒に開発できるからです。

Next.jsについて包括的に理解したい方はこちらのガイドをどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

React + Viteとの比較や学習の始め方は、こちらのガイドも参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/frontend-and-backend">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/frontend-and-backend)

---

# 【作って比較】「ヘッドレスWordPress」と「普通のWordPress」

URL: https://monotein.com/blog/comparison-headless-wordpress-and-normal-wordpress
公開日: 2021.07.26
更新日: 2022.01.25
概要: 「ヘッドレスWordPress」と「普通のWordPress」で、同じウェブサイトを作りました。Lighthouseのスコア比較や、実際の使い心地を紹介していきます。ヘッドレスWordPressの高速スピードがよくわかります。

## 「普通のWordPress」と「ヘッドレスWordPress」
ここ最近、WordPressをヘッドレス化する案件が続いていたのですが、今回はそれを少し拡張して、同じウェブサイトをWordPressとヘッドレスWordPressで作って比較をしてみます。

下記URLがそれぞれのサイトになります。

アクセスして使い心地を比べてみてください。

---

• 普通のWordPressサイト: [monotein-demo-wordpress.site](https://monotein-demo.site/?r=monotein)（*2022年1月追記：昨年7月よりこのドメインでWordPress版を公開していましたが、現在メンテナンス中で公開を停止しています）

• ヘッドレスWordPressサイト: [monotein-demo.site](https://monotein-demo.site/?r=monotein)

---

両サイトとも、WordPressはAWSのLightsailでホストしています。

「ヘッドレスWordPress」の方は、フロントにGatsbyを使い、ホストとbuildはGatsby Cloudで行っているので、典型的なJamstackの構成といえます。

## ヘッドレスWordPressとはなにか？
これまでにいくつかヘッドレスに関して記事を書いていますが、ここで改めてWordPressを例にとって、ヘッドレスを簡単に紹介します。

WordPressをはじめとする従来型のCMSは、「フロント画面」と「管理画面」からできています。

「フロント画面」とは、ユーザーがアクセスするウェブサイト部分です。

「管理画面」とは、サイト管理人がコンテンツの制作や管理などを行う部分になります。

WordPressではこの2つがワンセットで提供されているので、ビギナーでも簡単にウェブサイトの立ち上げと運営を行っていけます。

しかしその便利さと引き換えのデメリットとして、「スピードが遅い」「セキュリティが弱い」といった数々の問題もあります。

それらの解決策として出てきたのが「ヘッドレス（CMS）」で、これは「フロント画面」と「管理画面」とを、別々に制作する方式になります。

![traditional-headless-cms](../../images/singleBlogPageImages/blogArticleImages/jamstack/traditional-headless-cms.png)

これまで一緒に提供されていたものを、わざわざ2つに分けるメリットは何でしょうか？

その筆頭はパフォーマンスの高さになります。

それぞれの部分が独立しているため、相互干渉を受けることなくサイトが動き、アクセスしてきたユーザーに高速でページを表示できるようになります。

またヘッドレスWordPress特有のメリットとして、サイト自体がサクサクと高速で動くにも関わらず、下の画像のように管理画面はWordPressと同じなので、従来のWordPressユーザーでもストレスなく使うことができます。

![admin-panel](../../images/singleBlogPageImages/blogArticleImages/jamstack/wp-headless-admin.jpg)

## スピードの比較

実際に上の2つのウェブサイトにアクセスして、いくつかページを開いてみればわかりますが、ヘッドレスWordPressの方がサクサクと動きます。

客観的なデータとして、Lighthouseのスコアも次のようになっています。

---

• 普通のWordPress

<div class="img-border">

![lighthouse-normal-wp](../../images/singleBlogPageImages/blogArticleImages/jamstack/wp-score1.jpg)

</div>

• ヘッドレスWordPress

<div class="img-border">

![lighthouse-headless-wp](../../images/singleBlogPageImages/blogArticleImages/jamstack/headless-score1.jpg)

</div>

サイトのスピードは「Performance」で表されます。

「普通のWordPress」が「29」なのに対し、「ヘッドレスWordPress」が「97」と、ヘッドレスWordPressの方がスピードは圧倒的に出ています。

「ページ表示に3秒以上かかると50%以上のユーザーが離脱する」といわれるように、スピードはウェブサイトでもっとも重視される要素です。

Googleも、2021年から導入したコア・ウェブ・バイタルによって、検索ランキングの順位を決める要素として「スピード」を重視する姿勢を明確にしているので、高速スピードはSEOにも関わる重要なファクターとなっています。

## 使い勝手とセキュリティ
通常WordPressを使う時には、SEOやセキュリティに関してのプラグイン導入がデフォルトになっているので、今回も「普通のWordPress」サイトの方にはプラグインがいくつか入っています。

一方で「ヘッドレスWordPress」の方では、プラグインは不要なので、入っていません。

このプラグインの有無はサイトのスピードにも関わってきますが、特に影響が大きいと感じたのは管理画面での作業時です。

「普通のWordPress」の方は非常に動作が重くもっさりしていたので、ここで長期間コンテンツの制作やサイト管理を行うのは非常にストレスになると容易に想像できました。

またセキュリティに関して、WordPressでは以前からその脆弱性が指摘されています。

これはサイトURLの末尾に`/wp-admin`と付ければ、簡単にログイン画面に行けてしまうことが大きな理由です。

この点では「ヘッドレスWordPress」の方も、URLに`/wp-admin`を入れればログイン画面へと行けてしまいますが、「普通のWordPress」との最大の違いは、そのURL自体を隠しておくことができる点です。

つまり「ヘッドレスWordPress」の管理画面は、必ずしもフロント側のURLと同じである必要はないので、仮に上の「ヘッドレスWordPress」サイトのURLの末尾に`/wp-admin`をつけてアクセスしても、404ページが表示されるだけです。

これは、この「ヘッドレスWordPress」サイトの管理画面が別ドメイン（今回はサブドメイン）に立てられているからで、そのURLがわからない限り、ログイン画面へは行くことができず、高いセキュリティ性が担保されます。

## 「普通のWordPress」のメリット
ここまで「ヘッドレスWordPress」のメリットを取り上げてきましたが、それでは「普通のWordPress」のメリットは無いのでしょうか？

この比較のために、今回私は数年ぶりにWordPressサイトを作ったのですが、そこで思ったのは「ビギナーフレンドリー」です。

WordPressにはサイトに必要な機能があらかじめ用意してあるので、ダウンロードをすれば、30分もかからずにサイトを立ち上げられます。

「ヘッドレスWordPress」の場合は、さすがにここまでスピーディな立ち上げはできず、つなぎ込みをはじめとする複雑なプロセスが絡んできます。

この複雑さはヘッドレスWordPressのメリットと引き換えですが、今回改めてWordPressサイトの立ち上げにおけるビギナーフレンドリーの点には感心しました。

## ヘッドレスと普通のWordPress、どっちがいい？

検索ランキングという「入り口」から、ページ離脱率、CV率、アイテム購入率という「出口」まで、ウェブサイト全体に大きく関係するのが「スピード」です。

上でも少し触れたように、Googleはスピード重視の姿勢を打ち出しており、スピードの遅いウェブサイトは成果をあげるのが難しくなっています。

普通のWordPressは簡単に立ち上げられるので、趣味のサイトを立ち上げたり、個人が小規模サイトを立ち上げるいいでしょう。

しかしアクセスを集めたり、CVをある程度を出す必要のあるビジネス用途のウェブサイトでは、ヘッドレスWordPressの方が適切だろうというのが私の考えです。

---

# Next.jsにマークダウンのブログ機能を追加する方法

URL: https://monotein.com/blog/nextjs-making-markdown-blog
公開日: 2021.06.26
更新日: 2021.12.25
概要: 多機能なNext.jsにブログ機能を追加するには、コードを書いていく必要があります。getStaticPaths()とgetStaticProps()を使ってマークダウンファイル（.md）からブログ機能を生成します。

## Next.jsでのブログ機能の作り方
Next.jsと同じReactベースのGatsbyでは、「`gatsby-node.js`に必要なコードを書いてGraphQLを使う」という風に、ブログ機能を作る手順やデータを扱う方法が標準化されていますが、フルスタックのアプリケーションでも使える多機能なNext.jsでは、自分でコードを書いていく必要があります。

本記事では`create-next-app`を使って、ブログ機能の作り方を簡潔に紹介します。

ロジック部分の説明だけなので、スタイルは各自好みで設定してください。

またNext.jsの機能をフル活用してアプリケーションを作る方法に興味ある方は、下記教本を参考にしてください。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B09YWSHR58">
<div class="img-border img40percent" style="padding-top: 30px;">

![next-book2-1"](../../images/commonImg/nextbook2-1.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B09YWSHR58)


## ブログ機能の下準備
まず`create-next-app`をダウンロードします。

```shell
npx create-next-app nextjs-blog
```

ブログ機能に必要なものは、「ブログ記事を一覧表示するページ」「個別の記事を表示するページ」、そして「記事データ（マークダウンファイル）」です。

では最初に「ブログ記事を一覧表示するページ」から作っていきます。

ルートフォルダは次のような構成になっているので、記事を一覧表示するページとなる`blog.js`、そして記事データのマークダウンファイルを収納するフォルダ`data`を作ります。

```shell
nextjs-blog
├── data      ←追加
├── pages   
│       ├── api                
│       │    └── hello.js       
│       │
│       ├── _app.js
│       ├── blog.js  ←追加
│       └── index.js   
│     
```
次に、`data`の中にブログ記事のファイルを作ります。

```shell

├── data
│      ├── first.md    
│      ├── second.md  
│      ├── third.md   
│      ├── fourth.md  
│      ├── fifth.md   
│      └── sixth.md    
```

それぞれのマークダウンファイルには、下のように基本的な情報を書きます。

```md
// first.md

---
id: "1"
title: "記事1"
date: "2021-06-21"
summary: "記事1の要約"
---

1つ目の記事。
```

```md
// second.md

---
id: "2"
title: "記事2"
date: "2021-06-22"
summary: "記事2の要約"
---

2つ目の記事。
```

```md
// third.md

---
id: "3"
title: "記事3"
date: "2021-06-23"
summary: "記事3の要約"
---

3つ目の記事。
```

```md
// fourth.md

---
id: "4"
title: "記事4"
date: "2021-06-24"
summary: "記事4の要約"
---

4つ目の記事。
```

```md
// fifth.md

---
id: "5"
title: "記事5"
date: "2021-06-25"
summary: "記事5の要約"
---

5つ目の記事。
```

```md
// sixth.md

---
id: "6"
title: "記事6"
date: "2021-06-26"
summary: "記事6の要約"
---

6つ目の記事。
```

次にNext.jsでマークダウンファイルを扱うためのパッケージもダウンロードしておきます。

```shell
npm install raw-loader gray-matter react-markdown
```

そして`next.config.js`ファイルを、フォルダのトップレベル（ルート）に作ります（`next`のバージョンによってはデフォルトですでに用意されている場合があります）。

`next.config.js`には下のコードを書きます。

```js
// next.config.js

module.exports = {
    webpack: function (config) {
        config.module.rules.push({
            test: /\.md$/,
            use: "raw-loader",
        })
        return config
    },
}
```
これで下準備が完了です。

## 記事一覧ページを作る
Next.jsにはデータ操作のためのファンクションが用意されているので、そのうちの一つ、`getStaticProps()`を使って、マークダウンのデータを読み込みます。

`blog.js`を開き、次のコードを追加します。

```js
// blog.js

const Blog = () => {
    return (
        <p>ブログ一覧ページ</p>  
    )
}

export default Blog

export async function getStaticProps() { 
    return {            
        props: {
 
        },      
    }                   
} 
```
`getStaticProps()`には次のようにコードを追加します。

```js
// blog.js

import matter from "gray-matter"

...

export async function getStaticProps() { 
    const blogs = ((context) => {
        const keys = context.keys()  
        const values = keys.map(context) 
        const data = keys.map((key, index) => {
            let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)
            const value = values[index]
            const document = matter(value.default)
            return {
                frontmatter: document.data,
                slug: slug
            }
        })
        return data
    })(require.context('../data', true, /\.md$/))
        
    return {            
        props: {
 
        },      
    }                   
} 
```

こうすることで、マークダウンファイル(`.md`)が、この`blog.js`に読み込まれました。

定数`blogs`を`return`の`props`に渡してやると、Blogコンポーネントに`props`として渡されます。

```js
// blog.js

import matter from "gray-matter"

const Blog = (props) => {
    return (
        <p>ブログ一覧ページ</p>  
    )
}

export default Blog

export async function getStaticProps() { 
    const blogs = ((context) => {
        const keys = context.keys()  
        const values = keys.map(context) 
        const data = keys.map((key, index) => {
            let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)
            const value = values[index]
            const document = matter(value.default)
            return {
                frontmatter: document.data,
                slug: slug
            }
        })
        return data
    })(require.context('../data', true, /\.md$/))
    
    return {            
        props: {
            blogs: blogs 
        },      
    }                   
} 

```

ここでエラーが出る場合は、次のようにJSON操作のコードを加えてください。

```js
...

    return {            
        props: {
             blogs: JSON.parse(JSON.stringify(blogs))
        },      
    }  
```

また、この時点ではブログの表示される順番が乱れているので、マークダウンファイルの`id`の高い順に並び替えます。

`sortingArticles`というファンクションを作り、次のように追加します。`props`に渡すものも`sortingArticles`に変更します。

```js
// blog.js

...

export async function getStaticProps() {
    const blogs = ((context) => {
        const keys = context.keys()
        const values = keys.map(context)
        const data = keys.map((key, index) => {
            let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)
            const value = values[index]
            const document = matter(value.default)
            return {
                frontmatter: document.data,
                slug: slug
            }
        })
        return data
    })(require.context('../data', true, /\.md$/))

    const sortingArticles = blogs.sort((a, b) => {
        return b.frontmatter.id - a.frontmatter.id
    })

    return {
      props: {
        blogs: JSON.parse(JSON.stringify(sortingArticles))
      }
    }
}
```

`/blog`ページに、記事タイトルと個別記事へのリンクを表示させるコードを追加します。

```js
// blog.js

import Link from 'next/link'
import matter from "gray-matter"

const Blog = (props) => {
    return (
        <>
            <p>ブログ一覧ページ</p> 
            {props.blogs.map((blog, index) => (
                <div  key={index}>
                    <h2>{blog.frontmatter.title}</h2>
                    <Link href={`/blog/${blog.slug}`}><a>Read More</a></Link>
                </div>
            ))}
        </>
         
    )
}

export default Blog

...
```

これで記事一覧ページのロジックは完成です。

## 個別記事ページを作る
記事一覧ページから移動する個別の記事ページを作ります。

まずはテンプレートとして使うファイルを次のように作ります。

```shell

├── pages  
│       ├── api    
│       ├── blog  ←作成
│       │      └── [slug].js ←作成 
│       ├── _app.js
│       ├── blog.js      
│       └── index.js  

```
`[slug].js`では、最初に`getStaticPaths()`を使ってマークダウンのファイル名からURLを生成します。

次のコードを追加します。


```js
// [slug].js

const SingleBlog = () => {
    return (
        <p>個別の記事ページ</p>  
    )
}

export default SingleBlog

export async function getStaticPaths() {
    const blogSlugs = ((context) => {
        const keys = context.keys()
        const data = keys.map((key, index) => {
          let slug = key.replace(/^.*[\\\/]/, '').slice(0, -3)
        return slug
    })
    return data
    })(require.context('../../data', true, /\.md$/))

    const paths = blogSlugs.map((blogSlug) => `/blog/${blogSlug}`) 

    return {
        paths: paths, 
        fallback: false,
    }
}

```
これでURL(= slug)の生成が完了です。

次にマークダウンのデータを読み込みます。ここは先ほどの`blog.js`とほぼ同じです。

違いは必要な記事データ一つだけを読み込むことで、すべてのマークダウンファイルではないことです。

```js
// [slug].js

import matter from "gray-matter"

...

export async function getStaticProps(context) {    
    const { slug } = context.params
    const data = await import(`../../data/${slug}.md`)
    const singleDocument = matter(data.default)
    
    return {
      props: {
        frontmatter: singleDocument.data,         
        markdownBody: singleDocument.content,      
      }
    }
}
```
これで`blog.js`と同じように、SingleBlogコンポーネントに`props`として、そのページで必要なマークダウンのデータが渡されました。

マークダウンの本文部分の処理には、先ほどダウンロードした`react-markdown`が必要なので、追加します。

```js
// [slug].js

import matter from "gray-matter"
import ReactMarkdown from 'react-markdown'

const SingleBlog = (props) => {
    return (
        <div>               
            <h1>{props.frontmatter.title}</h1>
            <p>{props.frontmatter.date}</p> 
            <ReactMarkdown children={props.markdownBody} />
        </div>  
    )
}

export default SingleBlog

...

```

`<ReactMarkdown children={props.markdownBody} />`でエラーが出る場合は、次のようにしてください。

```js
<ReactMarkdown>
    {props.markdownBody}
</ReactMarkdown>
```

以上でNext.jsにブログ機能を作成することができました。

Pages Routerを使ったブログ機能の実装が分かったところで、現在のNext.jsの標準スタイルであるApp Router・RSC・Server Actionsを使った開発の全体像はこちらのガイドで確認できます▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

ページネーション機能を追加したい人は、次の記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/nextjs-pagination">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-99.png)

</div>
<div class="r-card-text">
Next.jsにページネーションをNPMパッケージなしで追加する方法
</div>
</div>
</a>
</div>

<br/>

前後の記事へと移動するリンクの作り方は、こちらの記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/nextjs-blog-prev-next">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-98.png)

</div>
<div class="r-card-text">
Next.jsのブログに前後記事へのリンクを追加する方法
</div>
</div>
</a>
</div>

<br/>

本記事では細かい説明を省略して足早に解説しましたが、Next.jsについてよりくわしく知りたい方は、拙著「[はじめてつくるNext.jsサイト](https://www.amazon.co.jp/dp/B0C7746ZC4)」を参考にしてください。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0C7746ZC4">
<div class="img-border img40percent" style="padding-top: 30px;">

![nextbook](../../images/commonImg/nextbook.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B0C7746ZC4)



<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-making-markdown-blog">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/nextjs-making-markdown-blog)

---

# プログレスバーの作り方（React / Vite / Next.js）

URL: https://monotein.com/blog/making-a-progress-bar-for-react
公開日: 2021.05.11
概要: ページの残りの分量をユーザーに知らせるプログレスバーは、特にモバイルのUXを高めるのに欠かせません。この記事ではReact向けにrefとuseEffectを使って、パッケージなどは使わずに作っていきます。Next.jsやGatsbyでも利用できます。

## プログレスバーとは？

このページの上部には下のように青色のバーが出ています。

![progressbar.jpg](../../images/singleBlogPageImages/blogArticleImages/blog76/progressbar.jpg)

これは「プログレスバー」と呼ばれるもので、ユーザーがスクロールするのに合わせて長さが伸びていき、ページの残りの量を知らせてくれます。

ブラウザの右横のスクロールバーはデスクトップでは常時出ているケースが多いですが、モバイルではスクロールしている時以外は消えています。

そのためプログレスバーは、特にモバイルのユーザーへのUX対策として多くのウェブサイトで導入されているのです。

この記事ではReactのプログレスバーを作っていきます。

記事ページなどのように、記事の文字数や分量によってページの長さが異なるケースに対応するプログレスバーです。

もちろんReactなので、GastbyやNext.jsでも使用できます。

## 制作するコード
先出しすると、下がこれから作るコードの全体像です。

説明を読んでいる時間のない人は、これをコピーして使ってください。

```js
// progressBar.js

import React, { useState, useEffect, useRef } from 'react'
import { useScrollPosition } from "./useScrollPosition"

const ProgressBar = ({ children }) => {
    const [height, setHeight] = useState(0)
    const ref = useRef(null)

    useEffect(() => {
        setHeight(ref.current.clientHeight)
    }, [])

    const scrollPosition = useScrollPosition()
    
    const percentage = (1 - ((height - scrollPosition) / height)) * 100
    const adjustPercentage = 100 < percentage ? 100 : percentage

    return (
        <div ref={ref}>
            <div className="progress-bar-container">
                <div style={{width: `${adjustPercentage}%`}}></div>
            </div>
            {children}
        </div>
    )
}

export default ProgressBar

```

```js
// useScrollPosition.js

import { useState, useEffect } from 'react'

export const useScrollPosition = () => {
    const [scrollPosition, setScrollPosition] = useState(0)
    const handleScroll = () => {
        const position = window.pageYOffset
        setScrollPosition(position)
    }
    
    useEffect(() => {
        window.addEventListener('scroll', handleScroll, { passive: true })
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    }, [])

    return scrollPosition
}

```

```scss
// progressBar.scss

.progress-bar-container {
    position: fixed;
    top: 100px;
    height: 3px;
    width: 100%; 
    z-index: 10;
    div {
        height: 100%;
        background-color: rgb(0, 255, 255); 
        opacity: 0.7;
    }
}

```

## 必要なもの

プログレスバーに必要なものは次の3つです。

---

• 現在のスクロール位置

• ページのheight

• スクロールの進み具合のパーセント（ =「height」から「現在のスクロール位置」を引き、それを「height」で割ったもの）

---

それではそれぞれ作っていきましょう。

## スクロールを位置を求めるカスタムHookを作る
最初に、現在のスクロール位置を特定するファンクションをカスタムHookとして作ります。

以下のコードになります。

```js
// useScrollPosition.js

import { useState, useEffect } from 'react'

export const useScrollPosition = () => {
    const [scrollPosition, setScrollPosition] = useState(0)
    const handleScroll = () => {
        const position = window.pageYOffset
        setScrollPosition(position)
    }
    
    useEffect(() => {
        window.addEventListener('scroll', handleScroll, { passive: true })
        return () => {
            window.removeEventListener('scroll', handleScroll)
        }
    }, [])

    return scrollPosition
}

```

これで現在のユーザーのスクロール位置がわかるようになりました。

## progressBar.jsを作る
次にプログレスバーのファイル、`progressBar.js`を作りましょう。

そこにベースとなる次のコードを打ちます。

```js
// progressBar.js

import React, { useState, useEffect, useRef } from 'react'

const ProgressBar = () => {
    return (
        <div>

        </div>
    )
}

export default ProgressBar

```

##  ページのheightを求める

次に`ref`と`useState`、`useEffect`を使ってページの高さを求めます。

ここではブログの記事ページなどでの使用を想定しており、記事の文章量によってページの長さも変わってくるので`ref`が必要です。

```js
// progressBar.js

import React, { useState, useEffect, useRef } from 'react'

const ProgressBar = ({ children }) => {
    const [height, setHeight] = useState(0)
    const ref = useRef(null)

    useEffect(() => {
        setHeight(ref.current.clientHeight)
    }, [])

    return (
        <div ref={ref}>

        </div>
    )
}

export default ProgressBar

```

## スクロールの進み具合を求める
先ほど作った`useScrollPosition`を使って、スクロールの進み具合を出します。

```js
// progressBar.js

import React, { useState, useEffect, useRef } from 'react'
import { useScrollPosition } from "./useScrollPosition"

const ProgressBar = ({ children }) => {
    const [height, setHeight] = useState(0)
    const ref = useRef(null)

    useEffect(() => {
        setHeight(ref.current.clientHeight)
    }, [])

    const scrollPosition = useScrollPosition()
    
    const percentage = (1 - ((height - scrollPosition) / height)) * 100
    const adjustPercentage = 100 < percentage ? 100 : percentage

    return (
        <div ref={ref}>

        </div>
    )
}

export default ProgressBar

```

上のコードの`adjustPercentage`がスクロールの進み具合になり、`100 < percentage ? 100 : percentage`でパーセントが100を超えないよう制御しています。

`adjustPercentage`の数値をページの幅（width）に設定すると、スクロールする毎にバーが伸びていきます。


```js
// progressBar.js

...

return (
    <div ref={ref}>
        <div className="progress-bar-container">
            <div style={{width: `${adjustPercentage}%`}}></div>
        </div>
    </div>
)

...

```

そして`progressBar`コンポーネントは、使いたいページのコンポーネントを包むように配置する必要があるので`children`が必要になります。

`progressBar.js`全体は以下のようになっています。

```js
// progressBar.js

import React, { useState, useEffect, useRef } from 'react'
import { useScrollPosition } from "../hooks/useScrollPosition"

const ProgressBar = ({ children }) => {
    const [height, setHeight] = useState(0)
    const ref = useRef(null)

    useEffect(() => {
        setHeight(ref.current.clientHeight)
    }, [])

    const scrollPosition = useScrollPosition()
    
    const percentage = (1 - ((height - scrollPosition) / height)) * 100
    const adjustPercentage = 100 < percentage ? 100 : percentage

    return (
        <div ref={ref}>
            <div className="progress-bar-container">
                <div style={{width: `${adjustPercentage}%`}}></div>
            </div>
            {children}
        </div>
    )
}

export default ProgressBar

```

## CSSを書く

最後にCSSを書きましょう。

ここではSCSSを使っています。

```scss
// progressBar.scss

.progress-bar-container {
    position: fixed;
    top: 100px;
    height: 3px;
    width: 100%; 
    z-index: 10;
    div {
        height: 100%;
        background-color: rgb(0, 255, 255); 
        opacity: 0.7;
    }
}

```

## progressBar.jsの使い方
これを下のように使いたいページで読み込みます。

ここではブログ記事のコンポーネントに読み込むことを想定しています。

```js
// singlePost.js

import React from 'react'
import Layout from "./layout"
import ProgressBar from "./progressBar"
import PostBody from "./postBlody"
import LatestPosts from "./latestPosts"

const SinglePost =() => {
    return (
        <Layout>
            <ProgressBar>
                <PostBlody/>
                <latestPosts/>
            </ProgressBar>
        </Layout>
    )
}

export default SinglePost

```

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/making-a-progress-bar-for-react">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/making-a-progress-bar-for-react)

---

# AVIF画像とは？WebPより高圧縮な次世代フォーマットの使い方と作り方を解説

URL: https://monotein.com/blog/avif-image
公開日: 2021.04.30
更新日: 2026.3.31
概要: 2020年の中頃に現れた最新の画像フォーマットAVIF（.avif）は、なぜ熱い注目を集めているのでしょうか。JPEGやPNG、WebPなどと比べてAVIFにはどのような特徴やメリットがあるのか、作り方と使い方も合わせて解説していきます。

## 画像とサイトのスピードの関係
ウェブサイトのスピードを落とす最大の要因は画像です。

サイトデータの50%以上が画像データであることも珍しくないので、サイズの大きい画像を使っていると表示スピードが落ち、ユーザーに「遅い」「重い」と感じさせてしまいます。

<div class="rich-card-link">
<a href="/blog/why-website-has-to-be-fast">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-1.png)

</div>
<div class="r-card-text">
遅いウェブサイトからユーザーが逃げていく理由
</div>
</div>
</a>
</div>

これまでも当ブログでは、画像を軽量化してサイトスピードを上げる方法を紹介してきました。


<div class="rich-card-link">
<a href="/blog/improving-fonts-and-images">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-2.png)

</div>
<div class="r-card-text">
【2026年版】ウェブサイトのスピードを必ず上げる『2つの方法』
</div>
</div>
</a>
</div>

今回はサイトスピードを向上させる最新の画像フォーマット、AVIFを紹介します。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/avif-image">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/avif-image)

## AVIFフォーマットとは？
まだ一般には馴染みのうすいAVIF（.avif）、正式名称「AV1 Image Format」は、ウェブ画像向けに開発された最新の画像フォーマットで、JPEG（.jpeg）やPNG（.png）と同じような画像の保存形式のことです。

JPEG画像から変換すると、サイズはおおよそ3分の1程度、WebPと比較しても60%ほど圧縮できます。

| **JPEG（.jpg）**|**AVIF（.avif）**| **WebP（.webp）**|
| :-----: |:------:| :------:|
|     1 MB | 341 KB | 532 KB |

## 「高圧縮・高画質」以外のAVIFのメリット
これまで多くの画像フォーマットが、「サイズは小・画質は高」という売り文句を掲げて登場してきました。

例に漏れずAVIFも「サイズは小さく、画質は高い」ことを最大の特徴としていますが、これまでの画像フォーマットとの違いは、IT業界のメインプレイヤーのサポートを受けている点です。

<div class="rich-card-link">
<a href="/blog/svg-image">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-16.png)

</div>
<div class="r-card-text">
画像がギザギザして不鮮明な理由
</div>
</div>
</a>
</div>

AVIFは動画変換技術のAV1コーデックをベースに開発されました。

元々このAV1コーデックは、ネットで大量の動画配信をする必要から開発されたもので、開発元のAlliance for Open Media（AOM）には、GoogleやFacebook、Apple、Amazon、Microsoftなどの巨大テックカンパニーが参画しています。

つまりAVIFフォーマットはこれらのTechカンパニーのサポートを受けており、これはそのままサポートされるウェブ・ブラウザに関係してきます。

あとで触れる一世代前の画像フォーマットWebP（.webp）が、Safariでサポートされるまでに10年近くかかったように、ブラウザごとの互換性は避けて通れない問題ですが、この点AVIFはすでに高い互換性を得られることが高い確率で約束されている状況といえます。

これ以外にも、オープンソースとしてロイヤリティフリーで開発されていること、HDR（High Dynamic Range）の、より高画質で明度の高いイメージに対応していることなども、AVIFの特徴として挙げられます。

## AVIFとWebPの違い
これまでWebP（.webp）がウェブ向けに最適化された画像フォーマットとして推奨されてきました。

しかし開発から10年以上経っているにも関わらず、一般にそこまで認知されておらず、また多くの人に使われているとはいえない状況です。

そんなWebPとAVIFには実は共通点があり、それはどちらも動画変換の技術をベースに開発されたフォーマットであることです。

WebPは動画変換用のVP8コーデックを元に開発されており、これはGoogleの買収したOn2テクノロジー社が開発したものでした。

一方でAVIFは、上でも触れたようにAV1コーデックを元に開発されましたが、AV1コーデック自体がVP10（VP8の後続版）のアップグレードとして作られたものなので、AVIFフォーマットはWebPフォーマットのアップグレード版であるとも言えます。

実際AVIFは、WebPではサポートしていない10 bitと12 bit color depthまでカバーしており、WebPよりもサイズが小さく、さらに高画質の画像を作ることができるようになっています。

## AVIF画像の作り方
AVIF画像を作るには、AVIFエディターと画像コンバーターの2つの方法があります。

AVIFエディターはPhotoshopのような専用アプリケーションを使ってAVIFを作る方法ですが、Photoshopは現時点ではAVIFに公式には対応しておらず使い勝手が悪いので、画像コンバーターを使って、既存のJPEG画像やPNG画像などをAVIF画像に変換するのがもっとも手軽な方法になります。

Googleの開発した[Squoosh](https://squoosh.app)は、AVIFをはじめとする多くの画像フォーマットに対応していて、直感的に使うことのできる便利な画像変換サイトです。

• [https://squoosh.app](https://squoosh.app)


## AVIF画像の使い方
上記の通り、AVIF画像はまだすべてのブラウザでサポートされていないので、サイトで使う時には注意が必要です。

AVIF画像を直接`<img>`タグで読み込むのではなく、`<picture>`タグを使って次のように書きます。

```html
<picture>
    <source type="image/avif" srcset="./images/dog.avif">
    <img alt="My dog" src="./images/dog.jpg">
</picture>
```

こうすることでAVIFに対応していないブラウザでは自動的に`.jpg`のJPEG画像が表示されるようになります。

## AVIFを使う時の注意
AVIFはあくまでもウェブサイトでの表示に使われるものであって、JPEGやPNGといった既存の画像フォーマットを置き換えるものではないので、オリジナルとして汎用的なJPEN画像などを別に持っておきながら、ウェブサイト向けに[Squoosh](https://squoosh.app)などを使ってAVIF画像を書き出すといった方法がベストです。

とはいえ、AVIFと同じようにウェブサイト向けの画像フォーマットであるWebPを使うメリットは今後確実に低くなっていくので、画像の多いサイトなどではAVIFフォーマットへの変換を徐々に進めていくのがいいでしょう。

## イラストを使う時の注意点
多くのウェブサイトのロゴやイラストではPNG形式が使われていますが、軽量で扱いやすいSVGを使う方がサイトのスピードは上がります。

SVGはAVIFよりも軽量で、またどんなに拡大しても劣化しないので、ロゴやイラストにはSVGを使うようにしましょう。

SVGについてくわしくは次の記事で紹介しています。

<div class="rich-card-link">
<a href="/blog/svg-image">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-16.png)

</div>
<div class="r-card-text">
画像がギザギザして不鮮明な理由
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/avif-image">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/avif-image)

---

# 当サイトをGatsby v3にアップデートしました

URL: https://monotein.com/blog/gatsby-v3-upgrade
公開日: 2021.03.25
更新日: 2021.11.19
概要: Gatsby v3はサイト開発者、コンテンツ担当者、そしてエンドユーザーの三方よしの高速化を実現しています。Gatsby Imageのプラグインはさらに使いやすく、また高速化しており、v2からの移行作業もすぐに完了させることができます。

## Gatsby v3のリリース

（*2021年11月追記: 本サイトはGatsby v4に移行しました。）

<div class="rich-card-link">
<a href="/blog/gatsby-v4-upgrade">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-84.png)

</div>
<div class="r-card-text">
Gatsby v4にアップデートしました
</div>
</div>
</a>
</div>

---

今月（2021年3月）のはじめにGatsby v3がリリースされたのに合わせ、本サイトもv3に移行しました。

<div class="img-border">

![v3](../../images/singleBlogPageImages/blogArticleImages/blog74/v3.jpg)

</div>

「[ウェブ上で最速のサイト](https://www.gatsbyjs.com/blog/gatsby-v3)」と豪語するGatsbyらしく、今回のバージョンアップも高速化に焦点が当てられており、本サイトもv3アップグレード後はスピード（Performance）が上がり、90以上のスコアを維持できるようになりました。

![score](../../images/singleBlogPageImages/blogArticleImages/blog74/score.jpg)

## Gatsby v3の特徴
v2のリリースが2018年9月だったので、おおよそ3年ぶりのメジャーリリースとなった今回のv3。

v3はエンジニア、コンテンツ担当者、そしてユーザーというウェブサイトに関係する全ステークホルダーに高速化のメリットをもたらすことを目指しています。

具体的には以下の点が改善されています。

---

• 開発時のbuildsスピードを80%高速化

• Incremental Buildsによってbuildプロセスを高速化

• 画像最適化を進化させてサイト表示を高速化

参考: [https://www.gatsbyjs.com/blog/gatsby-v3](https://www.gatsbyjs.com/blog/gatsby-v3)

---

v3と同時にGatsby Hostingの提供開始も発表されました。

これまでGatsby Cloudでしか利用できなかったIncremental Buildsがデフォルトで利用可能になったこと、そして画像最適化を行うGatsby Imageのアップグレードが今回のリリースの目玉かと思います。

Gatsby Imageはこれまで`gatsby-image`プラグインから、`<Img/>`コンポーネントを読み込んで使っていましたが、v3では名前が`gatsby-plugin-image`に変わり、`<StaticImage/>`と`<GatsbyImage/>`の2つのコンポーネントが使えるようになりました。

`<StaticImage>`はレンダー時に毎回同じ画像を表示するコンポーネント、そして`<Gatsby Image>`はレンダーごとに違う画像を表示するコンポーネントでの使用が想定されており、これは例えばページごとに表示する画像が違うHeroコンポーネントや、読み込むデータによって画像が変わるテンプレート的なコンポーネントのことです。

`gatsby-image-plugin`に合わせてGraphQLのクエリも、フラグメントを使ったこれまでの` ...GatsbyImageSharpFluild`から`gatsbyImageData`に変わっています。

`gatsbyImageData`には次のように各種の設定を渡せるようになっているので、使いやすくなりました。

```js

export const pageQuery = graphql`
 BlogQuery {
   blogPost {
     author
     avatar {
       childImageSharp {
         gatsbyImageData(
            width: 300
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
         )
       }
     }
   }
 }
`

```

AVIFという、WebPよりも軽く、そして高画質な保存形式にも対応しているのは驚きです。

AVIFフォーマットについては、次の記事で詳しく紹介しています。

<div class="rich-card-link">
<a href="/blog/avif-image">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-75.png)

</div>
<div class="r-card-text">
AVIF画像とは？WebPより高圧縮な次世代フォーマットの使い方と作り方を解説
</div>
</div>
</a>
</div>

なお、`gatsby-image-plugin`で設定可能な全項目は以下のリンクで紹介されています。

• [https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image)

## 当サイトのv2からv3への移行
当サイトはこれまでGatsby 2.20.8で開発を行ってきました。

今回v3のリリースに合わせて、Gatsby CLIとともにすべてのパッケージのバージョンも一気に上げたのですが、移行作業は案外早く終わり数時間でデプロイまで完了しました。

何かトラブルやエラーが出るだろうと思っていたので、これは意外でした。

早く済んだ理由の一つは、当サイトの画像の9割近くがサイト軽量化の目的でsvgを使っており、それらを`import`でコンポーネントに読み込んでいたので、Gatsby ImageやGraphQLの変更の影響を受けなかったためです。

また有志の開発によるプラグイン（community plugin）への依存が低く、v3リリースと同時にアップグレードされた各オフィシャルプラグインの導入だけで作業が済み、バージョンのコンフリクトが発生しなかったことも要因です。

---

`gatsby-image`から`gatsby-plugin-image`の移行には`gatsby-codemods`というパッケージが用意されていますが、私は使いませんでした。

くわしくは以下の公式移行ガイドを参考にしてください。

• [https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide](https://www.gatsbyjs.com/docs/reference/release-notes/image-migration-guide)

## v3移行の恩恵
v3移行で本サイトのbuilds時間は大幅に短くなりました。

またサイトのスピードもより高速化し、Lighthouseのパフォーマンスで安定的に95以上のスコアが出るようになりました。

![score](../../images/singleBlogPageImages/blogArticleImages/blog74/score.jpg)

Gatsbyに興味のある人は次の記事も参考にしてください。

<div class="rich-card-link">
<a href="/blog/gatsby-seo-and-optimisations">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-57.png)

</div>
<div class="r-card-text">
Gatsbyの検索エンジン最適化（SEO）の全まとめ
</div>
</div>
</a>
</div>



<div class="rich-card-link">
<a href="/blog/making-pagination-for-gatsby-blog">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-89.png)

</div>
<div class="r-card-text">
Gatsbyブログのページネーションの作り方
</div>
</div>
</a>
</div>


<div class="rich-card-link">
<a href="/blog/gatsby-blog-prev-next">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-90.png)

</div>
<div class="r-card-text">
Gatsbyに前後の記事へのリンクを追加する方法
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/gatsby-v3-upgrade">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/gatsby-v3-upgrade)

---

# SPAサイトとは？仕組み・メリット・デメリット・実例を2分で解説

URL: https://monotein.com/blog/what-is-spa
公開日: 2020.12.30
更新日: 2026.6.26
概要: 複数のページがあるのになぜ「シングル・ページ・アプリケーション」と呼ばれるのか？静的サイト・動的サイトの歴史からSPAの仕組みを解説。高速表示や快適なUXなどのメリットから、初期表示の遅さやSEOの弱点まで、SPAの特徴をわかりやすくまとめます。

## なぜ「シングルページ」と呼ばれるのか

「SPA（シングル・ページ・アプリケーション）」という言葉には、ひとつ不思議な点があります。

私たちが普段使っているSPAのアプリには、`/about`や`/dashboard`など複数のページがあるからです。

それなのに、なぜ「シングル（＝1枚）・ページ」という言葉が入っているのでしょうか。

答えを先に言ってしまうと、「ブラウザに渡されるHTMLページが1枚だけだから」です。

とはいえ、これだけではピンと来ないと思うので、もうすこし詳しく解説しましょう。

ウェブの歴史をさかのぼりながら、SPAの仕組みとメリット／デメリットも紹介します。

<a href="/present?magnet=first-study-guide&from=/blog/what-is-spa">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/what-is-spa)

## SPA登場以前 ― 静的サイトと動的サイト

SPAの理解は、その前の時代を知っておくとスムーズに進みます。

ウェブサイトの歴史は、「ページの作られ方」が進化してきた歴史でもあるからです。

大きな流れは「静的から動的へ」というものでした。

### 静的サイト

静的サイトでは、各ページがあらかじめ作られた状態でサーバーに置かれています。

ユーザーからアクセスがあると、その完成済みのページをそのまま送り返すだけです。

作る作業は事前に済んでいるため、表示は高速になります。

しかし弱点もありました。

ユーザーごとに表示を変えたり、サイト上で複雑な操作をしたりすることができないのです。

### 動的サイト

そこで登場したのが動的サイトでした。

動的サイトでは、アクセスがあった時にサーバーがページを組み立てます。

---

• ログインしたユーザーごとに表示を変える\
• レビューを投稿する

---

今では当たり前のこうしたページは、動的サイトによって実現しました。

代表例がWordPressです。

下図を見てください。

<div class="img-border">

![static-dynamic](../../images/singleBlogPageImages/blogArticleImages/jamstack/static-dynamic.png)

</div>

静的サイトは「生成済みのページをそのまま送るだけ」。

一方の動的サイトは「データベースからデータを取得し、その都度ページを生成して送る」。

ここに両者の決定的な違いがあります。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-spa">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-spa)

## SPAの登場

静的サイト → 動的サイトと来て、ついにSPAが現れます。

その背景にあったのが、JavaScriptの進化です。

動的サイトでは、ページの生成もデータの取得もすべてサーバーが担っていました。

しかし2000年代に入り、JavaScriptに多くの機能が加わります。

これによって、これまでサーバーが行ってきた処理をユーザーのブラウザ（＝クライアント）側でも行えるようになったのです。

<div class="img-border">

![server-and-client](../../images/singleBlogPageImages/blogArticleImages/jamstack/server-and-client.png)

</div>

「サーバー」と「クライアント」。

この2つの役割分担が変わったこと。

それがSPAを生み出しました。

### 「シングルページ」の意味

ここで冒頭の疑問に戻りましょう。

アクセスがあったとき、サーバーが返すHTMLページは1枚だけです。

ここだけを見ると静的サイトと変わりません。

しかしこの1枚のHTMLには、大量のJavaScriptが詰め込まれています。

そして実際のページ生成は、このJavaScriptがブラウザ上で行うのです。

2ページ目も、3ページ目も、すべてこの最初の1枚のHTMLファイルを下地にして、ブラウザ側で作られます。

【 サイト全体で使うHTMLがたった1枚だけ 】

これがSPA（シングル・ページ・アプリケーション）という名前の由来です。

では、静的サイトや動的サイトと比べ、SPAの優れている点はどこでしょうか。

## SPAのメリット

### 表示が速い

ページはすべてブラウザ上で生成されるため、サーバーとの通信が発生しません。

そのため動的サイトよりも表示が高速です。

### 操作が快適

動的サイトでは、ページの一部を変えるだけでも、ページ全体をサーバー側で作り直す必要がありました。

ページの再読み込みがひんぱんに発生するのです。

身近な例を挙げましょう。

通販サイトで住所を入力するとき、郵便番号を打つと住所の一部が自動で補完されることがあります。

もし動的サイトなら、この補完のためにページ全体が再読み込みされてしまいます。

一方SPAでは、ページの変更したい部分だけを書き換えられます。

画面が再読み込みされることはありません。

ユーザーは入力作業をスムーズに、ストレスなく行えるのです。

### 開発・拡張がしやすい

動的サイトは、サーバーがほぼすべての働きを行う構造になっています。

そのため、サイト内の一部を変更するだけでも、全体への影響を考えなければいけません。

一方SPAでは、サーバー側とブラウザ側で、役割がはっきりと分かれています。

「ここはブラウザ側だけ直す」といった具合に、切り分けながら開発を進められるのです。

このようにメリットが多いSPAですが、もちろん苦手なこともあります。

## SPAのデメリット

### 最初の表示が遅い

サーバーから渡されるHTMLは1枚だけですが、そこには大量のJavaScriptが含まれています。

この読み込みは重い処理です。

そのため最初の表示に時間がかかることがあります。

### SEOに弱い

アクセス直後、サーバーから渡されるHTMLは中身がほぼ空っぽです。

下記コードを見てください。

```html
// index.html

<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>
```

ページの中身は、このあとJavaScriptが作っていきます。

しかし検索エンジンのクローラーは、この「空っぽのHTML」を見てしまうことがあります。

するとページの内容が検索結果に正しく反映されません。

これがSEO面での弱点になります。

なお近年はクローラーの性能が上がり、「SPA ＝ SEOに弱い」とは一概に言えなくなりました。

とはいえ、静的サイトや動的サイトと比べると、まだ不利とされているのが現状です。

## SPAのその先 ― SSRやRSCへ

SPAのこうした弱点（初回表示の遅さ・SEO）を補うため、新しい仕組みも次々と生まれています。

SSR（サーバーサイドレンダリング）やRSC（Reactサーバーコンポーネント）です。

SPAから始まったこのレンダリングの進化を、MPA・SSR・RSCまで一本の流れで理解したい方は、下記の記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/about-spa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-180.png)

</div>
<div class="r-card-text">
SPAとは？シングルページアプリケーションの仕組み・MPAとの違いを2分で解説
</div>
</div>
</a>
</div>

<br/>

## SPAの作り方

ここまで、SPAの仕組みとメリット／デメリットを見てきました。

しかし「読んで分かること」と「自分で作れること」は別ものです。

SPAの動き方を自分の手で確かめたい方は、下記教材を参考にしてください。

HTMLとCSSの知識だけで、Reactを使ったSPA開発ができます。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B08XWMVX76">
    <img class="bc-cover" src="/images/commonImg/reactbook.svg" alt="はじめてつくるReactアプリ" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるReactアプリ</p>
        <p class="bc-desc">【2026年1月第3版発売。HTMLとCSSの知識だけで始められるReact開発。好評なハンズオン形式でスイスイ進める。最新のReact 19の情報もあり。】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

## よくある質問

### Q1. SPAとSSG（静的サイトジェネレーター）は違うものですか？

違うものです。

SPAは「ブラウザ側でページを生成する仕組み」、SSGは「ビルド時にあらかじめページを生成しておく仕組み」を指します。

ただし両者は組み合わせて使われることもあり、混同を招くことも少なくありません。

SSGについては下記記事で詳しく解説しています▼

<div class="rich-card-link">
<a href="/blog/what-is-ssg">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-65.png)

</div>
<div class="r-card-text">
静的サイトジェネレーターとは？SSGの仕組みとメリットを2分で解説
</div>
</div>
</a>
</div>

<br/>

### Q2. React + ViteはSPAですか？

そうです。

React + Viteで作るアプリは、デフォルトではSPAになります。

Reactそのものの始め方や開発環境の作り方は、こちらのガイドを参考にしてください。

<div class="rich-card-link">
<a href="/blog/guide-react-vite">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-254.png)

</div>
<div class="r-card-text">
【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

### Q3. SPAとMPA（マルチ・ページ・アプリケーション）はどう違いますか？

MPAは、ページ移動のたびにサーバーから新しいHTMLを受け取る仕組みです。

一方SPAは、最初に受け取った1枚のHTMLを下地にしてブラウザ側でページを切り替えます。

MPAやSSR、RSCまで含めたレンダリングの全体像の理解には下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/react-server-components-complete-guide">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-165.png)

</div>
<div class="r-card-text">
Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで
</div>
</div>
</a>
</div>

<br/>

### Q4. SPAではどうやってページを切り替えているのですか？

通常はReact RouterやTanStack Routerといったツールを使います。

ただし外部ツールなしで自作することも可能です。

方法は下記ページで紹介しています。

• <a href="/blog/react-app-routing-without-external-packages-1">React RouterやTanStackを使わないページ移動の実装方法（Code-based routing）</a>

• <a href="/blog/react-app-routing-without-external-packages-2">React RouterやTanStackを使わないページ移動の実装方法（File-based routing）</a>

<a href="/present?magnet=first-study-guide&from=/blog/what-is-spa">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/what-is-spa)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-spa">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-spa)

---

# アイソメトリックとは？意味・特徴・ウェブデザインでの使い方を図解で解説

URL: https://monotein.com/blog/isometric-design-in-website
公開日: 2020.12.29
更新日: 2026.6.18
概要: 広告やウェブサイトで見かけるアイソメトリックデザインとは、平面に立体を描く「等角」の技法を使ったデザインです。フラットデザインの限界から生まれた背景、スタートアップやIT企業に好まれる理由、効果的な使い方と注意点まで、具体的な事例を交えて解説します。

## 最近よく見かけるデザイン
最近、広告や本の表紙でよく次のようなデザインを目にします。

![isometric-example](../../images/singleBlogPageImages/blogArticleImages/blog68/isometric-example.svg)

これはアイソメトリックデザイン（Isometric Design）と呼ばれるもので、少しフワッと浮いているように見えるのが特徴です。

## アイソメトリックとは？
「アイソメトリック（Isometric）」の意味は「等角」です。

これは使われている技法に由来しています。

アイソメトリックデザインは、横・高さ・奥行きがそれぞれ120度になるように描かれています。

平面（2D）に立体（3D）が描かれたデザインになっているのです。

![isometric-120rule](../../images/singleBlogPageImages/blogArticleImages/blog68/isometric-120rule.png)

このような角度のルールを持つメリット。

それは、デザインがリアルに寄りすぎたり無秩序になったりするのを防ぎ、全体に統一感をもたらすことです。

## アイソメトリックデザインの生まれた背景と使い方
アイソメトリックデザインの前は、フラットデザインと呼ばれるスタイルが広く使われていました。

フラットデザインには、メッセージや意図をシンプル化して伝えやすいというメリットがあります。

しかしカーブや奥行きを取り除いたシンプルさ故に、複雑なメッセージは伝えるのが難しく、そしてあまりにも広く使われたため、デザイン自体の目新しさが失われてしまいました。

▼フラットデザインの例（参考：[https://www.vecteezy.com](https://www.vecteezy.com/vector-art/103286-free-flat-design-vector-background)）
![flat-example](../../images/singleBlogPageImages/blogArticleImages/blog68/flat-example.jpg)


そこで生み出されたのが、フラットデザインに3Dの要素を取り入れたアイソメトリックデザインです。

シンプルさは維持しつつも奥行きがあるため、ビジュアル的によりパワフルで複雑なメッセージを伝えやすくなっています。

また、カラフルで親しみやすく、また写真よりも遊び心を感じさせるので、「トレンド感」や「真面目すぎないイメージ」を打ち出しやすいのもアイソメトリックデザインの特徴です。

そのため、スタートアップ企業やIT企業のコーポレートサイトで特にアイソメトリックデザインを目にします。

---

アイソメトリックデザインは、ページを開いたユーザーが一番最初に目にするイメージ（ヒーロイメージ）やインフォグラフィックス、そして地図に使うのが効果的です。

例えば次の2つの地図を比較すると、アイソメトリックデザインの方が情報伝達に優れているのが分かります。

▼フラットデザインの地図（参考： [https://www.freepik.com](https://elements.envato.com/isometric-map-generator-LR6GNZ)）
![map-flat-design](../../images/singleBlogPageImages/blogArticleImages/blog68/map-flat-design.jpg)


▼アイソメトリックデザインの地図（参考：[https://elements.envato.com](https://elements.envato.com/isometric-map-generator-LR6GNZ)）
![map-isometric-design](../../images/singleBlogPageImages/blogArticleImages/blog68/map-isometric-design.jpg)

## アイソメトリックデザインの使用例
アイソメトリックデザインは2018年ごろから海外のウェブサイトで使われ始め、2020年頃からは日本のウェブサイトでもよく目にするようになりました。

アイソメトリックデザインを使った日本のウェブサイトをいくつか紹介します。

**• ボラギノール**／https://www.borraginol.com/town
![bolaginorl](../../images/singleBlogPageImages/blogArticleImages/blog68/bolaginorl.jpg)

**• メルペイ**／https://jp.merpay.com
![merpay](../../images/singleBlogPageImages/blogArticleImages/blog68/merpay.jpg)

**• ホクリクコム**／http://www.hopnet.co.jp
![hokuricom](../../images/singleBlogPageImages/blogArticleImages/blog68/hokuricom.jpg)

## アイソメトリックデザインを使うときの注意点
遊び心と真面目すぎないイメージを打ち出せるアイソメトリックデザインは、シリアスなテーマや題材には向きません。

全体をコミック調にして、「にぎやかさ」や「楽しさ」といった要素を濃くしてしまうからです。

また、アイソメトリックデザインを他のスタイルのデザインと併用しないように注意しましょう。

スタイルの一貫性が失われ、まとまりのない印象を生み出してしまいます。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/isometric-design-in-website">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/isometric-design-in-website)

---

# 静的サイトジェネレーターとは？SSGの仕組みとメリットを2分で解説

URL: https://monotein.com/blog/what-is-ssg
公開日: 2020.12.23
更新日: 2026.7.2
概要: 静的サイトジェネレーター（SSG）がなぜ注目されるのか、動的サイトとの違いやbuildプロセスの仕組みをわかりやすく解説。スピード・セキュリティ・柔軟性のメリットから、Next.js・Astro・Nuxtなど主要フレームワークの特徴まで網羅します。

## 静的サイトジェネレーター（SSG）とは？

静的サイトジェネレーター（SSG）とは、2018年ごろに現れた新しいウェブ開発のツールです。

SSGに対応した代表的なフレームワークには、次のようなものがあります。

---

• Next.js\
• Astro\
• Nuxt

---

静的サイトジェネレーターを使うことで、高速で安全なウェブサイトを作れます。

では、なぜこのような仕組みが必要になったのでしょうか。

まずは静的サイトジェネレーターが登場するまでの背景を、ざっと見てみましょう。

<a href="/present?magnet=first-study-guide&from=/blog/what-is-ssg">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/what-is-ssg)

## もともとウェブサイトは静的だった
インターネットが始まった頃、ウェブサイトはとてもシンプルでした。

【 HTMLのファイルをあらかじめ手作業で一枚一枚書いておき、サーバーにアップロードしておく 】

このようなウェブサイトは、誰がアクセスしても毎回同じページが表示されます。

日本から見ても、アメリカから見ても、今日見ても明日見ても同じです。

このようなサイトを「静的サイト」と呼びます。

変化が少ないからです。

しかし時代が進み、ページ数が増えてくると管理が大変になりました。

そこで登場したのがWordPressを代表とする「動的サイト」です。

## WordPressはアクセスされたときにページを作る

WordPressでは、ユーザーがアクセスしてからページを生成します。

そのため、ログイン機能や会員機能など、ユーザーごとに異なる画面を表示することが可能です。

日本から見た人と、アメリカから見た人に、異なる画面を表示することもできます。

変化を大きくできる、つまりダイナミック（dynamic／動的）にできるのです。

しかしデメリットもあります。

ページを毎回生成するので、ページの表示速度が遅くなるのです。

セキュリティ面も弱くなりました。

静的サイトと動的サイトにおけるページ生成の仕組みを表したものが下図です。

![static-dynamic](../../images/singleBlogPageImages/blogArticleImages/jamstack/static-dynamic.png)

## 再び注目された静的サイト

そこで再び注目されたのが静的サイトです。

しかし昔の静的サイトではありません。

「現代版の静的サイト」です。

【 ページをあらかじめツールで生成しておき、サーバーにアップロードしておく 】

ウェブ黎明期の「静的サイト」と異なるのは、ページを「ツールで生成しておく」という点です。

HTMLファイルを手作業で書くのではなく、ツールを使うのです。

この「ツール」が、本記事のメインテーマである「静的サイトジェネレーター（Static Site Generator／SSG）」になります。

さて、静的サイトジェネレーターの「ページをツールで生成する」というプロセスはbuildと呼ばれます。

この点が、昔の「静的サイト」とは異なる点なので、次はこのbuildを少し詳しく見てみましょう。

## buildとは何か？

新しいブログ記事を公開する場面を考えてみます。

昔であればHTMLファイルに手作業で書いていました。

前後の記事へのリンクや、関連記事のリンクもすべて手作業で変更するので、非常に手間がかかります。

記事内で使っている画像の最適化などもすべて自前です。

一方、静的サイトジェネレーターを使えば、これらをすべて自動化できます。

---

記事公開のために最初にすべきことは、記事データを静的サイトジェネレーターに取り込んでページを生成することです。

このページ生成プロセスがbuildと呼ばれます。

buildによって記事データがページのひな形であるテンプレートと一体化されて、ページ（HTML）が生成されるのです。

![build-process](../../images/singleBlogPageImages/blogArticleImages/jamstack/build-process.png)

buildは、手元のコンピューター内や、ウェブサイトをホストしているサービスプロバイダーで行えます。

コードの圧縮・軽量化や画像最適化などもbuild時に行われ、これが次に見る静的サイトジェネレーターのメリットにつながります。

## 静的サイトジェネレーターのメリット

静的サイトジェネレーターには大きく3つのメリットがあります。

---

①スピード\
ページは事前に生成されているため、高速で表示できます。

②セキュリティ\
データベースやサーバーを直接公開しないため、安全性が高くなります。

③柔軟性\
フォームやコメント機能なども追加できるため、昔の静的サイトより高機能です。

## 静的サイト・動的サイト・SSGの特徴一覧

表で比較すると次のようになります。

|                  | 静的サイト           | 動的サイト       | SSG                                                               |
| :--------------- | :------------------- | :--------------- | :---------------------------------------------------------------- |
| ページ生成       | 手作業で生成         | アクセス時に生成 | build時に生成                                                     |
| ページ生成の場所 | 手元のコンピューター | サーバー         | 手元のコンピューターやホスティングサービス（Netlify／Vercelなど） |
| 表示速度         | 高速                 | やや遅い         | 高速                                                              |
| セキュリティ     | 高い                 | 管理が必要       | 高い                                                              |
| データベース     | 不要                 | 必要             | 不要なことも多い                                                  |
| 更新のしやすさ   | 低い                 | 高い             | 高い                                                              |
| 代表例           | 昔のHTMLサイト       | WordPressサイト  | Next.jsやAstroサイト                                              |

## SSGのコンテンツ管理方法（ヘッドレスCMS）

静的サイトジェネレーターにはbuildのプロセスなどがあり、複雑そうに見えます。

では、プログラマーやエンジニア以外の人は、静的サイトジェネレーターで作った「現代版の静的サイト」を使えないのでしょうか？

静的サイトジェネレーターが開発された当初はそうでした。

しかし今ではさまざまなコンテンツ管理の手法が生み出され、専門知識のない人でも簡単にコンテンツを制作・編集できるようになっています。

SSGのコンテンツ管理でもっともよく使われるのが「ヘッドレスCMS」です。

ヘッドレスCMSの仕組みを使うと、コンテンツ管理画面には使い慣れたWordPressの管理画面、ユーザーに表示するフロント画面には「現代版の静的サイト」が使えます。

私が以前開発したSSGによる「現代版の静的サイト」では、CMSとしてヘッドレス化したWordPressを接続しました。

この結果、WordPressの管理画面でコンテンツの制作作業やプレビューを行うことが可能になりました。

<div class="img-border">

![preview-1](../../images/singleBlogPageImages/blogArticleImages/jamstack/wp-headless-preview1.jpg)

</div>

プレビュー画面は次のように表示されます。

<div class="img-border">

![preview-1](../../images/singleBlogPageImages/blogArticleImages/jamstack/wp-headless-preview3.jpg)

</div>

「ヘッドレスのWordPress」と「普通のWordPress」の詳しい比較は、次の記事をご覧ください。

<div class="rich-card-link">
<a href="/blog/comparison-headless-wordpress-and-normal-wordpress" target="_blank" rel="noopener">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-80.png)

</div>
<div class="r-card-text">
【作って比較】「ヘッドレスWordPress」と「普通のWordPress」
</div>
</div>
</a>
</div>

<br/>

## Jamstackという言葉

静的サイトジェネレーターが最も注目を集めていたのは2020年ごろでした。

その頃よく使われていた言葉にJamstack（ジャム・スタック）というものがあります。

「Jam」とは、JavaScript + APIs + Markupの頭文字を取ったもので、「静的サイトジェネレーターで作ったサイト」＝「Jamstackサイト」と見られていました。

しかし現在（2026年）、Jamstackという言葉はほぼ耳にしません。

その理由は、Jamstackの技術自体が廃れたというより、より大きな技術的な流れに吸収されていったからだと考えられます。

現在ではSSG（Static Site Generation）以外にも、ISR（Incremental Static Regeneration）、SSR（Server Side Rendering）、RSC（React Server Components）、Streamingなどさまざまな技術があります。

そのような中で「すべてのページを静的に生成する」というSSGの手法ではなく、「ページごとに最適な生成手法を選ぶ」という方向性に変わりました。

Jamstackが提唱したアーキテクチャの要素自体は、現在のNext.jsやAstro、Nuxtなどに組み込まれています。

Jamstackの技術が時代遅れになったというよりは、普遍的になったと考えていいでしょう。

本サイトにはJamstackについて下記のような過去の記事があります。

• <a href="/blog/history-of-jamstack">Jamstackが現れるまでの歴史 ― LAMPからMEAN、そしてJamstackへ</a>

• <a href="/blog/what-is-jamstack">これだけ読めばOK！ Jamstackのすべてがわかります</a>

## 有名な静的サイトジェネレーター

最後に有名な静的サイトジェネレーターを簡単に紹介します。

### Next.js

Vercelという企業によって開発されているReactベースのフレームワークです。

2026年現在、日本を含め世界中で広く使われています。

Next.jsは静的サイトジェネレーターとしてだけでなく、サーバーサイドレンダリング、フルスタックアプリ開発など、多用途に使うことのできる非常に守備範囲の広いツールです。

Next.jsについてより包括的に知りたい方は、下記ガイド記事を参考にしてください▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

### Astro

2022年に安定版がリリースされた静的サイトジェネレーターがAstroです。

2026年現在バージョン7まで出ており、着実に改良を重ねながら進化を続けています。

本サイトも2026年6月にGatsby（後述）からAstroに移行しました。

移行時のエピソードは下記記事にまとめてあります▼

<div class="rich-card-link">
<a href="/blog/astro-migrate-from-gatsby">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-261.png)

</div>
<div class="r-card-text">
GatsbyからAstro（バージョン7）へ移行しました
</div>
</div>
</a>
</div>

<br/>

このAstro、日本ではまだそこまで広く利用されていません。

しかし海外では、高機能なNext.jsを使う必要がないブログサイトや、パフォーマンス重視の企業サイトなどで広く使われています。

Astroの特徴は、ReactやVueといった特定のJavaScriptフレームワークをベースとしていない点です。

HTMLとCSSの知識だけで十分使えます。

Astroに興味のある人は下記教本を参考にしてください。

1時間半でAstroがわかります。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0DMLKMTZX">
    <img class="bc-cover" src="/images/commonImg/astrobook.svg" alt="はじめてつくるAstroサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるAstroサイト</p>
        <p class="bc-desc">【1時間半で、人気のフレームワーク「Astro」の使い方をすばやくマスターできる本】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

### Nuxt

Next.jsに影響を受けた静的サイトジェネレーターです。

ReactではなくVueを使っています。

Nuxtはバージョンが2から3に変わるとき（2022年前後）に非常に時間がかかり、また大きな変更も加えられたため、多数のユーザーがNext.jsに移行しました。

とはいえ日本ではNuxtは人気です。

[note.com](https://note.com)などでも使われています。

Nuxtの使い方を短時間で知りたい方は、下記教本を参考にしてください。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0B5N8QJ2Y">
    <img class="bc-cover" src="/images/commonImg/nuxtbook.svg" alt="はじめてつくるNuxtサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるNuxtサイト</p>
        <p class="bc-desc">【Vueフレームワークで一番人気のNuxt。最新Nuxtの基礎と使い方をしっかりマスターできる】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

### Gatsby

Gatsbyは現在開発が止まっている静的サイトジェネレーターです。

2020年ごろはNext.jsと人気を二分していました。

いま新規のプロジェクトでGatsbyを使う理由はありませんが、Gatsbyに興味のある人には下記教材があります。

<a class="book-card" target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B0BNQBDHFH">
    <img class="bc-cover" src="/images/commonImg/gatsbybook.svg" alt="はじめてつくるGatsbyサイト" />
    <div class="bc-body">
        <p class="bc-title">はじめてつくるGatsbyサイト</p>
        <p class="bc-desc">【人気フレームワークGatsbyを2時間でマスター。ハイパフォーマンスのウェブサイトを時短で試してみよう！】</p>
        <span class="bc-btn">
            <img src="/images/commonImg/amazon-square-orange.svg" alt="Amazon" />
            Amazonで見る
        </span>
    </div>
</a>

本サイトにはGatsbyについて下記のような過去の記事があります。

• <a href="/blog/why-i-chose-nextjs-over-gatsby">GatsbyではなくNext.jsを選ぶ理由</a>

• <a href="/blog/gatsby-seo-and-optimisations">Gatsbyの検索エンジン最適化（SEO）の全まとめ</a>

• <a href="/blog/gatsby-blog-prev-next">Gatsbyに前後の記事へのリンクを追加する方法</a>

• <a href="/blog/making-pagination-for-gatsby-blog">Gatsbyブログのページネーションの作り方</a>

その他、開発言語にRubyを使ったJekyllや、Goを使ったHugoなども静的サイトジェネレーターです。

## よくある質問

### Q1. SSGとSSR（サーバーサイドレンダリング）は何が違いますか？

ページを生成するタイミングが違います。

SSGは「ビルド時に、あらかじめ」ページを生成します。

一方SSRは「アクセスがあった時に、サーバーで」ページを生成します。

SSRやSPA、そして最新のRSC（Reactサーバーコンポーネント）まで、ページ生成手法の進化の歴史をすべてカバーした記事も参考にしてください▼

<div class="rich-card-link">
<a href="/blog/react-server-components-complete-guide">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-165.png)

</div>
<div class="r-card-text">
Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで
</div>
</div>
</a>
</div>

<br/>

### Q2. SSGとSPAはどう違いますか？

SSGは「ビルド時にページを生成しておく仕組み」、SPAは「ブラウザ側でページを生成する仕組み」です。

生成の場所もタイミングも異なります。

SPAについてはこちらをご覧ください▼

<div class="rich-card-link">
<a href="/blog/what-is-spa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-69.png)

</div>
<div class="r-card-text">
SPAサイトとは？仕組み・メリット・デメリット・実例を2分で解説
</div>
</div>
</a>
</div>

<br/>

### Q3. GatsbyなどのSSGは、なぜあんなに高速でページ移動ができるのですか？
やや複雑な話になりますが、Gatsbyでは最初のページはビルド時に生成されたHTMLを表示します。

Next.jsでもSSGを使う場合は同様です。

その後、Reactがハイドレーション（HTMLとJavaScriptを結び付ける処理）され、クライアントサイドルーティングによってSPAのような滑らかなページ遷移が行われます。

なお、これとSSRとの違いは、「最初のHTML」が生成されるタイミングです。

SSGではビルド時に事前生成されたHTMLを返し、SSRではアクセス時にサーバーで生成されたHTMLを返します。

SSRについて詳しくは下記記事をご覧ください▼

<div class="rich-card-link">
<a href="/blog/about-ssr">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-181.png)

</div>
<div class="r-card-text">
SSR（サーバーサイドレンダリング）とは？仕組みとSPAとの違いを2分で解説
</div>
</div>
</a>
</div>

<br/>

### Q4. これから学ぶなら、どの静的サイトジェネレーターがおすすめですか？

2026年現在、もっとも広く使われているのはNext.jsです。

情報量が多く、AIに質問したときにも的確な答えが返ってきやすいメリットがあります。

Next.jsを体系的に学びたい方はこちらのガイドをどうぞ▼

<div class="rich-card-link">
<a href="/blog/guide-nextjs">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-259.png)

</div>
<div class="r-card-text">
【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説
</div>
</div>
</a>
</div>

<br/>

### Q5. SSGを使えば、必ずサイトは速くなりますか？

多くのケースで速くなります。

ページが事前に生成されているため、アクセス時にその完成済みのページを送るだけで済むからです。

ただし表示速度は、画像の最適化や配信方法（CDN）などにも左右されます。

<a href="/present?magnet=first-study-guide&from=/blog/what-is-ssg">

![image](../../images/commonImg/first-study-guide.png)

</a>

• [monotein.com/present](/present?magnet=first-study-guide&from=/blog/what-is-ssg)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-ssg">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-ssg)

---

# Jamstackが現れるまでの歴史 ― LAMPからMEAN、そしてJamstackへ

URL: https://monotein.com/blog/history-of-jamstack
公開日: 2020.12.18
更新日: 2021.10.08
概要: これまでのWordPressに代わって、「静的サイト」と呼ばれるウェブサイトを採用するケースが増えてきています。静的サイトを採用することには、高速のページ表示、高セキュリティ、そして低コストという多くのメリットがあります。この記事では、そんなメリットとともに、静的サイトの活用方法についても紹介します。

## Jamstackの必然性
海外ではすでにWeb開発のトレンドとして定着しつつあるJamstackについては[「これだけ読めばOK！ Jamstackのすべてがわかります」](/blog/what-is-jamstack)で紹介しましたが、今回はJamstackが現れるまでの歴史を簡単に紹介します。

<div class="rich-card-link">
<a href="/blog/what-is-jamstack">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-60.png)

</div>
<div class="r-card-text">
これだけ読めばOK！ Jamstackのすべてがわかります
</div>
</div>
</a>
</div>

「静 → 動 → 静」という原点回帰の流れと、Jamstackの登場は必然的であったことが見えてくると思います。

## ウェブサイトの始まり
世界で一番最初のウェブサイトはHTMLだけで作られた次のような静的サイトでした。

![first-website](../../images/singleBlogPageImages/blogArticleImages/common/first-website.jpg)

[http://info.cern.ch/hypertext/WWW/TheProject.html](http://info.cern.ch/hypertext/WWW/TheProject.html)

## LAMPの登場
静的サイトはシンプルな反面、できることも限られており、「ユーザーごとに違うページを表示する（Customised Contents）」というような複雑な機能を持つことはできませんでした。

そこで開発されたのがプログラミング言語のPHPで、これをコアとした「LAMP」と呼ばれるテクノロジーが2000年代初頭からよく使われるようになります。

LAMPは**L**inux（オペレーティングシステム）、**A**pache（HTTP/Webサーバー）、**M**ySQL（データベース）、**P**HP（サーバーサイド言語）の頭文字を取ったもので、このLAMPの最大の功績はサーバーで様々な処理を行えるようにして、ウェブサイトで複雑な操作をできるようにしたことです。

LAMPは今でも現役のテクノロジーで、WordPressはLAMPで作られた代表的なシステムです。

## MEANの登場
それまでの「ユーザーに情報を表示するだけ」という「一方通行」の静的サイトから、LAMPによって「ユーザーの操作に応じて表示が変わる」という「双方向」の動的サイトへとウェブサイトは進化を遂げました。

LAMPはその長い歴史おかげでノウハウやサポートの体制が充実している反面、登場からすでに10年以上が経過し、パフォーマンスやセキュリティの問題、またそれぞれのテクノロジーの習得に時間がかかる、といった難しさも無視できなくなってきます。

そこで2011年ごろから使われ始めたのが「MEAN」と呼ばれるもので、これもそれぞれのテクノロジー、**M**ongoDB（データベース）、**E**xpress（バックエンドのフレームワーク）、**A**ngular（フロントエンドのフレームワーク）、**N**ode（バックエンド）の頭文字に由来しています。

MEANの最大の特徴は、この4つのテクノロジーすべてがJavaScriptという1つのプログラミング言語によって書ける点で、これはJavaScriptの機能が拡張したことで実現しました。

そのためLAMPのような複雑さを抑えながらも、LAMPと同じような複雑なウェブサイト（ウェブアプリケーションとも。違いについては下の記事を参照）を制作できるようになりました。

<div class="rich-card-link">
<a href="/blog/differences-website-and-webapplication">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-4.png)

</div>
<div class="r-card-text">
WebサイトとWebアプリの違いとは？2分で初心者向けに解説
</div>
</div>
</a>
</div>

MEANによって作られたウェブサイトはSPA（Single Page Application）とも呼ばれ、ここにある"Single Page"という語は、MEANがウェブサイトを表示する方法に由来しています。

つまり、MEANのウェブサイトで使われるのは一つのHTMLページ（=Single Page）だけであり、そのページの上でJavaScriptがページのUIや複雑な処理、ページ移動などを行っているのです。

そのため、ページ移動や処理ごとに毎回サーバーとの通信が発生していたLAMPよりも速く、ダイナミックにユーザーとの双方向通信を行うことが可能となっています。

<div class="rich-card-link">
<a href="/blog/what-is-spa">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-69.png)

</div>
<div class="r-card-text">
SPAサイトとは？仕組み・メリット・デメリット・実例を2分で解説
</div>
</div>
</a>
</div>

MEANの１番の功績は、管理レイヤーと表示レイヤーとを明確に分離するアーキテクチャーを浸透させたことです。

それまでのLAMPのウェブサイトは、monolithic（モノリシック／一枚岩）とも呼ばれる作りで、管理レイヤー（サーバー or バックエンド）と表示レイヤー（クライアント or フロントエンド）が一体化していました。

この問題は、一部分の変更が全体に影響を及ぼしてしまうことで、例えばユーザーが見ている「表示レイヤー」のデザインを一部変える場合にも、それがどのようにサーバーという「管理レイヤー」に影響を及ぼすかという、いわゆる「副作用」を考慮する必要がありました。

これは当時、表示レイヤー側に大きな処理を担えるほどの力がなく、管理レイヤー側がほとんどの機能を担当していたからです。

しかしMEANが現れた頃には、JavaScriptの能力が上がっており、これまで管理レイヤーで行っていた作業の一部を表示レイヤー側でも行えるようになっていました。

![lamp-mean](../../images/singleBlogPageImages/blogArticleImages/jamstack/lamp-mean.png)

これは表示レイヤーの管理レイヤーからの独立を促し、管理レイヤーと表示レイヤーを明確に分けてウェブ開発を行うスタイルを一般化させます。

このような分離スタイルは、メンテナンス性のみならず、スケール性、セキュリティ、パフォーマンスに大きなメリットがあり、これが次に説明するJamstackへと繋がっていきます。

## Jamstackへ
MEANを経て、2015年ごろから現れたのが静的サイトジェネレーターというテクノロジーです。

これはJamstackのコアとなるテクノロジーで、ウェブ黎明期のシンプルな静的サイトとは異なる、多機能でさまざまなメリットをもつ「現代版静的サイト」作るシステムのことです。

くわしくは下の記事をご覧ください。

<div class="rich-card-link">
<a href="/blog/what-is-ssg">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-65.png)

</div>
<div class="r-card-text">
静的サイトジェネレーターとは？SSGの仕組みとメリットを2分で解説
</div>
</div>
</a>
</div>

Jamstackは、これまでのLAMPやMEANのように具体的な「テクノロジー」を指すのではなく「アーキテクチャー」を指すという点も異なりますが、最大の違いは「静的サイト」である点です。

ウェブサイトの歴史は、シンプルな静的サイトから始まって、LAMP、MEANと、その機能や構造が高度化・複雑化していきました。

それによってユーザーは大きな恩恵を受けましたが、その反面、ウェブサイトの開発やメンテナンスに時間がかかるようになったこと、ページの処理が遅くなったこと、セキュリティリスクが高まったことなどのデメリットも見えてきました。

そしてまた「ほとんどのウェブサイトにLAMPやMEANのような複雑な機能が実は必要ない」ということも明らかになり、シンプルでありながら高パフォーマンス、高セキュリティ、そして低コスト、低メンテナンスなものが求められ、Jamstackというアーキテクチャーが支持されるベースとなっていきます。

このように現れたJamstackの具体的な特徴、メリットについては[「これだけ読めばOK！ Jamstackのすべてがわかります」](/blog/what-is-jamstack)でくわしく解説しているので参考にしてください。

<div class="rich-card-link">
<a href="/blog/what-is-jamstack">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-60.png)

</div>
<div class="r-card-text">
これだけ読めばOK！ Jamstackのすべてがわかります
</div>
</div>
</a>
</div>

## LAMP、MEAN、Jamstack比較表

|       | **LAMP**|**MEAN**| **Jamstack** |
| :----:| :-----: |:------:| :-----------:| 
|時期    | 2000年代初期 | 2010年頃|2017年頃 |
|構造    | 一体型<br/>(Coupled) | 分離型<br/>(De-coupled) |分離型<br/>(De-coupled) |
|強み|すべてがオープンソースであること|JavaScriptを全面的に使えること|高パフォーマス / 高セキュリティ / 低コスト|
|弱み| セキュリティ / パフォーマンス / outdated |NoSQLのため複雑なデータ管理には不適な場合あり| 複雑なインタラクティブ処理には不適な場合あり|

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/history-of-jamstack">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/history-of-jamstack)

---

# これだけ読めばOK！ Jamstackのすべてがわかります

URL: https://monotein.com/blog/what-is-jamstack
公開日: 2020.12.18
更新日: 2021.10.08
概要: Jamstackは「WordPressを置き換えるもの」として注目を集めています。なぜ今ここまで注目を集めるのか、何が新しいのか、メリットは何か、どのような用途があるのか、などをくわしく解説します。

## Jamstackとは？
「Jamstack」は近年耳にすることが増えたWebテクノロジーの言葉で、当サイトもJamstackの構成で作られています。

Jamstackという言葉はNetlifyのCEO、Mathias Biilmann氏が最初に使い始めたとされており、"JAM"の部分はJavaScript、API、Markupの頭文字を取ったもので、かみ砕いて説明するとそれぞれ次のような役割を担っています。

### JavaScript
コードを書く時に使用されるプログラミング言語。

### API
ウェブサイトのデータ（コンテンツ）にあたる部分。

（*静的サイトジェネレーターによってこのデータがMarkupに取り込まれる。データの形式はMarkdown、JSON、CSV、YAMLなど）

### Markup
ユーザーが目にするフロント部分、一般に「ウェブサイト」や「ホームページ」と呼ばれるところに該当。

（*静的サイトジェネレーターによって生成されたHTML ― Hypertext **Markup** Languageページのこと）

---

上の説明文中に「静的サイトジェネレーター」という単語が出てきました。

<div class="rich-card-link">
<a href="/blog/what-is-ssg">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-65.png)

</div>
<div class="r-card-text">
静的サイトジェネレーターとは？SSGの仕組みとメリットを2分で解説
</div>
</div>
</a>
</div>

静的サイトジェネレーター（Static Site Generator / SSG）について詳しくは上の記事で触れていますが、この静的サイトジェネレーターこそがJamstackのコアとなるテクノロジーであり、これなくしてJamstackは生まれ得なかったといっても過言ではありません。

Jamstackのウェブサイトは「静的サイト」というものに分類され、静的サイトのメリットがそのまま次に説明するJamstackサイトのメリットになります。

## Jamstackのメリット
Jamstackにはいくつものメリットがありますが、なかでも「高速のページ表示」という高いパフォーマンス性が[採用理由のトップ](https://www.netlify.com/blog/2020/05/27/state-of-the-jamstack-survey-2020-first-results)となっています。

### 高パフォーマンス
Jamstackのウェブサイトは「サーバーによるページ生成」というプロセスを挟まないので、ユーザーからのアクセスに対して素早くページを表示できます。

これはページ（=HTML）がすでに生成された状態でCDN（Content Delivery Network）と呼ばれるネットワークに配置されているためで、ユーザーからアクセスがあった時にはこのページをユーザーに送るだけで済んでしまうのです。

---

[【作って比較】「ヘッドレスWordPress」と「普通のWordPress」](/blog/comparison-headless-wordpress-and-normal-wordpress)の記事では、同じデザインのウェブサイトを、一方はWordPress、もう一方はJamstackで作って比較しましたが、Lighthouseでサイトスピードを表す「Performance」でも次のように大きな差が出ています。

• 普通のWordPress

<div class="img-border">

![lighthouse-normal-wp](../../images/singleBlogPageImages/blogArticleImages/jamstack/wp-score1.jpg)

</div>

• Jamstack化したWordPress

<div class="img-border">

![lighthouse-headless-wp](../../images/singleBlogPageImages/blogArticleImages/jamstack/headless-score1.jpg)

</div>

### 高セキュリティ
Jamstackのウェブサイトは、動的サイトのようにサーバーやデータベースとひんぱんに通信をする必要がありません。

やりとりがあるのはサイトがCDNに配置される前、つまりプロダクション段階で、ウェブサイトが公開されてアクセスできるような状態になって以降は、サーバーやデータベースとはまったく切り離された状態になります。

そのためサーバーやデータベースへの入り口となるセキュリティホールがなく、高いセキュリティ性が担保されています。

### 高スケーラビリティ
いま触れたように、Jamstackのウェブサイトはサーバーやデータベースとは切り離された状態でネットワーク上にあります。

この「分離構造」は、サーバーの構造や使用されているプログラミング言語などからの制約を受けることなくサイトをスケールアップしていけるメリットにもつながっています。

## Jamstackの生まれた背景
このようなJAMStackが生まれた背景の一つには、トレンドとしての「シンプル化」があります。

25年ほど前のウェブ黎明期、すべてのウェブサイトは静的サイトでした。

それが技術の発展やウェブの役割の増加で動的サイトへと進化していきました。

![static-dynamic](../../images/singleBlogPageImages/blogArticleImages/jamstack/static-dynamic.png)

その動的サイトの流れの中で生まれた代表的なテクノロジーがWordPressであり、これが今もウェブの世界では広く使われています。

WordPressが生まれてからすでに15年ほど経ちますが、この15年の中では当然新たなテクノロジーも多く生まれ、かつては便利で最先端だった動的サイトの弊害も見えてきました。

簡単にいうと「動的サイトである必要がないにも関わらず動的サイトが使われている」という状況で、機能過多なウェブサイトが量産されたのです。

機能過多の1番の問題はパフォーマンスが悪くなることでした。

「文字だけのページ（ブログなど）を表示する」というシンプルな操作にも、動的サイトはサーバーを使って複雑な処理を行うのでページの表示速度が遅くなるのは当然です

しかしこれは何事にもスピードが求められ、待つことにかつてないほどストレスを感じる現代社会では大きなデメリットであり、[ページの表示に5秒かかると90%のユーザーはページを閉じてしまいます。](https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/)


このようなパフォーマンスへのニーズはユーザー側だけが持っていたものではなく、サイトの管理者も処理に時間のかかるシステムにはストレスを感じており、また開発を行うエンジニアも一昔前の古くて遅いシステムは敬遠しつつありました。

そこでウェブサイトの原始形態である静的サイトに動的サイトのメリットを取り入れ、最新のウェブテクノロジーの恩恵を施したのが「現代版静的サイト」であり、Jamstackのアーキテクチャーなのです。

つまり「シンプル化」という時代の流れと、目的と規模にあったシステムでウェブサイトを作るという「最適化」の考えの2つが、Jamstackが現れ、そして広く支持を集める下地にはあったのです。

なお、テクノロジーの発展からみたJamstackの歴史は[「Jamstackが現れるまでの歴史」](/blog/history-of-jamstack)をご覧ください。

<div class="rich-card-link">
<a href="/blog/history-of-jamstack">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-61.png)

</div>
<div class="r-card-text">
Jamstackが現れるまでの歴史 ― LAMPからMEAN、そしてJamstackへ
</div>
</div>
</a>
</div>

## WordPressとJamstackの違い
WordPressとJamstackは一方が具体的なシステム名であり、他方がアーキテクチャーであるという点で比較対象としては正確性を欠きますが、さまざまな英語のソースでもこの2つは比較対象としてよく取り上げられているので、ここではそれを踏襲します。

「これまでのウェブサイトは機能過多であった」と上で書きましたが、これはWordPressで作られたウェブサイトにぴったりと当てはまることです。

これまでWordPressを使う必要がない場面でWordPressがこれまで使われ、それがウェブサイトの管理者とユーザーの双方に大きな不都合とストレスをもたらしていました。

例えば中小企業などのコーポレートサイトには、トップページに「お知らせ」の部分があり、そこは週一回や月一回のペースで更新されるものの、他のページ（「連絡先」や「弊社について」など）は一度作れば当分更新する必要がありません。

これがWordPressで作られている場合、更新の必要があるページもないページもすべてWordPressとして作る必要があるため、非常に操作性の悪いウェブサイトとなっていまいます。

一方でJamstackの場合は静的サイトなので、ウェブサイト全体が軽量に作動することに加え、ヘッドレスCMSと合わせて「部分的に組み込む」というフレキシブルな採用も可能で 、ユーザーと管理者双方の高い操作性を維持した使いやすいウェブサイト制作が可能です。

ブログやオウンドメディアなどの大半はこれまでWordPressで制作されてきましたが、Jamstackのアーキテクチャーでも制作ができます。

今後ユーザーのスピードに対する要求がさらに高まり、多くの人がWordPressが機能過多であることに気がついていけばJamstackへの転換はさらに加速するでしょう。

## Jamstackはどのようなサイトに最適か？
ブログやオウンドメディアなどの記事ベースのサイト、そしてコーポレートサイトにJamstackは最適です。

特にオウンドメディアや記事ベースのサイトは、高トラフィックでありながら高パフォーマンス（スピード）と高セキュリティが求められるケースが多いので、Jamstackは最適といえます。

Jamstackサイトのコンテンツ管理にはヘッドレスCMSが使われるケースが多く、これによって専門知識のない人でも簡単にコンテンツの更新作業を行うことができます。

ページの表示速度が商品やアイテムの購買率（コンバージョン率）に直結するECサイト制作も、ハイパフォーマンスなJamstackサイトの得意な分野で、ECサイト制作サービスのShopifyと組み合わせるケースも増えてきました。

かつてJamstackは「ページ数の多いウェブサイトに向かない」といわれていましたが、今では各種の静的サイトジェネレーターにbuild時の時間を短縮するシステムが組み込まれつつあるので、ページ数の多いウェブサイトにJamstackを使える体制が整いつつあります。

「動的要素があるとJamstackは使えない」という古い情報もネットでは散見されますが、フォームにはNetlifyのForms、検索にはAlgoliaやAddSearch、認証まわりにはAuth0、コメントにはDisqusやJuviaなど便利なサービスがあるので、Jamstackサイトに動的要素を組み込むことは可能となっています。


Jamstackについてよりくわしく知りたい方は、下の記事を参考にしてください。

---

• [Jamstackが現れるまでの歴史 ― LAMPからMEAN、そしてJamstackへ](/blog/history-of-jamstack)

• [【作って比較】「ヘッドレスWordPress」と「普通のWordPress」](/blog/comparison-headless-wordpress-and-normal-wordpress)

• [静的サイトジェネレーターの登場した背景や使うメリットを紹介](/blog/what-is-ssg)

---

## Jamstackサイトの作り方
Jamstackの開発方法をくわしく知りたい方は、Jamstackサイト開発とヘッドレスCMSとの連携について解説した拙著「[はじめてつくるJamstackサイト with ヘッドレスCMS](https://www.amazon.co.jp/dp/B094Z1R281)」を参考にしてください。

<a target="_blank" rel="noopener" href="https://www.amazon.co.jp/dp/B094Z1R281">
<div class="img-border img40percent" style="padding-top: 30px;">

![jamstackbook](../../images/commonImg/jamstackbook.svg)

</div>
</a>

[【Amazonで見る】](https://www.amazon.co.jp/dp/B094Z1R281)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-jamstack">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/what-is-jamstack)

---

# Gatsbyの検索エンジン最適化（SEO）の全まとめ

URL: https://monotein.com/blog/gatsby-seo-and-optimisations
公開日: 2020.12.15
更新日: 2021.10.08
概要: Gatsbyサイトは「爆速」なのでパフォーマンスに不安はありませんが、検索エンジン対策のためにはすべきことがいくつかあります。サイトマップの設置からSEOコンポーネントの作成、オフィシャルサイトでもくわしく解説されていない構造化データ、そしてNetlifyでデプロイしている時に絶対しなければいけない設定についても紹介します。

## Gatsbyの検索エンジン最適化
Gatsbyは当サイトでも使っている「爆速」の静的サイトジェネレーター（SSG）で、表示スピードといったパフォーマンスに関していうことはありません。

しかし、検索エンジン最適化のためにはいくつか設定しなければいけないことがあります。

今回はGatsbyサイトの検索エンジン対策として設定すべきことをまとめます。

Googleアナリティクス導入といった基本的なところから、構造化データの設定、GatsbyサイトをNetlifyでホストする時に忘れがちなredirectの設定、そしてURLについてのNetlifyのUIのバグについても解説します。

## サーチコンソールに登録する
まずはベーシックなところから始めますが、サーチコンソールに登録することで、検索エンジンへの登録状況や、何回ヒットが発生しているか、どのようなキーワードで検索されているかなど、多くのことがわかります。

あとで説明するsitemapをサーチコンソールから送信して、サイトのインデックスを促すこともできます。

## Googleアナリティクスを入れる
[プラグイン](https://www.gatsbyjs.com/plugins/gatsby-plugin-google-gtag)もありますが、私は[NetlifyのSnippet Injection](https://docs.netlify.com/site-deploys/post-processing/snippet-injection)を使ってアナリティクスを読み込んでいます。

なお、2020年10月にリリースされた新しいGoogleAnalytics 4は、上のプラグインでは読み込めないケースがあるようです。

その場合は、後で紹介するSEOコンポーネント内のReact Helmetで下記のようにすれば読み込めます。

GoogleAnalytics 4のトラッキングID（測定ID）の入手は[こちら](https://support.google.com/analytics/answer/9539598?hl=ja)を参考にしてください。

```js
// seo.js/components/src

<Helmet>
  ...
  <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR-ID"></script>
  <script>{`
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'YOUR-ID');
  `}</script>
</Helmet>
```
## sitemapの設置
クローラーがサイト構造を読み取るのを助けます。

オフィシャルのプラグイン、[gatsby-plugin-sitemap](https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap)が用意されているので、これをインストールします。

```
npm install gatsby-plugin-sitemap
```

インストールをしたら、gatsby-config.jsの中に置くのを忘れないようにしましょう。

```js
# gatsby-config.js

module.exports = {
    plugins: [
        `gatsby-plugin-sitemap`,
    ]
}
```

なお、sitemapはSearch ConsoleでもGoogleに提出できますが、下のURLからでも可能です。

• `https://google.com/ping?sitemap="ウェブサイトのサイトマップURL"`

（例: `https://google.com/ping?sitemap=https://monotein.com/sitemap.xml`）

## robot.txtの設置
クローラーに読み取ってほしいページと読み取ってほしくないページを伝えます。

こちらも[gatsby-plugin-robots-txt](https://www.gatsbyjs.com/plugins/gatsby-plugin-robots-txt)というプラグインが用意されているので、これを使います。

```
npm install --save gatsby-plugin-robots-txt
```

そしてsitemapと同じくgatsby-config.jsに設置します。

```js
// gatsby-config.js

module.exports = {
    plugins: [
      `gatsby-plugin-sitemap`,
      `gatsby-plugin-robots-txt`
    ]
}
```

正しく設定されているかは[こちら](https://support.google.com/webmasters/answer/6062598)でテストできます。

## SEOコンポーネントの設置
サイトの各ページの`<head>`内にtitle、descriptionなどのmetaタグを設定します。

プラグイン、[gatsby-plugin-react-helmet](https://www.gatsbyjs.com/plugins/gatsby-plugin-react-helmet)を使いますが、このプラグインにはReact Helmetが必要なので、2つ一緒にインストールします。

```
npm install gatsby-plugin-react-helmet react-helmet
```

次にsrcのcomponentsフォルダーなどにSEOコンポーネントを作りましょう。

[GatsbyのオフィシャルサイトにあるSEOコンポーネント](https://www.gatsbyjs.com/docs/add-seo-component/#seo-component)はURL正規化など重要なことが書かれていませんが、ベースとしては使えるので、これを参考にします。

```js
// seo.js/components/src

import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useLocation } from "@reach/router"
import { useStaticQuery, graphql } from "gatsby"

const SEO = ({ title, description, image, article }) => {
  const { pathname } = useLocation()
  const { site } = useStaticQuery(query)

  const {
    defaultTitle,
    titleTemplate,
    defaultDescription,
    siteUrl,
    defaultImage,
    twitterUsername,
  } = site.siteMetadata

  const seo = {
    title: title || defaultTitle,
    description: description || defaultDescription,
    image: `${siteUrl}${image || defaultImage}`,
    url: `${siteUrl}${pathname}`,
  }

  return (
    <Helmet title={seo.title} titleTemplate={titleTemplate}>
      <meta name="description" content={seo.description} />
      <meta name="image" content={seo.image} />

      {seo.url && <meta property="og:url" content={seo.url} />}

      {(article ? true : null) && <meta property="og:type" content="article" />}

      {seo.title && <meta property="og:title" content={seo.title} />}

      {seo.description && (
        <meta property="og:description" content={seo.description} />
      )}

      {seo.image && <meta property="og:image" content={seo.image} />}

      <meta name="twitter:card" content="summary_large_image" />

      {twitterUsername && (
        <meta name="twitter:creator" content={twitterUsername} />
      )}

      {seo.title && <meta name="twitter:title" content={seo.title} />}

      {seo.description && (
        <meta name="twitter:description" content={seo.description} />
      )}

      {seo.image && <meta name="twitter:image" content={seo.image} />}
    </Helmet>
  )
}

export default SEO

SEO.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string,
  image: PropTypes.string,
  article: PropTypes.bool,
}

SEO.defaultProps = {
  title: null,
  description: null,
  image: null,
  article: false,
}

const query = graphql`
  query SEO {
    site {
      siteMetadata {
        defaultTitle: title
        titleTemplate
        defaultDescription: description
        siteUrl: url
        defaultImage: image
        twitterUsername
      }
    }
  }
`
```

これを各ページ（もしくはLayout.jsなど）で読み込ませます。

SEOに渡すpropsは適宜、調節してください。

```js
// blogTemplate.js/templates/src

const BlogTemplate =({ data })=>{
    const { title, description, keywords, featuredImage } = data.markdownRemark.frontmatter;
    return (
        <Layout>
        <Seo title={title} 
             description={description}
             keywords={keywords}  
             featuredImage={featuredImage.childImageSharp.resize.src} 
        />
        ...
```

なお、Gatsbyのサイトはテンプレートも含め英語で作られている場合が多く、SEOコンポーネント内のlangタグもenとなっているので、enからjaへ変更しておきましょう。

```js
// seo.js/components/src

<Helmet>
    <html lang="ja"/>
    ...
</Helmet>
```

## URL正規化
URL正規化の必要性については[こちらの記事](https://digitalidentity.co.jp/blog/seo/url-unify.html)などを参考にしてください。

[URL正規化のためのプラグイン](https://www.gatsbyjs.com/plugins/gatsby-plugin-canonical-urls)もありますが、当サイトのような静的サイトの場合は、SEOコンポーネントのuseLocation()でpathを取得して渡せば対応可能です。

```js
// seo.js/components/src

const SEO = () => {
  const { pathname } = useLocation();
  
  const {
      siteUrl,
  } = site.siteMetadata

  const seo = {
      canonical: `${siteUrl}${pathname}`
  }

  return (
        <Helmet>
            <html lang="ja"/>
            {seo.canonical && <link rel="canonical" href={seo.canonical} />}
            ...
        </Helmet>
```

## 構造化データの設置
構造化データとは、JSON-LD(JSON for Linked Data)形式で書かれたもので、SEOコンポーネントで設定した各種metaタグよりも細かな情報をGoogleのクローラーに伝えます。

そのデータは「リッチリザルト」というものに使われ、検索結果のトップで次のように表示されます。

<div class="img-border">

![rich-result.jpg](../../images/singleBlogPageImages/blogArticleImages/blog57/rich-result.jpg)
</div>

Gatsbyオフィシャルページでは[簡単にしか触れられていませんが](https://www.gatsbyjs.com/docs/seo/#generate-rich-snippets-in-search-engines-using-structured-data)、今回はこの構造化データ用のコンポーネントを上述のSEOコンポーネントとは別に作り、それをページに読み込ませます。

下のコードをコピーすれば、そのまま使えます。

参考1：["Article"分類について](https://developers.google.com/search/docs/data-types/article#non-amp)

参考2: [コンテンツ分類について](https://developers.google.com/search/docs/guides/search-gallery?hl=ja)

```js
// jsonLd.js/components/src

import React from "react";
import { Helmet } from "react-helmet";
import { useLocation } from "@reach/router";
import { useStaticQuery, graphql } from "gatsby";

const JsonLd = ({ title, description, featuredImage, date, update }) => {
  const { pathname } = useLocation();
  const { site } = useStaticQuery(query);
  
  const {
    siteUrl,
    defaultImage,
  } = site.siteMetadata;

  const jsonLdStructuredData = {
      "@context": "https://schema.org/", 
      "@type": "BlogPosting",
      mainEntityOfPage: {
        "@type": "WebPage",
        "@id": siteUrl + "/blog",  // 適宜調節してください。
      },
      author: {
        "@type": "Person",
        name: "monotein",
        url:  siteUrl,
        image: "https://monotein.com/assets/index.png",  // 適宜調節してください。
      },
      publisher: {
        "@type": "Organization",
        name: "monotein",
        url: siteUrl,
        logo: {
            "@type": "ImageObject",
            url: "https://monotein.com/assets/index.png", // 適宜調節してください。
            width: 300,
            height: 300
        }
      },
      headline: title,
      image: featuredImage ? featuredImage : defaultImage,
      url: `${siteUrl}${pathname}`,
      description: description,
      datePublished: date,
      dateCreated: date,
      dateModified: update,
  }

  return (
      <Helmet>
        <script type="application/ld+json">{JSON.stringify(jsonLdStructuredData)}</script>
      </Helmet>
  );
};

export default JsonLd;

const query = graphql`
  query Metadata {
    site {
      siteMetadata {
        siteUrl
        defaultImage
      }
    }
  }
`

```

これをページで読み込ませます。

先ほどのSEOコンポーネントと同じく、ブログのテンプレートに読み込ませています。

```js
// blogTemplate.js/templates/src

const BlogTemplate =({ data })=>{
    const { title, description, keywords, featuredImage } = data.markdownRemark.frontmatter;
    return (
        <Layout>
          <Seo
          ...
          />
          <JsonLd title={title} 
                  description={description}
                  featuredImage={featuredImage.childImageSharp.resize.src} 
                  date={date} 
                  update={update}
          />
          ...
```

この構造化データを使ったリッチリザルトは、下のGoogleのサイトでテストできます。

• [https://search.google.com/test/rich-results](https://search.google.com/test/rich-results)

## redirectの設定（Netlify）
GatsbyサイトをNetlifyでデプロイする人は多いですが、もしカスタムドメインを使う場合にはredirectの設定が必要になります。

これを忘れている人は多いようで、私自身も初期の頃はredirectの設定をしておらず、検索ランキングで大きくペナルティを受けていました。

これはカスタムドメインを設定しても、Netlifyが用意してくれる元のURL(xxx.netlify.appなど)でもアクセスができるので、重複コンテンツと見なされる可能性が高まるからです。

この解決のためには、staticフォルダ（もし作っていない場合はルートディレクトリに作成してください）内に`_redirect`ファイルを作り、次のように書きます。

```
# Netlify's Default domain / Custom domain / Status code
https://xxxxx.netlify.app/*  https://www.custom-domain.com/:splat 301!
```

これでbuild時、publicフォルダ内に`_redirect`ファイルが作成されます。

_redirectファイルの書き方が正しいかは[こちら](https://play.netlify.com/redirects)でチェックできます。

## テンプレートファイルの移動
ブログで使うテンプレート（blogTemplate.js）などがpages/src内にあると、build時にこれも一つのページ(例：`https://xxx.com/blogTemplate`)として書き出されます。

しかしこれはMarkdown等からのデータを書き込むテンプレートなので、このURLにアクセスしても中身は空です。

特にこれがSEOに悪影響を及ぼすことはないようですが、空のページがあるのは気持ちが良くないので削除します。

まずはblogTemplate.jsなどの不要なファイルがページとして書き出されていないかを、publicフォルダ内を見るか、もしくはsitemap.xmlを開いてチェックします。

もし不要なテンプレートがページとして設定されている場合、pages/srcからcomponents/srcなどにtemplateBlog.jsファイルを移しましょう。

こうすることでbuild時、不要なファイルからページが生成されなくなります。

## URL末尾のスラッシュの統一
Gatsbyで作ったサイトのURL末尾のスラッシュ（trailing slash）が引きおこす問題について、英語だと様々な情報が出てきますが、日本語ではほとんど見つかりません。

GoogleはスラッシュのついているURL（`...blog/gatsby-seo/`）とついていないURL（`...blog/gatsby-seo`）を別のものとして扱うため、サイト内のpathやURLはスラッシュを付けるか付けないかを統一することが重要です。

まずはURLのスラッシュの状況を、publicフォルダ内のsitemap.xmlで確認してみましょう。

次にredirectが働いているかを調べます。

スラッシュ付きのURLと付いていないURLをブラウザに打ち込んでください。

スラッシュを付けているURLを入力したのに、スラッシュなしのURLに変わった場合はredirectが正常に働いています。

しかし、スラッシュを付けていないURLと付けているURL、それぞれでページが表示された場合は、同じページが違うURLで存在することになりSEO上問題なので、どちらかで統一するようにします。

末尾のスラッシュを取り除く[gatsby-plugin-remove-trailing-slashes](https://www.gatsbyjs.com/plugins/gatsby-plugin-remove-trailing-slashes)のようなプラグインもあります。

しかしながら[こちらのブログで書かれているように](https://zenofreact.com/why-the-trailing-slash-gatsby/)、このプラグインも万能ではなく、また次で触れるように（Netlifyでホストしている場合に）末尾のスラッシュには多くの人が困っているようで、日本語のネット空間でなぜこの問題がほとんど出ていないのか不思議です。

参考記事: [https://bloggingfordevs.com](https://bloggingfordevs.com/gatsby-seo)

## サーチコンソールに出る「除外」への対応（NetlifyのUIのバグについて）
私が以前作ったあるGatsbyのサイトでは、上のスラッシュのせいでリダイレクトが発生し、サーチコンソールに大量の「除外」が出ていました。

サイトのpathを精査してスラッシュをすべて取り除いたり、[gatsby-plugin-remove-trailing-slashes](https://www.gatsbyjs.com/plugins/gatsby-plugin-remove-trailing-slashes)のプラグインを入れたりしたものの、なぜか効果はなく、ほとんどお手上げ状態となってしまったのですが、それでも色々と調べてみると[こちらのようなGitHubのissue](https://github.com/gatsbyjs/gatsby/issues/9207)を見つけ、真の問題はNetlifyにあったことがわかりました。

NetlifyのBuild & deplyにあるAsset optimizationの項目はUIが非常にわかりにくく(GitHubではbugとされています)、私はすべてオフにしていたのですが、実はオフになっていなかったようです。

わかりやすいよう下にスクリーンショットを載せます。

---

**正しくないDisabled**

<div class="img-border">

![Incorrect-Netlify-asset-optimization](../../images/singleBlogPageImages/blogArticleImages/blog57/incorrect-Netlify-asset-optimization.jpg)

</div>

**正しいDisabled**

<div class="img-border">

![Correct-Netlify-asset-optimization](../../images/singleBlogPageImages/blogArticleImages/blog57/correct-Netlify-asset-optimization.jpg)

</div>

Gatsbyに興味のある人は次の記事も参考にしてください。

<div class="rich-card-link">
<a href="/blog/making-pagination-for-gatsby-blog">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-89.png)

</div>
<div class="r-card-text">
Gatsbyブログのページネーションの作り方
</div>
</div>
</a>
</div>


<div class="rich-card-link">
<a href="/blog/gatsby-blog-prev-next">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-90.png)

</div>
<div class="r-card-text">
Gatsbyに前後の記事へのリンクを追加する方法
</div>
</div>
</a>
</div>

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/gatsby-seo-and-optimisations">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/gatsby-seo-and-optimisations)

---

# Font AwesomeをSVGで置き換えてサイト表示速度を改善する方法

URL: https://monotein.com/blog/font-awesome-alternative
公開日: 2020.12.08
更新日: 2026.3.5
概要: Font Awesomeはページ速度に悪影響を与えることがあります。本記事ではFont AwesomeをSVGアイコンに置き換えて表示速度を改善する具体的な方法を解説。Feather Iconsなどの無料SVGライブラリーの紹介から、HTMLとCSSでアイコンと文字を横並びに表示する実装方法まで詳しく説明します。

## ウェブサイトに不可欠なアイコン
ウェブサイトを作るときにアイコンは不可欠です。

アイコンを使うメリットはいくつかありますが、一番大きいのは見た目がスッキリすることです。

すべてを文字（テキスト）で説明しようとすると、ゴチャゴチャとした見た目になってメリハリがなくなってしまうからです。

その点アイコンを使えば、まさに「百聞は一見にしかず」ということで、ビジュアル要素で簡潔に伝えられます。

英語圏のウェブサイトと比較すると、日本のウェブサイトは文字による説明が非常に多く、アイコンを使っていてもその周りにわざわざ文字が載せられていることもあり、ビジュアル的な美しさやまとまりよりも、正確性や失敗しないこと、いわば減点主義的な傾向が見て取れます。

しかし適切な場所に適切なアイコンを使えば、だらだらと文字を連ねるよりも高い効果をあげることが可能です。

<a href="/present?magnet=first-study-guide&/blog/font-awesome-alternative">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&/blog/font-awesome-alternative)

## 一番人気のFont Awesome
アイコンを使う時に最もポピュラーな選択肢はFont Awesomeです。

• [https://fontawesome.com](https://fontawesome.com/icons?d=gallery)

Font Awesomeはアイコンのライブラリーで、無料プランでも多数のアイコンが利用可能なので、世界中のウェブ制作で使われています。

Font Awesomeのメリットは「簡単に導入できること」「ビギナーにも使い方がわかりやすいこと」などありますが、一番のメリットはユーザーが日本にもたくさんいるので、使い方の情報をネットで簡単に検索できることでしょう。

実際に私自身も当サイトの制作時、便宜的にFont Awesomeを使っていましたが、下記の理由によりFont Awesomeはすべて取り除きました。

## Font Awesomeの問題点
パフォーマンスとデザインの観点から見たFont Awesomeの問題は次の2つです。

### スピードが落ちる
Font Awesomeの一番の問題点は、パフォーマンスに悪影響を及ぼすことです。

これはページを表示するときにFont AwesomeのCDNと通信をする必要があるためで、その分スピードが落ちてしまいます。

また使用方法によっては、仮にサイトで使っているFont Awesomeのアイコンが1個であっても、Font Awesomeライブラリーのアイコンをすべて読み込んでいる場合もあり、その場合パフォーマンスへの影響は非常に大きくなります。

### デザインに制限がある
無料のプランでも多くのアイコンを使えるのがFont Awesomeの大きなメリットだと書きましたが、そこには一つ、デザイン的な制限があります。

線の細いものや、アイコンの角がシャープなデザインを使いたい場合には、有料プランへ移行する必要があります。

しかし仮に有料プランに移行したとしても、次で説明するSVGと比べるとデザインの自由度は依然として低いままです。

## SVGで置き換えてスピードを改善する
Font Awesomeアイコンの代替として私はSVGを使っています。

SVG形式については[「画像がギザギザして不鮮明な理由」](/blog/svg-image)でくわしく説明していますが、SVGのメリットはサイズが小さいこと、そして拡大縮小しても表示が劣化しないことです。

<div class="rich-card-link">
<a href="/blog/svg-image">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-16.png)

</div>
<div class="r-card-text">
画像がギザギザして不鮮明な理由
</div>
</div>
</a>
</div>

Font Awesomeアイコンとの比較でいうと、必要なアイコンだけをSVG形式でウェブサイトのフォルダー内に保持すれば、ページ表示のときに余計な通信をせずに済むので、表示スピードがアップしてパフォーマンスが改善します。

<div class="rich-card-link">
<a href="/blog/improving-fonts-and-images">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-2.png)

</div>
<div class="r-card-text">
【2026年版】ウェブサイトのスピードを必ず上げる『2つの方法』
</div>
</div>
</a>
</div>

スピード測定ツールのPageSpeed InsightsやLighthouseでは、よく改善項目として「ウェブフォント」について言及されます。

私自身、以前は「ウェブフォント」というとすべてGoogleのウェブフォントだと思っていたのですが、ある時ここにはFont Awesomeも含まれていることに気がつきました。

その名前が示すように、Font Awesomeは「フォント・アイコン」というものに分類されるもので、テキストを使ってアイコンを表現しています。

そのため、もしPageSpeed InsightsやLighthouseで「ウェブフォントの改善」と出た場合には、次に説明する方法でFont Awesomeを取り除くことをお勧めします。

## Font AwesomeをSVGで置き換える方法
まずはSVG形式のアイコンを入手する必要があります。

自分で作ったりデザイナーに依頼することもできますが、一番簡単なのはネットのフリーライブラリーから入手する方法です。

ここでは私が最近よく使うSVGライブラリーを紹介します。

### Feather Icons

• [https://feathericons.com](https://feathericons.com)

Feather Iconsでは多数のSVGアイコンが利用でき、すべて無料です。

当サイトのアイコンも多くがこのFeather Iconsのものです。

Feather Iconsの特徴は、ダウロードする前に画面右側でサイズとストロークのサイズ、色を調節できることで、ここで設定をすればダウンロードしてすぐにSVGアイコンを利用できます。

私はこの機能を普段使わないのですが、それは後で説明するように、Feather IconsのSVGアイコンをウェブサイトに読み込んだ後、widthやheight、colorを適宜自分でカスタマイズしたいからです。

Feather Icons以外のライブラリーとしては以下のようなものもあります。

• [https://uxwing.com](https://uxwing.com)

• [https://vercel.com/design/icons](https://vercel.com/design/icons)

• [https://fonts.google.com/icons](https://fonts.google.com/icons)

• [https://remixicon.com](https://remixicon.com)

• [https://simpleicons.org](https://simpleicons.org)

• [https://lucide.dev/icons](https://lucide.dev/icons)

• [https://materialdesignicons.com](https://materialdesignicons.com)

• [https://tablericons.com](https://tablericons.com)

• ライブラリーをまとめたサイト：[https://shapedfonts.com/iconclub](https://shapedfonts.com/iconclub)

## アイコンと文字を横並びできれいに表示する方法

文字の横にアイコンを並べたいケースはよくあると思います。

これをFeather Iconsなどで入手したSVGでやろうとすると、最初はアイコンと文字が縦に並んだ状態になります。

![Before](../../images/singleBlogPageImages/blogArticleImages/blog50/before.jpg)

これを下のようにする方法を紹介します。

![After](../../images/singleBlogPageImages/blogArticleImages/blog50/after.jpg)

### 1. SVGからheightとwidthを削除する

まずダウンロードしたSVGファイルにすでに設定してある`height`と`width`を取り除きます。

こうすることで、HTMLやReactのJSXで読み込んだ後、CSSの`height`と`width`でSVGを調整できるようになります。

SVGファイルはコードエディターからアクセスして開きましょう。

サイズ以外のこと、例えばアイコンに色を入れたりストロークの太さを変更したい場合、私はSVGのファイルに直接書き込んでしまいます。ここは好みですが、私はこっちの方がやりやすいと感じます。

SVGファイルでは他のattributeを変更することも可能です。

例えばアイコンの丸みを抑えて、直線的なデザインにしたい場合には以下のようにします。

```js
<svg 
    stroke-linecap="square" 
    stroke-linejoin="crop"
    ...
>
```

### 2. HTMLでSVGを読み込む
HTMLにSVGを読み込みます。

ここも好みですが、私は`<img/>`を通常使います。

```js
<div class="container">
    <img src="*SVGファイルのパス" alt="arrow-left"/>
    <h3>ウェブサイトの『もう一つのスピード』をUPさせる方法 ― 体感速度について</h3>
</div>
```

### 3. CSSで調整する
CSSでスタイリングします。

`display: flex;`で横並びにして、`align-items: center;`で垂直方向の真ん中に配置します。

```css
.container {
    display: flex;
    align-items: center;
}

.container > img {
    flex: 20%;
    width: 35px;
    height: 35px;
}

.container > h3 {
    flex: 80%;
}
```

## アイコンフォントとSVGの比較

最後にアイコンフォントとSVGの簡単な比較表を載せておきます。

|      | **アイコンフォント <br/>（Font Awesome）**|**SVG**|
| :--:| :--------------: |:--------------:| 
|スピード| 遅くなる可能性がある| 速い |
|サイズ|小さい|小さい|  
|手軽さ |ビギナーには使いやすい|簡単|
|カスタマイズ（CSSでの操作性）|普通|fillやstrokeなどが使え、アイコンフォント以上にカスタマイズ可能|
|アクセス性|普通|`<title>`や`<desc>`を中に入れることができる|

monoteinはJamstackサイトの制作を専門としています。

ストレスフリーでサクサク動き、高いCV率を実現するJamstackサイトに興味のある方は、[コチラ](/contact)より遠慮なくお問い合わせください。

<a href="/present?magnet=first-study-guide&/blog/font-awesome-alternative">

![image](../../images/commonImg/first-study-guide.png)

</a>

● [monotein.com/present](/present?magnet=first-study-guide&/blog/font-awesome-alternative)

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/font-awesome-alternative">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/font-awesome-alternative)

---

# ウェブサイトの『体感速度』UPの方法

URL: https://monotein.com/blog/perceived-speed-and-how-to-improve
公開日: 2020.12.07
更新日: 2021.06.18
概要: ウェブサイトのスピードを高めるには表示速度と体感速度の2つをアップする必要があります。スピードはビジネスの成功にも関係してくる非常に重要な要素なので、表示速度だけでなく体感速度も同時に高めて、快適なウェブ体験をユーザーに提供しましょう。

## 5秒でユーザーは閉じる
「ページの表示に5秒以上かかるとユーザーの90%がページを閉じる」という[Googleの調査](https://www.thinkwithgoogle.com/marketing-strategies/app-and-mobile/mobile-page-speed-new-industry-benchmarks/)が示す通り、ウェブサイトのスピードは今やビジネスの利益に直結する重要な要素です。

つまりスピードUPが成功するウェブサイトへの重要な条件となるわけですが、この「スピード」には「表示速度」と「体感速度」の2種類があります。

「表示速度」とは客観的なスピードのことで、通常「ウェブサイトのスピードUP」というと、こちらのスピードのことを指します。

PageSpeed InsightsやLighthouseなどの測定ツールで計測できるスピードは、この「表示速度」のことです。

一方で「体感速度」とはユーザーの主観的なスピードで、[ユーザーの年齢](https://www.thinkwithgoogle.com/intl/en-gb/marketing-strategies/app-and-mobile/need-speed-evaluating-perception-and-reality-speed-mobile-web/)やその時の心理状態などに感じ方が左右されます。

これは天気予報でいう「体感温度」と似たもので、実際の気温が10度でも、風が強いと10度よりも寒く、太陽が出ていると10度よりも暖かく感じるのと同じ理屈です。

「表示速度」と「体感速度」の特徴をまとめると以下のようになります。

| **表示速度**|**体感速度**|
| :--------------: |:--------------:| 
|客観的|主観的|  
|技術的|感情的|
|ウェブサイトに使われているテクノロジーが影響|年齢、環境、心理状態などが影響|

## なぜ体感速度の改善が重要？
当ブログでは、これまで「スピードUP」として表示速度の改善に焦点を当てた[テクニック](/blog/improving-fonts-and-images)を主に紹介してきましたが、トータルとしてのスピードUPを図るには、表示速度だけでなく体感速度の改善も必須です。

<div class="rich-card-link">
<a href="/blog/improving-fonts-and-images">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-2.png)

</div>
<div class="r-card-text">
【2026年版】ウェブサイトのスピードを必ず上げる『2つの方法』
</div>
</div>
</a>
</div>

今回はこの体感速度を改善するテクニックを紹介していきます。

## アニメーションや動画を取り除く
まず最初にすべき体感速度アップの方法は、不要なアニメーションを取り除くことです。

アニメーションはウェブサイトの見た目をリッチにしますが、その分デバイスの処理能力を大きく使うため、全体としてのスピードを遅くします。

また仮にページ表示が完了していても、アニメーションや動画がなめらかに動いていないと、ユーザーは「スムーズじゃない」「遅い」と感じて体感速度は下がってしまいます。

## ユーザーが一番見たい情報を先に読み込む
どのページにも「ユーザーが一番見たい情報」というものがあります。

そのような要素は「バイタル・コンテンツ（Vital Content）」と呼ばれたりしますが、ここをページの他の要素よりも速く表示させることで、ユーザーは「自分の欲しい情報に速く到達できた」と感じ、体感速度が速くなります。

バイタル・コンテンツを先に表示させるための一番簡単な方法は、CSSを`<head>`部分で読み込むことです。

通常CSSは別ファイルに書き込まれていますが、これだとファイル読み込みの分時間がかかってしまいます。

とはいえ、すべてのCSSを`<head>`部分に書き込むのは開発時やメンテナンス時に大きな問題となります。

そこでバイタル・コンテンツに必要なCSSだけを抜き取って`<head>`で読み込むようにするのです。

そうすることで、重要な要素が素早く表示されて体感速度がアップします。

なお、ページのどこがバイタル・コンテンツであるかをデザインの段階で決めておくと、その後のコーディング作業をスムーズに進めていけます。

## 読み込み状態をユーザーに通知する
ページを読み込んでいる時に表示されるのが真っ白なブランクページだと、ユーザーは「自分が今どこにいるのか」「本当に自分の意図した通りの操作が実行されているのか」と不安に感じ、ページを閉じてしまいます。

これを避けるには、読み込みの状態をユーザーに知らせてユーザーの不安を軽減させることが重要です。

ここでは読み込み状態を表示して、体感速度を上げる有効な方法を3つ紹介します。

### スピナー / プログレスバー

**• スピナー**

![spinner](../../images/singleBlogPageImages/blogArticleImages/blog49/spinner.gif)

**• プログレスバー**

![progress-bar](../../images/singleBlogPageImages/blogArticleImages/blog49/progress-bar.gif)

ウェブサイトやアプリで上のようなものを目にしたことがあると思います。

下のプログレスバーのように、完了している処理をパーセント表示させることで、ユーザーに処理が進行している実感をより強く与えられます。

ReactやNext.jsでのプログレスバーの実装方法は、[「プログレスバーの作り方（React / Vite / Next.js）」](/blog/making-a-progress-bar-for-react)で解説しています。

この方法は処理の実行を知らせるために使われていますが、待ち時間が一定以上になると効果は薄いとされています。

私自身の体感としても、10秒以上スピナーやプログレスバーが表示されていると「長い！」と感じてしまいます。

### スケルトン・スクリーン
**• 読み込み中**
![skelton-screen1](../../images/singleBlogPageImages/blogArticleImages/blog49/skelton-screen1.jpg)

**• 読み込み完了後**
![skelton-screen2](../../images/singleBlogPageImages/blogArticleImages/blog49/skelton-screen2.jpg)

---

別名でコンテンツ・プレイスホルダーやスケルトン・レイアウトとも呼ばれますが、FacebookやYouTubeなどで上のような画面を目にした人は多いと思います。

先にコンテンツが載る「骨組み」を見せるという、ある種クラシックな方法ですが、体感速度を下げる方法として近年多くのウェブサイトで使われています。

### Progress HUB
![Progress hud](../../images/singleBlogPageImages/blogArticleImages/blog49/progress-hud.jpg)
（出典: [https://iosexample.com](https://iosexample.com/a-lightweight-and-easy-to-use-swiftui-wrapper-for-jgprogresshud/)）

Progress HUD(Heads Up Display)は特にモバイルアプリで多く採用されており、処理の実行中に色がグラデーション模様で変化する様子をユーザーに見せ、ビジュアル的に楽しんでもらうことで、ストレスを低減しつつ処理の進行を伝えます。

## プログレッシブJPEG画像を使う
これはスケルトン・スクリーンと似たことを画像に対して行う方法です。

最初に画素の粗いイメージを表示させ、ユーザーに画像が読み込まれていることを知らせます。

そして徐々に読み込みを行って、鮮明な画像を表示させていきます。

![progressive-jepg](../../images/singleBlogPageImages/blogArticleImages/blog49/progressive-jepg.jpg)

（出典: [https://blog.mozilla.org](https://blog.mozilla.org)）

これによって読み込み処理の進み具合がユーザーに伝わり、体感速度が高まります。

## font-display
Webフォントと呼ばれる外部読み込みのフォントが多くのウェブサイトで使われています。

しかしWebフォントは読み込みに時間がかかるので、ページが表示されても文字の表示には遅れの生じる場合がよくあります。

この解決のためにはCSSの「font-display: swap;」を使います。

これによってデバイスのデフォルトフォントをまず表示させ、Webフォントの読み込みが完了した時点でWebフォントに切り替えていくので、ユーザーの待ち時間を減らして体感速度を改善します。

```
// font-displayの使用例

p {
    font-family: 'Noto Sans JP', sans-serif;
    font-display: swap;
    font-size: 1rem;
}
```

## なぜスピードは速くないといけないのか？
今回は体感速度の解説と、体感速度アップのためのテクニックを紹介しました。

多くのテクニックで共通しているのは「ユーザーに現在の進行状態を知らせる」ということです。

それによってユーザーにプロセスがしっかりと進んでいることが伝わり、待ち時間が実際よりも短く感じられるからです。

冒頭でも書いたように、ウェブサイトのスピードはビジネスの成功に関係する重要な要素となっています。

ウェブサイト上でのユーザーの体験、いわゆるUX（User Experience）というと、デザインやアニメーションなどに話の焦点がいきがちですが、実は「UX = Performance = 体感速度」なのです。

ページの表示速度と合わせて体感速度もアップさせていくことが、成功するウェブサイトのためにますます重要なことになっています。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/perceived-speed-and-how-to-improve">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/perceived-speed-and-how-to-improve)

---

# Shop Payが何かわからない人へ

URL: https://monotein.com/blog/differences-shopify-payment-and-shop-pay
公開日: 2020.6.5
更新日: 2020.6.6
概要: Shopifyで利用できる決済手段の中に「Shop Pay」というものがあります。これは同じくShopifyが提供するデフォルトの決済手段「Shopifyペイメント」とよく似ている名前なので、何が違うのかわからない人が大勢います。この2つは似ているようで違うものです。今回はそんな「Shop Pay」と「Shopifyペイメント」の違いについて、わかりやすく解説をします。

## 同じ名前が二つ？
Shopifyで利用できる決済手段一覧を見ると似たような名前が2つあります。

ShopifyペイメントとShop Payです。

この違いはなにか、結論からいうと「Shop PayはShopifyペイメントの一部である」ということです。

### 決済手段の一覧
• **Shopifyペイメント**<br>• Apple Pay<br>• Google Pay<br>• **Shop Pay**<br>• Amazon Pay<br>• PayPal<br>• Stripe<br>• KOMOJU（コンビニ決済や銀行振込を利用可）<br>• 携帯キャリア決済<br>• GMOイプシロン<br>• 2Checkout<br>• CyberSource<br>• BitPay<br> 

## Shop PayはShopifyペイメントの一部
一見ややこしいですが、ShopifyペイメントとShop Payはそれぞれ独立した決済手段ではありません。

[「Shopifyペイメントについて詳しく解説」](/blog/differences-shopify-payment-and-shop-pay)で紹介したように、Shopifyペイメントはクレジットカード決済、そしてGoogle PayやApple Payから構成されていますが、そのうちの一つがShop Payなのです。

このShop Payについて次でくわしく説明していきます。

## Shop Payは何の役に立つ？
Shop Payはユーザーの個人情報入力の手間をはぶく仕組みです。

Shop Payを使って一回でも買い物をすると、2回目以降の購入時にクレジットカード情報や配送先住所の入力をしなくて済むのです。

購入プロセスを速く完了させることができるので、アイテムの購入率やカゴ落ち率の低下といった効果があります。

このShop PayはShopifyが提供している公式サービスで、2020年初頭にShopify PayからShop Payへと[名称が変更](https://changelog.shopify.com/posts/shopify-pay-is-now-shop-pay)されました。

## Shop Payのメリット
ユーザーは最初のアイテム購入時にクレジットカード情報や配送先情報、電話番号などを入力する必要があります。

しかし2回目以降は、Shop Payに対応しているショップでアイテムを購入してShop Payをクリックすると、前回入力したクレジットカード情報や配送先情報が表示され、購入プロセスをすぐに完了できます。

ここだけを見ると、たいしたことのないように思う人が多いと思います。

しかし、Shop Payの最大のポイントは「同一ショップである必要はない」という点です。

つまりShopifyでECショップを立ち上げているお店であれば、食品店でも服屋さんでも雑貨店でも、どこのショップでも入力の手間が省かれるのです。

これはShop Payを提供しているShopifyがユーザーの入力情報を保存しているから可能な仕組みです。

なおShop Payの使い方ですが、ユーザーがShop Payを選ぶと登録した電話番号宛てに認証番号付きのSMSメッセージが届くので、それを使って認証します。

## ShopifyペイメントとShop Payの比較
ShopifyペイメントとShop Payをまとめると次のようになります。

---
**• Shopifyペイメント**

→ Shopify公式の支払い方法で、複数の決済手段（クレジットカード、Apple Pay、Google Pay、Shop Pay）から成る決済手段の総称。

**• Shopify Pay**

→ 以前入力したクレジットカード情報や配送先情報の再入力を行うことなく決済を完了できる仕組み。

---

なおShop Payで個人情報をすでに入力していても、購入時にShop Payを選択しなかった場合はクレジットカード情報や配送先情報の入力を再び求められます。

## 売上を増やすには？
今回は似たような名前のShopifyペイメントとShop Payの違いについて解説しました。

名前は似ていても違いはシンプルで、Shopifyペイメントは「決済手段の総称」、Shop Payは「購入時の個人情報の再入力を省く仕組み」なので、一度理解をしてしまえば問題はないでしょう。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/differences-shopify-payment-and-shop-pay">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/differences-shopify-payment-and-shop-pay)

---

# 画像がギザギザして不鮮明な理由

URL: https://monotein.com/blog/svg-image
公開日: 2020.4.20
更新日: 2021.12.1
概要: ロゴマークやイラストがギザギザして、不鮮明に見えるウェブサイトがあります。それがウェブサイトの一部であっても、全体が安っぽく見えてしまい、サイトの信用性を低下させる原因になります。これは使われている画像のフォーマットに原因があって引き起こされています。この問題を解消方法を紹介します。

## ギザギザで不鮮明なロゴ
下のYahooロゴのように、アイコンや画像がギザギザしているウェブサイトを見たことがある人は多いと思います。

<div class="img-border">

![unclear-logo](../../images/singleBlogPageImages/blogArticleImages/blog16/unclear-logo.jpg)

</div>

特に高画質表示に対応しているパソコンやモバイル端末を使用している場合は、遠目にも不鮮明さやギザギザが目立ちます。

ロゴ以外でもイラストや見出し文字などがギザギザしている場合がありますが、どちらの場合もプロフェッショナルには見えません。

この原因は画像フォーマットにあります。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/svg-image">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/svg-image)

## よく使われる画像フォーマット
多くのウェブサイトで使われる画像やイラストのフォーマットにはGIF、JPG、PNGの3つがあります。

### GIF
GIFは"Graphics Interchange Format"の略で、その特徴はファイル容量が軽いことです。

色数が最大256色しか使えないという制限があるので、写真などの表示には向きませんが、色数の少なくてよいボタンやアイコンにはよく使われていました。

後述のPNGと同じように背景の透過処理も可能です。

今でもSNSで見かけるパラパラ漫画のような動画でよく使われています。

### JPG
JPGは"Joint Photographic (Experts) Group"の略で、色数の多い写真の保存に向いており、スマートフォンで撮った写真は基本的にこのフォーマットで保存されています。

写真以外にもJPGが使われるケースは多く、もっとも一般的な画像フォーマットとして広く採用されていますが、画像圧縮時に画像劣化が起きます。

### PNG
PNGは"Portable Network Graphics"の略で、イラストの保存によく使われます。

「透過」といって背景を透明にすることが可能で、また保存を繰り返しても劣化しない可逆圧縮という特徴があるものの、画像の種類によってはJPGと比べてサイズが大きくなる傾向があります。

## ウェブサイトが安っぽく見える
ウェブサイトの画像には長い間これら3つの保存形式が使われてきました。

今でも広く使用されていますが、場合によってはこれら以外の保存形式がベターなケースがあります。

それは、これらの画像フォーマットはどれも拡大するとギザギザなところが見えてくるからです。

それはビットマップデータ方式という画像を小さなビット（ピクセル）で描写しているからで、ロゴマークのように比較的大きくて、目につきやすい所に設置された画像でよく目立ちます。

ギザギザ画像や画質の低い画像の問題は、そのホームページ全体が安っぽく信頼性が低く見えてしまうことです。

この問題の解決のために使われるのがSVGフォーマットです。

## SVGの特徴
SVGは"Scalable Vector Graphics"の略で、ベクター方式で保存されたフォーマットのことです。

ビットマップデータ方式との最大の違いは拡大をしてもギザギザがまったくあらわれず、なめらかなまま表示できる点です。

例えば当サイトの左上のmonoteinロゴもSVGなので、いくら拡大をしても滑らかなままです。

<div class="img-border" style="padding-top: 25px;">

![logo](../../images/logo/logo.svg)

</div>

SVGでは画像のデータを計算式として保存しており、色や曲線を計算で導き出して表示するので、どれだけ画像を大きくしてもその都度サイズに合う画像が計算されてなめらかなまま表示されるのです。

SVGはJPGやPNGなどよりも新しいフォーマットですが、パソコンやデスクトップ端末の高画質が進んでギザギザしたロゴやアイコンがかつてないほど目立つようになり、実際に多くのホームページのブランド価値を毀損している状況なので、SVGへの置き換えを進めていくことが大切です。

## SVGのメリット
SVGを使う最大のメリットは、スクリーンサイズを問わずに高画質表示が可能なことです。

2つ目のメリットはSVGはファイルサイズが非常に小さいことです。

データが計算式として数字で保存されているので、データ容量が小さくて済むのです。

それ以外にも色やサイズの変更が後から可能なこと、アニメーションや透過処理が行えることなどもSVGもメリットです。

## SVGのデメリット
SVGは写真のように色数が多く、複雑な形の曲線が多く使われているものの描写には向いていません。

これは前述の通り、SVGでは計算式によって画像を表示しているためで、描写が複雑になるほど計算式も複雑化してしまうためです。

JPG、PNG、SVGそれぞれに最適な使い道があり、すべての画像をSVGで置き換えられる訳ではないことに注意しましょう。

もし写真などの画像を使う場合は、JPG形式の画像を使うと重すぎます。

従来はWEBP形式に変換して使うことが推奨されていましたが、今ではさらに新しいAVIF形式が登場しているので、PNGやJPG画像はAVIF画像で使うようにしましょう。

くわしくは次の記事をご覧ください。

<div class="rich-card-link">
<a href="/blog/avif-image">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-75.png)

</div>
<div class="r-card-text">
AVIF画像とは？WebPより高圧縮な次世代フォーマットの使い方と作り方を解説
</div>
</div>
</a>
</div>

## SVGのユースケース
ホームページの中でも大きく、目立つ場所に使われるロゴにはSVGを使用した方がいいでしょう。

またアイコン画像にSVGを使用できるケースも多くあります。

前述の通りSVGはその性質上、複雑な形やグラデーションの描写が苦手です。

ロゴの中にはSVG化するのが難しい複雑なデザインもありますが、デバイスの高画質化が進み、ロゴの表示にPNGやJPGを使用するのが不適切なケースは多くなっています。

なのでロゴをデザインする段階で、SVG化することを前提としたシンプルなロゴを作成することも重要です。

## SVGの作り方
SVGはAdobe Illustratorをはじめとするイラスト編集ソフトによって作成できます。

CSSを使った描写も可能で、CSSと合わせるとアニメーション機能も付加できます。

一番いいのはデザイナーなどに依頼をして作ってもらうことですが、自分で作りたい人は下記サービスがSVGでの書き出しに対応しています。

• [https://vectr.com](https://vectr.com)

• [https://figma.com](https://figma.com)

## サイト上のSVG画像をコピーする方法
サイト上のSVG画像は、通常その画像の上で右クリックをして「画像を保存」を選べば保存できます。

しかしこの方法が使えないケース（`<img/>`タグを使わず、SVGを直接埋め込んでいるケースなど）もあり、その場合は次のようにします（ここではGoogleクロームの使用を想定）。

---

A. 画像の上で右クリックして「検証」をクリック

B. 画面右部（もしくは下部）に開いた開発者ツールのコードの中から`<svg...`で始まるコードを選択し、右クリックで「Copy(コピー)」→「Copy element(要素をコピー)」をクリックして、`<svg...`全体のコードをコピーする。

C. Macユーザーであれば「テキストエディット」などの`.txt`形式で文章を保存するアプリを開き、そこに今コピーした`<svg...`コードを貼り付ける。

D. ファイルを保存する。保存後、そのファイルの拡張子を`.txt`から`.svg`に変更する。

---

これでSVG画像を保存できます。

ロゴやSVG画像のコピーにあたっては著作権などに注意しましょう。

## SVGを最適化する
基本的にSVGはPNGやJPG形式よりも軽くなっていますが、不要なデータが含まれている場合もあります。

そのようなデータを削除して、SVGをより軽量化するためのサービスには以下のようなものがあります。

• [SVGOMG](https://jakearchibald.github.io/svgomg/)

なおSVG画像によっては最適化で画像の崩れなどが発生するケースがあるので、最適化後は一度確認してから使うようにしましましょう。

## 積極的にSVGを使う
SVGの「高画質でありながらサイズが小さい」という特徴は、そこだけ見るとSVGがJPGやPNGより優れているように見えてしまいますが、前述の通り、それぞれのフォーマットに最適な使い道があることに注意してください。

どの保存形式を使うかはケースバイケースで、その画像に応じて決めていく必要があるのです。

とはいえ、多くのウェブサイトでSVGを採用できるにも関わらず依然としてPNGやJPG形式が不適切に使われ、ギザギザのロゴやアイコンが目立ち、ホームページ全体の価値を大幅に低下させてしまっているのも事実です。

これはウェブサイトの見た目のみならず、ウェブサイトのパフォーマンスにも影響します。

ファイルサイズがSVGよりも重いJPGやPNGを使うと、ページ表示に時間がかかるようになり、これは[ページ表示に3秒以上かかると53%のユーザーは離脱する](https://www.thinkwithgoogle.com/intl/en-154/marketing-strategies/app-and-mobile/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue)という現代のスピード優先のビジネス環境では大きな問題となります。

SVGが使用できるところには積極的に利用をし、ホームページをどのデバイスでもスピーディー、かつ美しく表示できるようにすることが大切です。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/svg-image">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/svg-image)

---

# サーバー料金をゼロにする方法

URL: https://monotein.com/blog/how-to-host-website-for-free
公開日: 2020.4.18
更新日: 2022.1.11
概要: 今でも多くの人がサーバー料金を盲目的に払っていますが、実は有料サーバーは無くてもホームページは開設できるのです。これは近年、無料で利用できるサービスが数多く現れているためですが、ウェブ業界以外の人には思ったほど知られていない情報です。今回はそんなサーバーを無料にする方法を紹介します。

## サーバー料金は必ず必要なのか？
Wixなどのホームビルダーを使わないウェブサイトの作り方を調べると、レンタルサーバーを使う情報が多く出てきます。

しかしレンタルサーバーが必ず必要だったのは数年前までの話で、今では無料でウェブサイトを開設できるようになっています。

今回はレンタルサーバーの情報に埋もれて、一部の人以外にはあまり知られていない0円でウェブサイトを公開する方法を紹介します。

## ウェブサイト公開にかかる費用
ウェブサイト制作時に必要な費用には何が思い浮かびますか？

主なところでドメイン、サーバー、ウェブサイトの制作費用（デザイン、コーディングなど全て含む）などですが、この中でお金が一番かかるのは「ウェブサイトの制作費用」です。

ここでは話をシンプルにするために、今回は知人に頼んで無料でウェブサイトを作ってもらったとしましょう。

残るはドメイン代とサーバー料金で、このうち金額が大きいのはサーバー料金です。

ドメイン代の支払いは一年に一回ですし、値段も安ければ100円以下で購入できます。

しかしサーバー料金は、毎月安くても500円は取られます。

月々では大した額に見えなくても、趣味のウェブサイトに年間6,000円近く払うことに抵抗のある人は多いと思います。

## サーバーとドメインとウェブサイトの関係
それではサーバーとドメインとウェブサイトは、一体どのような関係にあるのでしょうか？

この3つの関係はよく家に例えて表現されます。

サーバーはインターネット空間の「土地」、ドメインはその土地の「住所」、ウェブサイトはその土地の上に建つ「家」という構図です。

つまりウェブサイトという「家」を開設するには、まずはそれを載せるためのオンライン上の「土地」、すなわちサーバーが必要になります。

そしてその場所に住所が無いことには人は訪ねて来れないので、ドメインという「住所」が必要となります。

ドメインというのは当サイトの"`https://www.monotein.com`"の「monotein.com」の部分のことを指します。

## サーバー料金は0円にできるのに、なぜその情報が広まらないのか？
この記事タイトルの通り、サーバー料金は無料にできます。

何らかの裏技や違法行為などはまったく必要ありません。

テクノロジーが発達したことで、サーバーと同じ機能を無料で提供するサービスが多く出てきているのです。

このテクノロジーはCDNと呼ばれます。

そのように無料でウェブサイトを公開できる状況になっているにも関わらず、その情報がウェブ業界の外には広まらず、多くの人がいまもサーバー料金をサーバーの運営会社や管理を任せているウェブ制作会社に払っているのには理由があります。

主な理由は、これらのサービスは主に海外企業が提供しているもののため、英語が理解できないと利用が難しいためです。

またウェブ知識が必要で扱いに難しい面があること、サイトの制作側が管理費をとるためにあえて有料のサービスを利用しているといった理由もあります。

## サーバー料金を無料にできるケースとできないケース
注意したいのは、すべてのウェブサイトのサーバー料金を無料にはできないことです。

ウェブサイトには、その作りによって大きく「静的サイト」と「動的サイト」の2つに分けることができますが、後者の動的サイトはその構造上サーバーが必要になるので基本的に無料にすることはできません。

しかし前者の静的サイトはサーバー料金を無料にできます。

## 静的サイトと動的サイトの見分け方
ログイン機能や予約機能などを持ち、ユーザーと双方向のやり取りが行われるウェブサイトは動的サイトに分類されます。

それ以外のブログや飲食店のホームページなどのように、ユーザーとのやり取りがないウェブサイトは静的サイトに分類され、サーバー料金を払わずにウェブサイトを公開できます。

日本でも広く使われているWordPressは動的サイトなのでサーバー料金が必要になります。

一方で飲食店や中小企業のウェブサイトのように、サービス情報や企業情報などを載せているだけのサイトは静的サイトなので、無料で公開できます。

## サーバーの無料サービスの具体例
以下のサービスを使えば無料で静的サイト（一部動的サイトも可）を開設することができます。

それぞれ簡単に解説します。

### Firebase
ウェブとモバイル向けに様々な機能を提供する開発プラットフォームです。

2014年にGoogleが買収して以降はGoogleの提供するサービスの一部となっているので、利用にはGoogleアカウントが必要です。

静的サイトのみならずサーバーと通信をする動的サイトも設置できるなど非常に利用範囲は広く、また基本的な機能はすべて無料で利用できます。

### Heroku
ウェブアプリケーションの開発、運用を行えるクラウドサービスです。

ここではバックエンドサーバーも無料でホスティングできますし、もちろん静的サイトも開設することができます。

使用量が一定を超えると有料となりますが、静的サイトの利用でその量を超えることは普通ないでしょう。

### Netlify
近年注目を集めるJamstackの開発時に、特によく利用されているクラウドサービスです。

<div class="rich-card-link">
<a href="/blog/what-is-jamstack">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-60.png)

</div>
<div class="r-card-text">
これだけ読めばOK！ Jamstackのすべてがわかります
</div>
</div>
</a>
</div>

当ウェブサイトもNetlifyを利用しており、静的サイトの開設のしやすさは他のサービスと比べても頭一つ抜けている印象です。

ここも十分な無料枠を提供しているので0円で利用可能です。

このNetlifyの使い方を後ほど解説していきます。

### GitHub Pages
Windows傘下のソースコード管理サービス、GitHubにより提供されています。

ここもアカウントを開設すれば無料で利用できます。

## Netlifyを使って0円でサイト公開する手順
いま紹介してきたCDNプロバイダーの中でも、一番簡単に利用できるのがNetlifyなので、使い方を紹介します。

下のURLをクリックしてください。

• [https://www.netlify.com](https://www.netlify.com)

右上の「Sign up」をクリックします。

<div class="img-border">

![netlify](../../images/singleBlogPageImages/blogArticleImages/netlify/signup.jpg) 

</div>

まずアカウントを作る必要があるので、「Email」をクリックします。

<div class="img-border">

![netlify-sign-up](../../images/singleBlogPageImages/blogArticleImages/netlify/signup-with-email.jpg) 

</div>

下の画面が開くので、お好きな「Email」と「Password」を入力し、アカウントを作成します。

<div class="img-border">

![pic3](../../images/singleBlogPageImages/blogArticleImages/netlify/create-account.jpg) 

</div>

「登録したメールアドレスに確認メールを送りました」という下のページが開くので、登録したメールアドレスのフォルダを確認します。

<div class="img-border">

![pic3.5](../../images/singleBlogPageImages/blogArticleImages/netlify/send-confirm-email.jpg) 

</div>

確認メールを開き、「Verify email」を押します。

<div class="img-border">

![pic3.8](../../images/singleBlogPageImages/blogArticleImages/netlify/email-verify.jpg) 

</div>

再び「[https://www.netlify.com](https://www.netlify.com)」を開き、右上の「Login」をクリックします。

<div class="img-border">

![netlify-login](../../images/singleBlogPageImages/blogArticleImages/netlify/login.jpg) 

</div>

「Email」をクリックします。

<div class="img-border">

![netlify-login](../../images/singleBlogPageImages/blogArticleImages/netlify/login-with-email.jpg) 

</div>

登録したメールアドレスとパスワードを入力し、緑の「Log in」ボタンを押します。

<div class="img-border">

![netlify-login](../../images/singleBlogPageImages/blogArticleImages/netlify/login-account.jpg) 

</div>

ログインすると、ダッシュボード画面が開くので、上部にある「Sites」をクリックします。

<div class="img-border">

![pic4](../../images/singleBlogPageImages/blogArticleImages/netlify/sites-menu-bar.jpg) 

</div>

画面の下にスクロールすると、次のようなスペースが出てきます。

<div class="img-border">

![pic5](../../images/singleBlogPageImages/blogArticleImages/netlify/d-and-d-section.jpg) 

</div>

ここに、作成したHTMLファイルやCSSファイルの入ったフォルダをドラッグ & ドロップします。

<div class="img-border">

![dand-index](../../images/singleBlogPageImages/blogArticleImages/netlify/d-an-d-file.jpg) 

</div>

しばらくすると次のような画面が表示されます。赤枠のURLがサイトURLになります。（URLは人それぞれ異なります）。

<div class="img-border">

![deployed](../../images/singleBlogPageImages/blogArticleImages/netlify/site-url.jpg)

</div>

## ドメインは無料にできるのか？
サーバーを無料にできることはわかりましたが、では「住所」にあたるドメインはどうでしょうか？

[freenom](https://www.freenom.com/ja/freeandpaiddomains.html)のようなドメインを無料で購入できるサービスもありますし、また上で紹介したサービスを使えばかならず何らかのドメインが割り当てられます。

割り当てられたドメインは、下に示すように末尾に各種のサービス名が付くので、これが嫌な人は自分で好きなドメインを入手しましょう。

---

• https//monotein.**firebaseapp.com**

• https//monotein.**web.app**

• https//monotein.**netlify.app**

• https//monotein.**github.io**

## ネット上には古い情報がたくさんあります
インターネット上にはまだ数多く「ホームページ開設には有料サーバーが必要である」という前提で書かれた情報が数多くあるので注意しましょう。

かつてサーバーは有料でしたが、それは10年ほど前の常識で、今は便利で新しいサービスが現れており無料で利用できるようになっています。

上のサービスを利用する時には若干のウェブ知識が必要になり、コマンドラインツールなどのプログラマーが使うツールが必要な場面もあるので、使い方がわからない時はウェブに詳しい知り合いや専門家に相談をしましょう。

なお、コマンドラインツールを使わずに、ブラウザ操作だけで今すぐ無料公開を試したい方は、[「【0円・1分で完了】HTMLとCSSでつくったウェブサイトを無料で今すぐ公開する方法」](/blog/how-to-release-website-for-free)を参考にしてください。ウェブサイト自体をこれから初めて作るという方には、作成から公開までを通しで解説した[「はじめてのウェブサイトを作ってみよう」](/blog/making-the-first-website-and-deploy)がおすすめです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-host-website-for-free">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/how-to-host-website-for-free)

---

# WebサイトとWebアプリの違いとは？2分で初心者向けに解説

URL: https://monotein.com/blog/differences-website-and-webapplication
公開日: 2020.4.13
更新日: 2026.03.05
概要: 「Webサイト」は情報が一方通行、「Webアプリケーション」は双方向のやりとりができる点が最大の違いです。CRUD操作やフロントエンド・バックエンドの関係、モバイルアプリとの違い、さらにPWA（プログレッシブ・ウェブアプリ）まで、具体例を交えてわかりやすく解説します。

## WebサイトとWebアプリケーション

「Webサイト」「Webアプリケーション」という言葉は普段よく耳にしますが、この違いがわかりますか？　

似たような言葉なので、混同して使っている人も多いと思います。

今回はWebサイトとWebアプリケーションの違いを解説します。

（\*なおアプリ（App）とは、アプリケーション（Application）の略語です。）

## Webサイトの特徴

Webサイトの最大の特徴は「一方通行であること」です。

例えばニュースサイトにアクセスした時、あなたがするのは記事を読む、写真を見るといった受け身の作業で、何かの反応を返すということはできず、そこにすでに書かれた情報を受け取るだけです。

Webサイトは本に似ており、読者はすでに印刷されたコンテンツを読むだけで、そこに何かの反応を示してコンテンツを改変するといったことはできません。

このような特徴から、Webサイトのコンテンツは「静的なコンテンツ（Static contents）」と呼ばれます。

「Webサイトは情報が一方通行である」と覚えておきましょう。

## Webアプリケーションの特徴

Webアプリケーションは、Webサイトとは違い一方通行ではなく、「インタラクティブ（双方向）であること」が最大の特徴です。

ユーザーが何らかの入力作業を行うと、それに対して何らかの反応が返されるのです。

ログイン機能があるもの、アップロードができるもの、コメント投稿機能があるもの、リアルタイムで情報が更新されるもの、具体的にはオンラインの画像変換ツール、Yahooメール、Gメール、Twitter、Facebookなど、これらはすべてWebアプリケーションです。

こういった特徴により、Webアプリケーションのコンテンツは「動的なコンテンツ（Dynamic contents）」と呼ばれます。

やや専門的な解説をすると、Webアプリケーションの特徴はCRUD操作ができる点にあります。

CRUDとは、Create（作成）、Read（読み取り）、Update（修正）、Delete（削除）の頭文字を取った言葉で、これら4つの機能のすべて、もしくは複数含まれているものがWebアプリケーションとなります。

例えば、Facebookの投稿にコメントする場合を考えてみましょう。

コメントを投稿する、というのはC（コメントの作成）にあたります。

投稿後、画面に表示された自分のコメントはR（コメントの読み取り）になります。

そこで打ち間違いを発見して修正をするとU（修正）となり、コメントを消す場合はD（削除）となります。

この4つの基本操作がWebアプリケーションを構成する最も基本的な機能で、多くのWebアプリケーションに見られるので、探してみてください。

## フロントエンドとバックエンド

これもやや専門的な解説となりますが、「フロントエンド」や「バックエンド」という言葉を耳にしたことのある人もいると思います。

簡単にいうと、「フロントエンド」とはユーザーから見える部分（ウェブサイト）を指し、「バックエンド」とは裏で様々な処理を行うサーバーやデータベースを指します。

![backend-frontend](../../images/singleBlogPageImages/blogArticleImages/jamstack/backend-frontend.png)

今回の記事の文脈でいうと、Webサイトとは、このフロントエンド部分のみで構成されたものをいいます。

何かの処理をしたリ、ユーザーからの入力作業を受け取る必要はなく、すでに作られた情報を表示していればいいからです。

一方でWebアプリケーションは、多くの場合フロントエンドとバックエンド両方で構成されたもので、このバックエンドのおかげで、フロントエンドから渡された情報や指示を処理し、フロントエンド側に反映させるというプロセスを実行できるのです。

ウェブ黎明期は、フロントエンド部分のみで構成されたWebサイトがほとんどで、その後テクノロジーの発展によって、フロントエンドとバックエンドで構成された複雑なWebアプリケーションが現れてきました。

<div class="rich-card-link">
<a href="/blog/what-is-jamstack">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-60.png)

</div>
<div class="r-card-text">
これだけ読めばOK！ Jamstackのすべてがわかります
</div>
</div>
</a>
</div>

近年はどちらとはっきり分類できないものも増えており、上の記事で紹介しているJamstackなどはその一例です。

フロントエンドとバックエンドの違いについて詳しくは、次の記事を参考にしてください。

<div class="rich-card-link">
<a href="/blog/frontend-and-backend">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-82.png)

</div>
<div class="r-card-text">
フロントエンドとバックエンドの違いとは？APIやサーバーの役割も初心者向けに全解説
</div>
</div>
</a>
</div>

## モバイルアプリとは何か？

Webアプリケーションを、スマートフォンなどのモバイル端末に最適化したものを特に「モバイルアプリ」と呼びます。

このモバイルアプリに対比する意味で、Webアプリケーションは「ウェブアプリ」と呼ばれます。

多くの人のスマートフォンに入っているLINEやInstagramのアプリがモバイルアプリですが、これらは最初PlayストアやAppleストアからダウンロードして入手したと思います。

このような「ダウンロード」という作業が必要になるのがモバイルアプリの特徴で、また「モバイル」という名前の通り、スマートフォンでの利用が想定されています。

一方でウェブアプリの場合、ダウンロードのプロセスは必要なく、GoogleクロームやEdgeなどのブラウザからアクセスをするので、パソコンとスマートフォンの両方からアクセスできる特徴があります。

このように見ると、パソコンとスマートフォンの両方からアクセスできて、またダウンロードも必要ないという点で、ウェブアプリの方が便利なように見えます。

しかし、モバイルアプリにはウェブアプリにはない強みがあり、例えばユーザーのホーム画面上にアイコンを設置できるので、その分アクセス性が高まること、ユーザーの滞在時間が長くなること、複雑な機能を提供できることなどが、その一例です。

|                            | **ウェブアプリ** |                        **モバイルアプリ**                         |
| :------------------------: | :--------------: | :---------------------------------------------------------------: |
|     ユーザーへのリーチ     |        △         |                                 ◯                                 |
| ユーザーのエンゲージメント |        △         |                                 ◯                                 |
|     ダウンロードの有無     |        無        |                                有                                 |
|           機能性           |        △         |                                 ◯                                 |
|         各種の制限         |       低い       | 高い<br/>(コンテンツや開発技術に関する制限が各アプリストアにあり) |

## プログレッシブ・ウェブアプリ（PWA）とは何か？

これは頭文字をとってPWA（Progressive Web App）とも呼ばれるもので、ウェブアプリとモバイルアプリの両方の特徴を兼ね備えたアプリです。

数年前に現れた最も新しいタイプのアプリで、モバイル端末で使用されます。

前述したように、ウェブアプリとモバイルアプリの大きな違いは、ダウンロードの有無でした。

また、モバイルアプリの方が、モバイル端末での使用に最適化されているので、機能性が高いという特徴もありました。

プログレッシブ・ウェブアプリの場合、各ストアからダウンロードして使うのではなく、ブラウザからWebアプリケーションにアクセスして入手します。

プログレッシブ・ウェブアプリに対応しているWebアプリケーションの数は少ないですが、対応している場合、そのアプリケーションをホーム画面に追加するか選択できる項目が用意されています。

追加すると、ホーム画面にアプリのようなアイコンが現れ、それをまるでモバイルアプリのように使う事ができます。

![pwa-icon](../../images/singleBlogPageImages/blogArticleImages/blog4/pwa-icon.jpg)

このように、ユーザーにダウンロードの手間をかけることなく、モバイルアプリのような高い機能性を提供できることがプログレッシブ・ウェブアプリのメリットです。

## 実は曖昧なWebサイトとWebアプリケーション

情報の流れが一方通行なのがWebサイトで、双方向なのがWebアプリケーションだと、ここまで説明してきましたが、この2つはいつもはっきり分類できるものではありません。

例えばYouTubeの場合、動画を見ているだけなら、それは情報が一方通行に流れているだけなので「Webサイト」と言えます。

しかしながら、YouTubeにログインすると、動画に対して「いいね」をしたり、コメントをしたりと双方向のやりとりができ、「Webアプリケーション」の特徴が現れます。

ここに動的サイトと静的サイトの違いも関わってくるので、分類はさらに難しくなります。

なので厳密にはWebアプリケーションであっても、便宜上Webサイトと呼ばれているケースも多くあり、それは「Webサイト」という言葉の方がより一般的で、かつ包括的なためです。

当ブログでも、Webアプリケーションに分類されるものにも、わかりやすさを優先させて「Webサイト」と呼ぶことが多くあります。

このようにWebサイトとWebアプリケーションの境界線は、実は曖昧なところがあることも最後に覚えておきましょう。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/differences-website-and-webapplication">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/differences-website-and-webapplication)

---

# 【2026年版】ウェブサイトのスピードを必ず上げる『2つの方法』

URL: https://monotein.com/blog/improving-fonts-and-images
公開日: 2020.4.12
更新日: 2025.4.20
概要: ほとんどのホームページは遅くて重いため、ユーザーにストレスを感じさせています。この記事ではスピード診断ツールの使い方と、ウェブサイトのスピードをかならず上げる2つの方法、「フォントの読み込み」と「画像の最適化」を紹介します。

## 高まるスピードの重要性
Googleが2021年6月に導入したのがコア・ウェブ・バイタルです。

これによって検索ランキングの順位（SEO）を決める要素として、サイトの表示速度が大きな影響力を持つようになりました。

スピードの速いサイトを作る一番効果的な方法は、[Jamstack](/blog/what-is-jamstack)と呼ばれる手法を採用することで、その場合スコアは次のようになります。

<div class="img-border">

![lighthouse-headless-wp](../../images/singleBlogPageImages/blogArticleImages/jamstack/headless-score1.jpg)

</div>

本記事では、Jamstackを採用しなくてもできるスピード改善の方法を紹介します。

まず最初にすべきことは、ホームページの現在の状態のチェックです。

方法は2つあります。

ひとつ目はGoogleクロームに内蔵してある「Lighthouse」というツールを使う方法、ふたつ目は「PageSpeed Insight」を使う方法です。

### Lighthouseの使い方
`1` 診断したいホームページをGoogleクロームで開く。

`2` ホームページ上で右クリックをして、開いたメニューの中から「検証」を選ぶ。

`3` 上部にある項目から「Audits（もしくはLighthouse）」を選ぶとLighthouseが起動するので、「Generate report（もしくはRun audits等）」という青いボタンをクリックして診断を開始する。

### PageSpeed Insightsの使い方
下のURLにアクセスして、診断したいホームページのURLを入力してください。

[https://developers.google.com/speed/pagespeed/insights](https://developers.google.com/speed/pagespeed/insights)

---

どちらもGoogleが提供しているツールですが、1つ目のLighthouseの方がより細かく診断できます。

注意としては、どちらのツールも診断する時間や通信スピードによって結果に多少の違いが出ることです。

なので、正確な結果を得るためには、異なる時間帯や通信環境で何度か測定をしてみるとよいでしょう。

またLighthouseは英語のみなので、日本語で結果を見たい人はPageSpeed Insightsを使いましょう。

本記事ではホームページのスピードに関係がある「パフォーマンス」の結果だけ分かればよいので、使うのはどちらのツールでも大丈夫です。

## スコアの見方
速度改善策を行っていない普通のホームページの場合、スコアは良くて50前後、悪いと20以下になります。

スコアが5以下のケースも珍しくありません。

しかしユーザーに快適なウェブ体験を提供するには、80以上はスコアが欲しいところです。

![monotein Site Score](../../images/singleBlogPageImages/blogArticleImages/blog2/img2.jpg)

測定後には、スコア改善のためのアドバイスが示されますが、ある程度の知識がないと読み解くのは困難かと思われます。

そこで今回は、改善ポイントとして9割以上のホームページで指摘される「フォント」と「画像」の2点に絞って、具体的な改善方法を紹介していきます。

## フォント読み込みの改善
多くのホームページでGoogle Fontというウェブフォントが使われています。

種類の異なるブラウザやデバイスからのアクセスに対応するためです。

ウェブフォントを採用するメリットは、どのデバイスやブラウザからアクセスしても、ホームページの見た目を同じにできることですが、その最大のデメリットはサイトを重くすることです。

ブラウザはウェブサイトを表示するよりも前にGoogle Fontの読み込みを行ないますが、ここに時間がかってページの表示が遅くなるのです。

この影響は、Noto Sans JPやNoto Serif JPなどの日本語フォントの読み込み時に特に顕著です。

日本語の文字数や画数がアルファベットよりもはるかに複雑で、それと比例してサイズも大きくなっているからです。

この解決のために、ここからはホームページ自体にあらかじめフォントを取り込んでおく方法を紹介していきます。

フォントをあらかじめダウンロードして自分のサイト内に設置し、CSSに直接読み込ませるので、外部のGoogle Fontからフォントを読み込むよりも速くページを表示できます。

## フォント読み込みの改善ステップ
まずは使用するGoogle Fontをダウンロードします。

ここでは[google-webfonts-helper](https://google-webfonts-helper.herokuapp.com/fonts)というサイト使って、フォントをダウンロードしていきます。

[google-webfonts-helper](https://google-webfonts-helper.herokuapp.com/fonts)にアクセスしたら、左にある検索バーに自分が使いたいフォントを入力するか、入力欄の下部に表示されているフォント一覧から選択します。

例えばNoto Sans JPを選択する場合は下のような流れです。

***

`ア` 画面左部から使いたいフォントを選択。

`イ` 「1. Select Charsets」で「japanse」を選択。

`ウ` 「2. Select styles」でfont-weight（300、regular、700など）を選択。

`エ` 「3. Copy CSS」で「Modern Browsers」を選択。下に表示される@font-faceから始まるCSSをコピーする。

`オ` 「4. Download files」にある青いボタンをクリックしてフォントをダウンロード。

（*「3. Copy CSS」の「Best Support」は、Internet Explorerなどの古いブラウザからのアクセスに対応したい場合に選択してください。通常は「Modern Browsers」を選択しておけば問題ありません。）

***

先ほどコピーしたCSSを、自分のウェブサイトのCSSファイルの先頭部分に貼り付けてください。

次にダウンロードしたzipファイルを開き、フォルダ内の.woffと.woff2形式のファイルをホームページのフォルダー内に持っていきます。

.woffと.woffの2つのファイルの設置場所は自由ですが、CSSファイルと同じ場所にfontsという名前のフォルダを作り、その中に設置する方法が簡単です。

次に先ほどCSSファイルに貼り付けた@font-faceのsrc項目「url('../fonts/noto-sans-jp-v25-japanese....」のパスを、.woffと.woff2のファイルの設置場所に合わせて相対パスで修正してください。

これでフォントを自分のサイト内から読み込むことができます。

## フォントのセルフホスト時に必須の「font-display:swap;」
上でコピーして貼り付けたCSSに「font-display:swap;」を追加するのを忘れないようにしましょう。

```
p {
    font-family: 'Noto Sans JP', sans-serif;
    font-display: swap;
    ...
}
```

これはフォントを読み込むまでの間、画面上にユーザーのデフォルトフォントを表示させ、フォント読み込みに合わせて切り替えていくためのCSSです。

これがないとフォント読み込みが完了するまで、ユーザーには何も表示されない状態になってしまいます。

なお、アイコン表示によく使われるFont Awesomeもウェブフォントの一種で、表示スピードを下げる原因になります。[「Font AwesomeをSVGで置き換えてサイト表示速度を改善する方法」](/blog/font-awesome-alternative)で解説している通り、SVGアイコンへの置き換えがおすすめです。

## 画像読み込みの改善ステップ
実はフォント以上に効果が大きいのは画像サイズの最適化です。

表示スピードを下げる原因の9割は画像なので、まずは画像が必要以上の大きさや解像度になっていないか確認しましょう。

## 画像読み込みの改善方法
まずは画像ファイルの拡張子を確認していきます。

ウェブサイトでよく使われる画像形式はJPG（JPEG）、PNG、SVGの3つですが、SVGは[「画像がギザギザして不鮮明な理由」](/blog/svg-image)で解説している通り、すでにサイズが小さく最適化されている場合が多いので、ここではJPGとPNGの2つについて触れます。

<div class="rich-card-link">
<a href="/blog/svg-image">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-16.png)

</div>
<div class="r-card-text">
画像がギザギザして不鮮明な理由
</div>
</div>
</a>
</div>

### JPG
写真のような色数が多いものに使われる、最も一般的な保存形式。

### PNG
透過処理が可能で、イラストなどの画像に向いた保存形式。写真のような色数の多いものを保存すると、JPGよりもファイルサイズが大きくなることがある。

---

どちらの形式でも、画像編集ソフトやオンラインの画像編集サイトでサイズを小さくしていくことができます。

高画質の写真を載せる必要がある場合以外は、500KB以上の画像はサイズが大きすぎると考えていいでしょう。

スマートフォンで撮った写真を使う場合、普通はすでに500KBを超えているので、ホームページに載せる前にサイズを軽くしておく必要があります。

画像サイズを小さくするだけでも、ウェブサイトのスピードを上げることができますが、今回はさらなるスピードアップを目指して、JPGやPNGよりもさらにウェブサイトでの表示に最適化されたWebP、そして[AVIF](/blog/avif-image)というフォーマットを使う方法を紹介します。

## WebPの画像フォーマット
上で触れたPNGとJPGは、どちらも様々な場面で使われる汎用的なフォーマットです。

それに対してWebPは、ウェブサイトで使用されることを前提にGoogleが開発した画像フォーマットで「高画質で軽い」という特徴があります。

WebP形式を今回紹介するのは、LighthouseやPageSpeed Insightsの診断で、WebPの使用を勧められることが多いためです。

オンラインのフリー画像変換サイトを使えば、JPG、PNG形式の画像をWebPに簡単に変換できます。

ここでは変換前と変換後の比較がわかりやすく、使い方が簡単なSquooshというサイトを使っていきます。

• [https://squoosh.app/editor](https://squoosh.app/editor)

---

上記リンクからSquooshにアクセスしたら、変換したい画像をブラウザ上にドラッグ&ドロップして下さい。

真ん中の縦線より左がオリジナルの画像、右が変換後の画像です。

画面右端にある半透明の黒い枠内部「Compress」下のドロップダウンメニューから「WebP」を選択します。

次にその下の「Quality」を、最下部に表示されている変換後のサイズを見ながら調整します。

画像の品質を見つつ、希望通りのサイズになったら、最下部右端にある青いボタンをクリックしてダウンロードします。

---

このWebP形式の画像は、ホームページ内でJPGやPNGと同じように使えます。

次のように`<img>`タグで読み込めます。

```html
<img src="./images/dog.webp" alt="犬">
```

WebPよりもさらに圧縮率の高いAVIF形式については、次の記事で作り方まで詳しく解説しています。

<div class="rich-card-link">
<a href="/blog/avif-image">
<div class="grid">
<div class="r-card-img">

![social-card](../../images/singleBlogPageImages/socialCardImages/blog-fb-75.png)

</div>
<div class="r-card-text">
AVIF画像とは？WebPより高圧縮な次世代フォーマットの使い方と作り方を解説
</div>
</div>
</a>
</div>

## フォントと画像を改善してスピードアップ
今回の記事では、ウェブサイトを診断するLighthouseとPageSpeed Insightsに触れた後、表示スピードの改善方法を2つ紹介しました。

フォントと画像は、ホームページのスピードを下げる最大の原因です。

「フォントの読み込みを内部化する。画像サイズを適正化する。できればWebP形式やAVIF形式を使う」という簡単な工夫をするだけで、すぐにウェブサイトのスピードは上がり、診断スコアも改善するので、ぜひ試してみてください。

また、ウェブサイトのスピードには、本記事で扱った表示速度のほかに、ユーザーが主観的に感じる「体感速度」もあります。体感速度の改善方法は[「ウェブサイトの『体感速度』UPの方法」](/blog/perceived-speed-and-how-to-improve)で解説しています。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/improving-fonts-and-images">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/improving-fonts-and-images)

---

# 遅いウェブサイトからユーザーが逃げていく理由

URL: https://monotein.com/blog/why-website-has-to-be-fast
公開日: 2020.4.11
更新日: 2021.09.17
概要: ウェブサイトの表示スピードは近年もっとも重要な要素です。数多くの調査で、ウェブサイトが表示される時の、たった1秒の差がユーザーの行動に大きな影響をあたえることが明らかになっています。ウェブサイトの高速化がビジネスの成功に貢献する重要な要素となっているのです。

## 速さはすべてを解決する
数年前に『速さは全てを解決する』という印象的なタイトルの本がヒットしましたが、これは特にウェブサイトにぴったりくる表現だと思います。

ウェブサイトの価値は「速さ」がすべてではありません。

しかしウェブサイトが遅くて困ることはあっても、速くて困ることは一つもないのです。

今回は「なぜスピードがここまで重要とされているのか？」「遅いウェブサイトを使い続けるとどうなるのか？」についてくわしく解説します。

## 遅いウェブサイト ＝「存在していない」
みなさんは次のような経験はないですか？

「面白そうな記事タイトルだったけど、クリックしてからページが表示されるまでに時間がかかったから、読まずに閉じてしまった」

「オンラインショップのAにアクセスしたけど、ウェブサイトが重くて使いづらいから、同じアイテムを売っているウェブショップBで買った」

人によっては毎日こんな経験をしてると思います。

昔からユーザーは「待つ」ことが嫌いでしたが、速さやスピード最優先の現代では、ユーザーはさらに待てなくなっています。

これは当然ビジネス上の大きな機会損失につながります。

どんなに素晴らしい製品やサービス、貴重な情報をウェブサイトに載せていても、それがユーザーに見てもらえないのであれば「存在していない」と同じことになってしまうからです。

## たった2秒で閉じられる
[Googleの調査](https://www.thinkwithgoogle.com/intl/en-154/marketing-strategies/app-and-mobile/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue)では次の2つのことが明らかになっています。

---

• クリックして表示されるまで3秒以上かかると、ユーザーはページを閉じる。

• 50%以上のユーザーが、クリックしてから2秒以内にページが表示されることを期待している。

---

実際に待たされる秒数を数えている人はいないと思いますが、これらの数字は私たちの実感とだいたい合うものではないでしょうか？

たった2秒で判断されてしまうのも驚きですが、2秒以下で判断するユーザーもかなりいると想像できます。

## スピードが上がると検索ランキングにプラス
Googleは、ウェブサイトの表示スピードを、検索ランキングの順位を決める重要な要素だと[認めています](https://webmaster-ja.googleblog.com/2018/01/using-page-speed-in-mobile-search.html)。

つまりサイトのスピードが速いほど、「ユーザーにとって有益」とGoogleに評価されやすく、検索ランキングで優先的に表示される可能性が高まるので、これまでのようなSEOや内部最適化だけに注目することは不十分で、ランキング上位を狙うには「スピード」にも十分な注意をはらう必要があるのです。

## スピードが上がるとネットショップの購買率が上昇
Amazonの調査では、サイトの待ち時間を0.1秒下げるごとに[収益が1%ずつ改善](https://www.uforocks.com/blog/site-speed-impact)することが明らかになっています。

表示スピードの影響はネットショップで特に大きく、「サイトがスムーズに動かない」「待ち時間が長い」と感じると、79%のユーザーが購買活動を止めてしまうという[調査結果](https://neilpatel.com/blog/speed-is-a-killer)も出ています。

しかしこれは逆からいうと、売上アップを目指す時にはスピードUPがもっとも手取り早く効果を確認できる方法になるということでもあります。

## スピード = ウェブサイトの第一印象
コンテンツが表示されるまでの待ち時間は、ユーザーが一番最初にそのウェブサイトから受け取る「第一印象」そのものです。

ここで「遅い」と感じさせてしまうと、第一印象がマイナスから始まることになります。

「自分のサイトには価値ある情報やアイテムがたくさん載っているから、ユーザーはどんなに待ち時間が長くてもアクセスしてくれるはず」というのは、現代のせっかちなユーザーには通用しないと考えた方がよいでしょう。

## ウェブサイトのスピードを上げる重要性
ここまでウェブサイトのスピードの重要性と、スピードがユーザーの行動に大きく影響することを紹介してきました。

ウェブサイトは「どれだけ価値あるコンテンツをユーザーに提供しているか」という点で評価されるべきものですし、実際Googleのアルゴリズムはそのような「ユーザーベネフィット」を基準にウェブサイトをランク付けして、検索順位を決めています。

しかしスピードが遅いと、その評価の土俵にすら登ることなく終わってしまうことになりかねません。

なおWordPressのような構造上遅いシステムを使っている場合、スピード改善をしても一定以上は速くならないので、Jamstackというテクノロジーを使うことがおすすめです。

<a href="https://monotein.base.shop/p/00005/?utm_source=/blog/why-website-has-to-be-fast">

![image](../../images/commonImg/react-ts-master-video-square-ad-click.jpg)

</a>

⚫︎ [monotein.base.shop/p/00005](https://monotein.base.shop/p/00005/?utm_source=/blog/why-website-has-to-be-fast)