初心者のためのテキストエディタ。迷ったら Atom がおすすめ。

Github Atom

ここ最近、Web デザインや HTML / CSS コーディングをこれから始める方や始めて間もない方に相談される機会が結構ありまして、今回はその中でもよく聞かれる「テキストエディタは何がおすすめですか?」についてのお話。

種類や情報過多で選べない

Google様に「テキストエディタ」について尋ねれば、約 1,230,000 件の情報を返してくれます。これではちと多すぎるので、用途や OS などのキーワード、「プログラミング」「mac」「win」「おすすめ」「無料」とかを足して、絞り込んでいくと経験豊富な方の確かな情報に辿りつきます。

それでも「種類が多すぎて何を使っていいかわからない」と言われることも少なくないので、その場合は Atom を使ってみればと言っております。

Atom とは

無料なのに拡張性抜群の Github 製のテキストエディタです。バージョンも安定版の 1.0 になって起動や動作がスムーズ。このブログも Atom で書いていますよ。

Atom

UI がしっかりしていて、プラグイン(拡張機能)も充実、なのに無料。導入のハードルがかなり低いんです。自分は、メインで Sublime Text を使い、ブログ用に Atom としてましたが、今回改めて調べたことで本格的に乗り換えようかなとまで思っています。

Atom を使ってみる

Atom はざっくり言うとこんな人におすすめです。

  • 設定とかは簡単に行いたい
  • HTML / CSS / JavaScript 以外のプログラミングにも挑戦したい
  • 洗練された UI のかっこいいエディタを使いたい
  • Github も使ってみたい

(思った以上にざっくりですが、) 初めてのテキストエディタとして十分ではないでしょうか。安定版になったことで他から乗り換えてでも使いたいツールに近づいた気がしています。

1. 公式サイトからインストール

Atom はアプリケーションをインストールすればすぐに使うことができます。ボタンをクリックするだけなので、説明不要かと思いますが念の為。

download

上図は Mac からアクセスした時で、Windows からの場合は、下図のようなボタン表示となっています。

download for win

インストール可能なバージョンは、

  • OSX 10.8 以降
  • Windows 7 & 8

なので、ほとんどの方が使用可能なはず。未だに XP を使っている人は、以前に「XP終了1年経った今、IE対応はバージョン10以上で良いと思う。」の記事でも書いたのですが、そもそも買い換えるのが吉。

2. Atom を起動し、メニューを日本語化

Atom を起動すると下図のような初期画面が表示されます。画面右側には Welcome Guide として主要メニューが表示されています。左には、untitled のタブがあり、すでにテキスト入力を開始できる状態になっています。

welcome

ただ、全て英語なので、なんだかな〜いやだな〜ということもあるので、せめてメニューくらいは日本語化してみましょう。

Welcome Guide のInstall a Packageから、Open Installerを選択すると、新たにSettingsタブが表示されます。

Setting

ここからSearch Packagesに日本語メニュー化するプラグインのjapanese-menuを入れて検索します。
たまに何も起きない時がありますがThemePackagesのボタンを切り替えてみると検索が動きます。

japanese-menu

Install を選択し完了するとメニューバーの項目が日本語になっているはずです。こんな感じですね。

japanese-menu

他のプラグインも同じような手順でインストールしていきます。 その中でも入れておいて損のないプラグインは、他の方もたくさん紹介されています。

3. テーマを変更してみる

自分は、どうも初期のダークなスタイルが好きではない。長時間使っていると目が疲れませんか?そういう時にはテーマは変更してみましょう。

左メニューのThemeを選択するとUI ThemeSyntax Themeの選択ができます。

change theme

UI Themeでは、タブとかステータスバーなどの操作対象となる場所の外観パターンを選択でき、Syntax Themeでは、エディター内のテキストスタイルを選択できます。
初期でも複数パターンが用意されているので、好きなスタイルをいろいろいじって設定してみると良いです。

自分はなんだかんだで One Light に落ち着いてしまいました。(下図)

atom-theme-one-light

初期セットのテーマでは満足できないあなたは、Settings > Install > Install Theme から探してみると良いです。Atom の公式サイトにも一覧がありますよ。

4. フォントとかその他設定を変更する

おすすめのポイントであげたように、「設定とかは簡単に行いたい」を叶えるのが Atom です。Settings画面からほとんどの設定を行うことができ、Editor Settingでは、フォントサイズやフォントファミリー、行の高さ、タブでの余白の長さなどを調整できます。

atom-theme-one-light

初期の設定でも十分問題ないですが、自分の場合は、フォントは Source Code Pro で、フォントサイズは 13 が好みなので、その設定に書き換えています。
設定やプラグインのインストール、テーマのインストールも全てSettingsから行えるように作られているので、とっつきやすいエディタではないでしょうか。

タブにSettingsがない時は、メニューバーからAtom > 環境設定、もしくは、コマンド + ,のショートカットで呼び出すことができます。

【要Githubアカウント】複数のPCで同じパッケージを使えるようにする

個人 PC でインストールしたパッケージを別の PC にも反映させたい場合は、apm(Atom Package Manager) を使ってインストールしたパッケージを同期させることができます。
ただ、Githubのアカウントと Terminal での動作が必要になるので初心者の方は要注意です。

1. Github のアカウントと連携させる

Github のアカウントがあれば、Atom の公式サイトからサインインできます。Githubのアカウントがなければ作成してください。

2. インストールしたいパッケージにスターをつける

サインインした状態で Packages ページを見ると、スターが押せるようになっています。(下図)

atom-star

3. ターミナルから apm を実行する

apm が使えるかどうかを確認するために、apm のヘルプが表示できるか試してみます。ターミナルで以下のコマンドを入力します。

$ apm -h

以下のように表示されると apm が使用可能です。表示されない時は、Atomエディタに戻って、Atom > シェルコマンドをインストールを実行してください。

$ apm - Atom Package Manager powered by https://atom.io

Usage: apm <command>

where <command> is one of:
    clean, config, dedupe, deinstall, delete, dev, develop, docs, erase,
    featured, home, init, install, link, linked, links, list, ln, lns, login,
    ls, open, outdated, publish, rebuild, rebuild-module-cache, remove, rm,
    search, show, star, starred, stars, test, uninstall, unlink, unpublish,
    unstar, update, upgrade, view.

Run `apm help <command>` to see the more details about a specific command.

Options:
  --color        Enable colored output                                     [boolean] [default: true]
  -v, --version  Print the apm version
  -h, --help     Print this usage message

  Prefix an option with `no-` to set it to false such as --no-color to disable
  colored output.

次に、ターミナルでスターをつけたパッケージのリストを表示させます。

$ apm stars

すると、

Before you can publish packages, you'll need an API token.

Visit your account page on Atom.io https://atom.io/account,
copy the token and paste it below when prompted.

Press [Enter] to open your account page on Atom.io.

と表示されます。これは、

API tokenが必要なので、アカウント画面からコピーしてきてね。Enter 押してくれたらアカウント画面を表示させますよ。」

という内容です。なので、その指示通りにAPI tokenをコピーし、貼り付けて認証が成功すれば、こんな感じでスターをつけたパッケージ一覧を返してくれます。

atom-apm-stars

4. スターをつけたパッケージのインストール

apm starsのコマンドは、スターがつけられたパッケージ一覧を返すだけなので、インストールするには--installコマンドを追加する必要があります。この時、スターつけまくっているとインストールに時間がかかるので要注意です。

$ apm stars --install

インストール完了!!
スターさえつけておけば、どの PC にも同じパッケージをインストールすることができます。もし、パッケージの内容が反映されていない場合は、Atom を再起動してみてください。

Atom はまだまだ進化しそう

Atom は安定版になってかなり進化しています。以前から UI はわかりやすく好きでしたが起動に難ありだったので、それが改善されているのでかなりおすすめできます。

今回は、初心者の方やエディタ選びに迷っている方が、使ってみようかなと思えるように Atom の触りだけを紹介しました。なので、まだまだ紹介できていない機能やパッケージがたくさんあります。そもそも進化のスピードが半端ないので、機会があれば是非触ってみることをオススメします。


参考になりそうな記事やサイト

今回記事を作成するに当たって、公式サイトのドキュメント以外にも調べまして、参考になりそうで、読みやすい記事を掲載しておきます。参考にしてみてください。

プラグインなどの拡張機能を知りたい

Atom のことをもっと知りたい

関連記事