# monotein

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

## メインページ

- [トップページ](https://monotein.com): サイトトップ。最新ブログ記事と著書の紹介。
- [著者プロフィール](https://monotein.com/business): 著者・三好アキのプロフィールと事業紹介。
- [ブログ一覧](https://monotein.com/blog): フロントエンド開発に関する技術記事の一覧。
- [著書一覧](https://monotein.com/books): 著者が執筆した技術書(30冊以上)の一覧ページ。
- [お問い合わせ](https://monotein.com/contact): 著者へのお問い合わせフォーム。
- [企業研修](https://monotein.com/corporate-training): 企業向けフロントエンド開発研修のご案内。
- [RSSフィード](https://monotein.com/rss.xml): ブログ記事の更新情報。
- [llms-full.txt](https://monotein.com/llms-full.txt): 全ブログ記事の本文を含む完全版。

## ブログ記事

- [📌 自己紹介（三好アキについて）](https://monotein.com/blog/self-introduction): Amazonベストセラー著者・三好アキの自己紹介です。非IT系出身という経験から生まれた「専門用語なしで教える」スタイルと、教材制作への思いを語ります。
- [GatsbyからAstro（バージョン7）へ移行しました](https://monotein.com/blog/astro-migrate-from-gatsby): 本サイトをGatsbyからAstro（バージョン7）へ移行しました。GraphQLをやめてContent Collectionsに置き換えた話、画像コンポーネントの移行でつまずいた話、View Transitionsを入れて外した話、Netlifyのbuild時間が4分半から20秒になった話など、移行で実際に手を加えたことをまとめています。
- [「設計が大事」という言葉に、私が長い間抵抗していた理由](https://monotein.com/blog/design-vs-creating): 「設計が大事」という言葉に長年抵抗していた私が、ブログのSEO整理（ピラー・クラスター戦略）をきっかけに考えを変えた話。良いものを作ることと、それを他者に伝わる形に整理することは別だという気づきと、プログラミング学習との共通点を書いたエッセイです。
- [【2026年版】Next.js完全スタートガイド｜初心者向けにすべて解説](https://monotein.com/blog/guide-nextjs): Next.jsの基礎からRSC・Server Actions・React 19新機能まで初心者向けに全解説。セットアップ方法、Viteとの違い、App Routerの使い方、Vercelへの公開方法まで網羅したガイド記事です。
- [【2026年版】React初心者のための学習ロードマップ｜何から始めるべきか完全解説](https://monotein.com/blog/guide-react-learning-roadmap): Reactを学びたい初心者向けに、HTML・CSSからJavaScript、React、TypeScript、Next.jsまでの学習ロードマップを解説。2026年のAI時代に最適な勉強順と学習時のマインドセットまでを紹介します。
- [【2026年版】ReactサーバーコンポーネントとReact 19完全ガイド｜RSC・SSR・SPAを2分で理解](https://monotein.com/blog/guide-rsc-and-react19): AI時代だからこそ必要になるReactの本質的理解。RSC・SSR・SPA・MPAの歴史と違いを整理しながら、React 19の重要機能まで体系的に解説します。
- [【2026年版】TypeScript入門完全ガイド｜React開発者向けにTSの始め方を全解説](https://monotein.com/blog/guide-typescript-for-react-programmers): AIがコードを書く時代だからこそ、TypeScriptの重要性は高まっています。本記事ではTypeScriptの基礎から学習のコツ、React開発で必須となる知識まで初心者向けに解説します。
- [【2026年版】Reactはなぜ難しいのか？初心者がつまずく理由と乗り越え方を全解説](https://monotein.com/blog/guide-react-is-difficult-and-how-to-overcome): Reactを難しく感じる人は多くいます。しかし問題はReactそのものではなく、JavaScriptやstate、コンポーネントなど前提知識にあることが多いのです。初心者がつまずく理由と乗り越え方を完全解説します。
- [【2026年版】React + Vite完全スタートガイド｜初心者向けにすべて解説](https://monotein.com/blog/guide-react-vite): React開発の第一歩となるViteの役割からインストール方法、Next.jsとの違い、フォルダ構成、よくあるエラー対処法まで初心者向けに解説。React学習で次に何を学ぶべきかも紹介します。
- [【AI × React】アプリ開発の新刊が出ました](https://monotein.com/blog/new-book-release-ai-react): AIを組み込んだReactアプリの作り方を専門用語なしで丁寧に解説する新刊を出版しました。好評の『はじめてつくるReactアプリ』の続編です。HTMLとCSSだけが前提知識。0円で完成・公開まで完結します。
- [AI時代のReact学習で加速する「断片学習」とは？](https://monotein.com/blog/ai-era-fragmental-knowledge): AIを使ったReact学習で増えている問題。知識は増えているのに、それを使えない。問題に対応できない....。AI時代に加速する「知識の断片化」と、その解決方法を解説します。
- [AIでReactアプリを作れる時代。なぜReact学習者は増えている？](https://monotein.com/blog/ai-era-why-more-people-learn-react): AIがReactアプリを自動生成する時代。にもかかわらず、Reactを本気で学び直す開発者が増えています。AI時代のReact学習者に起きている変化を整理します
- [【AI × React × TypeScript】アプリ開発の新刊が出ました](https://monotein.com/blog/new-book-release-ai-react-typescript): AIを組み込んだReactアプリの作り方を専門用語なしで丁寧に解説する新刊を出版しました。TypeScript使用。HTMLとCSSだけが前提知識。0円で完成・公開まで完結します。
- [React × TypeScript最強教材の2年間を振り返る（構想5年の歩み）](https://monotein.com/blog/about-master-courses): React × TypeScriptを体系的に学ぶ「Reactマスター」と「TypeScriptマスター」をリリースして2年。返金申請はゼロです。AI時代に価値が高まる体系的な教材のこれまでの歩み、進化の歴史、質問への回答をまとめました。
- [【エンジニア・ライター】執筆の依頼について](https://monotein.com/blog/my-technical-writing-service): 技術わかる × 書ける × 教えられる。技術記事を執筆するエンジニアライター。React・TypeScript・Next.jsなどのモダンフロントエンド開発に精通。商業出版・Amazonランキング1位・Google検索1位の実績あり。SEO記事、技術監修、書籍制作、英文記事のローカライズまで対応。
- [ビギナーへのReact研修。教える前に知っておきたかった3つのこと](https://monotein.com/blog/important-thing-teaching-corporate-react): React研修の担当になったけど、何から教えればいい？JavaScriptを先に完璧にしなくても、ReactはHTML／CSSの延長で始められます。技術的な順番より先に知っておくべき、ビギナーを自走させるための根本的な考えを紹介。
- [React研修の失敗しない選び方｜外注研修の『現場で使えない』を防ぐ3つのポイント](https://monotein.com/blog/choosing-react-corporate-lessons): React研修を外注するメリット・デメリットを解説。「時間もコストもかけたのに現場で使えない」を防ぐ、失敗しない選び方の3つのポイントも紹介します。
- [TypeScript導入に失敗する企業がやっていること【原因と対策も解説】](https://monotein.com/blog/typescript-corporate-typical-mistakes): 「導入したのに誰も使いこなせない」「結局JavaScriptに戻した」。TypeScript社内導入でよくある3つの失敗と、その具体的な対策を解説します。
- [未経験社員をReactエンジニアへ。失敗しない教育ロードマップと研修のポイント](https://monotein.com/blog/corporate-react-engineers-road-map): 未経験社員をReactエンジニアに育てるための5段階ロードマップを紹介。実際の研修経験をもとに、社内研修でReactエンジニアに育てる効果的な方法紹介します。
- [【Next.js × TypeScript】3分で使えるようになる入門ガイド（2026年版）](https://monotein.com/blog/nextjs-typescript-how-to-use): 2026年のウェブ開発で最も使われているNext.js。その導入手順をビギナー向けにわかりやすく解説します。インストールからVercelやその他プラットフォームへの公開方法まで網羅しています。
- [Next.js × TypeScriptの新刊が出ました](https://monotein.com/blog/new-book-release-nextjs-supabase-typescript): 三好アキ著の好評既刊書のTypeScript増補版。Next.js・Supabase・JWTを使ったフルスタックアプリをJavaScriptで作り、その後TypeScriptへ書き換えます。初めて本格的なアプリ開発にトライする方に最適。
- [Biomeとは？ESLint・Prettierとの違い、使い方を2分で解説](https://monotein.com/blog/what-is-biome): Biomeとは、PrettierとESLintの役割をひとつにまとめたツールです。コードの整形とルール違反の検出を、1つのツールで完結できます。Biome.jsの導入方法と設定ファイルの書き方をビギナー向けにわかりやすく解説します。
- [ESLintとは？Biomeとの違い・使い方を初心者向けに解説](https://monotein.com/blog/what-is-eslint): ESLintとは、JavaScriptやTypeScriptのコードにある問題を自動で検出してくれるツールです。VS Code拡張機能を使った導入方法から、設定ファイルの書き方まで、ビギナー向けにわかりやすく解説します。React + Viteにも使われています。
- [Prettierとは？インストールから設定、使い方まで初心者向けに全解説](https://monotein.com/blog/what-is-prettier): Prettierとは、コードの見た目を自動で整えてくれるツールです。インデント・改行・セミコロンなどを毎回手動で直す必要がなくなります。VS Code拡張機能を使った一番かんたんな導入方法を、ビギナー向けにわかりやすく解説します。
- [【Vite + React + TypeScript】3分で使えるようになる入門ガイド（2026年版）](https://monotein.com/blog/react-vite-typescript-how-to-use): 完全未経験者向けに、Vite + React + TypeScriptの始め方を3分で解説。インストールから開発サーバーの起動、buildまでを画像付きで丁寧に説明します。
- [個人向けに作ったReact教材が、法人の社内研修でも使われていた話](https://monotein.com/blog/master-courses-for-corporate-training): 販売から1年経つReact + TypeScript教材。「基礎から体系的に学べる」「即戦力になる」「動画とテキストが揃っている」といった点が評価され、社内教育や研修でも利用されています。
- [【図解】なぜフロントエンドのReact開発でNode.jsが必要なの？](https://monotein.com/blog/why-nodejs-is-needed): Node.jsはバックエンドだけのものではありません。React、TypeScript、Next.js、現代のフロントエンド開発でNode.jsが必要な理由を、ブラウザとパソコンの関係から丁寧に説明します。
- [今さらReactを学び始めていいのだろうか、という不安感](https://monotein.com/blog/perfect-moment-will-never-come): 「今学んだことがすぐ時代遅れになるかも」という不安を、多くのビギナーが感じています。しかし完璧なタイミングは存在しません。興味を持ったことをまず小さく試してみること。これが最善の手です。
- [【専門用語なし】でTypeScriptを学べる完全ビギナー向け入門書を出しました](https://monotein.com/blog/typescript-book-new-release): ビギナー向けTypeScript入門書『はじめてさわるTypeScript』を出版しました。HTMLとCSSだけが前提知識。天気アプリを作りながら、TypeScriptの便利さを実感できる1冊です。
- [1時間でアプリ公開！ ロングセラーのJavaScript本が2026年版リニューアル](https://monotein.com/blog/update-javascript-book): 星4.5以上・3年間読まれ続けた『はじめてさわるJavaScript』が第2版になりました。情報を2026年版に刷新し、読みやすさもさらに向上しています。ペーパーバック版も利用可能です。
- [React RouterやTanStackを使わないページ移動の実装方法（File-based routing）](https://monotein.com/blog/react-app-routing-without-external-packages-2): React RouterなどのパッケージなしでファイルベースのルーティングをReact（Vite）に実装する方法を解説。カスタムLinkコンポーネントでSPAのスムーズなページ遷移も実現できます。
- [AmazonでNo.1のReact入門書を無料公開](https://monotein.com/blog/first-chapter-from-react-book): 5年間読まれ続けるReact + Vite + TypeScript入門書の冒頭を無料公開。HTMLとCSSの知識だけでOK。2〜3時間でウェザーアプリを作りながらReactの基礎が身につく、ビギナー向けハンズオン教材です。2026年1月に第3版が発売された最新情報にも対応。
- [勉強のモチベーションが続かない本当の理由](https://monotein.com/blog/reason-for-unable-to-continue-studying): なぜ勉強で挫折してしまうのか？答えは「成功体験がない」こと。理論より先に「できた！」を実感することが継続の秘訣です。プログラミングもハンズオン教材を選べば変わるります。英語学習との違いを例にわかりやすく解説
- [ChatGPTに頼る前に理解すべきReactの3つの概念](https://monotein.com/blog/react-3-key-concepts-in-ai-era): ChatGPTに頼る前に知っておきたいReactの基礎概念が「コンポーネント」「Props」「State」の3つです。この3つを理解するだけで、AIの回答が格段にわかりやすくなります。
- [React RouterやTanStackを使わないページ移動の実装方法（Code-based routing）](https://monotein.com/blog/react-app-routing-without-external-packages-1): React + ViteでReact RouterやTanStack Routerなどのパッケージを一切使わずにページ遷移を実装する方法を徹底解説。useStateでコードベースのルーティングを自作し、カスタムLinkコンポーネントまで作れる！初心者でもわかるステップバイステップガイド
- [生成AI時代にプログラミングを学ぶワケ](https://monotein.com/blog/ai-why-studying-programming): AI時代にプログラミングを勉強する本当の理由。AIは指示の質次第でしかアプリを作れず、責任を取れない。React、Next.js、フロントエンド初心者が挫折しないための学習モチベーション維持法も紹介。
- [AIがコードを書ける時代、『なぜ』人間の開発者に知識が『まだ』求められているのか？](https://monotein.com/blog/ai-knowledge-is-necessary-for-thinking): AIがあるから勉強しなくていい？その考えは危険かもしれません。フロントエンジニア視点で、AI時代にこそ求められる知識・学習・基礎力の本当の価値を解説します。React、Next.js学習者に必要なマインドセット
- [発売『はじめてつくるReactアプリ』第3版／AI、Reactバージョン19等](https://monotein.com/blog/update-2026-react-1-book-ts-vite): 2026年1月29日、『はじめてつくるReactアプリ』とTypeScript版の第3版を発売。HTMLとCSSの知識だけで始められるReact開発を、人気のハンズオン形式で解説。React 19の新情報やViteの最新バージョンに対応し、初心者にもわかりやすく進化。基礎をしっかり学びつつ、新機能も押さえられる一冊
- [AI時代にReactを学ぶ理由 【初心者こそReactが最適なワケ】](https://monotein.com/blog/ai-why-react-importance-increasing): AIを使ってプログラミングを学ぶ初心者が増える今、なぜReactが最重要スキルなのか？情報量・AIとの相性・2026年の開発トレンドから、その理由をわかりやすく解説します。
- [AI時代になって、プログラミングを学ぶ価値が下がった](https://monotein.com/blog/ai-programming-importance-decreasing): AI時代に「プログラミングはオワコン」と言われる理由とその誤解を解説。価値が下がった能力・逆に重要になった能力、これから学ぶべき本質を初心者向けにわかりやすく説明します。
- [【バージョン16対応】Server Actionsフルスタックアプリ開発の入門書リリース／Next.js](https://monotein.com/blog/new-book-release-nextjs-v16-fullstack-server-actions): Next.jsとServer Actionsを使うと、フルスタックアプリを時短ですばやく開発できます。最新のNext.jsバージョン16を使って、Server Actionsの使い方をビギナー向けにわかりやすく紹介するのが「Next.js Server Actionsでつくるフルスタックアプリ（三好アキ著）」です。
- [【バージョン16対応】『Next.jsでつくるフルスタックアプリ（with Supabase）』リリース](https://monotein.com/blog/new-book-release-nextjs-v16-fullstack-supabase): Next.js 16対応の最新入門書が登場！Supabaseを使ったフルスタックアプリ開発を実践形式で解説。初心者でもAPI・データベース連携からVercel公開まで短時間で習得できます。三好アキ著。
- [Next.jsバージョン16に対応する追加情報の公開](https://monotein.com/blog/nextjs-books-additional-info-on-nextjs-v16): Next.jsバージョン16対応の最新情報を追加公開しました。「動かして学ぶ！Next.js/React開発入門（翔泳社／三好アキ著）」や「Next.jsでつくるフルスタックアプリ」の読者向けにコード差分や注意点を解説しています。
- [【React新機能】useEffectEventをビギナー向けにやさしく解説](https://monotein.com/blog/react-v19-2-use-effect-event): React 19.2で追加された「useEffectEvent」をビギナー向けに紹介。React + Viteをベースに、実際にコードで動きを見ながら進むハンズオン形式。従来からあるuseEffectの問題点から解説するので、useEffectEventの具体的なメリット（依存配列の簡素化、新しいstateの参照、ロジックの分離）がスッキリわかる。React 19以降を学ぶ全エンジニア必読の内容。
- [【React新機能】<Activity>の2つの使い方を実例でわかりやすく紹介](https://monotein.com/blog/react-v19-2-activity): React 19.2の新機能<Activity>を初心者向けにわかりやすく解説。データやstateの保持、事前フェッチの方法、React最新バージョンの重要ポイントを実例で紹介します。React + Vite使用。
- [AIが浸透する中、開発現場で起きている意外なこと](https://monotein.com/blog/ai-leads-developers-learning-fundamentals): AIを使っても、開発者側の理解不足・知識不足で開発スピードが落ちる現象。AI活用が進む開発現場で再評価されるのはプログラミングの基礎力です。詳しく紹介します。
- [はじめてのウェブサイトを作ってみよう（無料オンライン公開方法まで解説）](https://monotein.com/blog/making-the-first-website-and-deploy): 超初心者必見。HTMLとCSSの知識ゼロから始めて、初めてのウェブサイトを作成・公開する方法をステップバイステップで徹底解説。ウェブの仕組みを理解し、シンプルなHTMLファイルを作り、Netlifyで無料オンライン公開まで。費用ゼロで誰でも簡単にウェブ開発の基礎をマスター。ReactやNext.jsへのステップアップの基盤にも最適。
- [【2026年版】React・TypeScript・Next.js・AIを最短で学ぶロードマップ](https://monotein.com/blog/frontend-learning-roadmap): HTML・CSSの知識だけで始められるフロントエンド学習ロードマップ。ReactからTypeScript・Next.jsのフルスタック開発まで、2026年のAI時代に必須スキルを身につける順番を解説します。
- [【情報過多】プログラミング初心者が挫折する原因](https://monotein.com/blog/information-overloaded): プログラミング初心者が直面する「情報過多」の壁。情報過多で挫折してしまう原因を、3つに分けて細かく解説。対策として、挫折せずに学習を進める方法も紹介。
- [【プログラミング学習】続けられる人と挫折する人の違い](https://monotein.com/blog/joy-of-creating): プログラミングにハマった理由は「モノづくりの楽しさ」。サイト制作もアプリ開発も、すべてモノづくりです。そして、自分の手で作り上げた喜びは自信になり、プログラミング学習を続ける一番のモチベーションになります。
- [Reactはなぜ無料で使えるのか？](https://monotein.com/blog/why-react-is-free-to-use): ReactやAngular、VS Codeなど、企業が開発しているツールがなぜ無料で使えるのでしょう？人材採用コストの削減のためです。MetaやGoogleがオープンソースでツールを提供するメリット、業界影響力の拡大を解説。
- [私がReactを選んだ理由（Not Angular or Vue）](https://monotein.com/blog/why-i-chose-react): React、Vue、Angularの選び方に迷う初心者向けに、Reactを選んだ理由や学習の実際の体験談を共有。JavaScriptフレームワークの選び方のヒントを提供します。
- [【React + Vite】開発時のターミナル表示を消す方法](https://monotein.com/blog/react-vite-turns-off-terminal-messages): React + Vite開発。vite.config.jsにコードをひとつ追加するだけで変更箇所や時刻の出力を非表示に。動画撮影時の時刻飛び問題も解決
- [Reactはライブラリ？フレームワーク？違いと意味を初心者向けに分かりやすく解説](https://monotein.com/blog/react-library-or-framework): Reactはライブラリかフレームワークか？この議論の背景と、なぜどちらでもいいのかを初心者向けに解説。VueやAngularとの比較や、言葉にこだわる理由、著者の経験談を交えて分かりやすく説明します。
- [JavaScriptを難しく感じる理由（HTML・CSSは簡単だったのに...）](https://monotein.com/blog/why-js-feels-difficult-not-one-on-one): HTMLとCSSをスムーズに学んだ人でも、JavaScriptでつまずく理由を解説。HTML・CSSのシンプルな1対1の関係性と、JavaScriptの複雑なプログラミング的アプローチの違いを明確にし、初心者がJavaScriptを学ぶ際の解決策を提案。
- [Next.jsが使われているか・そしてバージョンを確認する方法](https://monotein.com/blog/how-to-detect-nextjs): WappalyzerでNext.jsの有無を調べられない場合の対策を紹介。ブラウザの開発者ツールを使って、Next.jsの有無を簡単に調べる方法を紹介。JavaScriptフレームワークからデプロイ先まで、気になる技術スタックを効率的にチェック。
- [私がTypeScriptやTailwindを使わない理由](https://monotein.com/blog/reasons-for-not-using-ts-css-frameworks): TypeScriptやTailwind CSSを使わないことで学習のハードルを下げ、ReactやNext.jsの核心に集中できる教材にするためです。ビギナーがスムーズに、見通しのいいコードで学べる教材を作っています。
- [Zodとは？読み方やTypeScriptでの使い方を初心者向けに2分で解説](https://monotein.com/blog/what-is-zod): React × TypeScript開発でよく使われるZodを初心者向けに解説。フォームやAPIデータの検証ができるということだけがZod人気の理由ではなく、TypeScriptの一般化がその背景にあります。
- [「理解してから進む」が遠回りになる理由](https://monotein.com/blog/repeating-learning-materials): 「完璧に理解してから進む」勉強法が非効率な理由を解説。プログラミング初心者向けに、漆塗り勉強法で効率的に学び、挫折を防ぐ方法を紹介。全体像の把握や「点と点がつながる」楽しさを体感し、継続的な学習で理解を深めるコツを詳しく説明します。効果的な学習法を紹介。
- [プログラミング学習のモチベーションを維持する方法（点と線の話）](https://monotein.com/blog/connect-the-dot): 点と点がつながる瞬間が、勉強や人生を楽しくする鍵。知識のネットワークが頭の中で広がり、異なる分野や経験が結びつく喜びを、実際のエピソードと共に詳しく解説します。継続の力で『つながり』を見つけ、モチベーションを高める方法も紹介。
- [プログラミング勉強の楽しさ（私の体験談）](https://monotein.com/blog/joy-of-learning): プログラミング学習の最大の喜びは、「昨日できなかったことが今日はできるようになっている」。日々、人生が前に進んでいるポジティブな感覚です。このゾーンに入ってしまうと、モチベーションが自然と湧いてきます。その一方、熱中してしまうことのリスクもあります。くわしく紹介します。
- [私がJavaScriptを選んだ理由【プログラミング言語選択】](https://monotein.com/blog/why-i-chose-js): ウェブサイト制作をきっかけにHTML・CSSを学び、JavaScriptとReactに出会った私の体験談。言語選択の多様な理由と、初心者向けの学びの第一歩を解説。言語選択のルートは人それぞれ。どれを選んでも間違いということはありません。
- [勉強するプログラミング言語の選び方](https://monotein.com/blog/how-to-choose-programming-languages): 勉強するプログラミング言語を選ぶ時、「作りたいアプリを決める」は難しい。より現実的で、より効果的なプログラミング言語の決め方があります。決断を早く、迷う時間を少なく、最短で目標を達成するための方法を紹介。
- [勉強好きの日本人とそのリスク](https://monotein.com/blog/japanese-people-love-studying): 日本人はなぜ勉強が大好きなのか。「勉強が好き」ということの危険性とリスクも紹介。ヨーロッパに住んでいた著者が見た、日本人とヨーロッパ人のカフェに対する考え方の違いを通して日本人の勉強好きを分析。
- [アプリの機能はたった4つだけ](https://monotein.com/blog/crud): アプリの機能はたった4つだけ。日常で使うスマホアプリの操作を『作成・読み取り・修正・削除』（CRUD）で解説。Googleマップのレビューを例に、初心者にもわかりやすくアプリの仕組みを紐解きます。ウェブ開発におけるHTTPメソッドとの関係や、アプリ設計のヒントも紹介。プログラミング初心者必読。
- [私がJavaScriptで挫折した話（+ 乗り越えた方法）](https://monotein.com/blog/overcoming-js-to-react-1): JavaScriptで挫折した筆者が、初心者がつまずく理由を解説。HTML・CSSとの違いや理解しづらい専門用語の壁、Reactを学ぶために必要なJavaScriptの重要性を、自身の失敗談を通して紹介
- [IT資格の〇〇〇を取得した方がいいですか？](https://monotein.com/blog/it-qualifications): IT資格は安心依存？プログラミング初心者向けに、資格取得のメリットとデメリットを解説。安心を求める勉強の罠とは、真のゴールに近づく方法、本当に身につけるべき力を解説。
- [なぜ写経でプログラミング中毒になるのか？](https://monotein.com/blog/syakyo-transcribing-code): プログラミング学習の写経は、実は勉強をラクにしてくれるものです。その理由は、間欠強化がもたらす中毒性。初心者にこそ写経が効果的な理由と、学習が楽しくなる心理的仕組みを解説
- [プログラミング勉強が進まないのは教材のせいだ](https://monotein.com/blog/switching-learning-materials): 勉強が進まない原因は教材選びにあるかもしれません。自分に合う教材選びと、集中力を保つコツを解説。教材を何度も変えることが学習の満足度を下げる理由と、その対策方法を紹介。
- [プログラミング学習で挫折しないための方法](https://monotein.com/blog/avoiding-terminologies): 専門用語が学習の壁になる理由と、初心者向けにわかりやすい言葉で教える重要性を解説。プログラミング初心者の挫折を防ぐための実践的なアプローチを紹介
- [失敗しないプログラミング教材の選び方](https://monotein.com/blog/hand-on-learning-materials): 初心者が挫折せずにプログラミングを習得するには「ハンズオン形式」が鍵。小さな成功体験を積む方法を解説。知識より実践が重要な理由と、学習初期に必要な心構えを紹介。
- [プログラミング初心者が陥りやすい『決められない』問題【ノウハウ・コレクター】](https://monotein.com/blog/know-how-collector): 知識はあるのに行動できない。プログラミング初心者が陥りがちな「ノウハウ収集ばかりで前に進めない」状態。そんな「ノウハウコレクター」の心理と落とし穴を実体験から解説します。
- [【2026年版】React + ViteとNext.js、どちらを選ぶべきか？ 用途別の選び方を分かりやすく解説](https://monotein.com/blog/react-vite-or-nextjs-which-to-choose): ReactアプリをつくるときのツールはReact + ViteとNext.jsの2択です。それぞれの特徴・メリット・向いている用途の違いを、初心者向けにわかりやすく解説します。
- [【プログラミング学習】なぜ有料の教材が〈まだ〉存在するのか？](https://monotein.com/blog/why-we-pay-learning-materials): プログラミング初心者が無料教材に頼りすぎると失敗する理由とは？有料教材の本当の価値と選び方を解説。情報が多すぎる時代に、最短で身につけるための学習戦略。
- [プログラミング学習の初心者によくある誤解（with 解決法）](https://monotein.com/blog/common-misunderstandings): プログラミング初心者が陥りがちな3つの誤解を解説。「理数系でないと難しい」「コードに正解がある」「教材は1回で十分」といった誤解を解き、効率的な学習法を紹介。プログラミング学習を始める前に知っておきたいことです。
- [プログラミング勉強に意味はない](https://monotein.com/blog/purposeless-studying-is-meaningless): プログラミング初心者が陥りがちな「なんとなく勉強」の落とし穴とは？明確な目標設定で最短・最速で夢を実現する方法を解説。JavaScript・React学習やフリーランス・エンジニアを目指す方必見
- [電子書籍のメリットとは？ ブログ記事との違いと初心者に最適な理由を解説](https://monotein.com/blog/advantages-kindle-books): 電子書籍はなぜ今も選ばれるのか？本記事では、ブログ記事にはない電子書籍の2つの強みを解説。情報のパッケージ化と集中できる読書環境という視点から、初心者にとっての最適な学習手段としての電子書籍の価値を紹介します。
- [RSCとは？React Server Componentsの仕組みを2分で図解【2026年版】](https://monotein.com/blog/about-rsc): Reactサーバーコンポーネント（RSC）の仕組みを図解で解説。SPA・SSRとの違い、ページ移動時のPartial Rendering、RSC Payloadとは何かまで、React初心者向けにわかりやすくまとめました。
- [SSR（サーバーサイドレンダリング）とは？仕組みとSPAとの違いを2分で解説](https://monotein.com/blog/about-ssr): SPAの課題である初回表示の遅さを解決するSSR（サーバー・サイド・レンダリング）の仕組みを図解で解説。ハイドレーションやSPAとの違い・関係性、次世代技術RSCへのつながりも紹介
- [SPAとは？シングルページアプリケーションの仕組み・MPAとの違いを2分で解説](https://monotein.com/blog/about-spa): ReactやGoogleマップが採用するSPAの仕組みを図解で解説。MPAとの違い、ページ移動が速い理由、初回表示が遅くなる原因、なぜ「シングルページ」と呼ばれるのかまでわかりやすく紹介します。
- [MPAとは？SPAとの違いとマルチページアプリケーションの仕組みを2分で解説](https://monotein.com/blog/about-mpa): MPA（マルチページアプリケーション）はWordPressも採用している現役の仕組みです。SPAとの違いやページ移動時の動作を、図解を使って初心者にもわかりやすく解説します。
- [学習曲線とは？プログラミング初心者が必ずぶつかる停滞期の正体と乗り越え方](https://monotein.com/blog/learning-curve): 学習しても成果が出ない・・・そんな悩みの正体は「「学習曲線」にあります。初心者が挫折しやすい理由と、成果が現れるまでの過程を図解で解説します
- [【ビギナー向け】TypeScriptを難しく感じる理由と、その解決法](https://monotein.com/blog/why-typescript-is-difficult-for-beginners): TypeScript × Reactはなぜ初心者にとってハードルが高いのか？その理由と、無理なく学ぶためのステップ・教材をわかりやすく紹介します
- [動画と本、勉強に最適なのはどっち？【プログラミング学習】](https://monotein.com/blog/videos-advantages-and-disadvantages): 動画と書籍の学習メリットを比較。動画のモチベーション維持力や視覚的理解、書籍の体系性を解説。最適な教材選びも伝授
- [書籍で学ぶメリットと賢い活用法【プログラミング学習】](https://monotein.com/blog/books-advantages-and-disadvantages): プログラミング初心者向けに書籍学習のメリットを解説！ブログ記事と異なり、情報が整理され、つまみ食いを防ぐ書籍の強みとは？電子書籍の更新性や活用法も紹介
- [【プログラミング初心者がハマる】ネット教材の落とし穴と解決策](https://monotein.com/blog/difficulties-of-using-online-materials): ネットで独学するなら知っておきたい！ネット教材でつまずく理由を解説。断片的な内容、情報過多、集中を妨げる環境の課題と解決策を紹介
- [【プログラミング初心者向け】本当に役立つ教材の選び方](https://monotein.com/blog/recommended-study-method): 短く断片的な情報に頼ると非効率。プログラミング初心者が確実に理解を深められる教材の条件を体系的に解説。
- [韓国でも出版されました](https://monotein.com/blog/korean-version-next-react-book): 『動かして学ぶ！Next.js/React開発入門（三好アキ著／翔泳社）』が韓国語に翻訳され出版。海外出版の経緯や、日本語版のNext.js 15やReact 19への対応情報もまとめています。
- [勉強が楽しい……でもそれは危険信号かも？【チュートリアルヘル】の怖さ](https://monotein.com/blog/tutorial-hell): 勉強しているのに成長実感がない…それは「チュートリアル・ヘル」かもしれません。プログラミング学習者必見の抜け出し方と本質的な気づき。
- [【2026年2月版】できない？Vercelの自動生成ドメインの変更方法](https://monotein.com/blog/vercel-domain-change): Vercelの自動生成ドメインを変更する方法が分からない方必見！ダッシュボードから設定する最新の裏技手順を、2026年2月時点の仕様に沿って紹介します。
- [Reactマスター／TypeScriptマスターの新版（動画バージョン）をリリース](https://monotein.com/blog/react-master-video-release): Reactの全範囲をカバーした動画教材『Reactマスター』をリリース！初心者から最新バージョン19まで徹底解説。JavaScript基礎からReact的な思考力まで身につけ、AI時代に自信を持ってコードを書こう。増補版も好評発売中。
- [Reactサーバーコンポーネント（RSC）完全解説｜仕組み・メリット・デメリット・ストリーミングまで](https://monotein.com/blog/react-server-components-complete-guide): Reactサーバーコンポーネントを一段深く解説。ビギナー向けのやさしい説明。メリット、デメリットだけでなく、「なぜそうなるのか」がわかります。SPA、SSRといったものに触れるので、Reactサーバーコンポーネントが作られた経緯が明らかになり、Reactサーバーコンポーネントをしっかり理解ができるようになります
- [『はじめてつくるReactアプリ（with TypeScript）』改訂第2版／Reactバージョン19](https://monotein.com/blog/update-2025-react-1-book-ts-vite): 2025年3月19日、『はじめてつくるReactアプリ』とTypeScript版の改訂第2版を発売。HTMLとCSSの知識だけで始められるReact開発を、人気のハンズオン形式で解説。React 19の新情報やViteの最新バージョンに対応し、初心者にもわかりやすく進化。基礎をしっかり学びつつ、新機能も押さえられる一冊
- [明治時代とReactコンポーネント](https://monotein.com/blog/rsc-and-rcc-name): Reactクライアントコンポーネントとは、従来からあるReactコンポーネントのことです。しかし以前からそう呼ばれていたわけではありまえん。Reactサーバーコンポーネントが登場してから、そう呼ばれるようになりました。区別をするためです。それぞれには、できることとできないことがあります。
- [【Next.js】Reactサーバーコンポーネントの動きをコードで確認しよう](https://monotein.com/blog/rsc-and-rcc-with-code-nextjs): Reactサーバーコンポーネントの特徴やメリットを、Reactクライアントコンポーネントと比較しながら確認します。Next.jsで実際にコードを書きながら見ていきます。Reactサーバーコンポーネントでは、より短いコード量でデータ取得を実現できるのがわかります。
- [楽観的更新（useOptimistic）とは？意味・仕組みをReact 19で2分で解説](https://monotein.com/blog/what-is-optimistic-update-react-v19): Reactバージョン19の新機能useOptimisticでは、UIの楽観的更新を簡単に実装できます。楽観的更新を毎日わたしたちは目にしています。LINEやInstagramなどでメッセージを送ったとき、表示にただちに反映させるのが、この「楽観的更新」です
- [useActionStateに関数を渡す方法【React 19 Server Actions対応】](https://monotein.com/blog/passing-function-to-useactionstate): Reactバージョン19の新機能useActionStateには関数を渡す必要があります。この関数はfunctionのキーワードを使った記法で書くと、useActionStateより下に書くことができます。
- [【改訂版リリース】「Next.jsでつくるフルスタックアプリ」Next.jsバージョン15対応版／Supabase](https://monotein.com/blog/new-book-release-nextjs-fullstack-route-handlers-15): Next.jsをバックエンドとフロントエンドの両方に使ってフルスタックアプリを開発する入門書をリリース。2024年10月リリースのNext.jsバージョン15対応。ビギナーを対象にしているので、JavaScriptやReact、Next.jsなどの深い知識は不要。三好アキ著。
- [【新刊】Astroのビギナー向け入門書リリース](https://monotein.com/blog/new-book-release-astro): 「はじめてつくるAstroサイト（三好アキ著）」を2024年11月にリリース。1.5時間ですばやくAstroの使い方をマスター。静的サイトジェネレーター。コードを書きながら進むので、楽しく飽きづらい。JavaScriptやReact／Vueの経験がないビギナーでもついていける難易度。
- [【新刊】Server Actionsフルスタックアプリ開発の入門書リリース／Next.js](https://monotein.com/blog/new-book-release-nextjs-fullstack-server-actions): Next.jsとServer Actionsを使うと、フルスタックアプリを時短ですばやく開発できます。最新のNext.jsバージョン15を使って、Server Actionsの使い方をビギナー向けにわかりやすく紹介するのが「Next.js Server Actionsでつくるフルスタックアプリ（三好アキ著）」です。
- [【Next.js】Server Actionsでエラーをフロントに表示する方法｜error.jsとuseActionState](https://monotein.com/blog/nextjs-server-actions-how-to-get-responses): Next.jsのServer Actionsでエラーをフロントに表示するには、error.jsを使う方法とuseActionState使う方法があります。2つの違いと使い分けを、React 19・Next.js 16対応のコードで紹介します。
- [【新刊リリース】動かして学ぶ！Next.js/React開発入門（翔泳社）](https://monotein.com/blog/new-release-next-react-book): 翔泳社より「動かして学ぶ！Next.js/React開発入門（三好アキ著）」を発売。Next.jsをはじめて使うビギナー向け。コードを自分の手でひとつひとつ書きながら進むので、飽きづらく、わかりやすい内容。バックエンド、フロントエンドを持ったフルスタックアプリケーションを開発します。
- [はじめてつくるバックエンドサーバー発展編【改訂版発売】](https://monotein.com/blog/update-node-book-2-advanced): 「はじめてつくるバックエンドサーバー発展編（Node.js & Express & MongoDB）」を2年ぶりに改訂。動かなくなっていたコードや、古くなっていた記述を2024年9月現在の最新の情報で書き改めました。ビギナー向けに、Node.js、Express、MongoDBを使ったアプリケーション開発をわかりやすく解説しています。
- [ターミナル（zsh）の名前とホスト名を変更する方法](https://monotein.com/blog/how-to-change-names-in-terminal-zsh): ターミナル（zsh）に表示されるユーザー名とホスト名を変更する方法。コマンドを2つ実行するだけ。1分で終わります。プログラミングのビギナーや初心者向け。Macユーザー向け。
- [Next.jsのbuild時、特定のURLを除外する方法](https://monotein.com/blog/nextjs-excluding-specific-path-from-build): Next.jsの開発時（development）には必要なものの、オンラインでの公開時（production）には隠しておきたいURLには、redirectsを使いましょう。next.config.jsに下記コードを貼り付ければ、すぐにリダイレクト機能を実現できます。
- [Next.jsをVercel以外で公開する方法（Git不要／Appルータ使用／Netlify）](https://monotein.com/blog/deploy-nextjs-to-other-hosting-platforms): GitもVercelも使わずにNext.jsを公開する方法です。1分で終わる簡単な作業で、Next.jsをNetlifyに公開します。Appルータ使用。export時にはNext.jsのImageコンポーネントの最適化が行われないので、画像最適化をオフにするコードをnext.config.mjsに追加しましょう
- [腐る本を書きつづける空虚感 ― 賞味期限の長い本と、賞味期限の短い本](https://monotein.com/blog/writing-practical-books-and-its-emptiness): 技術書は「時間が経つと読めなくなってしまう本」の典型です。本の寿命を伸ばし、そしてできるだけ長く読んでもらうためにすべきこと、それは「情報」「知識」だけでなく「感情」についても書くことです。
- [私たちが入門書で挫折するわけ](https://monotein.com/blog/reasons-for-avoiding-comprehensiveness): 入門書には網羅性や包括性をめざしたものがたくさんありますが、例外なく退屈です。細切れで断片的な知識の羅列となっているからです。読者はそれぞの項目の「つながり」と「使い方」がわからず挫折します。私は「はじめてつくるReactアプリ」などでは包括性は目指さないアプローチをとっています。
- [Vite + Reactの始め方｜インストールから起動まで3分で完了【2026年版】](https://monotein.com/blog/react-vite-how-to-use): 2026年現在、create-react-appの使用はもはや推奨されていません。React + Viteを使うのがデフォルトです。本記事ではそのReact + Viteの使い方をビギナー向けに紹介します。
- [『はじめてつくるReactアプリ（with TypeScript）』第2版をリリース／Vite使用](https://monotein.com/blog/update-react-1-book-ts-vite): 人気の『はじめてつくるReactアプリ』（三好アキ著）の第2版を発売。React + Viteを使用。2024年の最新React開発手法を学べるビギナー向け教本。専門用語なしでReact + TypeScriptに入門。
- [ドラゴン桜とプログラミング](https://monotein.com/blog/difference-knowing-and-doing): プログラミング初心者に必要なのは「知識」より「できること」。React入門書の執筆経験と英語学習書『ドラゴン・イングリッシュ基本英文100』から学んだ、成功体験を重視する学習法と教育コンセプトを解説します。
- [【Next.js】Reactサーバーコンポーネントのメリットを実際に確認してみました](https://monotein.com/blog/nextjs-react-server-component-less-size): 至るところで「セキュリティ性が高い」や「パフォーマンスに優れる」と言われているReactサーバーコンポーネント。言葉の説明だけではよくわからないので、実際に確認をすると、4メガバイト削減されました。
- [【全解説】React + TypeScriptのイベント型の書き方3パターン](https://monotein.com/blog/typescript-react-event-3-annotations): React + TypeScriptでイベントの型を書くとき、インライン記法・パラメータ横・関数名横の3種類があります。それぞれの違いと使いどころをコードで比較しながら解説します。
- [【Next.js Appフォルダ】メタデータをクライアント・コンポーネントに設定する方法](https://monotein.com/blog/nextjs-app-router-metadata-for-client-component): Next.js Appフォルダで使えるメタデータ設定コード「generateMetadata」と「metadata」は、サーバー・コンポーネントにしか使えません。しかし実は簡単にクライアント・コンポーネントにメタデータを設定する方法があるのです。
- [TypeScriptジェネリクスをサクッと理解【複数のジェネリクスをつかう】](https://monotein.com/blog/typescript-generics-4): TypeScriptのジェネリクスを難しく思う人はたくさんいます。しかし「型定義に対して使うもの」、「functionに対して使うもの」と分けて考えると簡単に理解できます。本記事では複数のジェネリクスに慣れましょう。
- [TypeScriptジェネリクスをサクッと理解【型定義とfunction両方に対して使うジェネリクス】](https://monotein.com/blog/typescript-generics-3): ビギナーがつまづきやすいTypeScriptのジェネリクス。しかし「型定義に対して使うもの」、「functionに対して使うもの」と分けて考えると簡単に理解できます。本記事では型定義とfunction両方に対して使うジェネリクスを完全理解しましょう。
- [TypeScriptジェネリクスをサクッと理解【functionに対して使うジェネリクス】](https://monotein.com/blog/typescript-generics-2): 苦手意識を持つ人が多いTypeScriptのジェネリクス。しかし「型定義に対して使うもの」、「functionに対して使うもの」と分けて考えると簡単に理解できます。今回はfunctionに対して使うジェネリクスを理解しましょう。
- [ジェネリクスとは？TypeScriptでの書き方・使い方を2分で理解する【初心者向け】](https://monotein.com/blog/typescript-generics-1): <T>や<K>が入って難しく見えるTypeScriptのジェネリクス。しかし実は簡単です。型定義に対して使うもの、functionに対して使うものと分けて考えると簡単に理解できます。今回は型定義に対して使うジェネリクスです。
- [Reactのexportとimportを全解説｜default export・named exportの違いと使い方](https://monotein.com/blog/import-export-react): Reactのexportにはdefaultとnamed（名前付き）の2種類があります。それぞれの違い・使い分け・import方法を、コードと表でまとめて整理しました。
- [新刊書『React + TS徹底フォーカス：TypeScriptマスター with React』リリース](https://monotein.com/blog/typescript-master-book-release): 「TypeScriptをReactで使う」という点にフォーカスした学習書。TypeScriptに苦手意識を持っていても、自信をもってReact + TypeScript開発を進められるようになります。
- [Reactを難しく感じる理由と、その解決法【補足】](https://monotein.com/blog/why-react-is-difficult-to-learn-3): Reactビギナーがつまづく大きな壁のひとつが「イベント」の記法です。わかりやすく紹介します。イベントの実態はJavScriptのfunctionなのです。
- [Reactを難しく感じる理由と、その解決法【後編】](https://monotein.com/blog/why-react-is-difficult-to-learn-2): Reactビギナーがつまづく最大の壁が「JavaScriptのfunction」の記法です。時短で解決策を紹介します。functionの理解、アロー関数の記法のマスターが、Reactをマスターする近道です。
- [Reactを難しく感じる理由と、その解決法【前編】](https://monotein.com/blog/why-react-is-difficult-to-learn-1): Reactビギナーがつまづく最大の原因はJavaScriptの理解不足。具体的にどのJavaScriptの知識が必要かを説明します。functionの記法です。
- [Reactのstateとは？「状態」の意味と使い方を初心者向けにやさしく解説](https://monotein.com/blog/what-is-state-in-react): 「状態」とは「アプリ内のデータの状態」を指します。データは不変のものではなく、時間経過やユーザーのアクションによって刻一刻と変化しているものです。そのような「データの状態」を追跡し、管理するためにReactはstateを使うのです。
- [「プログラミングとは何か？」に一言で答えると……](https://monotein.com/blog/purpose-of-programming): データをなにか意味のあることに使うには「データを分類・整理する」、つまり「データを操作する」というプロセスが不可欠で、そこで使われるのがプログラミング言語なのです。
- [Server ActionsとAPI、どっちを使う？違いと使い分けをわかりやすく解説](https://monotein.com/blog/server-actions-or-api): Next.jsのServer ActionsとAPI（Route Handlers）の違いと使い分けを解説。それぞれのメリット・デメリットを表で比較し、アプリの規模や目的に応じた選び方を紹介します。ビギナー向けのやさしい解説です。
- [新刊書『React全部入り：Reactマスター Zero To Hero』リリース](https://monotein.com/blog/react-master-book-release): JavaScriptの基礎、Reactの基本コンセプト、そして発展的内容まで、Reactのほぼ全範囲をカバーする新刊書。2024年の開発現場で必要となるReactの知識をすべて習得。ハンズオン・スタイル（作りながら学ぶ形式）で進むので、飽きずに学習を進められます。
- [「これ一冊だけでOK！」という入門書が全然OKではない理由](https://monotein.com/blog/ideal-beginner-books): 分厚い入門書を選んでしまう理由。それは「安心感が欲しい」ため、そして「これ一冊だけやっていればいい」という盲目思考を許してくれるから。
- [【0円・1分で完了】HTMLとCSSでつくったウェブサイトを無料で今すぐ公開する方法](https://monotein.com/blog/how-to-release-website-for-free): HTML／CSS／JavaScriptで作ったウェブサイトを、無料、1分で公開する方法。Netlifyを使って公開。
- [Next.jsだけでお問い合わせフォームを作る方法を解説](https://monotein.com/blog/nextjs-making-contact-function): 外部サービスを使わずにNext.jsだけでお問合せフォームを作る方法を紹介。Next.jsのAppフォルダとapiフォルダ、そしてNodemailerを使用
- [英語はプログラミング学習に役立つ？](https://monotein.com/blog/english-and-programming-study): プログラミングは英語ベースなので、英語を知っているとプログラミング学習もはかどると思われていますが、本当でしょうか。英語を使える状態でプログラミング勉強を始めた私の経験を書きます。
- [Next.js Appフォルダでの変更点を20個、時短で紹介](https://monotein.com/blog/nextjs-app-folder-new-things-list): Next.jsバージョン13でデフォルトになったAppフォルダの特徴や知っておくと便利なことを20個以上、時短で紹介します。
- [新書リリース。「Next.jsでつくるフルスタックアプリ　前編・後編」](https://monotein.com/blog/release-book-nextjs-fullstack-app-folder): 最新のNext.js（Appフォルダ）を使ってフルスタックアプリを開発する新書を出版します。前編ではMongoDBを使ったバックエンド開発、後編ではReactを使ったフロントエンド開発を解説します。
- [Next.js開発中、画面の表示をモバイル端末で確認する方法](https://monotein.com/blog/use-nextjs-in-the-same-wifi-network): 同WiFiネットワーク内のパソコン、タブレットでも同じ画面を表示でき、Next.js開発時の共有に非常に便利です
- [Next.js 13のコード変更点（パス取得／リダイレクト／リクエストbodyの解析など）](https://monotein.com/blog/nextjs-version-13-migration): Next.js 13ではReactサーバーコンポーネントがデフォルトで導入されたことで、v12までで使われていたコードからの変更点が多くなっています。 本記事ではv12からv13へのマイグレーション中に書き換えた変更点を紹介します。
- [Next.jsビギナー向け入門書（v13／Appフォルダ）最新版を発売](https://monotein.com/blog/release-book-nextjs-version-13-app-folder): Next.jsバージョン13とAppフォルダを使った現時点で唯一のNext.js入門書。2時間程度でストレスなく終えられることをコンセプトに書かれているので、ビギナーでも挫折することなく進められます。
- [電子書籍を紙の本で読めるようになりました](https://monotein.com/blog/publishing-paperback-version): 「はじめてつくるReactアプリ with TypeScript」や「はじめてつくるバックエンドサーバー」を紙の本で読めるようになりました。
- [Next.jsバージョン13の変更点を時短で解説](https://monotein.com/blog/nextjs-v13-new-features): Next.js v13のappフォルダ、layout、getStaticPropsの廃止、getStaticPathsに変わる新API、generateStaticParamsなどをコードを見ながら解説します。
- [GatsbyではなくNext.jsを選ぶ理由](https://monotein.com/blog/why-i-chose-nextjs-over-gatsby): GatsbyよりもNext.jsを選ぶようになった理由や、next/imageの使いにくさに関して思うところを書きます。
- [Next.jsビギナー向け入門書、最新版を発売【はじめてつくるNext.jsサイト】](https://monotein.com/blog/release-books-nextjs-v13-gatsby-v5): 一年半ほど前に初版をリリースした「はじめてつくるNext.jsサイト」を、2022年11月に発表された最新バージョンv13を使って書き直し、今回リリースしました。
- [エラーの見つけ方と対処方法](https://monotein.com/blog/how-to-find-and-fix-errors): 本や動画などの教材を使って勉強している時に発生するエラーの最大の原因は、使用しているパッケージやソフトのバージョンが変わっているためです。なので、まずは教材で使われているバージョンを確認しましょう。
- [Next.jsサーバーでCORS問題が起きる時の解決方法](https://monotein.com/blog/nextjs-vercel-server-cors): Next.jsのサーバーとは異なるURLからリクエストをした時に起きるCORSを解決するコードを紹介。next.config.jsに次のコードを追加するだけで、CORSは解決します。
- [新書をリリースしました。「MERNスタックでつくるフルスタックアプリ　前編・後編」](https://monotein.com/blog/book-release-mern-fullstack): MERNスタックを使ってメルカリのようなフリマアプリを開発する新書「MERNスタックでつくるフルスタックアプリ」を出版しました。前編ではNode.js、Express、MongoDBを使ったバックエンド開発、後編ではReactを使ったフロントエンド開発を解説しています。
- [新しい本をリリースしました【はじめてつくるバックエンドサーバー発展編】](https://monotein.com/blog/book-release-node-express-advanced): Node.js、Express、MongoDBを使ってブログアプリを開発する実践的な内容の本をリリースしました。本書はビギナー向けにわかりやすく丁寧に解説することを心がけて書かれているので、HTML／CSSの学習が終わった人であればトライできる難易度になっています。
- [Next.jsにページネーションをNPMパッケージなしで追加する方法](https://monotein.com/blog/nextjs-pagination): 最初にマークダウンのブログ機能を追加し、次にページネーションの作り方を解説していきます。
- [Next.jsのブログに前後記事へのリンクを追加する方法](https://monotein.com/blog/nextjs-blog-prev-next): 最初にマークダウンのブログ機能を追加し、次に前後の記事へ移動するリンクの作り方を解説していきます。
- [Gatsbyに前後の記事へのリンクを追加する方法](https://monotein.com/blog/gatsby-blog-prev-next): Gatsbyで作ったサイトのブログページに、前後の記事へと移動する機能を追加する方法をわかりやすく解説します。gatsby-nodeにGraphQLクエリを追加し、それをcontextで渡す方法を使います。
- [Gatsbyブログのページネーションの作り方](https://monotein.com/blog/making-pagination-for-gatsby-blog): Gatsbyで作ったサイトのブログ一覧ページに、表示される記事数を制限し、残りを次ページへと割り当てるページネーションを実装します。ページネーションは日本語では「ページ送り」「ページ割り」と呼ばれます。
- [Figmaのグラデーションがブラウザで表示されない時の直し方](https://monotein.com/blog/figma-gradient-not-working): Figmaで作ったグラデーションのSVG画像がブラウザで正しく表示されない時は、SVG画像を開き、<linearGradient>タグを探し、その中のidを修正することで、正しく表示されるようになります。
- [HTMLとCSSを勉強したあと、次に何をすればいい？おすすめの学習順序を解説](https://monotein.com/blog/what-to-do-after-studying-html-css): HTMLとCSSを勉強したあと、次に何を勉強すればいいのでしょうか？JavaScriptを基礎から学ぶ方法と、アプリを作りながら学ぶ方法を比較し、初心者におすすめの学習順序を解説します。Reactを使った効率的な勉強法も紹介。
- [コールドメールとは？成功率を上げる書き方と具体例【実体験あり】](https://monotein.com/blog/what-is-cold-mail): コールドメール（cold email）とは、面識のない相手に送る営業メールのこと。 意味や定義から、開封率を上げる件名の作り方、具体的な文章例まで、 実体験をもとにわかりやすく解説します。日本語では見つからない情報を解説しています。
- [Gatsby v4にアップデートしました](https://monotein.com/blog/gatsby-v4-upgrade): v3から半年ほどでリリースされたGatsby v4には、サーバーサイドレンダリングなどの新機能が搭載され、Gatsbyが単なる静的サイトジェネレーター（SSG）から大幅に進化しつつあるのがうかがえます。その他、ビルド時間を短縮する仕組みも導入されています。
- [出版した本のインタビューを受けました。](https://monotein.com/blog/interview-about-my-books): 私は「はじめてつくるReactアプリ」など計8冊の本を出版していますが、今回そのインタビューを受けました。ここでは、教本執筆前の自分の失敗談や、執筆で工夫した点、苦労したこと、読者からの声で励まされたことなどを話しています。
- [フロントエンドとバックエンドの違いとは？APIやサーバーの役割も初心者向けに全解説](https://monotein.com/blog/frontend-and-backend): ウェブ開発でよく出てくるフロントエンド・バックエンド・サーバー・データベース・APIという言葉。それぞれの役割と関係を、実際のアプリを例に使いながら、初心者向けに図解でわかりやすく解説します。
- [【作って比較】「ヘッドレスWordPress」と「普通のWordPress」](https://monotein.com/blog/comparison-headless-wordpress-and-normal-wordpress): 「ヘッドレスWordPress」と「普通のWordPress」で、同じウェブサイトを作りました。Lighthouseのスコア比較や、実際の使い心地を紹介していきます。ヘッドレスWordPressの高速スピードがよくわかります。
- [Next.jsにマークダウンのブログ機能を追加する方法](https://monotein.com/blog/nextjs-making-markdown-blog): 多機能なNext.jsにブログ機能を追加するには、コードを書いていく必要があります。getStaticPaths()とgetStaticProps()を使ってマークダウンファイル（.md）からブログ機能を生成します。
- [プログレスバーの作り方（React / Vite / Next.js）](https://monotein.com/blog/making-a-progress-bar-for-react): ページの残りの分量をユーザーに知らせるプログレスバーは、特にモバイルのUXを高めるのに欠かせません。この記事ではReact向けにrefとuseEffectを使って、パッケージなどは使わずに作っていきます。Next.jsやGatsbyでも利用できます。
- [AVIF画像とは？WebPより高圧縮な次世代フォーマットの使い方と作り方を解説](https://monotein.com/blog/avif-image): 2020年の中頃に現れた最新の画像フォーマットAVIF（.avif）は、なぜ熱い注目を集めているのでしょうか。JPEGやPNG、WebPなどと比べてAVIFにはどのような特徴やメリットがあるのか、作り方と使い方も合わせて解説していきます。
- [当サイトをGatsby v3にアップデートしました](https://monotein.com/blog/gatsby-v3-upgrade): Gatsby v3はサイト開発者、コンテンツ担当者、そしてエンドユーザーの三方よしの高速化を実現しています。Gatsby Imageのプラグインはさらに使いやすく、また高速化しており、v2からの移行作業もすぐに完了させることができます。
- [SPAサイトとは？仕組み・メリット・デメリット・実例を2分で解説](https://monotein.com/blog/what-is-spa): 複数のページがあるのになぜ「シングル・ページ・アプリケーション」と呼ばれるのか？静的サイト・動的サイトの歴史からSPAの仕組みを解説。高速表示や快適なUXなどのメリットから、初期表示の遅さやSEOの弱点まで、SPAの特徴をわかりやすくまとめます。
- [アイソメトリックとは？意味・特徴・ウェブデザインでの使い方を図解で解説](https://monotein.com/blog/isometric-design-in-website): 広告やウェブサイトで見かけるアイソメトリックデザインとは、平面に立体を描く「等角」の技法を使ったデザインです。フラットデザインの限界から生まれた背景、スタートアップやIT企業に好まれる理由、効果的な使い方と注意点まで、具体的な事例を交えて解説します。
- [静的サイトジェネレーターとは？SSGの仕組みとメリットを2分で解説](https://monotein.com/blog/what-is-ssg): 静的サイトジェネレーター（SSG）がなぜ注目されるのか、動的サイトとの違いやbuildプロセスの仕組みをわかりやすく解説。スピード・セキュリティ・柔軟性のメリットから、Next.js・Astro・Nuxtなど主要フレームワークの特徴まで網羅します。
- [Jamstackが現れるまでの歴史 ― LAMPからMEAN、そしてJamstackへ](https://monotein.com/blog/history-of-jamstack): これまでのWordPressに代わって、「静的サイト」と呼ばれるウェブサイトを採用するケースが増えてきています。静的サイトを採用することには、高速のページ表示、高セキュリティ、そして低コストという多くのメリットがあります。この記事では、そんなメリットとともに、静的サイトの活用方法についても紹介します。
- [これだけ読めばOK！ Jamstackのすべてがわかります](https://monotein.com/blog/what-is-jamstack): Jamstackは「WordPressを置き換えるもの」として注目を集めています。なぜ今ここまで注目を集めるのか、何が新しいのか、メリットは何か、どのような用途があるのか、などをくわしく解説します。
- [Gatsbyの検索エンジン最適化（SEO）の全まとめ](https://monotein.com/blog/gatsby-seo-and-optimisations): Gatsbyサイトは「爆速」なのでパフォーマンスに不安はありませんが、検索エンジン対策のためにはすべきことがいくつかあります。サイトマップの設置からSEOコンポーネントの作成、オフィシャルサイトでもくわしく解説されていない構造化データ、そしてNetlifyでデプロイしている時に絶対しなければいけない設定についても紹介します。
- [Font AwesomeをSVGで置き換えてサイト表示速度を改善する方法](https://monotein.com/blog/font-awesome-alternative): Font Awesomeはページ速度に悪影響を与えることがあります。本記事ではFont AwesomeをSVGアイコンに置き換えて表示速度を改善する具体的な方法を解説。Feather Iconsなどの無料SVGライブラリーの紹介から、HTMLとCSSでアイコンと文字を横並びに表示する実装方法まで詳しく説明します。
- [ウェブサイトの『体感速度』UPの方法](https://monotein.com/blog/perceived-speed-and-how-to-improve): ウェブサイトのスピードを高めるには表示速度と体感速度の2つをアップする必要があります。スピードはビジネスの成功にも関係してくる非常に重要な要素なので、表示速度だけでなく体感速度も同時に高めて、快適なウェブ体験をユーザーに提供しましょう。
- [Shop Payが何かわからない人へ](https://monotein.com/blog/differences-shopify-payment-and-shop-pay): Shopifyで利用できる決済手段の中に「Shop Pay」というものがあります。これは同じくShopifyが提供するデフォルトの決済手段「Shopifyペイメント」とよく似ている名前なので、何が違うのかわからない人が大勢います。この2つは似ているようで違うものです。今回はそんな「Shop Pay」と「Shopifyペイメント」の違いについて、わかりやすく解説をします。
- [画像がギザギザして不鮮明な理由](https://monotein.com/blog/svg-image): ロゴマークやイラストがギザギザして、不鮮明に見えるウェブサイトがあります。それがウェブサイトの一部であっても、全体が安っぽく見えてしまい、サイトの信用性を低下させる原因になります。これは使われている画像のフォーマットに原因があって引き起こされています。この問題を解消方法を紹介します。
- [サーバー料金をゼロにする方法](https://monotein.com/blog/how-to-host-website-for-free): 今でも多くの人がサーバー料金を盲目的に払っていますが、実は有料サーバーは無くてもホームページは開設できるのです。これは近年、無料で利用できるサービスが数多く現れているためですが、ウェブ業界以外の人には思ったほど知られていない情報です。今回はそんなサーバーを無料にする方法を紹介します。
- [WebサイトとWebアプリの違いとは？2分で初心者向けに解説](https://monotein.com/blog/differences-website-and-webapplication): 「Webサイト」は情報が一方通行、「Webアプリケーション」は双方向のやりとりができる点が最大の違いです。CRUD操作やフロントエンド・バックエンドの関係、モバイルアプリとの違い、さらにPWA（プログレッシブ・ウェブアプリ）まで、具体例を交えてわかりやすく解説します。
- [【2026年版】ウェブサイトのスピードを必ず上げる『2つの方法』](https://monotein.com/blog/improving-fonts-and-images): ほとんどのホームページは遅くて重いため、ユーザーにストレスを感じさせています。この記事ではスピード診断ツールの使い方と、ウェブサイトのスピードをかならず上げる2つの方法、「フォントの読み込み」と「画像の最適化」を紹介します。
- [遅いウェブサイトからユーザーが逃げていく理由](https://monotein.com/blog/why-website-has-to-be-fast): ウェブサイトの表示スピードは近年もっとも重要な要素です。数多くの調査で、ウェブサイトが表示される時の、たった1秒の差がユーザーの行動に大きな影響をあたえることが明らかになっています。ウェブサイトの高速化がビジネスの成功に貢献する重要な要素となっているのです。