- 更新日: 2022年08月09日
- 公開日: 2015年07月21日
今注目のテキストエディタ「Atom」の使い方と便利機能まとめ
『Atom』というエディタの名前を聞いたことはありますか？
登場したのは2015年と比較的新しいエディタながら、Web開発者が作業を効率化するための様々な機能を網羅している優れものです。拡張機能が数多く公開されたり、人気の拡張機能が標準機能として加わったりと、今も進化しています。
使い始めると奥が深い、Atomの基本を簡単にご紹介します。
※記事執筆2017年7月18日時点の最新バージョン1.19.0 Beta4の画像を使用しています。
Atomとは
まずはAtomの基本情報や特徴などを紹介していきます。
Atomの基本情報
公式サイトはこちら
AtomはGitHub（※1）の創業者Chris Wanstrath氏が「Web技術を用いて、Emacsのように自由にカスタマイズできる新世代のエディタを開発する」という思いから始まったオープンソースのエディタです。
（※1）GitHub バージョン管理システムGitを用いた、ソフトウェア開発プロジェクトの為の共有Webサービス。詳しくは公式サイトをご参照ください。
開発が中断された時期がありましたが、2014年2月にパブリックベータ版、そして2015年6月にバージョン1.0が正式にリリースされます。正式版リリースから数か月で月間アクティブユーザー100万人を突破しました。
2017年7月時点の最新バージョンは1.19.0（Beta版が複数あります）。Atomのコミュニティにより2200あまりのテーマ、6500弱のパッケージが作られています。
利用可能環境：Windows、Mac、Linux
Atomの特長
- タブ型で、使いやすいユーザーインターフェース
- 無料で公開されているパッケージで機能追加が可能
- 一つのウィンドウで単一のファイル、プロジェクト全体、複数のプロジェクトを開くことができる
最大の特長はなんといってもその拡張性の高さ。一部の文字を入れるとその後の変換予測一覧を表示する「予測変換」や「キーバインド（ショートカット）」など、Web開発者には嬉しい機能が実現されています。
Atomの使い方
ダウンロードから起動までは、とても簡単です。
Windows版ダウンロード～起動まで
※Windows 10の画像です
公式サイトからexeファイルをダウンロード
exeファイルを実行するとインストール中の画面が表示されます。（この画面のまましばらくかかります。）
インストールが終わればソフトが起動します。
Mac版ダウンロード～起動まで
※macOS Sierra の画像です
公式サイトからファイルをダウンロード
ファイルを実行するとソフトが起動します。
日本語メニューを表示する方法
初期設定では英語の環境ですが、パッケージを使用して日本語のメニューに変更することができます。（以下Macの例です。Windows版は各メニューの名称が異なります）
メニューの Atom > Preferences（※環境設定のこと）を選択します。
設定画面が表示されます。+Installを選択します。
右側の画面が切り替わります。検索ボックスに「Japanese-menu」と入力して「Packages」ボタンを押すと検索結果が表示されます。検索結果の「Japanese-menu」の枠内の「Install」ボタンを押します。
メニューが日本語になりました。
Atomの文字化け対策
日本語を含む既存のファイルをAtomで開くと、よくわからない文字が出る、いわゆる文字化けが発生することがあります。この場合は文字コードを変更します。
画面右下に、文字コードを変更するエリアがあるので、ここを選択します。
文字コードの一覧が表示されるので、ここで文字コードを変更します。Windowsの場合、「Shift JIS」という文字コードが文字化けの原因となっているパターンがまず考えられるので、「Japanese(Shift JIS)」から試していきましょう。
標準設定の文字コードを変更するには、Atom > 環境設定（Preferences）で表示される「Settings」の画面で、「File Encoding」を変更します。
Atomの標準機能でできること
ペイン分割（画面分割）
一つのファイルを画面分割して表示できます。縦にも横にも分割可能です。
タグの折りたたみ
タグとタグの間を折りたたみ、見やすくします。
キーバインド（ショートカットキー）
キーバインド（ショートカットキー）を設定できます。
テーマの変更
初期設定では画面は黒を基調としたモダンなスタイルですが、設定を変えて好きな色・スタイルに変更可能。
テーマも無料で公開されており、パッケージと同じようにインストールして使用することができます。
作業が捗るパッケージ
Atomの最大の特徴は、オープンソースでパッケージが数多く公開されていること。欲しいと思った機能がパッケージで実現されていないか探してみてください。
※以下、Mac版でご説明します
新規パッケージのインストール方法
1.Atom > 環境設定(Preference) を選択します
2.インストール（+Install）を選ぶと検索画面へ。検索ボックスに任意の文字を入力して検索します
3.インストールしたいパッケージのInstallボタンを押します
インストール済みパッケージの有効化
過去に好評だったいくつかのパッケージはAtomに搭載されているので、設定画面で有効化をすれば利用できます。
1.Atom > 環境設定(Preference) を選択します
2.パッケージ（Package）を選ぶと検索画面へ。検索ボックスに任意の文字を入力して検索します
3.「Community Packages」、「Core Packages」、「Development Packages」のいずれかの欄に結果が表示されます。「有効にする（Enable）」ボタンを押します。※「有効にする（Enable）」が「無効にする（Disable）」になっていれば既に有効化されています
便利なパッケージ
autocomplete-plus
予測変換を表示します。
このパッケージはインストール済みで、有効化されています。予測変換の機能は他に
- autocomplete-css：CSSの予測変換
- autocomplete-html：HTMLの予測変換
などがインストール済みです。
bracket-matcher
対応する括弧を光らせたり、ジャンプしたりできます。
color-picker
カラーピッカーを表示します。
Emmet
Emmetが使えるようになります。
Emmetとは主にHTMLやCSSの記述・編集をサポートするプラグインおよび省略記法です。 たとえば上記画像は「!」を入力後にTabキーを押した後の画面です。<!DOCTYPE html>～