React 勉強中

ずっと手を出そう手を出そうと思っていて、いつまでも手を出していなかったのがフロントエンド技術。

部分的に、例えば「JavaScript/TypeScript の言語機能の進化がすさまじいらしいし勉強しよう」とか、「Node.js で CLI ツール作れるらしいしツールチェイン(ESLint, Babel, TypeScript, Webpack)を一通り知るために作ってみよう」とか、そういうことはしてきたのである程度 Node.js は知っているつもりだった。

でもフロントエンドはやったことない。そもそもどうビルドするのかよくわからない。Hello World をビルドする方法さえ知らないので、調べたり人に聞いたところ、どうもビルドの詳細はわからなくても開発はできるらしい。えっなんでビルド方法知らないのにみんなフロントエンドできてるの？と思ったけど、（後述するけど）うまいことライブラリ・フレームワーク側が隠ぺいしていて細部を気にする必要がないとのことらしい。

仕事もあるけど、普通に個人の開発でフロントエンドのプロジェクトを始めたいと思っているので、それができる程度には詳しくなっておこう、と思い勉強を開始することにした。

教材選び#

といっても、まず教材選びに難航する。

さすがにいきなり有料コンテンツや書籍を買うのははばかられたので下調べをした（お金を払う気がないわけではないが、古い書籍を買って、今はもうそんな書き方しないよ、というものを学んでもしょうがないので）。

で、どうも React Hooks 以前/以後で世界が違うらしい、ということがわかった。そのためまずは、React Hooks の説明に紙面を割いていそうなこと、それから業務で名前を聞いたことがあったので Redux について解説しているものだとより良いなと思った。あとできれば TypeScript を使っていてほしい。

そんな都合のいい教材あるんかいな～とか思いながら探したところ、行きついたのが『りあクト！』という同人誌だった。

りあクト！ TypeScriptで始めるつらくないReact開発 第2版 - くるみ割り書房 - BOOTH

なんかそのうち第三版が出るらしいが、とりあえずこの1年で（初心者的から見ても）世界が変わるようなアップデートは Hooks しかなさそうだったので買っていいのではないかと思って買った。

思想を学ぶ#

業務のコードで JSX を読んでいても、正直なところそんなに気持ちがわからない。これはいろいろな理由があるけれど、要するにアプリケーションコードからはにじみ出ているのはアプリケーションや組織の事情や思想であって、フレームワークの思想を感じることはできないのだ。

まぁ、当たり前である。アプリケーションコードはいま現実に動いている、もっというとお金を稼いでいるコードであって、そこには様々な事情がある。その事情にまみれたコードが教材になるようだったら苦労しない。

ということでシンプルなアプリを自分で作ろうと思っても、「なんか create-react-app というコマンドがあるらしい」、「npm start で動いた。おー」、「……で？」となってしまいがちだ。そのあと何する？

結局知りたいのは「こういうコードがこう動く」みたいな How To ではなくて、 React はどのような考え方を採用したライブラリなのかだった。その点で上記の教材を選んだのは大当たりで、React の特徴からその歴史のある程度の変遷を追ってくれるので非常にありがたかった。

思想を学ぶのには、単に動くものを作るよりもずっと時間がかかる。単純に手を動かすだけでは、他と比べて違いを感じるとか、そういう体験を得ることは少ない。

例えば自分の知っているものと比べるという考え方を推し進めると、僕は Elm を書いたことがあるので Elm と比べるとかはありだと思う。しかしそこまで Elm に詳しくないし、 Elm の思想をよくわかっているわけではない。

そうしたことを、この本はわりと短期コースでささっとこなしてくれる。いや、純粋にすごいと思う。

思ったこと#

そして思ったんだけど、前に pnovel という Node.js 製のコマンドラインツールを作った時と必要な知識がずれている、というより、あんまり共通部分がない気がする。

pnovel は TypeScript 製で Webpack でビルドして Jest+Babel でテストを回して ESLint で Lint かけているし、React のフロントエンドを使っても似たようなメンバーを使っているはずなんだけど、どうも react-scripts ってやつが（質高く）隠ぺいしているっぽい。特にビルド周り。

どうも調べた限り、あるいは人に聞いた限りでは最近のフロントエンドは隠ぺいするのが当たり前っぽい(react-scripts とか nuxt とか)。そういうこともっと早く知りたかったな～と今更思った。

一度でもフロントエンドの Hello, World ハンズオンとかを受けていればこんなことで悩まないのかもしれない。

まだ読み途中なので、もう少し勉強します。