りあクト！ でReact再入門
しばらく前のエントリで書きましたがReact＋TypeScript回りを学んだので、一緒に読んだ本の感想エントリです。技術同人誌界隈では非常に高評価、なんと累計1.5万部も売れた3部構成のReact入門書。作者はフリーランスのエンジニアの大岡由佳さん。
React推しの技術同人誌なので前書きからすでにアツく、最近はVue.jsが採用されたり書籍が多いのにもどかしさを感じたり、実際のプロジェクトで見てきたひどいコードをもっと良くしたいと思った…などなど、現場のエンジニアの技や思いがたっぷり詰まっています。ReactってJavaScriptぢからの高い優秀な人が使ってそうな勝手なイメージがあったのですが、そうではない場合もあるのですかねえ。
技術が出てくる経緯、歴史と思想にも踏み込み、仕事で使えるReact本を目指したとのことで、実際にそれを実現した本となっています。
- りあクト！ でReact再入門
- 【Ⅰ. 言語・環境編】
- 第1章 こんにちは React
- 第2章 エッジでディープな JavaScript の世界
- 第3章 関数型プログラミングでいこう
- 第4章 TypeScript で型をご安全に
- まとめ：技術同人誌とは思えないぐらいのクオリティの入門書
【Ⅰ. 言語・環境編】
第1章 こんにちは React
作中の架空の会社に勤めている設定の2人の登場人物によって話は進んでいきます。
- 柴崎雪菜先輩：React歴3年でテックリード、フロントエンドチームを立ち上げるために社内公募を掛けてReactメンバーを探している。デキるつよエンジニアのオーラを放っている表紙の眼鏡の女性と思われます。
- 後輩の秋谷香苗：読者目線に立つ学習する側。新卒2年めで入社以来RubyでRailsメイン。Javaベースのオブジェクト指向の思想も分かる。1週間で戦力になってというハードルの高い高い目標を掲げられている。
この2人の会話形式で進むのですが、後輩からの質問やツッコミが、他言語なら分かるReact初心者の立場に立っていて理解しやすいです。
1-1. 基本環境の構築
- 実はscriptタグ読み込み形式でも基本機能だけならReactがぎりぎり動く例をあげつつ、実際の開発レベルに必要な理由を列挙して
Node.jsがなぜ必要なのかを解説しています。 - Mac/OSのパッケージ管理システムを例にあげつつ、本書ではMacを想定して
Node.jsのインストール方法を解説しています。 - Webアプリ開発はUNIX環境が当たり前とか、柴埼先輩はかなり攻めてますね。(自分的には別にWin/Macどっちでも...派ですね)
- 作中の秋谷香苗さんはRubyがメインという設定ですが、これを活かしてRuby界隈の技術でいうとこれ、のように他言語での相当する例も上げてくれるのがありがたい。
- エディタはやはり
VSCode一択。Live Shareの体験が圧倒的とのこと。本書に載っているおすすめ拡張機能リストは、使っている人ならだいたい知っている定番ものが中心でした。
1-2. プロジェクトを作成する
- 複雑な設定が必要で日本だけでなく海外でもJavaScript疲れ
(JavaScript Fatigue)が問題になっていた経緯を説明し、そこでCreate React Appが登場したことを中身含めて解説しています。一緒に自動で入るパッケージでreact, react-domはReact本体としてreact-scriptsが重要な役割を果たしているのは初めて知りました。 - そしてTypeScript版で
CRA(Create React App)して実際にHello Worldするまで、1つ1つのファイルの中身まで含めて解説しています。新人さんがpublic/index.htmlとReactコンポーネントがどう結びつくのかを疑問に思っているのが偉い…！
自分もこれを最初に見た時に悩んで、なんかネットにあまり載ってないけどReact使いの人はどう理解してるのだろうと謎に思ってました。ファイルとしての静的なindex.htmlでなく実際に動くときに、static/js/*.jsファイルが読み込まれるようDOM要素が追加されてるんですよね。
1-3. アプリを管理するためのコマンドやスクリプト
Yarnコマンド、package.jsonの中に定義されるnpm scriptsの中に生成されているコマンド、そしてreact-scriptsでできることも開発者目線で解説されています。実行するとCreate React Appの庇護から抜けて自由な設定が可能になるejectコマンドの存在を初めて知りました。- 本書では少人数のチームでは余計な作業を増やさないようなるべくCRAに任せて、この
ejectは使わないことを推奨しています。まあここはそうなんだろうなあと。
第2章 エッジでディープな JavaScript の世界
2-1. あらためて JavaScript ってどんな言語？
- 変化が速い言語であるだけに、まだまだ日本でもJSを悪く言う開発者は多い…という会話で、SNSのQuoraの有名な質問が出てくるのが笑いましたw 僕もこの質問興味を持ってフォローしていたのですが、20件以上の様々な立場からの回答が寄せられています。
JavaScriptを悪いプログラミング言語だと考えるプログラマーが多いのは何故ですか？
- JSが備えている特徴を、歴史的経緯を含めて解説しているのがありがたい！ 最初は
LiveScriptという名前だったのが昔のブラウザのNetscape経営陣がJavaScriptと名前を変えた小噺は割と有名ですが、このへんがかなり詳しく解説されています。ああネスケ...懐かスィ... - 年々進化する話でRubyやPythonも例に上げて、後方互換性に気を使っている話、過去の悪いパーツとES5以降の良いパーツのどちらに目を向けるかで評価が変わる話は、実際のベテラン開発者ならではですね。
- JavaScript自体の参考書としては本書では2020年6月刊行の『JavaScript Primer』を推薦しており、現時点だとやはりこの本がベストだろうなあと思います。
2-2. 変数の宣言
- 自分も未だになかなか覚えられない(苦笑)巻き上げ
(Hoisting)の話も丁寧にしながら、変数宣言でvarはマズい話を解説しています。本書ではまずは常にconst、どうしても再代入がいるときだけletにせよとしていますね。実際にReactのコードを書いているとだいたいconstで用が足りるのがだんだんわかってきます。
2-3. JavaScript のデータ型
- JavaScript におけるプリミティブ型は7種。ES2020追加の
BigInt型、ES2015のSymbol型は余り使うシーンがないのでBoolean/Number/String/Null/Undefined型を主に使う話。 - プリミティブ値のリテラルが自動的にラッパーオブジェクトに変換される話では、新人さんが几帳面にこの挙動を不思議がっています。でもこの反応って静的な型のある言語のプログラマーなら自然だと思うし、こういう所を掻いているのはありがたいですね。
- プリミティブ型でないものはすべて「広義のオブジェクト」、キーと値を持ったプロパティの集まりの
{}が「狭義のオブジェクト」。
2-4. 関数の定義
- 従来の
function twice()で宣言する関数宣言文と、const twice = function() {..}で行う関数式が結果は同じだが違いがあることも改めて説明しています。 - アロー関数は引数カッコを省略しない
const addOne = (n) =>のやり方がPrettierでも2020年からデフォルトになり、作中設定の会社でもこれを支持するとのこと。自分もUdemyの講座でやりましたが、やっぱり合ったほうがわかりやすいですね… - 本書では柴崎パイセンの熱い想いもあり、関数の記述はアロー関数式を強く推奨しています。
2-5. クラスを表現する
- クラスのようでクラスでもない独特な、JavaScriptのクラス構文について裏でどう動いているかを含め説明しています。継承元の変更が即時反映されてしまうプロトタイプベースを採用したのは、性能が貧弱な初期のブラウザでも動くようにだった……という歴史的経緯はなるほどと思います。
- なお作中の２人はエヴァンゲリオンネタが分かる方々のようです。完結編は観に行ったのかな？
2-6. 配列やオブジェクトの便利な構文
- 分割代入、元のオブジェクトを破壊せずシャロ―コピーしてくれるスプレッド構文、新しいJavaScriptでの書き方について。
- ディープコピーする手軽な方法としてJSONで
parseし直す方法も紹介してくれています。
2-7. 式と演算子で短く書く
||や&&が左から評価されることを利用したショートサーキット評価- オブジェクトの中身を辿る時、obj?.prop1?.childProp のようにすると途中がなかったらundefinedを返してくれるのが、ES2020の
Optional Chaining - 同様にobj?.prop1?.childProp?? 'default value' のようにすると
nullかundefinedだったら右辺のデフォルト値を入れたりできるのがNullish Coalescing() (Null合体演算子、ヌリッシュ・コアレッシング) - 細かいネタではサンプルコードが1986年スタートのアニメ『メイプルタウン物語』ネタになっています。
2-8. JavaScript の鬼門、this を理解する
- まさに鬼門のthisの話を、Pythonでは明示的に
selfを宣言、RubyのselfやJavaのthisが暗黙的なのを例に挙げながら解説しています。本書にあるように直感的にスッとは理解できなかったのですが(笑)、ややこしいところなのでありがたい。 - 解法は４つで本書の推奨はやはり、Reactでも多用されているアロー関数を使うこと。特にthisはクラス構文の中でしか使わない事、クラス構文の中でも関数はアロー関数式での統一を推奨しています。
2-9. モジュールを読み込む
- 新しいJSの大きな進歩であるモジュール周りも、「JavaScript モジュール三國志」と題して歴史を含め解説してくれています。CommonJSやBrowserify、公式のES Modules、後発のWebpackが優秀なためいつか分からない将来の統一までは主流であること……こういう過去の経緯の話は本当にありがたいです。
- モダンブラウザならHTML内のscriptタグ内でも実はimportが使える(!)話は地味に知りませんでした。
- 小ネタではサンプルコードの一部がムーン・プリズムパワー・メイクアップ！していて、本書の柴崎雪菜先輩はセーラームーン世代であることが推察されます。2020年で27-36歳前後が該当するそうで...（←気になってググってしまったｗ
第3章 関数型プログラミングでいこう
3-1. 関数型プログラミングは何がうれしい？
- プログラミングパラダイムには命令型プログラミング
(Imperative Programming)と宣言型プログラミング(Declative Programming)がある。 - 命令の文を連続して実行していく命令型プログラミングの中のパラダイムが手続き型プログラミング
(Procedual Programming)とオブジェクト指向プログラミング(Object-Oriented Program)。JavaやRubyやC#など多くの言語でおなじみ。手続き型とオブジェクト指向は言語では両方取り入れられつつある。 - 宣言型プログラミングの代表的な例がSQL。(なんと!) 最終的な欲しいデータを最初に宣言する。この宣言型プログラミングの中に位置するのが関数型プログラミングで、同じ入力には同じ出力を保証する参照等価性のある関数を活用する。
- 「文」よりも変数に代入できる「式」を多用する。変数の不変性
(Immutability)が高まり安全性が高まる。 - 手続き型は１つづつ処理を積み上げていくのに対し、関数型プログラミングでは最初からゴールを見据えて書く形になる。
- 細かいネタではこの例え話で1986年の『ドラゴンクエストI』が出てきます。セラムン世代かに見えた柴埼パイセンの世代設定の謎がさらに深まります……!
3-2. コレクションの反復処理
Arrayオブジェクトの様々な反復処理の紹介。丁寧に解説されているのでもっと活用しないとな～と思いました。forEachとfor...ofは非推奨、特にfor...ofはAirbnbのスタイルでも非推奨なんですね。- オブジェクトの反復処理については
Object.keys(), .values(), entries()がよいという話。
3-3. JavaScript で本格関数型プログラミング
- 関数が変数に代入できたり別の関数の引数や戻り値に使えること(=高階関数,
High Order Function)、無名関数があること、=>のアロー関数式があるJavaScriptの特徴を踏まえながら、改めて関数型プログラミングの話。今までの記述を踏まえると整理できてありがたいです。 - 小ネタではサンプルコードに込められているのは1984-85年の少女漫画/アニメ『はーいステップジュン』のネタのようです。柴埼パイセン、いったい何者……!?
- 複数の引数を持つ関数を分割して入れ子にできるカリー化の話。これはほんとに難しく感じます……! 学者のHaskell Curryさんが名前の元なんですね。
- 同じ「クロージャ」でもLisp系の言語の名前が
Clojure、JavaScriptの機能一つなのがClosure。関数が作られた周囲の環境も一緒に閉じ込めて、中に変数を持たせたりできるもの。クラスインスタンスと似てるしなんでこんなのあるんねんと思うのですが、Reactの関数コンポーネントに繋がっているわけですね。 - サンプルコードのメモリ解放の話が
Kakeru savedとなっていて、これは2012年別冊マーガレットで連載開始～2016年にアニメにもなった『orange』の救出対象ヒロインの成瀬翔のネタのような気がします……
3-4. JavaScript での非同期処理
Promiseでコールバック地獄がやや楽になり、今はasync/awaitが推奨という話。発音は「エイシンク」が正しいそうです。自分もつい「あしんく」と読んでます……（平伏)柴崎雪菜先輩の世代設定が気になる3章でしたが、後輩の秋谷香苗氏も『超時空要塞マクロス』のヴァルキリーのガウォーク形態を知っていたり、2007年スタートの『機動戦士ガンダム00』シリーズのパワーワード「俺がガンダムだ!」ネタを知っているらしき描写があり、人物設定が気になります(笑) 2010年代後半入社と思われる新卒2年目にしてはガチな気がする……!
第4章 TypeScript で型をご安全に
4-1. TypeScript はイケイケの人気言語？
- 最近の動静として言語のランキングでTSがぐんぐん上がり、Googleの社内言語でも採用、Slackなど有名サービスもTSを続々採用など機運が高まっている話。こういう歴史的な経緯の整理はありがたい。Ruby界隈では過去に
CoffeeScriptが結局廃れてしまった過去があり、AltJSに良い印象がなかったのではないか……という文化的な考察は興味深いです。 - ネタとしては秋谷香苗氏はギレン・ザビ様の「圧倒的じゃないか、我が軍は」ネタも知っており、ダブルオーだけでなく宇宙世紀もののガンダムもイケる人なのが判明しています。何者……!
4-2. TypeScript の基本的な型
- 対話型の
ts-nodeを使ってTypeScriptの動きを見ていく節。型定義もフレキシブルにできることに秋谷さんが感心していてなかなか鋭いですね。 - 単に定義すると数値が入ってしまって危険な
Enumは本書でも非推奨、文字列リテラルの列挙型を推奨しています。 never型は必ずエラーがスローされる関数ぐらいしか使わないのかなと思っていたのですが、本書ではswitch文のcase定義漏れに使うという、現場の高度な技も紹介されています。
4-3. 関数とクラスの型
- ふつうの宣言文、
functionキーワード、アロー関数式でもどれでもいける関数宣言の話。 - JavaScriptのES2015のクラス構文ではメンバ変数の定義がないところ、TypeScriptのクラス構文ではメンバ変数がいる話では、近年のオブジェクト指向プログラミングの
Composition over Inheritanceの話が載っています。
(本書では「継承よりも合成」と訳されていますが、「継承よりも委譲」の方が言い方としては多いかな？) - 単に継承すると不要な機能も受け継いでしまうのでバグの元になる、親クラスのコード変更がすべてに大きく影響してしまって保守性にも影響する……という話ですね。
Reactの公式ドキュメントに継承を避けるようはっきり書いてあることも改めて明記さています。このへん、サーバーサイドでデザインパターンを駆使してクラス構成を工夫したりするのとはフロントエンドではまた話が違うし、Reactは新しい領域の新しい思想の技術なんだなあと思います。
interfaceでメソッドを定義する場合にアロー構文を使うとオーバーロードができなくなるのは知りませんでした。アロー構文好きの柴埼パイセンはこちらが好みとのこと。オライリー本の『プログラミングTypeScript』ですとここは普通にinterfaceもtypeも両方定義していた気がします。- クラスを宣言すると内部的にはインターフェースとコンストラクタ関数が両方定義され、型としても関数としても扱われるのでインターフェイスもクラスを
extendsできたりする挙動の話。
4-4. 型の名前と型合成
- 同じような動きをする型エイリアスとインターフェースでは、後からできることが増えていった型エイリアスの使用を本書では推奨しています。Reactを書くにはこちらで十分とのこと。
TSが登場したころはnull安全を保証していなかったのは、過去との互換性を考えたのではないか……という考察は腑に落ちます。現在はunion型で
let foo: string | nullのように書くのが分かりやすいとのこと。4章はTypeScriptの重要な解説なのでコード内のお遊びはあまり出てこないのですが、『新メイプルタウン物語』の主人公キャラらしき名前が隠されていたり。また変数
friendsに入れる文字列に列挙型でサーバル｜カラカル|チーターが出てくるので、これは『けものフレンズ』ネタではないかという電波を受信しました……。すっごーい！たーのしー！
4-5. さらに高度な型表現
typeof varname;などとすると変数から型を抽出できる話、for...inやfor...of、 オブジェクトの型からキーを抜き出してくれるkeyof、定数として型注釈を明示できるas constの話。- ちょっとTSを使うぐらいでは出てこなさそうな高度な条件付き型や
inferキーワードの話で、SQL文を発行するORMライブラリなどへの応用の話が出てきます。まったく思いつかなかったのですがこういう方面でも可能性がある訳ですね。 Partial<T>などの高度な組み込みユーティリティ型の話では、関数の引数の型や戻り値の型を抽出してくれるParameters<T>、ReturnType<T>は今のReact開発ではあまり使わないがReduxなどではよく使われていたとのこと。- TSならではの関数のオーバーロードの例として、前に出てきたムーン・プリズムパワー・メイクアップ！のネタが有効活用されています。本書の秋谷さんが言っているように
function transform() ..のように宣言文で書いた方が、アロー関数式より確かにオーバーロード宣言に関しては分かりやすいですね。アロー関数派の柴埼パイセンもここでは認めています。
4-6. 型アサーションと型ガード
const aaa = data as User;のように開発者が型を断定してコンパイラに押し付けるのが「型アサーション」で、これは最後の手段。- それよりもプリミティブ型なら
typeof、クラスインスタンスならinstanceofで判定しながら安全に処理させていく型ガードを使う方がよい。高度なユーザー定義の型ガードも実例が紹介されています。 - 高度なテクを使う時はコンパイラに嘘をつかないようにしましょうということで、割と有名な
"With great power comes great responsibility"(大いなる力には大いなる責任が伴う)の格言も出てきます。
実写映画だと続きは"This is my gift, my curse. Who am I? I'm Spider-Man."でグッとくるエンディングでした。この２人アメコミネタも押さえてるのか……
4-7. モジュールと型定義
- TypeScriptでは
import文の探索手順があるので、パスに拡張子を指定しないのが正解。 - 型エイリアスと変数に入ったオブジェクトは、同じ名前でも内部で２つの宣言空間で区別されて一緒にエクスポートされ、両方使える。
- 型のみに限定したい場合は
export type {型名},import type {型名} from..とできる。 - TS製のパッケージをnpm上で公開する場合はJavaScriptに変換して、
*.d.tsの型定義ファイルを一緒にして公開する例もセーラームーンの変身プロセスの関数とクラスを例にして解説されています。このへんも実践的ですね。
4-8. TypeScript の環境設定
- tsconfig.jsonの細かなオプションの話。
Create React Appで作るとまとめたオプションstrict: trueで諸々が有効化されて厳密になっているので、これに従う。 - パス指定の絶対パスが可能になる
baseUrlとイテレーター回りの変換を最初からONにしておくdownlevelIterationは変えた方がよいという、お役立ち情報も載っています。 - このあたりを読むとCreate React Appも昔はまだ使いにくい時期もあり、ver4.0.*の現在はだいぶ成熟してきたのだなあというのが伺えます。
セーラームーン世代と思われる柴崎雪菜パイセンに比べると秋谷香苗さんは下の世代と思われますが、ガンダムネタにもセラムンネタにも自然に対応しており、守備範囲が広いのが伺えます。これが……フルスタックってやつか……(違)
まとめ：技術同人誌とは思えないぐらいのクオリティの入門書
【Ⅰ. 言語・環境編】は入口なのでReact本体が出てくるのは最初だけ、メインはフロントエンド全体とJavaScriptとTypeScriptなのですが、これだけでもう既にめっさ学びになります。これで電子版1200円というとコスパも抜群ですね。
柴埼パイセンと秋谷さんの世代設定の謎を追いつつ、我々はアマゾンじゃなかったFacebookの奥地へと向かった…...
関係書籍など
本書のサンプルコードのリポジトリ。 github.com
頒布時のtogetterまとめ。 togetter.com
りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅰ. 言語・環境編】 oukayuka.booth.pm りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅱ. React基礎編】 oukayuka.booth.pm りあクト！ TypeScriptで始めるつらくないReact開発 第3.1版【Ⅲ. React応用編】 oukayuka.booth.pm
りあクト！ TypeScriptで極める現場のReact開発 booth.pm りあクト！ Firebaseで始めるサーバーレスReact開発 booth.pm
Reactをはじめとするフロントエンドフレームワークの入門本まとめ記事最新版が、このブログ内のこちらにあります。
