WEB+DB PRESS plusシリーズAtom実践入門
──進化し続けるハッカブルなエディタ

書籍の概要

この本の概要

GitHubが開発したエディタ「Atom」を現場でどう活用するかを解説した書籍です。Atomは標準でさまざまな言語に対応しています。自動補完をはじめ開発を快適にする数々の機能が備わっていて,カスタマイズも容易です。まずは基本的な操作や設定からはじめ,文法チェック,GitやGitHubとの連携,テストなどさまざまな機能を追加できるお勧めのパッケージの使い方を紹介しています。後半ではキーバインドや表示のカスタマイズ方法,パッケージの作成/公開方法を解説していますので,Atomを活用して開発したい方にお勧めです。

こんな方におすすめ

  • ほかのエディタを使っているが使いこなせてない方
  • Atomをさらに使いこなしたい方

本書に関するお知らせ

本書に関連する記事を公開しております。

この書籍に関連する記事があります!

Atomで理想の開発環境を作り出す
Atomは,ソースコードホスティングサービスとして知られるGitHub社が開発したエディタです。

目次

  • はじめに
    • 謝辞
    • サンプルコードのダウンロード
  • 本書の構成
  • CoffeeScriptの構文
  • LESSの構文

第1章 新世代エディタAtom

1.1 Atomとは

  • 時代を体現したエディタ
  • Webとネイティブ,なくなる垣根

1.2 Web技術によって作られたAtom

  • Web技術のメリット
    • Webアプリケーション開発の技法がそのまま使える
    • OSのサポートを気にする必要がない

1.3 Atomに採用されているWeb技術

  • Electron
  • Node.jsとCoffeeScript
    • Node.js
    • CoffeeScript
  • CSON
  • LESS
  • Web Components

1.4 Atomエディタの特徴

  • 基本的な機能
    • 検索と置換
    • 入力補助
    • インデント
    • シンタックスハイライト
  • 高度な機能
    • 文法チェック
    • マルチカーソル
    • ウィンドウ分割
    • バージョン管理
    • パッケージマネージャ
    • 非同期処理
  • 今後の課題
    • 文字コードの扱い
    • 細かな画面調整
    • パフォーマンス要求

1.5 Atomの現在と今後

第2章 インストールと画面構成

2.1 インストール

  • アプリケーションのインストール
  • コマンドラインツールのインストール

2.2 画面構成

  • [Column]ドットファイルとドットディレクトリ
  • メニュー(Menu)
    • Atomメニュー
    • Fileメニュー
    • Editメニュー
    • Viewメニュー
    • Selectionメニュー
    • Findメニュー
    • Packagesメニュー
    • Windowメニュー
    • Helpメニュー
  • ツリービュー(Tree View)
  • コマンドパレット(Command Pallete)
  • ペイン(Pane)
    • タブバー
    • エディタ
  • ステータスバー(Status Bar)

第3章 基本操作

3.1 起動方法

  • Atomの起動
    • ファイルを開く
    • ディレクトリを開く
    • 標準で開くアプリケーションを変更する
  • ターミナルからの起動
    • ディレクトリを指定した場合
    • ファイルを指定した場合
    • 引数を指定しない場合
    • 起動オプション
  • アップデート

3.2 基本操作

  • ショートカット
    • Atomのキーバインド
    • キーバインドの表記について
  • コマンドパレット──Command Palette
    • 起動する
    • コマンドを実行する
  • キャンセルとリロード──Core: Cancel,Window: Reload

3.3 文字コード/改行コード/シンタックスの選択

  • 文字コードの選択──Encoding Selector: Show
  • 改行コードの選択──Line Ending Selector: Show
  • シンタックスの選択──Grammar Selector: Show

3.4 ファイル操作

  • ファイルの作成と保存
    • 新規ファイルを作成する──Application: New File
    • 保存する──Core: Save,Window: Save All
    • 別名で保存する──Core: Save As
  • Fuzzy Finderによるファイルやバッファの切り替え
    • ファイルを開く──Fuzzy Finder: Toggle File Finder
    • バッファを開く──Fuzzy Finder: Toggle Buffer Finder
    • git statusから開く──Fuzzy Finder: Toggle Git Status Finder
  • ツリービュー
    • ツリービューを表示する/位置を切り替える──Tree View: Toggle,Tree View: Toggle Side
    • フォーカスを移動する──Tree View: Toggle Focus
    • ファイルを操作する──Tree View: Add File,Tree View: Add Folder,Tree View: Duplicate,Tree View: Rename,Tree View: Remove...

3.5 移動操作

  • カーソルの移動
    • 単語頭/単語末へ移動する──Editor: Move To Beginning Of Word,Editor: Move To End Of Word
    • 行頭/行末へ移動する──Editor: Move To Beginning Of Line,Editor: Move To End Of Line,Editor: Move To First Character Of Line,Editor: Move To End Of Screen Line
    • 前の段落/次の段落へ移動する──Editor: Move To Beginning Of Next Paragraph,Editor: Move To Beginning Of Previous Paragraph
    • ファイル先頭/ファイル末尾へ移動する──Core: Move To Top,Core: Move To Bottom
    • 行番号へ移動する──Go To Line: Toggle
  • タグジャンプ
    • ファイルシンボルへ移動する──Symbols View: Toggle File Symbols
    • プロジェクトシンボルへ移動する──Symbols View: Toggle Project Symbols
    • 宣言元へ移動する/移動前に戻る──Symbols View: Go To Declaration,Symbols View: Return From Declaration
  • ブックマーク
    • ブックマークする/外す──Bookmarks: Toggle Bookmark,Bookmarks: Clear Bookmarks
    • ブックマークの一覧を表示する──Bookmarks: View All
    • ブックマークに移動する──Bookmarks: Jump To Next Bookmark,Bookmarks: Jump To Previous Bookmark

3.6 文字操作

  • 選択操作
    • 単語を選択する──Editor: Select Word
    • 単語頭/単語末まで選択する──Editor: Select To Beginning Of Word,Editor: Select To End Of Word
    • 現在行を選択する──Editor: Select Line
    • 行頭/行末まで選択する──Editor: Select To Beginning Of Line,Editor: Select To First Character Of Line,Editor: Select To End Of Line
    • ファイル先頭/ファイル末尾まで選択する──Core: Select To Top,Core: Select To Bottom
    • 全体を選択する──Core: Select All
  • 文字列操作
    • 大文字/小文字にする──Editor: Upper Case,Editor: Lower Case
    • 前後の文字を入れ替える──Editor: Transpose
    • コメントアウト/アンコメントする──Editor: Toggle Line Comments
  • 行操作
    • 行をつなぐ──Editor: Join Lines
    • 行末までを切り取る──Editor: Cut To End Of Line
    • 行頭/行末まで削除する──Editor: Delete To Beginning Of Line,Editor: Delete To End Of Line
    • 行を複製する──Editor: Duplicate Lines
    • 行を入れ替える──Editor: Move Line Up,Editor: Move Line Down
    • 現在行を削除する──Editor: Delete Line
  • インデント
    • インデントを増やす/減らす──Editor: Indent,Editor: Outdent Selected Rows
    • 自動インデント──Editor: Auto Indent
    • 自動インデントを切り替える──Window: Toggle Auto Indent
  • 検索と置換
    • 検索する──Find And Replace: Show
    • 置換する──Find And Replace: Show Replace
    • 選択文字列を検索する──Find And Replace: Use Selection As Find Pattern
    • 検索オプション
    • プロジェクトを検索/置換する──Project Find: Show

3.7 ウィンドウ/タブ/ペインの操作

  • ウィンドウ
    • 新規ウィンドウを開く/ウィンドウを閉じる──Application: New Window,Window: Close
    • プロジェクトを追加する/削除する──Application: Add Project Folder,Tree View: Remove Project Folder
    • ウィンドウを切り替える
    • フルスクリーンにする──Window: Toggle Full Screen
  • タブ
    • タブを移動する──Pane: Show Next Item,Pane: Show Previous Item
    • タブを閉じる/閉じたタブを開く──Core: Close,Pane: Reopen Closed Item
  • ペイン
    • ペインを分割する──Pane: Split Up,Pane: Split Down,Pane: Split Right,Pane: Split Left
    • ペインを移動する──Window: Focus Pane Above,Window: Focus Pane Below,Window: Focus Pane On Right,Window: Focus Pane On Left
    • ペインを閉じる──Pane: Close,Pane: Close Other Items

3.8 特殊な文字操作

  • 空白文字
    • 末尾空白文字を削除する──Whitespace: Remove Trailing Whitespace
    • スペースとタブを相互変換する──Whitespace: Convert Spaces To Tabs,Whitespace: Convert Tabs To Space
  • Bracket Matcherによる括弧の操作
    • 括弧内を選択する──Bracket Matcher: Select Inside Brackets
    • 対応する括弧/開き括弧へ移動する──Bracket Matcher: Go To Matching Bracket,Bracket Matcher: Go To Enclosing Bracket
    • 対応する括弧を削除する──Bracket Matcher: Remove Matching Brackets
    • タグを閉じる──Bracket Matcher: Close Tag
  • スニペット
    • スニペットを挿入する──Snippets: Available,Snippets: Expand
    • スニペットの中を移動する──Snippets: Next Tab Stop,Snippets: Previous Tab Stop
  • 自動補完──Autocomplete Plus: Activate
  • マルチカーソル──Editor: Add Selection Above,Editor: Add Selection Below

3.9 表示の変更

  • 不可視文字の制御──Window: Toggle Invisible
  • 折り畳み
    • 現在行を折り畳む──Editor: Fold Current Row,Editor: Unfold Current Row
    • 全体を折り畳む──Editor: Fold All,Editor: Fold At Indent Level 1-9,Editor: Unfold All
  • 文字サイズの変更──Window: Increase Font Size,Window: Decrease Font Size,Window: Reset Font Size
  • 行の折り返し表示の変更──Editor: Toggle Soft Wrap

第4章 設定とパッケージの導入

4.1 設定ファイルの構成

  • それぞれの役割
  • 調子が悪いときの対処法
  • パッケージファイルの構成

4.2 設定ファイルの管理

  • Gitによる管理
  • バックアップ

4.3 設定画面

  • 画面構成
  • 設定の保存と反映

4.4 基本的な設定

  • コア設定
  • エディタ設定
    • インデント
    • フォントと行間
    • 禁則処理
    • スクロール
    • ガイドや不可視文字の表示
    • 折り返し
    • アンドゥの制御
    • その他

4.5 詳細な設定

  • 言語固有の設定
  • 設定ファイルの中身
  • 特殊な設定
    • スコープ限定の設定
    • スコープを利用した設定例

4.6 テーマの設定

  • シンタックステーマとUIテーマ
  • テーマのインストール
  • テーマの設定
  • テーマのアンインストール

4.7 キーバインドの確認

4.8 パッケージの導入

  • パッケージのインストール
  • apmコマンドによるインストール
  • パッケージ固有の設定
  • パッケージのアップデート
  • パッケージの無効化/アンインストール

4.9 テーマ/パッケージの見付け方

4.10 お勧めの設定

  • フォント
  • 空白文字の除去
  • 括弧の自動対応
  • ファイルの自動保存

第5章 パッケージによる開発の効率化

5.1 操作の拡張

  • Emacsライクな操作の実現──emacs-plus
  • Vimライクな操作の実現──vim-mode

5.2 装飾

  • ファイルアイコンの追加──file-icons
  • カラーコードに沿ったハイライト表示──pigments
  • ソースコード全体のプレビュー──minimap

5.3 状態解析

  • Atomの使用状態の可視化──editor-stats
  • コマンドの使用状態の可視化──command-logger
  • カラーピッカー──color-picker
  • 正規表現解析──regex-railroad-diagram
  • シンボル用ツリービュー──symbols-tree-view

5.4 プロジェクトの切り替え──git-projects

5.5 文法チェッカ──linter

  • 追加パッケージ

5.6 Gitの利用

  • Git操作──git-plus
  • コンフリクトのマージ──merge-conflicts
  • git blameの表示──git-blame
  • コミット履歴の参照──git-time-machine

5.7 GitHubとの連携

  • GitHubページへの移動──open-on-github
  • Gistとの連携──gist

5.8 リアルタイムプレビュー

  • Markdown──markdown-preview
  • Coffee,LESS──preview

5.9 プログラムの実行

  • スクリプト──script
  • ビルド──build

5.10 テスト

  • 自動実行とステータス通知──test-status
  • Travis CIやCircleCIとの連携──travis-ci-status,circle-ci

5.11 ターミナル

  • ターミナルエミュレータ──term3

5.12 Ruby on Rails

  • フレームワーク内の移動──rails-transporter
  • Rails向けスニペット集──rails-snippets

5.13 ビューア

  • PDFビューア──pdf-view
  • APIドキュメントビューア──api-docs

第6章 Chrome Developer Toolsの使い方とAtomのDOM

6.1 Chrome Developer Toolsとは

6.2 DevToolsのパネルと機能

  • Elementsパネル
  • Networkパネル
  • Sourcesパネル
  • Timelineパネル
  • Profilesパネル
  • Resourcesパネル
  • Auditsパネル
  • Consoleパネル

6.3 要素選択と各種ペインから取得可能な情報

  • Stylesペイン
  • Computedペイン
  • Event Listenersペイン
  • DOM Breakpointsペイン
  • Propertiesペイン

6.4 スタイル

  • スタイルの調査
  • スタイルの編集

6.5 JavaScriptの実行と確認

  • Consoleパネルからの実行
  • Consoleパネルへの出力

6.6 パフォーマンス測定

  • プロファイラによる測定
  • タイムラインによる測定

6.7 AtomのDOM

  • Shadow DOMとCustom Elements
  • 基本構造
  • コンポーネント
    • ワークスペース
    • エディタ
  • エディタの詳細構造
    • ガター
    • スクロールビュー
  • 属性とclass属性値
    • 代表的な属性
    • 代表的なclass属性値
  • シンタックスによる値付け
    • シンタックスが適用されるしくみ
    • 構文解析のしくみ
  • アクションによる値付け
    • タブ
    • エディタ

第7章 本格的なカスタマイズ

7.1 Atomのカスタマイズ方法

  • 設定ファイルによるカスタマイズ方法
    • 初期化スクリプト──init.coffee
    • スニペットの設定──snippets.cson
    • キーバインドの設定──keymap.cson
    • スタイルの設定──styles.less
  • その他のカスタマイズ方法
    • パッケージを直接編集する
    • パッケージを作成する
  • 反映されるタイミング

7.2 初期化スクリプトのカスタマイズ

  • 少し高度な設定

7.3 スニペットのカスタマイズ

  • 追加する
  • 上書きする

7.4 CSSセレクタの優先順位

  • 詳細度の計算

7.5 キーバインドのカスタマイズ

  • キーバインドの調べ方
    • コマンド名の表記
    • キーバインドの競合
  • キーバインドの設定方法
    • 追加する
    • 上書きする
    • 無効化する
  • 高度な指定方法
    • 特定のOSを指定する
    • 特定のシンタックスを指定する
    • 特定のUIを指定する

7.6 スタイルのカスタマイズ

  • スタイルの調べ方
  • スタイルの編集
    • 通常のスタイリング
    • Shadow DOM内部へのスタイリング
    • 無効化する
  • 高度なスタイリング
    • 特定のテーマをスタイリングする
    • 強制的にスタイリングする
  • 実用的なスタイリング例
    • 現在行をハイライトする
    • 選択範囲を装飾する
    • カーソルを装飾する
    • 対応する括弧をハイライトする
    • 本文を装飾する

第8章 テーマとパッケージの作成

8.1 開発ドキュメント

  • Atom Flight Manual
  • APIリファレンス
  • [Column]筆者がパッケージを作成するときの調べ方

8.2 開発の準備

  • プロジェクトホームの確認
  • 開発モードの起動

8.3 サンプルテーマの作成

  • ひな型の作成
  • ライブリロード
  • 実装
    • package.jsonを設定する
    • LESSの読み込み法則について
    • スタイルを実装する
    • 本文スタイルを作成する

8.4 サンプルパッケージの作成

  • ひな型の作成
  • 実装
    • package.jsonを設定する
    • コマンドを作成する
    • テストを書く
    • テストを実行する

8.5 本格的なパッケージ開発

  • シンタックスの作成
  • スニペットの作成
  • メニューの作成
    • アプリケーションメニュー
    • コンテキストメニュー
  • 設定ファイルの利用
  • Nodeモジュールの利用

8.6 パッケージの公開

  • アカウントの作成
  • パッケージの登録と削除
  • パッケージのメンテナンス

Appendix A 最新情報の入手と開発への参加

A.1 最新情報を入手するには

  • ソースコードの入手とビルド
  • 最新情報の入手

A.2 開発へ参加するには

  • パッケージ開発への参加
  • Pull Request
    • リポジトリをForkする
    • コミット/pushする
    • Pull Requestを作成する

Appendix B コアパッケージリファレンス

本リファレンスについて

テーマ

画面表示

編集支援

Atom機能

移動操作

シンタックス


  • 索引

著者プロフィール

大竹智也(おおたけともや)

1983年生まれ。起業家,及びフロントエンドからバックエンドまで幅広くカバーするWebエンジニア。兵庫県立明石高等学校卒業後,フリーターとして働きながら独学でWeb技術を習得する。2010年にオンライン英会話「ラングリッチ」を起業。2015年に「EnglishCentral」への売却を果たす。著書に本書のほかに『Emacs実践入門』があり,エディタ本による三冠王を目指している。