作業効率UP！テキストエディターのすすめ。 │ ブレーンアシストオンライン

IT業界でプログラミング業務をされている皆さんは、
世の中にいろんなテキストエディターがある中で
どんな理由、どんな機能が備わっていることで
テキストエディターを選んでますでしょうか。

1. Visual Studio Code
2. Extensionsランキング　Best 3

Visual Studio Code

今回は、私の愛用している
Visual Studio Code（以降　vs　と記載）をご紹介します。

そもそもテキストエディターとは？

テキストエディターとは、IT業界では、これがないと仕事ができなくなるほど、
大切な存在です。コーディングを書くノート？みたいなものでしょうか。
テキストエディターも色々な物が開発されていて、無料のものあれば、
有料のものもあります。
各テキストエディター別に操作性や、特徴がありますのでご自身で
いろんなテキストエディターを試しに使ってみて、自分にFITしたものを是非選んでみてください。

Dreamweaver

私が今まで使用していたテキストエディターは、
Adobe社から出ている　Dreamweaver (以降 DW と記載)です。

https://www.adobe.com/jp/products/dreamweaver.html

DWの特長はなんといっても、FTPサーバと接続ができ、アップロードも瞬時にできるところです。
また、豊富な機能(私はそこまで使いこなせなかったですが)が揃ってるため、
設定をしておいて、使いたいタイミングで使用するのがよいですね。

ただ、マイナス点としては、有料であること、Adobe Creative Cloudのプランを購入することが
条件になります。
DWを使用できるプランは、二つ　「コンプリートプラン(他ソフトも使用可能 Photoshopなど)」、
「Dreamweaver – 単体プラン」があります。
それぞれ料金、詳細は、公式HPをご覧ください。

もう一つマイナス点が、私がテキストエディターを使うときに重要視している立ち上がりの速さ、
レスポンスの早さですが、DWは非常に重い、レスポンスも遅いことです。(PCのスペックにより多少変わってくるとは思いますが)

Sublime Text 3

DWの次に出会ったのが、「Sublime Text 3」です。
https://www.sublimetext.com/3

Sublime Textは、一般的にコミュニティーによって作成され、プラグインを入れる事により
機能を拡張し、自分好みのテキストエディターにカスタマイズすることができます。

特徴としては、テキストエディター自体がかなりシンプルなレイアウト、機能、設定になっており、
初めてでも使いやすい構造になっています。
また、ソースの色を変更できたりとユーザー自身の目線に立ったスタイルが良いですね。
あっ　あと無料です。これは嬉しいですよね。
ただ、２回に一回の割合で、「購入する」ボタンがでてきます。もちろん、無料のまま使用できますが、
購入すると、ドネーション的な感じで寄付され、その寄付された資金で開発に活かせるとのことです。

マイナス点は、とくになかったのですが、Visual Studio Codeに出会ってしまったため、
Sublime Text 3の役目は終わりました。

Visual Studio Code

ここからは、Visual Studio Codeについてです。
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

VSは、Microsoft社が開発しており、世界各国のProgrammer、Front End Developerに愛されています。
VSの特長は、なんといっても　Extensions(プラグイン)の充実さ、Emmetがすでにインストール済ということです。

Emmetは、ソースを書くときにかなり重宝します。
例えば、

を、以下の記述で入力し、「tab」キーを押すだけで瞬時に上記のソースが書けます。
10-20秒くらいは違います！

ul.className>li.list-item*5

コーディングはスピードが勝負なところもあるので、Emmetを使ってスピードアップ、
日々の仕事の効率化を図っています。

他にもVSでのEmmetの記述方法はたくさんありますので、気になる方は、実際試してみてください。

Extensionsランキング　Best 3

ここからは、VSのExtensions Best 3をご紹介します。(勝手に)

3.Bracket Pair Colorizer

ソースを書いていくうちに　特に長い記述となると、ブラケットのペアがわからなくなりませんか？

挙句の果てには、消したくないブラケットも消してしてまって、ソースが崩れてしまったりと。。　私の経験でも多々ありました。
そんなとき「Bracket Pair Colorizer」をインストールしておくと、ブラケットペアを同じ色で表示してくれます。ブラケットの色は設定で自分好みにアレンジ可能。
実際に試した結果、HTML, CSS, SCSS, jsでは表示、仕様可能でした。

2.ES7 React/Redux/GraphQL/React-Native snippets

React jsで作成するアプリ、サイトが増えている中で各コンポーネントを作成する度にお決まりの記述を書くのはなかなか面倒。
そんな面倒な作業もこのExtensionsを入れておけば解決します。要は、ReactのEmmetというわけです。

例えば
Functional Componentsを作成するとき

import React from ‘react’

const AddTodo = () => {
return (
<div>
somthing here
</div>
)
}

export default AddTodo

を「rafce」　と入力するだけで　上記のソースが完成します。
これで業務をスピーディに、そして、誤字なく記述できます。

3.Live Server

通常、WEBサイト作成時は、実際の画面を確認しながら作業していくのがたいていだと思います。サーバーにファイルをアップロードしながら、毎回作業するのではかなりのタイムロスになってしまいます。ときにはアップロードする場所や、アップロードするはずのファイルを間違えた！なんてことも多々ありました。

そんなときに、Live Serverを使うと現在開いているファイルがそののまま local Serverを起動してレンダリングされます。もちろん、他のディレクトリにあるstyle.css, script.jsとリンクしていれば、適用されます。保存ボタンを押す度timelyに更新、適用されます。

また、Live Serverを複数の異なったブラウザでレイアウト確認したいときも問題なくできちゃいます。そんなときは、手動で、URLをコピーして、確認したいブラウザに貼り付けて確認できます。作業中に私がもっとも使用しているのがLive Serverです。これがないと作業ができなくなる！　くらい今では大事な存在です。

以上、「勝手にExtensions Best 3」でした。

このようにテキストエディターは、通常の作業を便利にしてくれるだけではなく、
自分好みにカスタマイズできたりと、大変優秀です。
気になったテキストエディターを試してみて、自分に一番Fitするテキストエディターを
選んでみるのはいかがでしょうか。