実践入門 はじめてのReact開発

関連サイト

本書の関連ページが用意されています。

• NextPublishingオフィシャルWebサイト

内容紹介

本書は主にサーバーサイドを専門に開発してきた著者が、仕事でゼロからフロントエンドを開発する中で、現場で実際にReactを使って学んだ情報やTipsをまとめたものです。

実際にはじめてReactを使って開発していく際、ページのUI(コンポーネント)をどのように組み立てていけばよいのか、create-react-appに頼っていたフロントエンドのビルドの裏側など、実務を通して学んだReactの「チュートリアル以外のTips」を掲載しています。

本書を足がかりに、チュートリアルなどを通じて具体的な開発に必要なAPIの情報を随時調べていくことで、初学者でもReactを使った開発を具体的にイメージしやすくなります。

書誌情報

• 著者: 佐々木 勝春
• 発行日: 2022-05-13 (紙書籍版発行日: 2022-05-13)
• 最終更新日: 2022-05-13
• バージョン: 1.0.0
• ページ数: 114ページ(PDF版換算)
• 対応フォーマット: PDF, EPUB
• 出版社: インプレス NextPublishing

対象読者

サーバーサイド,フロントエンド,React,TypeScript,同人誌,技術同人誌,技術書典に興味がある人

著者について

佐々木 勝春

合同会社DMM.com プラットフォーム事業本部 エンジニア。2017年、一般社団法人DMMアカデミー入社を経て2019年にDMM.comに転籍。プラットフォーム事業本部所属としてDMMのECサイト上のレビュー基盤のリプレイスやキャンペーン情報等をお知らせする通知配信基盤の開発、DMMポイントのチャージや獲得・管理できるスマートフォンアプリ「DMMポイントクラブ」のバックエンドシステムの開発とそのWeb版の開発に従事。開発ではGolang、AWS、node・Reactなどを利用。

目次

はじめに

• 対象読者
• 本書で紹介する内容
• 紹介しない内容
• 誤字脱字報告フォーム
• 著者
• 免責事項
• 表記関係について

第1章　プロジェクトの作成

• 1.1　環境構築
• 1.2　create-react-appを使った方法
• 1.3　Viteを使った方法
• 1.4　自分でバンドラーなどのビルドツールを入れて設定する方法

第2章　コンポーネント開発(Component Driven Development/CDD)

• 2.1　そもそもComponentとは？
• 2.2　Reactでのコンポーネント作成例
• 2.3　Component Driven Development
• 2.4　Storybook
• 2.5　Storybookの導入
• 2.6　Storybookの内容
• 2.7　その他・コンポーネント間のデータの受け渡しの設計

第3章　unitテスト入門

• 3.1　Jest
• 3.2　JavaScript関数のテスト
• 3.3　コンポーネントのレンダーのテスト
• 3.4　React Hooksのテスト
• 3.5　内部に関数呼び出しがある場合のコンポーネントのテスト
• 3.6　スナップショットテスト

第4章　E2Eテスト

• 4.1　E2Eテストとは？
• 4.2　Cypress
• 4.3　Cypressの機能
• 4.4　Cypressのインストール
• 4.5　Cypressのデフォルトのフォルダー構成
• 4.6　Cypress公式サンプルアプリケーション
• 4.7　Cyperssのテストを実行
• 4.8　IDE Intelligent
• 4.9　Mocha
• 4.10　cy.visit()
• 4.11　cy.get()
• 4.12　コマンドのチェーン
• 4.13　cy.type()
• 4.14　should()関数
• 4.15　アサーション
• 4.16　cy.focused()
• 4.17　カスタムコマンド
• 4.18　カスタムコマンドの呼び出し
• 4.19　カスタムコマンドのログ設定
• 4.20　ログのコマンド実行対象のハイライト表示の設定
• 4.21　cy.check()
• 4.22　cy.uncheck()
• 4.23　cy.clear()
• 4.24　Continuous Integration
• 4.25　Dashboard
• 4.26　Cross Browser Testing

第5章　ビルド入門

• 5.1　ビルド内容
• 5.2　トランスパイル
• 5.3　バンドル
• 5.4　ビルドツールの紹介
• 5.5　esbuildを使った具体例