Logo
svg

📌 新刊書『React + TS徹底フォーカス:TypeScriptマスター with React』リリース

「TypeScriptをReactで使う」という点にフォーカスした学習書。TypeScriptに苦手意識を持っていても、自信をもってReact + TypeScript開発を進められるようになります。

React2024.3.14

svg

📌 新刊書『React全部入り:Reactマスター Zero To Hero』リリース

Reactのほぼ全範囲をカバーしたビギナー向け教本をリリース

React2024.2.22

svg

Next.jsをVercel以外で公開する方法(Git不要/Appルータ使用)

GitもVercelも使わずにNext.jsを公開する方法です。1分で終わる簡単な作業で、Next.jsをNetlifyに公開します。Appルータ使用。export時にはNext.jsのImageコンポーネントの最適化が行われないので、画像最適化をオフにするコードをnext.config.mjsに追加しましょう

Next.js2024.6.13

svg

腐る本を書きつづける空虚感 ― 賞味期限の長い本と、賞味期限の短い本

技術書は「時間が経つと読めなくなってしまう本」の典型です。本の寿命を伸ばし、そしてできるだけ長く読んでもらうためにすべきこと、それは「情報」「知識」だけでなく「感情」についても書くことです。

その他2024.5.19

svg

私たちが入門書で挫折するわけ

2024年現在、create-react-appの使用はもはや推奨されていません。React + Viteを使うのがデフォルトです。本記事ではそのReact + Viteの使い方をビギナー向けに紹介します。

その他2024.5.2

svg

【Vite + React】3分で使えるようになるVite + React入門(初心者向け)

2024年現在、create-react-appの使用はもはや推奨されていません。React + Viteを使うのがデフォルトです。本記事ではそのReact + Viteの使い方をビギナー向けに紹介します。

React2024.4.25

svg

『はじめてつくるReactアプリ(with TypeScript)』第2版をリリース/Vite使用

人気の『はじめてつくるReactアプリ』(三好アキ著)の第2版を発売。React + Viteを使用。2024年の最新React開発手法を学べるビギナー向け教本。専門用語なしでReact + TypeScriptに入門。

React2024.4.12

svg

ドラゴン桜とプログラミング

その他2024.4.11

svg

【Next.js】Reactサーバーコンポーネントのメリットを実際に確認してみました

「バンドルサイズ削減」というサーバーコンポーネントのメリットを実際に確認。4メガバイト削減されました

Next.js2024.3.23

svg

【React + TypeScript】イベントの型の記法には3種類あります

インライン記法、パラメーターに書く記法、function名の横に書く記法の3つをサクッと紹介

React2024.3.19

svg

【Next.js Appフォルダ】メタデータをクライアント・コンポーネントに設定する方法

設定方法は2つあります。特の1つ目の方法は一瞬で終わります。

Next.js2024.3.18

svg

TypeScriptジェネリクスをサクッと理解【その4 複数のジェネリクスをつかう】

苦手に感じている人が多いジェネリクス。連載最終回の本記事では、複数のジェネリクスの使い方をマスターします。

React2024.3.16

svg

TypeScriptジェネリクスをサクッと理解【その3 型定義とfunction両方に対して使うジェネリクス】

苦手に感じている人が多いジェネリクス。連載3回目の本記事では、 型定義とfunction両方に対してつかうジェネリクスをマスターします。

React2024.3.16

svg

TypeScriptジェネリクスをサクッと理解【その2 functionに対して使うジェネリクス】

苦手に感じている人が多いジェネリクス。連載2回目の本記事では、 function対してつかうジェネリクスをマスターします。

React2024.3.16

svg

TypeScriptジェネリクスをサクッと理解【その1 型定義に対して使うジェネリクス】

苦手に感じている人が多いジェネリクス。連載1回目の本記事では、 型定義に対してつかうジェネリクスをマスターします。

React2024.3.16

svg

【Reactビギナー向け】default exportとexportの種類をすべて解説

なんとなく書いているdefault exportと、defaultなしのexportの違いをサクッと紹介します。

React2024.3.15

svg

Reactをむずかしく感じる理由と、その解決法【その3】

Reactビギナーがつまづく大きな壁のひとつが「イベント」の記法です。わかりやすく紹介します。

React2024.3.13

svg

Reactをむずかしく感じる理由と、その解決法【その2】

Reactビギナーがつまづく最大の壁が「JavaScriptのfunction」の記法です。時短で解決策を紹介します。

React2024.3.13

svg

Reactを難しく感じる理由と、その解決法【その1】

Reactビギナーがつまづく最大の原因はJavaScriptの理解不足。「JavaScriptの具体的にどの知識が必要か?」という点を説明します。

React2024.3.13

svg

Reactの「状態」という言葉の意味(state)

「状態を管理する」「更新する」などのわかりにくい言葉の説明をします

React2024.3.12

svg

「プログラミングとは何か?」に一言で答えると……

プログラミング言語の本質的な役割は「データを操作すること」です

その他2024.3.12

svg

Server ActionsとAPI、どっちを使う?【Next.js Appフォルダ】

Next.jsのバックエンド開発で悩むこと:「APIを作るか、それともServer Actionsを使うか?」

Next.js2024.2.28

svg

「これ一冊だけでOK!」という入門書が全然OKではない理由

私たちがつい分厚い入門書を選んでしまう理由と、その対策について紹介

その他2024.1.7

svg

【今すぐできる】JavaScriptがむずかしくてReact/Vueに進めない時の対処法

JavaScriptで詰まってしまった人に向けて、React/Vueを始める方法を紹介

ビギナー向け2023.12.27

svg

【0円・1分で完了】HTMLとCSSでつくったウェブサイトを無料で今すぐ公開する方法

0円、そして1分でウェブサイトを公開する方法を紹介

その他2023.12.26

svg

Next.jsだけでお問い合わせフォームを作る方法を解説

Next.jsをフロントエンドとバックエンドに使ってお問い合わせ機能を作ります。AppフォルダとPagesフォルダ、両方のコードを紹介

Next.js2023.12.23

svg

【実例で解説】「フロントエンド」と「バックエンド」の違いを実例を使って解説

ウェブの勉強をしていると、必ず出てくる「フロントエンド」「バックエンド」。それぞれが何をしているのか実例で紹介

その他2023.12.21

svg

ウェブサイトとウェブアプリの違い

 違いは一方通行と双方向にあります

その他2023.12.19

svg

【2分でわかる】APIとは?

わかりにくい『API』を、実例を使って解説します

その他2023.12.19

svg

英語はプログラミング学習に役立つ?

英語をマスターした後でプログラミングの勉強を始めた私の体験を紹介します。

その他2023.12.19

svg

Next.js Appフォルダでの変更点を20個、時短で紹介

Next.jsバージョン13でデフォルトになったAppフォルダの特徴や知っておくと便利なことを20個以上、時短で紹介します。

Next.js2023.12.12

svg

新書リリース。「Next.jsでつくるフルスタックアプリ 前編・後編」

最新のNext.js(Appフォルダ)を使ってフルスタックアプリを開発する新書を出版します

Next.js2023.11.28

svg

Next.js開発中、画面の表示をモバイル端末で確認する方法

同じWiFiネットワークに接続している場合、開発画面を複数端末で簡単に共有できます

Next.js2023.06.08

svg

Next.js 13のコード変更点(パス取得/リダイレクト/リクエストbodyの解析など)

Next.jsバージョン12から13へのマイグレーション中に書き換えた変更点を紹介します。

Next.js2023.05.18

svg

Next.jsビギナー向け入門書(v13/Appフォルダ)最新版を発売

専門用語なし。2時間でストレスなく終えられる優しいNext.js入門書リリース

Next.js2023.05.12

svg

電子書籍を紙の本で読めるようになりました

電子書籍のペーパーバック版(紙の書籍)の発売を開始しました。サイズはA5、フルカラー印刷です。

その他2023.04.29

svg

Next.jsバージョン13の変更点を時短で解説

v13で導入されたappフォルダやgenerateStaticParams。要点だけを手短にまとめて紹介します。

Next.js2023.04.19

svg

GatsbyではなくNext.jsを選ぶ理由

GatsbyよりもNext.jsを選ぶようになった理由や、next/imageの使いにくさに関して思うところを書きます。

Next.js2022.12.23

svg

Next.jsビギナー向け入門書、最新版を発売【はじめてつくるNext.jsサイト】

Next.jsとGatsbyの最新バージョンに準拠したビギナー向け入門書をリリースしました

Next.js2022.12.21

svg

create-react-app起動時のブラウザ自動オープンをオフにする方法

create-react-app起動時、ブラウザが勝手に開く機能をオフにする方法を紹介します。

その他2022.12.9

svg

エラーの見つけ方と対処方法

プログラミングの勉強中にエラーが発生した時の対処方法を紹介します。

その他2022.11.27

svg

Next.jsサーバーでCORS問題が起きる時の解決方法

Next.jsのサーバーとは異なるURLからリクエストをした時に起きるCORSを解決するコードを紹介します。

Next.js2022.11.14

svg

新書をリリースしました。「MERNスタックでつくるフルスタックアプリ 前編・後編」

MERNスタックを使ってメルカリのようなフリマアプリを開発する新書を出版しました

その他2022.08.06

svg

執筆作業の後に気をつけていること

本を書いた後の読み直し作業(校訂)で気をつけているポイントを紹介します。

その他2022.07.18

svg

新しい本をリリースしました【はじめてつくるバックエンドサーバー発展編】

Node.js、Express、MongoDBを使ったアプリ開発を解説するビギナー向け教本を販売開始しました。

その他2022.04.07

svg

スタートアップ企業のウェブサイトの特徴

スタートアップやベンチャー企業のウェブサイトにWordPressは少なく、別の特徴があります。

Jamstack2022.02.10

svg

【誰でもできる】無料・15分でお問い合わせページを作る方法

費用0円、作業時間15分でお問い合わせページを作ります。パソコン苦手のビギナーでも簡単にできる方法です。

ビギナー向け2022.01.13

svg

NetlifyのBuildを消費しない方法

ローカル環境でBuildすることで、より速く、より安価にサイト運用ができます。

Gatsby2021.12.29

svg

【ビギナー向け】Jamstackサイトの簡単な作り方

GatsbyとContentfulを使って、CMS付きのJamstackサイトを作り方を紹介します。

Jamstack2021.12.27

svg

Next.jsにページネーションをNPMパッケージなしで追加する方法

NPMパッケージは使わずにNext.jsにページネーションを追加します。

Next.js2021.12.25

svg

Next.jsのブログに前後記事へのリンクを追加する方法

NPMパッケージは使わずに、Next.jsに前後の記事へ移動するリンクを追加します。

Next.js2021.12.25

svg

【2024年版】Reactの勉強をHTML/CSSの知識だけで始める方法

HTMLとCSSの知識だけでReactを使う方法を紹介

ビギナー向け2021.12.09

svg

静的サイトジェネレーターのサイト一覧(Next.js / Nuxt / Gatsby)

Next.js、Gatsby、Nuxtを使ったウェブサイトとアプリをリストアップします。海外のJamstackサイト開発会社も載せます。

Jamstack2021.12.08

svg

Jamstack完全ガイド【Jamstackのすべて】

Jamstackのメリット、デメリットからテクノロジー、WordPressとの連携まで、Jamstackのすべてを解説します。

Jamstack2021.12.06

svg

ReactでNetlifyのFormsが認識されない原因と解決方法

NetlifyのFormsは簡単なミスの修正ですぐに動くようになります。

Gatsby2021.12.02

svg

Gatsbyに前後の記事へのリンクを追加する方法

本記事では最初にGatsbyサイトにブログ機能を追加し、次にNPMパッケージなどは使わずに前後の記事へ移動する機能を実装します。

Gatsby2021.11.28

svg

Gatsbyブログのページネーションの作り方

本記事では最初にGatsbyサイトにブログ機能を追加し、次にNPMパッケージなどは使わずにページネーションを実装していきます。

Gatsby2021.11.27

svg

Figmaのグラデーションがブラウザで表示されない時の直し方

グラデーションを含んだSVG画像が正しく表示されない時の原因と対処法を紹介します。

その他2021.11.27

svg

HTMLとCSSを勉強したあと、何をすればいいのかわからない・・・

HTML → CSSと順調に進んできたものの、そこでつまづいてしまう人は多くいます。その理由と対処法を紹介します。

ビギナー向け2021.11.26

svg

Gatsby v4にアップデートしました

当サイトをGatsby v4にアップデートしました。v4ではサーバーサイドレンダリングなども利用可能になっています。

Gatsby2021.11.20

svg

出版した本のインタビューを受けました。

私の書いた「はじめてつくるReactアプリ」執筆のきっかけとなった挫折経験や苦労などを話しています。

私のこと2021.10.06

svg

サーバー、データベース、バックエンド、フロントエンドの違い

ウェブ開発でよく聞く用語、サーバー、データベース、フロントエンド、バックエンド、APIなどの違いを分かりやすく解説します。

ビギナー向け2021.10.04

svg

タテ書きKindle原稿をマークダウンとCSSでつくる方法

このページは現在最新情報に更新作業中です。

その他2021.08.20

svg

【作って比較】「ヘッドレスWordPress」と「普通のWordPress」

同一のウェブサイトを、「ヘッドレスWordPress」と「普通のWordPress」で作って、それぞれのメリット、デメリットを紹介します。

WordPress2021.07.26

svg

Next.jsにマークダウンのブログ機能を追加する方法

Next.jsでブログ機能を実装するコードを紹介します。getStaticPaths()とgetStaticProps()を使います。

Next.js2021.06.26

svg

コアウェブバイタルを上げればランキングも上昇するのか?

2021年6月から導入の始まった「コアウェブバイタル」。コアウェブバイタルの解説とその改善方法、検索ランキングやSEOとの関係を説明します

スピードUP2021.06.21

svg

プログレスバーの作り方(React / Gatsby / Next.js)

ページの長さによって動的に変わるプログレスバーの簡単な作り方を紹介します。

Gatsby2021.05.11

svg

軽量で高画質、AVIF(.avif)画像の作り方と使い方

最新の画像フォーマットAVIF(.avif)のメリット、作り方、使い方、そしてWebPとの違いを解説します。

スピードUP2021.04.30