monotein blog
React、Next.jsに関するビギナー向けコンテンツ、海外の最新テクノロジーなどをわかりやすく紹介
【新刊リリース】動かして学ぶ！Next.js/React開発入門（翔泳社）
翔泳社より「動かして学ぶ！Next.js/React開発入門（三好アキ著）」を発売。Next.jsをはじめて使うビギナー向け。コードを自分の手でひとつひとつ書きながら進むので、飽きづらく、わかりやすい内容。バックエンド、フロントエンドを持ったフルスタックアプリケーションを開発します。
【 Next.js 】2024.9.18
はじめてつくるバックエンドサーバー発展編【改訂版発売】
「はじめてつくるバックエンドサーバー発展編（Node.js & Express & MongoDB）」を2年ぶりに改訂。動かなくなっていたコードや、古くなっていた記述を2024年9月現在の最新の情報で書き改めました。ビギナー向けに、Node.js、Express、MongoDBを使ったアプリケーション開発をわかりやすく解説しています。
【 その他 】2024.9.12
ターミナル（zsh）の名前とホスト名を変更する方法
ターミナルに表示される任意のもの、たとえば「tokyo@japan ~ %」に変更する方法。コマンドを2つ実行するだけ。1分で終わります。プログラミングのビギナーや初心者向け。好きな名前に変更可能。Macユーザー向け。
【 その他 】2024.8.9
Next.jsのbuild時、特定のURLを除外する方法
Next.jsの開発時（development）には必要なものの、オンラインでの公開時（production）には隠しておきたいURLには、redirectsを使いましょう。next.config.jsに下記コードを貼り付ければ、すぐにリダイレクト機能を実現できます。
【 Next.js 】2024.7.28
Next.jsをVercel以外で公開する方法（Git不要／Appルータ使用／Netlify）
GitもVercelも使わずにNext.jsを公開する方法です。1分で終わる簡単な作業で、Next.jsをNetlifyに公開します。Appルータ使用。export時にはNext.jsのImageコンポーネントの最適化が行われないので、画像最適化をオフにするコードをnext.config.mjsに追加しましょう
【 Next.js 】2024.6.13
腐る本を書きつづける空虚感 ― 賞味期限の長い本と、賞味期限の短い本
技術書は「時間が経つと読めなくなってしまう本」の典型です。本の寿命を伸ばし、そしてできるだけ長く読んでもらうためにすべきこと、それは「情報」「知識」だけでなく「感情」についても書くことです。
【 その他 】2024.5.19
私たちが入門書で挫折するわけ
2024年現在、create-react-appの使用はもはや推奨されていません。React + Viteを使うのがデフォルトです。本記事ではそのReact + Viteの使い方をビギナー向けに紹介します。
【 その他 】2024.5.2
【Vite + React】3分で使えるようになるVite + React入門（初心者向け）
2024年現在、create-react-appの使用はもはや推奨されていません。React + Viteを使うのがデフォルトです。本記事ではそのReact + Viteの使い方をビギナー向けに紹介します。
【 React 】2024.4.25
『はじめてつくるReactアプリ（with TypeScript）』第2版をリリース／Vite使用
人気の『はじめてつくるReactアプリ』（三好アキ著）の第2版を発売。React + Viteを使用。2024年の最新React開発手法を学べるビギナー向け教本。専門用語なしでReact + TypeScriptに入門。
【 React 】2024.4.12
ドラゴン桜とプログラミング
【 その他 】2024.4.11
【Next.js】Reactサーバーコンポーネントのメリットを実際に確認してみました
「バンドルサイズ削減」というサーバーコンポーネントのメリットを実際に確認。4メガバイト削減されました
【 Next.js 】2024.3.23
【React + TypeScript】イベントの型の記法には3種類あります
インライン記法、パラメーターに書く記法、function名の横に書く記法の3つをサクッと紹介
【 React 】2024.3.19
【Next.js Appフォルダ】メタデータをクライアント・コンポーネントに設定する方法
設定方法は2つあります。特の1つ目の方法は一瞬で終わります。
【 Next.js 】2024.3.18
TypeScriptジェネリクスをサクッと理解【その４ 複数のジェネリクスをつかう】
苦手に感じている人が多いジェネリクス。連載最終回の本記事では、複数のジェネリクスの使い方をマスターします。
【 React 】2024.3.16
TypeScriptジェネリクスをサクッと理解【その３ 型定義とfunction両方に対して使うジェネリクス】
苦手に感じている人が多いジェネリクス。連載3回目の本記事では、 型定義とfunction両方に対してつかうジェネリクスをマスターします。
【 React 】2024.3.16
TypeScriptジェネリクスをサクッと理解【その２ functionに対して使うジェネリクス】
苦手に感じている人が多いジェネリクス。連載2回目の本記事では、 function対してつかうジェネリクスをマスターします。
【 React 】2024.3.16
TypeScriptジェネリクスをサクッと理解【その１ 型定義に対して使うジェネリクス】
苦手に感じている人が多いジェネリクス。連載1回目の本記事では、 型定義に対してつかうジェネリクスをマスターします。
【 React 】2024.3.16
【Reactビギナー向け】default exportとexportの種類をすべて解説
なんとなく書いているdefault exportと、defaultなしのexportの違いをサクッと紹介します。
【 React 】2024.3.15
📌 新刊書『React + TS徹底フォーカス：TypeScriptマスター with React』リリース
「TypeScriptをReactで使う」という点にフォーカスした学習書。TypeScriptに苦手意識を持っていても、自信をもってReact + TypeScript開発を進められるようになります。
【 React 】2024.3.14
Reactをむずかしく感じる理由と、その解決法【その３】
Reactビギナーがつまづく大きな壁のひとつが「イベント」の記法です。わかりやすく紹介します。
【 React 】2024.3.13
Reactをむずかしく感じる理由と、その解決法【その２】
Reactビギナーがつまづく最大の壁が「JavaScriptのfunction」の記法です。時短で解決策を紹介します。
【 React 】2024.3.13
Reactを難しく感じる理由と、その解決法【その１】
Reactビギナーがつまづく最大の原因はJavaScriptの理解不足。「JavaScriptの具体的にどの知識が必要か？」という点を説明します。
【 React 】2024.3.13
Reactの「状態」という言葉の意味（state）
「状態を管理する」「更新する」などのわかりにくい言葉の説明をします
【 React 】2024.3.12
「プログラミングとは何か？」に一言で答えると……
プログラミング言語の本質的な役割は「データを操作すること」です
【 その他 】2024.3.12
Server ActionsとAPI、どっちを使う？【Next.js Appフォルダ】
Next.jsのバックエンド開発で悩むこと：「APIを作るか、それともServer Actionsを使うか？」
【 Next.js 】2024.2.28
📌 新刊書『React全部入り：Reactマスター Zero To Hero』リリース
Reactのほぼ全範囲をカバーしたビギナー向け教本をリリース
【 React 】2024.2.22
「これ一冊だけでOK！」という入門書が全然OKではない理由
私たちがつい分厚い入門書を選んでしまう理由と、その対策について紹介
【 その他 】2024.1.7
【今すぐできる】JavaScriptがむずかしくてReact／Vueに進めない時の対処法
JavaScriptで詰まってしまった人に向けて、React／Vueを始める方法を紹介
【 ビギナー向け 】2023.12.27
【0円・1分で完了】HTMLとCSSでつくったウェブサイトを無料で今すぐ公開する方法
0円、そして1分でウェブサイトを公開する方法を紹介
【 その他 】2023.12.26
Next.jsだけでお問い合わせフォームを作る方法を解説
Next.jsをフロントエンドとバックエンドに使ってお問い合わせ機能を作ります。AppフォルダとPagesフォルダ、両方のコードを紹介
【 Next.js 】2023.12.23
【実例で解説】「フロントエンド」と「バックエンド」の違いを実例を使って解説
ウェブの勉強をしていると、必ず出てくる「フロントエンド」「バックエンド」。それぞれが何をしているのか実例で紹介
【 その他 】2023.12.21
ウェブサイトとウェブアプリの違い
違いは一方通行と双方向にあります
【 その他 】2023.12.19
【2分でわかる】APIとは？
わかりにくい『API』を、実例を使って解説します
【 その他 】2023.12.19
英語はプログラミング学習に役立つ？
英語をマスターした後でプログラミングの勉強を始めた私の体験を紹介します。
【 その他 】2023.12.19
Next.js Appフォルダでの変更点を20個、時短で紹介
Next.jsバージョン13でデフォルトになったAppフォルダの特徴や知っておくと便利なことを20個以上、時短で紹介します。
【 Next.js 】2023.12.12
新書リリース。「Next.jsでつくるフルスタックアプリ 前編・後編」
最新のNext.js（Appフォルダ）を使ってフルスタックアプリを開発する新書を出版します
【 Next.js 】2023.11.28
Next.js開発中、画面の表示をモバイル端末で確認する方法
同じWiFiネットワークに接続している場合、開発画面を複数端末で簡単に共有できます
【 Next.js 】2023.06.08
Next.js 13のコード変更点（パス取得／リダイレクト／リクエストbodyの解析など）
Next.jsバージョン12から13へのマイグレーション中に書き換えた変更点を紹介します。
【 Next.js 】2023.05.18
Next.jsビギナー向け入門書（v13／Appフォルダ）最新版を発売
専門用語なし。2時間でストレスなく終えられる優しいNext.js入門書リリース
【 Next.js 】2023.05.12
電子書籍を紙の本で読めるようになりました
電子書籍のペーパーバック版（紙の書籍）の発売を開始しました。サイズはA5、フルカラー印刷です。
【 その他 】2023.04.29
Next.jsバージョン13の変更点を時短で解説
v13で導入されたappフォルダやgenerateStaticParams。要点だけを手短にまとめて紹介します。
【 Next.js 】2023.04.19
GatsbyではなくNext.jsを選ぶ理由
GatsbyよりもNext.jsを選ぶようになった理由や、next/imageの使いにくさに関して思うところを書きます。
【 Next.js 】2022.12.23
Next.jsビギナー向け入門書、最新版を発売【はじめてつくるNext.jsサイト】
Next.jsとGatsbyの最新バージョンに準拠したビギナー向け入門書をリリースしました
【 Next.js 】2022.12.21
create-react-app起動時のブラウザ自動オープンをオフにする方法
create-react-app起動時、ブラウザが勝手に開く機能をオフにする方法を紹介します。
【 その他 】2022.12.9
エラーの見つけ方と対処方法
プログラミングの勉強中にエラーが発生した時の対処方法を紹介します。
【 その他 】2022.11.27
Next.jsサーバーでCORS問題が起きる時の解決方法
Next.jsのサーバーとは異なるURLからリクエストをした時に起きるCORSを解決するコードを紹介します。
【 Next.js 】2022.11.14
新書をリリースしました。「MERNスタックでつくるフルスタックアプリ 前編・後編」
MERNスタックを使ってメルカリのようなフリマアプリを開発する新書を出版しました
【 その他 】2022.08.06
執筆作業の後に気をつけていること
本を書いた後の読み直し作業（校訂）で気をつけているポイントを紹介します。
【 その他 】2022.07.18
新しい本をリリースしました【はじめてつくるバックエンドサーバー発展編】
Node.js、Express、MongoDBを使ったアプリ開発を解説するビギナー向け教本を販売開始しました。
【 その他 】2022.04.07
スタートアップ企業のウェブサイトの特徴
スタートアップやベンチャー企業のウェブサイトにWordPressは少なく、別の特徴があります。
【 Jamstack 】2022.02.10
【誰でもできる】無料・15分でお問い合わせページを作る方法
費用0円、作業時間15分でお問い合わせページを作ります。パソコン苦手のビギナーでも簡単にできる方法です。
【 ビギナー向け 】2022.01.13
NetlifyのBuildを消費しない方法
ローカル環境でBuildすることで、より速く、より安価にサイト運用ができます。
【 Gatsby 】2021.12.29
【ビギナー向け】Jamstackサイトの簡単な作り方
GatsbyとContentfulを使って、CMS付きのJamstackサイトを作り方を紹介します。
【 Jamstack 】2021.12.27
Next.jsにページネーションをNPMパッケージなしで追加する方法
NPMパッケージは使わずにNext.jsにページネーションを追加します。
【 Next.js 】2021.12.25
Next.jsのブログに前後記事へのリンクを追加する方法
NPMパッケージは使わずに、Next.jsに前後の記事へ移動するリンクを追加します。
【 Next.js 】2021.12.25
【2024年版】Reactの勉強をHTML／CSSの知識だけで始める方法
HTMLとCSSの知識だけでReactを使う方法を紹介
【 ビギナー向け 】2021.12.09
静的サイトジェネレーターのサイト一覧（Next.js / Nuxt / Gatsby）
Next.js、Gatsby、Nuxtを使ったウェブサイトとアプリをリストアップします。海外のJamstackサイト開発会社も載せます。
【 Jamstack 】2021.12.08
Jamstack完全ガイド【Jamstackのすべて】
Jamstackのメリット、デメリットからテクノロジー、WordPressとの連携まで、Jamstackのすべてを解説します。
【 Jamstack 】2021.12.06
ReactでNetlifyのFormsが認識されない原因と解決方法
NetlifyのFormsは簡単なミスの修正ですぐに動くようになります。
【 Gatsby 】2021.12.02
Gatsbyに前後の記事へのリンクを追加する方法
本記事では最初にGatsbyサイトにブログ機能を追加し、次にNPMパッケージなどは使わずに前後の記事へ移動する機能を実装します。
【 Gatsby 】2021.11.28
Gatsbyブログのページネーションの作り方
本記事では最初にGatsbyサイトにブログ機能を追加し、次にNPMパッケージなどは使わずにページネーションを実装していきます。
【 Gatsby 】2021.11.27
Figmaのグラデーションがブラウザで表示されない時の直し方
グラデーションを含んだSVG画像が正しく表示されない時の原因と対処法を紹介します。
【 その他 】2021.11.27
HTMLとCSSを勉強したあと、何をすればいいのかわからない・・・
HTML → CSSと順調に進んできたものの、そこでつまづいてしまう人は多くいます。その理由と対処法を紹介します。
【 ビギナー向け 】2021.11.26
Gatsby v4にアップデートしました
当サイトをGatsby v4にアップデートしました。v4ではサーバーサイドレンダリングなども利用可能になっています。
【 Gatsby 】2021.11.20
出版した本のインタビューを受けました。
私の書いた「はじめてつくるReactアプリ」執筆のきっかけとなった挫折経験や苦労などを話しています。
【 私のこと 】2021.10.06
サーバー、データベース、バックエンド、フロントエンドの違い
ウェブ開発でよく聞く用語、サーバー、データベース、フロントエンド、バックエンド、APIなどの違いを分かりやすく解説します。
【 ビギナー向け 】2021.10.04
タテ書きKindle原稿をマークダウンとCSSでつくる方法
このページは現在最新情報に更新作業中です。
【 その他 】2021.08.20
【作って比較】「ヘッドレスWordPress」と「普通のWordPress」
同一のウェブサイトを、「ヘッドレスWordPress」と「普通のWordPress」で作って、それぞれのメリット、デメリットを紹介します。
【 WordPress 】2021.07.26