AtomエディタにおけるGit/GitHub機能の基本的な活用フローについて

Updated

2022.10.15

Published

2018.09.30

つい最近、Sublime TextがGitクライアントSublime Mergeをリリースしたと話題でしたが、私も使っているAtomエディタの方は2017年6月にGit/GitHubとの連携に対応していました。

高機能ではありませんが、特に不満も感じていません。あと、リリース当時と比べると使いやすくなってきている気がします。

ちょうど良い機会なので、私の今の使い方をざっくりまとめました。ちなみに私はHTML(ごく稀にPug)とCSS(LESSかSCSS)コーディングとかをたまにやっています。

標準機能と便利なパッケージ

Project Manager

Project Manager for easy access and switching between projects in Atom.
Project Manager - Atom

Git使うかどうか関わらず必須だと思っているパッケージ。便利。あらかじめ保存しておいたプロジェクト(フォルダ)を呼び出して、すぐ作業に取りかかれます。

Git Tab

標準機能です。control + shift + )で画面右に表示。Gitを利用しているプロジェクトで、変更したファイルのステージやコミット、取り消し(Discard)などできます。

特定範囲だけ指定(Hunk)や一つ前のコミットのやり直し(Reset)もコマンド入力不要で楽チン。

GitHub Tab

標準機能。control + shift + (でGit Tabと切り替えます。作業中のプルリクエストや、リポジトリでオープンになっている他のプルリクエストをプレビューできます。

あくまでGitHubだけで、BitbucketやGitLabは表示できません。

PlatformIO IDE Terminal

A terminal package for Atom, complete with themes, API and more for PlatformIO IDE. Fork of terminal-plus.
PlatformIO IDE Terminal - Atom

command + shift + T で画面下部にターミナルを出します。npm startなどのコマンドを入力してすぐ作業に移れるのが便利。Atomの基本機能に無いGitコマンドもここで実行できます。

実際どう使っているか

今回は、GitHubとNetlifyなHugoブログ「6z」(ほぼ放置中)をサンプルに、記事を更新してプルリクエスト、マージするまでの流れを紹介します。

プロジェクトフォルダを表示

command + control + P で、登録済みのプロジェクトを呼び出します。

データを最新の状態に

画面右下にある「Fetch」をクリック。もしリポジトリ側に新しいコミットが20件あれば、「Pull 20」のように表示されます。

オプションでFource Pushも選択可能。Rebase関連の操作はできません。

ブランチを変更

右下の設定欄から、コマンド不要でブランチの切り替えや追加ができます。
今はmaterブランチにいます。

今回はadd-postブランチを新しく追加します。

追加と同時に自動でチェックアウトします。

ファイルの追加

新しい記事を投稿するために、まず過去の記事ファイルを複製してみます。
ツリーでファイルを選択し、Dを打つと複製できます。

新しく追加したファイルは緑色で表示されています。
さて、早速この変更をadd-postブランチにコミットしてみます。

Git Tabにて対象ファイルを選択。

Return キーを押すとステージングします。

メッセージを入力してコミット。履歴に追加されました。

取り消したい時は「Undo」ボタンをクリックするだけ。履歴を常時確認できるのも使いやすいポイント。

ファイルの更新

さて、複製したファイルの内容を、新しい記事へ変更します。

保存すると、このように差分を見れます。ツリーとGit Tabの色はオレンジになりました。
ちなみに、必要な場所だけ選択してステージング(Stage Selection)することもできます。

メッセージ入力して、ステージングの内容をコミット。

コミットした後、Publish(ブランチをローカルからリモートへ初めてPush)をクリックします。一瞬表示が「Push」になり、

完了して表記が「Fetch」になりました。

GitHub Tabを開くと、「Open new pull request」ボタンが表示されています。

クリックすると、GitHubのプルリクエスト作成画面へ直接移動します。

早速プルリクエストを作成しました。

ここでAtomへ戻りFetchします。

このように、Atom上からプルリクエストの内容を確認できます。
さて、GitHub側でプルリクエストをマージします。

マージしました。Atom側の表示も、Fetchすると変わります。

以上です。大まかな流れを紹介しました。
ちなみにブランチの削除はAtomの機能に無いので、ターミナルで git branch -d {ブランチ名} します。

使っていて気になるところ

  • プロジェクト内のデータが多いと、起動時だいぶもっさりする

  • Git/GitHub Tabが一発で表示されないことがある

  • ウィンドウ再起動するとだいたい直る

終わりに

致命的に不便だと感じたことはほとんどありません。実際の作業では、他にも色々なパッケージやショートカットを活用しています。強いて言えば、もっとキビキビ動作すると嬉しいですね…。

ぜひ一度Atomを利用してみてください。
また、より便利な使い方や機能・パッケージがあれば教えてください!

おまけ:書いた経緯

デザインツールのFramerXを使う上で、Visual Studio Codeとの連携が強力らしく、Atomの代わりに試してみました。すると、今回Atomでやってるようなことが初期設定でだいたいできるやんけ!!!ということがわかり、あっさり乗り換えを検討中です。

乗り換える前に…!と思い、勢いに任せて書きました。
あと、JetBrains製のWebStormも気になっていて、空いた時間に試す予定です。気が向いたらそのあたりの顛末を書くかもしれません。

ろくデブログ

AtomエディタにおけるGit/GitHub機能の基本的な活用フローについて

written by

Genta