【Atom】開発が10倍捗る!おすすめ設定・パッケージ・ショートカットをご紹介

突然ですが、みなさんはエディターに何を使っているでしょうか。

実際に長いこと同じエディターを使っているけど、特にカスタマイズをしていないという方は多いのではないでしょうか?
今回は、使いやすいと評判のAtomをご紹介します。

出典:https://atom.io/

Atomを実際に使用してみた感想としては、

 ・テーマの種類が豊富で、見やすい画面にすることで目が疲れにくい

 ・インストールがとても簡単で、カスタマイズ性が高い

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

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

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

Atomインストール方法

・ダウンロードする

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

公式ページ:Atom
Atom_🔊

 

・アプリケーションを移動

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

スクリーンショット_2016-08-18_7_35_46

 

・起動させる

アプリケーションの一覧画面に緑色のアイコンが表示されたら、クリックして起動しましょう!
スクリーンショット_2016_08_18_7_54

 

テーマを変更する

スクリーンショット 2016-08-18 8.13.48

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

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

 

テーマの変更方法

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

スクリーンショット_2016-08-18_8_21_54

 

 

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

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

スクリーンショット 2016-08-18 8.29.18

 

 

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

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

スクリーンショット_2016-08-18_9_12_04

 

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

スクリーンショット_2016-08-18_9_17_09

 

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

スクリーンショット_2016-08-18_9_17_21

 

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

スクリーンショット_2016-08-18_9_23_20

 

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

スクリーンショット 2016-08-18 9.25.38

 

おすすめのテーマをご紹介

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

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

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

 

<Material>

スクリーンショット 2016-08-18 14.50.19

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

変更方法

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

 

<Seti>

スクリーンショット 2016-08-18 15.03.44

UI: seti-ui
Syntax: seti-syntax

変更方法

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

 

<Native>

スクリーンショット 2016-08-18 15.11.18

UI: native-ui
Syntax: monokai

変更方法

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

 

<Slack>

スクリーンショット 2016-08-18 15.15.24

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

変更方法

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

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

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

 

パッケージをインストールする

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

パッケージはテーマと同じ方法でインストールできます。では、おすすめパッケージをご紹介します。

 

<file-icons>

スクリーンショット 2016-08-18 15.26.05

 

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

 

<project-manager>

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

 

スクリーンショット_2016-08-19_0_53_37

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

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

 

スクリーンショット_2016-08-19_0_57_19

・登録名を入力し、登録完了です。

 

スクリーンショット_2016-08-19_1_00_32

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

 

<highlight-selected>

スクリーンショット_2016-08-19_1_05_18

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

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

 

<show-ideographic-space>

スクリーンショット 2016-08-19 1.13.43

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

 

<autocomplete-plus>

スクリーンショット 2016-08-19 7.45.08

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

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

 

<autocomplete-paths>

スクリーンショット 2016-08-19 7.53.22

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

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

 

<autocomplete-snippets>

スクリーンショット 2016-08-19 8.07.00

スクリーンショット 2016-08-19 8.07.09

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

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

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

 

<emmet>

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

スクリーンショット 2016-08-19 8.52.34

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

 

スクリーンショット 2016-08-19 8.52.54

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

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

 

<bracket-matcher>

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

スクリーンショット 2016-08-19 9.01.58

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

 

スクリーンショット 2016-08-19 8.52.54

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

 

<open recent>

スクリーンショット 2016-08-19 9.07.04

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

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

職業別!ATOMエディタの作業が超捗る便利パッケージ24選 | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト

 

【超おすすめ!!】Atomのパッケージ、テーマ、キーバインディング、設定を紹介してみる(※随時更新) – Qiita

 

おすすめショートカットの紹介

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」の日本語化と便利機能 – for Mac

【初心者向け】高機能テキストエディタ Vim入門【設定など】

【保存版】サクラエディタの利用方法&おすすめ設定を徹底解説

プログラミングを始める方必見!Sublime Text3のおすすめ設定

 

まとめ

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

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

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

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

 

TECH::CAMP EXPERTについて

TECH::CAMP EXPERTは最短2ヶ月でプロのエンジニアになれる即戦力エンジニア育成プログラムです。

即戦力レベルのエンジニアになれる教育コンテンツから就職先の支援まで、どこよりも最高品質の教育体制であなたのエンジニアとしてのキャリアをお約束します。

対象は完全未経験者なので、異業種からの転職や全く違う職種からのキャリアチェンジが可能です。

今なら14日間全額返金保証付き!未経験から即戦力エンジニアになりたい方はこちら

expert_bannar_lg5

naokishizuka naokishizukaが書きました
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

プログラミングをもっと勉強してみませんか?

当メディアを運営しているプログラミングスクールTECH::CAMPの
お試しカリキュラムが、今なら無料でご覧いただけます!



    メールマガジン登録でTECH NOTEの最新情報とカリキュラムを受けることができます

SNSでもご購読できます。

  • カテゴリー
  • このエントリーをはてなブックマークに追加
    記事をシェア→

    満足度98%!無料プログラミング体験会!!×

    卒業生6000人以上のプログラミングスクール TECH::CAMPの説明会に参加!