ひっざにや

日本のスカイリム地方に住むエンジニアのブログ

Reactチュートリアルは入門React本で斬り伏せられた男に手を差し伸べてくれた

React チュートリアル AWS Cloud9

TL;DR

  • 業務でjQueryばかり使っていた男がReactチュートリアルをやってみた
  • 以前入門Reactという本を読んだことがあったが途中で挫折
  • チュートリアルは最後までできたし、Reactの基礎的なエッセンスが何となく理解できた
  • 初学者はまずはチュートリアルをやってみるととっつきやすいかも(入門Reactはその後で読もう)

Reactを使ってみたい

jQueryでフロントエンドを書くことに限界を感じていたんですよね(限界まで使い倒せていないと思うけど)
DOMの操作の処理が恐ろしく汚くなってメンテナンス性が非常に悪く感じたので、今風のjavascriptライブラリならそのへんの課題が解決されるのでは？　と思ったのがきっかけです。
いくつか選択肢はありますが、学習コストや情報の充実度的にReactがよさそうかなと。

それで手始めにオライリーの侍本(入門 React ―コンポーネントベースのWebフロントエンド開発)を買って読み始めたんですが、全然入門じゃない内容に斬り伏せられました。

入門 React ―コンポーネントベースのWebフロントエンド開発

入門 React ―コンポーネントベースのWebフロントエンド開発

何も知らない状態で読んで3章くらいからついていけなくなり、モチベーションがダウン。
そして時は流れ、再度モチベーションが上がってきたところで、チュートリアルから入っていったらどうだろう？　と思い至ってチャレンジしてみました。

環境

自分のPCに開発環境を入れることに抵抗があったので、AWSのサービスの1つ、Cloud9を利用してやってみました。

Cloud9はクラウド上に開発環境を構築し、Webブラウザ上でコーディング・実行できるサービスです。
AWSはクレジットカードがあれば無料でアカウントが取れるし、設定で一定時間放置何もしないと自動で休止状態になるので経済的です。
AWSの初期設定については下記の記事を参考にしました。
セキュリティ周りや請求周りの大事だけど若干面倒くさい部分をしっかり押さえてくれているので非常に助かりました。
gitにAWSの大切な情報をpushしてしまわないようにするベストプラクティスとしてgit-secretsというgitのアドオンがAWS公式で提供されているというのが一番大きな収穫でしたね。

その後、Cloud9の開発環境を構築していきました。
設定にあたり、下記の記事を参考にしました。
今はOSがAmazon LinuxだけでなくUbuntuも選べるので汎用的なUbuntuを選択しました。

チュートリアルをやる

HTML + JavaScriptで三目並べを作りながらReactの基礎を学べる感じです。
ブラウザでコードを書くかローカル開発環境を構築するかというオプションがありますが、今回はCloud9で環境構築したので、ローカル開発環境を構築しつつブラウザでコードを書くというハイブリッドな状態となりました。

このページを上から下までただただ順に読みつつやっていきます。

概要

Reactコンポーネントについての説明。
コンポーネントクラス内のrenderが描画用関数だよ、JSXというHTMLライクなタグ構文で書くとjavascriptに変換されるよという説明。この辺は入門Reactの最初でも触れていたので問題なくついていけた。

スターターコードの中身を確認する

まずはスターターコードを写経。
コードからどういうアウトプットになるかはふんわり想像しつつ書いていく。
親コンポーネントから子コンポーネントの名前でJSXを呼び、子が孫コンポーネントを呼んで……と繰り返して最終的なアウトプットとして画面に絵が描画される。

データを Props 経由で渡すでは、子コンポーネントにはパラメータも渡す話をしている。
受け取ったパラメータが子自身のpropsの中にあり、子はそれを使うことができるので、親は子に値を渡すことで影響を与えることができる。

インタラクティブなコンポーネントを作るでは、コンポーネント自身の状態をstateで持たせている。
propsが親->子へ渡すものであるのに対し、stateはコンポーネント自身の状態であるという違い。

ゲームを完成させる

個別のマスに状態を持つよりはボード自体で一括管理するほうがコードがシンプルなので、親コンポーネントにstateを移動するようにリファクタリングをやろうというのがState のリフトアップの説明。

onClickの扱いは、buttonタグの場合は意味のある名前の属性で、ユーザ定義のコンポーネントではonClickは意味はないので、違う名前でもいい。

ミュータブルとイミュータブルの話が出てくるが、これはこの後の履歴を遡る機能の実装に必要。もとの値を書き換えると変更前後でどこが変更されたのかを検出するのが困難。

関数コンポーネントでは、stateを持たないrenderだけのコンポーネントはfunctionで書くと解説。

手番の処理で、交互に手を打っていくための仕組みをボード自体のstateを直前と反転させることで実現している。シンプルで無駄のない方法だなと感心しました。

ゲーム勝者の判定で勝ちパターンをすべて洗い出して、そこに合致しているかどうかを判定するというロジック。三目並べというパターンの少ないゲームだとできるけど、力技な方法なので、碁盤上でやる五目並べなんかでは違う方法でやらないと大変なことになりそう。そもそも勝ち負けの判定の最適化が焦点じゃないので簡略しているのだと思われる。

タイムトラベル機能の追加

打った手の履歴の状態は、ボード全体の状態のためGameコンポーネント自体に持たせてあげる。そのためにリファクタリングして、Boardで持ってたstateを親のGameに移行するのをState のリフトアップ、再びで実施。
過去の着手の表示、ここが若干わからなかった。Gameのrender関数内のmove変数(引数？)がインクリメントされるのはなぜ？　と思ったけど、JavaScriptのmap関数でhistoryのインデックス番号が表示されているのね。

過去の手番に戻って再度打ち直した時に、誤ってしまった未来の手をすべて削除するロジックなんかもなるほどなーと感心しながら写経しました。

GitHubにpush

Cloud9で作ったチュートリアルコードを自身のGitHubにpushしました。

やり方は下記の記事を参考にしました。
アプリケーション作成時にcreate-react-appコマンドを使うと、Gitもインストールされて手間が省けていいですね。

振り返り

チュートリアルで親子コンポーネントの関係や、stateをどこに持たせるべきかなど、Reactで開発するにあたっての基礎的な部分は掴めたかなと感じてます。
コーディングに関してはまず触ってみることが大事なんだなと実感しました。
入門Reactで同じようにつまづいた人はチュートリアルやったほうがモチベーション上がるしおすすめです。

これでやっとReactの入り口に立ったかどうかというところなんで、チュートリアルの最後にあった改良のアイデアを実装したり、簡単なWebアプリを作るかして精進していきます。 あと、今なら入門React再挑戦してもいいかなーと思ってるので時間を見つけて読み進めます。