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