実務未経験エンジニアがLaravel&ReactでWebアプリケーション開発に挑戦してみた！（その６）
0. 初めに
前回、ついにLaravelをインストールすることができました！
今回は、GitHubにリポジトリを作って、SSH接続したいと思います。
今日でとうとう環境構築編も最終回です！
記事の最後にこれまでの記事一覧をまとめておきましたので、まだ読んでいない回がありましたら、ぜひお読みになってください！
では、いきましょう～
1. Gitとは？
そもそもGitって何？
そんな方は、まずこちらをご覧になってみてください。
サル先生のGit入門
Gitを使ったことがない方は、まずこちらのチュートリアルを読んで実際に手を動かしてみるとよいと思います！
Gitは読むだけだとピンとこない部分が多いと思いますので、ぜひチャレンジしてみてください！僕も実際に全部やりました！
ある程度知っている方も一応確認のために説明させていただきますと、Gitは「バージョン管理システム」ですね！いわば、ゲームのセーブシステムみたいなものです。
あるステージでゲームオーバーになっても、セーブしていた地点まで戻ってもう一度プレイできますよね。それと似ていて、Web開発も「新しい機能を実装したらバグってうごかなくなっちゃった！」って時に「いったんとりあえず、動いていた一つ前のバージョンに戻してみようか」なんてことができるわけです。
ただ、慣れないうちは（←僕もいまだに慣れないですがw）、コンフリクトが起きて焦ってしまいますよね💦
2. GitHubリポジトリ作成・接続
Gitの仕組みを誰でも簡単に利用できるように（誰でも簡単にとは言っていない）作られたホスティングサービス（サーバー貸し出しサービス）はいくつかあって、今回はGitHubというかなりメジャーなものを利用したいと思います！
流れとしては、
・SSHキーを生成
・GitHub上にリポジトリ（データを保存・管理する場所）を作成
・SSHキーでローカルのPCと接続
・Laravelのコード（src/）をプッシュ（GitHubに登録）
という感じでいきたいと思います！
では、最初の「SSHキーを生成」から行きましょう！
SSHキーを生成する
SSHは、リモートのコンピュータとローカルのコンピュータが通信するときに用いられるプロトコル（ルールや手順のこと）の一つです。
有名なものだとHTTPSなんかがあります。
よく、WebページのURLの一番最初に（https://~~みたいな感じで）書いてあるので、知っている人も多いと思います。実は、GitHub公式ではHTTPS接続の方が推奨されていたりするのですが、今回はSSHを利用したいと思います。
SSHはSSHキーという鍵を用いて暗号化することで、安全に通信できます（HTTPSも暗号化しています。HTTPSが安全じゃないというわけではないので勘違いしないように～！）。
この鍵というのは、公開鍵と秘密鍵の二つを用いる公開鍵暗号方式と呼ばれる方式を利用しています。
僕もこの辺のセキュリティの内容については、まだ深く理解できていないので、ここで語れることは多くありません。
いずれ、勉強していく予定なので、その時に機会があったらまとめてみたいと思います！( ;∀;)
今回は、以下の手順を踏んでいけば、細かい部分は多少わからなくても接続はできると思います。
おなじみUbuntuを開いて、project-rootに移動して（多分移動する必要はまったくないのですが、なぜか僕は移動したのでありのまま書いています。そんなに気しないで下さいw）、以下のコマンドを実行します。
$ ssh-keygen -t ed25519 -C "youremail@sample.com"
keygeneのところは、たぶんキーを作る（generate）のことだと思います。
-tオプションでは、キーの種類（type）を指定していて、ed25519というアルゴリズムを採用しています（難しいですね💦）。
-Cオプション以下は、コメント（comment）であなたのEmailアドレスを入力して実行してください（このままコピペしてもダメですよ！((+_+))
GitHubのアカウントをすでにお持ちの方は、このアドレスは、GitHubアカウントに登録されているものにしてください。
次にこれらを順に実行します。
$ eval "$(ssh-agent -s)"
$ ssh-add ~/.ssh/id_ed25519
一つ目のコマンドですが、これはSSHエージェントというものを起動するコマンドです。本来であれば、SSHで秘密鍵を使用するたびに、その秘密鍵のパスフレーズを入力する必要がありますが、SSHエージェントを利用することで一度の入力で済むようになります。
詳細は以下の記事を読んでみてください。
SSH-Agentってなんだ？（初心者向け）
コマンドの内容に関しては、コマンド置換と呼ばれる手法で、その結果をevalコマンドで再評価することで、環境変数を代入します。
わけわかめ！（笑）
二つ目のコマンドでは、指定したパスにあるキー（二つ前のコマンドで精製したキー）を実際にSSHエージェントに追加するコマンドです。
難しかったかもしれませんね💦
SSHエージェントは便利だらか使っているので、絶対に必要なものというわけでもないので、よくわからなくても今のところはたぶん大丈夫だと思いますｗ
生成したキーは以下のコマンドで確認できます。
$ cat ~/.ssh/id_ed25519.pub
結果をコピペしてメモ帳などどこかにいったん保存しておきましょう。
GitHubでリモートリポジトリを作成する
SSHキーを生成出来たら、次はGitHub上にリモートリポジトリを作成して、キーの登録をしましょう！
リモートリポジトリという言葉は大丈夫でしょうか！
そもそもリポジトリはデータを保存・管理する場所のイメージです。
Gitでは、リモートリポジトリとローカルリポジトリの二つがあります。
ローカルリポジトリはいわば、あなたのPCです！
そして、今回だと、リモートリポジトリはGitHubが貸し出してくれているサーバーのことだと思いましょう。どこか遠くにコンピュータがあるイメージで！（実際はおそらく物理的に一台のサーバーがあるわけではないとは思いますが、あくまでイメージです）
引用: サル先生のGit入門
ローカルリポジトリで編集して、リモートリポジトリに保存。
リモートリポジトリから保存されている編集履歴をローカルリポジトリに持ってきて、再び作業。そして、再びリモートリポジトリにアップ。
その繰り返しのイメージです（複数人で作業する場合はやや複雑ですが）。
さっそくGitHub上にリモートリポジトリを作りましょう！
なお、GitHubアカウントをお持ちでない方は、こちらから登録してから続きの作業をしましょう～。
サインイン出来たら、画面右側のドロワーを開いて、「Settings」をクリック。
次に画面左の「SSH and GPG keys」をクリック。
「SSH keys」の右端にある「New SSH key」をクリックして、SSHキーを登録します。
Titleはわかりやすいものであれば、なんでもOKです！（僕は「Ubuntu Laptop」にしました）
Keyには、先ほどメモ帳などに保存しておいた長い文字列を全部そのまま張り付けます。
さらに、「Repositories」から右端の緑色の「New」ボタンをクリック！
分かりやすい名前を付けて登録しましょう！
その他のオプションは、そのままでも大丈夫です。
登録できましたか？
接続を確認する
一度Ubuntuの画面に戻って、以下のコマンドを実行します。
$ ssh -T git@github.com
うまく接続でいていれば、以下のようなメッセージが出力されます（ユーザー名のところはあなたが登録した名前が表示されます）。
ローカルリポジトリから最初のコミットをプッシュする
ここまでを振り返ると、まだGitHub上にローカルリポジトリを作成し、SSH接続できるようになっただけです。つまり、まだローカルリポジトリもなければ、それをリモートリポジトリと紐づけしてもいません！
リモートリポジトリをクローン（複製）して、自分のPCにローカルリポジトリを作成する方法もありますが、今回はsrc/配下にすでにLaravelのプロジェクトがあり、これをローカルリポジトリとして扱いたいです。
幸い、リモートリポジトリは作成しただけで、まだ中身は空なので、このsrc/以下のディレクトリをローカルリポジトリとしてコミットして、リモートリポジトリにプッシュすることでローカルリポジトリとリモートリポジトリをつないでみたいと思います。
「ローカルだのリモートだのクローンだのコミットだのプッシュだのとややこしくて、意味が分からん」って感じの方もいると思うので、一つずつ確認してゆっくり一緒にやっていきましょう～！
Gitのインストール
まずは、cdで、srcディレクトリまで移動しましょう。
そこで、以下のコマンド順に実行します。
$ sudo apt update
$ sudo apt install git
これで、Gitを使えるようになりました！
気になる場合は、以下のコマンドでバージョンを確認できます。
$ git --version
僕は2.43.0でした～。
ちょっとだけ設定
$ git config --global user.name "Your GitHub Username"
$ git config --global user.email "your-email@example.com"
これらを実行することで、「誰がコミットしたのか」が分かるようになって便利です。
「Your GitHub Username」と「your-email@example.com」の部分はしっかりと自分のものに変えてくださいね！
いよいよコミット&プッシュ
そうしたら、いよいよローカルのLaravelプロジェクトをリモートリポジトリに登録します！
コミットはローカルのPC保存されている変更履歴（今回は初めてなので履歴というよりは保存されているディレクトリそのもの）をローカルリポジトリ（厳密にはブランチ）に登録することです。さらに、プッシュはコミットされた変更履歴をリモートリポジトリ（これまた正しくは、そのブランチ）に登録することですよね！
srcにいない場合は、cdで移動して、そのあと以下のコマンドを実行していきましょう！
Gitの初期化（まだローカルリポジトリは作成していないので新規のリポジトリを作成します）
$ git init
リモートブランチを追加（今作ったローカルリポジトリに「君のリモートリポジトリはこれ（先ほど作成したGitHubのリポジトリ）だよ」と教える感じです）
$ git remote add origin git@github.com:あなたのユーザー名/lab-review-app.git
ローカルブランチ名を変更（GitHubでは、主となるブランチ名がデフォルトでmainとなっています。ローカルの方もmainに合わせたいので以下を実行します）
$ git branch -m main
※現在のローカルリポジトリ名は以下のコマンドで調べられます。
プッシュが終わった後にでも確認してみましょう。
$ git branch
結果
srcディレクトリをステージ（コミットの前段階）に追加（.は現在位置を表すのでしたね！）
$ git add .
メッセージ付きでコミット（コミットメッセージは何でもよいです！）
$ git commit -m "Initial commit with Laravel project"
プッシュ（ブランチ名はmainです！）
$ git push -u origin main
できたら、GitHubのリポジトリを除いて見ましょう！
Laravelのフォルダがアップロードされていますね！！
お疲れ様でした！
3. 【補足】ブランチについて
いかがでしたか？一応、本日の作業としては以上です。
ここからは、補足説明として、ここまでで時々登場していたブランチという言葉について軽く触れますね。
「コミットとかプッシュはわかるけど、ブランチとかプルがよくわからない！」っていう方も多いと思います。
現在僕は、研修期間中ですが、研修会場で僕の周りでもブランチでつまづいてしまっている方が多いという印象でした。
そこで、分かりやすい説明をします！！
実は、僕が受けている研修先の講師の方の説明が非常にわかりやすかったので、パクらせてもらいます！すみません。(>_<)
もちろん自分流にアレンジしています。
教材の転用等は一切していませんので、ご安心ください。
ブランチとは平行世界
みなさんは、シュタインズゲートというアニメをご覧になったことがありますか？
いわゆるタイムリープ系のアニメです。
僕も見たのは何年も前なので、正直内容はあまり覚えていないんですけど、ブランチをタイムリープものアニメで登場するパラレルワールド的なものだと思うとわかりやすい（個人差あり）ので、ご紹介します。
時間の流れを一方通行と考えると、こんな感じの矢印で表されます。
左側が過去で、右側が未来です。
昔、本能寺の変で織田信長さんが亡くなったわけですが、もしタイムマシン的なものが発明され、織田信長さんのファンがそれを阻止したとしたら...??
織田信長さんが生きているため、天下統一がなされ、世界が今とは大きく変わっていた可能性もあります。このように可能性の数だけ、平行世界（パラレルワールド）が作られます。
ここではこの平行世界をブランチに例えています。
ファイルの編集の仕方の可能性は無数にあり、その数だけ平行世界を分岐させることができるということです。これがいわゆる新しいブランチを切るという行為なのです。
次に、チェックアウトですが、これは平行世界を移動することを許された特別な能力者であるあなたにしかできない行為です。
すなわち、作られた平行世界の間を自由に行き来することができるのです。
これが、チェックアウトというブランチを移動するという行為です。
特に今自分がどのブランチにいるのかというのは、非常に大切で、
$ git branch
というコマンドで確認できます。
そして、最後がマージです。
「別の平行世界がいいな」と思ったら、今いる平行世界に取り込み世界を統合することができます。これがマージです。
例えば、自分が大金持ちになっている平行世界を自分のいる平行世界に取り込みたいなんて場合です。「そんなことをせず、その自分が大金持ちの世界にチェックアウトすればいいのでは？」と思うかもしれません。
ここが難しいところなのですが、ブランチには偉いご主人様のブランチ（masterやmainと呼ばれます）とそこから分岐した手下のブランチの２種類があります。
偉いブランチ（以下masterブランチ）は、神様（顧客）に「今、世界はこんな感じです」とお見せするものであるため、安定したものを維持しなければなりません。
一方で、masterブランチから分岐した平行世界では、先ほど言った通り、可能性の数だけ好きなだけ分岐できますので、いろいろと変更を加えることができます。
こうして出来上がったお金持ちになった平行世界をmasterブランチ（神様にお見せするおおもとのブランチ）にマージしてリリースするわけです。
最後にコンフリクトについてお話しします。
コンフリクトは、世界をマージしようとした際に、分岐してからお互いに変更を加えた結果、常識が違っていてうまくマージできない状態です。
ある平行世界のある時点では、「大金持ちになる」という変更がなされたとします。
また、別の平行世界のある時点では、「死亡する」という変更がされたとします。
死亡してしまった平行世界に、大金持ちになっている平行世界をマージしようとすると、常識が違いすぎてうまくマージできません（死んでしまったらお金持ちもくそもありません！）。
コンピュータは、どちらの変更を採用してよいのかわからず、エラーが発生します。
そのため、大金持ちになっている世界を採用するのか、それとも死亡している世界を採用するのかを選んで手動で直す必要があります。
これがコンフリクトを解消するという行為なのです。
どうでしょうか？なぜか口調が若干変わりましたが、雰囲気はつかめたでしょうか？（笑）
今後は、新しい機能を実装するたびに新規ブランチを切って作業していきます！
ざっくりと理解出来たら、次回以降一緒に頑張っていきましょう～
4. まとめ・次回予告
いや～、長かったですけど、ついに環境構築編が終わりました。
Ubuntu・WSLのインストールから始まり、Dockerを使って仮想環境を構築、Laravelをインストールして、最後にはGitの環境構築までやりました！
とうとう次回からバックエンド実装編ということで、ついにLaravelのコードの中身を書いていきます！お待たせしました！
環境構築は非常に大変だったと思いますが、経験者が語るにDockerが普及したことでこれでもかなり簡単になった方らしいです。（笑）
何はともあれ、ここまで読んでくださって本当にありがとうございました！
これからもよろしくお願いします。
また、これまでの記事でまだお読みになっていないものがございましたら、以下にまとめておきましたので、ぜひご覧ください！
それでは、また次回お会いしましょう～！
これまでの記事一覧
・その１: 要件定義・設計編
・その２: 環境構築編① ~WSL, Ubuntuインストール~
・その３: 環境構築編② ~Docker Desktopインストール~
・その４: 環境構築編③ ~Dockerコンテナ立ち上げ~
・その５: 環境構築編④ ~Laravelインストール~