【すぐわかる！】Atomエディタのインストールと日本語化、便利な使い方

Atomとは、使いやすいテキストエディタのひとつだ。プログラミングをするのに便利でエンジニアから絶大な支持を得ている高性能エディタになっている。

このページでは、Atomをはじめて使う方にインストール方法、日本語化、簡単な使い方についてまとめてご紹介した。参考にしていただければと思う。

Atomとは?

Atom(アトム)とはソフトウェア開発のためのウェブサービス「GitHub」で開発され、2015年6月に正式バージョン1.0.0がリリースされたばかりの比較的新しいテキストエディタだ。

エディタとしての基本的な機能の充実度もさることながら、「パッケージ」と呼ばれる拡張機能を追加することで、それぞれのユーザーが使いやすい環境を作り上げることができるというのも魅力的のひとつと言えるだろう。

事実、Atomの登場以来ユーザー数は増え続けており、既に月間アクティブユーザー数は100万人を突破している。エンジニアからも絶大な支持を得ているAtomのインストール方法や基本的な使い方を紹介していこう。

Atomの入手方法

Atomのインストーラは公式サイトから入手可能だ。AtomはWindows、MacOSX、Linuxに対応しているが、今回はWindows10にインストールしてみよう。「Download Windows Installer」ボタンをクリックするとダウンロードが開始される。

Atom

出典：Atom

Atomのインストール

インストール方法は簡単

インストーラのダウンロードが終了したら、インストーラを起動してインストールしよう。

このような画面が表示されている間にインストールが行われている。

インストールが終了するとAtomが自動的に起動される。

Atomの日本語化とパッケージのインストール方法

Atomの画面が表示されて気づいた方もいるかと思うが、そう、Atomはデフォルトでは英語での表示になっている。Atomを日本語化するには、冒頭でも話した「パッケージ」という拡張機能をインストールする必要がある。それでは、早速Atomを日本語化してみよう。

(1)画面左上のメニューから[File]→[Settings]を選択する

(2)画面右側に「Settings」タブが表示される

(3)｢Settings｣タブの[+Install]を選択する

検索対象パッケージの入力欄が表示される

(4)入力欄に「Japanese-menu」と入力

「Packages」ボタンをクリックすると検索が開始される。

(5)Install

検索結果に表示された「Japanese-menu」パッケージの「Install」ボタンをクリックする。

(6)インストール終了

インストールが終了すると、メニューバーとコンテキストメニューの表示が日本語で表示される。 

この例では日本語化パッケージをインストールしたが、他のパッケージをインストールする場合でも同じようにパッケージ検索からインストールすることができる。

なお、インストールしたパッケージを使わない場合は、この画面の「無効にする」でパッケージを保持したまま無効に、「アンインストール」でパッケージをアンインストールすることができるので、覚えておいてほしい。

Atomでのフォルダとプロジェクトフォルダの違い

Atomには「フォルダ」と「プロジェクトフォルダ」という2種類のファイル管理方法がある。いずれもフォルダに含まれているサブフォルダやファイルを画面左にツリー形式で表示する便利な機能であるが、この違いは何であろうか。

Atomのフォルダ説明

まずは「フォルダ」について説明しよう。たとえば次のように「prod」と「test」という2つのフォルダがあるとして、Atomからフォルダを開いてみる。

(1)画面左上のメニュー

画面左上のメニューから[ファイル(F)]→[フォルダを開く]を選択する。 

(2)Open Folder

「Open Folder」ダイアログで「prod」を選択し、「フォルダーの選択」ボタンをクリックする。

(3)選択したフォルダ以下のファイルが表示される

(4)フィルダを開く

この状態で、もう一度メニューから[ファイル(F)]→[フォルダを開く]を選択し、今度は「Open Folder」ダイアログで「test」を選択してみよう。

(5)新しいウィンドウが開く

すると、新しいウィンドウが開いて「test」フォルダが表示される。

このように「フォルダの追加」は「1つのウィンドウに、指定した1フォルダの情報を表示する」という管理方法なのである。

Atomのプロジェクトフォルダ設定

それではプロジェクトフォルダはどうだろう。先ほど開いた「prod」フォルダのウィンドウで試してみよう。

(1)プロジェクトフォルダを追加

画面左上のメニューから[ファイル(F)]→[プロジェクトフォルダを追加]を選択する。

(2)フォルダーを選択

「Open Folder」ダイアログで「test」を選択し、「フォルダーの選択」ボタンをクリックする。

(3)両方が表示される

すると、今度は画面左のツリービューに「prod」と「test」の両方のフォルダが表示された。

このように、プロジェクトフォルダとは、「1つのウィンドウに、複数のフォルダの情報を1つのプロジェクトとして表示する」という管理方法である。

別々の場所に分かれているファイルをひとつにして管理したい場合に使いやすい機能なので、ぜひ覚えておいてほしい。

Atomの文字化け対策

Atomを使っていると、以前に作成したファイルの日本語が文字化けして表示されてしまうことがよくある。どうしても日本語は新しいエディタと相性が悪いものだ。

文字にはそれぞれ「文字コード」と呼ばれるコードがあり、コードが一致しないとこのように表示されてしまう。ここではAtomで文字化けしたときの対処法をいくつか紹介しよう。

結論的には、UTF-8だと大体表示されるが、他だと結構文字化けるという話だ。

文字コードを切り替える

画面右下に文字コードが表示されているが、ここから文字コードを切り替えることができる。

(1)画面右下の文字コードをクリックする

ここでは「UTF-8」をクリックしよう。

(2)文字コード一覧が表示される

文字コード一覧が表示されるので、切り替えたい文字コードを選択する。Windowsの場合は大抵「Shift JIS」なので「Japanese(Shift JIS)」を選択しよう。

(3)直る

正しい文字コードが選択されると、このように日本語が表示される。まだ文字化けしている場合は切り替えた文字コードが誤っているので、正しい文字コードを選択しよう。

デフォルト文字コードを変更する

先ほど紹介した方法だと、毎回文字コードを指定しなければならず手間がかかってしまう。また、一度別のファイルを開いて、再びファイルを開くとまた文字化けしてしまうのだ。

これはデフォルトに設定されている文字コードが開こうとしているファイルの文字コードと合わないからだ。ではいっそのこと、デフォルト文字コードを変更すれば良い。

基本的にはUTF-8で新しいものは作っていくほうがいいだろうが、サーバなどの関係上どうしようもないことはあるものだ。

(1)環境設定

画面左上のメニューから[ファイル(F)]→[環境設定(T)]を選択する。

(2)コア設定

[コア設定]の「ファイルエンコーディング」からデフォルトに設定したい文字コードを選択する。この例では「shiftjis」を選択した。

(3)文字コードが切り替わる

ファイルを開くと、文字コードの切り替えを行わずに日本語が正しく表示されている。

文字コードを自動判別する

デフォルトの文字コードを指定してしまうと切り替えがなく楽ではあるが、プログラマやウェブデザイナは様々な文字コードのファイルを扱うこともあり、文字コードが合わないと結局毎回文字コードを切り替える必要がある。

そこで、ファイルを開くたびに文字コードを自動判別してくれるパッケージ「auto-encoding」をインストールしてみよう。

(1)環境設定

画面左上のメニューから[ファイル(F)]→[環境設定(T)]を選択する。

(2) auto-encodingをインストール

｢Settings｣タブの[+インストール]から、検索対象パッケージの入力欄に「auto-encoding」と入力し、「Packages」ボタンをクリックして検索する。検索結果が出たら「インストール」ボタンでインストールしよう。

(3)文字コードが自動的に判別される

ファイルを開いてみると、日本語が正しく表示されている。異なる文字コードで書かれたファイルを開いても、ファイルの文字コードで表示される。画面右下に表示されている文字コードで確認することができるだろう。

Atomの便利な機能

それでは最後にAtomの便利な機能をいくつか紹介しておこう。

オートコンプリート

入力中のHTMLタグなどの入力候補を表示してくれる。この機能は「autocomplete-plus」というパッケージの機能で、標準でインストールされている。

パスのオートコンプリート

HTMLファイルを作成する際にファイルパスを指定することが多いが、このパッケージはファイルパス入力時に相対ファイルパスを入力補完してくれる。

標準ではないのでインストールが必要だ。

｢Settings｣タブの[+インストール]で「autocomplete-paths」のキーワードを指定して検索、インストールしよう。

対応タグ・括弧ハイライト

HTMLタグの開始タグと終了タグや、対応する括弧をアンダーラインでハイライト表示できる。

折りたたみ機能

HTMLタグを折りたたみすることができる。行番号にマウスカーソルを合わせると「ｖ」マークが表示されるので、クリックすると折り畳み。

折りたたんだコードを戻すには行番号の「＞」マークをクリックするともとに戻る。

ペイン分割

開いているファイルを上下左右に分割表示できる。ここでは右クリックメニューから「ペイン分割・複製→」を選択してみよう。

指定した方向にペインが分割表示された。

キーバインド

[ファイル(F)]→[環境設定(T)]の「キーバインド」から、よく使う機能をショートカットキーとして設定することができる。

テーマ変更

[ファイル(F)]→[環境設定(T)]から「テーマ」を選択し、お好みのテーマに変更することができる。画面表示のテーマを変更することができる。見やすいテーマを選択するといいだろう。

「インターフェーステーマ」はタブやツリービューなどのテーマ、「シンタックステーマ」はエディタのテキスト欄のテーマをそれぞれ指定することができる。

上記で紹介した機能以外にもまだまだ便利な機能がパッケージとして豊富に提供されているので、Atomのパッケージの情報を検索して調べてみるといいだろう。

画面左のツリービューにあるファイルアイコンをファイル形式に応じて表示してくれる「file-icons」や、カラーピッカーを表示する「color-picker」のパッケージが気になるところだが、残念ながらこのブログ執筆時点(2017/1/14)ではWindows10環境で動作しなかった。改善を心待ちにすることにしよう。

まとめ

このページではAtomエディタのインストール方法、日本語化、簡単な使い方についてお伝えをしてきた。

パッケージを導入していくとさらに色々なことが可能になっていく。「こうしたい！」と思うものは大抵揃っていると言っていいだろう。そのときどきで調べつつ、パッケージを追加していこう。