スライドショースライドショースライドショー

【atomをgithubと連携させよう!】導入手順まとめ

こんにちは、ライターの遠藤です!

早速ですがatomをご利用中の方へ質問です。「atomでソースを書いているのに、gitは別でターミナル画面を使っている」なんて事はありませんか?

実はgitの基本的な事はatomだけで解決できるんです!

今回の記事では、atomでgithubを導入する方法について紹介します。

git連携の使い勝手によってはatom導入を検討したい

なんて方もぜひ本記事を参考にしてみてください。

本記事では

  • githubとは
  • atomでgithub連携する意義
  • github連携の方法
  • GitHubタブの使い方
  • おすすめの関連パッケージ

について紹介します。

githubとは

GitHubとは、Gitを使ったソースコード管理サービスです。

GitHubにあげられたソースコードは、オープンソースであれば第三者が閲覧ができたり、修正の提案ができたりします。また、コードに関して話し合うSNS機能があったり、シンプルですがバグ等の管理機能などもあります。

ソースコードのバージョン管理ができるGitを基本としており、それに加えて開発者向けの様々な機能を提供しているサービスがGitHubです。

Gitとの違いがやや不明瞭になりがちですが、Gitは「ツール」、GitHubは「Gitを使ったサービス」と捉えてください。GitHubは沢山の開発者から親しまれており、多くの企業からも活用されています。

atomでgithub連携する意義

atomでgithub連携をする意義としては、git bashやGUIツールでの作業を省略させられる点が大きいです。

git関連の作業だけターミナルやSourcetreeなどの画面に切り替えるのは難しくはありませんが、やや煩わしさがあると思いませんか?

その作業がatomの画面だけで、それもボタンを押すだけでできるとなれば、導入を検討する価値はあるはずです。

簡単にまとめると、

  • atomの画面上だけで作業が完結する
  • コマンド不要
  • SourcetreeなどのGUIツールを導入しなくても済む

といった点がgithub連携をする利点になるかと思います。手順もそれほど難しくないので、以降を読んでぜひ検討してみてください。

github連携の方法

それでは、実際にgithubと連携させる方法を紹介します。前提として、githubのアカウントがすでに作成されているものとします。

まずはじめに、atom画面からGitで使うプロジェクトを開きましょう。

ここでは、testというプロジェクトにsample.pyというファイルが存在しています。

次に以下の手順を実施します。

1. cmd(win: Ctrl)-shift-Pを押してコマンドパレットを表示する
2. キーワードにGitHub: Toggle GitHub Tabを入力し、Enterを押す。

これでGitHubタブが表示されます。

ここで「Log in to GitHub to access PR information and more!」とメッセージが表示されているので、下のLoginボタンを押します。

2Stepを実施する事を促すメッセージが出ますので、それぞれ実施してトークンを登録しましょう。

トークンを登録する手順

さて、atomから促されている2Stepを実施していきましょう。

まずはじめにStep1はトークンの取得です。

https://github.atom.io/loginにアクセスします。

画面に従い、GitHubへログインします。

「Authorize atom」ボタンを押します。

トークンが生成されましたので、これをコピーします。

ここでatomに戻り、コピーしたトークンをStep2のボックスに入力し、「Login」を押します。

これで連携完了です!

もしトークンを入力するメッセージがGitHubタブに出ない時は

GitHubタブを開いた時にトークンを入力するメッセージが表示されていない場合は、「.git」ファイルが存在しないフォルダをプロジェクトフォルダとしている場合が多いです。

先にgit bashで

$ git init

しておくか、

$ git clone "GitHubで作成しているプロジェクト"

をして.gitファイルを用意しましょう。

そしてそのフォルダをatomで開けばメッセージも表示されるかと思います。

GitHubタブの使い方

それではatomのGitHubタブの使い方を紹介します。

atomでブランチ作成からコミットまではGitタブで行います。詳しくは以下の記事をご確認ください。

【意外と便利!】atomでgitを使ってみよう
更新日 : 2020年7月27日

GitHubタブでは、プッシュとプルリクエストの管理が可能です。ファイルに変更を加えコミットまで行うと、GitHubタブに「Publish + open new pull request」ボタンが表示されます。

これを押すとプッシュが行われ、自動的にブラウザ画面へ遷移しプルリクエスト画面表示されます。

あとはGitHub上でプルリクエストを行うだけです。

おすすめの関連パッケージ

githubの導入方法と基本的な使い方がわかったところで、おすすめのパッケージを紹介致します。これを導入すると更に使い勝手がよくなりますよ!

git-plus

まずはじめにおすすめなのは、gitコマンドがコマンドパレットで一通り使えるようになるgit-plusです。

これは、ボタン操作よりもコマンドで操作したい方に便利かと思います。下記のように、コマンド名を打つと「Git Plus: コマンド名」というように出てくような操作感です。

コマンドパレットはコマンドの予測ができるので、途中まで入力すれば実行できるという点で使いやすいかと思います。

git-control

コマンドを覚えたくないという方におすすめになのが、git-controlです。

こちらはGUIでgit操作ができるパッケージです。コマンドパレットから「Git Control: Toggle」で開く事ができます。

なかなか格好良いです。基本的な操作は一通りできてしまうので、慣れてしまえばもう離れられないツールです。

パッケージのインストールについて

atomの使い方にまだ慣れていない方は、パッケージのインストール方法がいまいち分からないかと思います。その為、今回はgit-plusの導入手順を通して理解しましょう。

導入するには、まずPreference画面を開きましょう。コマンドパレットから「Preferences」と入力しEnterを押すと、設定画面が表示されます。

ここで「+Install」を選択します。

続いて「Install Packages」の下にあるボックスに「git-plus」と入力し、隣のPackagesボタンを押します。

検索が完了すると、パッケージ一覧が表示されますので、その中から「git-plus」の項目にある「Install」ボタンを押します。

するとインストールが開始するので、しばらく待ちます。完了すると以下のようにInstallボタンに替わってUninstallボタン等が出てくるので、それを確認したところでインストール完了です。

まとめ

いかがでしたでしょうか?

今回の記事では、

  • githubとは
  • atomでgithub連携する意義
  • github連携の方法
  • GitHubタブの使い方
  • おすすめの関連パッケージ

について紹介致しました。

atomでコードを書いてgithubにプッシュするまでの一連の動作がatom内だけでできてしまうのは大変便利です。ぜひgithub連携を行なって、快適なコーディングライフを送ってください!

書いた人

遠藤貴大

1991年生まれ。双子座。
理系大学で認証システムを学んだ後、アプリ開発者となる。
新しく学ぶ人に寄り添った記事を心がけて執筆します。
芸術が好き。いつか猫と暮らすのが夢。