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

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

2018 年振り返り & 2019 年の抱負

目標の振り返り

  • 今年の抱負 はこれだった
    • 月 1 で Qiita にアウトプット
      • 7 件しか書けていない… 2 ヶ月に 1 回くらいが現実路線か…
    • 月 1 でブログ更新
    • 技術書を年間 5 冊読む
      • どれも中途半端になってしまったので、再度来年の目標にする
    • どこかで 1 回 LT する
      • これもできなかった。が、来年発表する予定はできた
    • GitHub の草生やす
      • サービスをオープンするまでは行かなかったが、毎日草はやしはした
    • 貯金を増やす
      • まぁまぁ増えた気はする

技術的な話

  • 結構 Angular に投資した一年だった
    • 今年の Qiita の記事のほとんどが Angular 関連
  • 会社のプロジェクトでしっかりテストコードを書く習慣をチームにつけた
  • Atomic Design 本とかも読んでコンポーネント設計とかも考えたりしている
  • Advent Calendar ネタに書いた記事が一瞬はてぶのホットエントリーに入ったりした

その他

  • PayPay チャレンジで Switch 買った(今更)
  • L’ArChristmas 行ってきたが、すごい盛り上がった
  • The Alley のタピオカにハマった

2019 年の抱負

  • Angular を使ったアプリケーションを個人で作る
    • 今年は GitHub に草生やすのが目的だったが 2019 年は作るのを目的にする
  • 月 1 くらいで Qiita か Medium に記事を書く
  • 筋トレする
  • 定期的に振り返る

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

問題

  • 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 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 の設定をしているときに 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 表示がされるようになった

気になった記事