フロイドの狂気日記

時は流れ、曲も終わった。もっと何か言えたのに。

PR

jqueryおじさんがreactの門を叩いたら

PR

ボロ布をまとったjqueryおじさんであるところの僕が、いよいよ食うに困るようになり、いや、厳密に言えばリモートワークをきっちりできる働き先に困るようになり、どうにかならぬものかと思案した。

 

jqueryおじさんが働ける案件は簡潔明瞭に言えば「意識が低い」職場である。gitやslackぐらいは使うだろうが、問題があれば顔を突き合わせた会議で解決するのが普通だ。僕はこのご時世そういったことはなるべく避けたい。しかし今まで働いてきた会社達がIT化が少々なされた旧態依然の会社であるということはわかっている。だが完全リモートワークにならず、市街地に勤務した結果COVID19に感染してひどい目にあうぐらいなら働かない方がマシだ。しかし働かねば金がない。

 

橋の下で7年落ちのMacbookを眺めつつ、ため息をついて出した結論が、巷で流行っているreact道場の門下生になることだった。しばらく連絡をとっていない営業曰く、東京でreactを使う案件はたくさんあって人に困っているし、遠隔地でのリモート勤務でも問題ない会社が多いですよ、という話を聞いたからだ。それもコロナ前ではあるが。

 

そんなわけで橋の下へ帰る途中の社会の中心地、一等地にあるreact道場の金ピカでイケてるタワマンの門を叩いていたのである。

 

前置きが長い。

note.com

100円ほど投げ銭をして、ここにある5Lessonをこなした。感想は、そうか、あかんか。ワイらがやってきたことはもう通用せんか、ということである。jqueryおじさんが認識してきた世界を逆転させたんだな、というのが思いついた表現だ。reactが流行っている理由もなんとなくわかった。

 

jqueryPHPの世界におけるフロントエンドの価値観とは、View(テンプレ、HTMLファイル)が太陽であり、その周りをjqueryで書かれたjsファイルが回っているというイメージだ。ViewにはHTMLタグが書かれて、それに対して必要とあればjsの処理を追加して呼び出す。言うなればjsは部品である。htmlタグに書かれたidやnameがjs呼び出しのトリガーとなる。

 

例えばよくある登録画面。そこには名前、住所、年齢とメールアドレスを入力する欄が並べられていて、一番下に登録ボタンと戻るボタンがある、という具合だ。

 

そしてjqueryおじさんの世界では、登録画面のViewファイルに入力欄のタグがすべて書かれており、郵便番号ボタンを押すと読み込まれたjsのonClickイベントが走り、ajax処理で住所を自動で紐付け呼び出す、などというのが基本的なパターンとなる。そこでは登録画面なるViewテンプレこそが太陽であり、中心だ。そうしてそこに書かれた部品をクリックするなり、入力した際にそれぞれのjqueryで書かれた処理が走るのだ。

 

ではreactの世界とは何か。

今までViewこそが中心だったが、reactそのものが取って代わったと言えるだろう。reactでは、Viewファイルというのがない。(もしかしたら併用できるかもしれんが)jsファイルにhtmlタグ出力関数を書くのだ。これの意味するところは、最初からViewを構成する部品をバラバラに設計して、関数としてまとめるということだ。

 

これによってreactのアーキテクチャそのものが中心となり、Viewファイルは完全に消滅し、部品として揃えられたHtmlタグの呼び出し関数郡によってViewファイルを構築する、というイメージだ。だからjqueryおじさんにとっては驚天動地のできごとといえる。今まで地球は平面だと言っていたじゃないか!

 

jqueryおじさんはまずViewファイルを書く、というルーティンから始める。そこに必要に応じてjqueryで処理を追加するのだ。

 

だがreactを採用したならば、各Htmlタグを出力する関数をcomponentに書いていくことになる。Viewファイルは書かず、最終的に見せたい画面があり、それを構成するタグを出力する関数をひたすら書く。

 

例えば先程の登録画面で言うならば、それぞれの入力欄が出力される関数を書いたcomponentファイルを作成し名前をText.jsとでもして保存する。そうしてPostCode.jsというファイルを作り、propsを定義し、郵便番号ボタンを押された時、住所テキストに自動で挿入されるとする定義を書く。ブラウザでhogehoge.com/indexにアクセスされたなら、その2つのjsファイルに書かれた関数を読み込み、登録画面が表示される、というようなものだ。jsファイルだけで画面を構築するのだ。

 

reactではcomponentというjsファイルが中心であり、そこに書かれた関数呼び出しによって、Htmlタグを画面に出力していく。そのため設計段階でどれだけ画面に表示する部品を分割するか設計する必要があるだろう。jqueryおじさんにとっては全く違う世界とも言える。Htmlファイルを純粋に書く、ということもなさそうだ。reactの文法に従ってstatus変更の処理をHtmlタグ内にどんどん埋め込み、画面をクリックしたり入力されるたびに、定義された関数イベントが走る。

 

南無三。今までの世界は死にもうした。しかもそれがどんどんと広がっているそうな。reactが流行る理由を考えると、プログラミングの宿命として似たような処理を何度も書くという運命があり、それを少しでも減らせる構造にできるかもしれないという魅力がありそうだ。props、component、hooksの関係を上手く使えば使い回しができそうだ。一度機能を定義すれば関数コールするだけで良い的な。jqueryおじさんになじみのidさえも関数内でつけたりする。これによって固定的な定義をなくすこともできるだろう。

 

時代は変わっちまった。ドラスティックな学び直しもいいところだ。

しかもこれに加えてPHPなりpythonなりのサーバーサイドの技術との連携もあるわけで。それだけでなくCIだとかのテスト関係までしだすと一体、どれほどの勉強量が必要だというのか。しかしこういった最先端の技術を取り入れているような会社は生き残りやすそうでもあり、適切な自宅勤務によって疫病を避けることができそうでもあり。やっぱつれぇわ。

 

もういいや

もういいや

疲れ果てちまった

そういって

そういって

ここまで来たじゃないか

イメージはいつでも、雨のち晴れ!