こんにちは。有吉です。paiza転職の企業向け営業を担当しています。
このブログを熱心に見てくれている方だと「プログラミングをやっている営業」と覚えてくれているかもしれません。業界知識を得る目的で、通常業務の合間にプログラミングを勉強していて、過去にもいくつか記事を書いています。これまでに学習した内容はこちらの記事にまとまっているので、お時間がある人は見てもらえるとうれしいです。
今回はより開発現場を知るため、開発業務に欠かせないGitHubの基本的な使い方を弊社のエンジニアにレクチャーしてもらいました。エンジニアの人にとっては基本中の基本しかやっていませんが、営業でもこういうことをしている人がいるんだぞと知ってもらえればと思います。
あと、せっかくVS Codeが使えるようになったので、Rubyの実行環境をローカルに構築した話も書いておきます。
- GitHubとは？
- なぜ営業なのにGitHubを覚えようと思ったのか
- 事前準備
- 本題：GitHubを使ってWebページ更新作業を実施する
- 番外編：RubyをVS Codeで実行する
- GitHubを使ってみての感想と得られたもの
- まとめ
GitHubとは？
今さら私が説明するまでもないのですが、GitHubが何物かを知るためには、まずGitについて理解する必要があります。Gitは簡単に言うと、ファイルの変更履歴を管理してくれるシステムのことで、一般的にはバージョン管理システムと呼ばれています。
GitHubはそのGitのバージョン管理の仕組みを使ったWebサービスのひとつです。Gitを用いたサービスには、他にもGitLabやBacklogなどがあります。
GitHubを利用するメリットはいろいろありますが、エンジニアの場合は
- 変更前後の差分を確認するのが容易である
- チーム開発で同時に同じファイルを修正しても管理しやすい（誰がどう修正したか、どのバージョンにマージすべきか、などが分かりやすい）
- オフライン環境でも作業ができる
あたりが挙げられるでしょうか。つまり開発には欠かせないサービスと言えそうですね。
なぜ営業なのにGitHubを覚えようと思ったのか
paizaはITエンジニア向けの転職サービスを運営しているのに、それらをお客さまに提案する営業が技術や開発業務のことをまったく知らないままでいいのだろうかと疑問に感じたのが一番の理由です。
本来、営業職はプログラミングとは縁遠い仕事です。もちろん、自分もpaizaに入社するまでまったくやったことがありませんでした。
しかし、paizaというITエンジニア向けのサービスを営業しないといけない中で、お客さまからエンジニア採用についての課題や悩みをお聞きすることがあります。開発チームの体制や業務における問題点まで深堀りして考えていく機会も多いです。「技術的なことが分からない状態では、お客さまによい提案ができない」と感じることが多く、悔しい経験をすることも多々ありました。
それもあって、業務知識を増やす目的で開発業務をもっと知りたいと思うようになりました。これまでにプログラミングを学んできたのもそれが大きな理由です。そして、もっとエンジニアと近い目線になるために、今回はさらに踏み込んでGitHubも知りたいと思うようになりました。よく耳にする「草を生やす」とか「プルリクを投げる」ことが具体的に何を指しているのかを知るだけでも、自分にとっては何かしらのプラスだろうと。
また、もし自分がGitHubを使えるようになれば、これまでエンジニアに依頼していた、サイト上の軽微な文章の修正くらいは自分でできるのではないかとも思いました。そうすれば本来エンジニアにお任せしたいもっと高度な業務に集中してもらえますしね。
事前準備
※ここからはしばらくGitHubの基本について説明しています。「そんなもんとっくに知ってるよ！」という人は下（「GitHubを使ってみての感想と得られたもの」あたり）まで飛ばしてください……。GitHubの基本を知りたい初心者の方はぜひここも読んでください。
GitHubアカウントの作成
GitHubのサイトにアクセスし、ユーザー名、メールアドレス、パスワードを入力し「Sign up for Github」のボタンを押してアカウントを作成します。
個人利用は無料プランで問題ないと思います。
ローカル環境にGitをインストール
自分のPCでGitを使うためには環境構築をする必要があるのですが、MacはGitがもともとインストールされてるためそのあたりは割愛します。Windowsの方は「Git for Windows」をインストールしてください。
ターミナルで以下のコマンドを実行してバージョンが表示されればOKです。
$ git --version
git version 2.17.2 (Apple Git-113)
なお、SSH接続でリモートリポジトリとローカルリポジトリのやり取りをする場合は、別途設定が必要になります。
（参考）GitHubの登録手順。SSH設定＆リポジトリをclone, pushまで解説 | vdeep
補足：リモートリポジトリとローカルリポジトリ
まずリポジトリとは、ファイルなどの履歴を管理・記録する場所です。
Gitにはリモートリポジトリとローカルリポジトリがあります。リモートリポジトリは、サーバ上にあるリポジトリのことで、チームでファイルを共有するために利用します。paizaの本番環境のファイル群はここにあるんですね。
ローカルリポジトリは、各個人が作業するために自分のPC上に作成するリポジトリです。
リモートリポジトリのファイルをローカルリポジトリに複製（これをクローンと呼びます）して修正し、リモートリポジトリのファイルに修正内容を反映するといった感じで使い分けます。
VS Codeをインストール
今回はローカルでのファイル編集をVS Codeでおこないます。公式サイトからダウンロードしてインストールしてください。
Macの場合は、以下のページの手順が分かりやすいかなと思います。Windowsの人は調べてみてください。
本題：GitHubを使ってWebページ更新作業を実施する
0. やりたいこと
さすがにいきなり実際のpaizaのページを変更するのは危ないので、今回はpaizaのサービスのひとつである（と仮定した架空の）Webページに対して、以下の作業を実施しました。
イシューを立てる→リモートリポジトリから修正対象のファイルをローカルリポジトリにクローンする→作業用のブランチを切って修正する→ローカルでコミットする→リモートにプッシュする→プルリクエスト（プルリク）を投げる→エンジニアにレビューをお願いして問題なければマージしてもらう→Webページに反映されたことを確認
講師はpaizaラーニングの講座を作っているエンジニアにお願いしました。
ちなみにpaizaラーニングでは、バージョン管理システムについて学べる動画講座「Git入門編」を公開しています。仮想環境を使って、ブラウザ上で実践的な課題をこなしながら学べるのでおすすめです。
架空のWebページは、同じく動画講座の「HTML/CSS入門編」のレッスン3のチャプター3の課題を流用します。（レッスン1、2は無料講座なのでそちらの課題でも構いません。HTMLファイルであればなんでもよいです。）
GitHubには「GitHub Pages」という機能があって、GitHubの画面からHTMLファイルや画像ファイルをアップロードをするだけでWebページを作成できます。
画面右上の「Your Repositories」メニューを選択し、「New」で新規作成画面になるので、適宜項目を埋めて「Create Repository」で作成します。
こんな感じでindex.htmlとneko.jpgをアップロードして…
https://ユーザー名.github.io/リポジトリ名/
にアクセスするとWebページとして表示されます。HTMLファイルをアップロードしただけで…！かなり便利です。
なお、「GitHub Pages」はデフォルトでは公開されない設定になっているため、Settings > GitHub Pagesで「None」を「Master Branch」に変更が必要です。（下図の通り設定変更したらOKです。）
1. イシューの作成
イシューとはGitHubの課題管理機能のことで、バグや改善要望などの課題とGitHub上の情報（ソースコードの修正・変更、プルリクエストなどの履歴）を関連付けて管理することができます。
趣味で作っているサイトではイシューを作成する必要はないかもしれませんが、チーム開発では使用することがあると思います。
今回は複数人で同じWebページの異なる箇所を修正しようとしている想定のため、それぞれがイシューを作成し「こういう目的でこういった修正しようと思います」というのを宣言することにします。
私はさきほどのページの「猫テーブルに『餌の時間』という項目を追加する」ことになりましたので、以下のようにイシューを作成しました。
issuesタブ > New Issueボタンで作成できます。
2. ローカルリポジトリにクローン
リモートリポジトリにあるindex.htmlを編集するためにローカルリポジトリにクローンします。
httpsでクローンする場合、ターミナルで以下のコマンドを実行してください。URLはリポジトリの画面からコピーできます。
$ git clone https://github.com/ユーザー名/クローンしたいリポジトリ名
こうなったら成功です。
lsコマンドで本当にクローンできたか見ておきます。
TestWebPageが存在していて、その中にindex.htmlとneko.pjgがありました。大丈夫そうですね！では、作業用のブランチを作成して、VS Codeでindex.htmlファイルを編集していきましょう。
3. 作業用ブランチを作成
今どのブランチにいるか確認するには以下のコマンドを実行します。クローンしただけなのでmasterにいるはずです。
$ git branch
* master
続いて以下のコマンドで作業用のブランチを作成します。「update-index」というブランチを作ってみました。
$ git checkout -b update-index
Switched to a new branch 'update-index'
もう一度以下のコマンドを実行すると、今作ったブランチにいることが確認できます。
$ git branch
master
* update-index
4. VS Codeでファイルを編集
クローンして作業用に作ったブランチで修正するため、他の人の編集には影響がありません。心配せずガンガン直していきましょう。
VS Codeの左側のSource Controlメニューでさきほどクローンしてきたフォルダを指定し、index.htmlを開くとVS Code上で編集できます。
「餌の時間」項目を足していきます。
修正が終わったら保存します。ソース管理の画面に切り替えてみると、コミットされていないファイル（今修正したindex.html）が表示されていることが確認できます。
5. ローカルリポジトリにコミット
修正したファイルをローカルリポジトリにコミットします。
上の画像の赤枠で囲った真上のテキストボックスにコミット時のコメントを書きます。今回の修正では「add 'Feeding Time'」と書いてみました。
さらにその上にあるチェックマークをクリックするとコミットできます。CHANGESが0になりました。
ターミナルでの操作はやっぱり抵抗があるので、こうやって画面を見ながら操作できるのはありがたいですね…。
リモートリポジトリのファイルが本当に変わっていないか気になったので、さきほどアクセスしたURLにアクセスして、元のままであることを確認しました。
6. リモートリポジトリにプッシュ
今回はターミナルから以下のコマンドでプッシュします。
$ git push origin update-index
プッシュするとユーザー名とパスワードを聞かれるので入力してください。
このあたりいろいろ設定をしておくと、VS Codeの画面からでもプッシュできます。（今回は割愛します。）
正常に終了しました。GitHubの画面からブランチ「update-index」の変更に対してプルリクエストをするようメッセージが表示されています。親切！
6. プルリクエストを投げる
GitHubの画面を見てみると、「update-index」ブランチの情報が表示されていることが確認できます。
「Compare & pull request」をクリックします。
下のほうで修正前後の差分も見れるのですが、なんだかインデントとスペースがおかしい……。本来であれば再度修正したほうがいいですね。
どういう変更を加えたか記載して、プルリクエストを送りました。
人生で初めてのプルリクエスト完了です！ただし、この時点ではまだWebページへ修正は反映されていません。
そしてこの画面で気づきましたが、イシューを#1で作成したのに、コミット時のコメントに番号をつけるのを忘れて紐付けられていません…。番号を書くと自動的に関連するイシューへリンクが貼られるので管理が楽です。
7. エンジニアレビュー＆masterへマージを依頼
このあとは修正内容が問題ないかエンジニアにレビューをしてもらい、問題なければmasterブランチへマージしてもらいます。
複数人で同じファイルを修正すると競合（コンフリクト）が起こって中身を見てもらわないといけない場合もあります。今回は単純なHTMLファイルの修正なので大丈夫だと思います。
自分がプルリクエストされたものをマージすることはないと思いますが、以下の手順でできますので参考までに。
「Merge pull request」をクリックします。
問題がないことを確認し、マージを実行します。正常にマージできるとこのような画面になります。
マージされるとプルリクエストはクローズされます。
8. Webページに修正が反映されたことを確認
ここまで来ると修正内容がWebページに反映されます。ブラウザ上で確認してみましょう。
猫テーブルの右列に「餌の時間」が表示されました！やったー！
番外編：RubyをVS Codeで実行する
わたしはスキルチェック*1をRubyで受けることが多いのですが、今まで解いた問題のコードは会社のPCにテキストファイルで保存してました。
でも最近ファイル数も多くなってきて、最初の提出・2回目の提出みたいにバージョンがあるとややこしくなってきました。それに家のPCから見れないのが地味に困ります。
そこでせっかくGitHubを使えるようになったので、「skillcheck」リポジトリを作成して管理することにしました。
※スキルチェック本番のヒントになるような情報や解答コードは公開NGのため、公開のリポジトリには置かないようにお願いします。
するとエンジニアに「Rubyの実行環境もローカルに作ってみたら？」と言われたのでやってみようと思います。
1. Rubyをインストール
Rubyがインストールされているかどうかはターミナルで以下のコマンドを実行して確認できます。
$ Ruby --version
ruby 2.3.7p456 (2018-03-28 revision 63024) [universal.x86_64-darwin17]
バージョン情報が表示されたらインストール済です。まだの場合はご自分の環境に合わせてインストールしてください。
2. VS Codeの拡張機能をインストール
VS Codeの画面左のメニューから「Extensions」を選択し、「code runner」と入力して下図のとおりインストールします。
3. RubyのファイルをVS Codeで実行
Webページの修正作業でやったようにGitHubでリモートリポジトリ（スキルチェック本番のコードを置く場合はPrivate）を作成し、そこにRubyのファイルをアップロードして、ローカルリポジトリにクローンします。
クローンできたらVS Codeで作成したRubyファイルを開きます。コマンドパレットで「code run」と検索すると候補が表示されるので、コマンドを選択して実行します。たったこれだけで…
「Hello Ruby!」と表示されました！
ローカル環境はオフラインでも実行できるのでいいですね。
ちなみに環境構築が面倒な方は主要言語のプログラムをブラウザ上で実行できるpaiza.ioをご利用ください。ちょっと試すのにとても便利です。
4. 外部から与えられる値を受け取って実行
スキルチェックの多くは標準入力で与えられた値に対して処理をするため、そのやり方も習得しておきます。今回はテキストファイルに入力値を記載して、それをRubyのファイルに読み込ませて実行します。
2つ値が与えられるので、掛け算の結果を出力するプログラムにします。
掛け算の処理を書いたほうをmultiple.rb、入力値を書いたほうをinput.txtというファイル名にしました。
# 値を取得してnum1, num2に入れる num1 = gets.to_i num2 = gets.to_i # 取得した値を掛け算して出力する puts num1 * num2
2
5
ターミナルで以下のコマンドを実行します。
$ ruby multiple.rb < input.txt
結果が正しく出力されました。
ローカルリポジトリで追加・修正したファイルがあればコミットして、リモートリポジトリに反映しておきましょう。
GitHubを使ってみての感想と得られたもの
HTMLファイルにほんの少しの修正を加えるだけでも、本番に反映するまでは結構手順があって大変だなと感じました。ただ、それも大きなミスを未然に防止するためと思えば、当然すべきことなのだろうなと思います。
これまで「静的なページだし、ここの一行を直すだけだから、すぐに終わるだろう」と思いながら依頼することもなくはなかったのですが、とんでもなかったですね。ましてや、数十万、数百万の人が使うサービスとなればなおさらですよね。
複数人で相互にチェックしあう大切さもよく分かりました。実際の本番環境のソースファイルはもっと複雑でしょうし（そもそも静的ベージだけではない）、動作確認やテストも念入りに実施しないといけません。ちゃんとしたサービスを作るためには、相応の手間とコストがかかっているのだなと痛感しました。
ただ、一方でこれらの手順で作業をしてみて
- GitHubは意外に怖くない！使ってみると分かりやすい部分も多い
- ターミナルでコマンドを実行することへの苦手意識が少し和らいだ
- 修正箇所の前後比較が簡単にできるので便利
- ローカルで修正後、レビューしてもらって大丈夫だったら本番に反映されるので安心感がある
- 複数人での開発では誰がどういう目的で作業をおこなったかきちんと書くことが大事
などなど得られたものもたくさんあります。
サポートしてもらいながらではありますが、HTMLを自分で修正し、エンジニアにレビューをしてもらって、Webページの更新までできた達成感もありました！ もう少し自信がついたら自分でも実際のpaizaのページを更新してみようと思います！
まとめ
paizaの営業の私が初めてGitHubを使ってみたことについて書いてきました。
これまで、不具合があるとSlackでエンジニアに対応を依頼していたのですが、いつもサクッと調べたりやってくれたりしているように見える裏で「こんな感じでやってくれてるのかな」と、エンジニアへの感謝の気持ちがさらに高まりました。
今回は事前にpaizaラーニングで「Git入門編」をやっておいたので、何も分からない状態から始めるよりは理解できたと思います。とはいえ分からない用語も多く、随所で調べたり質問したりもしました。
技術的なことやプログラミングの勉強はついサボってしまうときもあるのですが、やはり継続的にやることが大切ですね。
GitHubをポートフォリオで利用してみたいなという方は、「ITエンジニアの就活準備編2: ポートフォリオ制作」講座も参考になると思いますのでチェックしてみてください。
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
*1:出題されるプログラミング問題を解いた結果から、プログラミングスキルをS・A・B・C・D・Eの6段階で評価するpaizaのサービスです。
