Production で JavaScript 無効化時にテーブルのレイアウトが崩れる

[shgtkshruch]

起こっている問題 / The Problem

• JavaScript を無効化して production を開くと、テーブルのレイアウトが崩れています
• development ではテーブルのレイアウトは崩れていません
• development で表示できているので、production でも同じように表示されるのが望ましいと思います

スクリーンショット / Screenshot

production

development

こちらはレイアウトが崩れることなく表示されています。

期待する見せ方・挙動 / Expected Behavior

• JavaScript を無効化してもテーブルのレイアウトがくずれないこと

起こっている問題の再現手段 / Steps to Reproduce

1. JavaScript を無効化して、https://stopcovid19.metro.tokyo.lg.jp/ を開く

動作環境・ブラウザ / Environment

• macOS
• Chrome / Safari / Firefox

[goki90210]

JavaScript を無効化してもしかるべき表示ができることは必須要件なのでしょうか？

vue/nuxt.jsを使っている時点でありえないかと…。

[shgtkshruch]

必須条件かどうかは僕には判断できないのですが、issue を書いたときには

• これまでの実装は JavaScript 無効化時の動作を考慮していた [改善][a11y] グラフのa11y対応としてテーブルもDOMにレンダリングする #1443, fix: show table when noscript #1969
• Issue 起票時点では Netlify でビルドしている development 環境でもテーブルのレイアウトは崩れていなかった
• 情報は人に届けてこそ意味がある。UX（ユーザエクスペリエンス）を大切にする。
  ref: サイト構築にあたっての行動原則: CODE_OF_CONDUCT.md

といったことを考えていました。

vue/nuxt.jsを使っている時点でありえないかと…。

開発者側にそういった意見があることもわかります。
例えば、クライアントサイドでレンダリングしている Chart.js のグラフを JavaScript 無効化時に表示するなら僕も厳しいと思います。

今回の Issue はテーブルの表示崩れについてなのですが、こちらについては SSR 時に CSS が当たらないことが関係していると思っていて、「Vue.js や Nuxt.js だからありえない」ということでもないかなと思いました。
まだ調査中ですが、Nuxt.js の vuetify-module に関連するような issue は上がっていました。

• Vuetify with tree shake enabled in SSR doesn't render property nuxt-community/vuetify-module#208
• Critical CSS and theme CSS not included in the SSR response; instead applied at runtime which causes a FOUC nuxt-community/vuetify-module#232

個人的にはどの技術を使っていても、できるだけ多くの方に情報を届ける工夫をしたほうが（このサイトでは）ベダーだと思って起票させていただきましたが、都としてそこまで対応する必要はない、またはコアチームの方が不要と判断されればクローズしていただいてかまいません。

[kaizumaki]

ご提案ありがとうございます！こちらの現象は運営側でも把握しております。noscript時にどこまで情報の表示を担保するかについては、今までに明確な議論があったわけではありません。
また別件でこちら #3161 (comment) の経緯もあります。このときは「noscript対応は別途検討」とコメントしましたが、確定した案があったわけではありません。
よろしければこちらのissueで、noscript時の対応を議論できればと思いますが、いかがでしょう。

[goki90210]

確かにdevelopmentでは表示できていて、productionではダメっていうのはvue/nuxt.jsそのものとは別の問題ではないかと思いますね…。

よろしければこちらのissueで、noscript時の対応を議論できればと思いますが、いかがでしょう。

賛同いたします。