実装で学ぶフルスタックWeb開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン(株式会社オープントーン 佐藤 大輔 伊東 直喜 上野 啓二)|翔泳社の本
  1. ホーム >
  2. 書籍 >
  3. 実装で学ぶフルスタックWeb開発 エンジニアの視野と知識を広げる「一気通貫」型ハンズオン

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





形式:
書籍
発売日:
ISBN:
9784798179339
定価:
3,630(本体3,300円+税10%)
仕様:
B5変・480ページ
カテゴリ:
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

■目次
【第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は翔泳社サイトからダウンロードできます。

付属データはこちら

会員特典はこちら

お問い合わせ

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

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

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

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

  • 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日
ページ数 内容 発生刷 書籍修正刷 電子書籍訂正 登録日
005
1-2-1項 1行目
図1-2-1のような様々なソフトウェアや、
図1-2-4のような様々なソフトウェアや、
1刷 2刷 2024.02.14
006
上から10行目
イメージをつかむために、「テレビ」と「電波塔」、そして「テレビ局」を例に
イメージをつかむために、「テレビ」と「テレビ局」を例に
1刷 2刷 2024.02.14
006ほか
図1-2-1

・図中に「テレビ」と「テレビ局」の文言を追加しました。
・p.008の図1-2-3も同様の修正を行いました。
・p.011の図1-2-6も同様の修正を行いました。
1刷 2刷 2024.02.14
010
下から4行目
バックエンド層が「電波塔・テレビ局」なら
バックエンド層が「テレビ局」なら
1刷 2刷 2024.02.14
016
図1-3-3

・図中文言を修正しました。
・図のタイトルを修正しました。
1刷 2刷 2024.02.14
017
上から4行目
レンダリングやログファイルの自動生成
レンダリングし画面を返す
1刷 2刷 2024.02.14
022
図1-3-6直後の解説
例えば、以下のようにしてBookモデルのデータを~ (コード) この例ではBook.objects.all()メソッドを使用して、
例えば、以下のようにしてCompanyモデルのデータを~ (コード) この例ではCompany.objects.all()メソッドを使用して、
1刷 2刷 2024.02.14
024
「フロントエンドとバックエンドの連携方法」の解説の最終行
そこで用いられるのがReslful APIです。
そこで用いられるのがRestful APIです。
1刷 3刷 2024.06.19
027
上から9行目
詳しくは第9章2節の「アーキテクチャの選定方法」の「フロントエンドアーキテクチャの比較」を参照してください。
詳しくは読者特典PDFの「特典A アーキテクチャの選定」を参照してください。
1刷 2刷 2024.02.14
028
「Django」の解説の最終行
最新のDjangoバージョンは、Django 3.2であり、Python 3.6以上をサポートしています。
最新のDjangoバージョンは、Django 5.0であり、Python 3.10以上をサポートしています。

刊行時点の最新バージョンに修正しました。
1刷 2刷 2024.02.14
034
脚注
※2-2 「WLSを使用してWindowsにLinuxをインストールする方法」
※2-2 「WSLを使用してWindowsにLinuxをインストールする方法」
1刷 3刷 2024.06.19
041
下から2行目
先ほどのDockerのインストール手順のページで、「Linux カーネル更新パッケージのダウンロードとインストール」のリンクをクリックします。図2-2-4のページに移動するので、カーネル更新プログラムパッケージ~
先ほどのDockerのインストール手順のページで、“動作条件”の「3.Liinux カーネル更新パッケージ のダウンロードとインストール」を選択してください。図2-2-4のページに移動するので「Linux カーネル更新パッケージのダウンロードとインストール」のリンクをクリックします。カーネル更新プログラムパッケージ~
1刷 2刷 2024.02.14
041
「WSL 2(Windows上へのLinux)へのDockerのセットアップ」の解説1行目
WLSへのインストール手順も用意されています。
WSLへのインストール手順も用意されています。
1刷 3刷 2024.06.19
045ほか
図2-3-1

・図中の「VSCode」の位置を修正しました。
・p.049の図2-3-5も同様の修正を行いました。
・p.079の図3-2-1も同様の修正を行いました。
・p.099の図3-3-1も同様の修正を行いました。
1刷 2刷 2024.02.14
049
図2-3-4
1刷 2刷 2024.02.14
052
図2-3-10

・囲み枠の指す箇所に誤りがあったため修正しました。
1刷 2刷 2024.02.14
056
図2-3-16
1刷 2刷 2024.02.14
059
上から8行目
「sekila」がインストールされていることを確認してください。
「sakila」がインストールされていることを確認してください。
1刷 3刷 2024.06.19
074
図3-1-6

・「Uninstall」のボタンが「Install」の表記となっている画像に差し替えました
1刷 2刷 2024.02.14
076
下から4行目
ホームディレクトリはUbuntsに作成し、
ホームディレクトリはUbuntuに作成し、
1刷 2刷 2024.02.14
078
3-1節末尾の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つに修正しました。
1刷 2刷 2024.02.14
080
「これは各ディレクトリに置かれている~」の段落末尾
これは各ディレクトリに置かれている「.devcontainer」ファイルで接続するコンテナを分けており、コマンドを実行したディレクトリのコンテナ設定ファイルに従って開発環境を接続するからです。
これは各ディレクトリに置かれている「.devcontainer」ファイルで接続するコンテナを分けており、コマンドを実行したディレクトリのコンテナ設定ファイルに従って開発環境を接続するからです。なお、「.devcontainer」ファイルは後述の手順で作成されます。現時点では作成不要です。
1刷 3刷 2024.06.19
082
上から1行目
次にコンテナで実装する言語を選定します。
次にコンテナで実装する開発環境を選定します。
1刷 2刷 2024.02.14
084
見出し番号
3-2-3
3-2-2

これ以降、
3-2-4は3-2-3(P.089)
3-2-5は3-2-4(P.091)
となります。目次も同様です。
1刷 2刷 2023.12.07
105
図3-3-9
1刷 3刷 2024.06.19
107
上から6行目、下から5行目
上から6行目 ここには基本的なファイル(setting.py、asgi.py、wsgi.pyなど)が作成されます。 下から5行目 プロジェクトフォルダ「config」の下に「setting」というフォルダを作り、
上から6行目 ここには基本的なファイル(settings.py、asgi.py、wsgi.pyなど)が作成されます。 下から5行目 プロジェクトフォルダ「config」の下に「settings」というフォルダを作り、

「setting」を「settings」に修正しました。
1刷 2刷 2024.02.14
108
図3-3-12と続く2行の解説
次に、echoコマンドを使い「config フォルダの下のsetting フォルダの中の development.py」ファイルを作成します。VSCodeのターミナルで次のコマンドを実行します。
次に、echoコマンドを使い「config フォルダの下のsettingsフォルダの中の development.py」ファイルを作成します。VSCodeのターミナルで次のコマンドを実行します。

・図中の「setting」の表記を「settings」に修正しました。
・図中の「bese.oy」の表記を「base.py」に修正しました。
・図中の矢印が「base.py」を指すように修正しました。
・図に続く解説中の「setting」を「settings」に修正しました。
1刷 2刷 2024.02.14
109
「ATOMIC_REQUESTS」の解説の上から5行目
そのため「TOMIC_REQUESTSをtrue」にする
そのため「ATOMIC_REQUESTSをtrue」にする
1刷 2刷 2024.02.15
213
5-6-3項の解説の上から6行目
もしインストールしていない場合は3-2-5項の手順を~
もしインストールしていない場合は3-2-4項の手順を~
1刷 2刷 2024.02.15
239
上から2行目
論理名 = models.フィールドの型(max_length=最大長, verbose_name=物理名)
物理名 = models.フィールドの型(max_length=最大長, verbose_name=論理名)
1刷 3刷 2024.06.19
241
図6-3-3、図6-3-4

文字の見切れを修正しました。
1刷 2刷 2024.02.15
243
「次のような出力が得られます。」に続くコード

①の引き出し線を追加しました。
1刷 2刷 2024.02.15
245
下から2つ目の段落
後半2つの③migrateと④ setting 以降がDjango特有の指定です。~中略~また④のsettingは第8章で使い分けていきます。
後半2つの③migrateと④ settings以降がDjango特有の指定です。~中略~また④のsettingsは第8章で使い分けていきます。

二か所の「setting」の表記を「settings」に修正しました。
1刷 2刷 2024.02.15
276
コード6-8-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, }
1刷 3刷 2024.06.19
276
ページ末尾の箇条書き
・アクセストークンの有効期限:15分 ・リフレッシュトークンの有効期限:30日 ・最終ログイン:ログイン時に auth_user テーブルの last_login フィールドが更新する
・アクセストークンの有効期限:15分 ・リフレッシュトークンの有効期限:30日 ・リフレッシュトークンのローテート:新しいリフレッシュ トークンを返す ・最終ログイン:ログイン時に auth_user テーブルの last_login フィールドが更新する
1刷 3刷 2024.06.19
282
コード6-8-7
(上から3行目) class CustomJWTAuthentication(JWTAuthentication):
(上から3行目) 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)
1刷 3刷 2024.06.19
283
コード6-8-10の上から3行目
'api.inventory.authentication.CustomJWTAuthentication',
'api.inventory.authentication.AccessJWTAuthentication',
1刷 3刷 2024.06.19
285
コード6-8-11
(1行目) from rest_framework_simplejwt.serializers import TokenObtainPai rSerializer,TokenRefreshSerializer (5行目) authentication_classes = [JWTAuthentication]
(1行目の直後に行を追加) from rest_framework_simplejwt.serializers import TokenObtainPai rSerializer,TokenRefreshSerializer from api.inventory.authentication import RefreshJWTAuthentication (5行目) authentication_classes = [RefreshJWTAuthentication]
1刷 3刷 2024.06.19
295
コード6-9-9の下から13行目
axios_instance
return axios_instance
1刷 3刷 2024.06.19
314
7-1-5項の上から6行目
3-2-5項で実施したように、下記のコマンドをフロントエンドのVSCodeのターミナルで実行してください。
3-2-4項で実施したように、下記のコマンドをフロントエンドのVSCodeのターミナルで実行してください。
1刷 2刷 2024.02.15
329
上から3行目
環境設定ファイルに/config/setting/development.pyを使用する
環境設定ファイルに/config/settings/development.pyを使用する
1刷 2刷 2024.02.15
336
上から3行目
① config/setting直下のbase.pyにモデル定義を含むアプリケーションを追加する
① config/settings直下のbase.pyにモデル定義を含むアプリケーションを追加する
1刷 2刷 2024.02.15
435
下から1行目と図11-2-7の図タイトル
その中のSetting を選択してください(図11-2-7)。 図11-2-7の図タイトル:Setting
その中のSettingsを選択してください(図11-2-7)。 図11-2-7の図タイトル:Settings
1刷 2刷 2024.02.15
v
謝辞
鈴木智広氏
鈴木智大氏
1刷 3刷 2024.06.19