Introduction for sonarwhal

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

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

今⽇の話

About sonarwhal

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.

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

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

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

Online https://sonarwhal.com/

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

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

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

実際に使ってみた

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

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

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

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

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

Accessibility • <html> element must have a lang attribute •
Page must contain one main landmark • Content should be contained in a landmark region

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

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

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

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

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

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￣

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

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

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

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

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

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

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

Security • [email protected] 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'

所感

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

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

乞うご期待

宣伝

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

#z-aiko

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

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

Introduction for sonarwhal

Introduction for sonarwhal

More Decks by Sota Sugiura

Other Decks in Technology

Featured

Transcript