【ATOMエディタまとめ】インストール方法と使い方を紹介!

どうも!ハナキノボル(@novl_h)です。

今回はプログラミング初心者に最適なテキストエディタ「ATOM」についてご紹介していきます。ATOMは、プログラミング初心者から上級者まですべての方にオススメできるテキストエディタです。

テキストエディタは、文章(テキスト)を編集するためのアプリケーションです。例えばプログラミングでは、プログラム(コンピュータへの命令)をテキストで書きますので、プログラマーにとっては、テキストエディタの選択はプログラマー人生を決定づけるほどと言ってもよいでしょう。

この記事では、これからテキストエディタ「ATOM」を使い始める方が、押さえておくべき情報をお届けします。この記事を読んで、ATOMの基本的な使い方を理解したら、下記の記事を見てカスタマイズしてみてくださいね。

職業別!ATOM便利パッケージ27選【アニメーション付紹介】
更新日 : 2019年9月11日

それから、他のテキストエディタにも興味がある方には、こちらの記事をおすすめします。

フリーテキストエディタを徹底比較!おすすめTOP10【Windows/Mac】
更新日 : 2019年6月3日

ATOMのおすすめポイント

ATOMのおすすめポイントを3つお伝えします。

無料なのに高機能

一つ目は、ATOMは無料で使える点です。無料だと雑な作りのアプリケーションを想像するかもしれませんが、ATOMはそうではありません。

インストールや設定は非常に簡単に操作できるようになっており、それでいて高機能です。また、Markdown形式での文書作成も難なくこなせますし、プログラミングを効率良く行う上で必要な機能もほぼそろっています。

拡張性がある

二つ目は、拡張性がある点です。もともと高機能なATOMですが、「パッケージ」と呼ばれる拡張機能を追加して、さらに高機能にできます。プロのプログラマーは、まるで侍が刀を研ぐように、商売道具のテキストエディタをどんどん拡張して高機能にしています。

ATOMはそのような要求にもしっかりと応えられるテキストエディタです。

将来性がある

そして三つ目は、将来性がある点です。ATOMは、オープンソースという仕組みを取り入れています。その仕組みのおかげもあり、米国GitHub Inc.の社員を中心に、世界中の優秀なエンジニアがATOMの開発に参加しています。

このような開発体制ですから、これから先もATOMは最強のテキストエディタである可能性が高いのです。

ATOMを使う準備をしよう

ATOMのインストール

では、ATOMをインストールしてみましょう。

ここでは、Windows 10の場合のインストール方法を紹介しますが、Ubuntu 16.04.3 LTS DesktopやMac OSでも簡単にインストールできます。

(1)ATOMのダウンロードサイトを表示します。

(2)「Download Windows 64-bit Installer」をクリックします。

Ubuntu 16.04.3 LTS Desktopの場合は、「Download .deb」をクリックします。ダウンロードされるファイル名も異なりますので、適宜読み替えてください。

atom-editor01

引用元:ATOM公式HP https://atom.io/

AtomSetup-x64.exeがダウンロードされます。

(3)AtomSetup-x64.exeをダブルクリックします。

インストールが完了すると、デスクトップにショートカットアイコンが作成されています。

このアイコンをダブルクリックすると、ATOMを起動できます。

Mac OSの場合

Mac OSの場合のインストール方法は、以下のサイトの説明が丁寧です。

参考:https://webkaru.net/dev/mac-atom-install/

インストール先(主にアプリケーションフォルダ)に移動した「Atom」をダブルクリックすると、ATOMを起動できます。普段ターミナル(コマンドで操作する黒い画面)を使う方は、以下のコマンドからも起動できます。

ターミナルからの起動例をアニメーションにしてみました。

atom_cmdopen

画像:ターミナルからの起動例

ATOMを使用する上での基本的な設定

ファイルをダブルクリックしたときにATOMで開くように設定する

テキストファイルやHTMLファイルなどをダブルクリックしたときに、ATOMが起動してファイルを開くように設定できます。

Windowsの場合

ATOMからは変更できないので、Windowsの設定を変更します。なお、1つのファイル(たとえばHTMLファイル)で設定すれば、同じ種類のファイルはすべてATOMで開くようになります。

(1)ATOMで開きたいファイルを右クリックし、「プログラムから開く」をクリックして、「その他のアプリ」をクリックします。

(2)「Atom」をクリックして、「OK」をクリックします。

もし、「Atom」が表示されない場合は、「このPCで別のアプリを探す」をクリックし、「C:\Users\(ユーザー名)\AppData\Local\atom\atom.exe」を選択して、「開く」をクリックします。

Macの場合

やはりATOMからは変更できないので、Mac OSの設定を変更します。

(1)対象のファイル(下の画面の場合は「index.html」)を、Ctrlキーを押しながらクリックして、「情報を見る」をクリックします。

(2)「このアプリケーションで開く:」で「Atom.app」を選択し、「すべてを変更」をクリックします。

mac_atom_default

画像:Mac OSの設定変更

メニューの日本語化

ATOMがとっつきにくいと感じる人は、メニューが英語だからではないでしょうか。そこで、まずはメニューを日本語化してみましょう。これだけでだいぶ印象が変わってきますよ。

侍エンジニア塾ブログには、ATOMを日本語化する方法を説明した記事がありますので、ぜひご覧ください!

40秒で支度しな!「Atom」を日本語化する5ステップ
更新日 : 2019年4月12日

日本語対応フォントの設定

文字だけを扱うテキストエディタにとって、どのようなフォントで表示するかは、思いのほか重要です。今回は日本語にも対応していて、プログラミングのコードも見やすい「Ricty Diminished」に切り替えてみましょう。

ちなみに、Ricty Diminishedフォントは、こんなデザインです。

atom-editor05

画像:Ricty Diminishedフォント

Ricty Diminishedフォントのインストール

まずは、Ricty Diminishedフォントをインストールしましょう。

(1)GitHubのプログラミング用フォント Ricty Diminishedにアクセスします。

(2)「Clone or download」をクリックし、「Download ZIP」をクリックします。

atom-editor02

RictyDiminished-master.zipが保存されます。

(3)RictyDiminished-master.zipを展開して、すべてのttfファイルを順番にダブルクリックし、「インストール」をクリックします。

これでRicty Diminishedフォントがインストールされました。

ATOMの設定

次に、ATOMを起動して、Ricty Diminishedフォントを使って文字を表示するように設定します。

(1)ATOMを起動します。
※以降、日本語化したATOMの操作を説明します。

(2)「ファイル」をクリックし、「環境設定」をクリックします。

atom-editor03

画像:環境設定

(3)「Editor」をクリックし、「Font Family」に「Ricty Diminished」と入力します。

atom-editor04

画像:Editor

読みやすくなったでしょうか。文字は好みがあると思いますので、いろいろなフォントも試してみてくださいね。

ATOMの基本的な使い方

テキストエディタは、「テキストファイルを開いて文章を編集する」というのが基本的な使い方です。

今回紹介しているATOMでは、文章をより快適に編集できるように、フォルダを開いたり、画面を分割したりする機能が用意されています。

ファイルを開く

まずは、ATOMでテキストファイルを開いて、編集する操作です。

(1)「ファイル」をクリックし、「開く」をクリックします。

(2)任意のテキストファイルを選択して、「開く」をクリックします。

テキストファイルの内容が表示されます。

(3)編集する箇所をクリックし、キーボードを使って文章を編集します。

(4)編集が終わったら、「ファイル」をクリックし、「保存」をクリックします。

なお、起動しているATOMに複数のテキストファイルをドラッグ&ドロップすると、ファイルをまとめて開けます。

フォルダを開く

ATOMでは、ファイルだけでなくフォルダも開けます。フォルダを開くと、ATOMの画面左側にフォルダが常時表示され、フォルダ内のファイルを簡単に開けるようになります。

(1)「ファイル」をクリックし、「フォルダを開く」をクリックします。

(2)任意のフォルダを選択して、「フォルダーの選択」をクリックします。画面左側にフォルダが表示されます。

なお、起動しているATOMにフォルダをドラッグ&ドロップしても、フォルダを開けます。

画面を分割する

画面を分割して、1つのファイルの別の箇所を表示しながら、文章を編集できます。複数のファイルを同時に編集したい場合にも便利です。

(1)テキストファイルを開きます。

(2)「表示」をクリックし、「ペイン」をクリックして、「ペイン分割↑」をクリックします。

カーソルが表示されている画面が上下に分割され、カーソルは上側の画面に表示されます。同様に「ペイン分割→」をクリックすると、カーソルが表示されている画面が左右に分割され、カーソルは右側の画面に表示されます。

また、フォルダを開いているときは、画面を分割して、新しいファイルを開くこともできます。

(1)フォルダを開きます。ATOMの画面左側にフォルダが常時表示されます。

(2)画面左側に表示されているファイルを右クリックし、「ペイン分割→」をクリックします。

カーソルが表示されている画面が左右に分割され、右側の画面に右クリックしたファイルが表示されます。

atomsplit

画像:ペイン分割

よく使うショートカットキー

プログラマーならショートカットキーを猛烈に使うので、よく使うショートカットキーは覚えられないほどたくさんあるでしょうが、私たちはそこまでは使いません。この記事では、そんな私たちですらよく使うショートカットキーを抜粋してお届けします!

「Ctrl+S」と書いてある場合は、Ctrlキーを押しながらSキーを押します。

ショートカットキー動作
Ctrl+Oファイルを開く
Ctrl+S保存
Ctrl+Shift+S別名で保存
Ctrl+PgUp、Ctrl+PgDn次のタブへ移動、前のタブへ移動
Ctrl+W現在のタブを閉じる
Ctrl+Home、Ctrl+Endファイルの先頭へ移動、末尾へ移動
Ctrl+F検索
Ctrl+Shift+Fプロジェクト内を検索
Ctrl+Aテキストをすべて選択
Ctrl+↑、Ctrl+↓選択中の行を移動
Ctrl+\ツリービュー(フォルダ表示など)の表示、非表示

なお、Mac OSの場合は、Ctrlキーの代わりにCmdキーを押します。

Markdownの編集

この記事の初めの方でも少し触れましたが、ATOMにはMarkdown記法で文章を書くときに便利な機能が用意されています。

ここで改めて、Markdown記法について簡単に説明しておきましょう。テキストエディタでは、Microsoft Wordなどとは異なり、文字の大きさを変えられません。

そのため、見出しの行を簡単には区別できません。そこで、見出しであることを示すために、行の先頭に「#」などの簡単な記号を追加するというルールを作成した人たちがいました。

このようなルールはたくさんあるのですが、そのうちの1つがMarkdown記法です。ATOMでMarkdown記法を編集するときの便利な機能は、以下の記事で説明していますので、ぜひご覧ください。

ATOMエディタでMarkdown! HTMLやPDFの出力方法も解説
更新日 : 2019年5月28日

テーマの変更

ATOMの画面が黒くて可愛くないと感じている方は、ここで紹介する操作でデザインを変更できます。

(1)「ファイル」をクリックし、「環境設定」をクリックします。

(2)「テーマ」をクリックし、「インターフェーステーマ」と「シンタックステーマ」を変更します。

例えば、「One Light」と「Solarized Light」を選択すると、以下のように一気に明るくなります。

atom-editor06

画像:テーマの変更

テキストエディタで文章を編集する時間が長くなりそうなら、気分良く編集できるようにデザインも選んでみてくださいね。

ATOMの便利&かっこいいパッケージ

ATOMに便利なパッケージをインストールすることで、自分だけのテキストエディタが作れます。パッケージについては、以下の記事で詳しく説明していますので、ぜひご覧ください!


職業別!ATOM便利パッケージ27選【アニメーション付紹介】
更新日 : 2019年9月11日

ATOMが重くなったときの対応

ATOMで文章の編集を続けていると、どういうわけか動作が遅く(=重く)なってくることがあります。その場合は、キャッシュを削除したり、不要なパッケージを削除してみると改善します。

キャッシュの削除

キャッシュを削除するには、ATOMを終了して、以下のフォルダを削除します。

  • C:\Users\(ユーザー名)\.atom\compile-cache
  • C:\Users\(ユーザー名)\.atom\storage

不要なパッケージの削除

不要なパッケージを疑う前に、パッケージを読み込まずに起動してみましょう。

(1)コマンドプロンプトを起動して、「atom –safe」と入力し、Enterキーを押します。

この方法で起動したATOMの動作が速く(=軽く)なった場合は、パッケージが原因と考えられますので、不要なパッケージを削除すると効果があるでしょう。

(2)不要なパッケージを削除するには、「ファイル」 → 「環境設定」 → 「パッケージ」の順にクリックします。

(3)不要なパッケージの「無効」や「アンインストール」をクリックします。

どれが不要なのかは、人によって違いますので、ひとつひとつ調べながら削除するしかないようです…。

まとめ

いかがでしたでしょうか?あの米国GitHub Inc.を筆頭に世界中の開発者が開発しているだけあって、ATOMは高性能かつ高機能なテキストエディタということが伝わったでしょうか。

一番始めに書きましたが、高機能でも完全に無料というところにも驚きます。プログラミング学習をしていてまだテキストエディタを使っていないという方はぜひATOMを使ってみてください。

ATOMと合わせてプログラミング学習もしたいという方はこちらの記事をご覧ください。

【全て無料】独学でもスキルが身につくプログラミング学習サイトTOP5
更新日 : 2019年5月29日

こちらの記事では無料で学べるおすすめのプログラミング学習サイトをご紹介致します。初心者でも気軽にプログラミングを始めることが出来ますよ。

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ハナキ ノボル

ハナキ ノボル

侍エンジニア塾ブログ編集長。オウンドメディア運営、コンテンツマーケティング、SEO対策が得意分野です。プログラミングはすべての人が学ぶべきスキルだと思っています。0→1を作り上げるエンジニアはとてもかっこいい職業で世の中のイメージ(3K)を変えたい!と密かに思ってます。現在Swiftを勉強中。音楽鑑賞が趣味で、ライブやフェスによく行きます。
インスタやってます。
ツイッターやってます。
ブログやってます。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説