Reactの基本構成を学ぶ『Reactビギナーズガイド』

オライリーのReact入門書です。

Gtasbyで作成しているこのサイトももちろんですが、私はいくつかReactを使った構築をしています。 いつもディレクトリ構造やクラスの内部設計について、スタンダードな作り方がわからなくて困っていましたので手にとって見た本です。

ビギナーズガイドとあるように、Reactを動かすためのインストール方法に始まり、基礎的な構文の情報、オブジェクトの中身などの紹介がされています。JSXを使わない実装方法から始めて、JSXを利用した方法についても学んでいくので、そもそもの仕組みの理解も進みます。

応用的な面として、テストなどの知識も含まれていますので、Reactに興味を持ってこれから使ってみようという人にはとてもいい本だと思います。オライリーにしては薄く内容も簡単です、さくっと読める内容になっています。

基本的なディレクトリ構成

本の中に合った基本的な構造をメモしておきます。常にこれに従うわけではありませんが参考にしようと思います。今まで作っていた形でほぼ正しかったです。

index.html
/css
    app.css  --アプリケーション全体で使う
    /components  --特定のコンポーネントでのみ使う
        oo.css --コンポーネント名.css 
/js
    /build -JSX含まない、ブラウザで実行可能
    /source -JSX含む
        app.js   --アプリケーション全体で使う
        /components  --特定のコンポーネントでのみ使う
            oo.js  --コンポーネント名.js
/images
/scripts

• 1つのReactコンポーネントに、jsとcssファイルが一つずつ用意される。
• コンポーネントに指定するスタイルはclassName「コンポーネント名」で定義、コンポーネントのルート要素にこのクラス名を設定する

応用的な知識

テストやビルド、デプロイに関する手順や考え方の説明です。静的な方チェックやJestを使ったテストの実装方法もあります。実際に雛形のアプリを作成してコマンドを試しながら進めていきます。あまりCUIに慣れていない人にもわかるよう親切になっており、実務でも役立ちそうな知識が詰まっていました。

ところどころに応用として一歩踏み込んだ質問がされています。特に無視しても問題はありませんが、より深く知識を得るために立ち止まって調べてみることをおすすめします。ちょうど良い難易度のものばかりで、知っているとデバッグや障害などの際に役立つ知識が多かったです。

こんな人におすすめ

ビギナーズガイドという名前の通り、Reactを使用したことが無い人向けの内容でした。書き方も親切で丁寧になっていますし、サンプルのアプリも簡単です。始めてReact触ってみるとか、これからつかってみようかなという人に読んでほしい本です。

すでに業務でつかったことがあるとか、アプリ作ったことのある人にとっては物足りない内容かもしれません。

おわりに

新しいフレームワークやソフトウェアを調べてつかってみるときに、「どんな内部設計がスタンダードなのだろうか」ということがいつも気になってしまいます。設計・実装の経験があるので作って見たらそれなりに出来ますが、フレームワーク側で推奨している方針とかがあると思うので、できる限り従いたいものです。

今回はビギナー向けの本を読みましたが、各フレームワークや言語の代表的なプロダクトのソースコードについて、目を通しておくまたはブックマークしておくのがいいなと思いました。

ただ、必要になったときに調べても情報が雑多になっていてよくわからないことが多いです。公式のドキュメントさえ、最小限の情報しか無いことが多いです。できるのであれば、詳しい人に聞くのが一番オススメだと思います。