React Crash Course for Biginners 2021 - 前半の感想

はじめに

Youtubeで公開されている、無料のReact講座を受講してみました。
１時間３０分ほどで前半のプロジェクトが終わったので、ここまで何をしたか勉強記録します。

この講義を受けると、こんな流れで進むんだと言うことが伝われば嬉しいですが、私自身の記憶整理にすぎないので、色々お許しください。

講義動画はこちら

www.youtube.com

コメント欄に講義の目次が載っていますので、こちらに従って記事を書きます。

タイムスタンプ

Introduction 00:00

爽やかなエンジニアのお兄さんとご対面。格好いいな〜。

What is React 00:27

リアクトは大きく３つの特徴がある。

１）ReactはClient-side JavaScript library
　モダンなJavaScriptを拡張するためのライブラリ。ユーザーサイドの意味するところは、JavaScriptとHTMLがユーザーのブラウザにロードされたあとは、サーバと通信することなくユーザで独立して動作します。

２）Reactiveなインタフェースを提供する
　一般的なウェブサイトは、何かリンクをクリックするとHTMLをダウンロードして、新しいページが表示されます。つまりリクエストし、レスポンスする作業が発生します。Reactは違って、まるでスマホアプリのようにページの切り替えやUIの操作が行え、素晴らしいユーザーエクスペリエンスを与えます。 なぜならユーザサイドで独立して動いているから。

３）Declarative, component focused approach
コンポーネントを一度作れば、流用可能なエレメントとして自由に使うことができる。
次の画像は今回の講義で作ったToDoアプリ。タスクが３つ並んでますが、コンポーネントを３個記述しているだけです。

<Todo text='Learn React' />  
<Todo text='Master React' />  

... のように。

First React Code 04:15

今回ゴールとするプログラムの全貌をざっくり説明。

Building SPAs 11:40

Widget：ReactはWEBページに埋め込む形で使うことができます
SPA：１つのHTMLファイルと、それを操作するJavaScriptで操作するSingle Page Applicationが作れます。
今回の講義は、SPAを作ります。

React Alternatives 13:41

Reactの他にも、"Angular"、"Vue.js"などが有名なフレームワークとして存在し、それぞれの特徴を説明しています。Reactは、UIの操作のみに特化したフレームワークで、弱点もあります。

Creating a React Project 16:48

Reactのプロジェクトを作成します。
・Node.jsのインストール （私はすでに学習したのでインストール済み）
・Reactのプロジェクト作成　の順で行います。

プロジェクト作成は、"npx create-react-app project-name" で行います。

Setting Up a Code Editor 25:03

上記で作ったプロジェクトには不要なファイルがたくさんあるので削除します。

コードエディタは、Visual Studio Codeを推奨されます。 また、テキストエディタをVS CODEで設定することができ、次のエディタを入れています。いきなり使っているのでその恩恵はわかりませんが、先生と同じ表記になるでしょうから入れるのが無難です。

Diving Into the Created Project 28:07

srcディレクトリに３つのファイル（App.js、index.css、index.js）だけ残りますが、この中でも記述の整理をします。そしてはじめの動作確認として、Helloを出力します。
JSXで記述するので、JSXとは何か、その説明もあります。

How React Works & Understanding Components 34:38

メインスクリプトの「index.js」にて、Reactがどのように動いているのかを説明してます。
importでの読み込み処理、 ReactDOM.render(, ....)　でのHTMLへのレンダリング処理についてです。

More About Components & Styling with CSS Classes 42:15

Hello を出力した箇所をJSXの記述で拡張していきます。 "h1"タグや、"div", "button"を使って記述します。このように一般的なDOM記述ができます。これらを "build-in component"と読んでます。
build-in component と、自分で作った own component で違いがあるのが Props の章で大事なので頭の片隅においておきます。

Building & Reusing Another Component 47:50

前の章で、ToDoリストのリストが１個だけ表示できます。これを量産するとき、誤ってもHTMLをたくさんコピペするなんてことはしてはいけません。Todoという名前の関数コンポーネントを作成して、簡単に量産することができることを学びます。
具体的には、〈Todo /〉'と記述すると、一つのToDoリストが表示できます。

<Todo />  
<Todo />

と書くと、リストが２個出てきます。

Pros & Dynamic Content 55:09

値の受け渡しについて学びます。Todoリストをコンポーネント化することで量産が可能になりましたが、これでは同じ名前のTodoしか作れません。
そこで、あたいの受け渡しをするために "Props"を学びます。

Handling Events 1:00:27

まず、Deleteボタンを押すと console.log()でコンソール画面に文字が出る確認をします。

Adding More Components 1:07:07

Deleteボタンを押すと、オーバーレイ表示で削除を本当にするのかの確認画面が出るように新しいコンポーネントを作成します。

しかし問題が発生します。ボタンを押すと確認画面が出ますが、どこを押しても画面が消えてくれません。それは、確認画面上での操作を状態管理していないためです。状態管理をするにも工夫がいります。

Introducing State 1:12:48

import { useState } from 'react' 　で、状態管理を行うための useState関数を取り込みます。
useStateを使うことで、表示をする、しないといった管理ができるようになります。
また、useStateのことをReact Hooksと呼ぶようです。

次のように変数に設定を行って使います。
const [ modalIsOpen, setModalIsOpen ] = useState(false);

２つの変数を定義する必要があるそうです。 setModalIsOpenは、true, falseなど値を書き換えるのに使います。 modalIsOpenは、 true状態か、false状態かの判定処理に使用します。
どうしてこういうことをするのかはよくわかっていません。。別途勉強。

Event Props 1:21:07

確認画面のオーバーレイ表示をするコンポーネント Modal.js は状態管理によって表示判定ができるようになりました。しかし、このままだと確認画面で押されたボタンを押しても、表示を無効にする関数が実行できません。

    function closeModalHandler(){
        setModalIsOpen(false);
    }

閉じれるようにするために、Modal という作ったコンポーネントに props経由でcloseModalHandler()関数のポインタを受け渡しする仕組みを作ります。
Todoコンポーネント上にある、オーバーレイを表示する処理が次の文です。

            { modalIsOpen && (
                <Modal onCancel={closeModalHandler} onConfirm={closeModalHandler}/>
            )}
            { modalIsOpen && <Backdrop onClick={closeModalHandler} />}

onCancel={closeModalHandler} というのが、Cancelボタンを押されたときに処理する関数のポインタをpropsで渡す処理です。 Modalコンポーネントを見ると、 function Modal(props){}で受け取ってます。

ボタンに埋め込まれている処理は次の一文。(JSXです)

<button className='btn btn--alt' onClick={cancelHandler}>Cancel</button>

Cancelボタンを押すと、cancelHandler関数が実行されます。その処理は次の通り。

    function cancelHandler() {
        props.onCancel();
    }

props.onCancel()です。props経由で受け取った、 closeModalHandlerを間接的に実行しています。
結果的に、Modalを表示する state　は falseになり、表示が消えます。

まとめと次回

ここまでは、コンポーネントの作り方、状態管理、propsの使い方などを学びました。
次回からはもっとディープなことをやりますと言ってました。章的には次のように続きます。

Adding Routing 1:28:15
Adding Links & Navigation 1:45:07
CSS Modules 1:50:28
Outputting Lists 1:56:14
Adding More Components´2:02:04
Props Children 2:11:52
Adding a Form 2:20:31
Getting User Input & Handling Form Submission 2:29:30
Preparing the App for HTTP 2:39:15
Sending a Post Request 2:46:07
Navigating Programmatically 2:51:25
Getting Started with Fetching Data 2:55:07
useEffect 3:04:32
Introducing React Context´3:14:40
Context Logic & Different Ways of Updating State 3:25:43
Using Context in Components 3:31:37
More Context Usage 3:43:48
Summary 3:50:42

ルーティング？！SPAじゃなくなるのでしょうか？　ううん、直近SPAしか実用する予定がなければ、端折りたいです。

先生が明るくて受けてて楽しい授業なので、継続していこうと思います。