C#とかphpとか、せいぜいRuby on Railsの人がReact始めて見た

一言でReactって？

その前に昔話

いわゆるレガシーと言われている言語に生きてきたものにとって、ReactとかVueとかって、なんか近寄りがたいんですよね。
というか、JavaScript的なあたりでなんか壁を感じるのです。

VBAとかDelphiとかVisual Basicとかの時代って、画面描画とロジックが完全に分かれて見えるようになっていたのがプログラミングの革命的な所、私とかはそのあたりからプログラムを開始したので、Webプログラムとかの初期にhtmlタグの文字列を生成して返すなんていうことが、えらく不便な世界に感じたものです。

htmlなんて、version3とかの時代にはプレーンテキストの見栄えを良くするだけの印象だったのに。。

今で言うところのmarkdownののりでしたね。

なんか文章を作成するのに毎回一太郎とか開くのは重いし、とは言って「メモ帳」とか「秀丸エディタ」だと文章作成時はよいんだけど後から読むのがつらい。

そんな私によって中間の選択肢をあたえてくれたのが html。はいばーてきすとまーくあっぷらんげーじ でした。

秀丸エディタで作ったメモが ブラウザ（当時は Internet ExplorerかNetscapeか）で見るとキレイに読める！し、リンクも貼れる。
しかもiframeとか使うと、他のメモをそのまま引用できる！

とか思っていたものです。

で、そんな静的コンテンツをBrowserで見る時代からBrowerの中身がインタラクティブになってきて、表示を補完する言語が JavaScriptだったハズなんですよね。。

それが、気付けば node.jsとかいってサーバーサイドで動いているとかって。。

当初は「ロジック」を司るC言語で、スクリーン上にドットを表示する制御をする仕組みがどんどん高度になって、そのうち画面表示とロジックを分離して考えられるようになり、気がつくと画面表示のウェイトが大きくなって、画面表示の観点からロジックを実装しましょう。という、綱引き的な何かを感じるのです。。

で、Reactを理解してみた。。？

• その前にJSXという言語の理解が必要
• JSXを細分化し、部品（コンポーネント）わけて、部品毎にロジックを記載する。という仕組み
• 部品（「子」）を配置する「親」と言う関係で、「親」から「子」に対して、"props"というデータを受け渡して、子を働かせる。（部品の見え方を制御する）→「子」は受け取った”Props"に基づき画面の一部を描画する
• "props"という"状態"で画面の描画を制御する

引っかかった所

• constの後の{} (destructuringというらしい） : https://github.com/lukehoban/es6features#destructuring
  • ECMAScript6の書式 => https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
  • hashのkeyを指定して定数とか変数として再定義をすること
  • 下のケースの場合 action として定義されている hash から、createPage keyに対応するvalue を createPageという変数に読み込む

({ actions }) => {
  const { createPage } = actions
}

• "Ref"とは：https://ja.reactjs.org/docs/refs-and-the-dom.html
  • 「子」要素の制御をクラス内で行う
    • render()でreturn される、Html要素に対して、クラスでnodeを取り出して直接操作ができる
    • render()の returnに含まれる カスタムクラスコンポーネントについて、そのインスタンスを親の方で参照出来る
    • ただし、関数コンポーネントはインスタンスを持たないので、ref属性は渡せない
  • "props"を使わず（データ受渡をせず）に、親から子になんらかの命令を出して子要素の表示を制御する仕組み
  • (React 16.3より) React.createRef() により"Ref"をというオブジェクトを「親」側で作成し「子」に ref属性をつかって受け渡す

 constructor(props) {
  super(props)
  this.myRef = React.createRef()
 }
 render() {
   return <div ref={this.myRef}
 }

• export :
  • 静的なhtmlの世界だと、htmlに複数の javascriptファイル (scriptタグで呼び出す）について、呼び出されたjavascript間で他のjavascriptファイルで宣言された変数とか自由自在に使える（グローバル変数として）。すなわち、一つのファイルに結合されたかのように振る舞う。phpのrequireとか Cのincludeとかと同じ
  • とはいえ、それぞれのjavascriptファイルがサーバーサイドで動くことを考えると、変数のスコープは基本的にファイルで閉じるという考え方になった。そこで、他のファイルで特定の変数（オブジェクト）の利用を可能にするために export 宣言により明示的にオブジェクトを指定しなければならない (昔のdllみたいに、インターフェイスに当たるエントリーポイントとかを定義するイメージ）
• import, require：
  • export 宣言されているオブジェクトを取り込む。