中の人「ma-san」

東京・千葉でホームページを作るお仕事をしています。

お仕事の詳細はこちら

初心者からプロのホームページ制作に欠かせないエディタの一つ「Visual Studio Code」

初心者からプロのホームページ制作に欠かせないエディタの一つ「Visual Studio Code」 CODE

この記事はホームページ制作の知識がない方やこれから学習していきたい方に向けた記事になります。初心者からプロまで幅広い層に愛されているエディタ「Visual Studio Code」のご紹介です。
特に、触りの触りで初めて触りますって方のためにかるく纏めています。

VisualStudioCodeってなに

VisualStudioCode公式サイト

エディタは沢山ありますが、その中で勝ち残ってきたエディタです。一昔前であれば「SublimeText」「Atom」などありましたがすっかりこのVisualStudioCodeが普及した印象です。
開発元は「Microsoft」というところも信頼につながっているのではと思います。
もちろん、これじゃないとだめということはないですが多くの方が利用しているエディタを利用するほうが最初は良いです。知見も多く世の中に存在するため検索すればたいていのことは解決するかと思います。

Visual Studio Code - Code Editing. Redefined
Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and availa...

エディタってなに?

Visual Studio Code実際の画面

エディタとは簡単に言ってしまえばテキストデータを編集するためのツールです。テキストエディタという言い方もされ、近年ではこの「Visual Studio Code」が大人気といっても過言ではありません。
もちろん、他のエディタは沢山ありますがこの記事では「Visual Studio Code」のみ説明していきます。

  • Windows、macOSなど様々な環境をサポート
  • 拡張機能が豊富なため、様々な環境に最適化しやすい
  • HTMLやCSS、JavaScriptだけではなく主要なプログラミング言語をサポートしている
  • データを横断して検索、置換を行える
  • 差分管理(Git)が容易
  • ターミナルによる操作も簡単にできる

上記は他のエディタでもできることがほとんどですが、なによりも利用者が多いことによるサポートの手厚さと拡張機能の豊富さ、動作が軽量というところがとても良いです。

コーディングのサポートが豊富

HTMLのコーディングを補完

大昔はHTMLなど、各種要素を入力するには全て手打ち&覚えておく必要がありましたが、今ではある程度補完してくれるためちょっと入力すれば補完してくれます。

検索・置換が容易

検索画面

検索をする際、フォルダを指定しているとフォルダに入っているファイル全体を検索してくれます。特定の箇所を修正したい、特定のコードを調査したいときなどに使用します。

置換画面

置換したい場合も同様に簡単に行う事が可能。一括に行うことも可能ですし、一つ一つ置換することも可能。ただし、一括で置換をしてしまうと思わぬところまで修正してしまう可能性もあるため要注意です。
そのために「除外するファイル」で条件を指定して一括置換から除外することも可能です。

拡張機能も豊富

拡張機能

「拡張機能」を使って自分好みに調整することが可能です。とはいえインストールしたての状態でも全然使える状態になるので、必要に応じて拡張機能を入れたほうが良いです。

「VSC 拡張機能 おすすめ」で検索してもかなり古い記事が出てきたりもするので自分自身に必要なものを入れたほうが良いかなと思いますが、わからなければデフォルトで十分かと。

Web業界でやり取りが頻発するテキストデータを開くためにも必要

Web業界に入りたて、もしくはこれから頑張るぞという方にとって「HTML」や「CSS」などをあたかも当たり前のように説明をされても、人によっては「開くことすらままならない」ということも多いと思います。
そのため、業務上でなにかしら編集が必要なとき、中身を見たいときなどのためにもエディタの準備をしておくといざ「HTMLに特定のURLが入ってるか調査して」と言われたとしても対応が可能です。
また、HTMLってどのくらいあるのかなぁとか、調べることもできます。

まとめ:Web業界に入るならエディタを最低限使えるように

上記以外にも沢山の機能がありますが、エディタを使いこなせるようになると後々「調査」や「分析」を行うときにも活用できたり、なにかしらの業務改善をするときにも活用できたりします。

今後、お仕事で関係のある方々にはエディタが使えるようになるためのフォローもしていきたいなと思いますのでどうぞよろしくお願いします。

           

お仕事・当サイトへ興味を持っていただいた方
お問い合わせはこちらから

ma-san(鈴木正行)
テクニカルディレクター / Webデザイナー

「ma-san」の中の人。東京都・千葉県・宮城県仙台市を中心に企業のWebデザイン/マーケティング/IT戦略のプランニングからWebサイト構築・運用をしています。
「Webサステナビリティ・Webアクセシビリティ」を中心に、「変わりゆくWebと共にサービス・サイトを改善していくこと」を重視します。
当サイトではお仕事のご相談からナレッジシェアを中心に活動していきます。

CODE
スポンサーリンク
シェアする
ma-sanをフォローする
ma-san blog
タイトルとURLをコピーしました