新書をリリースしました。「MERNスタックでつくるフルスタックアプリ 前編・後編」
2022.08.06
2022.10.15
この記事の筆者：三好アキ（ウェブエンジニア）
「売り上げが伸びない」、「ウェブサイトから問い合わせが来ない」など、ウェブでお困りのお客さまの課題解決を、最新の知見を活かして行なっています。海外滞在が長く、日本語の情報が少ないJamstackやヘッドレスCMSなど最新のウェブテクノロジー、ウェブマーケティングに精通。事業について詳しくはこちらをご覧ください。
ウェブ制作の教本『はじめてつくるReactアプリ』など複数冊を執筆。本に関するインタビュー記事はこちら。
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ページ
タブ名を変える
ユーザーからの問い合わせを増やしたい、アイテムの購入率を高めたい等の「ビジネスのゴール」から逆算した効果的なウェブサイトを制作するmonotein。
monoteinについての案内資料の無料ダウンロードはこちら。
「これまでのホームページでは成果が出なかった」、「結果の出るウェブサイトが欲しい」、「JamstackやヘッドレスCMSなどの最新テクノロジーに移行したい」など、ウェブに関してお困りのことがありましたら、お気軽にご相談ください。
無料相談
