[GAS][Github]Githubでチーム開発を楽にしよう

GAS

どうも。つじけ(tsujikenzo)です。今日は 「Githubでチーム開発を楽にしよう」 をお送りします。

はじめに

弊社は、一般的な卸売業ですが、社員全員がかんたんなGoogle Apps Script(以降、GAS)が読み書きできるよう、研修を受けています。

個人個人で業務アプリケーションを開発することもありますが、3~5名でチーム開発することもあります。

今日は、そんなチーム開発で便利な、GithubGithubアシスタントについて、運用までの手順をおさらいします。(社内向けマニュアルですが、一般公開します。)」

今日のアジェンダ

  • Githubにアカウント登録しよう
  • Githubアシスタントをインストールしよう
  • Collabolatersに招待してもらおう
  • PULLしてみよう
  • Branchを切ろう
  • PUSHしてみよう
  • プルリクしてみよう

Githubの管理者は、Githubにある程度詳しい方を想定していますので、管理者の操作については割愛します。

Githubにアカウント登録しよう

まずは、Githubにアカウント登録します。

こちらのページから、アカウントを作成しましょう。※画面のデザインは常に変更される可能性大です。適宜読み替えてください。

Build software better, together
GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to over 420 million projects.

パスワードを入力して[Continue]をクリックします。 

ユーザーネームを入力して[Continue]をクリックします。 

アップデート情報など、お知らせを受け取りたければyを、不要な場合はnを入力して[Continue]をクリックします。 

ロボットではないかという質問が続きますので、続行しましょう。画像は割愛します。

メールに認証番号の通知が届いていると思いますので、6桁を入力します。 

アンケートが何問かありますので、回答しましょう。どれを選んでも問題ありません。 

PRO版の案内がありますので、左下の[Continue for free]をクリックします。 

アカウントの作成は以上です。 

プロフィール設定画面を開いて、アカウント名の確認をしたり、プロフィールアイコンの設定をしておきましょう。 

プロフィール画面では、自分のアカウントIDを確認できます。次の手順で必要になりますので、メモしておきましょう。 

Collabolatersに招待してもらおう

Githubの管理者に、アカウントIDを伝えます。

管理者から Collabolaters(共同編集者)としてリポジトリに追加されたら、メールで通知がきますので、待ちましょう。

届くメールはこのような感じです。 

リンクを開いて[Accept invitation]をクリックしましょう。 

リポジトリに、Collabolaterとして参加できました。 

では、チームでのGithubライフを楽しみましょう!

[管理者の作業]

リポジトリにCollabolaterとして、スタッフを追加しましょう。

リポジトリの[Settings]から、[Manage access]を開き、[Add people]をクリックします。

必要に応じて、アカウントをCollabolaterから削除するなど、運用しましょう。

Githubアシスタントをインストールしよう

GASのスクリプトエディタで使える、Chromeの拡張機能をインストールしましょう。

手順は3つです。

  1. Google Apps Script GitHub アシスタントのインストール
  2. GitHubの認証
  3. GASの認証

この3つの手順は、こちらのブログ記事を読んで、作業をすすめてください。

GASのバージョン管理をする拡張機能Google Apps Script GitHub アシスタントの導入方法
GASのバージョン管理のためのChrome拡張機能「Google Apps Script GitHub アシスタント」の使い方をシリーズでお伝えしています。今回は、その導入方法と認証の設定方法についてわかりやすく解説をしています。

記事内にもありますが、Githubアシスタントのリンクをこちらに貼っておきます。

Google Apps Script GitHub アシスタント - Chrome ウェブストア
GitHub/GitHub Enterprise/Bitbucket/GitLabでGASのインラインコードを管理

Githubアシスタントのエラー

Githubアシスタントを操作中に、「undefined」のエラーが出た場合は、以下の2点を確認します。

  1. API設定がONになっているか

隣ITさんの記事内にもありますが、GASのAPI設定がオンになっていることを確認しましょう。 

  1. Githubで正常にログインできているか 一度ログアウトして、もう一度ログインしなすと、エラーが解消されることがあります。

しかし、スクリプトエディタでは「Login To SCM」が表示されていないときもあるでしょう。 

そのようなときは、拡張機能のオプションをクリックします。 

別ウィンドウが開きますので、[LOGOUT]をクリックします。 

必要項目を入力して、[GITHUB LOGIN]をクリックします。※2番目はパスワードではありません。アクセストークンですので、お間違いなく。 

Githubのパーソナルアクセストークンは、発行したときは画面に表示されますが、2度と表示できません

なので、Regenerate tokenをクリックして、再度アクセストークンを発行しましょう。 

再発行されたアクセストークンをコピペしましょう。 

再度、ログインできました。

よく画面を見ると、「After logout, remember to delete the access token」と書かれています。 

つまり、ログアウトしたら、アクセストークンを削除しておきなさいということです。

そうしなければ、過去のアクセストークンが溜まってしまいますからね。

アクセストークンが流出することはないと思いますが、ログアウトしたら削除するようにしておきましょう。 

PULLしてみよう

PULLとは、Github上に保存されているソースコードを、自分のスクリプトエディタにダウンロードすることです。

スクリプトエディタの、リポジトリの▼をクリックすると、Collabolaterとして参加しているリポジトリがプルダウンで表示されます。 

以下の2点を確認して、[↓]をクリックします。

  • 参加しているリポジトリ名は合っているか
  • ブランチ名は正しいか

一番最初にPULLするのは、ブランチ名[main]ですので、間違えないように表示を確認しましょう。 

ここで、どのスクリプトファイルをプルするか設定できますが、最初は、すべてのスクリプトファイルをPULLしてかまいませんので、[PULL]をクリックします。 

スクリプトエディタに、スクリプトファイルが反映されたら成功です。ファイルの並び順が崩れてしまいますが、必要に応じてファイルを移動しましょう。コードを実行してエラーが出なければそのままで問題ありません。(エラーが出て、対処方法が分からないばあいは管理者に問い合わせお願いします。) 

Branchを切ろう

自分のコードを書く準備をします。

いまは、ブランチ名[main]で作業(PULLしただけですが)をしています。

mainブランチは、チーム全員が作り上げるメインのソースコードになります。

※正確にいえば、[main]はブランチではなく、木の幹になるので、[Trunk]と呼んだほうが正しいですが、なぜかデフォルトの作業場所もブランチと呼んでいます

なので、mainブランチは、全員のコードを合算した作業場個人ブランチは、自分専用の作業場、とイメージしてください。

ブランチを切る

ブランチを作成することを、「ブランチを切る」と言います。

ブランチの▼をクリックして、[Create New branch]をクリックします。 

お好きな名前(分かりやすく自分の名前がいいでしょう)を付けて、「Create」をクリックします。 

実行ログにこのように表示されたら成功です。 

自分のブランチ名が正しく表示されていると思います。 

この状態で、コードを書いていきましょう。

PUSHしてみよう

mainブランチから、自分ブランチを切って、作業を始めました。

自分ブランチの最新状態を、Github上にアップロードして、保存しておきましょう。

Githubにアップロードすることを、「PUSH」と言います。

PUSHはとてもかんたんです。

リポジトリ名とブランチ名を確認して、[↑]をクリックします。 

ソースコードの差分が表示されるので、確認して、コメントを入力して、[Push]をクリックします。 

実行ログに「サクセスしたよ」と表示されれば成功です。 

Pull requestsしてみよう

さいごに、自分ブランチで作業した内容を、[main]ブランチにマージしてもらいます。

マージとは、あなたが作業した内容を、メインのソースコードに統合するという意味です。

マージするのは、管理者です。

なので、管理者に「マージしてください!」とお願いをすることを「Pull request(以降、プルリク)」と言います。

プルリクを作成するのは、ブラウザからです。

まず、Githubのリポジトリにアクセスして、[Pull request]をクリックします。 

[New pull requests]をクリックします。 

手順は以下の3つです。

  • ブランチのbase(矢印ひだり)が[main]になっているか確認する
  • ブランチのcompareをクリックして、プルダウンから「自分ブランチ」を選択する
  • Create pull requestsをクリックする

次に、Reviewersで、管理者を追加します。

タイトルやコメントを入力して(厳密なルールはありません。伝えたいことがあれば入力してください)、最後に[Create pull requests]をクリックします。 

プルリクが成功しました。あとは、管理者からの返事を待ちましょう。 

プルリクが送信されると、Slackに通知が飛ぶように連携していますので、とくに連絡は不要です。 

以上で、操作は終わりです。お疲れ様でした。

Githubを使う理由

スクリプトエディタにソースコードは保存されてるのに、なぜGithubにアップロードするのか?という疑問があるかもしれません。

Githubにアップロードするメリットはさまざまです。

スクリプトエディタ上での共同作業は危ない

スクリプトエディタを同時編集すると、保存のタイミング、リロードのタイミングによって、他のメンバーのコードを削除してしまう可能性があります。

ちゃんと気を付けて上書き保存、リロードを行えば問題ないのですが、人間なので、手順を忘れたりします。

このおかげで、「せっかく書いたコードが消えた」なんてことも数多く経験してきました。

ソースコードの保管場所をGithubにすれば、そのような問題はおきませんし、別途自分用のスクリプトエディタを用意して作業する必要もありません。(コンテナバインドスクリプトなどはコードを書き換える手間が発生しますよね)

作業中のコードをブラウザで閲覧・編集できる

Githubは、ブラウザからも確認できます。

リポジトリを選択することはもちろん、ブランチも選択できます。 

実際に、シンタックスハイライトが効いたコードを参照できますし、なんと、ブラウザで編集もできます。 

ここだけの話、わたしはGithubになれていない初心者のとき、ソースコードを書いたら、ブラウザにコピペして保存してました・・・。

現在のバージョンを保存して、挑戦的なブランチにトライできる

これが、いちばんのメリットですが、GASのスクリプトエディタでは「バージョンの管理」ができません。

このバージョンで、いったん保存しておきたい。コードを書き進めたけど、ある時点に遡りたい、と思うことはありますよね。

そんな、スクリプトファイルのバージョンの管理を、Githubは可能にします。

今は個人ブランチを作成しただけですが、個人ブランチから、さらに「個人実験ブランチ」を切ってもかまいませんし、いつでもブランチを廃棄できます。

バージョン管理したいのはソースコードだけではない

この、便利なバージョン管理ツール「Github」が、いまはデザインや、文書管理に使われています。

イラストレーターのファイルや、Wordファイルはもちろんですし、映像を編集したmp4ファイルや、ありとあらゆるものがGithubでバージョン管理されています。

さらに、現在の課題を共有するIssuesなど、課題解決のコミュニケーションツールとして、魅力的な機能が満載です。

徐々に慣れていきましょう。

まとめ

以上で、「Githubでチーム開発を楽にしよう」をお届けしました。

さまざまな企業が、Githubを活用する時代になりました。

つまり、Githubでリポジトリを作成することは、あなたの仕事っぷりを評価してもらうポートフォリオにもなるのです。

また、「あなたの労働市場価値」をはかるとき、Githubの上級者は世に数多く存在しますが、「貿易業界でGithubを使いこなしてる人材」なら、ライバルも少ないかもしれません。

「北海道で食品関係でGithubを使いこなしてる人材」なら、さらにライバルが少ないかもしれません。

スキルは掛け算です。Githubは、働く上でかならず役に立つ武器になるでしょう。

Comments

Copied title and URL