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

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

今日やったこと

• りあクト！ TypeScriptで始めるつらくないReact開発 Reactをめぐるフロントエンドの歴史

りあクト！ TypeScriptで始めるつらくないReact開発 Reactをめぐるフロントエンドの歴史

ざっくりサマリー

Web Components が夢見たもの

• Googleエンジニア Alex Russell が提唱した『Web Components』

  • Custom Elements: HTMLにユーザー独自のDM要素を定義することを可能にする
  • Shadow DOM: 要素をカプセル化してメインのツリーからアクセスできなくすることで、HTML や CSS に隔離されたスコープを形成する
  • HTML Templates: Custom Elements の内容を記述する HTML のマークアップテンプレートを定義する
  • HTML Imports: HTML ドキュメントが、他のファイルに記載された HTML コンテンツを取り込めるように する
  • HTMLを再利用できるようにコンポーネント分割使用という提案

• Web ComponentsのCustom Elements ≒ ReactのJXS

  • Web ComponentsのアイデアをJSライブラリとしてReactが昇華

• ベンダー間の論争でWeb Componentsの使用が定まるまで時間がかかった

  • 技術よりも合意とかのほうに時間かかるのは仕事に似ている
  • 思惑を上手くコントロールできる人は仕事ができる

• 結果的にWeb Componentsの目指してた境地にはReactが先にたどりついた

  • Web標準ではなくJSファーストなUI構築ライブラリという形で

    Reactの誕生

• Facebookエンジニア Jordan Walke が個人で実験的に始めた
• JSXの元ネタはXHP【PHPのコード内でXMLリテラルを記述してUIを作成するフレームワーク)

• FacebookがInstagram買収 → FacebookエンジニアがInstagramを再構築 → ReactをFacebookのインフラありきの設計から切り離し独立プロダクトへ

  • Instagramの買収がなかったらReactがオープンソースになってなかったかもなのか。。。

• ロゴやテーマカラーはインスタのデザイナーがデザイン

  • なんとなく納得した。聞いたからそういう気になっただけかもしれないけど。

    React を読み解く 6 つのキーワード

• 歴代のコンセプトをまとめると6つのキーワードに集約される

• Declarative(宣言的)

  • 関数型プログラミングを用いてコンポーネントやデータフローまでも宣言的であろうとしている
  • 宣言的UIのコンセプトは他の言語やフレームワークにも影響を与えている
  • UIが宣言的だとコードが読みやすく,挙動も予測しやすく,テストやデバックがしやすい

• Component-Based(コンポーネントベース), Just The UI(UI にしか関知しない)

  • 見た目と機能がカプセル化したコンポーネントの組み合わせで複雑なUIを構築する設計思想のこと
  • modelやview modelの概念がコンポーネントの切り分けを阻害している
  • たしかにVueはコンポーネントの切り分けが難しく感じたな
  • 変化の早い世界ではワンストップであることは技術の進歩の妨げになる
  • Reactをフレームワークとしないことで,エコシステムがより優れたものになっている
  • フレームワークじゃないことでコミュニティを巻き込んでReactは進化している

• Virtual DOM(仮想 DOM)

  • jQueryなどのDOM操作ライブラリは1つのHTMLに対して任意のDOMを特定して操作していた
  • 第二世代(Knockout,Ember.jsなど)ではHTMLテンプレートを使えるようにするのを目指していた
  • Reactの場合,ルートレンダリングが発火 → ツリーを下っていった子孫のReactElementsが連鎖起爆 → すべて展開されたツリーとなる
  • 要素ツリーはメモリにキャッシュされる → メモリに展開されたイミュータブルな要素のことを仮想DOMという
  • ReactElementsに設定されているpropsの変化をトリガーにコンポーネントが再レンダリングされる
  • 新しい仮想DOMとキャッシュされた仮想DOMが比較され,差分だけを変更する

• One-Way Dataflow(単方向データフロー)

  • 双方向データバインディングにすると1つのユーザーインタラクションで何が変化するのか影響を予測しづらくなる
  • シンプルなアプリでは双方向データバインディングは直感的でいい
  • 大規模になるとスパゲッティになってしまう
  • 単方向データフローと関数型プログラミングは相性がいい
  • Fluxデザインパターンは単方向データフローをグローバルな状態管理に応用したもの

• Learn Once, Write Anywhere(ひとたび習得すれば、あらゆるプラットフォームで開発できる)

  • ネイティブアプリも作っていきたいからReact選んでよかったなーと改めて思う

まとめ

Instagramが買収されてなかったらReactもオープンソース化されてなかったかもと考えると,そういった企業間の動きが技術の発展に寄与してるのになんだか感動している自分がいます。
技術の進歩が早いITだからこそ,技術革新の瞬間に立ち会えるときがやってくるかもしれないと思うとワクワクしますね。

それではまた明日。