実装で学ぶフルスタックWeb開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン 電子書籍｜翔泳社の本
  1. ホーム >
  2. 電子書籍 >
  3. 実装で学ぶフルスタックWeb開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン

実装で学ぶフルスタックWeb開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン

著
著
著
著

形式：
電子書籍
発売日：
ISBN：
9784798179834
価格：
3,630円（本体3,300円＋税10%）
カテゴリ：
Webプログラミング
キーワード：
#Web・アプリ開発,#プログラミング,#ネットワーク・サーバ・セキュリティ,#開発手法
紙の書籍
電子書籍

購入はこちら

企業・教育機関での一括購入

Webシステムを「まるごと作る」フルスタック開発体験！
幅広く活躍できるワンランク上のエンジニアになるために

本書は、Webシステムの「フロントエンド」と「バックエンド」を、一冊でまるごと（＝フルスタックで）作り上げる書籍です。

サンプルアプリケーションの開発を通じて、
・フロントエンドとバックエンドをどのように連携させるか
・データ構造／マスタデータをどのように管理するか
・リポジトリを効率的に管理するにはどうするか
といったポイントを、手を動かしながらひとつひとつ学習できます。実装手段のフレームワークには「Next.js」と「Django」を選定しているため、モダンなWeb開発の全体像を把握することにも役立ちます。

分業化の進む現代的なWeb開発の現場で、あなたが自分の担当外の開発領域についてきちんと理解ができていないと感じるなら、本書は最適の学習書になるはずです。本書を読めば、フロントエンド／バックエンドそれぞれの動作原理や開発テクニックはもちろん、開発のさまざまな工程で効率化を図るためのノウハウを習得できます。

Webシステム開発の全体像を見渡し、現場で幅広く活躍できるフルスタックな視野と知識が身につく一冊です。

■対象読者
・業務経験2～3年目のフロントエンドエンジニア／バックエンドエンジニア ・担当領域外の開発技術や開発手法を知りたい人 ・モダンなWeb開発の全体像を把握したいマネージャー／リーダー層

■目次
【第I部　Webシステム開発の基本】
第1章　Webシステム開発の基本知識
第2章　React（Next.js）＋Django（Python）環境の構築
第3章　VSCode＋Dockerでの開発
第4章　フロントエンドとバックエンドのシステム連携の基本

【第II部　Webシステム開発の実践】
第5章　フロントエンドの実装
第6章　バックエンドの実装とフロントエンドとのシステム連携
第7章　非同期処理とバッチ処理の実装
第8章　データ構造・マスタデータの管理

【第III部　現場で役立つ周辺知識】
第9章　チームビルディング
第10章　設計
第11章　Gitによるリポジトリ管理

★読者特典ダウンロードPDF付き
特典A　アーキテクチャの選定
特典B　本番環境の構築
※PDFは翔泳社のサイト上からダウンロードできます。

※本電子書籍は同名出版物を底本として作成しました。記載内容は印刷出版当時のものです。
※印刷出版再現のため電子書籍としては不要な情報を含んでいる場合があります。
※印刷出版とは異なる表記・表現の場合があります。予めご了承ください。
※プレビューにてお手持ちの電子端末での表示状態をご確認の上、商品をお買い求めください。

（翔泳社）

画像01
画像02
画像03
目次の登録はありません。

付属データはこちら

会員特典はこちら

お問い合わせ

内容についてのお問い合わせは、正誤表、追加情報をご確認後に、お送りいただくようお願いいたします。

正誤表、追加情報に掲載されていない書籍内容へのお問い合わせや
その他書籍に関するお問い合わせは、書籍のお問い合わせフォームからお送りください。

利用許諾に関するお問い合わせ

本書の書影（表紙画像）をご利用になりたい場合は書影許諾申請フォームから申請をお願いいたします。
書影（表紙画像）以外のご利用については、こちらからお問い合わせください。

  • Next.jsのバージョンアップに伴う変更

    90ページ「エディターの基本操作」の項目の解説にて、

    -----
    画面左のエクスプローラーから「next.config.js」を選択してください。ツリー上でクリックすることでエディターが開きます。
    -----

    との記述があります。

    この部分について、Next.jsのバージョンによっては「next.config.js」ではなく「next.config.mjs」というファイルが作成されることがあります。その場合、ファイル名をnext.config.mjsからnext.config.jsに変更し、下記のコードをnext.config.jsに上書きするという対応を行ってください。

    -----
    /** @type {import('next').NextConfig} */
    const nextConfig = {}
    module.exports = {
      async rewrites() {
        return [
          {
            source: '/api/:path*',
            destination: 'http://host.docker.internal:8000/api/:path*/',
          },
        ]
      },
    };
    -----
この商品の「よくある質問」はありません。

ご購入いただいた書籍の種類を選択してください。

書籍の刷数を選択してください。

刷数は奥付（書籍の最終ページ）に記載されています。

現在表示されている正誤表の対象書籍

書籍の種類:

書籍の刷数:

本書に誤りまたは不十分な記述がありました。下記のとおり訂正し、お詫び申し上げます。

対象の書籍は正誤表がありません。

最終更新日:2024年06月19日
発生刷 ページ数 書籍改訂刷 電子書籍訂正 内容 登録日
1刷 005
1-2-1項　1行目		 2刷 済
誤 図1-2-1のような様々なソフトウェアや、
正 図1-2-4のような様々なソフトウェアや、
2024.02.14
1刷 006
上から10行目		 2刷 済
誤 イメージをつかむために、「テレビ」と「電波塔」、そして「テレビ局」を例に
正 イメージをつかむために、「テレビ」と「テレビ局」を例に
2024.02.14
1刷 006ほか
図1-2-1		 2刷 済
誤
正
備
考		 ・図中に「テレビ」と「テレビ局」の文言を追加しました。
・p.008の図1-2-3も同様の修正を行いました。
・p.011の図1-2-6も同様の修正を行いました。
2024.02.14
1刷 010
下から4行目		 2刷 済
誤 バックエンド層が「電波塔・テレビ局」なら
正 バックエンド層が「テレビ局」なら
2024.02.14
1刷 016
図1-3-3		 2刷 済
誤
正
備
考		 ・図中文言を修正しました。
・図のタイトルを修正しました。
2024.02.14
1刷 017
上から4行目		 2刷 済
誤 レンダリングやログファイルの自動生成
正 レンダリングし画面を返す
2024.02.14
1刷 022
図1-3-6直後の解説		 2刷 済
誤 例えば、以下のようにしてBookモデルのデータを～ （コード） この例ではBook.objects.all（）メソッドを使用して、
正 例えば、以下のようにしてCompanyモデルのデータを～ （コード） この例ではCompany.objects.all（）メソッドを使用して、
2024.02.14
1刷 024
「フロントエンドとバックエンドの連携方法」の解説の最終行		 3刷 済
誤 そこで用いられるのがReslful APIです。
正 そこで用いられるのがResｔful APIです。
2024.06.19
1刷 027
上から9行目		 2刷 済
誤 詳しくは第9章2節の「アーキテクチャの選定方法」の「フロントエンドアーキテクチャの比較」を参照してください。
正 詳しくは読者特典PDFの「特典A アーキテクチャの選定」を参照してください。
2024.02.14
1刷 028
「Django」の解説の最終行		 2刷 済
誤 最新のDjangoバージョンは、Django 3.2であり、Python 3.6以上をサポートしています。
正 最新のDjangoバージョンは、Django 5.0であり、Python 3.10以上をサポートしています。
備
考		 刊行時点の最新バージョンに修正しました。
2024.02.14
1刷 034
脚注		 3刷 済
誤 ※2-2　「WLSを使用してWindowsにLinuxをインストールする方法」
正 ※2-2　「WSLを使用してWindowsにLinuxをインストールする方法」
2024.06.19
1刷 041
下から2行目		 2刷 済
誤 先ほどのDockerのインストール手順のページで、「Linux カーネル更新パッケージのダウンロードとインストール」のリンクをクリックします。図2-2-4のページに移動するので、カーネル更新プログラムパッケージ～
正 先ほどのDockerのインストール手順のページで、“動作条件”の「3.Liinux カーネル更新パッケージ のダウンロードとインストール」を選択してください。図2-2-4のページに移動するので「Linux カーネル更新パッケージのダウンロードとインストール」のリンクをクリックします。カーネル更新プログラムパッケージ～
2024.02.14
1刷 041
「WSL 2（Windows上へのLinux）へのDockerのセットアップ」の解説１行目		 3刷 済
誤 WLSへのインストール手順も用意されています。
正 WSLへのインストール手順も用意されています。
2024.06.19
1刷 045ほか
図2-3-1		 2刷 済
誤
正
備
考		 ・図中の「VSCode」の位置を修正しました。
・p.049の図2-3-5も同様の修正を行いました。
・p.079の図3-2-1も同様の修正を行いました。
・p.099の図3-3-1も同様の修正を行いました。
2024.02.14
1刷 049
図2-3-4		 2刷 済
誤
正
2024.02.14
1刷 052
図2-3-10		 2刷 済
誤
正
備
考		 ・囲み枠の指す箇所に誤りがあったため修正しました。
2024.02.14
1刷 056
図2-3-16		 2刷 済
誤
正
2024.02.14
1刷 059
上から8行目		 3刷 済
誤 「sekila」がインストールされていることを確認してください。
正 「sakila」がインストールされていることを確認してください。
2024.06.19
1刷 074
図3-1-6		 2刷 済
誤
正
備
考		 ・「Uninstall」のボタンが「Install」の表記となっている画像に差し替えました
2024.02.14
1刷 076
下から4行目		 2刷 済
誤 ホームディレクトリはUbuntsに作成し、
正 ホームディレクトリはUbuntuに作成し、
2024.02.14
1刷 078
3-1節末尾の2行		 2刷 済
誤 　以降、「フロントエンドで作業」と説明がある場合は「//usr/local/src/dev/app/frontend」で行い、 「バックエンドで作業」という場合は「//usr/local/src/dev/app/backend 」で行うことになります。
正 　以降、「フロントエンドで作業」と説明がある場合は「/usr/local/src/dev/app/frontend」で行い、 「バックエンドで作業」という場合は「/usr/local/src/dev/app/backend 」で行うことになります。
備
考		 ・スラッシュが2つの箇所を1つに修正しました。
2024.02.14
1刷 080
「これは各ディレクトリに置かれている～」の段落末尾		 3刷 済
誤 これは各ディレクトリに置かれている「.devcontainer」ファイルで接続するコンテナを分けており、コマンドを実行したディレクトリのコンテナ設定ファイルに従って開発環境を接続するからです。
正 これは各ディレクトリに置かれている「.devcontainer」ファイルで接続するコンテナを分けており、コマンドを実行したディレクトリのコンテナ設定ファイルに従って開発環境を接続するからです。なお、「.devcontainer」ファイルは後述の手順で作成されます。現時点では作成不要です。
2024.06.19
1刷 082
上から1行目		 2刷 済
誤 次にコンテナで実装する言語を選定します。
正 次にコンテナで実装する開発環境を選定します。
2024.02.14
1刷 084
見出し番号		 2刷 済
誤 3-2-3
正 3-2-2
備
考		 これ以降、
3-2-4は3-2-3（P.089）
3-2-5は3-2-4（P.091）
となります。目次も同様です。
2023.12.07
1刷 105
図3-3-9		 3刷 済
誤
正
2024.06.19
1刷 107
上から6行目、下から5行目		 2刷 済
誤 上から6行目 ここには基本的なファイル（setting.py、asgi.py、wsgi.pyなど）が作成されます。 下から5行目 プロジェクトフォルダ「config」の下に「setting」というフォルダを作り、
正 上から6行目 ここには基本的なファイル（settings.py、asgi.py、wsgi.pyなど）が作成されます。 下から5行目 プロジェクトフォルダ「config」の下に「settings」というフォルダを作り、
備
考		 「setting」を「settings」に修正しました。
2024.02.14
1刷 108
図3-3-12と続く2行の解説		 2刷 済
誤 次に、echoコマンドを使い「config フォルダの下のsetting フォルダの中の development.py」ファイルを作成します。VSCodeのターミナルで次のコマンドを実行します。
正 次に、echoコマンドを使い「config フォルダの下のsettingsフォルダの中の development.py」ファイルを作成します。VSCodeのターミナルで次のコマンドを実行します。
備
考		 ・図中の「setting」の表記を「settings」に修正しました。
・図中の「bese.oy」の表記を「base.py」に修正しました。
・図中の矢印が「base.py」を指すように修正しました。
・図に続く解説中の「setting」を「settings」に修正しました。
2024.02.14
1刷 109
「ATOMIC_REQUESTS」の解説の上から5行目		 2刷 済
誤 そのため「TOMIC_REQUESTSをtrue」にする
正 そのため「ATOMIC_REQUESTSをtrue」にする
2024.02.15
1刷 213
5-6-3項の解説の上から6行目		 2刷 済
誤 もしインストールしていない場合は3-2-5項の手順を～
正 もしインストールしていない場合は3-2-4項の手順を～
2024.02.15
1刷 239
上から２行目		 3刷 済
誤 論理名 = models.フィールドの型(max_length=最大長, verbose_name=物理名)
正 物理名 = models.フィールドの型(max_length=最大長, verbose_name=論理名)
2024.06.19
1刷 241
図6-3-3、図6-3-4		 2刷 済
誤
正
備
考		 文字の見切れを修正しました。
2024.02.15
1刷 243
「次のような出力が得られます。」に続くコード		 2刷 済
誤
正
備
考		 ①の引き出し線を追加しました。
2024.02.15
1刷 245
下から2つ目の段落		 2刷 済
誤 後半2つの③migrateと④ setting 以降がDjango特有の指定です。～中略～また④のsettingは第8章で使い分けていきます。
正 後半2つの③migrateと④ settings以降がDjango特有の指定です。～中略～また④のsettingsは第8章で使い分けていきます。
備
考		 二か所の「setting」の表記を「settings」に修正しました。
2024.02.15
1刷 276
コード6-8-3		 3刷 済
誤 SIMPLE_JWT = {     'ACCESS_TOKEN_LIFETIME': datetime.timedelta(minutes=15),     'REFRESH_TOKEN_LIFETIME': datetime.timedelta(days=30),     'UPDATE_LAST_LOGIN': True, }
正 SIMPLE_JWT = {     'ACCESS_TOKEN_LIFETIME': datetime.timedelta(minutes=15),     'ROTATE_REFRESH_TOKENS': True,     'REFRESH_TOKEN_LIFETIME': datetime.timedelta(days=30),     'UPDATE_LAST_LOGIN': True, }
2024.06.19
1刷 276
ページ末尾の箇条書き		 3刷 済
誤 ・アクセストークンの有効期限：15分 ・リフレッシュトークンの有効期限：30日 ・最終ログイン：ログイン時に auth_user テーブルの last_login フィールドが更新する
正 ・アクセストークンの有効期限：15分 ・リフレッシュトークンの有効期限：30日 ・リフレッシュトークンのローテート：新しいリフレッシュ トークンを返す ・最終ログイン：ログイン時に auth_user テーブルの last_login フィールドが更新する
2024.06.19
1刷 282
コード6-8-7		 3刷 済
誤 （上から３行目） class CustomJWTAuthentication(JWTAuthentication):
正 （上から３行目） class AccessJWTAuthentication(JWTAuthentication): （末尾に下記のクラスを追加） class RefreshJWTAuthentication(JWTAuthentication):     def get_header(self, request):         refresh = request.COOKIES.get('refresh')         request.META['HTTP_REFRESH_TOKEN'] = refresh         return super().get_header(request)
2024.06.19
1刷 283
コード6-8-10の上から3行目		 3刷 済
誤 'api.inventory.authentication.CustomJWTAuthentication',
正 'api.inventory.authentication.AccessJWTAuthentication',
2024.06.19
1刷 285
コード6-8-11		 3刷 済
誤 （１行目） from rest_framework_simplejwt.serializers import TokenObtainPai rSerializer,TokenRefreshSerializer （５行目） authentication_classes = [JWTAuthentication]
正 （１行目の直後に行を追加） from rest_framework_simplejwt.serializers import TokenObtainPai rSerializer,TokenRefreshSerializer from api.inventory.authentication import RefreshJWTAuthentication （５行目） authentication_classes = [RefreshJWTAuthentication]
2024.06.19
1刷 295
コード6-9-9の下から13行目		 3刷 済
誤 axios_instance
正 return axios_instance
2024.06.19
1刷 314
7-1-5項の上から6行目		 2刷 済
誤 3-2-5項で実施したように、下記のコマンドをフロントエンドのVSCodeのターミナルで実行してください。
正 3-2-4項で実施したように、下記のコマンドをフロントエンドのVSCodeのターミナルで実行してください。
2024.02.15
1刷 329
上から3行目		 2刷 済
誤 環境設定ファイルに/config/setting/development.pyを使用する
正 環境設定ファイルに/config/settings/development.pyを使用する
2024.02.15
1刷 336
上から3行目		 2刷 済
誤 ① config/setting直下のbase.pyにモデル定義を含むアプリケーションを追加する
正 ① config/settings直下のbase.pyにモデル定義を含むアプリケーションを追加する
2024.02.15
1刷 435
下から1行目と図11-2-7の図タイトル		 2刷 済
誤 その中のSetting を選択してください（図11-2-7）。 図11-2-7の図タイトル：Setting
正 その中のSettingsを選択してください（図11-2-7）。 図11-2-7の図タイトル：Settings
2024.02.15
1刷 v
謝辞		 3刷 済
誤 鈴木智広氏
正 鈴木智大氏
2024.06.19