こんにちは。
今回は、おすすめのコードエディタをご紹介します。
プログラムを書いたり、ホームページをhtmlで作ったり、普通の文章を書いたり、など、パソコンでは「テキストエディタ」を使う場面があると思ます。
そんなとき、皆さんはどんなエディタ使用していますか？
Windows標準搭載の「メモ帳」なんかを使っていませんか？
簡単なテキストなら、Windowsの「メモ帳」でも十分だと思います。
しかし、複雑なプログラムになったり、長ーいテキストなんかだと、「メモ帳」では不便だと思われます。
Windowsの「メモ帳」は、文章を書く必要最低限度の機能しかなく、複雑な処理には向かないからです。
じゃあどうすればいいのかと言うと、もっと高機能なテキストエディタを使用すればいいのです。
ということで、今回はおすすめな無料コードエディタ「Visual Studio Code」をご紹介します。
ちなみに、有名な無料テキストエディタだと、次のようなものがあります。
- Visual Studio Code
- Sublime Text
- Atom
- サクラエディタ
- Notepad++
- TeraPad
他にもいろいろありますが、今回は「Visual Studio Code」を紹介することが目的なので、このくらいにしておきます。
Visual Studio Codeとは
Visual Studio Codeは、マイクロソフトにより開発されたソースコードエディタで、Windows、Linux、macOS上で動作します。
デバッグ、Gitクライアントの統合、シンタックスハイライト、インテリセンス、スニペット、リファクタリングなどの機能を持ちます。
拡張機能を入れることによって、機能を増やすことができます。
また、カスタマイズもでき、利用者はエディタのテーマやキーボードショートカット等を変更できます。
ざっとこんな感じですね。
「Visual Studio Code」がおすすめな理由
では、なぜこのソフトがおすすめなのかを説明していきます。
動作がとても軽い
起動から編集、そして終了までのすべての操作が、軽くて速いです。
テキストエディタというのは、思い立ったらすぐ書ける、そんな起動の速さがとても重要です。
起動やその他の動作が遅いエディタでは、作業効率が悪くなるだけではなく、やる気や意欲なども低下してしまいます。
例えば、「Visual Studio Community」です。
（これは、シンプルなテキストエディタとはちょっと違いますが。コードエディタというよりは、IDEですね。）
このソフト、高機能すぎるだけに、起動が少々重いです。
（PCの性能にもよりますね。）
起動が遅いと、その間に、やる気・しようとしていたことの記憶なども薄れていくことでしょう。
つまり、動作は速いほうがいいのです。
「Visual Studio Code」は、そういった面で優れています。
コードの自動色付け（ハイライト）
これは、プログラミングをする人には、欲しい機能ですね。
Visual Studio Codeでは、入力したプログラミング言語に応じて、ソースコードを色分けしてくれます。
例えば、こんな感じです。
<HTMLの例>
<Javascriptの例>
どうでしょうか。
きっと見やすいはずです。
プログラミングや、タグうちによるホームページ作成などにとって、ソースコードの見やすさというのは、重要なポイントとなります。
見直しなどの作業がやりやすいですからね。
入力支援機能
続いて、「入力支援機能」です。
プログラミングをする人などにとって、長い構文をすべて自分で打つのには、少し時間がかかることですよね。
そんな入力を補助してくれるのが、この機能です。
編集しているファイルの形式に応じて、入力途中に「入力候補」を出してくれます。
Tabキーなどで、その候補を選択するだけで、長い命令なども一発で入力できます。
これにより、入力ミスなども、各段に減りますね。
自動整形機能
皆さんは、プログラムを書くとき、「見やすさ」にこだわっていますか？
プログラムコードというのは、基本的に、どんなに汚くても（文字が詰まっているなど）動きます。
Pythonは、ちょっと例外ですが。
（インデントに注意しなければ、エラーがでるんですね。）
ただ、動作は正常だからと言って、ソースが汚いと、見栄えは悪いし、後での修正もしにくいです。
そんなコードの整形を助けてくれるのが、この機能です。
ということで、この機能を使ってみましょう。
まず、この機能を有効にします。
「ファイル」⇒「基本設定」⇒「設定」を開きます。
上に検索窓があると思うので、そこから「formaton」で検索します。
「editor.formatOn～」となっている項目すべてにおいて、左側のチェックボックスにチェックをいれ、有効にします。
これで準備は完了です。
あとは普通にコードを書いていくだけです。
「コード入力時」もしくは「ファイル上書き保存時」に、コードが自動整形されます。
[Before]
⇩
[After]
見やすくなりました。
画面分割機能
これは、同じウインドウ内で、複数のファイルを並べて表示できる機能です。
こんな感じに。
これにより、「複数のファイルの比較」、「見本を見ながら打つ」など、他様々なことに応用できます。
エラー部分の表示
このように、間違っている箇所に赤波線がでます。
これにより、どこで間違えているのかが、一発でわかりますね。
ローカルサーバー機能
これは、HTML5 + Javascript でWebアプリを作っている人などには、欲しい機能ですね。
Javascriptで作ったものには、ローカルで動かすのと、サーバーで動かすのでは、挙動が異なってしまうようなものがあります。
WebGLなどがその例です。
実際に公開する際は、サーバー上で動かすのですから、そちらのテストをしなければなりません。
しかし、いちいちサーバーにアップロードしてテストをしていたのでは、面倒くさいし、効率が悪いですよね。
そこで役立つのが、このローカルサーバーです。
ローカルにサーバーを立てることで、これらの問題点を解決できます。
では、使っていきましょう。
ローカルサーバー機能は「Live Server」という拡張機能を入れることで利用できるようになりますので、まず、この機能を追加しましょう。
「ファイル」⇒「基本設定」⇒「拡張機能」を選択します。
そうしたら、検索窓から「Live Server」で検索し、インストールします。
（僕は既にインストール済みです。）
その後、「Visual Studio Code」を再起動させておきましょう。
これで準備はできました。
あとは、対象のHTMLファイルを開きましょう。
この時、注意しなくてはならないのは、そのファイルは、「ファイルを開く」からではなく、「フォルダーを開く」というところから、開いてください。
単にHTMLファイルを開いただけでは、このローカルサーバー機能は作動しません。
HTMLファイルが置いてあるフォルダーごと、読み込んでください。
それができたら、あとは、エクスプローラーからファイルを右クリックして、サーバーを起動するだけです。
ブラウザが開いて、実行してくれます。
ソースコードを右クリックして、「Stop ～」みたいなやつを選択すれば、サーバーを停止することもできます。
パソコンのipアドレスを調べておけば、そのパソコン内だけでなく、同じネットワーク環境内のデバイス（スマホ、タブレット、その他のPCなど）からもアクセスすることもできます。
もちろん、ポート開放などを行っていなければ、外部のネットワークからアクセスすることはできませんので、ご安心ください。
「Visual Studio Code」の不便な点
今のところ、特に困った点は、ございません。
もし何かデメリットがあるのであれば、コメント欄にお願いします。
終わりに
とにかく、素晴らしいテキストエディタです。
この「Visual Studio Code」を使用して、作業効率を上げてきましょう。
以上です。
さようなら。
また次回、お会いしましょう。
