投稿日：2018年12月17日
「Reactビギナーズガイド – コンポ―ネントベースのフロントエンド開発入門」を読んで
近鉄四日市駅前にあるじばさん三重3階にある事務所を間借りさせていただいているのですが、事務所の鍵が開くのが9:30なので、嫁さんの出勤に合わせて8時に自宅を出発して8時半に四日市のアピタに到着してしまうので、1時間はいつもアピタのスタバでコーヒーを飲みながら読書をしたりブログを書いたりする時間にあてています。
少しずつ読み進めていたReactビギナーズガイドをようやく読み終えることが出来ましたので、今日は簡単に感想を書いてみたいと思います。
React ビギナーズガイド – コンポーネントベースのフロントエンド開発入門
Amazon: https://amzn.to/2S6YADB
React とは、Reactでできること
React とは？と言われると以下の言葉が思い浮かびます。
Learn Once, Write Anywhere
一度 React を学べば、様々な環境（ウェブとかスマホとか色々）に応用できるよ！ってことのようです。
私が調べてみたところ4つくらい使い道ありそうだったので、並べてみます。
ウェブフロントエンドのUIを構成するためのコンポーネント集 React
React って何ができるかってところをちゃんと理解していなかったのですが、ウェブフロントエンドのJavaScriptフレームワークという安直な理解でしたが、ウェブフロントエンドというところに着目すると、ウェブフロントエンドのUIを構成するためのコンポーネント集といった位置づけのようです。
React
https://reactjs.org/
ワンソースマルチユースのスマホアプリ開発環境 React Native
それ以外の用途では、スマホアプリに関して React Native の存在が大きいのかなぁといったところですね。
React Native
https://facebook.github.io/react-native/
この本を読んでみるとそれ以外にもReactでデスクトップアプリやTVアプリが作れると書いてあります。デスクトップアプリには、electron というものを使うようです。
マルチプラットフォームのデスクトップアプリ構築環境 Electron
デスクトップアプリに関してはOSをまたいで利用できるマルチプラットフォームなアプリが開発できるということで少し興味がわきました。
Shiftのようなウェブアプリをデスクップアプリとして利用するための自分専用アプリを作ってみたいという気持ちはとてもありますので、いずれ余裕ができたら作ってみたいと思います。
Electron
https://electronjs.org/
TVアプリ開発環境 React-tv？
TVアプリには、React-tvというものがあるようですが、こちらは日本語の情報はほぼ皆無なのでよくわかりませんでした。ググってみて出てきたものをとりあえず載せておきます。（そもそもTVアプリってなんだよ！？って状態ではあります…）
React-tv
https://www.npmjs.com/package/react-tv
僕の場合はスマホアプリにReact Nativeを使うと決めたのでとりあえず React について深く学ぶことに決めました。
今回はウェブアプリを開発するためのViewコンポーネントとしての React について書かれている入門書を簡単にレビューします。
本書の構成
基本構成は以下の流れになっています。
- React とは何なのか（どんな処理が行われているかの概要）
- コンポーネントのライフサイクル（プロパティやステートなど）
- 開発環境の構築
- 高機能な表コンポ―ネント:Excelコンポーネント
- コンポーネントを組み立てるためのJSX
- 最新のECMAScriptを利用するためのBabel
- データの流れを整理するためのFlux
- 型チェックのためのFlow
- 構文チェックのためのESLint
- ユニットテストのJest
React とは何なのか（どんな処理が行われているかの概要）
こちらは、DOM操作に関する基本的な内容でした。npmで最低限の環境を作成し、HelloWorld を実行するまでの基本的なコードの書き方などを学ぶことができます。
コンポーネントのライフサイクル（プロパティやステートなど）
こちらの内容については、以下の項目について学ぶことができました。
- rendarメソッド、プロパティ、propTypes、ステートなどの各概念
- ReactにおけるDOMのイベント
- プロパティとステートを外部・内部からどう扱うか
- ライフサイクルメソッドについて
基本構成は非常にシンプルなので、そのままでは機能が足りないのだろうと容易に想像ができ、基礎の上に成り立つ各種ライブラリなどを学ぶ必要があるのだろうなぁということを想像しました。
ライフサイクルメソッドがあらかじめたくさん準備されているので、そちらを使いながら処理を組んでいくイメージを想像することができました。
開発環境の構築
開発環境（プロジェクト）のひな形のサンプルを示してくれています。
開発環境を構築するにあたって、モダンなJavaScriptという項目があるのですが、モジュールといった概念であったり、ECMAScriptについて触れられているのでやはりこちらは避けて通れない道だと思います。
その他、npmを利用した環境の作り方から、トランスパイル、パッケージングといったビルドプロセスからデプロイまでの流れも一通り学ぶことができます。
高機能な表コンポ―ネント:Excelコンポーネント
Excelコンポーネントの章では、表のUIの構成の仕方や、各種CLUDの処理、検索機能の実装、データのエクスポート方法などの各機能を実装しながら、ステートの使い方について理解することが出来ました。
コンポーネントを組み立てるためのJSX
こちらの章では、JSXの基本的な構文や概念について簡単に理解することができました。この書籍は各項目については触り程度しか触れないので、詳しいところは公式のリファレンスを見てくれといったスタンスのようです。どんなふうに利用するのだろうかといったところにイメージを膨らませることはには十分な内容ではあります。
最新のECMAScriptを利用するためのBabel
JSXの章では、Babelについても紹介されています。ECMAScriptという概念についても詳しく知っていないので、こちらについても学習の必要性を感じました。フロントエンドエンジニアの方々のTwitterなどを見ている限りでは、ECMAScriptの各バージョンについての深い理解が必須といった印象を受けているので、今後のウェブアプリを組んでいくにあたっては、必ず理解しないといけない領域なんだろうなぁという感覚と、こちらについての理解がない状態でアプリは作れないに違いないといった実感があります。
Reactにおけるコンポーネント
基本的なコンポーネントの概念やセットアップ方法、基本的な各種コンポーネントの紹介などUIを構成するための基本的な概念をReactからどうやって扱うかについて簡単に学ぶことができます。
型チェックのためのFlow
7章では、品質担保のための項目として型チェックを行うためのFlowについて紹介されていました。JavaScript自体が型を持たない言語ということですが、あまり実感なく普段使用しているので、言語仕様についてももう少し詳しく見ていく必要があるように思います。
構文チェックのためのESLint
こちらは普段の開発でも利用しているので私のとってもまだ馴染みがあります。ESLintを利用して構文をチェックするための基本的な方法を学ぶことが出来ました。ESLintの環境を0から構築したことがなかったので、こちらを参考にして、直近のプロジェクトに適用してみようと思います。
ユニットテストのJest
ユニットテストを行うためのJestについて簡単に学ぶことができました。ウェブサイトの案件ではテストコードを書くほどのアプリを開発することはほとんどないのですが、今後自社のプロダクトや業務アプリを開発する際には参考にしたいと思います。
データの流れを整理するためのFlux
StoreとSchemaという概念やStoreの使い方について簡単に理解することができました。Storeという言葉など、普段あまり使用しない言葉が出てきたので、データに関する言葉の整理も必要だと感じました。応用情報技術者を取得してからプログラム開発に関連する用語についての知識があまり増えていない気がするので、どこかで知識の補充が必要だと感じました。
まとめ
新しい領域について学ぶと、知らない世界を垣間見ることができて、学ぶべきものがたくさん見えてきますね。これまで当たり前だと思って開発を続けてきたWordPressやPHPの開発環境とは明らかに異質なものを感じるのですが、Serverlessといったキーワードを最近知ったり、GCPのセミナーに参加してAIの各領域やクラウドについての新しい領域の知識が入ってきたら、サーバーサイドの開発手法についても現状の知識のままではダメだという危機感で頭の中がいっぱいになりました。
サーバーサイドの処理についても関数型プログラミングといった割かし新しいプログラミング手法について学ぶ必要があったり、JavaScriptの言語仕様やエコシステムといったモダンな開発環境について今のうちから学んでおかないと、浦島太郎になってしまうのだろうなぁといった感覚がなくなりません。
ひとまず現状でウェブサイトの制作案件は自分の主要な仕事なので、WordPressは外せないため、今後も継続して深く学んでいこうとは考えていますが、スマホアプリの開発や業務アプリの開発をご依頼いただく機会も徐々に増えてきているので、一気にインプットを進めて、知識のブラッシュアップを進めていく必要があるって感覚を確信に変えることが出来ました。
結果、読んでよかったと思います。次はHTML5Canvasの基本的ことについて書かれた書籍を現在読みかけなので、次はそちらの感想について書きたいと思います。
