とんかつ時々あんどーなつ

〜たとえ低空でも飛行していられるように〜

Storybook for Angular を IE でも確認できるようにする

Angular Storybook

問題

  • Storybook を起動して IE で見ようとすると Object.assign() が見つからずエラーになっていた

やったこと

  • ES2015 の仕様に対応していないので Babel を使ってトランスパイル

入れたパッケージ

設定ファイルの変更

  • お手元の .storybook/addons.js で polyfill をインポート
+ import '@babel/polyfill';
  import '@storybook/addon-notes/register';

週刊フロントエンド vol.8

週刊フロントエンド

気になったことトピック

気になった記事

TypeScript 2.8 系以上で Angular AOT Compiler が失敗する

Angular

Angular CLI を v6.0.x 系で TypeScript を v2.8 以上にしてビルドを実行すると以下のエラーが出て、失敗する

ERROR in The Angular Compiler requires TypeScript >=2.7.2 and <2.8.0 but 2.9.1 was found instead.

現時点では Angular AOT Compiler v6.0.x は TypeScript 2.7.x しかサポートしておらず、それ以上のバージョンを使う場合は、アプリケーションの tsconfig(src/tsconfig.app.json) 内の angularCompilerOptions 内の disableTypeScriptVersionCheck オプションを使用してエラーを無効にする必要があるらしい

github.com

tsconfig.app.json を下記のように変更するとバージョンチェックを無視するようになる

   "exclude": [
     "src/test.ts",
     "**/*.spec.ts"
-  ]
+  ],
+  "angularCompilerOptions": {
+    "disableTypeScriptVersionCheck": true
+  }
 }

CircleCI Local CLI を試す

CircleCI

CircleCI の設定をしているときに config の validation check をローカルでやりたくなった

調べたところ Using the CircleCI Local CLI - CircleCI というものがあったで導入する

インストール

とりあえず、記事に書いてある通りインストール(Mac を使ってます)

$ curl -o /usr/local/bin/circleci https://circle-downloads.s3.amazonaws.com/releases/build_agent_wrapper/circleci && chmod +x /usr/local/bin/circleci

ヘルプコマンドを叩いてインストールされたかを確認する

$ circleci -h
Receiving latest version of circleci...
INFO: We've built a brand new CLI for CircleCI! Please run 'circleci switch' to upgrade.
The CLI tool to be used in CircleCI.

Usage:
  circleci [command]

Available Commands:
  build       Run a full build locally
  config      Validate and update the circleCI configuration file
  help        Help about any command
  step        Execute steps
  tests       Collect and split files with tests
  version     Output version info

Flags:
  -h, --help      help for circleci
      --verbose   enable verbose logging output

Use "circleci [command] --help" for more information about a command.

簡単にインストールできた！

validation check

さっそく validation check をすべくコマンドを叩く

$ circleci config validate -c .circleci/config.yml

INFO: We've built a brand new CLI for CircleCI! Please run 'circleci switch' to upgrade.


Error: Error parsing config file: yaml: line 51: mapping values are not allowed in this context

ちゃんとエラーが検出されたのでチェックできていることがわかる

ついでになんかアップグレードしてくれと出ているので言われたとおりコマンドを実行

$ circleci switch

Thank you for your interest in trying the new CLI!

Be sure to read the docs if you get stuck. [https://github.com/CircleCI-Public/circleci-cli#readme]

Are you sure you're ready to upgrade? [y/N]: y
Upgrading CircleCI to the newest version.
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  1138  100  1138    0     0   4169      0 --:--:-- --:--:-- --:--:--  4183
Finding latest release.
Downloading CircleCI v0.1.1568
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100   632    0   632    0     0    884      0 --:--:-- --:--:-- --:--:--   885
100 3409k  100 3409k    0     0   567k      0  0:00:06  0:00:06 --:--:--  842k
x LICENSE
x README.md
x circleci
Installing to /usr/local/bin/circleci
/usr/local/bin/circleci

$ circleci -h
This project is the seed for CircleCI's new command-line application.


Usage:
  circleci [command]

Available Commands:
  config      Operate on build config files
  diagnostic  Check the status of your CircleCI CLI.
  help        Help about any command
  local       Debug jobs on the local machine
  namespace   Operate on namespaces
  orb         Operate on orbs
  query       Query the CircleCI GraphQL API.
  setup       Setup the CLI with your credentials
  update      Update the tool
  version     Display version information

Flags:
  -h, --help           help for circleci
      --host string    URL to your CircleCI host (default "https://circleci.com")
      --token string   your token for using CircleCI
      --verbose        Enable verbose logging.
Use "circleci [command] --help" for more information about a command.

もう一回チェックのコマンドを走らせるとさっきより詳細にエラーメッセージが表示されるようになった

github.com

Bonfire Frontend #2 メモ

勉強会 フロントエンド

行ってきた yj-meetup.connpass.com

Flummox から Redux へリプレースした話

  • Flummox は知らなかった
  • 選択肢には Fluxible もあったらしい → これも知らなかった
  • コンポーネントは Atomic Design の思想でやっているようだが 5 層もないらしい

FOLIOに画像回帰テストを導入した話

資料

  • 画面テストどこまでテストするか
    • 少ないと不安、多いとメンテが大変 → わかる
  • Jest とかを使えば Snapshot テストで楽できる
  • Folio はそもそも DOM のテストではなく画像そのものでテストしているらしい
  • 画像でのテストに必要なのは「キャプチャ生成」と「画像比較」の 2 つ
    • 「キャプチャ生成」は Storybook
    • 「画像比較」は reg-viz/reg-suit を使ってる
      • 「assets の読み込みタイミングによっては意図しない差分が出る」「CI で回すと CI の時間が長くなる」などの問題もある
  • 問題解決のために自作した、というお話 → Quramy/zisui
  • 全画面撮ってるのか？画面の選定基準はあるのか？は気になる
  • 対象ブラウザはとか、キャプチャした画像の保存期間はなどはどうしているのだろうか？

PWA 対応戦略と現実解

資料

  • Progressive Web Apps Checklist がある
  • PWA が目指すのは「安全である」「ハイパフォーマンス」「インストール可能」ということ
  • パフォーマンスを向上させるためにやること
    • ロードパフォーマンスを最適化する → これだけで結構体験が変わるらしい
    • HTTPS 化されていれば Service Worker で静的アセットをキャッシュする
    • 上が済んでから App Manifest を置く
    • オフライン化は事業内容と相談
    • Web push はユーザーにとって必要な情報をちゃんとリサーチする
    • → ここまでやれば、ネイティブアプリにだいぶ近くなる

Chrome DevToolsを使い倒せ！(仮)

資料

  • まずは Audits の Lighthouse 使おう
  • Sources の Overrides 機能を使うとソースコードの上書きができる
  • coverage で assets を使っているかどうか分かる

秩序あるコードを書く

資料

  • re-ducks
    • action, reducer, type を 1 つのファイルに書く
    • selectores, operations
  • 「見た目切り」より「データ切り」がよい
  • コンポーネントがビジネスロジックを知りすぎていないことは大事

週刊フロントエンド vol.7

気になったことトピック

  • Chrome 68 : HTTP のサイトに Not Secure 表示がされるようになった

気になった記事

週刊フロントエンド vol.6

気になったことトピック

気になった記事