スライドショースライドショースライドショー

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

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

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

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

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

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

超便利なテキストエディタ「Atom」とは?

Atomのおすすめポイント

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

無料なのに高機能

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

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

拡張性がある

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

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

将来性がある

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

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

Atomで使える便利な機能

さらに、Atomにはコーディング時に嬉しい機能が盛りだくさんなんです。特に便利なポイントを3つご紹介しましょう。

作業フォルダが見やすい

作業用のフォルダをサイドバーに表示させて、一覧にして見ることができます。

クリックすればファイルを開くことができるので、複数のファイルで作業する時にとても便利です。

入力補助(パッケージ使用)

パッケージを利用することで、コードの入力を補助してくれるようカスタマイズができます。タイピングの手間が大幅に減るので、爆速でコーディングすることができる嬉しい機能ですね!

プレビュー機能が使える(パッケージ使用)

パッケージは便利なものがたくさん!HTMLなど、ブラウザで表示するものをプレビューしながらコーディングすることができます。

いちいち確認のためにブラウザに移動する必要が無いので、コーディングに集中できますね!

Atomを使ってみよう

とっても便利で最高なAtomの使い方、当然気になりますよね。初期設定の方法から基本の使い方までご説明しますね!

【初期設定】Atom本体をインストールしよう

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

※解説の画像はMacのものです。Windowsでもほぼ同様の手順でインストールすることができます。

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

(2)表示されているダウンロードボタンをクリックします(お使いのOSに適したものが自動的に表示されますが、念の為OSがあっているか確認してからダウンロードしましょう)


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

(3)ダウンロードしたファイルをダブルクリックすれば完了です(Macの場合はダウンロードしたzipファイルを解凍すれば完了です)

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

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

【初期設定】メニューの日本語化

インストールが完了すれば、すぐにコードを書き始めることができます。とはいえメニューが英語ばかりなので、初心者の方には何が何やら、という感じですよね。なので、下記の手順でメニューを日本語化しちゃいましょう。

(1)「Atom」を起動する

(2)「File」→「Settings」の順にクリックする(Macの場合は「Preferences」)

(3)「Install」をクリックする

(4)「Search packages」に「japanese-menu」と入力し、「Packages」をクリックする

(5)「japanese-menu」の「Install」をクリックする

詳しい解説は下記の記事でチェックしてみてくださいね。

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

コードを書いてみよう

ここまでくればあとはコードを書くばかり!メニューから「ファイル」→「新しいファイル」と選んで、新規のファイルを作成しましょう。

いい感じに黒い画面が出てきましたね。試しにちょっとHTMLを書いてみました。

タグがハイライトされて見やすいですね!こんな感じで、どんどんコードを書いていきましょう。

下記の記事で自分に合ったプログラミング学習サイトを見つけて、そこで学んだことを実践してみるのがおすすめです!

【2020年最新】プログラミングを独学で学習できる無料サービス19選
更新日 : 2020年8月12日

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 Preview」をクリックして、「Toggle Preview」をクリックしみてましょう。書いたMarkdownをプレビューしながら編集することができるようになります。

12468_2

Markdown記法
Microsoft Wordのように文字の大きさを変えられないテキストエディタ上で、見出しなどの行を示すためのルール。行の先頭に「#」などの簡単な記号を追加したりして、要素を区別する。/ 詳細はこちら

Atomをもっと便利にする設定

Atomはインストールしてメニューを日本語化しただけの状態でも十分に使うことができますが、カスタマイズすることによって更に便利にすることができます。

ぜひやっておいて欲しいオススメカスタマイズ3つをご紹介するので、ぜひやってみてください!

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

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

Windowsの場合

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

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

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

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

Macの場合

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

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

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

mac_atom_default

画像:Mac OSの設定変更

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

文字だけを扱うテキストエディタにとって、どのようなフォントで表示するかは、思いのほか重要です。今回は日本語にも対応していて、プログラミングのコードも見やすい「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の画面が黒くて可愛くないと感じている方は、ここで紹介する操作でデザインを変更できます。

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

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

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

atom-editor06

画像:テーマの変更

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

パッケージをインストールする

Atomに便利なパッケージをインストールすることで、自分だけのテキストエディタが作れます。便利そうなパッケージを見つけたら、色々試してみましょう!

オススメのパッケージや、パッケージのインストール方法は下記の記事で解説しているので、ぜひ参考にしてみてくださいね。


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

Atomを使うときのQ&A

Atomを使う上でよく質問される内容をQ&A方式でまとめてみました。困ったことがあったらチェックしてみてください!

プロジェクトフォルダって何?

ざっくりいうと、サイドバーに表示させるフォルダの一番上の階層のフォルダのことです。大体はそのプロジェクト全体のファイルを纏めているフォルダを指します。

例えば、「案件A」「案件B」「案件C」の3つの案件があり、それぞれにフォルダを用意していたとします。フォルダの中にはCSSやHTML、JavaScriptなど、その案件に必要なファイルが入っている状態です。

これらをサイドバーに全部表示させるならば、下記のように並ぶと見やすいですよね。

この「案件A」「案件B」「案件C」のフォルダが、プロジェクトフォルダです。

Atomが重くなったときはどうすればいい?

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

キャッシュの削除

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

  • C:Users(ユーザー名).atomcompile-cache
  • C:Users(ユーザー名).atomstorage

不要なパッケージの削除

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

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

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

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

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

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

ファイルが保存できなくなってしまった

以下のことを試してみましょう。

  • Atomを最新バージョンにする
  • 一回別ファイルで保存してみる
  • エラーが出るようならエラー内容でググる

ファイルが文字化けしてしまった!

実はテキストファイルには「文字コード」という裏ステータスがあり、正しい文字コードで読み取らないと文字化けを起こしてしまうことがあります。文字化けしてしまったら、右下の方にある文字コード設定を変更してみましょう。

ちなみに保存の際は、基本的にUTF-8にしておくのがおすすめです。日本語が文字化けせず表示されてくれて安心の文字コードです。

これだけは入れておくべき!というパッケージは?

とりあえず下記を入れておけば間違いありません。ぜひインストールしてみてください!

  • tag
  • web-search
  • color-picker
  • pigments
  • highlight-column
  • autocomplete-paths

各パッケージの解説は下記の記事で確認してみてくださいね。

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

どうしてもうまく使えない!

テキストエディタすら使いこなせないってヤバいのでは……

なーんて焦る必要はありません。慣れてないものを使っているのですから当然です。まずは速さを求めず、じっくり色々試してみましょう。

最初からテキストエディタをバンバン使いこなせなければ、プログラミング学習ができないわけではありません。そもそもパソコンのことを全然わからない!というレベルでも、学習を進めていけば自然と身につけることができます。

パソコンのタイピングが指1本だった丸山さんも、6ヶ月でサイトを一人で作れるレベルになりました。諦める必要は一切無いのです。

「この人の弟子になりたい」パソコン知識ゼロの営業マンが最高のプログラミング講師と出会えた理由
更新日 : 2019年11月5日

Atomがどうしても上手く使えないなら、もしかしたら別のテキストエディタの方が使いやすいかもしれません。下記の記事で色々紹介しているので、自分に合ったテキストエディタを探してみてください。

【Mac/Winに対応】フリーテキストエディタ徹底比較! おすすめ10選
更新日 : 2020年6月5日

Atomは便利でオススメですが、自分が使いやすいのが一番。楽しく学習継続できる環境を作っていくことを大事にしてくださいね。

まとめ

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

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

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

【2020年最新】プログラミングを独学で学習できる無料サービス19選
更新日 : 2020年8月12日

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

LINEで送る
Pocket

書いた人

ハナキ ノボル

ハナキ ノボル

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