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

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

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

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

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

この記事の要約
  • ATOMエディタは無料で使える高機能なテキストエディタ
  • ATOMエディタではコードのプレビューや入力補助機能が使える
  • ATOMエディタのショートカットキーを使うと作業効率が上がる

なお、1人で学習が進められるか、途中で挫折しないか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは現役エンジニアと学習コーチの2名体制で学習をサポートするため、挫折しづらい環境で学習が進められます。

受講料が最大70%OFFになる「給付金コース」も提供中。未経験から効率よく学習を進めたい人は、ぜひ一度お試しください。

\ オンラインで相談可能 /

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

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

ATOMエディタのインストール方法は次の動画でも解説しているので、良ければご覧ください。

本記事の解説内容に関する補足事項

本記事はプログラミングやWebデザインなど、100種類以上の教材を制作・提供する「侍テラコヤ」、4万5,000名以上の累計指導実績を持つプログラミングスクール「侍エンジニア」、を運営する株式会社SAMURAIが制作しています。

また、当メディア「侍エンジニアブログ」を運営する株式会社SAMURAIは「DX認定取得事業者」に選定されており、プログラミングを中心としたITに関する正確な情報提供に努めております。

記事制作の詳しい流れは「SAMURAI ENGINEER Blogのコンテンツ制作フロー」をご確認ください。

目次

超便利なテキストエディタ「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

(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ステップ
更新日:2024年3月21日

コードを書いてみよう

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

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

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

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選【アニメーション付紹介】
更新日:2024年3月1日

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選【アニメーション付紹介】
更新日:2024年3月1日

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

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

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

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

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

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

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

【Mac/Winに対応】無料テキストエディタ徹底比較! おすすめ10選
更新日:2024年3月1日

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

効率的にプログラミングを学ぶなら

ここまで、Atomの機能や使い方を紹介しました。ただ、なかには

独学で習得できるかな
途中で挫折したらどうしよう…

と不安な方もいますよね。

プログラミングは手軽に学べるようになった反面いざ勉強を始めると、学習途中に挫折する独学者が多くいます。事実、弊社の調査では

  • 不明点を聞ける環境になかった
  • エラーが解決できなかった
  • モチベーションが続かなかった

などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。

プログラミング学習における挫折率の調査
プログラミング学習者の87.5%が挫折を経験したことがある
不明点やエラーが解決できずプログラミングを挫折した人が多数

調査概要:プログラミング学習の挫折に関するアンケート
調査対象:10代〜80代の男女298名
調査期間:2019年8月13日~8月20日
調査方法:インターネット調査
掲載元:PR TIMES

また、多くの無料学習サイトやWebサービスには不明点を質問・相談できる機能がありません。

こうした背景もあってか、プログラミング学習サイトの活用経験者100名に「再度学習サイトで学ぶと仮定した際、利用したいと考える学習サイト」を聞いたところ、50%が「不明点を質問・相談できる学習サイト」と回答しています。

調査概要:プログラミング学習サイトの活用経験がある人への意識調査 
調査期間:2022/9/9~2022/9/19
対象者:プログラミング学習サイトを活用した経験がある10~60代の男女100名
調査媒体:クラウドワークス
掲載元:PR TIMES

いざ独学でプログラミングを学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「プログラミングスキルを身につけるのって思っていたよりも難しいんだな…」とスキルの習得自体を諦めかねません。

仮にわからないことを飛ばしながら勉強を進めたとしても、ITエンジニアへの転職や副業での収入獲得を実現できるほど実践的なスキルが身につかなければ、結局後悔することになります。

そのため、1人でプログラミングスキルを習得できるか不安な方は数千円の費用をかけてでも、問題が発生したタイミングで現役エンジニア等に質問できる有料の学習サイトを選ぶのが賢明といえます。

そこで、おすすめしたいのが侍テラコヤです。

700x700_01 (2) (1)
700x700_02 (1) (1)
700x700_03 (1) (1)
700x700_04 (1) (1)
700x700_05 (1) (1)
700x700_06 (1) (1)
700x700_01 (2) (1)
700x700_02 (1) (1)
700x700_03 (1) (1)
700x700_04 (1) (1)
700x700_05 (1) (1)
700x700_06 (1) (1)
previous arrow
next arrow

侍テラコヤをおすすめする最大の理由は「登録無料で現役エンジニアに質問しながら学習を進められるコスパの良さ」にあります。

先ほど述べたとおり、独学者の多くは自力でエラーを解決できないためにプログラミング学習を挫折しています。そのため、初学者が現役エンジニアのようなプロに質問や相談ができない環境でプログラミングスキルを習得するのは難易度が高いといえます。

しかし、侍テラコヤでは

  • 現役エンジニアが応える回答率100%のQ%A掲示板
  • 必要に応じて受けられる現役エンジニアとのオンラインレッスン
  • 勉強の進み具合やこれまでの学習時間を確認できる「学習ログ」

といったサポート体制を整えているため、学習中に出てきた不明点を解決しながら挫折なくプログラミングスキルが習得可能です。

20
21
18
19
20
21
18
19
previous arrow
next arrow

Q&A掲示板の例
Google検索等で解決できなかった抽象度の高い質問も解決可能

下記の口コミからも、侍テラコヤなら挫折しづらい環境で学習を進められるといえます。

18
19
20
18
19
20
previous arrow
next arrow

侍テラコヤ利用者の口コミ

また、侍テラコヤは入会金不要・いつでも退会OKに加え、利用から1ヵ月の間は「全額返金保証制度」が適用されるので「他のサービスを選べばよかった」と後悔する心配もありません。

なぜ侍テラコヤがコスパよくプログラミングスキルを習得できるのか気になる方はぜひ公式サイトをご覧ください。

公式サイトで詳細を見る

まとめ

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

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

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

無料で学べるプログラミング学習サイトおすすめ13選【2024年版】
更新日:2024年3月29日

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

この記事を書いた人

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

目次