職業別!ATOM便利パッケージ27選【アニメーション付紹介】

こんにちは!インストラクターの井上です。

テキストエディタのATOMってとっても便利ですよね。特に「パッケージ」で機能を自分好みにカスタマイズできる点が素晴らしい。ただ、いざATOMのパッケージを使おうと思っても、パッケージが山ほどあってどれを選んで良いのかわからないですよね。

そこで今回は、様々な立場にあわせて作業がはかどるパッケージを「計28種」ご紹介します!ぜひ使えそうなパッケージを導入し、快適なATOMライフをお送りください。

この記事の目次

パッケージのインストール

まずは、パッケージのインストール方法からです。そもそもATOMをインストールしていない方や、ATOMの基本を知りたい方は以下の記事を参考にしてください。

【ATOMエディタまとめ】インストール方法と使い方を紹介!
更新日 : 2019年4月22日

ATOMの日本語化については、以下の記事をご覧ください。

40秒で支度しな!「Atom」を日本語化する5ステップ
更新日 : 2019年4月12日

1つずつインストールする

パッケージを1つずつインストールする操作を説明しましょう。ここでは、例として「web-search」をインストールしてみましょう。

(1)「ファイル」をクリックし、「環境設定」をクリックします。

atom-pack01

(2)「インストール」をクリックし、「web-search」と入力して、「パッケージ」をクリックします。

atom-pack02

(3)「web-search」の「Install」をクリックします。

atom-pack03

インストールが完了すると、以下のように表示されます。

atom-pack04

一括インストールする

次は、複数のパッケージを一括インストールする方法を説明します。この手順のとおりに操作すると、この記事で紹介されているパッケージをまとめてインストールできますよ。まずは、インストールするパッケージ名を記載したテキストファイルを作成します。

(1)「ファイル」をクリックし、「新規ファイル」をクリックします。

atom-pack05

(2)以下の内容を入力します。

web-search
dotinstall-pane
color-picker
pigments
maximize-panes
tag
highlight-column
emmet
file-icons
atom-beautify
tabs-to-spaces
highlight-selected
git-plus
merge-conflicts
remote-edit
advanced-open-file
autocomplete-paths
minimap
selection-highlight
project-manager
imdone-atom
expose
split-diff
language-markdown
markdown-table-formatter
markdown-toc

※以下のパッケージは、このリストには含まれていません。必要な場合は個別にインストールしてください。

  • autocomplete系:使用する言語で必要なパッケージが異なります。


(3)「ファイル」をクリックし、「保存」をクリックして、任意のフォルダに保存します。

私は、「D:\ATOM\packages.txt」に保存しました。

次に、Windowsの場合はコマンドプロンプト(Mac OSの場合はターミナル、Ubuntuの場合は端末)を起動します。

atom-pack06

(1)以下のように入力し、Enterキーを押します。

apm install --packages-file (テキストファイル名)

私の場合は、(テキストファイル名)の部分は「D:\ATOM\packages.txt」と入力しました。

パッケージのインストールが始まります。多くのパッケージをインストールする場合は、とても時間がかかりますが、じっくり待ちましょう。パッケージのインストールが終わったら、念のためATOMを再起動しておきます。

プログラミング学習者向け

プログラミング学習者向けのおすすめパッケージから紹介していきましょう。

わからないことをすぐ検索できるパッケージ

web-search


ATOM上で選択した単語などをWeb検索できるパッケージです。ソースコード中に出てくるキーワードなどを検索する手間が省けます。

快適な学習環境を提供するパッケージ

dotinstall-pane


ATOMを開きながらプログラミング動画学習サイト「ドットインストール」を見られるパッケージです。横に並べられるだけでなく、ショートカットで動画の再生&一時停止を行えるため、学習がはかどります。

HTMLデザイナー向け

HTMLコードを書くことが仕事になっている、HTMLデザイナー向けのおすすめパッケージです。

望む色合いを一発で決められるパッケージ

color-picker


ATOMで「rgb(235,26,13)」や「#39b813」などのカラーコードを入力するときに、「カラーピッカー」というパネルを表示して視覚的に色が選べる機能を追加するパッケージです。色合いの細かな調整がすぐにできるので色選びがはかどります。

指定色が一目で分かるパッケージ

pigments


カラーコードに色をつけるパッケージです。どのタグにどんな色を指定したのかすぐに分かるので、デザインの編集がはかどります。

複数ファイル操作が快適になるパッケージ

maximize-panes


複数パネルを開いているときに、開いているパネルの大きさをサッと変更できるパッケージです。複数ファイルを同時編集する機会の多いデザイナーにとっては、とても便利です。

スムーズにコーディングできるパッケージ

tag


HTMLなどの閉じタグを自動的に入力するパッケージです。地味に面倒な作業や、タグの対応が分かりづらいといった心配もなくなるので安心です。

highlight-column

スクリーンショット_2015-12-09_16_41_47

字下げ(インデント)がわかりやすくなるパッケージです。いいコードは誰が見てもわかりやすいものです。字下げがしっかりしているか、していないかは見やすい、見やすくないに影響します。

HTMLを素早く書けるパッケージ

emmet

「Emmet」という省略記法をご存知でしょうか。

簡単なところでは、「#header」と入力すると、「<div id=”header”></div>」に変換され、「#header>h1」と入力すると、「<div id="header"><h1></h1></div>」に変換されるという便利な機能です。

emmetパッケージは、この「Emmet」を利用するためのパッケージです。試しに「#hedader>h1」と入力し、Ctrlキーを押しながらEキーを押してみてください。

以下のように表示されますね。

 

HTMLのコーディング作業が、とてもはかどります。

アイコンをカラフルにするパッケージ

file-icons

file-icon

デフォルトで入っている質素なデザインのアイコンに、色をつけるパッケージです。HTMLデザイナーはいろいろな形式のファイルを扱うことが多いので、色をつけてさらに見やすくなるでしょう。

人間は五感の約80%を視覚に頼っている生き物です。色が違うだけで、0.5秒くらいは時間短縮できるかもしれないですね。

プログラマー向け

プログラムを書くことが仕事になっている、プログラマー向けのおすすめパッケージです。

ソースコードを綺麗に保つパッケージ

atom-beautify

ファイルの種類に応じて、字下げを自動的に行うパッケージです。字下げがしっかり行われていなくてもソースが読みやすい状態になるので便利です。

tabs-to-spaces

タブ文字を半角スペースに置き換えるパッケージです。複数人で開発する際は特に、綺麗に読める状態のソースコードを維持することはとても大切です。

字下げを、スペースで行うかタブで行うかを決めて、統一した書き方で開発を進めましょう。

一瞬で簡易検索できるパッケージ

highlight-selected


選択したテキストが同じファイル内にある時に、それらをハイライトするパッケージです。わざわざ検索しなくても、同じ命令が画面内のどこにあるかが、すぐに分かるので便利です。

ATOM上でGitが使えるパッケージ

git-plus


ATOM上でバージョン管理システムであるGitを扱うためのパッケージです。ATOMはGitHub製のエディタでもあるので、gti-plusは鉄板のパッケージと言えるでしょう。

merge-conflicts


Gitを使用して編集箇所の競合状態のコンフリクトが発生したときに、その修正をサポートするパッケージです。git-plusと合わせて入れておきたいパッケージです。

サーバ上のファイルを編集できるパッケージ

remote-edit

ATOMでサーバ上のファイルを編集するためのパッケージです。初期設定で接続先のサーバを指定しておけば、サーバ上のファイルを直接編集できます。毎回、手元のPCでファイルを保存してから、サーバにアップロードするという手順を踏まずに済みます。

対象ファイルをすぐに開けるパッケージ

advanced-open-file


ファイルのフルパスを入力するだけで、ATOMでファイルを開けるパッケージです。実は、Windows標準のファイルを選択する画面でも同じ機能を備えているので、非常に当たり前のように感じますが…。

実はadvanced-open-fileでは、「D:/ATOM/packages.txt」(区切り文字がスラッシュ)でも、ファイルを開ける優れものなのです。このちょっとした違いにストレスを感じるあなたに、超おすすめのパッケージです!

ファイルの場所を補完してくれるパッケージ

autocomplete-paths


ソースコードにファイルのパスを入力する際、パスを補間するパッケージです。入力の手間が省けるだけでなく、綴りのミスも防げますよ。

言語別に入力補完してくれるパッケージ

autocomplete系

言語ごとの入力補完用のパッケージです。入力補完は、次に入力できる物を予測して、その候補を表示する機能です。例えば、Rubyのautocompleteは次のURLになります。

ソースの全体図を表示するパッケージ

minimap

スクリーンショット_2015-12-09_16_45_54

ソースの全体図を画面内に表示してくれるパッケージです。今自分がソースのどの辺りを書いているのか把握でき、迷子になることを防ぎます。

選択した単語をハイライトするパッケージ

selection-highlight

atom-1

単語をダブルクリックすることで、選択した単語がハイライトされるパッケージです。また、ステータスバーに単語の出現回数を表示する機能も付いています。

プロジェクトマネージャー向け

プロジェクトを管理する、プロジェクトマネージャ向けのおすすめパッケージです。

ファイル群をプロジェクト単位で扱うパッケージ

project-manager


複数の「プロジェクト」を登録して、スムーズに切り替えられるパッケージです。ATOMでもプロジェクトの管理をスムーズに行えるようになります。

ATOM上でタスク管理ができるパッケージ

imdone-atom


プロジェクトごとにカンバンという方式でタスク管理できる方法を追加するパッケージです。自分ひとりのタスク管理にも便利です。

ファイル間の移動をスムーズにしてくれるパッケージ

expose


MacのExposéのように、ATOM上で現在開いているファイルの一覧を表示するパッケージです。複数のファイルを開いて作業をする場合でも、スムーズに編集するファイルを切り替えられます。

変更箇所を比較しやすくしてくれるパッケージ

split-diff


パネル間で、ファイルの差分を抽出して、色分けして表示するパッケージ。レビューでファイルの差分などを見たいときに有用でしょう。

Markdownが扱えるパッケージ

ATOMは標準でMarkdownのプレビューに対応していて、それだけでも便利ですが、パッケージを追加してさらに便利にしてみましょう。ATOMでMarkdownを編集するときのおすすめプラグインは、以下の記事でも紹介しています。

ATOMエディタでMarkdown! HTMLやPDFの出力方法も解説
更新日 : 2019年5月28日

language-markdown

Markdown記法で文書を簡単に書けるパッケージです。アプリの仕様書など、Markdown記法でドキュメントを作成するときにはかどります。

Markdownのテーブルを綺麗にするパッケージ

markdown-table-formatter

Markdownのテーブルを綺麗に見えるようにしてくれるパッケージです。Markdownを使う際に入れておくと見栄えが良くなります。

Markdownの目次自動生成パッケージ

markdown-toc


目次(TOC:Table of Contents)を自動生成するパッケージです。長い文章をMarkdownで記述する際に簡単に目次生成ができるので便利です。

効率よくプログラミング学習を進めるならスクールへ

ATOMはパッケージが豊富なので、駆使すればかなりプログラミングのしやすい環境作りはできると思います。

プログラミング自体をもっと効率よく学習したい!
一度独学してみたけど、このままでは仕事にできなさそうな気がして挫折しかけている・・・

そんなあなたは、プログラミングスクールで経験者から教わりながら学んでいくのがおすすめです。

スクールに通うとお金がかかってしまうのはデメリットですが、エンジニアの平均給与は右肩上がりかつ、今後需要が足りなくなる職種のため、市場価値は必然と上がっていくので、知識に先行投資をすると考えてスクールに通うのがもっとも効率よく習得する方法です。

特に弊社「侍エンジニア塾」では、あなたの目標から逆算したオリジナルのカリキュラムと最適な講師によるマンツーマンレッスンを軸に完全個別型の実践的なプログラミング学習指導に取り組んでいます。

集団型のスクールではどうしても些細な個別のニーズには対応できない部分まで対応するため、無駄なくあなたに最適なスキルだけを学ぶことが可能です。

無料体験レッスンでは、あなたの現状やどんな理想を目指しているのかを聞かせていただいた上で、それを叶えるキャリアプランや学ぶべき言語とスキル、その学習方法と手順をお伝えするため、「これを学べば理想に確実に近づける」と自信を持ってプログラミング学習に取り組めるようになる内容となっています。

下記のカレンダーより無料体験のご予約は承っております。オンラインでも受講可能なため全国各地よりお受けいただけます。プログラミングで人生を切り拓くための一歩目を共に歩み始めましょう。

まとめ

この記事では、様々な種類のATOMプラグインを紹介してきました。

PCで作業をする人の「テキストエディタ」は、料理人で言うところの「包丁」、侍で言うところの「刀」のようなものです。テキストエディタの使い勝手もこだわりを持っていきたいですね。

この機会に1つでも導入して、ATOMの使い勝手をあげてみてください。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

侍ブログ編集部

侍ブログ編集部

侍エンジニア塾は「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。
サービスページはこちら
ツイッターはこちら
フェイスブックはこちら

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説