【無料】vscode の使い方【ざっくり簡単に説明】＆ なぜ超初心者にはVScodeがいいか？【５秒で納得いく説明】
無料のエディタっていろいろあるけどVScodeいいよって話。
ざっくりいうと、なぜなら大手のマイクロソフトが作ったやつだから。日本語表記のソフトだし、ググれは初心者向けの解説もしてるサイトもたくさんあるから。
【テキストエディタ】なぜ超初心者にはVScodeがいいか？【５秒で納得いく説明】
HTML、CSS、JavaScriptを書くには、PCにもともと入っているエディタ「メモ帳」のようなテキストエディタ（エディタとかいったりするみたい）というやつがいる。まぁそれを書く用のソフトみたいなやつ。
PCにもともと入っているソフト「メモ帳」に少し毛の生えたような「teraPad」（無料）や
使ったことないですが何故だかネット上でよく耳にする、「サクラエディタ」（無料）等ありますが、
10サイト~20サイト位ググりましたがだいたいどこも似たような結果でした結論として、
＜初心者向けで使いやすいエディタソフト・オススメTOP３＞
- VScode（Visual Studio Code）（無料）
- Atom（無料）
- Sublime Text（継続して使うには有料のようです。）
の順でオススメです。
3位にあげた、「Sublime Text」ってのは評判いいようなのですが、もともと英語のソフトで日本語化できるけど、日本語化ができてないところもあるようなので我々初心者には使いづらいと思います。（イメージとしてはソフトの一部の説明が英語表記になっているって感じです。）プログラムに慣れてる人には使いやすい様子。はじめ無料で使えて、継続して使いには有料。とかのビジネスモデルだったかと思います。たぶん、他の人もこれは選ばないと思う。
テキストエディタのオススメでやたら出てくるのでオススメ度3位にあげてみたけど、有料の時点で使わなくていいかなｗｗ
2位のAtomはGuthub（Guthub社）ってなんかプログラム系業界で有名なところが作ったエディタです。Guthub社は2018年にマクロソフトが買収を発表しました。
AtomとVScodeどっちもいい（どっちでもいい）と思いましたがVScodeが1番オススメの決定打の理由は以下になります。
1位のVScodeは、マイクソフトの作ったエディタ。Guthubの買収元が作ってるってことは現在的にも将来的にも、VScodeを使い慣れてて損はなさそうです。あとググったらけっこう使い方がじゃんじゃん丁寧に書かれているので分かりやすいです。（日本語化もしっかりしています。）
つうことで、私は、VScode使ってます。（これを選ぶのにすら、２～３日ググって。（汗）けっこう時間かけました。。）
前置きは長くなりましたが、ざっくりと説明していく。
↓↓↓
【無料】vscode の使い方【ざっくり簡単に説明】
VScode・・・・・・・Visual Studio Code（ヴィジュアル スタジオ コード）といってマイクロソフト作ったプログラムを打つ用のエディタです。無料です！
すべてのプログラムを打てるってわけではないと思う。HTMLやCSS、JavaScriptなら問題なく利用できます。
（他の言語での利用は知りません。例えば、PHPは作動させるために何かをダウンロードしたりと環境を整えないといけない。ってのがあります。他のプログラム言語もそれぞれあるんだと思う。勉強したいプログラム言語があるなら、「自分の勉強したいプログラム言語＿環境設定」などのキーワードでググったりするといいかも。）
◆画面背景の色と文字の色は変えられる。
まず初めの画面が黒い背景に白い文字の画面なので、
この画面の色だと目が疲れる。とかあったら、
「ファイル＞基本設定＞配色テーマ」
で白色の背景に黒色の文字とかもあります。
私は、白色背景に黒色の文字の「ファイル＞基本設定＞配色テーマ＞Light（Visual Studio）」という一番上のやつにしてます。
◆VScodeの文字の大きさ変更
VScodeの文字の大きさが小さくて見づらいって場合、エディタ（VScode）のフォントの文字の大きさを変えれる。
「ファイル＞基本設定＞設定＞Editor: Font Size」
今見たら私は２１フォントになってました。自分でググって大きさ変更したんだったか？「,」半角のコンマや「；」半角セミコロンとかもプログラムにはあるので、少し大きめの文字のほうが見やすいと思います。
初歩中の初歩的プログラムでも誤字脱字などでエラーが多いので、どこが間違ってるんだろうとジーっと見ることも多いので見やすい大きさの字がいいと思う。
Emmet機能
Emmet機能というショートカットキーみたいなな機能があります。
例えば、
↓
Emmet機能とは例えば、htmlファイルとして保存した段階で、「ｈｔｍｌ：５」or「!」と入力してTabキーで
↓
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>
<body>
</body>
</html>
と入力したいものが自分で入力しなくても、バーッと出てくる機能をEmmet機能というみたい。
※先にhtmlファイルとして新規作成して保存しておかないとEmmet機能が起動しない。
Pタグも、「ｐ」とうってエンター押さずにtabキーで<p></p>って入力されます。
めっちゃ便利です。
・自分でも文字を登録できる。
VScode＞ファイル＞基本設定＞ユーザースニペット
のところをいじる。
WindowsのVSCodeのコード整形のショートカットキー。
Shift + alt + f
テキストエディタの画面の横にWeb上でどう表示されるのか画面のプレビューを見るショートカットキー。
「ctrlキー＋Kを押した後、（ctrlキーから指を離して）V」
まとめ＜ググれば出てくる。＞
はじめは、Emmet機能ってのがあるとか、プレビュー画面が見れるってこと、
画面の文字が小さい場合は、表示のフォントも拡大して利用できるってこと、
画面の背景色や文字の色を背景色・黒色、文字・白色から背景色・黒色、文字・紺色。
みたいに設定を変えれば変更できるってことを知っていればいいと思います。
やりかたはググればでてきます。
0 件のコメント:
コメントを投稿