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

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

pen-icon2022.08.06rewrite-icon2022.10.15

Profile Pic

この記事の筆者:三好アキ(エンジニア)


ウェブデザイナーから『エンジニア』『プログラマー』へ成長したい人、独学で進んでいきたい人を応援しています。 HTMLとCSSの知識だけでアプリ開発を始められる入門書を多数執筆中📕📗👇


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。



React、Next.js、TypeScriptなどのお役立ち情報や実践的コンテンツを、ビギナー向けにかみ砕いて配信中。登録はこちらから → 無料メルマガ登録

MERNスタック

今回出版した本では、MongoDB、Express、Node.js、Reactの頭文字を並べたMERNスタックを使って、バックエンドとフロントエンドを持ったフルスタックアプリを開発する方法を解説しています。

mern-book-1

【Amazonで見る】

これまで書いてきた本のように、本書もビギナー向けとなっているので、HTML/CSSの知識があればトライできる難易度です。

ranking

数ヶ月前に出版した「Next.jsでつくるフルスタックアプリ」を読まれた複数の方から、「Next.jsをつかわないフルスタックアプリの開発方法を知りたい」という声を多数いただいたため、今回Reactフレームワークは使わずにMERNスタックだけで開発する本を書きました。

next-book2-1"

【Amazonで見る】

本書(前編・後編)では以下のようなことをカバーしています。


• JavaScriptの基礎

• React、Node.jsの基礎

• データベース(MongoDB)

• useState / useEffect

• カスタムフック(React)

• ログイン

• トークン(JSON Web Token)

• CRUD操作

• 画像のアップロード(Cloudinary)

「MERNスタックでつくるフルスタックアプリ」目次

• 前編

第1章 基礎知識と開発ツールの準備

ウェブアプリケーションとは?

フロントエンドとバックエンド

CRUD操作

ReactとExpressを使う理由

ターミナルの使い方

第2章 バックエンド開発の準備

フォルダの準備とExpressのインストール

第3章 アイテム操作機能

アイテムの作成 その1

アイテムの作成 その2

アイテムの読み取り(アイテムをすべて)

アイテムの読み取り(アイテムをひとつ)

アイテムの修正

アイテムの削除

第4章 ユーザー登録とログイン機能

ユーザー登録機能

ログイン機能

ログイン状態の維持

ユーザーのログイン状態を判定する機能

誰がログインしているかを判定する機能

第5章 バックエンドのデプロイ

デプロイの準備

Gitのダウンロード

Herokuのアカウント作成とログイン

Heroku CLIのダウンロード

Herokuへのデプロイ

Herokuのスリープを防止する(補足)


• 後編

第6章 フロントエンド開発の準備とReactの使い方

アイテムデータの保存

create-react-appのインストール

コードのクリーンアップ

コードの書き方とスタイルの適用方法

第7章 ユーザー登録ページとログインページ

必要なフォルダとファイル

ユーザー登録ページ

ログインページ

複数の項目を含んだstateの書き方(補足)

第8章 アイテムページ

すべてのアイテムデータを読み取るページ

1つだけアイテムデータを読み取るページ

アイテムデータを作成するページ

アイテムデータを編集するページ

アイテムデータを削除するページ

ページの表示を制限する

スタイルの適用とコンポーネント

第9章 フロントエンドのデプロイ

バックエンドURLの修正

Netlifyの準備

_redirectsファイルの作成

buildプロセス

第10章 ブラッシュアップ

画像のアップロード

404ページ

タブ名を変える