新書をリリースしました。「MERNスタックでつくるフルスタックアプリ 前編・後編」
2022.08.06
2022.10.15
この記事は約3分で読めます
この記事の筆者：三好アキ
🔹 専門用語なしでプログラミングを教えるメソッドに定評があり、1200人以上のビギナーを、最新のフロントエンド開発入門に成功させる。Amazonベストセラー1位を複数回獲得している『はじめてつくるReactアプリ with TypeScript』、『動かして学ぶ！Next.js/React開発入門（翔泳社／2024年）』著者。
Amazon著者ページはこちら → amazon.co.jp/stores/author/B099Z51QF2
🔹 UdemyでReact・JavaScript・Node.jsの入門動画を無料で公開中 → 無料の入門動画
MERNスタック
今回出版した本では、MongoDB、Express、Node.js、Reactの頭文字を並べたMERNスタックを使って、バックエンドとフロントエンドを持ったフルスタックアプリを開発する方法を解説しています。
これまで書いてきた本のように、本書もビギナー向けとなっているので、HTML/CSSの知識があればトライできる難易度です。
数ヶ月前に出版した「Next.jsでつくるフルスタックアプリ」を読まれた複数の方から、「Next.jsをつかわないフルスタックアプリの開発方法を知りたい」という声を多数いただいたため、今回Reactフレームワークは使わずにMERNスタックだけで開発する本を書きました。
本書（前編・後編）では以下のようなことをカバーしています。
• 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ページ
タブ名を変える
メルマガ配信中
（from 三好アキ／エンジニア）
React、Next.js、TypeScriptなど最新のウェブ開発のお役立ち情報を、ビギナー向けにかみ砕いて無料配信中。
（*配信登録の解除はいつでも可能です）
関連記事
