2024-03-04

Chrome をより便利にする、おすすめ拡張機能5選

これ使いこなせてない人、もっと時間節約できます。
Chromeをインストールしたら絶対にインストールしてほしい拡張機能は↓↓↓
リンクになってるからポチポチ追加していこう

ページ全体のスクリーンショットを撮ってくれる。MacのCommand + shift + 3でもスクショは撮れるけど、こちらは画面外にあるページ全体のスクショをとってくれるから便利。

表示しているサイトがどんな技術スタックで構成されるか見ることができる。
普通にかっこいいなって思ったサイトの技術スタックを見たり、大企業のサービスの技術スタックを見るのは面白いからこれはぜひ入れた方が良い。

カラーピッカーで、ページに表示されている色をコピーすることができる。デザインをパクりたいときに重宝する。

タブを開きすぎた時に自動でタブの整理をしてくれるもの。
同じサイトごとにタブをまとめてくれるから、また見たい時に探しやすくて効率上がる。

マウス操作なしに、画面を操作できる拡張機能。
これを使いこなせば、キーボードから手を離さずに永遠に作業ができる職人みたいになれる。


VScodeでコーディング効率アップ！必須拡張機能

chromeの拡張機能5選じゃ物足りない？
なら今度はvscodeのコーディングを加速させる拡張機能10選を紹介しよう。
コーディングするなら流石にこれらを入れてないとマジで大損↓↓↓
この拡張機能はvscodeから検索して追加してね。

  • Console Ninja

前回console.logの結果に出力されたものが、エディタ上に表示される拡張機能。ブラウザを見に行かなくともコード上でログの結果を見れるから、作業効率UP。

  • HTMLHint

HTMLをコーディングする上で、文法の指摘をしてくれる。早めに間違いに気づけるからGood。

  • Code Spell Checker

名前の通り、スペルミスを指摘してくれる。くだらないスペルミスで1時間以上浪費した...なんてこと最初のうちはあるから絶対これ入れよう。

  • Color Highlight

コードが見やすくなるように、タグごとに色をつけてくれる。視覚的にわかりやすく慣れば行を間違えるミスもなくなるためexcellent。

  • Color Info

Cssでcolorの情報を視覚的に見れるようにする。

  • CSS Navigation

classから定義元にジャンプできるようにする拡張機能。これがあることでclassを探す手間が省ける。

  • HTML CSS Support

HTMLとCSSの予測変換を出してくれる。マストで入れよう。

  • HTML Preview

VScode上でHTMLのPreviewを表示できるようにできる。コマンド一個で起動できるから確認が楽になる。

  • GitHub Theme

VScodeの色を変えられる。見た目をかっこよくしてテンション上げたい方は入れよう。

  • Material Icon Theme

ファイルやフォルダをアイコンにしてくれる。これあるとフォルダとファイルを間違えたりしないから非常に便利。

一旦こんな感じなんだけど、これらはあくまで基本となるものだから
自分の勉強を進める上で、定期的に拡張機能を探すのがおすすめかな！

モニターはできるだけ初めのうちに買おう！

モニターあると、片方でコード書いて、もう片方で実行結果見たりといった感じで作業効率が全然違うから、できれば早めに買いたい。
24インチらへんのものだったら、13000円周辺で買えるから、一日派遣頑張れば買えるよ！
できればロングワイドのモニターあると最高だけど、まずはこういうので十分

モニターのリンク

次は、どの言語から手をつける？

これで、プログラミングの開発環境の基礎はだいたい揃ったね。
次はどの言語を学ぶべきかを選んで、プログラミングの勉強のロードマップを確認しよう！