$30 off During Our Annual Pro Sale. View Details »

Introduction for sonarwhal

Introduction for sonarwhal

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

Sota Sugiura

April 24, 2018
Tweet

More Decks by Sota Sugiura

Other Decks in Technology

Transcript

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

    View Slide

  2. console.log(me)
    • Sota Sugiura(きりん)
    • @sota1235
    • Mercari, Inc.
    • 将来の夢はJavaScript
    になることです

    View Slide

  3. 今⽇の話

    View Slide

  4. View Slide

  5. About sonarwhal

    View Slide

  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.

    View Slide

  7. Sonarwhal
    • Webサイト向けのLintingツール
    • コード、Webサイトの両⽅から改善を促す
    • 1年の開発を経て先⽇、v1.0.0がリリース

    View Slide

  8. Sonarwhal works for
    • Accessibility
    • Performance
    • Security
    • PWA
    • and so on

    View Slide

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

    View Slide

  10. Online
    https://sonarwhal.com/

    View Slide

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

    View Slide

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

    View Slide

  13. View Slide

  14. 以下⼿順で動いた(local)
    $ npm init -y
    $ npm i -S @sonarwhal/configuration-web-recommended sonarwhal
    $ npm run sonarwhal https://www.mercari.com/jp/

    View Slide

  15. 実際に使ってみた

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  22. Accessibility
    • element must have a lang
    attribute
    • Page must contain one main
    landmark
    • Content should be contained in a
    landmark region

    View Slide

  23. Interoperability
    • 正直、よくわからん
    • HTTPヘッダの⽭盾や
    ⽂字コードの⽭盾等を
    指摘する

    View Slide

  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

    View Slide

  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

    View Slide

  26. Hello Apache
    http://aiko.com/hoge/

    View Slide

  27. Performance
    • サイトパフォーマンス
    に影響しうるものを検

    • 主にバックエンド側の
    検知をする

    View Slide

  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

    View Slide

  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 ̄

    View Slide

  30. Performance
    • File "bn_goods.png" can be 9.88kB
    (56%) smaller.
    • 何を根拠に…?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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

    View Slide

  37. Security
    [email protected] has 1 known
    vulnerabilities (1 medium). See
    https://snyk.io/vuln/npm:jquery for
    more information.
    • 'target="_blank">' is missing
    'rel' values 'noopener',
    ‘noreferrer'

    View Slide

  38. 所感

    View Slide

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

    View Slide

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

    View Slide

  41. 乞うご期待

    View Slide

  42. 宣伝

    View Slide

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

    View Slide

  44. #z-aiko

    View Slide

  45. #z-aiko

    View Slide

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

    View Slide

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

    View Slide