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

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

pen-icon2022.08.06rewrite-icon2022.10.15

Profile Pic

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


「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。


ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。



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ページ

タブ名を変える

ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein

monoteinについての案内資料の無料ダウンロードはこちら。

「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。

無料相談