Webアプリ未経験者がReactチュートリアルに手を出す

HelloWorldは出来たけど、次はどこに行こうか・・・と悩んだが、幸いにして公式のチュートリアルが日本語化されていたので、ここを進めることにした。

チュートリアル：Reactの導入
https://ja.reactjs.org/tutorial/tutorial.html

開発エディタ(Visual Studio Code)

どうもLinux＝viというのが染み付いてしまっているのだが、GUIの開発環境をまともに使ったことが無いことだし、この機に何かしら触ってみることにした。

自分のイメージはEclipseのガリレオぐらいで止まっているのだが、既にEclipseは過去の産物のようで・・・ということで、マイクロソフト社のVisual Studio Code(VScode)を入れる。

Microsoft Visual Code Studio
https://code.visualstudio.com/

1. 開発環境はLinux Mintなので「.deb」をダウンロード(執筆時点：v1.51.1)
2. ダウンロードしたファイルを右クリック→[GDebiパッケージインストーラーで開く]→開いたダイアログで「パッケージのインストール」を選ぶ
3. インストールが終わったら、ｍマーク→プログラミング→Visual Studio Codeを選ぶとVScodeが起動する
4. しかし、メニューが全て英語なので、以下の手順を経て日本語表示に変更する
   5. メニューバーの[View]
   6. [Command Pallete]
   7. [Configure Display Language]
   8. [Install Language Packs]
   9. 「日本語」を選択して「インストール」
   10. VScodeを再起動
5. 試しにメニューバーの[ファイル]→[フォルダーを開く]→helloworldを作ったときのフォルダを選んで[OK]を押すと

お、なんか作ってる雰囲気が出てきた。

Reactチュートリアル

開発エディターの準備が出来たので、改めてチュートリアルを進める。

チュートリアルの準備

ターミナルとVSCodeを使いながら、オプション２の手順を進める。

• ターミナルからチュートリアル用の新しいプロジェクトを、create-react-appを使って作成する。

$ npx create-react-app tutorial
  :
　(しばらく時間がかかる)
　：
Happy hacking!
$

• VScodeで「tutorial」フォルダーを開き、tutorial/src配下のファイルを全て削除する
  

• メニューバーの[ファイル]→[新規ファイル]をクリックすると、右ペインに空のファイル(Untitled-1タブ)が表示される。
  

• チュートリアルで指示されているサイト(ウェブエディター)の「CSS」を全コピーし、VScodeの右ペインに貼り付ける
  

• メニューバーの[ファイル]→[名前を付けて保存]→src配下を指定し、index.cssと入力して[保存]を押す。正しければツリーのsrcの下にindex.cssが表示される。
  

• 同様の手順で「js」の内容をコピー＆ペーストした上で、先頭行にチュートリアルページで示されている３行を加え、index.jsという名前で保存する。

• ターミナルで「npm start」を実行し、ブラウザからlocalhost:3000に接続する。三目並べの画面が表示されればOK。
  

ということで準備完了！

チュートリアルを進める

HPの記載に沿って進めるものなので、詰まること無く進められた(ちょくちょくコードを書き換えるので、書き換え漏れによるエラーは何度もあったが)。

ターミナル

当初、VSCodeとターミナルをそれぞれ開きながらやっていたが、ふと見るとVSCodeにターミナルなんてものが・・・。

[ターミナル]を選ぶと開いているフォルダー配下で始まるので、ここで「npm start」を実行すればすぐに動作確認ができる。また、コードを保存すると自動的に反映されるが、コードにエラーがあった場合にこのターミナルにエラーメッセージが表示されるのが便利だった。

てか、今時当たり前なのだろうが。

なお「sudo npm start」としないとエラーが出まくって開発サイトが起動しなかったが、そういうものなのだろうか。

React Developer Tools

React用の開発ツールはChrome(Chromium)やFireFoxの拡張機能として提供されている。

チュートリアルのサイトを開いた状態で、

1. ブラウザの[設定]
2. [その他のツール]
3. [デベロッパーツール]
4. タブの(Reactアイコンのある)[Components]

を選ぶと、画面に対するコンポーネント構成や各コンポーネントの状態を確認することができた。

このチュートリアルでは学習内容の都合上、情報の格納域でちょくちょく変わるので、どのコンポーネントで保持されていて、どう書き換わっているのかが見ることが出来、コードと動作の理解の一助になった。

参考：https://qiita.com/s_harada/items/3a06567c1e7d8ec8b178

応用問題

チュートリアルの最後には以下の「改良のアイデア」がリストアップされている。

1. 履歴内のそれぞれの着手の位置を (col, row) というフォーマットで表示する
2. 着手履歴のリスト中で現在選択されているアイテムをボールドにする
3. Board でマス目を並べる部分を、ハードコーディングではなく 2 つのループを使用するように書き換える
4. 着手履歴のリストを昇順・降順いずれでも並べかえられるよう、トグルボタンを追加する
5. どちらかが勝利した際に、勝利につながった 3 つのマス目をハイライトする
6. どちらも勝利しなかった場合、結果が引き分けになったというメッセージを表示する

見様見真似で１に着手してみたが、今の所どうにもうまくいかない・・・なので、次はこちらのガイドを読み進めてから、再チャレンジしようと思う。

雑感

• Webアプリ未経験者からするとReactとその他との差異は感じ取れなかったが、チュートリアルが言う要素、コンポーネント、Props、Stateについては何となくわかった気はする
• 画面系はすぐに動きが見えるので楽しく、うまく動かないとストレスがすぐに溜まってしまう・・・

補足：Reactのバージョン確認

インストールされているReactのバージョンを調べたいときの手順は以下の通り。

1. ターミナルでプロジェクトの配下に移動(cdコマンド)
2. 「npm list --depth=0」を実行すると、Reactを含めたmoduleのバージョンが表示される

~/work/web/helloworld$ npm list --depth=0
helloworld@0.1.0 /home/xxx/work/web/helloworld
├── @testing-library/jest-dom@5.11.6
├── @testing-library/react@11.2.0
├── @testing-library/user-event@12.2.2
├── react@17.0.1
├── react-dom@17.0.1
├── react-scripts@4.0.0
└── web-vitals@0.2.4

この時点での最新(17.0.1)になっていた。