開発TIPS -基礎編-

前の章に戻る

0. はじめに

この教材の学習時間:70分

✔︎ TIPSとは？

「コツ」や「秘訣」「裏技」「アドバイス」を意味する言葉。

ニュアンスとしては、「知らなくても困らないが知っておくと便利に作業を進められるようなコツ」という意味を表すことが多いです。

1. Google Chromeをデフォルトブラウザとして使う

目安の学習時間:10分

エンジニアはGoogle Chromeをブラウザとして使うことがほとんどです。後に学習しますが、開発検証ツール・Chrome拡張機能などエンジニアにとって便利な機能がたくさんあるからです。

a. Google Chromeをデフォルトブラウザに設定するステップ

以下のリンクの手順に沿ってChromeをインストールしましょう。

Google Chrome インストールマニュアル

インストールし、Chromeを起動できることを確認してください。

以下のリンクの手順に沿ってGoogle Chromeを既定の(デフォルト)ブラウザに設定する

Go to Page →

Chromeを既定のブラウザに設定すると、開いたリンクが毎回Chromeで開かれるようになります。便利なので設定してください。

2. 必須ショートカットでプログラミング学習効率UP

目安の学習時間:15分

これらのショートカットは使いこなせるようになると、作業スピードが確実に上がりますので、少しずつ取り入れていきましょう。

またMacのショートカットキーは、メニューバーなどでは特殊な記号で表記されることがあります。以下の図で代表的なキーの記号を確認しておきましょう。

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操作を効率化するショートカットキーは数多く存在します。余力がある人は以下のショートカットキーも身につけるて、さらに効率的に作業を進められるようにしましょう。

Windows	Mac	動作	備考
Windows + Shift + S	command + shift + 4	選択範囲のスクリーンショット	エラーメッセージや参考にしたいデザインの記録に必須です。
PrtSc	command + shift + 3	全画面のスクリーンショット	PrtScキーは、お使いのキーボードによってFnキーとの同時押しが必要な場合があります。
Alt + Tab	command + tab	アプリケーションの切り替え	複数のアプリ（VSCode, Chromeなど）を頻繁に行き来する際に役立ちます。
Ctrl + F	command + F	ページ内検索	長いドキュメントやコードから特定の単語を探す時に使います。
Ctrl + H	command + option + F	検索と置換	コード内の単語を一括で修正したい場合に便利です。Macの command + H はウィンドウを隠す操作なので注意しましょう。
Windows + D	command + F3	デスクトップを表示	開いているウィンドウを一時的に全て隠したいときに使います。
Alt + F4	command + Q	アプリケーションを終了	ウィンドウを閉じるだけでなく、アプリケーションそのものを終了させます。
Windows + L	control + command + Q	PCをロックする	席を離れる際のセキュリティ対策として習慣づけましょう。

3. デュアルディスプレイ / 画面分割 / magnetで生産性を上げる

目安の学習時間:15分

デュアルディスプレイとは、以下の画像のようにディスプレイをパソコンに繋いでディスプレイの画面を追加で使ってPC操作をできるようにすることです。

a. デュアルディスプレイを実装した作業風景

1,2,3と番号を振っていますが、写真においては以下のように役割が分かれています。

==

1でVScodeを開き、コードを書く
- HTML・CSS等を学ぶ際には実際に写真のようにコードを書くことになります。
2でここでは「div 中央寄せ方法」と調べていますが調べものなどをする
- コーディングの際に生じた疑問点について調べています。
3でVScodeで実装したHTML・CSSの結果を確認できるようにする
- 実際にコードの内容を出力すると文字やデザインが表示されます

==

こうすると無駄な画面切り替えなどをしなくても、必要な作業が全て効率的にできるようになります。

もちろんデュアルディスプレイがなくても十分に学習はできますが、Amazonなどで安く買えますので、気になる方はぜひ購入を検討してみてください。
快適な作業環境を作ろうを参考に商品を選ぶと良いです！

b. 画面分割の方法紹介（Mac・Windows対応）

コーディングとブラウザでの確認を同時に行うなど、複数のウィンドウを並べて作業できる画面分割は、開発効率を大きく向上させます。
ここでは、MacとWindowsそれぞれの標準機能を使った画面分割方法を解説します

Macの方向け：標準機能「Split View」の活用

Macでは、OSに標準で搭載されている「Split View (スプリットビュー)」という機能を使って、2つのアプリケーションを画面の左右に並べて表示できます。

操作手順

分割したいウィンドウの左上にある緑色の最大化ボタンに、マウスカーソルを合わせます。
表示されたメニューから「ウインドウを画面左側にタイル表示」または「右側にタイル表示」を選択します。
選択したウィンドウが画面の半分に配置されます。
画面のもう半分に、開いている他のアプリが一覧で表示されるので、並べて表示したいアプリをクリックして選択します。