oti commented 4 years ago

すみません、サイトのバグではないのでテンプレート利用せず書かせてください。

https://github.com/tokyo-metropolitan-gov/covid19/commit/a023272b3f1b399d054ac8cd65092655233dd59c が最新コミットの development ブランチを手元で yarn dev すると、ブラウザで localhost:300 が表示されるまで9分〜11分ほどかかります。node_modules/ を削除して yarn install を実行してから yarn dev をしました。

作業環境は以下の通りです。

端末: MacBook Pro 16-inch 2019
CPU: 2.3GHz 8コア Intel Core i9
RAM: 32GHz
OS: macOS 10.15.4 Catalina

この引用セクションは #3179 により発生しなくなりました ~ターミナルには~
WARN  [vue-i18n] Value of key '―' is not a string! (repeated 0 times)
WARN  [vue-i18n] Cannot translate the value of keypath '―'. Use the value of keypath as default.
~といった warning が繰り返し大量に表示されます。キャプチャ~

コントリビュートに支障が出ており、これをどうにか解決したいです。

気にしているのは、

他の方も yarn dev にめっちゃ時間かかっているかどうか
この状態をコアコントリビューターの方は認識しているかどうか
認識しているならば、対応策を検討しているかどうか

です。わたしの環境だけの問題ならば、良いのですが。

この引用セクションは #3179 により発生しなくなりました ~vue-i18n の警告が、どのファイルのどの行かを示してくれないので、最新のコミットを見てみると、ハイフンが全角のダッシュ？になっている変更があり、この辺り怪しそうに思いつつも、これがどのコンポーネントで使われているかがいまいちよくわかりません。~

自分はアクセシビリティ対応にスペシャリティを持ってこのプロジェクトにコントリビュートしたいと思っているので、軽量版として vue-axe なしで起動する yarn dev-no-axe では対応したくないと思っています。

コアコントリビューターの方、i18n 対応をされている方、こちら何卒ご確認いただきたく存じます。

llongmane584 commented 4 years ago

私の環境でも yarn dev で大変時間がかかります。以前はそうでもなかったのですが。 Slack のスレッドで拝見したとおり、yarn dev-no-axe ではすぐに表示されます。 Core i7-6700 / 16GB /SSD(SanDisk Ultra 3D) Chrome 81.0.4044.92

kebhr commented 4 years ago

vue-i18nのWarningについては、components/card/ConfirmedCasesAttributesCard.vue を以下のように編集することで解決します。（現在PRを作成中です）

❯ git diff
diff --git a/components/cards/ConfirmedCasesAttributesCard.vue b/components/cards/ConfirmedCasesAttributesCard.vue
index 0d47c99c5..32bf49e89 100644
--- a/components/cards/ConfirmedCasesAttributesCard.vue
+++ b/components/cards/ConfirmedCasesAttributesCard.vue
@@ -68,10 +68,11 @@ export default {
   },
   methods: {
     getTranslatedWording(value) {
-      if (value === '-' || value === '‐' || value == null) {
+      if (value === '-' || value === '‐' || value === '―' || value == null) {
         // 翻訳しようとしている文字列が以下のいずれかだった場合、翻訳しない
         // - 全角のハイフン
         // - 半角のハイフン
+        // - 全角のダッシュ
         // - null
         return value
       }

oti commented 4 years ago

3179 が development にマージされたのでさっそく手元に取り込んでみましたが、全角ダッシュのエラーが出なくなっただけで状況は変わらないですね……。

yarn dev を実行して10分経過しましたがブラウザはローディングしたままです。さらに yarn dev-no-axe でも同じになってしまいました……。

一度起動してしまえばあとは問題なく作業できますが、branch を切り替えるたびに 10 分待つのでかなりしんどいです。

私の環境は下記の通りです。イシュー本文にも追記します。

MacBook Pro 16-inch 2019 CPU: 2.3GHz 8コア Intel Core i9 RAM: 32GHz macOS 10.15.4 Catalina

shgtkshruch commented 4 years ago

私も開発環境が重いと感じていたことがあったので、#2027 で issue を立てました。その時は vue-axe の処理で時間がかかっていたのですが、導入に関わった方によると Vue のノード数に応じて実行時間がかかるとのことでした。

残念ながらaxeは全ノードベタなめしながらチェック項目を全量実行しちゃうので、パフォーマンスはノード数に応じてどうしても重くなってしまいます。特にvue-axeはNuxtのルーターの変更を検知して動きますので、何か再表示するたびチェックが働きます。まぁ、そういうツールなのですが。 ref: https://github.com/tokyo-metropolitan-gov/covid19/issues/2027#issuecomment-602026457

こちらの issue の対応で yarn dev-no-axe コマンドを用意していただいたのですが、vue-axe を有効にした場合の起動時間の改善は行われていないと思います。（すくなくとも development にはマージされていない認識です）

自分はアクセシビリティ対応にスペシャリティを持ってこのプロジェクトにコントリビュートしたいと思っているので、軽量版として vue-axe なしで起動する yarn dev-no-axe では対応したくないと思っています。

こちらもおっしゃるとおりだと思います。個人的にも起動時間を改善するなど、vue-axe を無効化する以外の解決策を（可能かどうかも含めて）検討したほうがいいと思っています。

kebhr commented 4 years ago

恒久的な解決策ではないですが...

axeは全ノードベタなめしながらチェック項目を全量実行しちゃう ref. https://github.com/tokyo-metropolitan-gov/covid19/issues/2027#issuecomment-602026457

ということなので、最もヘビーと思われる「陽性患者の属性」テーブルを軽量化するために、data.jsonのpatients以下を以下のように最小限のデータのみ残し削ってみました。私の環境では、これで yarn dev を使用した場合も10秒少々でロードが完了しましたが、皆さんの環境ではいかがでしょうか？

    "patients": {
      "date": "2020\/04\/12 20:15",
      "data": [
        {
          "リリース日": "2020-01-24T08:00:00.000Z",
          "居住地": "湖北省武漢市",
          "年代": "40代",
          "性別": "男性",
          "退院": "〇",
          "date": "2020-01-24"
        }
        ]
    },

テスト環境

Macbook Pro (15-inch, 2018)
2.2GHz 6-Core Intel Core i7
32GB 2400MHz DDR4

taka1985 commented 4 years ago

フォークリポジトリでもyarn devが確かに時間かかります。

ちなみに、warningについても記載ございましたが、当方の修正は、vueの$t('xx')記載と、locales/ja.jsonの対応付けがずれるとこうなると考えて修正をしています。ご参考まで https://github.com/CodeForNiigata/covid19/pull/190

koukimetal commented 4 years ago

yarn dev-with-fake-dataを作って、その場合@kebhrさんが述べたようなフェイクデータを使うようにするというのが、現実的な解決法な気がします。

tsmd commented 4 years ago

axe-core のドキュメントにパフォーマンスへの記載があり、これを調べてみました。 https://github.com/dequelabs/axe-core/blob/master/doc/API.md#section-4-performance

結論からいうと、現実的な速度で動作させることは可能ですが、現時点では軽量化のためのフェイクデータに差し替える対応をするのが手ごろな対応であるかと思います。

ドキュメントによると、時間がかかっているのは次の２つの処理だそうです。

色のコントラスト計算
結果表示にもちいるNodeのセレクタの計算

じっさいに axe-core の中身を掘ってみましたが、たしかに時間がかかっているのは上記の処理でした。特に後者に膨大な時間がかかっています。ドキュメントにあるように、color-contrast ルールを無効化し、resultTypes オプションの指定を行うと、手元の環境で8秒くらいで立ち上がるようになりました。

このやり方の問題点は以下です。

Axeに色コントラストの検査をさせられなくなる
resultTypes オプションの指定は axe.run メソッドに引数をわたすかたちで行うが、axe.run の呼び出しは vue-axe が隠ぺいしており外部からの注入もできない

というわけで、Axe のパフォーマンス改善には、①色コントラスト検査ができなくなることを受けいれ、②vue-axe にプルリクないし vue-axe をフォークしてオプションを Axe に渡せるようにする、必要があります。

①はさほど問題にはならない気がしますが、②はかかる時間が読めません。ゆえに、現時点では軽量化のためのフェイクデータに差し替える対応をするのが手ごろな対応であるかと思います。

tsmd commented 4 years ago

vue-axe にはプルリクエストを送りました。 https://github.com/vue-a11y/vue-axe/pull/19

tsmd commented 4 years ago

@saladdays @oti @shunito @magi1125 メンションとばしてみます。

3589 で、vue-axe の挙動を変えるプルリクエストを出しています。色コントラストの検査を vue-axe にやらせないようにすることで開発時のパフォーマンスが改善しました。

この判断が妥当かどうか、デザイナーさんやアクセシビリティ対応している方がたのご意見を伺いたいなと思いました。

oti commented 4 years ago

とても素晴らしいです。

現状、コントラスト比の問題はほとんど解消されており、今後のフローでもビジュアル作りの段階でコントラスト比を検討したものが提案されると思われます。

私は #3589 にLGTMです。

shunito commented 4 years ago

@tsmd 反応遅れました。私も初期のコントラスト比の問題はおおむね解消されているとの認識です。グラフやフローなども最初からアクセシビリティを考慮したつくりをするようにもなっているので、コントラスト比のテストは不要になっていると思います。

Tokyo-Metro-Gov / covid19

yarn dev でローカルサーバーをブラウザで表示できるまでにとても時間がかかる #3177

3179 が development にマージされたのでさっそく手元に取り込んでみましたが、全角ダッシュのエラーが出なくなっただけで状況は変わらないですね……。

テスト環境

3589 で、vue-axe の挙動を変えるプルリクエストを出しています。色コントラストの検査を vue-axe にやらせないようにすることで開発時のパフォーマンスが改善しました。