千葉県船橋市のホームページ制作・マーケティングの株式会社ノベルティ

COLUMN

コラム

2022.08.30

【初心者向け】今すぐ・誰でもコーディングが速くなる方法〜VSCodeの設定編〜

高宮竜太

コーディング

こんにちは!ノベルティのコーダー高宮です。今回はコーディングを効率的に進めるために行っていることを2記事に分けてご紹介します。

本記事では、”今すぐ・誰でも”コーディングが速くなる「VSCodeの設定編」です!

「デザイン通りにコーディングできるようになったけど、スピードを上げたい」「HTMLマークアップのミスを改修するのに時間がかかる」などのお悩みを抱えるWEB制作初心者の方におすすめですので、ぜひ参考にしてください。

目次

VSCodeの機能を拡張する

ノベルティの構築チームは基本的にVSCodeを使用してます。(秀丸エディタしか勝たん by PM)

毎日使うエディターなので、自分が使いやすいようにカスタマイズすることがコーディングのスピードアップにつながります。

僕がVSCodeに拡張している機能は以下の通りです。

Auto Rename Tag

Auto Rename Tag

コーディングを進めていくと「このdivタグをpタグに変更したい!」みたいにタグの変更が生じるなんて日常茶飯事。ですが、階層が深くなればなるほど、閉じタグの行方を追うのが困難に、、、

そんなときに便利なのが「Auto Rename Tag」このプラグインは開始タグを変更すると自動で閉じタグも自動で変更してくれます。

Auto Rename Tag

閉じタグを探す時間も省けるし、ミスも防ぐことができます!

Highlight Matching Tag

Highlight Matching Tag

コーディングをしていると終了タグがどこにあるかわからなくなることはありませんか?コードが長くなればなるほど終了タグを見つけるのも一苦労。探している時間で日が暮れます。

「Highlight Matching Tag」はHTMLの開始タグと対応する終了タグをわかりやすく表示してくれるので親要素・子要素の判断が瞬時にできます。

Highlight Matching Tag

IntelliSense for CSS class names in HTML

IntelliSense for CSS class names in HTML

HTMLのクラスを入力する際に、CSSファイルにあるクラス定義から自動補完してくれる機能です。

IntelliSense for CSS class names in HTML

僕はデザインが上がったら、トップページと下層ページを確認してパーツ化できるところは先にCSSを定義し、HTMLをマークアップしながらクラスを当てていくことが多いので重宝しています。

htmltagwrap

htmltagwrap

htmltagwrapは「◯行目から◯行目をまとめてdivタグで囲いたい」「1行の中のこのテキストをpタグで囲みたい」など、新たなタグで囲みたいときに重宝します。

以前は[新たなタグを生成→囲みたい要素を切り取り→新たなタグの中にペースト]なんて面倒臭いことをやっていたのですが、このプラグインを使用すると…

htmltagwrap

囲いたい範囲を選択して[Alt + W]を実行するとpタグで囲ってくれます。

初期値がpタグなので囲った後は任意のタグを入力すれば完了です。

Code Spell Checker

Code Spell Checker

Code Spell Checkerはコード内の一般的なスペルミスを検出できる拡張機能です。

定数名や変数名を定義する際、おかしな英単語を入力すると「その単語ホンマに合ってる?」と下線を引いてくれます。該当箇所を直すと下線もなくなります。

Code Spell Checker

WordPress Snippets

WordPress Snippets

名前から推測できますがWordPressのスニペットです。

WordPress関数の最初の数文字を入力するとでコード補完・予測、関数の説明を表示してくれるのでPHPコーディングがとても楽になります。

WordPress Snippets

※関数は記憶できなくても意味の理解は必須

よく使うコードをユーザースニペットに設定する

ユーザースニペットとは

ユーザースニペットとは、コードを予めスニペットに登録することで短いコードで簡単に呼び出せる機能です。

よく使うコードや、頻出するけど長いコードなどを毎回一からコーディングをするのは効率が悪いので積極的にスニペット登録をして瞬時に展開できるようにしましょう!

ユーザースニペットの登録の仕方

VSCodeを開いてファイル→ユーザー設定→ユーザースニペットの順でクリック

ユーザースニペットの登録の仕方

スニペットを設定したい言語の選択

登録したい言語を入力すると候補がでてくるので、設定したい言語を選択します。

スニペットを設定したい言語の選択

〇〇〇〇.jsonにスニペットを登録する。

今回はhtmlとjavascriptのスニペットを登録します。設定する項目は4つ。

jsonにスニペットを登録する。
  1. スニペット名:スニペットの名前を入力します。※特に入力しないので何でもOKです
  2. prefix:入力する短縮語を設定します。
  3. body:prefixを入力したら展開されるコードを記載します。
  4. description:スニペットの説明を記載します。※省略可能です。

スニペットの例(HTML)

スニペットの例
補足
  • 複数行登録する場合はカンマで区切る
  • $1は自分で入力できる箇所を指定します。
  • $2は$1を入力後に移動する箇所です。Tabを押すと移動できます。
  • \tはタブです。

出力結果

出力結果

prefixで登録したコードが出力されました!

javascriptでもやってみましょう!要素の取得をショートコードでしたいと思います!

スニペットの例(JavaScript)

スニペットの例(JavaScript)

出力結果

出力結果

要素の取得は何度も書くコードなので、登録しておくと便利です!

まとめ

今回は、”今すぐ・誰でも”コーディングが速くなる方法〜VSCodeの設定編〜でした。拡張機能・スニペット共にすぐに導入できるので是非試してください!

拡張機能は癖が強いものも多く、人によっては合わないものもあるので、自分にあったものを選んで使ってください!

次回は、今すぐには速くならないけれど、覚えることでコーディングが爆速になる”Emmet編”を紹介します!

高宮竜太

企画・制作

ノベルティのコーダー
主にフロントエンドを担当。コーポレートサイトだけでなく採用サイトやメディアサイトもおまかせください!
休日はアングラーとして活動中。
そろそろ魚の気持ちも汲み取れるようになりたい。
I Love Bass Fishing!
HOME | コラム | 【初心者向け】今すぐ・誰でもコーディングが速くなる方法〜VSCodeの設定編〜
CONTACT

お問い合わせ

お見積りの依頼やWEBに関する
お悩みがございましたら、
お電話かメールからお問い合わせください。

047-405-2227

お電話対応可能時間 平日/10:00~17:00

〒273-0005 千葉県船橋市本町5-1-1 船橋AUビル4階

船橋情報配信メディア

トコトコふなばし船橋情報配信メディア|トコトコふなばし

【船橋トコトコ大冒険メディア】として船橋の地域情報メディア、トコトコふなばしを運営。

船橋の観光スポットやイベント、グルメなど船橋の魅力を、熱く!ディープに!紹介しています。

また、船橋で活躍されている個人・企業の皆様への取材も実施しています。

船橋情報配信メディア|トコトコふなばしのとこっとちゃん

トコトコふなばしのキャラクター

とこっとちゃん

船橋に迷い込んでから船橋が気に入ってしまったトコ!

船橋を散歩しながら船橋のいいトコを紹介しているトコ。

船橋市内での取材はボクも行くトコよ~♪