2021/11/22

学んだこと

#01 新・日本一わかりやすいReact入門【基礎編】Reactの基礎知識

https://youtu.be/XKSYF2aZnkQ

わかったこと

  • 今のところは出てくる単語ほとんどが知らない言葉
  • Reactとは 
  • ブラウザはHTMLという文書、ドキュメントを表示するもの
  • HTMLはツリー構造
  • DOM＝Document Object Model
    • HTMLにアクセスする窓口
  • DOMを直接変更してHTMLを再描画するコストが高い
    • これをReactが解決した
      • 仮想DOM
        • ブラウザのDOMツリーをJavaScriptのオブジェクトとして扱う
        • ブラウザ側ではなく、JavaScriptエンジンのメモリを使う
        • JavaScriptで管理することができる
        • 差分があったところだけを再描画
    • 再描画＝レンダリング
    • コストが高い＝複雑な処理をする
  • 差分描画のおかげでReactは効率的に必要なところだけを書き換えられる

わからなかったこと、困ったこと

  • DOMの概念がまだよくわからない
  • 仮想DOM…実際のDOM…？
  • DOMでひっかかってしまって、差分描画もわからない 
    • 南先生が「今はそういうものだって流して大丈夫」ということだったので一旦良しとさせていただきます

#02 新・日本一わかりやすいReact入門【基礎編】JSXの記法

https://youtu.be/gLbTluYSb_U

わかったこと

  • JSXがないとReactが書けない
  • JSXとは
    • JavaScriptの拡張言語
    • facebook社が開発
    • 「JavaScriptというプログラミング言語」と「HTMLというドキュメント言語」をかけあわせて使えるようにした
      • HTMLっぽい記述をしているけど、その中でJavaScriptが使える
    • テンプレート言語とは全く違う
    • 最終的にReact要素を生成する
  • なぜJSXを使うのか？
    • Reactで書いたものはJavaScriptでしかない
    • 画面描画するときは、JavaScriptからHTMLのドキュメント言語に直して描画している
    • React.createElementをタグが増えたときに毎回書くの大変
      • React.createElementはReact要素を生成する式
    • HTMLライクにかけるようにしたのがJSX
  • JSXは何をしているのか？
  • JSXの基礎文法
    • Reactライブラリをインポートする必要がある
      • おまじないみたいなもの
    • .jsx という拡張子にしてファイルを扱っていく
    • return文の中がJSXの構文
    • 基本はHTMLと同じ
    • classは「className」
      • JavaScriptでclassと書くとオブジェクトのclassになってしまうので、明示的に分けている
    • キャメルケースで記述する
      • 例 imagePath
        • ２つめの単語は大文字
      • JavaScriptは基本的にキャメルケース
      • JavaScriptはハイフンを理解できない
    • ｛｝内で変数を扱える
    • １つのタグで完結するときは閉じタグが必要
  • JSXの特殊な構文
    • 必ず階層構造にする！！！
    • 並列で並べたいけど、階層構造にしなくちゃいけなくて困ったときは <React.Fragment>で囲む
      • JSXの特殊なタグ
      • HTMLになるときは空のタグになる
      • <></>で書いてもOK
      • タグが１つのときは囲わなく良い
    • 変に<div>タグで囲わない
      • <div>タグはHTML的にはなんの意味もない

わからなかったこと、困ったこと

  • 「Reactライブラリをインポートする必要がある」？

本日の感想

  • 身近に先生がいるというのはありがたい…
  • キャメルケースの最初は小文字だったのね（大文字だと思っていた）
  • キャメルケースとかは各々会社のルールとかで決めるのかと思っていた…
  • HTMLも改めて復習したほうがよさそう
  • 現状わからないことは進めていく中でわかっていきそうなので、一旦そのまま突き進んでいくぞ〜