経緯
本プロダクトのそこそこ大きめのアプリケーション1 を React で書いてます。
「慣れてるから」っていう理由で、別案件で必要になった LP2 を React + styled-components で SPA として書きました。つらかった。
つらかったので、どうするか考えました。
LP は当時 3,4 ページくらいの構成でした。
つらポイント
- JSX に不慣れなデザイナーがマークアップする
- Biz のひとに「このページにこのタグ埋め込んでください！」ってインラインの script を渡されるけど、ページごとに HTML ファイルがあるわけではないので "努力" が必要になる
- 複数の OGP を設定する場合とても面倒
- styled-components で emmet が完全には使えない （下に追記あり）
- 最初のページのロードで他のページについての js も一緒にロードする必要があるので若干勿体無い
どうしたか
結果的に、React + Sass(scss) で運用しています。
JSX に不慣れなデザイナーやコーダーがマークアップする
慣れてもらった。あざす。
あと、emmet が使えないのもつらそうだったので『vscodeのjsxでemmet』を参考に vscode で emmet を使えるよう設定してもらったので少しは楽になったかも。（自分もこれ設定できるの知らなかったのでうれしい）
Biz のひとに「このページにこのタグ埋め込んでください！」ってインラインの script を渡されるけど、ページごとに HTML ファイルがあるわけではないので "努力" が必要になる
継続的に "努力" しています。
ある程度は Google Tag Manager を駆使しています。
仕込めばそれで済むので、最初だけ頑張ればあとはそんなにつらくないかも。
複数の OGP を設定する場合とても面倒
幸いこれはまだ必要になってないので対応してない。
必要になったらどうしようかな、、
追記： この記事、 functions で OGP の情報の載った HTML の動的生成 & 本体ページへのリダイレクトをやってたの、良さげだった。これはアリ
styled-components で emmet が完全には使えない
これは style の記述を Sass(scss) に移行して解決しました。
もともと僕らフロントエンドエンジニアだけで開発していたので脳を止めて styled-components を選択しましたが、途中から入ってくれたデザイナーさんがマークアップをゴリっと書いていく運用になってきたので、彼の書きやすい環境にしようということでこうしました。
あとは、アプリケーションを作っているわけではないので、styled-components の得意なコンポーネント指向な開発環境は必要ないだろうというのも理由です。
追記
できました。 VSCode で emmet を効かせて styled-components を書く
最初のページのロードで他のページについての js も一緒にロードする必要があるので若干勿体無い
現状ページ数が多かったり、それぞれのページでコード量の多い処理があったりするわけではないので、目をつぶってます。
というか、ホスティングに Firebase Hosting を使っているので、勝手に CDN に載せてくれるし許容誤差なんじゃないかって思ってます。（計測しろ！）
あとがき
Next.js を使うという手はあるかな、と思ってます。
ページごとの script タグの埋め込みと OGP 対応と初期ロードのファイルサイズ軽減をいっぺんに倒せる気がする。
まあでもこの React + Sass(scss) にしてから LP も安定運用フェーズに入ってきたので、Next.js 導入は必要に迫られたら、って感じになると思います。