Zenn
Open8

フロント初心者がReact.jsでWebアプリを作ってみる時のメモ

JavaScript
React
初心者
shunshun

最初のレベル
Python経験者、JSは読み流せる程度
VueとかReactとかがあるのは知ってるってくらい

shunshun

まずは何よりもチュートリアルを写経してみる。

チュートリアル：React の導入 – React

環境構築の方法も理解したかったので、ブラウザ（CodePen）を使って実装する方法ではなく、ローカル開発環境を立てる方法を選択。

開発の流れやどう書いていくかをざっくり把握できた。Stateのリフトアップが新鮮。

以下、ためになった部分のメモ。

  • プロパティに関数を渡すとどうなるか

    <button className="square" onClick={()=>{console.log('click')}}>

    と

    <button className="square" onClick={console.log('click')}>

    の違いは、上は関数を渡しているためクリックされると稼働するのに対し、下はレンダリングされるたびに稼働してしまう点。

  • Stateをリフトアップする理由
    子コンポーネントでStateを管理する場合、親コンポーネントがStateを確認したい時には子コンポーネントに問い合わせる必要がある。そういったコードにすると、壊れやすく、リファクタリングしづらいものになってしまう。別の子コンポーネントがStateを確認したい時は、親へ問い合わせ、親がStateを保持している子に問い合わせる、という複雑なフローになってしまう。親コンポーネントがStateを管理することで、子コンポーネント以下はシンプルにpropsを親から渡してもらうだけで済む。

  • リフトアップの方法
    子コンポーネントが親コンポーネントのStateを更新するにはその関数を子コンポーネントに渡す。

  • イミュータビリティの重要性
    変数を直接変更するのではなく、
    const squares = this.state.squares.slice();としてコピーを生成したり、
    var newPlayer = {...player, score: 2};として別変数を定義したりすることで、
    変更の検出や、変更履歴の保持が簡単になる。

  • 子コンポーネントが何を受け取るか分かりやすくする

Square = (props) => {
  return(
    <button 
        className="square" 
        onClick={() => props.onClick()}
      >
        {props.value}
      </button>
    );
}

この場合、コードを読まないとどんなpropsを渡せば良いかわからない。

Square = ({value, onClick}) => {
  return(
    <button 
        className="square" 
        onClick={() => onClick()}
      >
        {value}
      </button>
    );
}

この場合、受け取る引数名を見ればどんなpropsを渡せば良いかわかる。

shunshun

以下の記事に、DOMって何？とかReactの何が良いのか、とかがわかりやすく書いてある。

React入門チュートリアル (1) Reactとは何か | Hypertext Candy

この記事の重要そうなところだけ抽出。

React は、自称「ユーザインターフェース構築のための JavaScript ライブラリ」です。少し抽象的なので Web の文脈で一言で表現すると、DOM 操作ライブラリです。

DOM＝Document Object Modelの略で、HTMLやXMLを扱うためのAPI。

React を使ったほうが、最適化の仕組みが備わっているぶん、複雑なアプリであるほど、速度的なアドバンテージが期待できる

仮想 DOM の仕組みは、React 以外に Vue.js など他のフレームワークでも採用されています。

React では直接的な DOM 操作をコーディングしません。props（属性）や state（状態）といった React が管理するデータを更新することで、あとは React が処理してくれます。

React では DOM 更新をライブラリが隠蔽しているので、データ更新処理などのビジネスロジックを DOM 更新と切り離して記述することができます。

つまり、データの取得と更新とともにDOM更新も書くと、コードがごちゃつき読みにくくなるが、ReactなどのDOM更新を隠蔽してくれるライブラリであれば、シンプルに書けるようになる、ってことか？

shunshun

  • SSRとSPA
    SPA, SSR, SSGの違いについて図解でまとめてみた

  • webglとは
    閲覧者のOSに関係なくブラウザーを通してデバイスのGPUにアクセスすることができる技術。
    JavaScriptからAPIとして利用でき、高度な3DCGを表現できる。
    このWebGLの利用方法は複雑かつ冗長なコードを書く必要があり、学習コストが高い。そこでそれを簡単に利用できるようにするために「Three.js」が生まれた。
    Three.jsはWebGLを簡単に扱えるようにしたラッパーライブラリ。
    https://threejs.org/