gitを使ってみる【準備編】

2015/08/17/Mon

gitというのは簡単に言えば、
ソースコードなどの変更履歴を保存して
管理してくれるシステムです。
また詳しくは次回説明します。

gitを使うにあたって、
・gitのインストール
・Source Treeのインストール
・GitHubのアカウント作成
・GitHubアカウントにSSHの鍵を登録
を、行いました。
各項目ごとに参考サイトを載せるので見てください!

1

gitをインストールするにあたって、
homebrewをインストールしました。
homebrewは、簡単にいうと
gitを簡単にインストールするために使う道具です。

homebrewをインストールするためには、
ターミナルを起動させます。
言われたとおりにコマンドを入力し、
なんとかインストール完了。
そこからgitをインストールです。
なぜか妹のPCには古いgitがはいっていて、
新しいバージョンに切り替えるのに
とても時間がかかってしまいました。
姉は問題なくインストールに成功しました。
参考サイト
gitのインストール(Mac)

2
Source Treeのインストールは、
英語だらけでよくわからなかったけれど
とりあえず
クリック、クリック、クリックでインストールしました。
参考サイト
Source Treeのインストール

3
これも、作成方法を教わりながらアカウントを作成していたので、
英語を調べながら作業することなく、作成できました。
参考サイト
GitHubのアカウント作成

4
ここでもターミナルの登場です。
手順のページに書かれているコマンドをコピーして
それをターミナルにペーストしてを繰り返して、
秘密鍵・公開鍵を生成しGitHubに登録しました。
参考サイト
GitHubアカウントにSSHの鍵を登録

秘密鍵・公開鍵と突然言われても
わからないですよね!!
私たちも最初はさっぱりわかりませんでした。
普通はログイン画面などでIDとパスワードを入力すれば、
どのPCからもサインインすることができます。
それを防ぐために秘密鍵と公開鍵というものを使い、
秘密鍵が入っているPCからのみサインインできるようにします。
そして、その秘密鍵を使うための暗号がパスフレーズというものです。
秘密鍵と公開鍵は認証のために使う2つのファイルであって、
ペアになっています。

秘密鍵が鍵、公開鍵が鍵穴という感じです。
公開鍵は認証を行なうサーバーやWEBに預けて、
秘密鍵は自分のPC上に自分しか見られないように扱います。
SSHは結びつけるもののような感じです。
これは説明できるようになったら説明します。…すみません。

これまでの作業の画面なのですが、ほぼ英語!!!
実は、妹は英語がさっぱりで今まで逃げ続けてきたのです。
なのにここにきて…
…逃げたい。逃げられない。
姉に助けてもらいながらなんとか全部できました。
これからも英語がたくさん出てくるので、
勉強しなくてはいけないなーとすごく感じた妹でした。

gitを使ってみる【撃沈編】

2015/08/18/Tue

昨日のおわりにgitの事前準備を行なったので、
今回は初めてgitをつかってみました!

gitはPCの中に保存する場所を作ってくれて、
保存した履歴とかを管理してくれるという感じ。
ターミナルでコマンドを入力して操作することもできますが、
それでは大変なので、簡単に操作できる
昨日ダウンロードしたSource Treeを使って、
自分が保存したいファイルをgitに教えていきます。

例えば自分が前に書いたソースコードを
変更したあとに、Source Treeを見てみると!
変更したところをこんな風に教えてくれるんです!

modification

姉妹「おおおおおおおおおおおおおおおおお!!!!!!!!!!!」
すごいですよね、、、感動しました、、、
でも、ここからの作業が問題でした笑

そもそもなぜgitにバックアップをするのかというと、
ソースコードとかは少しだけでも変化すると、
動かなくなったり表示が変わってしまいます。
例えば、「昨日までは動いてたのに!?」みたいな感じです。
その場合、昨日のソースコードに戻りたいですよね。
そこで、バックアップの出番です。
gitのバックアップは
保存したソースコードの変更した履歴を取っておいてくれます。

ということで、

・gitにバックアップ(コミット)する
・GitHubにアップロード(プッシュ)する
・GitHubから自分のPCにダウンロード(プル)する
・新規の人が他人のファイルを
 新しく自分のPCにダウンロード(クローン)する

という作業をやったのですが、、、
これを理解するまでに時間がかかり、
姉妹ふたりとも何回もかたまりました。。。
頭が「?」でたくさんなので、
これから使っていって理解した段階で説明しますね><;

gitを使ってみる【解決編】

2015/08/21/Fri

以前、gitをつかってみるの撃沈編をお送りしました。
・gitにバックアップ(コミット)する
・GitHubにアップロード(プッシュ)する
・GitHubから自分のPCにダウンロード(プル)する
・新規の人が他人のファイルを
 新しく自分のPCにダウンロード(クローン)する
という作業のことですよ、覚えてますか!!

初めてgitを使ってみてから
何回もgitを使い、慣れていこうと頑張ってみた姉妹。

姉妹「あれ、あの日は混乱してたのに、
   使ってみたら意外と使えてる…!」

そうです。深く考えなければ、なんだかんだ使えてるのです。
これなら頑張れば説明できるのではないかと思い
解決編を書こうと思ったのです。

ー謎解きー

〜リポジトリとは〜

gitでファイルを管理しておけば、
保存した履歴がgitに保存されていきます。
そのファイルやディレクトリの状態を記録する場所のことを
リポジトリといいます。
リポジトリの管理下に変更した履歴を
管理しておきたいディレクトリをいれておくことで
そのディレクトリ内のファイルなどの履歴を記録してくれます。
だからgitを使う場合にはリポジトリを
作らなければいけないということですね。

さらにさらに、そのリポジトリは2種類あるのです。
それはローカルリポジトリとリモートリポジトリです。
ローカルリポジトリは、自分のPC上にあるリポジトリで
リモートリポジトリは
ここではGitHubに配置されているリポジトリです。

…わかりますか?

〜姉妹のわからなかったこと〜

ところで、最初にわからなかったのは
その変更履歴の保存場所だったのです。
姉「いったいどこに保存されているのだろう…」
妹「このPC上のどっかっしょ!」
姉「それはわかってるんだって、
  そのどこに行ってるのかが知りたいの!」
妹「………考えてなかった」
今では、雰囲気(!)で感じとっています。

ただ、自分が変更したファイルを上書き保存したからといって
コミットされてるわけではないですよ!
ちゃんとSource Treeを使ってコミットボタンを押さないと!
コミットしてから、次にコミットするまで、
自分がたくさんソースコードを変更しても、
その変更履歴は残らないので
そこは注意しておきたいですね。

バックアップするメリットは
撃沈編でも書いたのでわかりますよね。

あれ、神の声が聞こえる…
「ずっとバックアップ、バックアップ言ってるけど
 gitではバックアップって言わないんだよ!イメージは一緒だけど!
 gitでは『コミット』って言うんだよ」

…そうらしいです。
覚えておきましょう!

〜プッシュ、プッシュ〜

次にGitHubにアップロードするという話なのですが、
実はアップロードもgitでは『プッシュ』といいます。
では、なんのためにプッシュをするのかというと
自分ひとりだけでソースコードを書いていたとき、
万が一PCが壊れてしまったら、
ローカルリポジトリ自体にもアクセスできなくなってしまい、
データを復活することができなくなってしまいますよね。
それは大変!
また、何人かで共同でソースコードを書いていたとき、
共有するのがめんどくさいですよね。
これまた大変!
そんなときプッシュが便利なのです。
プッシュすることでGitHubにあるリモートリポジトリに
ソースコードが保存されます。
自分のPC上ではなくサーバーに保存されるので
そこにアクセスすれば誰でもみることができるのです。

姉「普通にみんなに見られるとか怖い」
妹「恐怖、恐怖」
?「GitHubにお金を毎月払ったら、
  プライベートリポジトリっていって
  公開されないようにも出来るんだよ」
姉妹「結局お金かーー」

〜プル&クローン〜

そして、プッシュしたデータをPCに取り込むことを
『プル』『クローン』といいます。
なにが違うの?って思いますよね。
プルというのは、元々そのデータが入っていて、
そのデータを更新することです。

push_pull
クローンというのは、新しく他の人にデータを貰いたいときに
ダウンロードすることです。
一回クローンすれば
そのデータを更新したいときは、ずっとプルです。

clone
クローン→自分が編集→コミット→プッシュ→他の人が編集→プル→自分が編集→コミット……
という感じです。

〜まとめ〜

姉妹ふたりとも丁寧に説明してもらったのですが、
最初はほんとにわかりませんでした。
でも使ってるうちにつかめてきます!ほんとに!
わかるまで使い続けましょう!!

姉妹「つかえるようになれば楽だった」

入力した内容をメールに反映させよう! 

2015/09/01/Tue

前回のソースコードはこちら

・.gitignoreを調べて設定
・入力した内容をメールの本文として送信
 →引数をつかう
 →文字列の連結
という内容を今日は行いました。

さあ前回の最後にでてきた
.gitignoreですが簡単に言うと、
gitで管理しないファイルを無視させるファイルのことです。
なぜ.gitignoreファイルを作ったのかというと、
今までにgemをインストールしたと思います。
自分たちが認識していれたgem以外にもセットでインストールされてる
gemが実はたくさんあるのです。
さあ、SourceTreeを見てみてください!
…どうですか?1700くらいありませんか?
妹は思わずスクショしました。
2015-09-01 13.55.24
これらを全部コミットしてプッシュするとしたら大変ですよね。
そのgemをgitで管理しないようにするためのファイルが
.gitignoreなのです!!
また、他人にみせたくない情報が書かれているファイルを
管理しないようにするためにも使用します。

姉妹はbundleというディレクトリと
vendorのディレクトリにあるbundleのディレクトリを
管理しないようにしたいので
# Ignore bundler config.
/.bundle
/vendor/bundle
というのを.gitignoreの中に記述します。
そうすれば、1700もあったのが一気になくなりますよ!

さらに、.envと記述すると、前回妹が設定したように
.envの中身もプッシュされないように変更できます。

ちなみに、「.ファイル名」のように「.」から始まるファイルは
隠しファイルと呼ばれるものです。
これを表示させる方法はこちらをご覧ください。
隠しファイル表示方法

さて、これから入力した内容を反映させて
送信できるようにしていきたいと思います。

前回、get endとdef endを組み込んで書いてもいい
というお話をしたの覚えていますか?
それはpost endとdef endでも同じです。
しかしそれは一般的ではなく、
他の人がそのコードを見たときに
わかりづらいのでわけて書きましょう。

今までの知識を使おうとすると
@つけて変数にすれば反映できそうって思いますよね。
ところがどっこい、
@はget/postなどからendの間しか
変数としての役割をもたないのです。
今回のようにpost endとdef endをわけて書くと
@はなにも役にたたなくなるのです。

困ったー。
また姉妹の検索との戦いが始まりました。
妹「『def ruby』で検索検索ーーっっ!あ、引数つかうっぽい!」
?「正解!」
def endを初めて使うとき、
メソッド定義が詳しく書いてあるURLをリンクとして載せました。
そこに引数のあるメソッドを定義するというのがでてきているのです。
姉妹は学校で少しC言語をやっていて、
引数のことを少し知っていましたが
やはり仕組みは少し違っていて
とことん意味を知りたくなる姉は少し戸惑っていました。
妹が見つけたURL
メソッドの定義と呼び出し
引数を付けたメソッド呼び出し
このサイトを参考にして頑張りました!

2015-09-04-00.57.50
こんな感じです!
send_simple_messageと書かれているのがメソッドで、
その後ろに()で囲まれているのが引数になります。
post endの中に書かれている@emailと@messageの文ですが
それは最後に送信完了画面に表示させるやつで
ここでは関係ありません。

taioububun

このスクショの中に
send_simple_message
という文が2つ出てきていますよね。
その()で囲まれている1つ目同士が対応しています。
そのためdef endの中で
「email」と「message」の変数が使えるようになっているのです。
ちなみに最後の:textの文ですが[]で囲むことで配列を使っています。
これは、メールアドレスと内容がそのまま本文に表示されます。
ただこれだとお問い合わせフォームとして利用していく中で
メールを受け取った側が見づらいですよね。

そこで、これから文字列の連結というのをやってきます。
また検索し始めたのですが、これがなかなかヒットしないのです。
姉が先に見つけてソースコードを書いている中、
見当違いなものばかりヒットさせる妹。
でも!妹に奇跡がおきます!!
妹「そういや、”と’の違いってなんだろう・・・」
それを調べていると、
妹「え、これ???」
そうです、なぜか答えにたどり着いてしまったのです。
妹もこれにはびっくり。
このときのサイトがこちらです。

そのサイトを参考にして頑張った結果、
このようなソースコードになりました!
2015-09-04 17.50.22
変わった部分わかりますか?
…最後の1行だけです。ややこしくしてすいません。
#{}で変数を囲って、自分なりの文章を打てばいいだけです!
例えば
メールアドレスがmiki@miki.comで本文にこんにちはといれたとします。
今回妹が作成した文だと、
miki@miki.comさんからお問い合わせがありました。
内容:こんにちは
となるわけです!
ちなみの\nは改行を意味しています。

今日の内容はここまで!!
お問い合わせフォームまであと少しです!

スクショの中の:to =>のあとにmikiと書かれていますが、
これはなんでもいいので、ここから見本のソースコードにはformと書きます。

今回のソースコードはこちら
参考にしてくださいね!