http://www.sejuku.net/blog/wp-content/themes/voice_child/images/samurai_logo.png 侍エンジニア塾が運営するプログラミング入門者向け学習情報サイト

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

井上 慎也
書いた人 井上 慎也


侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

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

テキストエディタのATOMってとっても便利ですよね。

特に「パッケージ」で機能を自分好みにカスタマイズできる点が素晴らしい。

ただ、いざATOMのパッケージを使おうと思っても、パッケージが山ほどあってどれを選んで良いのかわからないですよね。

そこで今回は、様々な立場にあわせて作業がはかどるパッケージを「計28種」ご紹介します!

ぜひ使えそうなパッケージを導入し、快適なATOMライフをお送りください。

この記事の目次

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

まずは、パッケージのインストール方法からです。

そもそもATOMをインストールしていない方や、ATOMの基本を知りたい方は以下の記事を参考にしてください。

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

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

パッケージを1つずつインストールする操作を説明しましょう。

ここでは、例として「web-search」をインストールしてみましょう。

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

atom-pack01

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

atom-pack02

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

atom-pack03

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

atom-pack04

一括インストールする

次は、複数のパッケージを一括インストールする方法を説明します。

この手順のとおりに操作すると、この記事で紹介されているパッケージをまとめてインストールできますよ。

まずは、インストールするパッケージ名を記載したテキストファイルを作成します。

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

atom-pack05

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

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

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

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

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

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

atom-pack06

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

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

パッケージのインストールが始まります。

多くのパッケージをインストールする場合は、とても時間がかかりますが、じっくり待ちましょう。

パッケージのインストールが終わったら、念のためATOMを再起動しておきます。

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

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

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

web-search


URL:https://atom.io/packages/web-search

ATOM上で選択した単語などをWeb検索できるパッケージです。

ソースコード中に出てくるキーワードなどを検索する手間が省けます。

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

dotinstall-pane


URL:https://atom.io/packages/dotinstall-pane

ATOMを開きながらプログラミング動画学習サイト「ドットインストール」を見られるパッケージです。

横に並べられるだけでなく、ショートカットで動画の再生&一時停止を行えるため、学習がはかどります。

HTMLデザイナー向け

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

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

color-picker


URL:https://atom.io/packages/color-picker

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

色合いの細かな調整がすぐにできるので色選びがはかどります。

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

pigments


URL:https://atom.io/packages/pigments

カラーコードに色をつけるパッケージです。

どのタグにどんな色を指定したのかすぐに分かるので、デザインの編集がはかどります。

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

maximize-panes


URL:https://atom.io/packages/maximize-panes

複数パネルを開いているときに、開いているパネルの大きさをサッと変更できるパッケージです。

複数ファイルを同時編集する機会の多いデザイナーにとっては、とても便利です。

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

tag


URL:https://atom.io/packages/tag

HTMLなどの閉じタグを自動的に入力するパッケージです。

地味に面倒な作業や、タグの対応が分かりづらいといった心配もなくなるので安心です。

highlight-column

スクリーンショット_2015-12-09_16_41_47
URL:https://atom.io/packages/highlight-column

字下げ(インデント)がわかりやすくなるパッケージです。

いいコードは誰が見てもわかりやすいものです。

字下げがしっかりしているか、していないかは見やすい、見やすくないに影響します。

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

emmet

URL:https://atom.io/packages/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
URL:https://atom.io/packages/file-icons

デフォルトで入っている質素なデザインのアイコンに、色をつけるパッケージです。

HTMLデザイナーはいろいろな形式のファイルを扱うことが多いので、色をつけてさらに見やすくなるでしょう。

人間は五感の約80%を視覚に頼っている生き物です。

色が違うだけで、0.5秒くらいは時間短縮できるかもしれないですね。

プログラマー向け

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

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

atom-beautify

URL:https://atom.io/packages/atom-beautify

ファイルの種類に応じて、字下げを自動的に行うパッケージです。

字下げがしっかり行われていなくてもソースが読みやすい状態になるので便利です。

tabs-to-spaces

URL:https://atom.io/packages/tabs-to-spaces

タブ文字を半角スペースに置き換えるパッケージです。

複数人で開発する際は特に、綺麗に読める状態のソースコードを維持することはとても大切です。

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

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

highlight-selected


URL:https://atom.io/packages/highlight-selected

選択したテキストが同じファイル内にある時に、それらをハイライトするパッケージです。

わざわざ検索しなくても、同じ命令が画面内のどこにあるかが、すぐに分かるので便利です。

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

git-plus


URL:https://atom.io/packages/git-plus

ATOM上でバージョン管理システムであるGitを扱うためのパッケージです。

ATOMはGitHub製のエディタでもあるので、gti-plusは鉄板のパッケージと言えるでしょう。

merge-conflicts


URL:https://atom.io/packages/merge-conflicts

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

git-plusと合わせて入れておきたいパッケージです。

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

remote-edit

URL:https://atom.io/packages/remote-edit

ATOMでサーバ上のファイルを編集するためのパッケージです。

初期設定で接続先のサーバを指定しておけば、サーバ上のファイルを直接編集できます。

毎回、手元のPCでファイルを保存してから、サーバにアップロードするという手順を踏まずに済みます。

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

advanced-open-file


URL:https://atom.io/packages/advanced-open-file

ファイルのフルパスを入力するだけで、ATOMでファイルを開けるパッケージです。

実は、Windows標準のファイルを選択する画面でも同じ機能を備えているので、非常に当たり前のように感じますが…。

実はadvanced-open-fileでは、「D:/ATOM/packages.txt」(区切り文字がスラッシュ)でも、ファイルを開ける優れものなのです。

このちょっとした違いにストレスを感じるあなたに、超おすすめのパッケージです!

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

autocomplete-paths


URL:https://atom.io/packages/autocomplete-paths

ソースコードにファイルのパスを入力する際、パスを補間するパッケージです。

入力の手間が省けるだけでなく、綴りのミスも防げますよ。

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

autocomplete系

URL:https://atom.io/packages/search?q=autocomplete

言語ごとの入力補完用のパッケージです。

入力補完は、次に入力できる物を予測して、その候補を表示する機能です。

例えば、Rubyのautocompleteは次のURLになります。

URL:https://atom.io/packages/autocomplete-ruby

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

minimap

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

ソースの全体図を画面内に表示してくれるパッケージです。

今自分がソースのどの辺りを書いているのか把握でき、迷子になることを防ぎます。

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

selection-highlight

atom-1

単語をダブルクリックすることで、選択した単語がハイライトされるパッケージです。

また、ステータスバーに単語の出現回数を表示する機能も付いています。

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

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

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

project-manager


URL:https://atom.io/packages/project-manager

複数の「プロジェクト」を登録して、スムーズに切り替えられるパッケージです。

ATOMでもプロジェクトの管理をスムーズに行えるようになります。

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

imdone-atom


URL:https://atom.io/packages/imdone-atom

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

自分ひとりのタスク管理にも便利です。

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

expose


URL:https://atom.io/packages/expose

MacのExposéのように、ATOM上で現在開いているファイルの一覧を表示するパッケージです。

複数のファイルを開いて作業をする場合でも、スムーズに編集するファイルを切り替えられます。

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

split-diff


URL:https://atom.io/packages/split-diff

パネル間で、ファイルの差分を抽出して、色分けして表示するパッケージ。

レビューでファイルの差分などを見たいときに有用でしょう。

Markdownが扱えるパッケージ

ATOMは標準でMarkdownのプレビューに対応していて、それだけでも便利ですが、パッケージを追加してさらに便利にしてみましょう。

ATOMでMarkdownを編集するときのおすすめプラグインは、以下の記事でも紹介しています。

language-markdown

URL:https://atom.io/packages/language-markdown

Markdown記法で文書を簡単に書けるパッケージです。

アプリの仕様書など、Markdown記法でドキュメントを作成するときにはかどります。

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

markdown-table-formatter

URL:https://atom.io/packages/markdown-table-formatter

Markdownのテーブルを綺麗に見えるようにしてくれるパッケージです。

Markdownを使う際に入れておくと見栄えが良くなります。

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

markdown-toc


URL:https://atom.io/packages/markdown-toc

目次(TOC:Table of Contents)を自動生成するパッケージです。

長い文章をMarkdownで記述する際に簡単に目次生成ができるので便利です。

まとめ

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

PCで作業をする人の「テキストエディタ」は、料理人で言うところの「包丁」、侍で言うところの「刀」のようなものです。

テキストエディタの使い勝手もこだわりを持っていきたいですね。

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


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


最短でプログラミングを習得したい方へ

元々ITリテラシーのある方やプログラムの学び方がわかっている方は独学で習得することも可能でしょう。

ただし、実際の学習期間中はつまづいている時間がほとんどです。

「もう挫折したくない」
「本業と両立しながら、好きな時間で自分のペースで勉強を続けていきたい。」
「自分だけのカリキュラムで効率的に勉強したい」

そんな方はお気軽に侍エンジニア塾までご相談ください。

弊社では、

  • プログラミング基礎学習
  • オリジナルアプリ開発
  • 仕事獲得

までをひと通り学習できます。

まずは無料体験レッスンで、弊社のコンサルタントと一緒にあなた専用の学習方法やカリキュラムを考えてみませんか?

挫折しない学び方や、通常1000時間以上かかる学習時間を1/3にする方法などより具体的なアドバイスもさせていただいています。

詳しくは下の画像をクリックして弊社サービス内容をご確認ください。

cta1

非常識な結果を出した卒業生

活躍する現役エンジニア

人気記事セレクション

LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

井上 慎也

井上 慎也

侍エンジニア塾のインストラクター。フリーでWEB制作の受託や自身の事業の傍ら、侍ではWEBプログラミング方法の指導やプログラミング学習コミュニティの運用を行っている。
好きなショートカットキーは、command + w 。愛機はMac Book Pro。ブラウザのタブを大量に開きがち。