目次

• はじめに
  • 謝辞
  • サンプルコードのダウンロード
• 本書の構成
• 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機能

移動操作

シンタックス

• 索引