Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

今⽇の話

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

About sonarwhal

Slide 6

Slide 6 text

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.

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Online https://sonarwhal.com/

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

実際に使ってみた

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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 ̄

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

所感

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

乞うご期待

Slide 42

Slide 42 text

宣伝

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

#z-aiko

Slide 45

Slide 45 text

#z-aiko

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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