Programming WEB

テキストエディタの選び方[おすすめはVSCode]

2020年2月11日

 

困ってます
プログラミングを始めたら、テキストエディタを準備しないといけないらしいけど、どれを選んだらいいんだろう?

 

こういった疑問にお答えしていきます。

 

こんにちはRonpeee(@ronpeee0809)です。

僕がプログラミングを独学で始めてすぐは、テキストエディタという存在を知りませんでした。

最終的に僕は、Visual Studio Codeエディタに収まりました。

Visual Studio Codeは開発者も好んで使われる、かなり優秀なエディタです。

テキストエディタ選びに悩んでいる方は、ぜひご参考ください。

 

最後まで読んでもらうと、テキストエディタ選びの手助けができると思います。

 

テキストエディタとは

 

テキストエディタとは、文章(テキスト)を入力したり編集したりするものです。

テキストエディタを使用してプログラミングコードを書いていくことになります。

なので、プログラミングを始めるにはテキストエディタは必ず準備しないといけないものになります。

ここから先はテキストエディタのことをエディタといいますね。

 

エディタの比較

 

実はエディタは、MacやWindowsにデフォルトであるメモ帳を使用してもOKです。

ただ、

ポイント

メモ帳:文章を入力するもの。

エディタ:プログラミングコードを書くことに特化したもの。

の違いがあるので、コードを書く際にエディタを使用した方が圧倒的に作業効率がアップします。

世の中にエディタはたくさんあるのでどれを使用したらいいか迷います。

その中でも有名なものを今回3種類取り上げました。

 

Atom

 

価格:無料・オープンソース

運営会社:GitHub

オフィシャルサイト:Atom

特徴:初心者から上級者まで幅広く支持されている。画面も見やすい。コードを自動調整したり、スペース位置を可視化するなどの拡張機能も備わっている。

 

Brakets

価格:無料・オープンソース

運営会社:Adobe Systems

オフィシャルサイト:Brakets

特徴:こちらも人気のエディタ。インラインエディタと呼ばれるHTML内でもCSSのコードが書けるため、シートを行き来する必要がなくなる。またライブビューはブラウザにリアルタイムで表示可能。コード記入後すぐに変更内容が確認できるので作業効率がアップする。

 

Visual Studio Code(VSCode)

価格:無料・オープンソース

運営会社:Microsoft

オフィシャルサイト:Visual Studio Code

特徴:僕が今使っているエディタです。今回こちらが一番のおすすめですので、この後に詳しく説明していきます。

 

Visual Studio Codeのダウンロード方法

 

それでは、さっそくダウンロードの方法を説明します。

10分くらいでダウンロードできますので、がんばりましょう。

①Visual Studio Codeサイトのトップページから「今すぐ無料でダウンロードする」をクリックしてください。

 

②下の写真の画面になりますので、お使いのOSを選択してください。

僕はSurfaceを使用していますので、Windowsを選択します。

 

③「使用許諾契約書の同意」が表示されます。

文章に目を通してもらい「同意する」ボタンを選択し、「次へ」に進みましょう。

 

④インストール先の指定が表示されます。

インストール先のフォルダを指定して、「次へ」を押しましょう。

 

⑤ショートカットの指定が表示されます。

ここは「次へ」に進みましょう。

 

 

⑥追加タスクの選択が表示されます。

その他のチェック欄は入れておいた方が便利かと思います。

例えばファイルを開く際に、ファイルを右クリックするとそこからVSCodeを開くことも可能になります。

 

 

⑦これでインストール準備が完了しました。

インストール先を確認し、「インストール」ボタンをおしましょう。

もう少しで完了なので、がんばりましょうね。

 

 

⑧これで完了です!

お疲れ様です。「完了」ボタンを押し、これで使用できるようになりました。

 

 

 

Visual Studio Codeの特徴

 

候補表示(インテリセンス)

コードの一部を入力するとそれに対する候補を表示してくれます。

 

wiと記入するだけでwidthを候補として表示してくれました。

これだけでも作業効率があがります。あまりに頼りすぎると実際のコードを忘れてしまうぐらいです。

 

拡張機能

日本語に翻訳できることはもちろんのこと、VSCodeには様々な拡張機能が準備されています。

 

インストールは

左下のメニューにある「EXENSIONS]から必要な拡張機能を検索し、「Install」ボタンでインストールできます。

 

とりあえずおすすめは「Live Server」です。

これはBraketsにも準備されている機能ですが、コードを記入するとライブでブラウザに表示してくれます。

インストール後、画面下の「Golive」ボタンを押すことで起動してくれます。

 

Emmet

 

EmmetとはHTMLやCSSをより効率よく記入するためのプラグインです。

これはかなり便利ですので、活用しない手はないです。

例えば「html:5」と入力しTabキーを押すだけで

 

 

ここまでコードを記入してくれます。

このままでは、lang=”en”となっているので”Ja”に変えるだけで多くのコードを書く手間が省けますね。

 

その他に少し紹介しておきますね。

参考

通常:h1+Tabキー→<h1></h1>

入れ子:header>nav +Tabキー

<header>

<nav></nav>

</header>

繰り返し:ul>li*3+Tabキー

<ul>

<li></li>

<li></li>

<li></li>

</ul>

 

他にもまだまだ時間短縮できるEmmetがあります。

その都度調べて覚えていきましょう。

 

ショートカット

ショートカットもあるのでこれも作業しながら覚えておくことで作業効率が上がります。

Quiita

に便利なショートカット表がありますので参考にして下さい。

 

マルチカーソル

マルチカーソルとはまとめて複数ある同じ文字を変更することが出来る機能です。

例えば、MacならCommand+D WindowsならCtrl+Dでまとめてコードを編集することが出来ます。

 

まとめ

まとめ

  • プログラミングにテキストエディタは必須!
  • おすすめはVisual Studio Code!
  • いろんな機能を使って作業効率アップを目指そう!

 

今回おすすめのエディタをご紹介しました。

是非いろいろ機能を試していただき、快適なプログラミングライフの参考にして下さい。

それでは。

 

初回投稿:2020年2月11日

-Programming, WEB
-,

Copyright© Ronpeee blog , 2021 All Rights Reserved.