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

2015年7月21日 (2017年3月16日最終更新)
今注目のテキストエディタ「Atom」の使い方と便利機能まとめ

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

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

目次
  1. Atomとは
  2. Atomの基本情報
  3. 特長
  4. Atomの使い方
  5. ダウンロード~使い始めるまで
  6. 日本語メニューを表示するには
  7. 標準機能でできること
  8. 作業が捗る!パッケージ
  9. 新規パッケージのインストール方法
  10. インストール済みパッケージの有効化
  11. 入れておくと便利なパッケージ
  12. 使用にあたっての注意事項
  13. まとめ

Atomとは

Atom_top

Atomの基本情報

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

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

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

利用可能環境:Windows、MacOSX、Linux

特長

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

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

テキストエディタをお探しの方はこちらも合わせて御覧ください。       ・初心者にオススメ!フリーのテキストエディタ10選

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.CommunityPackages、CorePackages、DevelopmentPackagesのいずれかに結果が表示されるので、Enableボタンを押す(Disableになっていれば既に有効化されています)package_install2-1

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

  • autocomplete-plus:予測変換を表示します。(インストール済み)
    autocmp_plus

  • autocomplete-paths:予測変換にファイルやディレクトリも表示できるようになります。
    autocmp_paths

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

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

  • Emmet:(※2)が使えるようになります。
    emmet 上記画像のように、独自の省略記法で長いコードを作成することができ、作業の効率化を図ることができます。

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

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

まとめ

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

(※1)GitHub
バージョン管理システムGitを用いた、ソフトウェア開発プロジェクトの為の共有Webサービス。詳しくは公式サイトをご参照ください。

(※2)Emmet
主にHTMLやCSSの記述・編集をサポートするプラグイン。詳しくはこちらのを公式サイトご参照ください。

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

murase miho
murase miho
ライター プログラマー、システムエンジニア、デジタル複合機のテストリーダーを経て、現在はIT関係を中心に記事を執筆。Code部では技術記事のほか、仕事術のコラムも書いております。新しいことに挑戦したい皆さんが最初の一歩を踏み出すための、わかりやすい記事を心がけています。4歳の息子がプログラミングに興味を持ち始めたので、親としてどうしようか悩んでいるところです。

関連記事