今注目のテキストエディタ「Atom」の使い方と便利機能まとめ


今注目のテキストエディタ「Atom」の使い方と便利機能まとめ

『Atom』というエディタの名前を聞いたことはありますか?

登場したのは2015年と比較的新しいエディタながら、Web開発者が作業を効率化するための様々な機能を網羅している優れものです。拡張機能が数多く公開されたり、人気の拡張機能が標準機能として加わったりと、今も進化しています。

使い始めると奥が深い、Atomの基本を簡単にご紹介します。

※記事執筆2017年7月18日時点の最新バージョン1.19.0 Beta4の画像を使用しています。

image

目次
  1. Atomとは
  2. Atomの基本情報
  3. Atomの特長
  4. Atomの使い方
  5. Windows版ダウンロード~起動まで
  6. Mac版ダウンロード~起動まで
  7. 日本語メニューを表示する方法
  8. Atomの文字化け対策
  9. Atomの標準機能でできること
  10. ペイン分割(画面分割)
  11. タグの折りたたみ
  12. キーバインド(ショートカットキー)
  13. テーマの変更
  14. 作業が捗るパッケージ
  15. 新規パッケージのインストール方法
  16. インストール済みパッケージの有効化
  17. 便利なパッケージ
  18. 使用にあたっての注意事項
  19. まとめ

Atomとは

まずはAtomの基本情報や特徴などを紹介していきます。

Atomの基本情報

image 公式サイトはこちら

AtomはGitHub(※1)の創業者Chris Wanstrath氏が「Web技術を用いて、Emacsのように自由にカスタマイズできる新世代のエディタを開発する」という思いから始まったオープンソースのエディタです。

(※1)GitHub バージョン管理システムGitを用いた、ソフトウェア開発プロジェクトの為の共有Webサービス。詳しくは公式サイトをご参照ください。

開発が中断された時期がありましたが、2014年2月にパブリックベータ版、そして2015年6月にバージョン1.0が正式にリリースされます。正式版リリースから数か月で月間アクティブユーザー100万人を突破しました。

2017年7月時点の最新バージョンは1.19.0(Beta版が複数あります)。Atomのコミュニティにより2200あまりのテーマ、6500弱のパッケージが作られています。

利用可能環境:Windows、Mac、Linux

Atomの特長

  • タブ型で、使いやすいユーザーインターフェース
  • 無料で公開されているパッケージで機能追加が可能
  • 一つのウィンドウで単一のファイル、プロジェクト全体、複数のプロジェクトを開くことができる

最大の特長はなんといってもその拡張性の高さ。一部の文字を入れるとその後の変換予測一覧を表示する「予測変換」や「キーバインド(ショートカット)」など、Web開発者には嬉しい機能が実現されています。

【関連記事】:「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで
「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで

「エンジニアは女性のキャリアとして魅力的」モノづくり好き理系女子がWebエンジニアへ転職するまで

未経験からエンジニアへの転職を実現している人は、どのようにプログラミングを身に着けて転職を成功させているのでしょうか? 今回はCodeCampGATE(現:エンジニア転職コース)の1期生として、エンジニアへ転職した三吉 愛さんにプログラミング学習・転職の経験談を伺いました。過去にはビジネスコンテストで優勝した経験もあり、チャレンジ精神が旺盛な彼女がどのようにエンジニアとしての転職を実現したのかを語っていただきました。 ※三吉さんが受講したコースは[CodeCampGate(現:エンジニア転職コース)](https://codecamp.jp/courses/engineer)です。このコースの特徴は - 4ヶ月に及ぶ基礎学習と実践演習 - 計40回のマンツーマンレッスン - 職務経歴書の添削、模擬面接、エンジニアメンターによる推薦状の作成、など充実したキャリアサポート 未経験からエンジニアに転職するまでを徹底的に支援するコースです。コース詳細はこちらから確認してみてください! ▶︎https://codecamp.jp/courses/engineer [![image](//s3-ap-northeast-1.amazonaws.com/mash-jp/production/uploads/9901/0e8d3a419c4954dc2561fedc66fd56eebfc73cc7.9930.desktop.png)](http://ac.ebis.ne.jp/tr_set.php?argument=qkDLyMCX&ai=a5964631fbbe7b)

Atomの使い方

ダウンロードから起動までは、とても簡単です。

Windows版ダウンロード~起動まで

※Windows 10の画像です

公式サイトからexeファイルをダウンロード

image

exeファイルを実行するとインストール中の画面が表示されます。(この画面のまましばらくかかります。) image

インストールが終わればソフトが起動します。 image

Mac版ダウンロード~起動まで

※macOS Sierra の画像です

公式サイトからファイルをダウンロード image

ファイルを実行するとソフトが起動します。 image

日本語メニューを表示する方法

初期設定では英語の環境ですが、パッケージを使用して日本語のメニューに変更することができます。(以下Macの例です。Windows版は各メニューの名称が異なります)

メニューの Atom > Preferences(※環境設定のこと)を選択します。 image

設定画面が表示されます。+Installを選択します。 image

右側の画面が切り替わります。検索ボックスに「Japanese-menu」と入力して「Packages」ボタンを押すと検索結果が表示されます。検索結果の「Japanese-menu」の枠内の「Install」ボタンを押します。 image

メニューが日本語になりました。 image

Atomの文字化け対策

日本語を含む既存のファイルをAtomで開くと、よくわからない文字が出る、いわゆる文字化けが発生することがあります。この場合は文字コードを変更します。

画面右下に、文字コードを変更するエリアがあるので、ここを選択します。 image

文字コードの一覧が表示されるので、ここで文字コードを変更します。Windowsの場合、「Shift JIS」という文字コードが文字化けの原因となっているパターンがまず考えられるので、「Japanese(Shift JIS)」から試していきましょう。 image

標準設定の文字コードを変更するには、Atom > 環境設定(Preferences)で表示される「Settings」の画面で、「File Encoding」を変更します。 image

Atomの標準機能でできること

ペイン分割(画面分割)

image

一つのファイルを画面分割して表示できます。縦にも横にも分割可能です。

タグの折りたたみ

タグとタグの間を折りたたみ、見やすくします。 image

キーバインド(ショートカットキー)

キーバインド(ショートカットキー)を設定できます。 image

テーマの変更

初期設定では画面は黒を基調としたモダンなスタイルですが、設定を変えて好きな色・スタイルに変更可能。

image テーマも無料で公開されており、パッケージと同じようにインストールして使用することができます。

作業が捗るパッケージ

Atomの最大の特徴は、オープンソースでパッケージが数多く公開されていること。欲しいと思った機能がパッケージで実現されていないか探してみてください。

※以下、Mac版でご説明します

新規パッケージのインストール方法

1.Atom > 環境設定(Preference) を選択します

2.インストール(+Install)を選ぶと検索画面へ。検索ボックスに任意の文字を入力して検索します

3.インストールしたいパッケージのInstallボタンを押します

インストール済みパッケージの有効化

過去に好評だったいくつかのパッケージはAtomに搭載されているので、設定画面で有効化をすれば利用できます。

1.Atom > 環境設定(Preference) を選択します

2.パッケージ(Package)を選ぶと検索画面へ。検索ボックスに任意の文字を入力して検索します

3.「Community Packages」、「Core Packages」、「Development Packages」のいずれかの欄に結果が表示されます。「有効にする(Enable)」ボタンを押します。※「有効にする(Enable)」が「無効にする(Disable)」になっていれば既に有効化されています

便利なパッケージ

autocomplete-plus

予測変換を表示します。

image

このパッケージはインストール済みで、有効化されています。予測変換の機能は他に

  • autocomplete-css:CSSの予測変換
  • autocomplete-html:HTMLの予測変換

などがインストール済みです。

bracket-matcher

対応する括弧を光らせたり、ジャンプしたりできます。 image

color-picker

カラーピッカーを表示します。 image

Emmet

Emmetが使えるようになります。

image

Emmetとは主にHTMLやCSSの記述・編集をサポートするプラグインおよび省略記法です。 たとえば上記画像は「!」を入力後にTabキーを押した後の画面です。<!DOCTYPE html>~の一連の記述が自動で入力されます。このように独自の省略記法で長いコードを記述するので、作業の効率化を図ることができます。

Emmetについて、詳しくはこちらの公式サイトをご参照ください。

minimap

minimapが使えるようになります。 image

minimapとは、今作業しているエリアがコード全体のどこかを示すもの。Sublime Textというエディタでも人気の機能です。

使用にあたっての注意事項

パッケージの検索や巨大なファイルの使用など、操作によっては動作が重くなることがあるので注意が必要です。パッケージを入れすぎて重くなったら、アンインストールを検討しましょう。

Webサイト担当者としてのスキルが身に付く

無料カウンセリングはこちら

まとめ

以上簡単にご紹介しました。正式版のリリース以降、断続的に改修及びリリースが行われていて、今後も安定性やパフォーマンスの向上、魅力的なパッケージやテーマの公開に大いに期待が持てるAtom。まだ自分に合ったエディタを見つけられていない人、新しい多機能のエディタを探している人は、ぜひ一度試してみてください。 プログラミングを勉強している方によく読まれています!


関連記事

murase miho
この記事を書いた人
murase miho
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp