以前から独学で簡単なプログラミングの学習はしていましたが、
フリーランスとして在宅でコーディングなどの仕事ができるようになる目的で、2024年5月から、「デイトラ
」というオンラインプログラミングスクールでWeb制作を学習開始。
その中で、学んだり調べたことを【X】に日々投稿しているので、
このページでは、主にWeb制作などで、コードエディターの「VS Code」でコードを書くのを快適にする小ネタ・投稿をまとめておきます。
こういう小ネタを知ってるかどうかで、コードを書くスピード、、、
何よりも「ムキィ！！」ってなるストレスをかなり軽減できます。
まだ、ポートフォリオは作ってませんが、オンラインサブスクサイトで独学していた以前と比べ、デイトラを始めてからめちゃくちゃレベルアップできてます。
特にVS Code、開発者ツール、マウスボタンなども含めて、
ショートカットキー関連は、すぐに導入出来て、劇的に効率が変わります。
そこだけでも目次からジャンプしてみてみてください。
これからも、調べたことなどどんどん【X】に投稿して、ここにも追記していく予定なので、
この記事が参考になった～、って方は、【X】だけでもフォローおすすめです。
この記事のネタの知識を得るきっかけの学習は、毎日↓の「デイトラ」でやってます。
【VS Code】 関連：コーディングを快適にする小ネタ
拡張機能
こまごま便利なものまとめたサイト
コーディングを効率化することに情熱を燃やされてる？？方が書いてるサイトみたいです↓↓
このXの投稿にリンク張ってる記事以外にも、いろいろ参考になる記事書かれてるみたいんなんで、のぞいてみると毎日のコーディングが快適になる？かもです。
Live Server：HTML・CSS、リアルタイム反映
HTMLやCSSを、VS Codeで書いたそばからリアルタイムでブラウザに反映させる拡張機能。
【X】の投稿ではないですが、デイトラで教わって使ってます。
参考サイト↓
VS Code の Live Server – ブラウザを自動的に再読込する拡張機能について
追記：Live Server、環境により超不安定？Perfect Pixcelでの確認は使わなくてもできます
Live Server、PCスペックなんかの問題で不安定なら、無理に使わなくてよさそうです。
Perfect Pixcel を使ったデザインとのずれの確認も、Perfect Pixcelの設定をいじればできました。
シークレットモードでの実行とファイルのURLへのアクセスを許可すれば、HTMLを直接ブラウザで開いてもPerfect Pixcel使えます。
Open in browser：HTMLをショートカットでデフォルトブラウザで開く
「Live server」で、リアルタイムにHTMLを同期してブラウザ表示するのは便利、、、
なんですが、Chromeの開発者ツールと同時に使ってると負荷が大きいのか僕の環境だとしょっちゅう表示崩れ起こします。
結局「Live server」は、「Perfect pixel」を使ってデザインカンプとのずれを確認するときだけにして、大まかなHTML・CSSを書くときは直接HTMLをブラウザで開いてます。
この拡張機能を使わなくても、ブラウザで開く方法はいくつかあるのですが、「Open in browser」ならショートカットで一撃でできます。
これで一回開いて、あとはコード変えて確認したいときは「Ctrl + R」でウインドウ更新！
で、だいぶ開発者ツールでの表示が安定します。
Prettier：インデントなどコード自動整形
インデントだけでなく、セーブ時に整形する設定にすると、
改行や、行末尾の「;」も【Prettier】で「Ctrl + S」でセーブするだけで補完してくれます。
スニペット登録を簡単に
拡張機能いろいろあるみたいなので、お好みのもの調べてみてください。
キーボードショートカット
ショートカットいろいろまとめたサイト
マルチカーソル
特定の行にジャンプ
ショートカットで素早く表示文字サイズ変更
一時的に、一画面に表示するコード量を増やして見るときなんかに便利。
widthとかの「数値」を↑↓キーで1ずつ増減して微調整
Pixel perfectにサイトを作ってると、数pixel単位で、数値を微調整、、、ってのを頻繁にやります。
それがだいぶストレスフリーになります。
VS Codeのショートカットキーはカスタマイズできます
VScodeのショートカットは、
設定の「キーボードショートカット」から、好きなキーに変更できます。
ほかのショートカットと、組み合わせるキーがかぶらないようにだけ注意。
「行選択と行削除」を左手だけで押せるようにすると幸せに
行削除とか頻繁にやるので、地味に結構な時短になります。
設定
左のエクスプローラーに表示されるファイル・フォルダの並び順
好みでいろいろ選べるので、調べてみてください。
配色テーマを変えて、コードを見やすく
カッコのペアの色分け
↓の参考ブログの記事に書いてある設定だけでなく、拡張機能でもカッコを色分けできるのいろいろあります。
お好みの方法で色分けしてください。
色分けはほぼ必須？？インデントだけじゃあペアわからん、、、
[Visual Studio Code]ブラケット（括弧）のペアを色分けする
その他
アカウントの同期
アカウントの同期はしておこう
拡張機能や設定なんかも同期できるので、複数のPCを使う場合や、PCがぶっ壊れて初期化したとき、新しいPCを買ったときなど、ものすごく助かります。
Emett記法
コードの記述を省略できるEmmet記法。
知らないと、時間と手間の面で、本気で損をします。
文字通り、必須スキルで、皆さん知っていると思いますが、結構まだ知らない書き方もあったりします。
特殊文字を辞書登録
<p>タグの中などの改行 <br /> はEmettで書けない、、、ので
Emettで展開できず、スニペットにも登録できないなら、Windowsの辞書機能に登録しちゃえ！ってはなし。
文字サイズ変更
常に文字を大きくしてると、ひと画面に表示される情報減ってしまうので、
状況に応じて、ショートカットで素早く文字サイズ変更してみやすく。
単語単位で検索
VS Codeも「Ctrl + F」で検索できるのは、皆さん使ってると思うのですが、
僕が長いこと気づかなかった便利機能、、、
「.about」で単語単位で検索すると、
「.about__inner」とか「.about__header」とか、余分なものが付いた単語は除外して、
「.about」だけ！を検索できます。
生成AIでコードアシスト
この投稿をした、2024/07月時点では、「Gemini code assist」↓ は、まだβ版。
結局今のところ、コードアシストには「Github Copilot」↓をメインで使ってます。
ちなみにでいうと、ブログ記事書く補助などの、普段使いのAIは「Gemini」に課金して使ってます。
ブログとか書いてると、Google製品を頻繁に使うので、、、
注！仕事の情報をAIに吸い上げられないように！
仕事で使うコードアシストと、プライベートのAIは分けた方がいい？？
Windows PC 関連【VS Code 以外の小ネタ】
【変換・無変換】キーで日本語・アルファベット切替
ノートPCで、備え付けのキーボードだとできないかもしれませんが、WindowsモードとMacモードなんかを切り替えられる外付けのキーボードでできました。
タスク切替を見やすく
標準カラーだと枠がみにくい、、、
マウスボタンカスタマイズ
マウスのサイドボタンに【コピペ】割り当てるのは危険？？
マウスのボタンカスタマイズに、コピペを割り当てると、ムダにミスが増える、、、
というお話、、、
タスク切替は【Windows + Tab】の方が便利かも？？
しばらくマウスサイドボタンに、
「Alt + Tab」と「Ctrl + Tab」を割り当ててましたが、
Figma、VS Code、学習の動画、、、とウインドウを切り替えるには、どうやら「Alt + Tab」より「Windowsキー + Tab」の方が使いやすそうです。
とくに、デュアルディスプレイだと、
「Alt + Tab」は、メインのモニターの方にすべてのモニターのタスクが並んでしまうけど、「Windowsキー + Tab」なら、モニターごとに別々にタスクが並ぶので選びやすいです。
必要に応じて、Chromeや VS Codeのウインドウは、「Figmaと講座動画は別タブにする、、、」など、
あえて、別々にして複数開いた方が別タスク扱いになるので選択しやすくなります。
そのかわり、マウスでタスクを選択しないといけないです。
それが嫌な人は、「Alt」と「Tab」のキーをそれぞれ別のボタンに割り当てて、「Alt」押しながら「Tab」キー何回かカチカチ、、、
で対応してください。
参考にしたブログ↓↓
［Alt］＋［Tab］キーよりも爆速なタスク切り替えショートカットキーを使いこなせ！
ホイールクリックを動画の【再生・一時停止】にすると幸せに
デイトラなんかの動画見ながらコード書いてるとき、コードエディターからカーソル全く動かさずに、こまめに動画止めながらコード書けます。
これも、デュアルディスプレイだと恩恵絶大です。
そもそも、カスタマイズボタンの多いマウスもある
ちょっと投資すると、めちゃくちゃ便利なマウスがありました。
9ボタンマウスのつもりで買ったら、7個しかボタンなかったので表記ミス？？と思ったら、それ以上に便利なマウスでした。
自分はこのマウスに、
通常時、
- ←（左キー：学習動画の5秒戻し目的）
- 動画の再生・一時停止
- アプリのサイクル=「Windowsキー + Tab」
- Hyper Shift キー（このボタンを押しながら他のボタンを押すと別の機能になる）
Hyper Shift を押した状態のボタンに、
（Hyper Shift を押しながらなので、右クリックや左クリック・ホイールスクロール上下も機能割り当てて普通に使える）
- VS Code の行選択
- VS Code の行削除
- コピー＝「Ctrl + C」
- ペースト＝「Ctrl +V」
- 検索＝「Ctrl + F」（コードの検索でほんと頻繁に使う）
- VS Code：Emmet のバランス（外側）
- Page Up/Down（ホイールスクロール上下に割り当て）
をとりあえず割り当ててみました。
5ボタンマウスなら泣く泣く削っていた、中ボタンクリックもそのまま残せてますし、間違えて押すとコードが壊れるリスクのあったコピペも Hyper Shift で使えば、押し間違えないので問題なく使えます。
Figmaのデザインカンプからまとめて取り込んだ、CSSをトリミングするのも、マウスだけで完結できます。
保存＝「Ctrl + S」も頻度高いので登録する？？取り消し＝「Ctrl + Z」も便利？？
などなど、まだ、いろいろ試して迷ってる最中ですが、工夫次第でもっと便利になりそうです。
正直、もっとボタンの数の多いマウスもあるのですが、ほんとうにゲーム目的で、遅延予防のため有線接続のものばかりでした。
あとは、口コミによるとドライバのサポートすら怪しいような中華製品とか、、、
その点こいつは、Bluetoothで、ドライバもちゃんとしてるし、ほんとに便利、、、↓
ポチップマルチモニター画面間でウインドウまるっと移動
画面大きいモニターに、ウインドウごと素早く移動させてみやすく。
モニターがでかいは正義！？【デュアルモニター】はほんとに世界が変わる
自分の場合は、2024年７月現在、13.3インチと、23インチでデュアルモニターで使ってます。
13.3インチの方が、VS CodeとFigma並べてみるには小さい？？ので、27インチモニターを購入しようか迷ってます。
モニター3つ並べるのもいいですし、23インチと27インチのデュアルモニターでも、だいぶ視認性増しそう、、、
ノートPCで15インチくらいの備え付けのモニターで使ってる人も、ほとんどのノートPCで、ケーブル使えば、外付けでデュアルモニターにできます。
モニターの大きさも含めて、デュアルモニターは、誇張抜きで、ほんとうに世界が変わります。。。
僕の場合、多分、、、結局、近いうち27インチ買うと思います、、、
ポチップChrome【開発者ツール】小ネタ
まずは基本！Web制作での基本的使い方の詳しいサイト
↓で紹介してるサイトは、ほんと早い段階で見といた方がいいです。
ショートカットキー
文字サイズ変更
VS Code の方にも書きましたが、開発者ツールでも同じショートカットが使えるので、、、
設定リセット
自分の場合、開発者ツールを日本語化したのがきっかけ？？で、動作が不安定になりました。
もしかしたら、他の設定もプログラミング学習を始めた初期のころにいじってしまってたかも、、、
なので、いったん開発者ツールをデフォルトにリセット！！
簡単にできます。
表示が崩れたときの対処法
自分の環境だと、
「Live Server」と「Perfect Pixel」と「開発者ツール」、もちろん「VS Code」なども同時進行で動かしてると、負荷がでかいせいか、頻繁に表示崩れを起こします。
そんなときの対処法↓↓
これに気づくまで、キャッシュ削除しても、拡張機能とか立ち上げなおししても、「ムキィ！！直らん！！」ってなって、めちゃくちゃ時間使いました。
「Home・End・Page Up・Page Down」普通に使えるのね、、、
開発者ツール右のコードの部分でも、左のページをレスポンシブにして表示してるところでも、ふっつ～に使えます。
結構長いこと気づかなかった、、、
マウスホイールだけだと、大きく移動するとき不便なのよね、、、
レスポンシブに、特定のwidthのデバイス登録
コードを書いて、表示確認するとき、「デザインカンプ指定の特定のwidth」の表示に頻繁に切り替えるのに、いちいちwidthの数値入力せずにサクッと変更できます。
レスポンシブ表示の時に、全体を拡大縮小
「〇％」のタブ開いた下の方にある、Auto-adjust zoom 選択して％変更で、全体を拡大縮小。
これに気づく前は、レスポンシブのwidth広くすると全体が縮小表示されて見にくかった、、、
Web制作は、おっさんの視力では厳しいのか！？と、勘違いするところでした。
Figma関連
この記事の中でも紹介した「VS Codeの拡張機能まとめた記事」も書いてる、コーディングを効率化？快適化？することに情熱を燃やしている？方のサイト↓↓
Figmaの拡張機能もまとめてくれてます。
主にWebデザイン関連やる人にとって便利なもの？
他にもこの方のサイト、いろいろコーディング快適にするネタ詰まってるみたいなんで、のぞいてみるといいかも？です。
デスク回り環境関連
モニターの高さ
モニターの高さは「モニターの上辺が座った時の目線と同じ高さくらい」が目安らしいです。
小型のサブモニターの位置が低い状態で、前かがみで連日長時間作業してたら、がっつり腰痛になりました。
皆さんもご注意を～
腰サポート補助イス
腰痛改善に、これ↓も買ったら、予想以上にいい感じです。
腰の後ろのS字部分をバネみたいに押してくれるので、座ってて結構気持ちいい。
モニターの高さ調節とこれで、使い始めて１週間くらいしかたってませんが、だいぶ腰痛改善してきました。
キーボードはフルサイズじゃないと多分しんどい
過去に書いた記事↓で、お恥ずかしいですが、
プログラミング関連やるなら、キーボードは安物でいいので、フルサイズじゃないといろいろ使いにくいところでてきます。
テンキーや、home、endとかもほんと頻繁に使います。
ボタンのカスタマイズがごりごりできるマウス
VS Codeの行削除とか、検索、学習動画の再生・一時停止、「Windowsキー + tab」、、、などなど、
ショートカットをごりごり登録して使ってます。
CSSなどの知識関連記事はこちら
普段、Web制作学習してて、課金しているGoogleの生成AI、Geminiにものに解説をつくってもらったのをまとめた記事↓
この記事がコーディングを快適にする小ネタ、なら、↓の記事はCSSの知識関連です。
オンラインプログラミングスクール【デイトラ】
そもそも、何を調べればいいかわからないとどうしようもない
この記事にまとめた知識は、ほぼすべて「デイトラ」で教えてもらったり、デイトラで学習していて気になって調べたものです。
独学でやってたら、何を調べていいかがわからずに、ほんと、確実に、こんな知識は得られてないと思います。
一般的なプログラミングスクールは何十万円もしますが、デイトラは10万円前後。
僕のこのブログや【X】のように、受講生の口コミをメインに拡散していて、広告料をあまり使っていないからできる価格だそうです。
デイトラ紹介記事も、過去に書いてるので、気になった人は見てみてください↓
