見出し画像

高機能なエディタを使おう！

MarlboroLand

コーディングするときにエディタを使いますが、従来からあるTeraPad、サクラエディタ、秀丸でもコーディングすることは可能です。ですが、最近はより高機能なエディタを使った方が作業効率が格段に向上するので使うメリットが大きいです。

仕事上色々なエディタを触ったことがありますので、個人的な意見になりますがエディタの違いを挙げてみようと思います。

画像1

高機能エディタの使用感を図で表してみました。
参考としてTeraPadとIntelliJ IDEAを入れてます。機能が高くなるほど全体的に重くなる傾向ですね。使っているPCが古くなってるのも使用感に影響があると思います。

高機能エディタの個別感想はこんな感じです。

Sublime Text

10年以上の歴史があり、高機能エディタの走りとして爆発的な人気を博しました。すごく軽くて使いやすいので、今でもちょっとした作業にはこちらを使っています。拡張機能も豊富で機能もこなれていますので成熟した印象。日本語化するための作業に少しだけ手間が掛かるのが難点ですね。

Atom

GitHubが作った高機能エディタで、こちらもすごく軽くて使いやすく熱狂的なファンが多い印象です。エディタの設定や拡張機能を入れるのがSublime Textよりやりやすいと思います。

ネットの評判を調べると、ソースコードが増えると不安定なるという話ばかり出てくるので、逆に使うのが不安になります。

Brackets

Adobe Systemsが提供しているエディタ。最初から日本語されている、ライブプレビュー機能が使えるなどさすがと思えるアドバンテージがあります。仕事で使っていてCSSのコードが増えたらほぼ動かなくなったことがあり動作は重めな感じです。作業環境として高性能なPCを要求されますね。

Visual Studio Code

こっちはMicrosoftが開発したエディタ。Sublime Text並に軽くて使いやすいのが一番の特徴。私は今これをメインで使っています。環境の設定、拡張機能を入れる部分もやりやすいですね。UIに癖があるのでSublime Textとか使ってると結構な違和感を持ちます。デフォルトで文字を拡大するショートカットキーを押とUI全体が大きくなる仕様は意味分かりません（設定で変更可能）。

Dreamweaver

Adobe Systemsが開発している有償のエディタ。中身はBracketsです。ほぼIDEと呼ばれるくらいたくさんの機能が盛り込まれています。昔はこれ一択でよく使っていたのですが、全体的に動作が重めなのが大きなデメリットとなっています。こちらも高性能PCを用意できればかなり幸せになると思います。

エディタの他にIDEもあるよ

IDE（統合開発環境）と呼ばれる主にプログラミング系で使われている、もっと機能が用意されているエディタ（？）が昔からあります。機能が高いものは単純に習得難度も上がるので、使うかどうかは本人次第となりますが、その分恩恵を受けることができます。

基本的にIDEはどうしてもその高機能から動作が重めになりやすいです。
最近の高機能エディタには拡張機能を利用することでコンパイルやデバッグの機能を使えたりするので、IDEとの垣根が曖昧になってきています。

IDEもいくつか種類がありますのが私はJetBrains社のIntelliJ IDEAを使っています。コーディングはWebStormの方が特化しています。

高機能エディタを使うメリット

高機能なエディタには元からコーディングしやすいように従来のエディタより機能が拡充されています。また、拡張機能として自分に必要な機能を後から追加することができます。

拡張機能は恩恵を受ける代わりに細かい設定が要求されるものや、複数入れすぎると動作が重くなりやすいので注意が必要です。拡張機能を開発しているのが個人の場合、途中で開発中止で使えなくなることもあります。
いくつか便利な機能を挙げます。

・インデント
・Emmet
・ライブリロード機能
・コードチェック
・Sass
・Git

インデント

HTMLなどを記述するときタグの構成をインデント（字下げ）することでソースコードをより見やすくすることができます。Webサイト制作も複数人で作業することが多くなったため、コードの記述はわかりやすくすることが求められています。記述するためのルールは会社によりばらつきがありますが、具体的にはGoogleが提唱しているスタイルガイドが挙げられます。

Google HTML/CSS Style Guide まとめ

高機能エディタにはインデントの機能が最初から入っているものが多く、意識せず見やすいコードを記述することができるので便利です。

Emmet

HTMLを効率よく記述できるEmmet。高機能エディタの拡張機能として使えるようになってます。仕事では普通に使いますね。全部の記述を覚えなくても簡単な記述ができるだけでコーディングがすごく楽になります。Emmetの記述についてはチートシートページがありますので挙げておきます。

Emmetチートシート

ライブリロード機能

HTMLなどの記述した内容をF5を押さずに即座に反映させるブラウザのリロード機能があります。エディタにより名称が少し違うようです。元はBrowsersyncという有名な機能があり、私はビルドツールのgulpと組み合わせていました。最近は拡張機能として高機能エディタで使えるようになってきています。

Browsersync

コードチェック

入力したコードに問題がないか調べる機能です。Lintとか呼ばれていますね。エディタにより自動でチェックしてくれるものや拡張機能で使えるものなど色々あります。拡張機能を入れた後の設定によりチェックする条件を変えることができます。
また、HTML、CSS、JavaScriptなどのチェックする言語に対応する拡張機能があります。

Sass

CSSより便利な機能が使えるSassは拡張メタ言語と呼ばれています。派生としてSCSSがあり、こちらの方が人気ですね。入れ子の記述や変数を扱うことができるためCSSの作業効率化やCSS設計に役立ちます。SassはCSSファイルに変換（コンパイル）する必要がありますが、高機能エディタの拡張機能などでコンパイルできるようになりました。

Sass

Git

作業したファイルを履歴などの残せるバージョン管理ツールです。同一のファイルを複数人が作業する時や作業メンバーが遠隔地にいるときに力を発揮します。作業ファイルはホスティングサービスのGitHubに置いて統一管理します。

Gitはコマンドプロンプトやターミナルを使いGitコマンドで制御する必要があります。こちらも高機能エディタの拡張機能などでエディタから状況の把握ができるなど使いやすくなっています。

Git

GitHub

他にも色々な機能が各エディタで用意されていますので、自分が使っている、使おうと思っているエディタの情報を集めて自分だけの使いやすい環境を構築してみてください。

この記事が気に入ったらサポートをしてみませんか？