今注目のテキストエディタ「Atom」の使い方と便利機能まとめ

      2016/11/07

Code部

『Atom』という名前を聞いたことはありますか? 2015年6月25日に正式版v.1.0.0がリリースされた、今注目のテキストエディターです。Web開発者が作業を効率化するための様々な機能を網羅し、拡張機能も数多く公開されている優れもの。

既に数十万人もの固定ユーザーがいるといいます。使い始めると奥が深い、Atomの基本を簡単にご紹介します。

またこちらもご参考にどうぞ!
初心者にオススメ!フリーのテキストエディタ10選

Atomとは

Atom_top

Atomの基本情報

AtomはGitHub(※1)の創業者Chris Wanstrath氏が「Web技術を用いて、Emacsのように自由にカスタマイズできる新世代のエディターを開発する」という思いから始まったオープンソースのエディターです。

開発が中断された時期がありましたが、2014年2月にパブリックベータ版、そして2015年6月にバージョン1.0が正式にリリースされました。Atomのダウンロード数は130万回、月間アクティブユーザー数は35万人に達しており、Atomのコミュニティにより660種類のテーマ、2090種類のパッケージが作られているとのこと。

今後の盛り上がりが期待されています。

利用可能環境:Windows、Mac OS X、Linux

特長

  • 無料で公開されているパッケージで機能追加が可能
  • 使いやすいユーザーインターフェース
  • 一つのウィンドウで単一のファイル、プロジェクト全体、複数のプロジェクトを開くことができる

特長は何といってもその拡張性の高さ。予測変換やキーバインドなど、Web開発者には嬉しい機能が実現されています。慣れるまでそれほど時間がかからず、使いやすさにも定評があります。

Atomの使い方

以下、Windows8.1を例にご説明します。

ダウンロード~使い始めるまで

1. 公式サイトからexeファイルをダウンロード
download0

2. exeファイルを実行するとインストール中の画面が出ます。
download1

3. インストールが終わればソフトが起動します。これで完了です。
download3

日本語メニューを表示するには

初期設定では英語の環境ですが、パッケージを使用して日本語のメニューに変更することができます。

1. File > Setting を選択する
setting1

2. Installを選ぶと検索画面へ。
setting2-1

3. 検索ボックスに「Japanese-menu」と入力してPackagesボタンを押す
setting2-2

4. メニューが日本語になりました。
setting3

標準機能でできること

・画面分割(ペイン分割):一つのファイルを画面分割して表示できます。縦にも横にも分割可能です。
image2_1

・折りたたみ:タグとタグの間を折りたたみ、見やすくします。
oritatami

・キーバインド:キーバインド(ショートカットキー)を設定できます。
keybind

・テーマの変更:初期設定では黒を基調としたモダンなスタイルですが、設定を変えて好きな色・スタイルに変更可能。テーマも無料で公開されており、パッケージと同じようにインストールして使用することができます。
setting4

作業が捗る!パッケージ

Atomの最大の特徴は、オープンソースでパッケージが数多く公開されていること。欲しいと思った機能はもう既に存在するかもしれません。

新規パッケージのインストール方法

1. File > Settings (ファイル > 個人設定)を選択

2. Installを選ぶと検索画面へ。検索ボックスに任意の文字を入力して検索

3. インストールしたいパッケージのPackagesボタンを押す
install_package1

インストール済みパッケージの有効化

過去に好評だったいくつかのパッケージはAtomに搭載されているので、設定変更(有効化)をすれば利用できます。

1. File > Settings (ファイル > 個人設定)を選択

2. Packageを選ぶと検索画面へ。検索ボックスに任意の文字を入力して検索

3. Community Packages、Core Packages、Development Packagesのいずれかに結果が表示されるので、Enableボタンを押す(Disableになっていれば既に有効化されています)
package_install2-1

入れておくと便利なパッケージ

autocomplete-plus: 予測変換を表示します。(インストール済み)
autocmp_plus
autocomplete-paths: 予測変換にファイルやディレクトリも表示できるようになります。

autocmp_paths
bracket-matcher: 対応する括弧を光らせたり、ジャンプしたりできます。

bracket-matcher
color-picker: カラーピッカーを表示します。

Colorpicker
Emmet: Emmet(※2)が使えるようになります。

emmet
上記画像のように、独自の省略記法で長いコードを作成することができ、作業の効率化を図ることができます。

使用にあたっての注意事項

パッケージの検索や巨大なファイルの使用など、操作によっては動作が重くなることがあるようなので注意が必要です。

まとめ

以上簡単にご紹介しました。正式版のリリースからまだ1か月あまりですが便利という声が多く、今後も安定性やパフォーマンスの向上、魅力的なパッケージやテーマの公開に大いに期待が持てます。まだ自分に合ったエディターを見つけられていない人、新しい多機能のエディターを探している人は、ぜひ一度試してみてください!

(※1)GitHub
バージョン管理システムGitを用いた、ソフトウェア開発プロジェクトの為の共有Webサービス。詳しくは公式サイトをご参照ください。
(※2)Emmet
主にHTMLやCSSの記述・編集をサポートするプラグイン。詳しくはこちらの公式サイトをご参照ください。

 

プログラミングを勉強している方によく読まれています!

 - テキストエディタ, プログラミング