あるSEのつぶやき・改

ITやシステム開発などの技術に関する話題を、取り上げたりしています。

React入門として書籍『りあクト!』を読み本家チュートリアルに挑戦した感想

はじめに

書籍『りあクト!』という同人誌を @YSRKENさんにご紹介いただき、一度は挫折した React 再入門しようと思い、書籍を読了した感想と、React 本家サイトの英語チュートリアルに挑戦した感想を書いていきたいと思います。 booth.pm

『りあクト!』の感想

この書籍は、技術書にありがちな技術解説というスタンスではなく、会社で先輩と後輩の会話の中で技術的な内容が出てくるという一風変わった特徴があります。それゆえに難しい概念にもなじみやすく理解しやすい内容になっています。

また、なぜ世間で React が難しいと言われるのかその原因を突き止め、その解法として、React の原理原則の解説に力点が置かれています。

自分が以前 React を理解できなかったのは、シンプルだけれども React の原理原則を理解していなかったためなのかと納得しました。いくら文法やコマンドを覚えても、根本を理解していないと空回りしてしまいます。React の原理原則をここまで詳しく扱っている書籍は他にはないのではないでしょうか。

ECMAScript 2018 までに新しくなったモダンな JavaScript についての解説もよかったです。今は「var 禁止」というのには驚きました。アロー関数もずいぶんモダンな書き方ができるんだなと感心しました。関数型プログラミングを解説しているのもよかったですね。

また、この書籍では TypeScript を採用しているのですが、TypeScript は何気に大人気だというのに驚きました。npmユーザーである16,000人に行った調査で46%が TypeScript を使っているそうです。静的型付け、型推論、Null安全性というトレンドを押さえているだけでなく、JavaScript がそのまま動くのも人気の秘訣だそうで。

その他にも、JSX、Lint、Prettier、Recompose、ルーティング、Redux といった React に必須知識が網羅されています。

ちょっと気になるのが、この後輩さん、Ruby on Rails を何年かやっていてかなりスキルが高く理解力も高いので、「おいおい、そこは理解できないだろう?」というところまでサクサク進むのには参りました。Ruby on Rails や CoffeeScript を前提とした説明があったりして、人によってはここら辺でつまずくかもしれません。幸い私は大丈夫でしたが。。。

それを踏まえても、この書籍はいい内容だと思いました。

それに加えて1,500円でPDFで入手できるとは相当お得だと思います。

あと、本を読み進めていったり試してみたりでつまずいたところを書いておきます。

この書籍が対象としているのは Mac ユーザーになります。でも心配しないで下さい。Windows ユーザーでも問題なく学習することはできますので。

問題になるのは、Node.js のバージョン管理をする ndenv が勧められているのですが、Windows にはないのですよね。とは言っても、Windows では nodist というツールがあるので大丈夫です。nodist については以下の記事を参考にしてください。一点注意事項があり、Node.js が既にインストールされていたら、アンインストールしないと nodist がうまく動作しません。

qiita.com

また、React の create-react-app を実行するのに、npx コマンドを実行するのですが、npm を以下の方法でインストールしないと Windows では動作しませんでした。

> npm install -g npm 

TypeScript な React プロジェクトを作成する create-react-app は以下のように実行します。これはなかなかない情報だと思うので役に立ちました。

> npx create-react-app hello-world --scripts-version=react-scripts-ts

(2019/04/26追記) react-scripts-tsは廃止予定になり、今後は以下のようにプロジェクトを作成するとのことです。

> npx create-react-app hello-world --typescript

なお、TypeScript は以下のコマンドでインストールします。

> npm i -g typescript ts-node

サンプルコードをダウンロードするには、git for Windows をインストールした後、以下のコマンドを実行する必要がありました。

> git clone https://github.com/oukayuka/ReactBeginnersBook.git

React 本家チュートリアルの感想

reactjs.org

React 本家のチュートリアルなので当然英語なのですが、英語は思っていたよりは簡単でしたね。

それよりも概念の解説が多くて通常であれば理解が難しいのでしょうが、『りあクト!』で概念を身に着けた後に英文を読むと意外と理解ができました。『りあクト!』バンザイ!

もちろん英語なので、分からない単語や文章が出てくるのですが、そんなときは以下の頼りになる Chrome 拡張があります。

「Weblioポップアップ英和辞典」は、マウスを単語に合わせると日本語訳がポップアップされるという優れものです。

chrome.google.com

「Google 翻訳」はいまさら説明はいらないでしょうが、文章で分からないところがあればマウスで選択した範囲を日本語訳してくれます。

chrome.google.com

こういう力強い拡張機能を味方につけ、本家チュートリアルに挑戦しました。

3x3のマスを○✕で埋めていく簡単なゲームを React で作るのですが、思っていたよりは簡単にできました。

説明も丁寧ですしね。

下手な日本語の記事にあたるより、頑張って本家チュートリアルに挑戦した方がよいのでは?と思ったほどです。

補足というかこうやった方がいいというのがあって、オンラインツールでチュートリアルを試すのではなく、ローカルの VisualStudio Code などで実際に動作させた方が勉強になると思いました。

あと、React本家のチュートリアルでコピペより写経しろといっているのは心に留めておくべきですね。

We strongly recommend typing code by hand as you’re working through the tutorial and not using copy/paste. This will help you develop muscle memory and a stronger understanding.

おわりに

週末のかなりの時間を React の書籍とチュートリアルに取られましたが、それだけの収穫はありました。

React 完全に理解した!(な訳ない)