Introduction for sonarwhal

Introduction for sonarwhal

2018/4/24
Roppongi.js #2@Mercari, Inc.

046baac588d91fd78a85b189847a151d?s=128

Sota Sugiura

April 24, 2018
Tweet

Transcript

  1. Introduction for sonarwhal @sota1235 Roppongi.js #2@Mercari, Inc 2018/4/24

  2. console.log(me) • Sota Sugiura(きりん) • @sota1235 • Mercari, Inc. •

    将来の夢はJavaScript になることです
  3. 今⽇の話

  4. None
  5. About sonarwhal

  6. sonarwhal is a linting tool that will help you with

    your site's accessibility, speed, security and more, by checking your code for best practices and common errors.
  7. Sonarwhal • Webサイト向けのLintingツール • コード、Webサイトの両⽅から改善を促す • 1年の開発を経て先⽇、v1.0.0がリリース

  8. Sonarwhal works for • Accessibility • Performance • Security •

    PWA • and so on
  9. Feature • CLIとOnlineの両⽅がある • ESLintのようにconfigが書ける • というか.eslintrcそのもの • BabelやTypeScriptのconfigを読みに⾏ったり もする

  10. Online https://sonarwhal.com/

  11. { "extends": [ "web-recommended" ] } Rule

  12. 使い⽅ $ npx sonarwhal https://www.mercari.com/jp/

  13. None
  14. 以下⼿順で動いた(local) $ npm init -y $ npm i -S @sonarwhal/configuration-web-recommended

    sonarwhal $ npm run sonarwhal https://www.mercari.com/jp/
  15. 実際に使ってみた

  16. https://twitter.com/search?f=tweets&vertical=default&q=from%3Asota1235%20aiko

  17. https://twitter.com/sota1235/status/986503452015509504

  18. ターゲット https://aiko.com

  19. Result https://sonarwhal.com/scanner/338ecbc7-7920-4539-82e6-23219433e913

  20. Result https://sonarwhal.com/scanner/338ecbc7-7920-4539-82e6-23219433e913

  21. Accessibility • アクセシビリティに関 するチェックをする • ⼀部、axe-coreを利⽤ してる

  22. Accessibility • <html> element must have a lang attribute •

    Page must contain one main landmark • Content should be contained in a landmark region
  23. Interoperability • 正直、よくわからん • HTTPヘッダの⽭盾や ⽂字コードの⽭盾等を 指摘する

  24. Interoperability • 'content-type' header should have 'charset=utf-8' • No viewport

    meta tag was specified • Response with status code 404 had less than 512 bytes
  25. Interoperability • 'content-type' header should have 'charset=utf-8' • No viewport

    meta tag was specified • Response with status code 404 had less than 512 bytes
  26. Hello Apache http://aiko.com/hoge/

  27. Performance • サイトパフォーマンス に影響しうるものを検 知 • 主にバックエンド側の 検知をする

  28. Performance • Should be served compressed with gzip when gzip

    compression is requested. • Should be served compressed with Brotli when Brotli compression is requested over HTTPS. • No "cache-control" header or empty value found. It should have a value
  29. Performance • Should be served compressed with gzip when gzip

    compression is requested. • Should be served compressed with Brotli when Brotli compression is requested over HTTPS. • No "cache-control" header or empty value found. It should have a value _⼈⼈⼈⼈⼈⼈_ > スパルタ <  ̄Y^Y^Y^Y^Y ̄
  30. Performance • File "bn_goods.png" can be 9.88kB (56%) smaller. •

    何を根拠に…?
  31. Optimize Image https://aiko.com/_shared/img/common/bn_goods.png

  32. Optimize Image https://aiko.com/_shared/img/common/bn_goods.png QY QY QY QY

  33. PWA • PWAとしての機能を チェックする • PWAじゃない場合はオ フにすべし

  34. PWA • '/_shared/img/apple_touch_icons/ apple-touch-icon-60x60.png? update=20170101' is not 180x180px

  35. Security • セキュリティ周りの チェックをする • そこまで⾼度なチェッ クはできなそう…?

  36. Security • 'x-content-type-options' header is not specified • 'set-cookie' header

    to set 'nid' doesn't have the 'secure' directive. • Resource https://hoge.com/_shared/ js/jquery.easing.js requested without the "integrity" attribute
  37. Security • jQuery@1.x.x has 1 known vulnerabilities (1 medium). See

    https://snyk.io/vuln/npm:jquery for more information. • '<a href=“https://twitter.com/xxx" target="_blank"><span class="icon- twitter"></span></a>' is missing 'rel' values 'noopener', ‘noreferrer'
  38. 所感

  39. 所感 • まだまだ荒削り • Ruleのカスタマイズが可能とはいえまだ情報 も少ない • 適切に使わないと運⽤が⽴ち⾏かなくなる • PWAはLighthouseでいいんじゃないかな

  40. 期待ポイント • アーキテクチャ⾃体は柔軟に作ってある • parserやrendererは分離されてたり • いろいろ整えばさくっとオリジナルRule書い て運⽤とかも夢じゃなさそう

  41. 乞うご期待

  42. 宣伝

  43. ⼈が⾜りません! • メルカリでは#z-prefixをつけて部活チャンネ ルを作る⽂化があります • 先⽇、#z-aikoを作りました

  44. #z-aiko

  45. #z-aiko

  46. Weʼre hiring • メルカリでは#z-aikoに⼊りたい⽅を募集して ます • ついでにフロントエンドエンジニアも募集し てます

  47. ご清聴ありがとうございました