【告知】ノマドエンジニア養成ブートキャンプ

【DAY9.】30DAYSトライアル9日目をわかりやすく解説

ファイル

おはこんばにちは、ミヤビです。

 

さて今回は、環境設定編の2日目です。

 

 

✔︎本記事の内容

  • DAY9.『基本のショートカットを覚えよう+ファイルパスを理解しよう』の解説

 

✔︎30DAYSトライアル1stの最終目標

  • 月5万を稼ぐスキルを目指す
  • 未経験からWEB系エンジニアの転職を目指す
  • 未経験からWEB系ノマドエンジニアを目指す

 

ローカル環境で開発を効率的に行えるよう、ショートカットの基本を抑えましょう。

VSCodeのショートカットキーをまず覚えよう

キーボード操作だけで、コーディング速度が鬼上がります。

 

ショートカットキーを使うメリットは下記のとおり。

 

  • コーディングが短縮できる
  • マウス操作の煩わしさから開放される

 

まず初めに覚えるべきショートカットキー

ショートカットキー動作
⌘ + cコピー
⌘ + x切り取り
⌘ + v貼り付け
⌘ + s保存
⌘ +⇧+ k行の削除
⌥ + ↑ or ↓行を上下に移動
⌥ + ⇧ + ↑ or ↓行を上下にコピー
⌘ + /コメントアウト

 

はい、というわけで上記のショートカットキーをまず覚えましょう。

 

実際に自分の手で一通り試してみると良いですね。

 

下記に一覧がまとめてあります。

 

全部を覚えるのは難しいので、上記を最初に覚えつつ、勉強しながら徐々に覚えていくとイイかもです。

 

参考として、、、

 

  • デスクトップに貼り付ける
  • タブレット端末ですぐ確認できるようにセットする
  • 紙に印刷する

 

などといった工夫をして、ショートカットキーを覚えるのもありですね。

 

VSCodeショートカット一覧【 Mac版】

ファイルパスも理解しよう

ファイルパスとは、ファイルがどこにあるのかを示す文字列のことです。

 

progateでは、気にしなくても良かったですが、ローカル環境でコーディングを行う場合は必須です。

 

下記が非常に分かりやすいです。

 

 

  • index.html
  • cssフォルダ – style.css
  • imgフォルダ – 〇〇.png

 

HTMLからstyle.cssを読み込みたい場合は、

 

<link rel="stylesheet" href="css/style.css">

 

stylesheetから画像を読み込みたい場合は、

 

background-image: url(../img/~.png);

 

ファイルパスへの理解はまだまだ学習が必要なので、ザックリとしか解説できません。

 

というわけで今回はここまでです。

 

次回で環境設定編を終わらせましょう。

 

ファイル 【DAY9.】30DAYSトライアル9日目をわかりやすく解説

 

【無料あり】おすすめするプログラミングスクール3社【ニーズ別に紹介】