なるWeb 
どうも7noteです。WEB制作時によく使うブラウザのショートカットを紹介。
WEB開発者は常にスピードや効率化との勝負です。（クオリティも大事）
ブラウザの標準機能を使いこなしてさらに効率化UPを図りましょう！
今回紹介するのはGoogleChromeでのショートカットになりますが、他のブラウザでもほぼ同じショートカットが使えると思います。
よく使うショートカット一覧
| キー（Win） | キー（mac） | 機能 | 説明 |
|---|---|---|---|
| [Ctrl] + [N] | [command] + [N] | 新しいウィンドウを開く | — |
| [Ctrl] + [T] | [command] + [T] | 新しいタブを開く | — |
| [Ctrl] + クリック | [command] + クリック | リンク先を別タブで開く | — |
| [Ctrl] + [W] | [command] + [W] | 現在のタブを閉じる | — |
| [Ctrl] + [Shift] + [T] | [command] + [shift] + [T] | 最近閉じたタブを開く | 一番最後に閉じたタブを再度開きます。連続使用も可能で超便利。 |
| [Ctrl] + [TAB] | [command] + [alt] + [→] | 次のタブへ移動 | — |
| [Ctrl] + [Shift] + [TAB] | [command] + [alt] + [←] | 前のタブへ移動 | — |
| [Ctrl] + [Shift] + [R] | [command] + [shift] + [R] | スーパーリロード | キャッシュなどをクリアしてページをリロード。CSSがなかなか反映されない時などに必須。 |
| [Ctrl] + [+] | [command] + [+] | 拡大 | — |
| [Ctrl] + [-] | [command] + [-] | 縮小 | — |
| [Ctrl] + [0] | [command] + [0] | 拡大縮小のリセット | 拡大縮小していた場合、デフォルト（100%）のサイズに戻す。 |
| [Ctrl] + [F] | [command] + [F] | ページ内検索 | ページ内に使われている言葉を検索できる。 |
| [Ctrl] + [L] | [command] + [L] | アドレスバーにフォーカス | アドレスバー（URLが書いてるところ）にフォーカスが当たる。 |
| [Ctrl] + [U] | [command] + [U] | ページのソースを表示 | 現在見ているページのソース（HTML）を見ることができる。 |
| [F12] | [F12] | 検証ツールを表示 | — |
その中でも特に覚えておきたいショートカット3選
① 最近閉じたタブを開く
windowsショートカット → [Ctrl] + [Shift] + [T]
macショートカット → [command] + [shift] + [T]
これは初めて知ったときからずっと重宝して使ってます。
使えるシチュエーションとしては・・・
・「あ、さっきまで参考にしていたサイトを間違えて閉じちゃった！」
・「修正が終わったページ、やり直しが出た。。。もうページ閉じちゃったのに・・・」
・「他のウィンドウと間違えてブラウザの閉じるボタン押しちゃった！」
などなど、使える場面が豊富でかつミスをカバーしてくれるので圧倒的な時間短縮が可能になります。
特にすごいのが、間違えてウィンドウごと閉じてしまった場合。この場合でも、新規ウィンドウを立ち上げ直して、ショートカットを入力すると閉じたウィンドウのタブがすべて復元されます。
② スーパーリロード
windowsショートカット → [Ctrl] + [Shift] + [R]
macショートカット → [command] + [shift] + [R]
これはオススメというよりも、このショートカットキーがないと話にならないレベル。
ブラウザが保持するキャッシュをクリアしなければなかなかCSSが反映されないので・・・
・「あれ、おっかしいなぁ、CSSあってると思うのに反映されない。」
なんて泥沼にハマってしまい無駄な時間を過ごすことになります。
無駄な時間を省いて、チェックはテキパキと効率よく進めたいですね。
③ 検証ツールを表示
windowsショートカット → [F12]
macショートカット → [F12]
※PCによってはファンクションキー[fn]も同時に押す必要があります。
こちらも暗記必須のショートカットキーになります。
検証ツールの詳しい使い方については省略しますが、htmlのソースの確認、cssの微調整、javascriptのデバッグ等開発する上で必須のショートカットになります。
このショートカットキーを知っているか知らないかでは開発速度が倍以上違うと言っても過言ではないほど重要なショートカットキーなので、もしまだこの記事を読むまで知らなかったという方は今すぐ検索🔎！！
組み合わせ技 例
ショートカットキー単体の紹介はしましたが、ここからはできるだけ実践に近いショートカットキーの使い方を紹介できればと思います。
其の１） 「ページのソースを表示」 からの→ 「ページ内検索」
windowsショートカット ➡ 「 [Ctrl] + [U] 」→ 「 [Ctrl] + [F] 」
macショートカット ➡ 「 [command] + [U] 」→ 「 [command] + [F] 」
HTMLソースを表示したのち、探したいclass名やid名、ファイル名を検索。
マウス操作なら10秒〜20秒、大掛かりなサイトなら30秒以上かかる作業が5秒以内で完了できます。
其の2） 「リンク先を別タブで開く」 からの→ 「次のタブへ移動」 からの→ 「現在のタブを閉じる」
windowsショートカット ➡ 「 [Ctrl] + クリック 」 → 「 [Ctrl] + [TAB] 」 → 「 [Ctrl] + [W] 」
macショートカット ➡ 「 [command] + クリック 」 → 「 [command] + [alt] + [→]」 → 「 [command] + [W] 」
あまり頻出するシチュエーションではないのですが、wordpressなどで複数の記事を修正しなければならない時に同一タブで、
「開く」→「開かれるのを待つ」→「修正して保存する」→「戻るボタンを押す」→「戻るのを待つ」
ってやっていると待ちタイムが2回もあるのです。
この待ちタイムを削減するために、私はいつも次のような手順で行っています。
「10個〜20個一気に別タブで開く」→「修正して保存」→「保存中に次のタブへ移動」→（繰り返し）→「連続でタブを閉じる」
本当はデータベースを直接見て、SQL文とかを書くほうがいいのですが私は思いっきりフロントメインだったのであまり得意ではなく、ついこのような手法をとってしまいます。データベースさわれる人超尊敬。
まとめ
なんにせよショートカットキーが使えると1回1回はほんの数秒の時間短縮でも塵も積もればで1週間、1ヶ月で見ると数時間分の短縮になったりするものです。
最初はショートカットキーを覚えたり、使いこなすまでに時間がかかるかもしれませんが滅気ずにプログラミングに挑戦するのと同じ気持ちでショートカットも覚えていくといいかもですね。
