Logo
svg

【新刊リリース】動かして学ぶ!Next.js/React開発入門(翔泳社)

翔泳社より「動かして学ぶ!Next.js/React開発入門(三好アキ著)」を発売。Next.jsをはじめて使うビギナー向け。コードを自分の手でひとつひとつ書きながら進むので、飽きづらく、わかりやすい内容。バックエンド、フロントエンドを持ったフルスタックアプリケーションを開発します。

Next.js2024.9.18

svg

はじめてつくるバックエンドサーバー発展編【改訂版発売】

「はじめてつくるバックエンドサーバー発展編(Node.js & Express & MongoDB)」を2年ぶりに改訂。動かなくなっていたコードや、古くなっていた記述を2024年9月現在の最新の情報で書き改めました。ビギナー向けに、Node.js、Express、MongoDBを使ったアプリケーション開発をわかりやすく解説しています。

その他2024.9.12

svg

ターミナル(zsh)の名前とホスト名を変更する方法

ターミナルに表示される任意のもの、たとえば「tokyo@japan ~ %」に変更する方法。コマンドを2つ実行するだけ。1分で終わります。プログラミングのビギナーや初心者向け。好きな名前に変更可能。Macユーザー向け。

その他2024.8.9

svg

Next.jsのbuild時、特定のURLを除外する方法

Next.jsの開発時(development)には必要なものの、オンラインでの公開時(production)には隠しておきたいURLには、redirectsを使いましょう。next.config.jsに下記コードを貼り付ければ、すぐにリダイレクト機能を実現できます。

Next.js2024.7.28

svg

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

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 + TS徹底フォーカス:TypeScriptマスター with React』リリース

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

React2024.3.14

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

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

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

React2024.2.22

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

svg

当サイトをGatsby v3にアップデートしました

今月リリースされたGatsby v3にアップグレードして、サイト開発、そしてサイト表示スピードが大きくアップしました

Gatsby2021.03.25

svg

マークダウンとCSSを使ってKindle原稿をつくる方法

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

その他2021.02.18

svg

Gatsbyサイトにメルマガ登録フォームを設置する方法

Mailchimpを使えば、0円でメールアドレス登録フォームと自動返信機能を実装できます

Gatsby2021.02.17

svg

コールドメールとは? 成功のコツを実体験に基づいて解説

コールドメールの定義から送り方、成功させるコツまで、網羅的に紹介します。

マーケティング2021.01.31

svg

SPAの何が「シングル」なのか?

何枚もページのあるWebアプリケーションが、なぜ「シングル・ページ・アプリケーション(SPA)」と呼ばれるのでしょうか?

Jamstack2021.01.26

svg

アイソメトリックデザインが人気の理由

目にしない日はない「アイソメトリックデザイン」。なぜメッセージを効果的に伝えられるのか解説します。

デザイン2021.01.23

svg

なぜJamstackは「ホスティングサービス」を使うのか?

Jamstackで必ず耳にする「ホスティングサービス」。なぜ「レンタルサーバー」ではダメなのでしょうか?

Jamstack2020.12.18

svg

Jamstackを使っているのはだれ?

Jamstackの採用が多い業界、Jamstackで作られることの多いウェブサイトの種類などを紹介していきます。

Jamstack2020.12.15

svg

これだけで「静的サイトジェネレーター」のすべてがわかります

静的サイトジェネレーターの登場した背景、メリット/デメリット、buildプロセス、Next.jsなどをわかりやすく解説します

Jamstack2020.12.13

svg

Jamstackが解決できていないデメリット

たくさんの人がJamstackでサイト作りをしています。しかしJamstackに死角やデメリットはないのでしょうか?

Jamstack2020.12.10

svg

【比較】WordPress vs. Jamstack ― ウェブサイトはどっちで作るべき?

「WordPressからJamstackに乗りかえた」という人が増えてきました。その理由を探ってみましょう。

Jamstack2020.12.05

svg

Jamstackサイトが0円で公開できる理由とは?

Jamstackサイトが0円で公開できるのは○○○を使っているからです。

Jamstack2020.12.03

svg

Jamstackが現れるまでの歴史 ― LAMPからMEAN、そしてJamstackへ

Web開発のニュースタンダードとして定着しつつあるJamstackはどのようにして現れたのか? その発展の歴史を紹介します。

Jamstack2020.12.01

svg

これだけ読めばOK! Jamstackのすべてがわかります

高スピード、高セキュリティ、低コストのJamstack。その秘密をわかりやすく紹介します。

Jamstack2020.11.22

svg

Webサイトをアプリにする方法

ウェブサイトとアプリを別々に開発する必要はもうありません。「PWA」を使いましょう。

スピードUP2020.11.15

svg

Gatsbyの検索エンジン最適化(SEO)の全まとめ

GatsbyサイトのSEO対策をすべてまとめます。オフィシャルサイトにほとんど書かれていない構造化データや、Netlifyでホストしている場合に見落としがちなポイントも紹介します。

Gatsby2020.11.10

svg

ヘッドレスCMSを実際に導入した結果【その2】

ヘッドレスCMSは現場でどう使われているのか? 日本語での情報がまだまだ少ないヘッドレスCMSの活用事例を3つ紹介します。

ヘッドレスCMS2020.11.03

svg

ヘッドレスCMSを実際に導入した結果【その1】

ヘッドレスCMSは現場でどう使われているのか? 日本語での情報がまだまだ少ないヘッドレスCMSの活用事例を3つ紹介します。

ヘッドレスCMS2020.10.28

svg

2024年にヘッドレスCMSが最適な理由

日本語の情報がまだまだ少ない「ヘッドレスCMS」のベストな使い道を紹介します。

ヘッドレスCMS2020.10.23

svg

【2024年】CMSを選ぶときに知っておきたいこと ― ヘッドレスCMS

WordPressのような「従来型CMS」を選ぶメリットは2022年のいま無くなっています。なぜでしょう?

ヘッドレスCMS2020.10.20

svg

ウェブサイトのスピードUP前に知りたかったこと

ネットで成果を出すために表示スピードUPは不可欠。しかしマイナスの副作用も...

スピードUP2020.10.10

svg

【2024年】WordPressを使う前に知っておきたい5つのこと

WordPressを使い始めて後悔する人がじつはたくさんいます。後悔しないために、いま知っておきたい5つのこと

WordPress2020.10.07

svg

Font Awesomeをやめると、なぜアクセスが増えるのか?

Font Awesomeの代わりにSVGを使って、サイトのパフォーマンスUP、アクセスUPをする秘けつを紹介します

スピードUP2020.10.03

svg

ウェブサイトの『体感速度』UPの方法

スピードは一緒なのに、どうして速く感じるサイトと遅く感じるサイトがあるのでしょうか?

スピードUP2020.09.30

svg

Googleアナリティクスの4つの数字

3分で完了。見るべき「4つの指標」を紹介します。

マーケティング2020.09.24

svg

サイトの表示スピードを4倍UPする方法

ページ表示スピードを4倍UPさせる秘密テクニック「AMP」を紹介します

スピードUP2020.09.15

svg

私がウェブデザインをする時に気をつけている5つのこと

プロ並みのウェブデザインが今すぐできる「5つのポイント」を紹介します。

ウェブデザイン2020.08.01

svg

「見えない商品」とは?

目に見えず、手でもさわれない商品こそ、利益率の高いオススメの商材です

マーケティング2020.07.28

svg

Shopifyを使う前に知っておきたかった3つのデメリット

日本でも導入が進むShopifyですが、導入前に知っておきたいShopifyの弱みや短所があります。

Shopify2020.07.03

svg

月1,000円でShopifyを使う方法

最安プラン「Shopify Lite」の特徴から、導入のメリット、オススメの使い方、オススメできないケースまで、幅広く解説していきます。

Shopify2020.06.07

svg

【比較】WixとShopify ― 成功するECショップを作れるのはどっち?

成功するECショップを作るにはWixとShopify、どちらを選ぶべきか解説します。

Shopify2020.06.06

svg

Shop Payが何かわからない人へ

日本語の情報が少ない「Shop Pay」と「Shopifyペイメント」の違い、Shop Payの使い方を紹介します。

Shopify2020.06.05

svg

【比較】WooCommerceとShopify ― 成功するECはどっち?

成功するECショップを作るにはWooCommerceとShopify、どちらを選ぶべきか解説します。

Shopify2020.05.30

svg

なぜ多言語サイトの9割は失敗するのか?

日本と外国のウェブサイトには大きな違いがあります。多くの人が見落とすこのポイントを知らないと失敗します。

ローカライズ2020.03.26

svg

【たった10分】ビギナーにもできるアクセスUPの秘密

アクセスが増えないウェブサイトには共通する問題点が一つあります。その解決方法を紹介します。

スピードUP2020.03.22

svg

誰でもできるウェブサイトのスピードUP術

あるものの「質」と「サイズ」を変えるだけで、あなたのウェブサイトもすぐにサクサクと動きますよ。

スピードUP2020.03.19

svg

画像がギザギザして不鮮明な理由

どれだけ拡大してもクリアで劣化なく画像やロゴを表示する方法を紹介します

スピードUP2020.03.12

svg

WordPressの次のCMSとは?

WordPressに代表されるCMSは、近年出てきた新しいタイプのCMSに置き換えられています。知らないと損する「新しいCMS」を紹介します。

ヘッドレスCMS2020.03.05

svg

静的サイトは本当にメリットばかり?

Jamstackの人気上昇でメリットにばかりフォーカスが当たる静的サイト。改めて静的サイトとは何か解説します。

Jamstack2020.02.27

svg

サーバー料金をゼロにする方法

「レンタルサーバー料金」という無駄なお金を払っていませんか? 実はこれ、0円にできます

その他2020.02.21

svg

WordPressは時代おくれ?

すでに時代遅れとなっているWordPress。WordPressをやめて成功する人が増えています

WordPress2020.02.15

svg

ワードプレスでホームページを作ろうとしていませんか?

ウェブサイトを制作する時、10人中9人はワードプレスをおすすめしてきます。でもちょっと待ってください。この記事を読んでから決めてください

WordPress2020.02.07

svg

WordPressが遅くて、重くて困る

サクサクとストレスなく動かすにはどうすればいいのでしょうか? 解決策を紹介します。

WordPress2020.02.01

svg

「Webサイト」と「Webアプリケーション」は別物です

10人中8人がわからない「Webサイト」と「Webアプリケーション」の違い。わかりやすく解説します。

ビギナー向け2020.01.25

svg

【2024年版】ウェブサイトのスピードを必ず上げる『2つの方法』

自分のホームページが遅くて困っている人はいませんか? 誰でも今すぐできる解決方法を2つ紹介します。

スピードUP2020.01.19

svg

遅いウェブサイトからユーザーが逃げていく理由

魅力的なコンテンツや商品をウェブサイトに載せても結果が出ないのはなぜ? それは「あること」を知らないからです

スピードUP2020.01.11