INDEX
目次
0. はじめに
✔︎ TIPSとは？
「コツ」や「秘訣」「裏技」「アドバイス」を意味する言葉。
- ニュアンスとしては、「知らなくても困らないが知っておくと便利に作業を進められるようなコツ」という意味を表すことが多いです。
1. Google Chromeをデフォルトブラウザとして使う
エンジニアはGoogle Chromeをブラウザとして使うことがほとんどです。後に学習しますが、開発検証ツール・Chrome拡張機能などエンジニアにとって便利な機能がたくさんあるからです。
a. Google Chromeをデフォルトブラウザに設定するステップ
以下のリンクの手順に沿ってChromeをインストールしましょう。
- インストールし、Chromeを起動できることを確認してください。
以下のリンクの手順に沿ってGoogle Chromeを既定の(デフォルト)ブラウザに設定する
- Chromeを既定のブラウザに設定すると、開いたリンクが毎回Chromeで開かれるようになります。便利なので設定してください。
2. 必須ショートカットでプログラミング学習効率UP
これらのショートカットは使いこなせるようになると、作業スピードが確実に上がりますので、少しずつ取り入れていきましょう。
a. 便利ショートカット集
| Windows | Mac | 動作 | 備考 |
|---|---|---|---|
| Ctrl + A | command + A | 全選択 | 全て選択して削除したいときなどに便利です。 |
| Ctrl + S | command + S | 上書き保存 | VSCodeを使用し、コードを変更したらすぐに保存->ブラウザで結果を確認という作業を何回も繰り返す時に便利です。 |
| Ctrl + V | command + V | ペースト | |
| Ctrl + C | command + C | コピー | |
| Ctrl + X | command + X | 切り取り | |
| Ctrl + Z | command + Z | 元に戻す | コードを間違って入力したときなどにdeleteで消すよりこちらの方が早かったりします。 |
| Ctrl + shift + Z | command + shift + Z | 「元に戻す」を取り消す | 「元に戻す」を押しすぎた場合などに使用 |
| Ctrl + ← or → | option + ← or → | 単語移動 | コーディング中に使用 |
| Home | command + ← | 行頭に移動 | コーディング中に使用 |
| End | ccommand + → | 行末に移動 | コーディング中に使用 |
| Ctrl + ↑ | command + ↑ | 最初に移動 | コーディング中に使用 |
| Ctrl + ↓ | command + ↓ | 最後に移動 | コーディング中に使用 |
| Ctrl + N | command + N | Chromeにて新規ウィンドウ立ち上げ | |
| Ctrl + T | command + T | Chromeにて新規タブ立ち上げ | |
| Ctrl + クリック | command + クリック | リンクを新規タブで開く | Googleで検索し記事を開くときは、基本全て新規タブで開いた方が便利です。 |
| Ctrl + shift + T | command + shift + T | Chromeにて閉じたタブを復元 | 間違ってタブを閉じてしまった時に復元できます。 |
| Ctrl + W | command + W | Chromeにてタブを閉じる | タブを開きすぎると重くなりますので、不要なタブはこまめに消しましょう。 |
| Ctrl + L | command + L | アドレスバーをフォーカス | Chromeのリンクが書いてあるバーを選択できます。アドレスバーフォーカス・コピーで素早く記事のリンクをコピーできます。 |
| Ctrl + R | command + R | webページのリロード | HTML/CSSの模写コーディングなどで変更を確認するとき、リロードを押します。 |
b. その他ショートカット集
ここに取り上げた以外にもショートカットはたくさん存在し、ほとんどのPC操作はキーボードだけでできます。さらにショートカットを極めたい人は以下の記事も参考にしてみてください。
Macのショートカット集
Windowsのショートカット集
3. デュアルディスプレイ / 画面分割 / magnetで生産性を上げる
デュアルディスプレイとは、以下の画像のようにディスプレイをパソコンに繋いでディスプレイの画面を追加で使ってPC操作をできるようにすることです。
a. デュアルディスプレイを実装した作業風景
1,2,3と番号を振っていますが、写真においては以下のように役割が分かれています。
==
-
1でVScodeを開き、コードを書く
- HTML・CSS等を学ぶ際には実際に写真のようにコードを書くことになります。
-
2でここでは「div 中央寄せ 方法」と調べていますが調べものなどをする
- コーディングの際に生じた疑問点について調べています。
-
3でVScodeで実装したHTML・CSSの結果を確認できるようにする
- 実際にコードの内容を出力すると文字やデザインが表示されます
==
こうすると無駄な画面切り替えなどをしなくても、必要な作業が全て効率的にできるようになります。
-
もちろんデュアルディスプレイがなくても十分に学習はできますが、Amazonなどで安く買えますので、気になる方はぜひ購入を検討してみてください。
-
快適な作業環境を作ろう を参考に商品を選ぶと良いです！
b. 画面分割の方法紹介（Mac・Windows対応）
Macの方向け - Magnet -
Macで画面分割を有効活用するには、有料のアプリケーションをダウンロードする必要があります。
Macの画面分割を効率化する「Magnet」を使ってみた！
Macを使うにあたり、画面分割は欠かせない機能です。たとえば半分の画面でSafariを閲覧しつつ、もう半分の画面でWordファイルを作成したいときにも、画面分割が役立ちます。
しかしMacが標準で搭
- 上の記事で紹介するMagnetというアプリを利用することでMacでも画面分割が可能となります。
参考動画
【Magnet】Macの画面をピタッと分割！
via www.youtube.com
- この動画では、Magnetのメリットや使い方をわかりやすく解説しています。気になった方は是非見てみてください。
Windowsの方向け
Windowsではデフォルトの機能で画面分割を行うことが可能です。
Windowsパソコン画面を2分割にする方法【マルチウィンドウ】
Windowsパソコンの画面を2分割表示にする方法と、作業効率を上げるマルチウィンドウ活用術を解説します。
- Windowsを使用している方で効率的に画面分割したい方は、Win + 方向キーでできますので試してみてください。上の記事を参考にして行いましょう。
4. ブラインドタッチで入力時間短縮
ブラインドタッチで素早く文字を入力できるかで生産性は大きく変わりますので、習得されていない方は少しずつできるようにしていきましょう。
a. タイピングの指の置き場がわからない（慣れない）！という方向け
タイピングの第一歩は正しい指の置き場を正確に把握し実践することです。
インターネットでタイピング練習 イータイピング | e-typing ローマ字タイピング
ウェブ上で無料のタイピング練習ができます。基本からじっくり学びたい方、もう一度練習し直したい方、ぜひご利用ください。楽しくタイピング練習しませんか。
-
無料で使えますので、会員登録して練習メニューの基礎練習・基本練習・応用練習などをやるといいでしょう。
-
指の置き場所を理解し、慣れるところまでスムーズに学ぶことができます！
b. タイピングのスピードをより早くしたい！という方向け
タイピングをより早くするには練習を積み、早く指が動くようにする必要があります。
寿司打
「寿司打」はローマ字入力用のタイピング練習ゲームです。無料＆ブラウザで遊べますので、ちょっとした空き時間の練習や暇つぶしにどうぞ。複数の入力に対応しており、表示されているキー以外にもお好みの打ち方でタイピングいただけます。
-
寿司打でゲーム感覚で練習し、タイピング速度を上げていきましょう。高級10000円コースをクリアできると、一般的にタイピングが速い方になるかと思います。
-
また、本当に速いエンジニアだと20000点は超えます。寿司打はハマる人はハマるので試しにやってみると良いでしょう！
5. おすすめのChrome プラグイン
Google Chromeは「プラグイン」 を導入することで、様々な便利な機能を追加することができます。
プラグインとは、「できることを増やすためにくっつける機能拡張」というイメージを持ってください。
プラグインとは、「できることを増やすためにくっつける機能拡張」というイメージを持ってください。
a. 導入必須！プラグイン2選（重要）
こちらのプラグインは便利すぎるので必須で導入をお願いいたします。
カラーピッカー：ドロッパー
こちらはWEBサイト上の色がわかるツールです。
What Font
こちらはWEBサイト上のフォントの種類がわかるツールです。
このサイトの文字おしゃれだけどどういうフォントなんだろう？というのが気になった際に使うのがおすすめです。
このサイトの文字おしゃれだけどどういうフォントなんだろう？というのが気になった際に使うのがおすすめです。
その他にもプラグインの種類はたくさんあります。
もっと知りたい方は以下の記事がおすすめです！
もっと知りたい方は以下の記事がおすすめです！
【2023年版】生産性UP！Chromeの拡張機能10選 - CMC Japan
「調べものをしていたらタブが多くなりすぎて、欲しいサイトや情報が見つからない」「英語をいちいちGoogle翻訳に入力して翻訳してるけど、もっと簡単に一発で翻訳できる便利な機能ないの！？」Google Chromeをメインブラウザとして利用している方であれば、このような不満を抱いたことが一度や二度あるのではないでしょうか。本記事は、そんな方々のために、超便利なChrome拡張機能10選をご紹介します。効率的な働き方が求められるビジネスパーソンの生産性が爆上がりさせるものを厳選しました！