Storybook で SCSS を使えるようにする

注意

  • フロントエンドは移り変わりが激しいため、この方法が誤りになる可能性があります
  • 2021/09/06 時点での情報です

結論

1. sass-loader の v10 を入れる

最新版を入れてしまわないように注意する*1

$ yarn add --dev sass-loader@^10.0.0

2. style-loader と css-loder を入れる

$ yarn add --dev style-loader css-loader

3. .storybook/main.js を修正する

以下のように修正します。

module.exports = {
  // (ここまで省略)
  webpackFinal: async(config, {configType}) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: ['style-loader', 'css-loader', 'sass-loader']
    });

    return config;
  }
  // (ここ以下省略)
}

*1:webpack に対応させるため、v10 にする

CircleCI の steps 内で条件分岐をする方法

結論

when を使います。run: の step 内のシェルスクリプトで分岐する方法はよく見るのですが、step そのものを分岐します。

circleci.com

使い方具体例

公式ドキュメントに書いてあるとおりです。steps: 配下に when: を書き、その配下に condition: を書き、そしてその配下に条件分岐を書きます。条件を満たした場合、その when: の内容が実行されます。

condition: を記述するか否かについては注意が必要です。公式ドキュメントにあるように、jobs: 配下の記述においては condition: の表記が必要になります。

一方で workflows: 配下の記述に置いては不要となります

Note: When using logic statements at the workflow level, do not include the condition: key (the condition key is only needed for job level logic statements).

条件が一つだけの場合

たとえば、if a == 'foobar' のような条件の場合には、when: 配下に condition: を書き、その値として条件式を書きます。

    steps:
      - checkout
      - when:
          condition:
            equal: [ 'hello', $GREETING ]
          steps:
            - run: echo "Hello, World!"

上記の equal の説明については公式ドキュメントをご覧ください*1equal 以外に matches (正規表現での判別)もあります。

条件が「かつ」の場合

たとえば、if a == 'foobar' && b == 'hoge' のような条件の場合には、condition: 配下に and: を書き、その値として条件式を書きます。

    steps:
      - checkout
      - when:
          condition:
            and:
              - equal: [ 'hello', $GREETING ]
              - equal: [ 'world', $HOGEHOGE ]
          steps:
            - run: echo "Hello and World!"

条件が「または」や「~ではない」の場合

上記までの記述と同様にして、condition: 配下に or:not: を書き、その値として条件式を書きます。

    steps:
      - checkout
      - when:
          condition:
            or:
              - equal: [ 'hello', $GREETING ]
              - equal: [ 'world', $HOGEHOGE ]
          steps:
            - run: echo "Hello or World!"
    steps:
      - checkout
      - when:
          condition:
            not:
              matches:
                pattern: "^master$"
                value: << pipeline.git.branch >>
          steps:
            - run: echo "Hello, master branch World!"

*1:2つの値が等しい、ではなく、配列内のすべての値が等しい、ときに true になります

deasync のインストール(ビルド)に失敗するときの対処方法

結論

node-gyp を入れる。

現象例

以下のような感じで npm / yarn で入れるときにエラーが出る場合です。

➤ YN0007: │ deasync@npm:0.1.21 must be built because it never has been before or the last one failed
➤ YN0009: │ deasync@npm:0.1.21 couldn't be built successfully (exit code 1, logs can be found here: /tmp/xfs-0c891e14/build.log)
➤ YN0000: └ Completed in 4s 514ms

Cypress の Free プランは上限に達するのが早いのでダッシュボードに記録する対象を絞る

前提

CI で Cypress を回す際に何も考えずに全実行しているとあっというまに Free プランの枠を食いつぶしてしまうので、実行する対象を絞ります。

もちろん、💴Free プランでない💴ならばリッチに使いましょう。

Free プランの上限

Free プランの上限(制限)は、「Test Results が毎月 500 まで」です(公式ドキュメント)。

gyazo.com

この「Test Results」というのが曲者で、これは「Cypress コマンドの実行回数ではなく、いわゆる Spec の数」です。その数はダッシュボードから確認できます。

gyazo.com

開発ペースにもよりますが、一般的には 500 個のテストなぞすぐに走り尽くしてしまうでしょう。

Free プランの上限に達したときの挙動

Free プランの上限に達したときには枠が回復するまでに以下の制約が課されます。なお、上限に達する直前にメールで通知が来ます*1

  • テストの並行実行ができなくなる(ダッシュボード上での実行時)
  • 結果がダッシュボードに表示されなくなる

後者の「結果がダッシュボードに表示されなくなる」というのが凶悪で、「今までのすべての結果」が表示されなくなります*2

gyazo.com

gyazo.com

どうするか(本題)

Free プランだとあっというまに上限に達してしまうことは明らかなので、ダッシュボードでの実行に関しては CI のコード内での条件分岐により実行対象を絞りましょう。おそらく一番現実的なのは、 stagingmain (master) へのコミットの際に発動させるというものです。

ダッシュボードでの実行をさせずとも、CI 上で CLI で実行すればテスト自体は問題なく実行されます。また、動画や静止画についても Artifacts を利用することで全て保存されます。

すなわちダッシュボードの利用意図としては、重要なコミットの際の証跡であったり、多人数での状況の共有などになるでしょう。

どうするか(CircleCI の例)

CircleCI ではたとえば以下のように書くと staging および main 以外のブランチではダッシュボードに記録されなくなります。

(ここまで省略)
      - when:
          condition:
            or:
              - equal: [ main, << pipeline.git.branch >> ]
              - equal: [ staging, << pipeline.git.branch >> ]
          steps:
            - run:
                name: Cypress を実行する(ダッシュボードにも保存する)
                command: |
                  npx cypress run --record --key $CYPRESS_RECORD_KEY
      - when:
          condition:
            and:
              # 以下の 'pattern' だと、'main' または 'staging' が先頭に来た場合もマッチしてしまうので注意する
              - matches: { pattern: "^(?!main).+$", value: << pipeline.git.branch >> }
              - matches: { pattern: "^(?!staging).+$", value: << pipeline.git.branch >> }
          steps:
            - run:
                name: Cypress を実行する(ダッシュボードには保存しない)
                command: |
                  npx cypress run --record false

上記のように記述することで Cypress をダッシュボードで実行する場合に条件をつけることができます。ただし、動画や静止画の保存のためには、別途 store_artifacts を定義する必要があります。

余談ですが、GitHub Actions の場合は Artifacts はいったん手元にダウンロードする必要があり(動画や画像をブラウザ内で見られない)、地味にストレスです*3

*1:この通知は実質的にはほぼ上限に達した通知に等しい

*2:超過分だけではない

*3:そのうち改善されると思います

Facebook で時系列順に表示する方法

結論

URL のパラメータとして sk=h_chr を付与する。

具体的には https://www.facebook.com/?sk=h_chr になります。

問題点

サイト内遷移(左上の f ボタンを押した場合など)にはパラメータを引き連れないために時系列順表示になりません。したがって、ブックマークに入れておいて逐次そこからアクセスするなどの工夫が必要です。

参考

www.facebook.com

Powered by はてなブログ