書籍概要
WEB+DB PRESS plus
Atom実践入門
──進化し続けるハッカブルなエディタ
──進化し続けるハッカブルなエディタ
- 著者
- 大竹智也 著
- 発売日
- 更新日
- 本書は，2016年7月14日に発売された書籍の電子版です。
- ご購入には会員登録・ログインが必要です
- 学校・法人等団体でのご利用について
- EPUB/PDFセット2,680円（税込）カートに入れる▼
- 自分用に購入する
- ギフトとして購入する
- 320ページ相当PDFEPUB：リフロー
概要
GitHubが開発したエディタ「Atom」を現場でどう活用するかを解説した書籍です。Atomは標準でさまざまな言語に対応しています。自動補完をはじめ開発を快適にする数々の機能が備わっていて，
こんな方におすすめ
- ほかのエディタを使っているが使いこなせてない方
- Atomをさらに使いこなしたい方
本書に関するお知らせ
本書に関連する記事を公開しております。
大竹智也（おおたけともや）
1983年生まれ。起業家，
目次
- はじめに
- 謝辞
- サンプルコードのダウンロード
- 本書の構成
- 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機能
移動操作
シンタックス
- 索引
サポート
ダウンロード
本書のサンプルコードをダウンロードできます。
データは，
- ダウンロード
- sample_files.zip