DAY9の課題は「基本のショートカットを覚える＋ファイルパスを理解する」になります。
VSCodeのショートカットキー
ショートカットキーを使いこなすことはプログラミングスピードを向上させるためには必須なので、東京フリーランスのサイトに貼られているVSCodeのしょーカット一覧のQita記事【Mac版】 VisualStudioCode キーボードショートカットを確認してみたころ、ショートカットの種類は大きく以下の種類に分けられています。
- 基本操作
- リッチな言語エディット
- ナビゲーション
- エディタ/ウインドウ操作
- ファイル操作
- 画面表示
- 設定
- デバッグ
- タスク
- 拡張
色々と種類は多いですが、とりあえずは基本操作とファイル操作のファイル保存(command + S)をおさえておけば問題ないかな(ファイル保存は何か編集したら実行するクセがついてるから大丈夫)。
もちろん他のファイル操作やエディタ/ウインドウ操作なども覚えたら効率は上がると思いますが、基本操作のショートカットを一番使うことになりますからね。
というかエディタ/ウインドウ操作系のショートカットは、使っててもどこにフォーカスが移動したかを見失いがちなんで下手に使うと逆に時間がかかってしまいますし。
これもDAY8のEmmetと同じでやりながら覚えていくしかないですね。そのためにも「この操作のショートカットあったなぁ」って思えるように意識してやっていきます。
ファイルパスを理解する
東京フリーランスのサイトにも貼られていますが、ちずみさん(@098ra0209)の図解はマジで分かりやすいです。
✅なくそう！ファイルパス！の壁！
html,css初心者泣かせのファイルパス（自分も泣いた）について図解しました。 pic.twitter.com/QfNp83HUOO
— ちづみ (@098ra0209) March 11, 2019
自分はプログラミングの経験があったので良かったですが、相対パスとか絶対パスとかプログラミング初心者には難しいと思います。
「../」とかパッとみたら、上の階層を省略して書いてるのかなぁ？とか思っちゃいますし(実際には一つ上の階層ということ)。
という風に分かっっていてもcssから画像フォルダを読み込もうとした時に、ついついhtmlからの階層で記述してしまったりしますか注意が必要ですね。
まとめ
- ショートカットキーは基本操作とファイル操作のファイル保存(command + S)をおさえておく
- ファイルパスは編集は編集を行なっているファイルからの相対パスを記述する
- もちろん絶対パスでも大丈夫(HTML、CSSとは関係ないレベルでのフォルダ変更に影響を受けるので普通はやらない)
