【参考書】O’REILLY Reactビギナーズガイドを読んだ感想

WEBのフロント技術としてReactが流行っているということで、理解を深めるために読んだO’REILLY Reactビギナーズガイドの感想を書きます。

まずReactの理解を深めるためにやったこと

Reactの知識を習得するためにまずはネットでReactの情報を収集したのですが、ネット上の情報ではhello worldを出力するまでのReactの入口部分の説明がほとんどあり、これは理解できるのですが、

よく見るキーワードとして「prop」とか「state」とか「Flux」とか「babel」とか「Browserify」などなど…イメージは湧かないため、ちんぷんかんぷんです。

ネット上の情報だけだとイメージが湧かないので当参考書で勉強してみました。この参考書を読み終えてReactの体系的な知識は吸収でき、不明瞭だったイメージをクリアにすることができました。

 

この参考書に書かれていること

この参考書を読むことで先ほどの「prop」「state」「Flux」「babel」といったキーワードに加え、以下のことが理解できる内容になっています。

  • 純なjavascriptのみ使用したReactでエクセルアプリの作成

ここのエクセルプログラムを学ぶことで、propsやstateはどうのようなものなのか、またReactでのデータバインディングや一覧表のソート、データ編集など、WEBアプリケーションを作成する際に(汎用的に使うであろう)欠かせないないテクニックを理解することができました。

  • JSXを使用したReactでエクセルアプリの作成
  • Reactを使用してWEBアプリを作成する際のフォルダ構成について
  • Reactを使用してWEBアプリを作成する際に使用するnpmパッケージについて
    • babel(トランスパイル)
    • browserify(スクリプトファイルの結合)
    • watch (スクリプト変更の監視)など
  • コード編集→保存→自動ビルド→ブラウザ表示までの一連の流れついて
  • ボタン、フォーム、レーティング、エクセル等のそれぞれのコンポーネントを組み合わせたWEBアプリの作成
  • コードチェック、型チェック、テストツール(npmパッケージ)の使い方について
    • ESLint(コードチェック)
    • Flow(型チェック)
    • Jest(テスト)
  • Fluxという考え方(ライブラリとかツールのことではなくアーキテクチャのこと)
    • StoreとActionについて

 

感想

Reactで開発するとなった場合、JSXの使用で純のjavascriptに変換(トランスパイル)する手間が発生したり、コンポーネントとして独立したjavascriptファイルを一つのファイルに結合するためにbrowserifyというツールがファイル保存する度に実行され、ブラウザ確認まで時間がかかってしまったりと、今までjavascriptを用いた開発の際には、エディタで編集→保存→ブラウザ表示というようなシンプルな開発しかしてこなかった私にとっては、npmパッケージやテストツールを使用した開発手法に若干戸惑いましたが、フロントエンド開発の手法を学ぶ良い機会になりました。

コンポーネントベースの開発手法は、コードの再利用性が高く、資産として蓄積されて他プロジェクトでの利用ができたりとこのReactは非常に有効であると考えますが、Reactの導入に伴い、Reactそのものの理解、各パッケージの理解(コードチェックの設定、エラー時の対処法、テストツールの使い方の理解等々)、Fluxの理解が必要だったりと、学習コストが割と高めだと思いました。

この参考書はReactを習得する上で基本的なことが網羅されているので、初めてReactを学ぶ方には良い参考書だと思います。ただある程度WEBアプリの開発経験や、javascriptの扱いに慣れている方じゃないと理解が難しいと思います。

てかタイトルにビギナーズガイドって書いてあるけど、技術界隈のビギナーズって言葉はあまりあてにならない。。。

 
 
 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です