【すぐわかる!】Atomの基礎的な使い方とおすすめパッケージ

こんにちは、ライターの遠藤です!今回の記事では、atomの使い方、問題別解決法と称しまして、atomを使い始めた方へ向けた使い方紹介を致します!

atomってどんな事ができるんだろう
atomを始めたけど、○○の使い方が分からない…
パッケージって何?どうやって使うの?

といった疑問をお持ちの方へ向けて、

  • 【基礎】atomのインストール方法
  • 【基礎】各プログラミング言語に対応させる方法
  • 【基礎】ショートカットについて
  • 【基礎】パッケージをインストールする方法
  • 【応用】問題別解決法
  • 【応用】おすすめパッケージ

を紹介致します。ぜひ、最後までお付き合いください!

atomのインストール方法

それでは早速、atomをインストールしましょう!この記事では、macOSでの手順を紹介しますが、他のOSでも要領は同じで、公式サイトからダウンロードして、適切なフォルダに配置するだけです!

では、実際の手順に入りましょう。

  1. ブラウザでダウンロードサイトを開く
  2. 公式のダウンロードサイトへアクセスします。

  3. ダウンロードボタンを押し、ダウンロードを開始する
  4. zipファイルのダウンロードが完了したら、解凍します。

  5. アプリケーションフォルダへドラッグ&ドロップする
  6. 多くの方はサイドエリアの「よく使う項目」にあると思いますので、そこへそのまま送ってしまいます。

  7. アプリケーションフォルダでアプリを開く
  8. 「Atom はインターネットからダウンロードされたアプリケーションです。開いてもよろしいですか?」というポップアップが出た場合は、ファイルに問題が無いようでしたら「開く」ボタンを押します。

以上で、Atomを始める事ができます!

各プログラミング言語に対応させる方法

ここでは、各言語で書く為の手順を紹介します。やる事はシンプルで、テキストの種類を選択するだけです。これにより、atomが各言語に合わせた動作(シンタックスハイライトや、AutoCompleteなど)をしてくれるようになります。

なお、既存ファイルを開く場合は、atomが自動でテキストの種類を判別してくれるので、設定は不要です。今回は例として、pythonを書いてみます。

  1. 「Cmd + N」で新規のテキスト編集画面を開く
  2. テキストタイプを選択する
  3. ここでご自分の書きたい言語を選択します。画面右下にあるテキストタイプを選択します。

    テキストボックスに書きたい言語を入力し、選択します。

    今回はpythonですね。

これで完了です!なお、デフォルトでサポートしている言語は以下になります。

CC++C#
ClojureCOBOLCSS
CoffeeScriptDGitHub Flavored Markdown
GoHTMLJava
JavaScriptJSONJulia
LessMakeMustache
Objective-CPerlPHP
Property listPythonRuby
Ruby on RailsRuby on RailsScala
Shell ScriptSQLTOML
XMLYAML

ショートカットについて

atomでよく使うショートカット をまとめました。テキストエディタで広く使われるショートカットと基本的には同じです。

コマンド処理
Cmd + Oファイル・フォルダを開く
Cmd + Pプロジェクトを開く
Cmd + N新規ファイルを作成
Cmd + W表示しているファイルを閉じる
Cmd + F文字列検索・置換
Cmd + G文字列検索時、次へ移動
Cmd + Shift + Fプロジェクト内の文字列検索(=Grep)
Cmd + Pファイル検索
Cmd + ,(カンマ)設定画面を開く
Cmd + Shift + Pコマンドパレットを表示

Windowsの方はCmdをCtrlにしていただければ操作できます。特に覚えておいていただきたいのは、コマンドパレットの表示です。これは、Atomでできるコマンド(操作)を検索する事ができます。新しく機能を拡張した際なども、ここで検索できます。

また、ショートカットが割り振られている場合は、それも合わせて表示してくれますので、ショートカットを忘れてしまった場合などにも有用です。

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

atomの最大の特徴であるパッケージによる機能拡張。数千にも及ぶパッケージを、使わない手はありません!ここでは、パッケージをインストールする方法を紹介します。今回は例として、日本語化パッケージのインストールをしましょう。

  1. 設定画面を開く
  2. まずは「Cmd + Shift + P」でコマンドパレットを開きましょう。

    テキストボックスが表示されたかと思います。これがコマンドパレットです。コマンドパレットはあらゆるアクションを検索する事ができるので、このショートカット は覚えておきましょう。

  3. 設定画面を表示する
  4. コマンドパレットを表示できたら、「Preferences」と入力してください。「Application: Show Preferences」という候補が出てくると思いますので、それを選択し設定画面を表示します。

  5. インストール画面へ遷移する
  6. サイドエリアに「+Install」と表示されているボタンがありますので、それを選択します。

  7. インストールするパッケージを検索する
  8. 以下画像のような、インストールパッケージを検索する画面が表示されているかと思います。

    ここで、「Install Packages」の下にあるテキストボックスに「Japanese」と入力し、隣のPackagesボタン(またはEnterキー)を押し、検索を開始します。検索が完了すると、検索欄の下に該当するパッケージ一覧が表示されます。

  9. インストールを開始する
  10. 今回は、一番被インストール回数の多いjapanese-menuをインストールしましょう。japanese-menuの項目にある「Install」ボタンを押し、インストールを開始します。

完了すると、以下のようにInstallボタンに替わってUninstallボタン等が出てくるので、それを確認したところでインストール完了です!

これでatomが日本語化されます。

以上が、パッケージのインストール手順です。場合によっては、インストールが完了したらAtomを再起動して設定を反映させる必要がありますので、ご注意ください。

問題別解決法

atomを始めて、私が最初に調べた事が以下になります。もし同じ事をしたい方がいらっしゃいましたら、参考にしてください。

atomを日本語化したい

atomを日本語化したい場合は、日本語化用のパッケージをインストールする必要があります。上述のパッケージをインストールする方法で日本語化パッケージのインストール手順が記載されていますので、参照してください。

git, githubと連携させたい

atomではgit, githubと連携させる事ができます。連携させることによって、atomの画面上だけで修正のPushまでができてしまいます!gitbashやGUIツールを使わなくていい点、楽になりそうですよね。詳しくは以下記事を参照してください。

【意外と便利!】atomでgitを使ってみよう
更新日 : 2018年9月28日
【atomをgithubと連携させよう!】導入手順まとめ
更新日 : 2019年5月20日

Markdownをプレビューしながら書きたい

atomではMarkdownも書く事ができます。また、その際に書いた内容をプレビューする事も可能です!

プレビューを表示するには、マークダウンで書かれた文書が開かれた状態で、コマンドパレットから「Markdown Preview: Toggle」を選択します。ショートカットは「Ctrl + Shift + M」です。以下のようにプレビューが表示されます。

基本的にはリアルタイム更新ですが、もし更新されない場合はトグルして再表示してみましょう。

HTMLをプレビューしながら書きたい

atomはパッケージをインストールする事で、HTMLのプレビューも可能です。必要なパッケージは「atom-html-preview」です。これをパッケージをインストールする方法に則ってインストールしてください。

インストールが完了したら、プレビューを表示させたいhtmlファイルを開いた状態で、「Ctrl + Shift + H 」または右クリックで「Preview HTML」を選択すると表示する事ができます。

テーマを変更して見やすいデザインにしたい

atomを使っているうえで、「もっと見やすい、好きなデザインにしたい」といった方もいらっしゃるかと思います。atomではパッケージ同様、テーマもインストールする事が可能です。手順については、以下を参照してください。

おすすめのテーマについてもまとめています!

【せっかくなら自分好みにしよう!】atomのおすすめテーマ11選
更新日 : 2018年10月3日

おすすめパッケージ

ここでは、atomを使ううえでおすすめなパッケージを紹介致します!

atom-ide-ui

atom-ide-uiはatomをideとして使う方へ向けた、公式パッケージです。概要や使える機能については以下を参照してください。

【Atomエディタの公式IDEパッケージ!】atom-ide-uiまとめ
更新日 : 2018年10月3日

color-picker

color-pickerは色を視覚的に確認できるようになるパッケージです。カラーコードを覚えなくても、⌘ + ⇧ + C で以下画像のように色を確認しながら設定ができます。

git-plus

git-plusはgitコマンドがコマンドパレットで一通り使えるようになるパケージです。これは、ボタン操作よりもコマンドで操作したい方に便利かと思います。

コマンドパレットにコマンド名を打つと「Git Plus: コマンド名」と表示されるので、それを選択するだけです。コマンドパレットはコマンドの予測ができるので、途中まで入力すれば実行できるという点で使いやすいかと思います。

git-control

git-controlはGUIでgit操作ができるようになるパッケージです。コマンドパレットから「Git Control: Toggle」で開く事ができます。以下のような見た目です。

なかなか格好いいですね。基本的な操作は一通りできてしまうので、慣れてしまえばもう離れられないツールです。

まとめ

いかがでしたか?今回の記事では、

  • 【基礎】atomのインストール方法
  • 【基礎】各プログラミング言語に対応させる方法
  • 【基礎】ショートカットについて
  • 【基礎】パッケージをインストールする方法
  • 【応用】問題別解決法
  • 【応用】おすすめパッケージ

について解説致しました。atomはもともと多機能なうえ、用途に合わせ自分好みにカスタマイズできる点がとても魅力的です。一見使いにくそうに思えますが、一回使い方を知ってしまえばそこまで難しくはない事がわかります。

ここでぜひ基礎的な使い方を覚えて、atomをどんどん活用していってください!

LINEで送る
Pocket

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

cta_under_bnr

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

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

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

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

書いた人

遠藤貴大

遠藤貴大

1991年生まれ。双子座。
理系大学で認証システムを学んだ後、アプリ開発者となる。
新しく学ぶ人に寄り添った記事を心がけて執筆します。
芸術が好き。いつか猫と暮らすのが夢。

おすすめコンテンツ

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

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