monotein blog
React、Next.jsに関するビギナー向けコンテンツ、海外の最新テクノロジーなどをわかりやすく紹介
📌 新刊書『React + TS徹底フォーカス：TypeScriptマスター with React』リリース
「TypeScriptをReactで使う」という点にフォーカスした学習書。TypeScriptに苦手意識を持っていても、自信をもってReact + TypeScript開発を進められるようになります。
【 React 】2024.3.14
📌 新刊書『React全部入り：Reactマスター Zero To Hero』リリース
Reactのほぼ全範囲をカバーしたビギナー向け教本をリリース
【 React 】2024.2.22
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をむずかしく感じる理由と、その解決法【その３】
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
「これ一冊だけで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
Next.jsにマークダウンのブログ機能を追加する方法
Next.jsでブログ機能を実装するコードを紹介します。getStaticPaths()とgetStaticProps()を使います。
【 Next.js 】2021.06.26
コアウェブバイタルを上げればランキングも上昇するのか？
2021年6月から導入の始まった「コアウェブバイタル」。コアウェブバイタルの解説とその改善方法、検索ランキングやSEOとの関係を説明します
【 スピードUP 】2021.06.21
プログレスバーの作り方（React / Gatsby / Next.js）
ページの長さによって動的に変わるプログレスバーの簡単な作り方を紹介します。
【 Gatsby 】2021.05.11
軽量で高画質、AVIF（.avif）画像の作り方と使い方
最新の画像フォーマットAVIF（.avif）のメリット、作り方、使い方、そしてWebPとの違いを解説します。
【 スピードUP 】2021.04.30
当サイトをGatsby v3にアップデートしました
今月リリースされたGatsby v3にアップグレードして、サイト開発、そしてサイト表示スピードが大きくアップしました
【 Gatsby 】2021.03.25
マークダウンとCSSを使ってKindle原稿をつくる方法
このページは現在最新情報に更新作業中です。
【 その他 】2021.02.18
Gatsbyサイトにメルマガ登録フォームを設置する方法
Mailchimpを使えば、0円でメールアドレス登録フォームと自動返信機能を実装できます
【 Gatsby 】2021.02.17
コールドメールとは？ 成功のコツを実体験に基づいて解説
コールドメールの定義から送り方、成功させるコツまで、網羅的に紹介します。
【 マーケティング 】2021.01.31
SPAの何が「シングル」なのか？
何枚もページのあるWebアプリケーションが、なぜ「シングル・ページ・アプリケーション(SPA)」と呼ばれるのでしょうか？
【 Jamstack 】2021.01.26
アイソメトリックデザインが人気の理由
目にしない日はない「アイソメトリックデザイン」。なぜメッセージを効果的に伝えられるのか解説します。
【 デザイン 】2021.01.23
なぜJamstackは「ホスティングサービス」を使うのか？
Jamstackで必ず耳にする「ホスティングサービス」。なぜ「レンタルサーバー」ではダメなのでしょうか？
【 Jamstack 】2020.12.18
Jamstackを使っているのはだれ？
Jamstackの採用が多い業界、Jamstackで作られることの多いウェブサイトの種類などを紹介していきます。
【 Jamstack 】2020.12.15
これだけで「静的サイトジェネレーター」のすべてがわかります
静的サイトジェネレーターの登場した背景、メリット／デメリット、buildプロセス、Next.jsなどをわかりやすく解説します
【 Jamstack 】2020.12.13
Jamstackが解決できていないデメリット
たくさんの人がJamstackでサイト作りをしています。しかしJamstackに死角やデメリットはないのでしょうか？
【 Jamstack 】2020.12.10
【比較】WordPress vs. Jamstack ― ウェブサイトはどっちで作るべき？
「WordPressからJamstackに乗りかえた」という人が増えてきました。その理由を探ってみましょう。
【 Jamstack 】2020.12.05
Jamstackサイトが0円で公開できる理由とは？
Jamstackサイトが0円で公開できるのは○○○を使っているからです。
【 Jamstack 】2020.12.03
Jamstackが現れるまでの歴史 ― LAMPからMEAN、そしてJamstackへ
Web開発のニュースタンダードとして定着しつつあるJamstackはどのようにして現れたのか？ その発展の歴史を紹介します。
【 Jamstack 】2020.12.01
これだけ読めばOK！ Jamstackのすべてがわかります
高スピード、高セキュリティ、低コストのJamstack。その秘密をわかりやすく紹介します。
【 Jamstack 】2020.11.22
Webサイトをアプリにする方法
ウェブサイトとアプリを別々に開発する必要はもうありません。「PWA」を使いましょう。
【 スピードUP 】2020.11.15
Gatsbyの検索エンジン最適化（SEO）の全まとめ
GatsbyサイトのSEO対策をすべてまとめます。オフィシャルサイトにほとんど書かれていない構造化データや、Netlifyでホストしている場合に見落としがちなポイントも紹介します。
【 Gatsby 】2020.11.10
ヘッドレスCMSを実際に導入した結果【その2】
ヘッドレスCMSは現場でどう使われているのか？ 日本語での情報がまだまだ少ないヘッドレスCMSの活用事例を3つ紹介します。
【 ヘッドレスCMS 】2020.11.03
ヘッドレスCMSを実際に導入した結果【その1】
ヘッドレスCMSは現場でどう使われているのか？ 日本語での情報がまだまだ少ないヘッドレスCMSの活用事例を3つ紹介します。
【 ヘッドレスCMS 】2020.10.28
2024年にヘッドレスCMSが最適な理由
日本語の情報がまだまだ少ない「ヘッドレスCMS」のベストな使い道を紹介します。
【 ヘッドレスCMS 】2020.10.23
【2024年】CMSを選ぶときに知っておきたいこと ― ヘッドレスCMS
WordPressのような「従来型CMS」を選ぶメリットは2022年のいま無くなっています。なぜでしょう？
【 ヘッドレスCMS 】2020.10.20
ウェブサイトのスピードUP前に知りたかったこと
ネットで成果を出すために表示スピードUPは不可欠。しかしマイナスの副作用も...
【 スピードUP 】2020.10.10
【2024年】WordPressを使う前に知っておきたい5つのこと
WordPressを使い始めて後悔する人がじつはたくさんいます。後悔しないために、いま知っておきたい5つのこと
【 WordPress 】2020.10.07
Font Awesomeをやめると、なぜアクセスが増えるのか？
Font Awesomeの代わりにSVGを使って、サイトのパフォーマンスUP、アクセスUPをする秘けつを紹介します
【 スピードUP 】2020.10.03
ウェブサイトの『体感速度』UPの方法
スピードは一緒なのに、どうして速く感じるサイトと遅く感じるサイトがあるのでしょうか？
【 スピードUP 】2020.09.30
Googleアナリティクスの4つの数字
3分で完了。見るべき「4つの指標」を紹介します。
【 マーケティング 】2020.09.24
サイトの表示スピードを4倍UPする方法
ページ表示スピードを4倍UPさせる秘密テクニック「AMP」を紹介します
【 スピードUP 】2020.09.15
私がウェブデザインをする時に気をつけている5つのこと
プロ並みのウェブデザインが今すぐできる「5つのポイント」を紹介します。
【 ウェブデザイン 】2020.08.01
「見えない商品」とは？
目に見えず、手でもさわれない商品こそ、利益率の高いオススメの商材です
【 マーケティング 】2020.07.28
Shopifyを使う前に知っておきたかった3つのデメリット
日本でも導入が進むShopifyですが、導入前に知っておきたいShopifyの弱みや短所があります。
【 Shopify 】2020.07.03
月1,000円でShopifyを使う方法
最安プラン「Shopify Lite」の特徴から、導入のメリット、オススメの使い方、オススメできないケースまで、幅広く解説していきます。
【 Shopify 】2020.06.07
【比較】WixとShopify ― 成功するECショップを作れるのはどっち？
成功するECショップを作るにはWixとShopify、どちらを選ぶべきか解説します。
【 Shopify 】2020.06.06
Shop Payが何かわからない人へ
日本語の情報が少ない「Shop Pay」と「Shopifyペイメント」の違い、Shop Payの使い方を紹介します。
【 Shopify 】2020.06.05
【比較】WooCommerceとShopify ― 成功するECはどっち？
成功するECショップを作るにはWooCommerceとShopify、どちらを選ぶべきか解説します。
【 Shopify 】2020.05.30
なぜ多言語サイトの9割は失敗するのか？
日本と外国のウェブサイトには大きな違いがあります。多くの人が見落とすこのポイントを知らないと失敗します。
【 ローカライズ 】2020.03.26
【たった10分】ビギナーにもできるアクセスUPの秘密
アクセスが増えないウェブサイトには共通する問題点が一つあります。その解決方法を紹介します。
【 スピードUP 】2020.03.22
誰でもできるウェブサイトのスピードUP術
あるものの「質」と「サイズ」を変えるだけで、あなたのウェブサイトもすぐにサクサクと動きますよ。
【 スピードUP 】2020.03.19
画像がギザギザして不鮮明な理由
どれだけ拡大してもクリアで劣化なく画像やロゴを表示する方法を紹介します
【 スピードUP 】2020.03.12
WordPressの次のCMSとは？
WordPressに代表されるCMSは、近年出てきた新しいタイプのCMSに置き換えられています。知らないと損する「新しいCMS」を紹介します。
【 ヘッドレスCMS 】2020.03.05
静的サイトは本当にメリットばかり？
Jamstackの人気上昇でメリットにばかりフォーカスが当たる静的サイト。改めて静的サイトとは何か解説します。
【 Jamstack 】2020.02.27
サーバー料金をゼロにする方法
「レンタルサーバー料金」という無駄なお金を払っていませんか？ 実はこれ、0円にできます
【 その他 】2020.02.21
WordPressは時代おくれ？
すでに時代遅れとなっているWordPress。WordPressをやめて成功する人が増えています
【 WordPress 】2020.02.15
ワードプレスでホームページを作ろうとしていませんか？
ウェブサイトを制作する時、10人中9人はワードプレスをおすすめしてきます。でもちょっと待ってください。この記事を読んでから決めてください
【 WordPress 】2020.02.07
WordPressが遅くて、重くて困る
サクサクとストレスなく動かすにはどうすればいいのでしょうか？ 解決策を紹介します。
【 WordPress 】2020.02.01
「Webサイト」と「Webアプリケーション」は別物です
10人中8人がわからない「Webサイト」と「Webアプリケーション」の違い。わかりやすく解説します。
【 ビギナー向け 】2020.01.25
【2024年版】ウェブサイトのスピードを必ず上げる『2つの方法』
自分のホームページが遅くて困っている人はいませんか？ 誰でも今すぐできる解決方法を2つ紹介します。
【 スピードUP 】2020.01.19
遅いウェブサイトからユーザーが逃げていく理由
魅力的なコンテンツや商品をウェブサイトに載せても結果が出ないのはなぜ？ それは「あること」を知らないからです
【 スピードUP 】2020.01.11