Reactを使ってみたいけど難しそうと思ってるWeb制作者におすすめ、React初心者に分かりやすい最適な実践的解説書

ReactとはどんなJavaScriptライブラリなのか? Webサイトやスマホアプリにどう使うのか? アニメーションを使ったUIはどのように実装するのか?
Reactの基本的な知識から活用方法まで、初心者がReactを学ぶために必要な情報が一から分かりやすく解説された入門書を紹介します。

Reactに興味がある、これから初めたい、知識の整理がしたい、そんな人にオススメです。

本のキャプチャ

本書はHTML/CSS/JavaScriptの基礎的な知識をもった制作者を対象にしています。CSSやJavaScriptをコピペでしっかり利用できるレベルであれば、問題ないと思います。

書籍の表紙

WebデベロッパーのためのReact開発入門
JavaScript UIライブラリの基本と活用
[Amazonでみる]
[楽天でみる]

著:
柴田 文彦
出版社:
インプレスジャパン
発売日:
2016/11/25

Kindle版は値段がお安め、しかもポイント還元で更にお得です。

紙面のキャプチャで、中身を少しだけご紹介。

誌面のキャプチャ

Reactとは? 何ができるのか? Reactについて基礎からしっかりと理解して、学ぶことができます。

本書の大きな特長は、文章と構成が非常に分かりやすいことです。
こういった解説書にしてはテキスト量が非常に多く、コードを見れば分かるでしょという乱暴なものではなく、必要な知識一つずつが丁寧に解説されています。

誌面のキャプチャ

Reactはコンポーネントを基本とするライブラリで、ユーザインターフェイスを構築する時はこれらのコンポーネントを組み合わせます。もちろん独立した部品としても機能します。
この最も基本的で重要なコンポーネントの基本的な作り方、使い方から学んでいきます。

誌面のキャプチャ

最初は「Hello World」を表示するコンポーネントです。外部スクリプトとしてReactを記述し、上記のコードで表示されます。

誌面のキャプチャ

コンポーネントの使い方はこのコードをベースにして、少しずつ機能を追加して、学んでいきます。

誌面のキャプチャ

JSXとはJavaScript, XMLで、XMLの文法によってReactのコンポーネントを配置することができます。ReactはJSXに依存している言語ではありませんが、より簡単で効率的になります。
こういった実務に役立つ知識もていねいに、くわしく解説されています。

誌面のキャプチャ

Webサイトやスマホアプリで、Reactをどのように使うかは、4章からです。
Reactを使うのであれば、ユーザーが入力、設定できるさまざまな要素をコンポーネントとしてダイナミックに機能させることができます。もちろん昔からあるフォームのバリデーション機能に使うことも可能です。そこら辺は次節で解説されています。

誌面のキャプチャ

Reactではその場で生成されたデータを使い、ページを作成することもできます。テキストや画像などのデータを動的に一覧表示することも可能です。

誌面のキャプチャ

コンポーネントは複数を組み合わせて、1つのコンポーネントにすることもできます。Reactのコンポーネントを分割して構成するのは簡単で、HTMLの要素を配置する代わりに別のコンポーネントを配置するだけです。

誌面のキャプチャ

ReactにもjQueryのプラグインのように、機能を追加するアドオンが利用できます。公式としてサポートされているFacebook製のものをはじめ、有志によるものもGitHubなどで公開されています。

誌面のキャプチャ

それらのアドオンの使い方をすべて解説、というのは無理ですが、本書では現在Webページやスマホアプリで人気が高いアニメーション機能を実現するアドオンを例に、使い方が解説されています。
Reactでアニメーションを実装する時もCSSの基本を理解していれば、大丈夫です。

誌面のキャプチャ

CSSアニメーションはもちろん、Reactでなくても利用できます。しかしReactのアニメーション機能を利用することで、手動でCSSのclassを書き換えるのではなく、簡単にユーザーの操作に応じたアニメーションを実装することができます。

誌面のキャプチャ

こういった実装レベルの解説箇所では、コードもしっかり掲載されています。重要なコードには番号が与えられており、テキストで更にくわしい説明があるので、よく分かると思います。

誌面のキャプチャ

最後はReactの実装をサポートするツール「React Developer Tools」の説明です。Chrome, Firefoxのアドオンとして利用でき、既に利用されている人も多いと思います。
入門書としての解説はここまでで、さらにReactを活用していくための方向性をいくつか提示されています。スマホやデスクトップのGUIアプリに欠かせない「Flux」、ネイティブ動作するモバイルアプリ開発を可能にする「React Native」など、どのように学習を進めていけばよいかも示唆されています。

WebデベロッパーのためのReact開発入門の目次

  1. Reactとは?
    Reactの概要と特長
    Reactを使うために必要な準備
    Reactを動かしてみよう
    Reactを理解する5つのキーワード
  2. Reactのコンポーネント
    コンポーネント定義の基本
    内容が変化するコンポーネント
    ユーザーからの入力を受け付けるコンポーネント
    コンポーネントのライフサイクル
  3. JSXの基本
    JSXの概要とメリット
    JSXの中で使うJavaScript
    スプレッド属性を利用する
    JSXトランスパイラの使い方
  4. Reactを使いこなす
    Reactで使うフォーム
    フォームのサブミットとバリデーション
    動的に作成するコンポーネント
    コンポーネント間の機能の共有
  5. Reactの一歩進んだ使い方
    アドオンによる機能拡張
    アニメーションの基本テクニック
    Reactの開発ツール
    Reactの周辺技術

Reactを学ぼうとすると、オライリーの「入門React」がありますが、入門書としてはハードルが高いと思います。また、Webでしっかりとまとめられた知識を探すのは困難です。
これからReactを学ぼうとするフロントエンドの制作者に最適な実践的入門書となる一冊です。「開発」と聞くと敷居を高く感じてしまう人にも非常に分かりやすいと思います。

書籍の表紙

WebデベロッパーのためのReact開発入門
JavaScript UIライブラリの基本と活用
[Amazonでみる]
[楽天でみる]

著:
柴田 文彦
出版社:
インプレスジャパン
発売日:
2016/11/25

献本の御礼

最後に、献本いただいたインプレスジャパンの担当者さまに御礼申し上げます。

当サイトでは随時、献本を受け付けています。
お問い合わせは下記よりお願いいたします。

top of page

©2017 coliss