VScodeとは
Visual Studio CodeとはMicrosoft社が提供しており、ソースコードの編集を行うソフトウェアのこと（通称VScodeと呼ばれます。）
VScodeはオープソースソフトウェアであり、誰でも無料で使用することができます。
特徴として日本語にも対応している点や、OSを問わず使用できる点、多彩な拡張機能などが挙げられます。 エディターにはさまざまな種類がありますが、その中でも初心者から現役エンジニア達まで支持の高いコードエディターがVScodeです。
日本語に対応していることもあり、初心者の方にも扱いやすいエディターなため、本記事を参考に導入してみてください。
おすすめポイント
導入費用が無料
・Adobe（Dreamweaver）など有料エディタは機能が高い分、年間3～40,000円の費用がかかる中、VScodeは、豊富な機能に利用制限が無く、PC(Win/Mac)に固執しないのに、無料で使用する事が可能。
日本語対応
・他のエディタでは、日本語対応不可だったり、切り替えのコマンド入力が必要だったりする物がある中、VScodeは拡張機能1つで、日本語対応が可能であり、日本語の解説サイトも豊富で初心者でも使いやすい。
動作が軽い
・重要なコア機能に動作を絞る為、起動が早く、動作が軽い事が大きな特徴。
メモリ使用量が比較的高く、拡張機能に依存する事が多いですが、デフォルトでも機能が豊富で低スペックPCでもサクサク動作可能。
導入方法(Windows版/Mac版)
Windows版
- 公式サイトへアクセス
- ダウンロード
3. 使用許諾契約書の同意
4. 指定先へインストール
5. プログラムのショートカットを作成するフォルダを指定
6. お好みでインストール時に実行する追加タスクの選択
7. 起動
Mac版
- 公式サイトへアクセス
- ダウンロード
3. zipファイルの展開
4. 起動
スタイリッシュな黒い画面が表示されれば、導入は完了となります。
おすすめの拡張機能
「拡張機能」とは
VScodeの拡張機能（エクステンション）とは、エディターの機能を追加・強化するツール
例：プログラムの自動補完、コードの整形、エラーのチェック、テーマの変更などが可能
導入は簡単！
指定の拡張機能をエディター内の検索バーで検索し、インストール。
（一部の拡張機能は、PCの再起動によって有効となる為、必要に応じてメニューから「再起動して更新」を選択。）
作業効率を上げる拡張機能
・Japanese Language Pack for Visual Studio Code
・Code Spell Checker
・Live Server
Japanese Language Pack for Visual Studio Code
機能：メニューや設定画面を日本語化する拡張機能です。
英語表示が苦手な方でも、画面が日本語になることで操作方法を理解しやすくなります。
Code Spell Checker
機能：コード内の誤字（スペルミス）がある場合、自動で波線が表示されます。
波線の上にカーソルを合わせると黄色いアイコンが表示（修正候補）され、クリックして修正候補を確認できます。
Live Server
機能：リアルタイムでブラウザに反映してくれる拡張機能。
ファイル保存のたびに自動でリロードされるため、コーディングと確認を効率的に繰り返せます。
使ってみた
実際にVScodeを使ってみるにあたって、簡単な各部名称を紹介。
① アクティビティバー
左上から【エクスプローラー/検索/ソース管理/実行とデバッグ/アカウント/設定】の順となる
② プライマリサイドバー
アクティビティバーで選択をした機能が表示（作業時はエクスプローラーを表示して使う）
③ エディター
エクスプローラーで選択をしたファイルがここに表示され、実際に編集が行われる
④ パネル
ファイル編集中に発生している問題をリアルタイムで確認
基本操作
1. フォルダーを開く
アクティビティバーよりエクスプローラーを選択し、【フォルダを開く】→任意のフォルダを開く
2. ファイルを作成する
新しいファイルを選択し、ファイル名と拡張子(.html.cssなど)を入力
3. 編集
コードをデザインなどに合わせて編集作業
4. ファイルの保存
変更が完了し、ファイルを保存する場合は「ファイル」から「ファイルの保存」を選択
※ショートカットキーの「Ctrl+S」も可
Visual Studio Code まとめ
VScodeは、経験豊かなエンジニアの方にも、今からプログラミングに挑戦する初心者のあなたにもおすすめできる、高機能な素晴らしいコードエディタです。
実際にVScodeをインストールし、触れてみるのがVScodeを使いこなす一番の近道です。
慣れてきたら拡張機能であなた好みにカスタマイズし、作業効率をどんどんアップさせましょう！
最後までお読みいただきありがとうございました。
コメント