どうも、こんにちは。
今日から9月ですが、まだまだ暑い日が続きそうですね。体調管理には十分気をつけてください！
今回は、エンジニアやプログラマー、デザイナーなら必須で覚えておきたいショートカットを8つご紹介していきます！
ショートカットキーを知っておけば、時短にもなりますし
何よりキーボードを操作してからマウスに切り替えるといった面倒臭いことをしなくていいので、めっちゃ便利です。
なお、僕はMacユーザーなので、Command + Cのように、Commandを利用した表現をしますが
Windowsユーザーの方はCommandをControlに置き換えて実行してみてください。
当記事では、Commandを優先させて記述します。
Command(Control) + C
まずは、Command(Control) + C です。
これは知っている方も多いかもしれませんが、選択した内容をコピーするときに使用します。
選択した内容をコピーする際って、通常なら手をキーボードからマウスに移動させ
左上の欄にある「編集」を選択し、出てきたメニューから「コピー」を選択しなければいけません。
つまり、実際にコピーできるまでに3回の処理（行動）が必要なんですが
Command(Control) + C を覚えておけば、1回の処理で済みます。
おそらく、ショートカットキーで1番よく使うものなので、ぜひ使いこなせるようになってみてください。
Command(Control) + X
Command(Control) + Cは、選択した内容をコピーできるショートカットでしたが
Command(Control) + Xでは選択した内容を切り取って、元々あった内容を消すことができます。
あるファイルの中身を、全部別のファイルに移し替える時なんかに使いますね。
Command(Control) + V
お次は、Command(Control) + V。
Command(Control) + Vでは、Command(Control) + C や Command(Control) + X で取得したテキストなどの内容を貼り付けることができます。
なので、基本はCommand(Control) + C やCommand(Control) + Xと一緒に使用します。
このショートカットもよく使うので、ぜひ覚えておきましょう！
Command(Control) + A
Command(Control) + Aは、全選択ができます。
VSCodeなどのエディタ内のコードや、指定のGoogleドキュメントなどに書かれたテキストなどを全て選択しなければいけないときに便利です。
大抵は、最初に紹介したCommand(Control) + Cと組み合わせて、全ての内容をコピーしますね。
あるいは、Command(Control) + Xで切り取り。
そして、Command(Control) + Vで貼り付け。
まだショートカットに慣れていない人は
Command(Control) + A → Command(Control) + C → Command(Control) + V
この流れをひたすら練習しましょう。笑
Command(Control) + B
これは、僕はそこまで使わないですが、Command(Control) + Bで「選択したテキストなどを太文字にする」ことができます。
もし多用するという人がいたら、どういう場面で使うのか、ぜひコメント欄で教えてください。笑
Command(Control) + S
続いては、Command(Control) + Sですが、これは「保存をする」操作です。
特に、エディターで書き換えた内容を保存したいときにめっちゃ重宝します。
いちいち書き換えた内容を、左上の「ファイル」から「保存」を選択するの、面倒くさいです。
しかも、その間にはキーボードからマウスに手を移すという動作が発生します。
しかし、Command(Control) + S のショートカットを覚えておけば、その操作だけでもう保存できますのでかなり便利。
ちなみに、WordPressで記事を執筆しているときに利用すると、記事の下書きを保存してくれますし
ブラウザで使用すると、「名前をつけて保存」で認識していると思いますが名称を決めたり、保存先のディレクトリ（フォルダ）を選択する画面が出てきます。
（ブラウザで使用することは個人的にあまりないのですが、結構間違ってウィンドウを表示させてしまうw）
ちなみに、SはSaveのSです。
Command(Control) + R
Command(Control) + R は、Webページなどをリロードするときに使用します。
ブラウザの上の方にある、くるっと回った矢印を押した時と同じ処理も、ショートカットで行うことができます。
Rは、ReloadのRです。
これも多用する人は多用すると思いますが、これよりも多用するショートカットがあります（僕だけかな？）。
それが、次に紹介するShift + Command(Control) + R です。
Shift + Command(Control) + R
Shift + Command(Control) + R」で、スーパーリロードを行うことができます。
スーパーリロードとは、ウェブサーバーからすべてのデータを強制的に再取得する方法です。
たまに、CSSを書き換えてファイルを上書きしたのに、ブラウザのキャッシュが残って反映されないことがありますが
スーパーリロードを利用すれば、CSSの も強制的に書き換えるので、反映されないことがなくなります。
要は、キャッシュを無視して、強制的にデータを再読み込みするわけですね。
キャッシュが原因でWebサイトがうまく反映されない、と思ったら
ブラウザのキャッシュを消す操作をする前に、ぜひ利用してみてください。
Command(Control) + D
Command(Control) + Dは、一言で言うと「同じ内容の箇所を選択する」ことができます。
どういうことかというと、主にエディタで利用するのですが、例えば
<ul>
<li><a href="https://bbb.com" class="nav-list">ホーム</a></li>
<li><a href="https://ccc.com" class="header-list">会社概要</a></li>
<li><a href="https://ddd.com" class="header-list">制作実績</a></li>
<li><a href="https://eee.com" class="header-list">お問い合わせ</a></li>
</ul>というコードがあったとします。
しかしCSSの都合で、4つのリストのclass名を「nav-list」にしたくなったとします。
その場合は、ホームのclass名の「nav-list」をまずはCommand(Control) + Cでコピーしてから
会社概要の「header-list」を選択し、Command(Control) + Dを1回押すことで、制作実績のclass名の部分も選択されるわけです。
さらにもう1度Command(Control) + Dを押すとお問い合わせのclass名も選択できるので、そこでCommand(Control) + Vで貼り付けを実行すると、4箇所のclass名が「nav-list」に変更されるわけです。
これは、エンジニアやプログラマー、コーディングを行うデザイナーにとっては覚えておきたいショートカットなので
知らなかった人は、ぜひ覚えておいてください！
めちゃくちゃ便利です！
ちなみに、ブラウザでCommand(Control) + D を使用すると、そのページをブックマークに追加します。
Command(Control) + F
Command(Control) + F は、検索をする際に使用します。
例えば、エディター内でJavaScriptのscrollイベントの場所を探したいときは、Command(Control) + Fを押すと検索窓が出てきますので
「scroll」と検索し、どこにあるかを一瞬で探せます（別にscrollイベントである必要はありませんがw）。
もちろん、エディター内だけでなくブラウザで検索するときも使えます。
探し物をして、その部分を他に置き換えたり削除するという行為は結構行うので、このショートカットも覚えておくと何かと重宝しますよ！
最後に
というわけで、エンジニアやプログラマー、デザイナーなら知っておきたいショートカットをご紹介しましたが、いかがでしたでしょうか？
あなたが普段多用しているショートカットがあったら、ぜひコメントに書いてみてくださいね。
このブログでは、普段はコーディングやWordPressなどに役立つ情報を発信しているので
次回の記事もぜひみてみてください！
＼ 最新情報をチェック ／
コメント