技術書典13
くるみ割り書房 ft. Reactくるみ割り書房 ft. React

りあクト！ TypeScriptで始めるつらくないReact開発 第4版【② React基礎編】

💡 3.1版から 4版への変更点については以下の記事をご参照ください https://klemiwary.com/blog/riakuto-4ed-release ―――― シリーズ累計 2.5 万部を突破、BOOTH 技術書カテゴリで上位独占中の『りあクト！ TypeScriptで始めるつらくないReact開発』の最新 4 版。今版は全 3 巻構成となっており、本書はそのその第 2 巻「React 基礎編」です。 ビルドツールやリンター・フォーマッタの高度な使いこなし術、JSX の書き方からコンポーネントの作り方までを解説します。また単にそれらの概要や用法だけの紹介にとどまらず、背景や歴史をたどってなぜそれらの技術が生まれ今のような形になったのかまでを掘り下げていきます。 なぜ React は他のフレームワークのようにテンプレート形式を採用せず JSX で UI を表現するのか。公開当初から標榜している「宣言的 UI」とは何か、関数型の思想を組み入れることがなぜそれに貢献するのか。フロントエンドの歴史の中で React はどういう位置づけで、React が現れたことでどう変わってきたのか。ベテラン開発者が体験でのみ知っていたそれらを、本書を読めば身につけることができます。 なお第 1 巻ではフロントエンドのための JavaScript と TypeScript、第 3 巻ではReact の副作用や非同期処理などを扱っています。併せてお求めください。 ▫️ https://oukayuka.booth.pm/items/2368045 （① 言語・環境編） ▫️ https://oukayuka.booth.pm/items/2367992 （③ React 応用編） ◎ 2022年 9月 8日発行／ B5 判・188 ページ ／ PDF・EPUB・AZW3 形式 📗 無料サンプル（47ページ分）がご覧いただけます。「無料ダウンロード」ボタンからどうぞ。

「ギフトとして贈る」とは

💡 3.1版から 4版への変更点については以下の記事をご参照ください https://klemiwary.com/blog/riakuto-4ed-release ―――― シリーズ累計 2.5 万部を突破、BOOTH 技術書カテゴリで上位独占中の『りあクト！ TypeScriptで始めるつらくないReact開発』の最新 4 版。今版は全 3 巻構成となっており、本書はそのその第 2 巻「React 基礎編」です。 ビルドツールやリンター・フォーマッタの高度な使いこなし術、JSX の書き方からコンポーネントの作り方までを解説します。また単にそれらの概要や用法だけの紹介にとどまらず、背景や歴史をたどってなぜそれらの技術が生まれ今のような形になったのかまでを掘り下げていきます。 なぜ React は他のフレームワークのようにテンプレート形式を採用せず JSX で UI を表現するのか。公開当初から標榜している「宣言的 UI」とは何か、関数型の思想を組み入れることがなぜそれに貢献するのか。フロントエンドの歴史の中で React はどういう位置づけで、React が現れたことでどう変わってきたのか。ベテラン開発者が体験でのみ知っていたそれらを、本書を読めば身につけることができます。 なお第 1 巻ではフロントエンドのための JavaScript と TypeScript、第 3 巻ではReact の副作用や非同期処理などを扱っています。併せてお求めください。 ▫️ https://oukayuka.booth.pm/items/2368045 （① 言語・環境編） ▫️ https://oukayuka.booth.pm/items/2367992 （③ React 応用編） ◎ 2022年 9月 8日発行／ B5 判・188 ページ ／ PDF・EPUB・AZW3 形式 📗 無料サンプル（47ページ分）がご覧いただけます。「無料ダウンロード」ボタンからどうぞ。

■ こんな方にオススメ！

◎入門者の方 😟 JSX になじめなくて React を敬遠してしまっていた 😟 サーバサイド開発は経験者だけど、フロントエンド開発は初めて 😟 公式サイトや市販本で React を学んでみたけど、今イチよくわからなかった ◎初〜中級者の方 🤔 Hooks 以前のクラスコンポーネントで React の知識が止まってしまってる 🤔 React を仕事で使っているけど、今の書き方でいいのか自信がない 🤔 Vue を使ってたけど最近 React が気になってる ▵この本に向かない方 😼 Web アプリケーションの開発経験がない 😼 理屈よりもとりあえず手を動かしておぼえたい 😼 とにかく動けばいいので、コードの可読性やメンテナンス性は気にしない

■ 読者からの感想

「なぜ初学者に React が難しいといわれるのか原因を追求し、それを解消するため React の原理原則の解説に力が入れられています。React が根本からここまくわしく書かれている書籍は他にはないのではないでしょうか」 「よくある内容の薄い本のクォリティかと思ってたけど、とんでもない本だった。正直 React を学ぶならこれだけでまずは十分なのでは。公式では説明されてない TypeScript での書き方も学べるので、かなりコスパが高い」 「書店に並んでる React 本よりぜんぜん実践的で、かつわかりやすいです。Rails エンジニアに React を教える設定の対話体にするという着想が素晴らしい。すごく具体的でポイントを絞った解説です。まさに力作」 「ベテランと若手の対話方式で進んでいくので、自分も React 初心者だけど超わかりやすい！　使っているライブラリのバージョンとかもちゃんと書いてあるのもいい」 「対話形式の文章だから、内容に入り込みやすい。公式ドキュメントやブログ記事、サンプルコードなどを色々かいつまんで得た知識が、この本を読むことで点が線となってつながり、React の理解度がかなり上がった気がする！」 🗨その他、読者の方からいただいたレビュー・感想を以下のページにまとめています。 https://klemiwary.com/reviews

【第2巻 目次】

第5章　JSX で UI を表現する 　5-1.　なぜ React では JSX を使うのか 　　5-1-1.　JSX はどのように変換されるか 　　5-1-2.　なぜ React ではデザインとロジックを混在させるのか 　　5-1-3.　なぜ React はテンプレートを使わないのか 　　5-1-4.　JSX は汎用的に UI を表現する 　5-2.　JSX 構文の書き方 　　5-2-1.　JSX の基本的な文法 　　5-2-2.　JSX とコンポーネントの関係 　　5-2-3.　React の組み込みコンポーネント 第6章　進化したビルドツールを活用する 　6-1.　コンパイラとモジュールバンドラ 　　6-1.1.　フロントエンド開発に使われるコンパイラ 　　6-1-2.　モジュールバンドラの登場 　　6-1-3.　新しい波を生んだ次世代モジュールバンドラ 　6-2.　Vite Killied the Other Star 　　6-2-1.　ノーバンドルなビルドツール Snowpack 　　6-2-2.　Create React App はもう古い？ 　　6-3-3.　絶賛ブレイク中の Vite 　6-3.　Vite を本格的に使いこなす 　6-4.　Deno が JavaScript の世界を塗り替える？ 　　6-4-1.　Deno とは何か 　　6-4-2.　Deno の特徴 　　6-4-3.　Node.js との互換性 　　6-4-4.　Deno はもう実用に耐えうるか 第7章　リンターとフォーマッタでコード美人に 　7-1.　リンターでコードの書き方を矯正する 　　7-1-1.　JavaScript、TypeScript におけるリンターの歴史 　　7-1-2.　ESLint の環境を作る 　　7-1-2.　ESLint の環境をカスタマイズする 　7-2.　フォーマッタでコードを一律に整形する 　　7-2-1.　コードフォーマッタの地位を確立した Prettier 　　7-2-2.　Prettier の環境を作る 　7-3.　スタイルシートもリンティングする 　7-4.　さらに進んだ設定 第8章　React をめぐるフロントエンドの歴史 　8-1.　React の登場に至る物語 　　8-1-1.　すべては Google マップショックから始まった 　　8-1-2.　フロントエンド第 2 世代技術の興隆 　　8-1-3.　Web Components が夢見たもの 　　8-1-4.　そして React が誕生する 　8-2.　React を読み解く 6 つのキーワード 　　8-2-1.　公式サイトトップに掲げられている三大コンセプト 　　8-2-2.　Declarative 　　8-2-3.　Component-Based、Just The UI 　　8-2-4.　Virtual DOM 　　8-2-5.　One-Way Dataflow 　　8-2-6.　Learn Once, Write Anywhere 　8-3.　他のフレームワークとの比較 　　8-3-1.　第 3 世代のフレームワーク情勢 　　8-3-2.　Lit 　　8-3-3.　Svelte 　　8-3-4.　Preact 　　8-3-5.　Solid 第9章　コンポーネントの基本を学ぶ 　9-1.　コンポーネントのメンタルモデル 　9-2.　コンポーネントに Props を受け渡す 　9-3.　コンポーネントに State を持たせる 　9-4.　コンポーネントと副作用 　9-5.　クラスでコンポーネントを表現する

■「りあクト！」はココが違う

✅ 新人と先輩エンジニアの対話による解説形式。初学者がつまづきやすいポイントや抱きがちな疑問に、先輩キャラが丁寧に対応してくれます。 ✅ 随所に脚注で公式ドキュメントなどの該当するページへのリンクを掲載。疑問に思った箇所はすぐ一次ソースに当たって理解を深めることができます。 ✅ 各技術について使い方だけでなく、その登場した背景や歴史、開発者の横顔なども紹介。なぜその仕様なのか納得しながら学習を進められます。 ✅ 進化の早い React や TypeScript、ESLint の最新の記法にいち早く対応。各種設計手法を取り入れた綺麗なコードで、現場の第一線で活躍しているエンジニアのやり方が学べます。

■ 本文中のサンプルコード

サンプルコードは全て、そのまま動く状態で章・節ごとに GitHub に掲載。 https://github.com/klemiwary/Riakuto-StartingReact-ja4.0 自由に手を加えて動作の確認ができるほか、ご自身のプロジェクトのボイラープレートとしてもお使いいただけます。

■ 電子版の閲覧について

本書の電子版ファイルは PDF と EPUB、AZW3 の 3 つの形式で提供しています。 お手持ちの環境で快適に閲覧していただけるよう、「よりよい環境で電子版をお読みいただくために」というドキュメントをご用意しました。 https://github.com/klemiwary/Riakuto-StartingReact-ja4.0/blob/main/ebook-tips.md 各フォーマットのフォント事情やおすすめアプリなどをご紹介していますので、本書をご利用の前にぜひご覧ください。

■ 旧3.1版について

古い環境で開発している方のため、旧 3.1 版も引き続き販売中です（電子版のみ）。 「② React 基礎編」の 3.1 版は、4 版と主に以下の点が異なります。 ✓ ツールチェーンに Create React App を使用 ✓ React はバージョン 17.0.2 を使用 ✓ 全体の構成が Hooks ファーストではなく、Hooks の機能をまとめて解説しています ✓ クラスコンポーネントについてくわしく解説 ✓ Vue.js や Angular との比較を記述 ✓ 4 版で追加された webpack 以降のビルドツールや、Preact や Deno など新技術についての解説がない 3.1 版の無料サンプルや目次は以下のページに掲載しています。 https://github.com/oukayuka/Riakuto-StartingReact-ja3.1

■ シリーズその他の作品

『りあクト！ TypeScript で始めるつらくない React 開発 第4版【① 言語・環境編】』 https://booth.pm/ja/items/2368045 👉 全３巻構成の第1巻。モダンフロントエンド開発に必要な JavaScript　と TypeScript の知識を身に着けます。 『りあクト！ TypeScript で始めるつらくない React 開発 第4版【③ React 応用編】』 https://booth.pm/ja/items/2367992 👉 全３巻構成の第3巻。React のルーティングと副作用処理、さらに最新の Concurrent Rendering を解説。 『りあクト！ TypeScript で極める現場の React 開発』 https://booth.pm/ja/items/1312815 👉 今作からのステップアップ となる内容です。テストの書き方や便利な周辺ライブラリを紹介。 『りあクト！ Firebase で始めるサーバーレス React 開発』 https://booth.pm/ja/items/1572683 👉 コミック情報アプリを作りながら Firebase を学んでいく、実践的な内容です。