【初心者向け】HTML/CSS/JSエディタに最適な「Atom」とは？使い方ガイド（初級編）

Atomとは？

Atomとは、もともとGithub発のテキストエディタです。Windows・Macでもどちらでも利用可能であり、Linuxでも利用することが出来ます。
さまざまな「パッケージ」をインストールすることで、機能の追加が柔軟に行える拡張性の高さが特徴です。
パッケージの追加により、さまざまな言語のLint機能などを追加できることから、HMTLコーダー、フロントエンドエンジニアやプログラマーまで職業を選ばず幅広い方から支持されているテキストエディタです。
この記事を最後まで読み進めれば、Atomが快適に利用できるようになっているはずなので、じっくりお読みください。

ダウンロードとインストール

ここでは、テキストエディタ「Atom」のダウンロードとインストールを解説します。
とても簡単なのでまずはインストールまでやってみましょう。

ダウンロード

まずはAtom公式ウェブサイトでソフトウェアをダウンロードしましょう。

ダウンロード先はこちら

インストール

次に、ダウンロードしたインストーラーを立ち上げて、インストールを行います。
特に難しい設定はありません。ボタンをクリックしていくだけでインストールが完了します。
インストールが終了したら、Atomが自動的に起動します。

ここまで終われば、無事にインストールが完了してAtomを利用する準備が整いました。
次はAtomを使ってみる前に、より使いやすくしてみましょう。

Atomをより使いやすくするための日本語化と機能の追加

Atomは海外製のソフトウェアなので、インターフェースがデフォルトで英語になっています。
そのまま利用できるかたは問題ありませんが、まずはAtomを日本語化してみましょう。

Atomを日本語化するための手順

１，メニューから[File]→[Preferences（WindowsはSettings）]を選択する

２，画面右側の「Settings」タブ内の「Install」を選択する

３，「Install Packages」という入力欄に「Japanese-menu」と入力する

４，入力欄下部に検索結果が表示されるので、「Japanese-menu」の青い「Install」ボタンを押下する

以上で、インストールが完了すると日本語化されます。
基本的にパッケージのインストール作業は、上記の順序で行います。（この日本語化もパッケージのインストールにより行われています）

もっとAtomを使いやすくするオススメパッケージとは？

Atomのパッケージ機能を利用して、自分好みに、使いやすくカスタマイズすることができます。

Minimap

今コードを書いている部分が、全体のどのあたりのエリアに記述されているコードなのか、ひと目で分かる機能です。Sublime Textについている機能です。

autocomplete-paths

今コードを書いている部分が、全体のどのあたりのエリアに記述されているコードなのか、ひと目で分かる機能です。Sublime Textについている機能です。

autoclose-html

htmlの閉じタグを自動的に挿入してくれる機能です。HTMLを初めたばかりの頃は、タグの閉じ忘れなどが多かったので今回おすすめしています。

file-icons

Atom内でファイル管理を行う際に、ファイルの先頭に対応したアイコンを付与する機能です。
ひと目でそのファイルがどのような種類のファイルなのか分かるようになります。

この他にも、パッケージ機能を利用して様々な機能を追加することができます。
この記事の執筆時点（2017年11月6日）では、6,962件のパッケージが存在していますので、
この中から必要な機能を探して、オリジナルの作業環境を構築することが出来ます。

最後に、文字コードについて

Atomの文字コードは画面右下から切り替えることができます。

Atomの文字コードを切り替える方法

１，環境にもよりますが、右下の右から3番目に現在の文字コードが表示されています。

２，これを変更する場合は、文字コードをクリックすると文字コードの選択画面が表示されます。

デフォルトの文字コードを固定する

デフォルトでファイルを扱う際の文字コードを固定することもできます。

１，メニューから[Atom]→[環境設定]を選択

２，[コア設定]→[ファイルエンコーディング]から任意の文字コードを選択

文字コードの自動選択

さらに、パッケージ機能を利用すればファイルに応じて文字コードを自動的に選択することもできます。
パッケージ[auto-encoding]をインストールすることで、ファイルを開くたびに、そのファイルのエンコード形式でファイルを扱えるようになります。

さいごに

冒頭でお伝えしたとおり、高機能なテキストエディタにはBracketやSublime Textなどさまざまな種類があります。
これらはいずれも無料(※1)で、簡単にカスタマイズできるのが特徴です。
Atomはこれらのエディタの中でも完全無料であり、パッケージ機能の管理など様々な点で初心者に優しいユーザーインターフェースであることが特徴です。
Windows / Mac / Linuxなどの複数環境で使えることも特徴で、複数環境の間で設定情報などを引き継ぐこともできます。
また、頻繁にアップデートが行われるのでパフォーマンスの改善などにも期待が持てます。

メモ帳や他エディタを使っていて、これから本格的に制作環境を整えたいという方は、是非利用してみてください。

※1 Sublime Textは無料で利用することができますが、本来は$70の有料ソフトウェアです。
支払いをしない場合は、購入を促すメッセージが表示されます。

お問い合わせフォーム