Atom vs VSCode vs Brackets、もっとも使いやすいエディタはこれだ!…といいな

typewriter

真夜中WEBではWYSIWYGエディタを使用せず、テキストエディタを使ってホームページ制作を行っております。

具体的にはWindowsでは「サクラエディタ」を、Macでは「mi」を使用しているんですが、OSごとにエディタを使い分けるのは効率的ではないこと、機能的に不足を感じてきたことなどを理由に新しいエディタに切り替えることにしました。

少し前から様々なエディタを試してみたりはしていたものの、そのたびに頓挫して今に至るんですが、ついに重い腰を上げるときが来たみたいです。

テキストエディタといっても、最近はテキストエディタかIDE(テキストエディタ、コンパイラ、デバッガ等を一つにまとめた統合開発環境をいう)かの境界がむずかしくなっているため、広い意味でのテキストエディタということになります。

基本的にはホームページ制作を含むフロントエンド(html、css、javascript)と一部のバックエンド(php、cgi)のコーディングに過不足がなければそれでいいんですが、日本語化可能なこととクロスプラットフォームなエディタであること、また、個人的にpythonを学びたいとおもっているのでpythonコードの実行等にも不自由しないという条件を追加した結果以下の3つのエディタから選ぶことにしました。

① Atom

② VSCode

③ Brackets

※最初はもっと選択肢があったんですが、人間は選択肢が多すぎると選べないということらしいので3つぐらいがちょうどいいかもしれない。

まずは①Atomですが、
・開発元はGitHub https://atom.io/
・機能の追加はパッケージをインストールすることによって行う。
・日本語化もパッケージ追加で行う。 https://atom.io/packages/japanese-menu

使ってみた感想と個人的な印象
・使い勝手とは関係ないがデザインがかっこいい
・私の環境では起動や動作がやや重いと感じた
・こういったエディタに慣れていないせいもあるが、パッケージによる機能追加が面倒

次に②VSCode、
・開発元はMicrosoft https://code.visualstudio.com/
・機能の追加は拡張機能をインストールすることによって行う。
・日本語化も拡張機能追加で行う。 https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja

使ってみた感想と個人的な印象
・デザイン的には特に書くべきことはない
・多機能なテキストエディタにしては起動が早いと感じた
・こういったエディタに慣れていないせいもあるが、拡張機能のインストールが面倒

最後に③Brackets
・開発元はAdobe http://brackets.io/
・機能の追加は拡張機能をインストールすることによって行う。
・最初から日本語化されている
・最初からある程度の機能は盛り込まれているので初期設定の手間がかからない

使ってみた感想と個人的な印象
・UIがシンプルで見やすい
・起動に時間がかかる

まとめ
・機能的にはどのエディタも必要最低限のものが入っている、または機能追加でまかなえる。
・見やすさを含むデザインに関しては個人的にはBracketsが好み。Atomもやはりカッコいい。
・軽さ(特に起動速度)ではVSCode
・日本語化に関しては最初から日本語化されているBracketsに軍配

結論
VSCodeに決めました。(使っていくうちに不具合等が見つかったら変えるかもしれませんが)

使ってみて一番印象が良かったのはBrackets。正直、個人的にはとてもいいエディタであると感じた。Bracketsにしなかった理由は唯一つ、起動や動作が重かったから。もしBracketsの起動が早かったら間違いなくBracketsを選んだ。
※Bracketsの起動が重いのは最初からある程度の機能が盛り込まれていることによるものとはおもうが…。

AtomとVSCodeには決定要因となるだけのものがあまりなかったが強いて言えばVSCodeの起動が私の環境では若干早かったのと、日本語化がおもったよりちゃんとしてたから、でしょうか。

2018年html5最小テンプレートとよく使うhtmlスニペット

htmlコーディングの骨組みとなるhtml5のテンプレートとコーディングを行う上でよく使うスニペットをまとめました。真夜中WEBではご依頼内容に合わせた手打ちのコーディングを行っておりますので備忘録の意味合いもあります。…続きを読む

OSやブラウザで表示に違いが出てしまう絵文字を絵文字フォントで代替する

ブログの記事などで絵文字を使いたいなという場面がありますが、絵文字はOSやブラウザなどの環境によって表現に違いがあったりなどはまだいい方で、最悪表示されないことも想定しなければならないのが困るところです。&#x1F617…続きを読む

Atom vs VSCode vs Brackets、もっとも使いやすいエディタはこれだ!…といいな

typewriter

真夜中WEBではWYSIWYGエディタを使用せず、テキストエディタを使ってホームページ制作を行っております。 具体的にはWindowsでは「サクラエディタ」を、Macでは「mi」を使用しているんですが、OSごとにエディタ…続きを読む

ユーザビリティ向上のためにサイトの表示スピードを改善する

highway

真夜中WEBがコンセプトとして掲げる3つの要素に「軽さ」があります。 軽さとは、サイトを構成するhtmlやcss、javascript、php、画像などのファイル群自体の容量の小ささを言いますが、このことだけにとどまらず…続きを読む

WEB制作お役立ちツール1 (人型アイコン、アバター画像作成)

WEBサイト制作では、暫定的に使う、いわゆる「アテ」画像がほしいときがあります。 一言でアテといっても、写真ぽいアテ、無地画像のアテなど案件によって様々です。 このような画像は「ダミー画像」などで検索するとたくさん出てく…続きを読む

プラグインに頼らないでワードプレスを移転する。ドメイン変更対応

最近はサイト内にワードプレスが設置されている、またはサイト自体がワードプレスでできている、ということが多くなってきました。 それに伴って、当然のことながらサイトを設置しているサーバーの移転にはワードプレスの移転も含まれる…続きを読む