Web プログラミング

【もりけん塾21日目】エンジニア初心者がはじめてつくるLPの手順【7day】

もりけん塾生になって21日目のねこらのん(@nekoranon256)です。

 

サイトCSSに異常が発生しあたふたして無駄な時間を過ごしてしまったので、今日から改めてLPを開始。

 

もりけん塾課題、githubで草を生やす

もりけんさん
LPもgithub管理しちゃえばいいと思う
github管理しよ!けどgithubっていまいちよくわからない…

 

そもそもPC初心者 で右も左も分かっていないほど無知レベルの私。

 

基礎的なことを知らないので、まずは基礎から1つづつ理解することに!

 

gitとgithubの違い

gitはバージョン管理システムの1つでgithubはGitの仕組みを利用したウェブサービス。

 

バージョン管理システム?なにそれ

 

バージョン管理システムversion control system、VCS)とは、コンピュータ上で作成および編集されるファイルの変更履歴を管理するためのシステム。特にソフトウェア開発においてソースコードの管理に用いられることが多い。

引用:Wikipedia

 

ん〜よくわかりません…笑

 

わかりやすい記事を探すことに…!

 

【初心者向け】Gitってなに?①まず流れを理解する(コードなし)の記事を参考にしました!

 

例えばなにかファイルの書き換えをするとき、元データを失わないためにどのような工夫をするでしょうか。ほとんどの場合、保存用にコピーを作成しておくというのが定番の方法だと思います。
ですが、誰しもこんな経験があるのでは。

  • 元データの保管が面倒
  • 'meeting_3月.txt'、'meeting_最新.txt'といった名前のデータが複数できてしまう
  • チームで触っていて、最後に書き換えたのが誰なのかわからない
  • 先輩も同時に編集していたのに、知らずにタッチの差で上書きしてしまった
  • 書き換えたよ~と言われても(あるいは自分でも)、どこを換えたかわからない
  • 何回か前の更新状態の方が良かった、戻したい…

ある~~~!!
こんな事態を解消してくれるのがGitというバージョン管理システムです。

引用:【初心者向け】Gitってなに?①まず流れを理解する(コードなし)

 

データが多くなって一人でしているにも関わらず混乱することがるので、これを解決できるシステムがあれば便利…!

 

あるあるを全部解決します。

  • 更新履歴はGitに保存されるので、バックアップ用のファイルコピーが不要になる
  • ファイルを「いつ」「誰が」「どこを変更したか」という情報も記録できる
  • それにより、編集を重ねたファイルも過去のある状態に復元することができる
  • どこを変更したか、差のあるところを表示することができる
  • あるファイルを自分が開いたあとに誰かが編集をはさんでいた場合、 アップロード時に警告が出るので、知らないうちに上書きという事態を防ぐことができる

素晴らしいですね。最高です。
ちなみにGitHubは このGitの仕組みを利用したウェブサービスで、無料で自分のコードやデータなどを保存したり、世界に公開して、他の人と一緒に書き換えることができます。

引用:【初心者向け】Gitってなに?①まず流れを理解する(コードなし)

優れものですね…!

 

「いつ」「誰が」「どこを変更したか」を記録してくれると編集などもしやすくなりそう!

githubの3つのメリット

githubはOSS(オープンソースソフトウェア)なので自分の成果物を公開することができます。

 

githubに成果物を掲載するメリットは以下の3つ。

  • レビュー内容
  • フィードバック
  • 採用時にソースコードを見てもらう

この3つより自分のレベルを相手に知らせることが可能です。

 

採用側に

  • できること
  • できないこと

を目に見える形で知ってもらえるので採用されたときの認識の大きなズレを生じさせないことができます。

 

環境構築:gitの準備

環境構築は今日からはじめるGitHub 〜 初心者がGitをインストールして、プルリクできるようになるまでを解説の記事を参考にしました。

 

macはターミナルを開いて「git --version」を入力し、versionが表示されればOK。

 

環境構築:github上でリモートリポジトリを作成

同じもりけん塾生のharuさん(@fuwafuwahappy)の【GitHub勉強会】GitHubに草を生やす方法【day58】を参考に進めています!

 

まずは記事にある、github上でリモートリポジトリを作成します。

 

このリモートリポジトリは作成できましたが「緑のcodeボタン」がないんですよね…

 

私のページ。

 

あぁ英語がスラスラ読めるようになりたい…

 

日本語でも難解なのに英語て…多分ここにかかれている文章を理解すればすすめるはず…!

 

リモートリポジトリでつまづく

haruさん(@fuwafuwahappy)との画面と違う…進まない…

 

と思ってもりけんさん(@terrace_tech)に相談すると、

 

もりけんさん
左上の方のcordingって青いところを押してください

 

これで進みました!

 

こんな初歩的なところでつまづく私…でもこれも知れたから一歩だ!

 

環境構築:コマンド「branch」の準備【エラーの理由はセットアップをしていないから】

ターミナルで「git branch」をしたらまたエラー。笑

 

ん〜なんでだろ?と思い調べるとGitHub 初心者による GitHub 入門(1)〜 git のインストールとセットアップ・リポジトリの作成・ clone 〜に出会う…!

 

この記事によると、

  • gitのセットアップが必要
  • you'll need to download, install, and configure Git on your computer.

だそうでセットアップをしていないことが判明!

 

さっそくセットアップ。

~ % $ git config --global user.name "~" $  git config --global user.email "~@gmail.com

dquote>

dquote>

dquote>  $ git config --global user.name "~" $  git config --global user.email "~@gmail.com

zsh: command not found: $

 

1回目のセットアップをしたら「dquote」が出たので、2度実行。

 

しかし「command not found」という結果に…

 

セットアップが問題じゃないってことなのかな?入力の仕方の問題かな?

 

一旦、違う勉強をしてからまたすすめてみます!

gitやgithubの用語

gitとgithubの用語がわからなかったのでまとめました。

 

git用語

git:バージョン管理システム。分散型バージョン管理。ローカル環境に変更履歴を含む完全なリポジトリの複製が作成されるという仕組み。ネットワークに接続していなくても更新作業が可能

 

ローカル環境:自分のPCなど

 

github:gitの仕組みを利用したウェブサービス

githubでできること

  1. 無料で自分のコードやデータなどを保存
  2. 世界中へ公開
  3. 他人と一緒にコードを書き換えることが可能

 

リポジトリ:ファイルやプログラムなどの「なにかの保管場所」のこと

 

2種類のリポジトリ

  1. リモートリポジトリ:サーバー配置して複数で共有する【公開用でアップロード用】
  2. ローカルリポジトリ:各人がそれぞれのPC上で使う【普段使い】

流れ→自分で編集した(ローカルリポジトリ)ものを公開する(リモートリポジトリ)

<Linuxで登場する「リポジトリ」>
ファイル(ソフト)の置いてある場所

 

ワーキングツリー:実際に作業しているディレクトリ

 

ディレクトリ:書類入れ。
(例)PC上では紙(いろいろ書ける)と箱(紙や箱を入れることができる)の2つのみある

 

インデックス:「次に保存したい」状態のまま維持

 

コミット:インデックスに追加したファイルを自分のローカルリポジトリに登録。修正内容をローカルリポジトリに反映(前回の更新から現在の状態の差分を記録したものが作成)。履歴がリポジトリ上で格納されてく。

 

プッシュ:ローカルリポジトリからリモートリポジトリにアップロードして共有するための操作のこと。

 

プル:リモートリポジトリ上で自分以外の人が更新していくときに必要な操作。プルによってリモートリポジトリから最新の変更履歴をアップロードでき、自分のローカルリポジトリに内容が取り込まれる。

 

クローン:リモートリポジトリで複製し自分の手元で作業する操作。

 

ブランチ:一連の修正を主流から枝分かれのように分岐して管理する

 

マージ:異なるブランチの修正内容を反映すること。

 

コンフリクト:マージの際にリモートとローカルで同じファイルの同じ箇所に対して修正がされており自動でマージできないこと。

 

チェックアウト:他のブランチへ移動し作業ディレクトリを任意のコミット状態にすること

 

流れ

  1. 新規作成かリモートリポジトリからクローンで手元に自分のローカルリポジトリ作成
  2. 編集しローカルリポジトリにインデックスを経てコミット
  3. 変更履歴をローカルリポジトリからリモートリポジトリにプッシュし自分の変更をアウトプット
  4. 他の人の変更をインプットしリモートリポジトリにプッシュし変更履歴をDownload。自分のローカルリポジトリで編集し①へ戻る

SVN:ファイル変更履歴を管理するシステムの1つ

 

github用語

プルリクエスト:コードレビュー機能

フォーク:他の開発者のりぽをgithub上で複製し自分で編集できるようにする機能

イシュー:課題管理機能

オーガナイゼーション:組織や団体、プロジェクトなどのグループのこと

Gist:短いコードやメモの共有サービス

Pages:ホスティングサービス

 

おわりに

 

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada