JS初心者がReactを始める上でつまづいたこと

Reactを始めてから１週間がすぎ、色々とわかってきたことやわからないことも増えてきたので復習も兼ねて投稿してみます。
Reactをこれから始める方やjsを始めて触る位の方を想定しています。

ちなみに筆者はjs自体もreactと同時に始めた程度のため、必ずしも適切な表現を使っているとは限らないことにはご注意ください。

ReactはSPAである

SPAとはSingle Page Applicationのことです。
どこにでも書いていることだとは思いますが、これと『SPAでない』ものの差を考慮しておかないといけません。
なお、SPAは『一枚のhtmlファイルに対して動的にjsで変更を加えながらブラウザに描画する』ことができます。

どんな時に迷った？

Flask(Pythonのサーバーサイドフレームワーク) + jQueryで書かれているソースコードをReactで書き直そうと思った時

どういう風に迷った？

Flask+jQueryでは(rails, djangoでも同様だと思いますが)、render_templateなど「htmlファイルをレンダリングのためのメソッド」を呼び出すことで、
『別々のhtmlファイルを各ページに対してレンダリングしている』ので、それをどう
『一枚のhtmlファイルに対して変化を及ぼすように変更するのか』という点

どういう風に解釈した？

FlaskはAPIサーバーであり、JSON形式のデータをReactに渡すためのものだと解釈した。
つまり最初に描画する1枚のhtmlファイルはrender_templateを使って呼び出すことが必要であるものの、それ以外の(ボタンを押すなどの)処理については201 Createdなどをデータと一緒に渡すためのものとして活用するようにした。

データの流れが違う

上記の問題と関連性が強いですが、Flask+jQueryのものを書き直そうとした時に悩んだことです。

どういう風に解釈した？

• Flask+jQueryの場合:
  • Flaskでhtmlをレンダリング -> レンダリングしたhtmlファイルが内部に書かれているjsファイルを読みに行く
• Flask + Reactの場合:
  • 最初のページの描画:
    • Flaskでhtmlをレンダリング -> レンダリングしたhtmlファイルが内部に書かれているjsファイルを読みに行く
  • 2回目からの描画:
    • Reactで書かれたjsファイルがユーザーの入力に応じてデータをFlaskに要求　-> FlaskはJSON形式のデータをReactに返す -> 変更箇所を描画

と解釈した。

SPAのHTMLファイルは一枚とは限らない

SPAを理解した気になったあと、理解しづらかったのがこれについてでした。

どんな時に気付いた？

(大きなコードを書いていた時)どう考えてもページ遷移した方がいい(orしたい)と思った。

どういう風に迷った？

SPAという名前なんだからhtmlファイルは１枚なんだろうという思い込でしまっていた。

どういう風に解釈した？

SPAは『一枚のhtmlファイルに変更を加えながら描画する』ものであって、それがページ全体として必ずしも一つでなくてもいいと考えた。
でも、コンポネントを使いまわせるとことがReactの強みなので、別ページのhtmlであってもコンポネントは使い回せばいい。

具体的には、例えばfacebookなどを見ればいいと思いますが個人ページのボタンをクリックした時、urlが遷移します。
デフォルトではSPAではページ内であればurl遷移はしない(後述していますが同HTML内で遷移している可能性もありますので断言はできませんが)ので、仮想DOMなのに全とっかえしないといけない程度に激しいコンテンツ変化等の場合であれば、htmlファイルを分ければいいのかなと思いました。

SPAでもHTML内でURL遷移はすることがある

これを『ルーティング』と呼ぶそうです。
もっとわかりやすく言えば、『ユーザーからの入力を受け取った時、それに応じて表示させるページを出し分ける』処理のことを言います。
通常SPAでは同html内で動作が行われた時、そのURLは遷移しませんが、履歴などを残したい時などで苦労をします。

どんな時に気付いた？

tutorialなどで作るメモアプリを拡張しようとしていた時に、『同じhtmlファイルだけどurlの遷移を行いたい』と思った時

どういう風に迷った？

Flaskでサーバーサイドの処理を行なっていたのですが、『データを渡すと同時にhtmlファイルを新たにレンダリングしないといけないのか？』と考えてしまった。具体的にはこんな感じにしないといけないのかなと思った。

mistake.py

app.route('/')
def index():
    return render_template('index.html')  # htmlを描画するための関数

app.route('/hoge', methods=['POST'])
def hoge_data():
    json_data = {}  # 何かしらのjsonデータ
    return json_data

app.route('/hoge')
def hoge_page():
    return render_template('index.html')

どういう風に解決した？

完全にこれの解決策に合致するものだったので、react-router-domを使った。
例としてはqiita - react-router@v4を使ってみよう：シンプルなtutorialなどを見るとわかりやすいと思います。

迷ったらFacebookを見ればいい

Reactを始めてやって行く中で『どういうページを作りたいのか』などの指針が存在すると思います。
それでいうならば結局、Reactで作って行くにあたりプラクティスの多くはReactを作ったFacebookに詰まっていると思いますので、Facebookを見ながらコンソールにらめっこをするのが一番いいと思います。