パンセのタネWebデザインを追求したり、Web業界の最新トレンド、ネットPRなどのお役立ち情報を紹介するスタッフブログです。

GitHub開発のエディタ「Atom」がイケてる件―パッケージご紹介―

2016年12月05日

こんにちは。駆け出しエンジニアのおぐらです。
今年の1月からフロントエンジニアとして働き始めて、はや11ヵ月。
これまでにHTMLやCSS、Javascriptなんかを中心に取り組んできました。現在はPHPというプログラミング言語について勉強している最中です。

さて今回はエディターの話なのですが、僕は8月までEmEditorを使用していました。
「使いにくいわけじゃないんだけど、うーん…」と思いながら調べていると、何やら面白そうなエディタがあるじゃないですか。そう、「Atom」です。
9月くらいから使い始めましたが、めちゃくちゃ便利!「こうしたいなー、あーしたいなー」と思ったことが何でもできる印象です。
ということで今回は、僕と同じようにエディタで困っている方に向けてAtomの利便性についてご紹介します。

エディタ「Atom」とは

atom.png
Atom

GitHubが開発したオープンソースのテキストエディタです。GitHub開発ということもあり、Web制作者のために作られたようなエディタになっています。まず無料というのは素晴らしいですね。Windows、Mac、Linuxのどの環境でも基本的には問題なく動きます。

個人的には、見た目が綺麗で操作性も良いなーという印象でした。他のサイトでデメリットとして挙げられている動作の重さも、PCの性能によりますが私は特に気にならない程度です。

ただ、なんといっても一番の利点は拡張性の高さです!
デフォルトでは備わっていない機能も「パッケージ」をインストールすれば解決…なんてことがたくさんあります。
バリエーションも豊富で、パッケージを検索しているだけでも楽しいです♪
なかなか将来性高きエディタになっていますね。

フロントエンジニアおすすめの追加パッケージ

ではでは、AtomでWeb制作の環境を整えるためにパッケージは何を追加する必要があるのでしょうか。特にコーディングをするうえで必用最低限なパッケージを明記しました。どれもこれも重宝すること間違いなしです(`・ω・´)
 

japanese-menu

Atomをインストールしたら真っ先に追加しておきたいパッケージ。
通常Atomはメニューバーやコンテキストメニューラベルが英語表記なので、それを日本語表記に変換してくれます。英語が得意じゃない方はぜひともいれておきたいものですね。

emmet

HTMLやCSSのコーディングを行う際にサポートしてくれるプラグインです。
以前はZen Codingと呼ばれていて、こちらの名前の方がしっくりくる方が多いですかね。
コーディングを行う際に、いちいち面倒な記述をショートカットしてくれるので仕事効率をアップしてくれます。

atom_emmet.png

こんな感じで記述して、Tabキーをクリックすると…

atom_emmet_02.png
 

リストが展開されました!うん、便利!
コーディングの時間短縮には必須なパッケージですね。

color-picker

color_picker.png

Web制作の際には、あると地味に便利なパッケージ。
color-picker(右写真)は、色コードを直感的に選択することができます。現在のカラーと選択中のカラーが同時に表示されるので、違いが一目で分かります!

pigments

pigmentsは、color-pickerと同じく、色を直感的に認識しやすくするためのパッケージ。
色をソースに表示させてくれます。正しい色が当てられているのか確認しやすいですね。

linter

コードの文法エラーチェックを自動で行ってくれます。
僕はHTMLや、PHP、Javascriptなどを利用していますが、かなりマニアックな言語にも対応しているみたいなので心強い味方になること間違いなしです!
※linterは、linter-csslintやlinter-phpなど必要な言語のパッケージをインストールする必要があります。

auto-encoding

Atomはデフォルトだと自動エンコーディングをしてくれません…。そこでauto-encoding!Shift JISのファイルを開いたら、しっかりエンコードをShift JISに自動変換してくれます。
このパッケージを見つけるまでは毎回手動でエンコーディングしてたのですが、出会えて幸せになれました。

minimap

Sublime Textでお世話になった方も多いのではないでしょうか?
コードがズラッと長くなった時にこれがあると便利。ページ全体を見回しつつスクロールできちゃいます。
また、このminimapをさらに便利にするためのパッケージもあったりします。スクロール時にminimapを非表示にしてくれるminimap-autohideや、Atomでブックマークした所を minimapに表示してくれるminimap-bookmarksもついでに入れておくとより快適になれますね。

おまけ

atom-pronama-chan

エディタのバックグラウンドにプロ生ちゃん(暮井 慧)を表示させるパッケージ。
たまに瞬きをしたりして…意外に芸が細かいですね。癒されます。
上司にバレないようにショートカットキーで表示/非表示を切り替えることもできます。これで安心してニヤニヤできます。

atom_omake.png

おすすめの追加テーマ

Atomではパッケージの他に、「テーマ」というエディタのUIやSyntaxを自由にカスタムすることができる機能があります。 そのなかでも個人的に気に入っているテーマをご紹介します。

atom-material-ui

非常にシンプルですが、いろいろ試した中でも特に使いやすい印象です。僕もこのテーマを採用しています。
左側のツリービューの各ディレクトリの間隔が広くなり、デフォルトのものと比べると見やすさが全然が違います。 カラーも緑を基調にしていて目に優しい気がします。(たぶん)

an-old-hope-syntax

Syntaxのテーマ。カラーはスターウォーズをイメージしているらしいのですが、あまり伝わりません。 ただし、お遊びテーマかと思いきや見やすさは抜群。スターウォーズを抜きにしても活用できるかと思います。 インストール数もなかなか多いので、実用的なテーマとして人気も高いのではないでしょうか。

pensees_tane.png

  • atom-material-uiとan-old-hope-syntaxをインストールした状態のAtom画面

まとめ

今回は必要最低限のパッケージを紹介させていただきました。もし他にもおすすめがありましたら、至急教えていただけると幸いです(`・ω・´)
使いやすいUIで、機能も充実!しかもオープンソースなんて…これは使わざるを得ません。今後のさらなる進化が楽しみです。
無料なので、もしエディタに困っている方がいましたらぜひぜひAtomを体験してみてください!

仕事のご依頼・お問い合わせ

この記事を書いた人
おぐら

更新情報をお届けします

Facebookもよろしく!

Pick Up! おすすめ記事

制作実績一覧

カテゴリー

Twitter

この記事を読んだ人はこんな記事も読んでいます。

カテゴリ別

パンセのタネ トップへ戻る制作実績