進めてる(進めていく)教材とか

• HypertextCandy React入門チュートリアル 完了
• りあクト！ TypeScriptで始めるつらくないReact開発 4/13 完了
• Udemy フロントエンドエンジニアのための React ・ Redux アプリケーション開発入門 完了
• Udemy React Hooks 入門 - Hooksと Redux を組み合わせて最新のフロントエンド状態管理手法を習得しよう！ 完了
• React 公式チュートリアル 完了

今日やったこと

• りあクト！ TypeScriptで始めるつらくないReact開発 第5章 JSXでUIを表現する

りあクト！ TypeScriptで始めるつらくないReact開発 第5章 JSXでUIを表現する

ざっくりサマリー

なぜ React は JSX を使うのか

• JSXとは

  • JavaScript + XML
  • 構文拡張
  • 言語標準に含まれない便利構文を後付でつかえるようにしたもの
  • Babelやtscでコンパイルされることが前提のシンタックスシュガーになってる

• JSX構文はReactElemantオブジェクトを生成する式

  JSX は ReactElement オブジェクトを表現するための JavaScript の拡張リテラル

• JSXはReact固有ではなく,独立した仕様として公開されている

  • Babelプリセットの設定を変更したら他のフレームワークでも使える

• ReactではJSXはUI部分の記述のために使われる

  • 関数コンポーネント → 戻り値でJSXを返す
  • クラスコンポーネント → render()メソッドの戻り値でJSXを返す

• なぜ React は見た目とロジックを混在させるのか

  • フロントではMVCパターンはうまく行かない！？
  • アプリケーションの機能単位で分割されているから
  • 機能単位のパーツとして分割するには見た目とロジックどちらも必要
  • コンポーネント単位で並列に非同期で実行できる

• なぜ React はテンプレートを使わないのか

  • ReactはJSでレンダリングを行う
  • JSXも実際にはオブジェクトを生成するためのJSの純粋な式でフレームワークから特別扱いされることはない

• Viewレンダリング方式には『HTMLテンプレート派』と『JSファースト派』の2大派閥で分けられる

  • HTMLテンプレート派
  • AngularJS, Angular, Vue.js, Ember.js, Aurelia, Svelteなど
  • 動的なWebページと捉えるため,最終的な出力形式のHTMLの形式に固執する
  • JSファースト派
  • React, Preact, Mithril, Cycle.js, hyperappなど
  • 普通のアプリケーションと捉え,プラットフォームがブラウザと考える
  • React, AngularJS, Vue.js, Svelteくらいしか知らない…ってかAngularJSとAngularって別物なんだ。。。
• HTMLテンプレート派ははじめは書きやすいので簡単に見えるが,本格的なアプリケーションを開発しようと思うと覚えることが多くなっていく

• ReactよりもVueやAngularのほうが長い間,検索件数は多かったが調べることが多くて開発者が頻繁に検索していたから

  • 検索件数 = 人気ではないんだなー
  • 事実,npmのパッケージダウンロード数はReactのほうが多い

• テンプレート形式を維持しながら複雑な挙動に対応しようとすると、フレームワークは独自の決まりごとが増えて複雑化していく

  • なるほど。すごく納得がいく。。。
• JSファーストだとJSの力を100%フル活用できるのか。

• コンポーネントをテンプレートとロジックで分けて書いてしまうと,再分割しにくい

  • ゆえにテンプレート形式はコンポーネントの粒度が荒くなりがち
• テンプレート形式だとフレームワークのコンパイラを挟むから,エラーがわかりにくい
• ReactがTypeScriptとの相性がいいのはテンプレート形式じゃなくJSXだから

• TypeScriptはJSXを言語レベルでサポートしている

  • 特別扱い！！
  • TypeScriptやるならReactだな
  • TSがグイグイきてるからやるならやっぱりReactだな

• Reactっていろんなプラットフォームに対応してるんだなー知らなかった

  JSX の書き方

• JSX内で書けるJSのコードは式だけ！分はかけない
• JSXはあくまでJS,HTMLとは違うのでコメントもJSの形式を使う
• childrenは暗黙のprops
• 子要素として文字列を記述するとき,行の先頭と末尾の空白文字が削除され,空白行も削除される
• 属性値の記述でBoolean値でtrueを省略できる
• JSXはテンプレートに見えるけどReactElementオブジェクトを生成するシンタックスシュガー

• Reactコンポーネントにはユーザー定義コンポーネントと組み込みコンポーネントの2種類がある

  • ユーザー定義の場合はコンポーネント名を大文字から始める必要がある
  • 属性の命名規則はJSに合わせる
  • aria-とdata-のみ例外でHTMLの命名規則に合わせる
  • HTML での挙動と異なり、その値が Boolean になってる属性
  • checked
  • disabled
  • selected

まとめ

りあクト パート2入りました！
JSXは他の教材でやってたのでおさらい + 知らなかったところを重点的にって感じです。
テンプレート派とJSファースト派の宗教戦争が発生しそうな内容でしたけど,僕自身はJSファースト派へ入信しようかなと思った次第。

それではまた明日。