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]を押すと

![qiita_20201120_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552413/8d88f71c-3aa2-7098-acdb-a9e3ced93b53.png)

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

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

## チュートリアルの準備
ターミナルとVSCodeを使いながら、オプション２の手順を進める。

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

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

- VScodeで「tutorial」フォルダーを開き、tutorial/src配下のファイルを全て削除する
![qiita_20201120_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552413/5b213ac3-dba4-8930-48e4-26332372d7dc.png)

- メニューバーの[ファイル]→[新規ファイル]をクリックすると、右ペインに空のファイル(Untitled-1タブ)が表示される。
![qiita_20201120_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552413/6cad769d-6313-22ec-db6d-8b164b2ed4ac.png)


- チュートリアルで指示されているサイト(ウェブエディター)の「CSS」を全コピーし、VScodeの右ペインに貼り付ける
![qiita_20201120_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552413/5e1f5fc7-926c-a1ef-b092-b536f4e08c2f.png)

- メニューバーの[ファイル]→[名前を付けて保存]→src配下を指定し、index.cssと入力して[保存]を押す。正しければツリーのsrcの下にindex.cssが表示される。
![qiita_20201120_5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552413/6c721cf5-cd7b-f388-2efb-5554134e17d9.png)

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

![qiita_20201120_6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552413/1ebf4320-7cf8-8fc9-fcfc-5875c8127d06.png)

- ターミナルで「npm start」を実行し、ブラウザからlocalhost:3000に接続する。三目並べの画面が表示されればOK。
![qiita_20201120_7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552413/68ddd029-39cb-8ce1-1ebb-07f6a1691fef.png)

ということで準備完了！

# チュートリアルを進める
HPの記載に沿って進めるものなので、詰まること無く進められた(ちょくちょくコードを書き換えるので、書き換え漏れによるエラーは何度もあったが)。
 
## ターミナル
当初、VSCodeとターミナルをそれぞれ開きながらやっていたが、ふと見るとVSCodeにターミナルなんてものが・・・。

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

![qiita_20201124_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552413/d68e3119-3b9c-9686-13cf-01a9b56c7196.png)

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

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

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

チュートリアルのサイトを開いた状態で、
1. ブラウザの[設定]
2. [その他のツール]
3. [デベロッパーツール]
4. タブの(Reactアイコンのある)[Components]

を選ぶと、画面に対するコンポーネント構成や各コンポーネントの状態を確認することができた。
![qiita_20201134_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/552413/1c4734ad-e528-335d-ef1f-0d332298c913.png)

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

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

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

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

見様見真似で１に着手してみたが、今の所どうにもうまくいかない・・・なので、次は[こちらのガイド](https://ja.reactjs.org/docs/hello-world.html)を読み進めてから、再チャレンジしようと思う。

# 雑感
- 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)になっていた。