CEP開発にReactを導入してみました。

というのも、、、いささか古くなったので自社サイトのリニューアルを検討しています。
どうせなら、現在のphpを基調とした仕様から脱してみようと考えています。
それならばReactかなということで触り始めてみました。
導入のチュートリアルをこなし、まず思ったのが
html、css、jsという根本こそ同じだけれど書き方とか考え方とかは結構別物ってかんじです。
率直な感想はモダン。

いきなりこのReactを用いて本番でサイトのリニューアルに手をつけると、
すぐに再リニューアルが必要になるようなモノになるか
最悪は途中で諦めてReactの導入を断念、元に戻るになりそうだなと感じたので
すこし肩慣らしをしようということで、SPAでのUIを作成するアイティアが浮かびやすい
CEPをいくつか作ることでテストパイロットとしてみようと思います。

上のアイキャッチ動画はExtendscript、CEP、Reactそれぞれで作った
同じ機能の歴代タイムライン横スクリプトローンチャを並べたものです。
またUIに関係はありませんがCEPとReactのホストになるExtendscriptは共通です。

• Extenscript: ボタンのみ。分類なし。
• CEP: パネルごと
• React: ページごと

という形でカテゴリ表示しています。

開発環境

ざっくりと

• Webpack 5.95
• React 18.3.1
• Typescript 5.5.4

です。

いつもながらといいますか、毎度毎度といいますか環境設定をするのが本当に難しい。
意味がバッチリわかっている方なら、サクッと必要な環境を作れるんでしょうけれど
このまま続けていってブレイクスルーなしにその域に達する日が来るのかどうかすら怪しいです。

何と言っても、設定が包括的ではなくwebpack、typescript、npmなどそれぞれに設定する必要があり
しかも、それぞれに無関係というわけではないのがコトを複雑かつ深刻にしていると感じます。
ただし、それゆえに柔軟にきめ細かい設定できるわけです。むじーなー。
勉強していきつつ慣れるしかないのかも。

React

htmlやjs、cssの知識がないと扱えないが、知識があればサクッと扱えるというわけではないですね。
こちらも慣れが必要なのは間違いないです。
しかし、めちゃ難しいかというとそういうわけでもなく
今までhtml+js/tsでやっていたようなことをサクッと完結なコードで書ける場合も多々あり
身につけられたら主軸として便利に使えそうだと感じています。
Next.jsもReactのようなので是非とも身につけておきたいとも思います。

ルーティング

あっさりとそしてちゃんとつまずきました。
とはいえCEPをSPAにしてみたかったので導入はマストです。
このためのReactといっても過言ではありません。
調べつつ、Cursorでgptにお伺いを立てつつwebpack dev serverで開発をすすめている間は
ルーティングできるようにできたのですが、CEPとしてデプロイしてみたところ、、、
全然ダメ。びびった。お先もUIもまっくら闇でござんす。
ローカルサーバーも立ち上がってるのに、、、まったくわからん。
気を取り直して、使用したことのあるCEPでルーティングしているんじゃないかと
思い当たる節があるのであたってみました。
それはBodymovinなのですが、Githubにソースコードがあるので
cloneしソースコードをみると、、、ルーターはコメントアウトしてある。
どうやら、組み込んではみたがやはりルーティングがきかなかったのか、別の手法を検討し導入したのか。
またはその両方か。
であるなら、これ以上の無知な人間の深追いは時間の無駄になりそうだということで
一旦リサーチの方向を変更してみました。

以前目にしたことのあるReactのデスクトップAPPに関することを検索し
情報を積み重ね、やっとのことでルーティング可能な状態になりました。
それにしてもサクサク画面遷移するのは気分がよいです。

Others

そのほかにも引数の渡し方とか特有な状態設定関数
developmentでビルドするとエラーが出るなど色々つまづきましたが
割と簡潔で綺麗なカタチで完成させることができました。

近々で次もまた簡単なCEPをReactで作ってみようと思います。
難所だろうと想定していたルーティングがちゃんと難所で
それを一応超えることができたので少し楽な気持ちでチャレンジすることができそうです。