Tweet
Tweet

Slide 1

Slide 1 text

Α͑͜ Developer Console を使い倒そう！！ @yokoe24

Slide 2

Slide 2 text

ࣗݾ঺հ よこえ • X (Twitter): @yokoe24 • 出張写真撮影のラブグラフCTO （3年前の2021/01入社） • Rails, JavaScript, Go とか • 4月からグロービス経営大学院に 入学したので26卒院生です！ • ニコニコ閉じててアニメ見てない

Slide 3

Slide 3 text

ࠓ೔࿩͢ͷ͸ ͜Εʂ →

Slide 4

Slide 4 text

̍ まずアンケート

Slide 5

Slide 5 text

։ൃதDeveloper ConsoleΛ • ほぼいつも開いている • 半分くらいの時間は開いている • ほとんど使っていない • 今回初めて Developer Console を 知ります！ （当日アンケート結果）ほぼいつも: 8, 半分: 3, ほぼない: 5, 初めて知ります: 1

Slide 6

Slide 6 text

։ൃʹ࢖͍ͬͯΔϒϥ΢β͸ʁ • Safari • Chrome • Firefox • Brave • Arc • それ以外 (Vivaldi, Opera, Edge...) （当日アンケート結果）Safari: 2, Chrome: 11, Firefox: 4, Brave: 1, Arc: 2, Edge: 1

Slide 7

Slide 7 text

͓͢͢Ί͸ Chromium ܥ • Chrome • Brave • Arc • Vivaldi • Microsoft Edge • などの Chromium 系のブラウザ

Slide 8

Slide 8 text

ॆ࣮ͷ Developer Console • Chromium 系の Developer Console は 機能が豊富でとても便利！ • Firefox も便利で、独自の便利機能が ありますが今回は取り上げません • Safari は iOS の挙動を試したい とき以外はあまりお勧めできず……

Slide 9

Slide 9 text

̎ Elements タブ

Slide 10

Slide 10 text

Elements λϒ • CSSのスタイルコーディングするときに 役立つ！ • React や Vue.js などのコンポーネン トが HTML 的にはどう表示されている のか見ることでデバッグに役立つ！ • 印刷やスクショのときに役立つ！

Slide 11

Slide 11 text

ελΠϧίʔσΟϯά

Slide 12

Slide 12 text

ελΠϧίʔσΟϯά 1. 気になる箇所を選択 2. letter-spacing などを調整 3. ほどよい設定値を見つけていく 4. それに合わせてCSSを更新

Slide 13

Slide 13 text

ϨεϙϯγϒରԠ

Slide 14

Slide 14 text

ϨεϙϯγϒରԠ • ボタン一発でスマホ・PCの見た目に すぐに切り替えが可能！ • それだけでなく、Developer Console との境界の位置をいじることで、 特定の横幅のときに起こるデザイン崩 れを見つけられる！

Slide 15

Slide 15 text

ҹ࡮΍εΫγϣʹ໾ཱͭ • 印刷やスクショが見やすくなるよう 不要なコンポーネントを削除すること も Developer Console からおこなえ る

Slide 16

Slide 16 text

σόοάʹ໾ཱͭ • HTMLバリデーションと サーバーバリデーションの両方が かかっている場合に、 あえて input タグの required 要素 を消すことなどでサーバーバリデー ションの挙動を見ることもできる

Slide 17

Slide 17 text

̏ Console タブ

Slide 18

Slide 18 text

Console λϒ • JavaScript のデバッグに役立つ！ • JavaScript のちょっとした挙動の確認 に役立つ！

Slide 19

Slide 19 text

JavaScript ͷσόοά • デバッグの基本はログ出力！ • メソッドの途中で、変数にどんな値が 入っているのか確認するために console.log(hensuu); など書けば、Console タブに変数の値 が出てくる！

Slide 20

Slide 20 text

ͪΐͬͱͨ͠ڍಈ֬ೝ • 「JavaScript Playground」などで 検索をしなくても、 F12キーで Developer Console を呼び 出すだけで、JavaScript の挙動確認が おこなえる！

Slide 21

Slide 21 text

ͪΐͬͱͨ͠ڍಈ֬ೝ

Slide 22

Slide 22 text

̐ Network タブ

Slide 23

Slide 23 text

Network λϒ • ブラウザキャッシュを無効化できる • サイトが開くまでの速度を確認できる • ページ表示のためにどれだけユーザー に通信を発生させているかを見られる • APIリクエストの実行回数や速度、失敗 した際の原因を探れる

Slide 24

Slide 24 text

ϒϥ΢βΩϟογϡແޮԽ

Slide 25

Slide 25 text

ϒϥ΢βΩϟογϡແޮԽ • 「Disable cache」のチェックは 必ず付けましょう！ • これによって、ブラウザキャッシュが 働くことを抑制でき、APIリクエストを スキップするなどが起きにくくなりま す

Slide 26

Slide 26 text

αΠτ଎౓ͷ֬ೝ

Slide 27

Slide 27 text

αΠτ଎౓ͷ֬ೝ • サイトが開かれるまでの速度を確認で きます。これに２秒以上かかるような ページは要注意です • ページ速度の改善を目指す場合は、 Before/After それぞれの速度を取得 し、成果を発表できるように！

Slide 28

Slide 28 text

௨৴શମͷ ֬ೝ

Slide 29

Slide 29 text

௨৴શମͷ֬ೝ • 速度だけでなく、 全体的にどのくらいのファイルサイズ の通信がおこなわれているかもチェッ クしましょう • 5MBもあるような画像がいくつも通信さ れていないでしょうか？

Slide 30

Slide 30 text

APIϦΫΤετͷ֬ೝ • React や Vue.js の実装不備で、 APIリクエストが実装者の想定よりも多 い回数おこなわれている場合がよくあ ります • Network タブをしっかり監視すること で、適正かを確認できます

Slide 31

Slide 31 text

̑ まとめ！！

Slide 32

Slide 32 text

·ͱΊ̍ • このように Developer Console は 情報の宝庫です！ • 開発中は、Developer Console の なにかしらのタブを並行して見ている くらいの状態になれると、より プロに近付けます！！

Slide 33

Slide 33 text

·ͱΊ̎ • 今回は書きませんでしたが Webアプリケーションのサーバーログ なんかも宝の山です！ • データをしっかり確認することで、 強いエンジニアになりましょう！！