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の起動が私の環境では若干早かったのと、日本語化がおもったよりちゃんとしてたから、でしょうか。

よく使うワードプレスのphp関数スニペット。随時追加

しょっちゅう使うわけではないけれど、ワードプレスを使うサイトが多くなってきたことに伴い使う頻度は増えてきたワードプレスの関数をその都度調べて記述するのもめんどくさくなってきたのでまとめてみました。 ● まずは、htmlフ…続きを読む

Google fontsで日本語Webフォントの正式版がリリースされたらしいので試してみた

typography

いままでもGoogle fontsは「Google Fonts + 日本語早期アクセス」として日本語WEBフォントを無料で提供していましたが、今回正式に8種類の日本語WEBフォントがリリースされたようです。 Google…続きを読む

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

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

もっともっとモックアップを活用しよう 1

candle-mock-up

Mockup(モックアップ ※模型の意)とはデザインなどの現場で使われる手法の一つで、作成過程で完成イメージをビジュアル的に確認するために使われるもので、プレゼンテーションやブランディングイメージ作成シーンに欠かせないも…続きを読む

Open Street MapはGoogle Mapの代替案となりえるのか

2018年7月16日よりgooglemapの仕様変更に伴ってgooglemapAPIを使って呼び出している地図(カスタマイズを施しているものを含む)を表示するにはAPIキーとお支払い情報の設定が必須となりました。 このこ…続きを読む

画像をグループでソート、クリックでライトボックス表示し、かつjquery3.xに対応させる

サイト内で複数の画像をまとめて表示するときに項目でソートできるjqueryのプラグイン「Shuffle.js」。 まずはデモページをご覧ください Shuffle.jsCategorize, sort, and filte…続きを読む