普段はIT営業としての情報発信をしているのですがプログラミング学習を進めて１ヶ月半くらいになってきてこれは覚えておいたほうがいいなというショートカットをまとめました。
WindowsとMac両方保有しているので両方について記載したいと思います。
OSはWindowsはWindows10.MacはmacOS Mojaveを使っています。
ちなみに僕のリテラシーレベルでいうとWindows歴15年ほど、Macは2年ほどです。
とはいえWindowsもショートカットをほぼ使ってこなかったのと、Macに関してはプログラミング学習するまではほぼ素人に近い状態でした。
プログラミング学習を進めてショートカットとか効率化の大事さを学んだので基礎的ですが厳選した内容を記事にしました。
背景：現在の学習分野はHTML・CSS・JavascriptのWEB系言語。クリックや移動時間が多かった。
WEB系言語から勉強しようということで、HTML・CSS・Javascriptから始めています。
現在の基本学習スタイルはドットインストール。エディタはAtomエディタ。ブラウザはChromeです。
ドットインストールで学んでいるという人は基本的な学習スタイルなのではないでしょうか。
基本的な流れは
①ドットインストールで動画を見る
②Atomエディタでコードを書いてみる
③Chromeブラウザで本当に反映されているかを確かめる
の大きな３つの流れです。
ですが、これが書くたび、間違う度に繰り返すわけですから、クリックは増える、結構画面移動が激しくて非常に効率が悪いなと感じていました。
これは何かショートカットとか覚えないと相当時間を無駄にするぞ！と思ったのが背景でした。
そんな中で探して実際に使えたものをご紹介します。
WindowsとMacそれぞれでご紹介したいと思います。
Windows編 Alt+tabとCtrl+tabだけは絶対使った方がいい
なぜWindowsを使っていたのに使ってこなかったのかと思ったのが、Alt+TabとCtrl＋Tabの存在です。
Alt+Tabは別のソフトに移動することができます。AtomエディタからChromeブラウザへの移動がワンボタンでできます。（正確には２ボタン）
Before コードを書く
Alt+tabでAtomエディタからすぐChromeに移動できた
Ctrl＋Tabは主にChromeを使っている時にドットインストールの動画のタブから、自分の作ったサイトのタブへ移動する時に使えます。
Ctrl+tabでChromeのタブ切り替えも可能
この二つの組み合わせで、マウスの移動がほぼなしで一連の流れが実現できます。
ですのでこの二つだけは使った方がいいです。
ちなみにAlt＋Tabの場合、Altを押した状態でTabを押せば押すほど次のソフトに移動していけるので複数タブが開いてあっても移動が可能です。
Ctrl+Tabだけでなく、Ctrl+Shift+Tabとすると後ろでなくて前に移動できるのでブラウザで動作確認後、ドットインストールの動画に戻るということも可能です。
ただこれはWIndows・Macに限りませんがどちらも開いているソフトが多い・Chromeのタブが多いと移動も多くなりやすいのでなるべく少ない方が集中して作業ができます。
その他の使えるショートカット：Windows編
ここら辺はドットインストールでもMac基準なので語られてなかったりするので、使えるものを書いておけます。
Chromeブラウザ
・更新はCtrl＋Rでリロードできます。エディタで編集した結果をブラウザで確認したい場合はこちらを使いましょう。 MacのCommand+Rと一緒です。
・Ctrl+Shift+Iでノークリックでデベロッパーツールがひらけます。デベロッパーツールについてはドットインストールで説明が受けられますのでどうぞ。
→ドットインストール Chrome Developer Toolとは？
ちなみにMacでは同じ操作がoption+command+Iでできます。
Atomエディタ
・Ctrl＋Sで今入れたコードをセーブできます。MacでいうCommand＋Sと一緒ですね。
・Ctrl+shif+D で選択している行全てをコピーできます。MacでいうCommand＋Ctrl+Dと同じ操作ができます。
Before
After ショットカットキーでコピーされる
・Ctrl+上か下の矢印で今いる行の要素を移動できます。 MacでいうCommand+Control+矢印と同じ操作です。
複数行選択していると複数分移動できます。
Before
上下の任意の場所に移動できる
こういったテクニックはドットインストールでも紹介されていますがWindowsユーザーも使えた方が絶対いいですね。
Mac編：Windowsと違い デスクトップの概念の差を押さえる
Windowsユーザーの僕が一番困惑したのはMacのウィンドウの概念です。
Macは直感的で使いやすいと言われますが、「どこかじゃ！全然思うようにいかない！」って最初は思っていました。
今では僕レベルでもWindowsと同じレベルくらいでは使えると思っています。今では確かにMacの方が使いやすい部分も結構感じますね。
Macを使う上で一番Windowsと違う点はWindowsと違ってデスクトップが複数持てるということです。
この差は大きいです。Windowsの場合はデスクトップが一つで作業できる窓が複数ある、という感じですがMacでは複数もつことができます。
これがどういうことかというとMacではChrome用のデスクトップ。Atomエディタ用のデスクトップという別々のデスクトップが持つことができます。
またそれをショートカットキーではなく指でスライドして直感的に操作できるというのがポイントです。
Macだとトラックパットで操作できることが多い。
ChromeとAtomエディタ用のデスクトップを用意しておくと、三本指ですぐページの切り替えができます。
トラックパッド操作動画→動画も一応貼ったので必要ならご確認ください。
Macの場合はここを押さえておくということが大事で大幅な効率化につながるということがわかりました。
元々Macユーザーの方には当然と馬鹿にされてしまうかもしれませんね。でも元々Windowsユーザーで悩んでいる人がいるのではないかと思ってます。
あと僕がつまづいたのが、どうやってそのデスクトップの設定をするかという点です。
Windowsに慣れていると、同じデスクトップは一つなので窓を小さくしたりして、ドラック&ドロップもできたり操作がそれなりにできます。
ですがMacだと複数デスクトップがあって指で操作できる分、別のデスクトップにはドラックアンドドロップできなかったり操作がおぼつかないことも多くなりました。
その場合トラックパットを4本指にして上にスワイプしてあげると操作できます。
4本指でスワイプしてあげると上記のような画面が出てきて、ここからデスクトップの追加や削除・アプリの移動などが行えます。
例えば FinderをChromeと同じ画面で見たかったとするとChromeのデスクトップまでドラックアンドドロップしてあげればOKです。
FinderがChromeと同じデスクトップになった
その上で移動したデスクトップを確認するとこんな風な画面になるので、見るのもドラックアンドドロップするときも便利です。
本当に基礎的な部分なのでしょうが、ど素人の僕にはここも知らなかった機能でした。
その他にもデスクトップの順番とか選べるので見やすい風に設定してあげるといいと思います。
その他のショートカット：Mac編
基本はWIndows編で紹介した通りです。WindowsのChromeのCtrl＋Tab相当のものは見当たりませんでした。
Macはまだまだ開拓できそうなので、研究します。
今回はWindowsやMacでプログラミング学習を始めた人向けに基本操作やショートカットなど時間が節約できそうな大事な部分を紹介しました。
もっとまとまってきたらまた記事にしようと思います。