ロゴ ロゴ

Reactをいじってみた感想

ReactをGW中にいじり続けて, 思い立つ感想を羅列していきます.

今のところ好印象を持っています.

Vueに比べて自然にコードを書けている（気がする）

Vueでは
1. UI部分を記述するtemplateタグ
2. ロジックを記載するscriptタグ
3. 装飾を取り扱うstyleタグ

に分けられており, さらにscriptタグの中に
1. コンポーネント単位で状態を管理するための宣言ブロック data
2. templateタグから呼び出すメソッドを記述するための宣言ブロック methods

と分けられています.
どこに何があるのかはわかりやすいのですが, 書く時には非常に不自然な書き方を強いられていました.

C99以前の古臭いC言語ソース特有の変数宣言を全部関数ブロック先頭に記述するやり方にそっくりです.

一方Reactはこの点非常にシンプルです.

ReactではUIを記述する際, (ほとんどの場合において)React.FCを返す関数を記述し, それを親コンポーネントから呼び出すだけで描画できます.

また, 好きなタイミングで状態管理変数を呼び出す(setState)を呼び出すことができます.
またコンポーネントに渡す引数(props)には型を非常に簡単に指定できます.

const SampleComponent: React.FC<{id:number}> = (props) => {
    return(<div>{props.id}</div>)
}

たったこれだけで引数に型を指定できます.
また引数という存在自体に型を当てたい場合は

export interface Props {
    id:number;
}
const SampleComponent: React.FC<{Props}> = (props) => {
    return(<div>{props.id}</div>)
}

とできます.
個人的に型を簡単に指定できるので, 気軽にIDEの型判定を受けてストレスフリーに開発できる点が素晴らしいと思いました.

material-uiのデザイン指定が気に食わない

個人的にCSSが気に食わな過ぎて関数コンポーネントにCSSをべた書きしているのですが, コンポーネント自体に割り振られた色を変えるのにstyle:”background:”のように簡単には指定できないようです.(調査不足)
結局わかっていないので, 無理やりstyleを適応する以外に方法の見つからないコンポーネントの色に関しては放置しています.
vuetifyだとこの辺が書きやすくて好きだったのですが, 良くも悪くも自由はないようです.

なぜReact(Vue/Angular)は生まれたのか(メモ書き)

199X年代, JavascriptはWebページ上のおもちゃぐらいの用途で使われていた.

しかし2006代に登場したjqueryというHTML上の要素を直接指定して書き換える, 特定の要素にJavascriptを埋め込むライブラリの登場によって, 複雑なWebページが作れるようになった.(Googleマップのドラッグで移動できる地図はjqueryがなければ移動のたびにリロードを繰り返すUXがゴミサイトになっていた)

こうして複雑なページが生まれいくが, jqueryはHTMLの状態に依存した処理を書くために, 一部の要素を書き換えると, 書き換えられた要素に埋め込まれていた処理やそのほかのjqueryで埋め込んだ要素が動き出すといった不具合を抱えるようになった.

その過程でMVVM等を駆使した方法で凌ごうとするも, 複雑化するページには対応できなくなっていった.

そこで生まれたのがReactである.

Webページ上の複雑な処理がほぼJavascriptで書かれていることに注目し, 状態の管理をすべてJavascriptで行い, 処理によって変わった状態を検出すると, 状態変数と紐づけられたHTML要素を書き換えるというライブラリが生まれた.
これがReact/Vue/Angularである.

jqueryはHTMLに状態を乗せるが, Reactは状態管理をJavascriptで行ってHTMLの要素操作は状態管理の結果を反映する点が異なる.

このHTMLの状態管理をJavascriptで行う仕組みを仮想DOMという.

コメント入力

関連サイト