プロのカウンセラーがキャリアの悩みを解決! 無料キャリア相談はこちらから

Atomでの開発が捗るおすすめテーマ設定・パッケージ・ショートカットを紹介

作成: 2016.08.10 更新: 2020.06.28

>>No.1エンジニア養成プログラム テックキャンプ

読むだけでIT転職が有利になる限定資料はこちら

長い間同じエディターを使っているけど、特にカスタマイズをしていないという方は多いのではないでしょうか?

そんな人に一度使ってみてほしいテキストエディタの代表がAtom。

私がAtomを実際に使用してみた感想は以下の通りです。

  • テーマの種類が豊富で、見やすい画面にすることで目が疲れにくい
  • インストールがとても簡単で、カスタマイズ性が高い

第一印象は「とにかく設定が簡単で使いやすい!」と感じました。本当に簡単にカスタマイズできてしまうので、初心者の方に特におすすめ!

今回は、そんな豊富なパッケージやテーマを自由にカスタマイズができるAtomエディタの使い方を、キャプチャを使いながら丁寧にご紹介します。

特に、これからプログラミングを始めようと思っている方は、この機会にAtomに乗り換えてみてはいかがでしょうか?

この記事は現役エンジニアによって監修済みです。

Atomインストール方法

まず、Atomのインストール方法について解説します。

Atomのダウンロード

まずこちらの公式ページからAtomをダウンロードしましょう。

公式ページ:Atom

Atomをアプリケーションフォルダに移動

ダウンロードしたファイルを展開すると、緑色のアイコンが出てきますので「アプリケーション」のフォルダにドラッグアンドドロップで移動させます。

atom エディタ ショートカット オススメ1

Atomを起動

アプリケーションの一覧画面に緑色のアイコンが表示されたら、クリックして起動しましょう!
atom エディタ ショートカット オススメ2

Atomのテーマを変更する

atom エディタ ショートカット オススメ3

Atomは基本設定のままだと、少しコードが見づらいですね。プログラミングをする際は、常に画面を見るのでコードが見づらいと、作業スピードも落ちてしまいます。

快適に作業を進めるためにも、早速テーマを変更しましょう。

Atomのテーマの変更方法

メニュバーから「Atom > Preferences」をクリックして、設定画面を開きます。

atom エディタ ショートカット オススメ4

設定画面で「Themes」を選択すると、「UI Theme」「Syntax Theme」が選べます。

Syntax Themeは編集画面に適用されるテーマ、UI Themeがそれ以外に適用されるテーマになります。自由に選んでお好みのテイストに調整してみてください。

atom エディタ ショートカット オススメ5

デフォルトのテーマ以外が好ましい方は、他のテーマをインストールすることもできます。

先ほどの画面から「Install>Themes」を選択し、好きなテーマをインストールしてみましょう。

atom エディタ ショートカット オススメ6

今回は「monokai」というテーマ検索して、インストールしてみます。

atom エディタ ショートカット オススメ7

テーマごとにある、「Install」のボタンを押し、インストールを開始します。

atom エディタ ショートカット オススメ8

インストールが完了したら、再び「Themes」の画面に戻りましょう。Syntax Themeから「monokai」を選択します。

atom エディタ ショートカット オススメ9

これでテーマの設定が完了です。適当なファイルを開いて、テーマが変わっていることを確認しましょう。

atom エディタ ショートカット オススメ10

Atomのおすすめのテーマ

Atomには、たくさんのテーマが用意されています。

ここでは、種類が多すぎてどれを使っていいか迷う方のために、筆者のオススメのテーマを4種類ほど紹介したいと思います。

ぜひ、UI・Syntaxを検索してインストールしてみてください。

Material

atom エディタ ショートカット オススメ11

UI: atom-material-ui
Syntax: atom-material-syntax

シンプルなマテリアルデザインで、左側のツリービューの表示も大きく、扱いやすいデザインです。

Seti

atom エディタ ショートカット オススメ12

UI: seti-ui
Syntax: seti-syntax

背景が真っ黒なため、文字がくっきりと読みやすいデザインです。

Native

atom エディタ ショートカット オススメ13

UI: native-ui
Syntax: monokai

native-uiという名の通り、macのネイティブアプリのデザインに近く、馴染みやすい方も多いのではないでしょうか。検索のフィールドなど画面中央に表示される仕様もかっこいいですね。

Slack

atom エディタ ショートカット オススメ14

UI: slack-ui
Syntax: atom-light-syntax

こちらは、チャットツール「Slack」をモチーフにしたデザインです。普段からSlackを使っている人は馴染みやすいデザインでしょう。

白地に黒文字が読みやすい方にもオススメです。

他のテーマも知りたい方は、 Atom theme gallery を参考にテーマを選んでみると良いでしょう。

コロナ禍でも安心してエンジニア転職

テックキャンプ エンジニア転職は、未経験から約99%がエンジニア転職を実現しているプログラミングスクールです。 テックキャンプはコロナ禍でも安心して受講が可能。「徹底したサポート」「やりきれる学習環境」を自宅で学べるオンラインスタイルと感染防止対策を徹底した教室受講のどちらでも提供しています。 キャリアに悩む前に、まずはテックキャンプの無料カウンセリングを受けてみませんか?

Atomにインストールしたいおすすめパッケージ

Atomは、デフォルトのままでもエディターとして十分な機能を持ち合わせています。さらに、パッケージを追加していくことで更に使いやすくなります。

japanese-menu

japanese-menuをインストールすると、Atomのメニューを日本語化できます。

パッケージのインストールや日本語化の詳しい手順については、「Atomエディタのインストールや日本語化など基本的な使い方を解説」をご覧ください。

file-icons

atom エディタ ショートカット オススメ15

コードの種類ごとに、アイコンが変更される優れものです。全て同じアイコンだと、度々拡張子を確認しなければいけませんが、これだったら一目で何のファイルか確認できます。

project-manager

プロジェクトを管理するためのパッケージで、cmd + ctrl + pのコマンドを打つと登録しておいたプロジェクトを一度の操作で開けます。

 

atom エディタ ショートカット オススメ16

まず、登録したいプロジェクトを開き、cmd + shift + pを押してパレットを開きます。

「project manager」と入力すると、「edit, save, list」が表示されるので、「save」を実行します。

atom エディタ ショートカット オススメ17

登録名を入力すれば、登録完了です。

atom エディタ ショートカット オススメ18

登録したプロジェクトは、cmd + ctrl + pで呼び出せます。便利ですね。

highlight-selected

atom エディタ ショートカット オススメ19

特定の単語にカーソルを当てると、ファイル内で同じ単語がハイライトされます。

ファイル内で定義した変数がどこで使われているか確認する時など、簡単にチェックできます。修正時にも役に立つでしょう。

show-ideographic-space

atom エディタ ショートカット オススメ20

全角スペースが可視化されるパッケージです。操作ミスで入力されてしまった全角スペースも、これがあれば気づけるでしょう。

autocomplete-plus

atom エディタ ショートカット オススメ21

オートコンプリート(自動補完)が表示されるようになるパッケージです。

ある程度コードを入力してるうちに、候補がサジェストされるようになります。これがあるだけで、かなり作業スピードが上がるので、ぜひインストールしてみてください。

autocomplete-paths

atom エディタ ショートカット オススメ22

パス名を自動補完してくれるパッケージです。

ターミナルでパスを指定していく時とおなじ感覚で、パスを記述できるようになります。autocomplete-plusと一緒に使うと便利です。

autocomplete-snippets

atom エディタ ショートカット オススメ23

atom エディタ ショートカット オススメ24

Atomに登録しておいたスニペットを自動補完の候補として挙げてくれるパッケージです。

スニペットの具体的な登録方法については、スニペット登録| Atom講座 | [Smart]が参考にしてみましょう。

※この例では「root」と入力してエンターを押すだけで、予め登録しておいたコードが下の画像の用に展開されます。

emmet

HTML・CSSのコーディングをサポートしてくれるプラグインで、独自の省略記法で快適にコーディングができます。

atom エディタ ショートカット オススメ25

例えば、独自の記入方法で「ul > li*3」と入力します。

 

atom エディタ ショートカット オススメ26

tabキーを押すと、上記のように展開されました!

emmetの省略記法については、Emmetを始めるのに、とりあえずこれだけ覚えておけば大丈夫などを参考に是非使ってみてください。

bracket-matcher

対応するタブをハイライトしてくれるパッケージです。

atom エディタ ショートカット オススメ27

例えば、デフォルトだとこのような表示になります。

atom エディタ ショートカット オススメ28

bracket-matcherを使えば、このように下線が引かれ、どのタブが対応し合っているのか確認しやすくなります。

open recent

atom エディタ ショートカット オススメ29

メニュバーに、recent-filesが追加されるパッケージです。「最近、開いたファイルがどこにあるのか分からない」時にとても便利です。

language-言語名(language-rubyなど)

言語に応じたシンタックスハイライト機能を実装できる機能です。

下記のように属性ごとに色が分けられ、とても見やすくなります。

language-言語名 (リンク先はlanguage-ruby)

grgrgr

Markdown Preview

Markdownで記述したコードが、リアルタイムでプレビューしながら書け、なおかつHTMLの出力もできます。

「control + shift + M」でリアルタイムプレビュー機能が起動します。

Markdown Preview

heeeeeeee

右クリックでHTMLを出力することも可能です。
Markdown Preview

Color-picker

色コードを直感的に選択できます。

出力形式もRGB・HEX・HSL・HSV・VECと選択できるので、形式変換したいときにも便利です。

Color-picker

fdaerge

merge-conflicts

Gitでマージした際、Conflictsが発生した場合の修正を手助けする機能です。GUIが分かり易く、簡単に使える点がおすすめポイントです。

merge-conflicts

tabs-to-space

TabのSpace変換、SpaceのTab変換を行えるようになるパッケージです。他の人が編集したファイルなど、既にTabが入っていても自動でSpaceに変換してくれる優れものです。

tabs-to-space

他にも、ここでは紹介しきれないほどたくさんのパッケージがあります。次の記事を参考に、更にカスタマイズをしてみてはいかがでしょうか?

Atomで覚えておきたいショートカットキー

Atomに限ったことではありませんが、ショートカットキーを使いこなせれば、さらに作業効率は何倍も上がります

ここでは「必ず覚えるべきショートカット」「実はあまり知られていない便利なショートカット」に分けてショートカットをご紹介します。

必ず覚えるべきショートカット

コマンド 内容
cmd-shift-P コマンドパレットを展開
cmd-W タブを閉じる
cmd-, 設定画面を表示
cmd-S 上書き保存
cmd-O フォルダを開く
cmd-P プロジェクトないからファイルを検索
cmd-F ファイル内検索
cmd + / コメントアウト

実はあまり知られていない便利なショートカット

コマンド 内容
cmd-ctrl-up / cmd-ctrl-down 行ごと移動
cmd-shift-D 行を複製
cmd-X 行の削除
ctrl-cmd-G 複数選択
cmd-B 現在開いているファイルから選ぶ
ctrl-0 ツリービューにフォーカスする
(ツリービュー上で)A ファイル追加
(ツリービュー上で)M ファイル名変更
(ツリービュー上で)Shift + a フォルダ追加

まとめ

今回は、Atomの見やすいテーマや便利機能パッケージ・ショートカットキー等を紹介しましたが、ここでは紹介しきれないほどの便利な機能がまだまだたくさんあります

エディターが使いやすければ使いやすいほどコーディングのストレスは減り、開発効率が数段アップすることは言うまでもありません。

パッケージやテーマをカスタマイズしていくことで、今まで以上に快適なコーディングライフを送ることができること間違いなしです!

徐々に慣れてきたら、この記事で紹介した以外にも、独自のカスタマイズを加えて快適なAtom生活を送りましょう!

自宅にいながら、プロのカウンセラーにキャリア相談!

テックキャンプ エンジニア転職は、未経験からのエンジニア・Webデザイナー転職を実現するスクールです。転職成功率は99.0%。※2019年8月末時点。学習完了後、当社の転職支援利用者の転職成功率

テックキャンプでは、オンラインでカウンセリングや学習サービスを提供しています。

オンラインでも、テックキャンプならではの「徹底したサポート」と「やりきらせる学習環境」は変わりません。オンラインでプログラミングを習得した方のインタビューはこちら

キャリアに悩んだら、ビデオ通話で無料オンラインカウンセリング(キャリア相談)を受けてみませんか?オンラインカウンセリングのやり方は簡単で、5分もあれば準備が完了します。

まずはカウンセリングから、ぜひご利用ください。

無料カウンセリングの詳細はこちら

この記事を書いた人