Webデザイン

Webサイト制作におすすめなVSCodeとは便利な機能について解説

この授業は次のような方におすすめです。

・Webサイトを制作するためにコーディングをしたい初心者の方

・Webサイトを効率よくコーディングするための便利なショートカットキーを知りたい方

・VSCodeの使い方について解説された本を知りたい方

WebデザインにおすすめのVSCodeとは

デザイニャー
デザイニャー
VSCodeというのは、Microsoft社が提供している「Visual Studio Code」というテキストエディタのことだよニャン。

先生
先生
そうだね。つい何年か前までは、人によって違うテキストエディタを使っていることが多かったんだけれど、最近は、VSCodeでコーディングやプログラミングをする人たちがかなり多くなってきているんだ。

デザイニャー
デザイニャー
VSCodeは、マウス操作で、設定や拡張機能の追加ができるから、初めて使う人でも使いやすいおすすめのテキストエディタだニャン。

VSCodeをインストールしよう

先生
先生
まずは公式サイトからVSCodeをダウンロードしてみよう。

VSCodeをダウンロード

先生
先生
OSに合ったインストーラーをダウンロードしてインストールしよう。

デザイニャー
デザイニャー
インストールが完了したら早速起動してみようニャン。

VSCodeを日本語化する方法

デザイニャー
デザイニャー
VSCodeは、インストールしてから起動すると、英語の画面が表示されるから、苦手意識がある人も多いんだニャン。

先生
先生
でも、VSCodehaたくさんの言語に対応していて、もちろん日本語化することもできるよ。

デザイニャー
デザイニャー
左側のサイドバーにはアイコンが縦に並んでいるニャン。

先生
先生
下の図の赤で囲んでいる一番下のブロックが4つ積まれているみたいな形をしているアイコンをおすと言語検索ができるよ。

先生
先生
検索窓に「Japan」と入力したら、「Japanese Language Pack for Visual Studio Code」という結果を選択してみてね。

先生
先生
そして「Install」というボタンをクリックしたら、インストールが始まるよ。

先生
先生
日本語バージョンがインストールされたら、画面の右下に英語で確認画面が表示されるから、「Yes」をクリックしたら、VSCodeが再起動して、日本語表示になるよ。

もしそれでも英語のままだったら、もう一度VSCodeを閉じてからもう一度開き直しましょう。

VSCodeに拡張機能を追加する方法

デザイニャー
デザイニャー
VSCodeを使ってコーディングをしていく人にとっては、拡張機能の追加は必ず必要だよニャン。

先生
先生
拡張機能を追加するには、日本語化設定の時と同じように、左サイドバーのブロックのアイコンをクリックしてから検索していくんだ。

VSCodeの拡張機能

先生
先生
VSCodeの拡張機能については、次の記事に詳しく書かれているよ。

VSCodeの便利な機能

デザイニャー
デザイニャー
VSCodeの拡張機能の追加が終わったら、早速HTMLやCSSを書いていきたいニャン。

先生
先生
その前にVSCodeの便利な機能について次の4つのものを軽く紹介していくよ。

・インテリセンス

・EMMETO

・マルチカーソル

・ユーザースペニット

インテリセンス

先生
先生
VSCodeの保管機能はとても優れていて、途中まで入力したら、その先の候補をVSCodeを表示してくれるから、それを選択して、タブキーで展開しよう。

EMMETO

デザイニャー
デザイニャー
Emmetというのは、ショートカットキーでHTMLやCSSを保管入力してくれるツールだよニャン。

先生
先生
例えば、HTMLの雛形を出したい場合は、shiftキーを押しながら「!」キーを押してタブキーを押して表示させるんだ。

デザイニャー
デザイニャー
へー!これは便利だニャン。

先生
先生
他にもプロパティの省略はあるから、それらを覚えておくことで、コーディングのスピードがとても速くなるから、覚えておきたいね。

マルチカーソル

デザイニャー
デザイニャー
マルチカーソルとは、カーソルの場所や単語を複数同時に選択して編集ができる機能なんだよニャン。

先生
先生
全部の単語を書き換える時には、置き換えが一番速いんだけれど、一部分だけ編集する場合は、このマルチカーソルを使うと便利だよ。

ユーザースペニット

デザイニャー
デザイニャー
ユーザースニペットというのは、拡張子ごとにコードを登録しておくことができる機能だよニャン。

先生
先生
何度かコーディングしていると、何回も繰り返し書いているコードが出てくるんだ。

デザイニャー
デザイニャー
初期状態でもよく使われるコードは元から登録されているよニャン。

先生
先生
でもこのユーザースペニットという機能では、それ以外のオリジナルの定文を登録しておくことができるんだ。

VSCodeの便利なショートカットキー

デザイニャー
デザイニャー
VSCodeの操作の速度を上げて効率的に作業したいなら、ショートカットキーを使うのがおすすめなんだよニャン。

VSCodeは、WindowsでもMacでも使うことができますが、プラットフォームの種類によってショートカットキーが一部違うので注意しましょう。

先生
先生
VSCodeのおすすめのショートカットキーは次の通りだよ。
Windows Mac
コマンドパレット表示 「Ctrl」+「Shift」+「P」、F1 「⌘」+「Shift」+「P」、F1
コードエディタ分割 「Ctrl」+「\」 「⌘」+「\」
統合ターミナル表示切替 「Ctrl」+「`」 「⌘」+「`」
ファイルを探す 「Ctrl」+「P」 「⌘」+「P」
指定行へ移動 「Ctrl」+「G」 「⌘」+「G」
プロジェクト全体を検索 「Ctrl」+「Shift」+「F」 「⌘」+「Shift」+「F」
Zenモード切替 「Ctrl」+「K」「Z」 「⌘」+「K」「Z」
次の検索対象を選択に追加 「Ctrl」+「D」 「⌘」+「D」
コメント化 「Ctrl」+「/」 「⌘」+「/」
ファイルの先頭/末尾へ移動 「Ctrl」+「Home」、「Ctrl」+「End」 「⌘」+「↑」、「⌘」+「↓」
コードの畳込/展開 「Ctrl」+「Shift」+「[」、「Ctrl」+「Shift」+「]」 「⌘」+「Shift」+「[」、「⌘」+「⌥」+「]」
現在の行を削除 「Ctrl」+「Shift」+「K」 「⌘」+「Shift」+「K」
検索と置換 「Ctrl」+「F」、「Ctrl」+「H」 「⌘」+「F」、「⌘」+「⌥」+「F」
ショートカットキー一覧表示 「Ctrl」+「K」「Ctrl」+「S」 「⌘」+「K」「⌘」+「S」
マルチカーソル(カーソル複数追加) Alt 押しながら下矢印

 

出典:ホームページ作成をする人は必見!VScodeのインストール方法と必須拡張機能9選!beautifyは神拡張機能なので使い方を覚えよう

 

自動で保存するための設定

デザイニャー
デザイニャー
VSCodeでコーディングしていて、うっかり保存をし忘れることもありがちだニャン。

先生
先生
そんな場合のために、VSCodeの設定でコードを自動で保存しておくようにすることができるんだ。

デザイニャー
デザイニャー
これは嬉しい機能だニャン。

先生
先生
まず、左下の歯車のボタンをクリックして設定を選択するんだ。

先生
先生
そして、 Files:AutoSaveをafterDelayに変えて、Files:AutoSaveDelayは、1000に設定すれば自動保存をすることが可能になるんだ。

Webデザインに特化したおすすめのVSCodeの本

先生
先生
Webデザインに特化したVSCodeの使い方をマスターするのにおすすめな本は次の1冊だよ。

Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方

まとめ

先生
先生
この授業では次のようなことをお話ししてきたよ。

・WebデザインにおすすめのVSCodeとは

・VSCodeをインストールしよう

・VSCodeを日本語化する方法

・VSCodeに拡張機能を追加する方法

・VSCodeの拡張機能

VSCodeの便利な機能

・インテリセンス

・EMMETO

・マルチカーソル

・ユーザースペニット

VSCodeの便利なショートカットキー

・自動で保存するための設定

・Webデザインに特化したおすすめのVSCodeの本

Visual Studio Code完全入門 Webクリエイター&エンジニアの作業がはかどる新世代エディターの操り方

私たちは頑張るあなたを応援しています。