ドットインストールでの学習を始めました。

JavaScriptの勉強がしたくて、以前から気になっていたドットインストールでの学習を始めました。
Progateもデザインがかわいいので試してみようと思いましたが、学習は動画がやはり頭に入りやすいと思い、こちらを選択しました。
まずはHTMLとCSSも復習したいと思います。

出典：ドットインストール

HTML/CSSの学習環境を整えよう [macOS版]をクリアしました。

動画に沿って、VS Codeエディタを導入しました。
Dreamweaverのようなコードを書くためのツールです。
日本語版のもありましたが、ドットインストールに合わせて英語版にしました。
ドットインストールの動画ではChrome導入、拡張子の表示の項目もありましたが、以前から設定していたので割愛しました。

実際にVS Codeエディタを使ってコーディングしてみた。

VS Codeエディタにとりあえず慣れたいと思い、
３.もっと詳しくHTML/CSSを学んでみように飛んで、実際にVS Codeエディタを使ってコーディングを学習してみました。

入力してみた感想ですが、
・全角入力が発見しやすい。
・行を整えやすい。
・適当に選択したコードでも全体を拾って移動してくれる。
・ブラウザに作成したコードの結果を表示させるのが簡単。

この４つの機能が良かったです。
時短になるし、間違えにくいし、何よりシンプルな機能でイライラがないのでコーディングに集中できるツールだな、と思いました。
以下にまとめてみました。

全角入力が発見しやすい。

VS Codeエディタの設定で、プログラミング用フォントのRicty Diminishedを導入しました。
間違えて全角で行間をあけても「○○○ ・・・」と表示されるので発見しやすいです。

導入方法は、ドットインストールで無料で公開しているので参考にしてみてください。
#04 プログラミング用フォントを導入しよう

行を整えやすい。

ショートカットキーで、
tab：字下げ
shift+tab：字下げを戻す
で行全体をまとめて字下げできます。

適当に選択したコードでも全体を拾って移動してくれる。

適当な箇所で行を選択しても、全体を移動可能です。
編集ミスも減らせそう。
移動する際は、ショートカットキーを使います。
option+矢印キー：行の移動
移動先の綴じタグがするする移動してくれます。

ブラウザに作成したコードの結果を表示させるのが簡単。

コーディングしているファイルの名前の部分をブラウザのタブにドラッグさせるとブラウザに結果を表示してくれます。
わざわざhttp・・・とファイルの居場所を探してブラウザ上に表示させる手間が省けます（私はこれが一番助かる機能だと思いました。）

VS Codeエディタのショートカット一覧

他にも使えそうなショートカットキーを調べてみました。

⌘ + A ：全選択
⌘ + C ：一行コピー
⌘ + X ：一行切り取り
⌘ + V ：貼り付け
⌘ + Z ：戻る
⌘ + ⇧ + Z ：進む
⌘ + Y：進む
⌘ + [ ：インデントを下げる
⌘ + ] ：インデントを上げる
⇧⌥F ：全体のフォーマットを整える (インデント整形含)
⌘ + / ：選択範囲をコメント/アンコメント
⌥ + ↑/↓ ：一行まるごと上下に移動
⌥ + ⇧ + ↑/↓ ：一行まるごと上下にコピー
⌃ + D ：一文字削除(WindowsのDeleteキー)
⌘ + ⇧ + K： 一行削除
⌘ + F ：検索
⌘ + H： 置換
⌘ + Enter：下に空行追加
⌘ + ⇧ + Enter： 上に空行追加

⌘ + ⇧ + P：コマンドパレットを開く
⌘ + ,：設定を開く
⌘ + J：ターミナルの表示の有無
⌘ + B ：サイドバーの表示の有無
⌘ + = ：文字を縮小
⌘ + ⇧ + = ：文字を拡大

⌥ + ←/→ ：単語ごとの移動
⌘ + ←/→ ：先頭/最後尾に移動
⌃ + G ：指定行に移動
⇧ + fn + ↑/↓ ： 画面の移動（カーソルは動かさず）
⌘ + fn + ↑/↓ ：画面の移動（1ページごと）

⌘ + N ：新しいファイル
⌘ + ⇧ + N ：新しいウィンドウ
⌘ + S ：保存
⌘ + ⇧ + S ：名前を付けて保存
⌘ ( +⇧) + Tab ：タブ移動（連続して押すと選択が変わる）

Macのコーディング必須ショートカットキー

⌘ + Tab：アプリの切り替え
⌘ + ⇧ + F：フルスクリーンのON/OFF

Chromeのコーディング必須ショートカットキー

⌘ + T：新しいタブを開き移動
⌘ + N：新しいウィンドウを開き移動
⌘ + L：アドレスバーに移動
⌃ + Tab：次のタブに移動
⌃ + Tab + ⇧：前のタブに移動
⌘ + W：現在のタブを閉じる
⌘ + リンク先をクリック：リンク先を新しいタブで開く