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

shutterstock_299560196_eye
ハナキ ノボル
書いた人 ハナキ ノボル
侍エンジニア塾ブログは、未経験からWebアプリ開発と仕事獲得をサポートする
侍エンジニア塾のオウンドメディアです。
プログラミング学習を覗き見

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

今回はプログラミング初心者に最適なテキストエディタ「ATOM」についてご紹介していきます。

ATOMは、プログラミング初心者から上級者まですべての方にオススメできるテキストエディタです。

テキストエディタは、文章(テキスト)を編集するためのアプリケーションです。

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

この記事では、これからテキストエディタ「ATOM」を使い始める方が、押さえておくべき情報をお届けします。

この記事を読んで、ATOMの基本的な使い方を理解したら、下記の記事を見てカスタマイズしてみてくださいね。

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

ATOMのおすすめポイント

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

無料なのに高機能

一つ目は、ATOMは無料で使える点です。

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

インストールや設定は非常に簡単に操作できるようになっており、それでいて高機能です。

また、Markdown形式での文書作成も難なくこなせますし、プログラミングを効率良く行う上で必要な機能もほぼそろっています。

拡張性がある

二つ目は、拡張性がある点です。

もともと高機能なATOMですが、「パッケージ」と呼ばれる拡張機能を追加して、さらに高機能にできます。

プロのプログラマーは、まるで侍が刀を研ぐように、商売道具のテキストエディタをどんどん拡張して高機能にしています。

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

将来性がある

そして三つ目は、将来性がある点です。

ATOMは、オープンソースという仕組みを取り入れています。

その仕組みのおかげもあり、米国GitHub Inc.の社員を中心に、世界中の優秀なエンジニアが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

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

メニューの日本語化

ATOMがとっつきにくいと感じる人は、メニューが英語だからではないでしょうか。

そこで、まずはメニューを日本語化してみましょう。

これだけでだいぶ印象が変わってきますよ。

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

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

文字だけを扱うテキストエディタにとって、どのようなフォントで表示するかは、思いのほか重要です。

今回は日本語にも対応していて、プログラミングのコードも見やすい「Ricty Diminished」に切り替えてみましょう。

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

atom-editor05

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

読みやすくなったでしょうか。

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

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の画面が黒くて可愛くないと感じている方は、ここで紹介する操作でデザインを変更できます。

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

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

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

atom-editor06

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

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

ATOMに便利なパッケージをインストールすることで、自分だけのテキストエディタが作れます。

パッケージについては、以下の記事で詳しく説明していますので、ぜひご覧ください!

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

ATOMで文章の編集を続けていると、どういうわけか動作が遅く(=重く)なってくることがあります。

その場合は、キャッシュを削除したり、不要なパッケージを削除してみると改善します。

キャッシュの削除

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

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

不要なパッケージの削除

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

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

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

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

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

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

まとめ

いかがでしたでしょうか?

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

一番始めに書きましたが、高機能でも完全に無料というところにも、驚きます。

初心者でも、比較的簡単に使えるようにデザインされていますので、ぜひチャレンジしてみてください!


33歳、未経験だった僕がフリーエンジニアになれた理由
現在フリーでWEBエンジニアをやられている濱口直行さん。33歳で、プログラミングを学び始め、約半年という短い期間で独立までされた学習ログを余すことなくインタビューさせていただきました。

プログラミングを学習中の方はもちろん、独立をお考えの方まで幅広く活用できる記事になっています。この機会に是非活用していただければと思います。


現役フリーランスエンジニアによる無料体験レッスン実施中!

もし、あなたが、

  • 経験、年齢、学歴に不安がある
  • 挫折しない学習方法が知りたい
  • アプリ開発で困っている
  • エンジニアの”生”の声が聞きたい!
  • 仕事獲得の仕方がわからない
  • エンジニアに転職したいが何をすればいいかわからない

など、プログラミング学習やキャリアのことでお困りであれば、まずは『無料体験レッスン』にお申し込み下さい。

あなたにとって、最適の解決策をご提案させていただきます。

詳しくは下の画像から詳しいサービス内容をご確認ください。

cta_mtm3

学習者インタビュー

人気記事セレクション

プログラミング学習者必見

専属講師に質問し放題、レッスンし放題!最短1ヶ月でフリーランスエンジニア
プログラミング学習カリキュラム無料公開中
Ruby学習カリキュラム無料公開中
Python学習カリキュラム無料公開中
 1記事最大11,000円!テックライター募集


LINEで送る
Pocket

この記事が気に入ったら
いいね!をしてフォローしよう

最新情報をお届けします

書いた人

ハナキ ノボル

ハナキ ノボル

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