git addとcommit、pushの関係をわかりやすく解説する【Gitコマンド解説①】
以下のGitコマンド、よく出てきますよね。
$ git add $ git commit $ git push
このコマンドを打つことで、ソースコードを書き換えてGithubを更新してくれる。プロフィールに草が生えるからうれしい。今日のプログラミングはおしまい。
しかしここで、「git addとcommitの関係は？ git pushってどういう意味？」と聞かれると、すらすらと答えられない人も多いのではないでしょうか。草が生えて喜んでるのにそんなこと聞くなよ、と。プログラミングを始めたころは、私もなんとなくこのコマンドを使っていました。
今日は、git addとcommit、pushの関係をわかりやすく解説していこうと思います。
リモートリポジトリとローカルリポジトリって？
Gitコマンドを理解するためには、まず「リモートリポジトリローカルリポジトリの関係」を理解する必要があります。
リポジトリとは、ファイルやディレクトリの履歴を管理する場所のことです。
自分のパソコン内でバージョン管理するために作成したリポジトリをローカルリポジトリといいます。リモートリポジトリはネット(主にGithub)にファイルをアップロードした状態でファイル管理するものです。
画像引用:https://backlog.com/ja/git-tutorial/intro/02/
チーム開発の場合、個人がローカルリポジトリで開発を進めて、リモートリポジトリで開発したコードを共有する、という流れです。リモートリポジトリはネット上でファイルが共有されているので、プルリクエストという、自分のソースコードに対するレビューをもらったりして、開発を進めていきます。
図にあるように、ローカルリポジトリの内容をリモートリポジトリに送信（アップロード）することを「push」と呼びます。
$ git push
これでgit pushの意味が分かりましたね。
git add とgit commitのちがいとは？
git addとcommitはローカルリポジトリ内で使用するコマンドです。
ソースコードを書き換える流れを、図に表すと以下のようになります。
画像引用:https://backlog.com/ja/git-tutorial/intro/04/
ワークツリーとは、実際に作業している場所(ディレクトリ)のことを指します。ここでああでもあい、こうでもないと試行錯誤して開発を進めるわけですね。
そのあとソースコードが完成したら、リポジトリに更新する必要があります。このソースコードの更新作業を「commit」と呼びます。
ここでワークツリーとリポジトリの間には、インデックスというスペースがあります。これはコミットするファイルを準備するところです。ワークツリーからインデックスに登録することを「add」と呼びます。
※ちなみに、なんでインデックスが必要なの？いきなりワークツリーからリポジトリにコミットで良くない？と思った方もおられるかもしれません。
インデックスの役割としては、変更点をいきなりコミットすると更新されてほしくない箇所も更新する恐れがあるからです。色々変更を加えたけど、ファイルAとBを変更したとき、Aだけコミットしたいことがあります。インデックスにAだけを登録することで、変更して欲しいファイルだけコミットすることができるんですね。
コミットに含めたい変更を選別する作業を行うのがインデックスの役割です。
これで、git add とgit commitの違いがわかったかと思います。このあとpushコマンドを使って、ローカルリポジトリの内容をリモートリポジトリに送信（アップロード）する流れになります。
まとめ
git addとcommit、pushの関係をまとめると
１.git addコマンドで、インデックスにコミットしたいファイルを登録する。 2.git commitコマンドで、インデックスにあるファイルを更新する。 3.git pushコマンドで、ローカルリポジトリの内容をリモートリポジトリに送信する
この3つを押さえておきましょう。
そのほかにもpull、clone、mergeコマンドなど、良く出てくるGitコマンドがあるのですが、それは次回の記事で解説したいと思います。
この記事の説明がわかりやすかった！ここ間違ってるよ！次こんな記事を書いて欲しい！などあればコメント、DMよろしくお願いします。LGTMもぜひ。
Twitterもやってますので、フォローしていただけたらうれしいです。 卓球、心理学、哲学、Webサービス、好きな音楽、カメラ、登山、ランニング、読んだ本などなんでもつぶやいてます。
Rubyにおける「クラス」と「オブジェクト」の関係について分かりやすく解説してみる
Rubyの勉強を始めて、すぐに出てくる重要キーワード。それは「クラス」と「オブジェクト」です。
Rubyにおいて重要な概念だと分かってるけど、なんとなくの理解で学習が進んでいってしまうことも多いのではないでしょうか。
クラスはよく使うけど理解が浅い
「クラス」と「オブジェクト」の関係がいまいち掴めない
どうやって「オブジェクト」を作れば良いかわからない
今日はこのような方に向けて、記事を書いていこうと思います。
「クラス」と「オブジェクト」の関係について
クラスとは「もの」を作るときの「設計図」です。
オブジェクトとは設計図をもとに作られる「もの」です。
クラスとオブジェクトの関係を図に表すと以下になります。
クラスが「人間」
オブジェクトが「たろう」「花子」「Michael」です。
クラスである「人間」には(名前,出身)という設計図が描かれています。
この設計図を使って、「名前:たろう,出身:東京」のオブジェクトを作っています。
つまり、
設計図である「クラス」をもとに、ものである「オブジェクト」を作ることができます。これが「クラス」と「オブジェクト」の関係です。
ここで、たろうに性別や年齢を加えたい場合は、人間クラスを(名前,出身,性別,年齢)という設計図にすればいいわけです。
クラスの作り方
ここからは、実際にコード書いてクラスとオブジェクトの理解をさらに深めていきましょう。
まずクラスの作り方についてです。試しにUserクラスを作ってみましょう。user.rbというファイルを作成して、以下のように記述します。
class User end
これだけでUserクラスの完成です。簡単！
オブジェクトの作り方
irb(書いたプログラムを実行できるコマンド)を開いて、先ほどのUserクラスを使って、オブジェクトを作っていきます。
> require './user.rb' #user.rbのコードを読み込むコマンド >Michael = User.new
User.newを使って、Michaelというオブジェクトを作ることができました。これまた簡単！
オブジェクトから、原型となるクラスを確認する方法
全てのオブジェクトはその元となるクラスを持っています。つまりMichaelはUserクラスを持っているはず。それが本当かどうか確認します。
>Michael.class =>User
classというメソッドを使って、オブジェクトが持つクラスを確認することができます。エラーが出たとき「このオブジェクト、何のクラスを持ってるんだっけ？」となりがちなので覚えておきましょう。
(補足)いまはUserクラスに設計図(名前,出身など)が何も書かれていません。今回の記事は「クラス」と「オブジェクト」の関係について理解する記事なので、設計図の書き方は省略です。また記事にしたいと思います。
まとめ
「クラス」と「オブジェクト」の関係について理解が深まったでしょうか。なんとなくの理解でプログラミング学習を進めてしまいがちですが、少しずつ理解を深めながら、Ruby勉強を進めていきましょう。
この記事の説明がわかりやすかった！ここ間違ってるよ！次こんな記事を書いて欲しい！などあれば、ぜひコメント、DMよろしくお願いします。
Twitterもやってますので、フォローしていただけたらうれしいです。
卓球、心理学、哲学、Webサービス、好きな音楽、カメラ、登山、ランニング、読んだ本などなんでもつぶやいてます。
gem gretelの使い方 ~パンくずリストを作ってみよう~
gem 'gretel'
このgemを使って、パンくずリストを作っていこうと思います。
パンくずリストってなんぞや？？
ホームページのすみっこで見られる、ページの階層ですね。Webサイト内で、どの位置にいるのかがわかる機能です。
「ユーザー」を押すとユーザーページへ、「ホーム」を押すと最初のページへ飛ぶことができます。(ハンバーガーメニューとかパンくずリストとか、プログラミングの世界は、遊び心があって良いですよね。)
gem 'gretel'を使う
こちらのGithubのREADMEをご覧ください↓↓
gem 'gretel'をbundle installしたあと、
$ rails generate gretel:install
こちらのgenerateコマンドを使って、config配下にbreadcrumb.rbというファイルが生成されます。
それではbreadcrumb.rbに作りたいパンくずリストの設定を記述していきます。
breadcrumb.rbにパンくずリストの設定を記述
先ほどのリストを試しに作っていきます。
#breadcrumb.rb crumb :dashboard do link ' Home', dashboard_path end crumb :users do link 'ユーザー', users_path parent :dashboard end crumb :user do |user| link 'プロフィール', user_path(user) parent :users end
上記のような記述になります。書き方としては、
crumb :"シンボル名" do link 'パンクズに表示したい名前', URL parent :"一つ上の階層名" end
このように当てはめていきます。parentは一つ上の階層がなければ(今回ならHome)記述しなくてOKです。
breadcrumb.rbの設定をこれで完了です。
viewファイルに記述していく
それぞれのviewファイルにbreadcrumbを記述していきます。
#Homeのviewファイル <% breadcrumb :dashboard %>
#ユーザーのviewファイル <% breadcrumb :users %>
#プロフィールのviewファイル <% breadcrumb :users, @user %>
プロフィールのviewファイルで気をつけることは、
breadcrumb.rbにもあるように、プロフィールページはuser_path(user)というURLに飛ぶので、どのidのURLに飛んで欲しいのか(今回なら@user)を記述しないとエラーが出てしまいます。
あとはCSSなどで、ページの好きな位置にパンくずを表示すればOKです。とても簡単。。！
パンくずリストはヘッダーの下などに記述することが多いかと思いますので、部分テンプレートに分けておくのが便利かと思います。
gem gretelを使って、パンくずリストを作ってみよう
一見むずかしそうな機能が、とても簡単に作れることが分かったと思います。
便利なgemを駆使しながら、より使いやすいRailsアプリケーションを作っていきましょう！
form_withを使って、ユーザーが新規作成される仕組みを理解する
webサービスで新規登録やユーザログインのときに使われる、form_withというヘルパーメソッド。
Railsチュートリアルなどで突然登場して、なんとなく使い方が分かってるけど説明はできない「曖昧状態」になっていませんか。
ぼくもまさにそのひとり。
今回は、form_withを使って、ユーザーが新規作成される仕組みを理解する記事を書いていこうと思います！
そもそも「フォーム」とは？
この3つをはじめてみたとき？？？という感じでした。
例を挙げて説明してみます。
railsチュートリアルから以下のコードを引っ張ってきました。
<%= form_with(model: @user, local: true do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
<%= f.submit "Create" %>
<% end %>
これがHTMLソースに変換されると
<form accept-charset="UTF-8" action="/users" class="new_user"
id="new_user" method="post">
<label for="user_name">Name</label>
<input id="user_name" name="user[name]" type="text" />
<input name="commit" type="submit"
value="Create" />
</form>
※local: trueとは？ local: trueがない場合、Rails5ではAjaxによる送信という意味になる。 HTMLとしてフォームを送信する場合にlocal: trueが必要になります。
例えば、フォームの名前に「たろう」と入力されると
<input id="user_name" name="user[name]" type="text" value="たろう" />
このようになります。
そしてformタグのaction属性に指定されたURL("/users" )に対して、nameとvalueが送られます。
コントローラ
@user = User.new(params[:user])
params[:user]というのは、送られてきたnameに対応しています。今回であればname="user[name]" value="たろう"が送られてきているので、@userというインスタンスにname:"たろう"が格納されます。
form_withのしていること
<%= form_with(model: @user, local: true do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>
整理すると、
model: @user・・・入力値を格納するインスタンスとaction属性を指定("/users")
local: true・・・HTMLとしてフォームを送信する場合にlocal: true必要
<%= f.label :name %>・・・フォームのラベルを決めている
<%= f.text_field :name %>・・・HTMLに変換されるとname="user[name]" type="text"になる
何が起きているかわからないとなってしまうform_withですが、 HTMLコードに分解して考えると、理解しやすいですね。 ブラウザの開発者ツールからHTMLソースを見る癖をつけていきましょう。
gem draperを使用して、decoratorを導入する方法
目的
gem draperを使用して、decoratorを導入する。 このGemを導入するときに詰まった部分をメモとして残す。
開発環境
参考資料
Decoratorの役割とDraperについて Draperの使い方 まとめ Rails Viewの表示のためにDecoratorを用意してHelperとModelを助ける
導入手順
①gem 'draper'をインストールする。
まずはGemをインストールします。
gem 'draper'
以下の２行をターミナルに入力すれば、draperを使うことができます。
$ bundle install $ rails generate draper:install
②デコレーターを作成
まず、app/decorators/user_decorator.rb を作成します。
$ rails generate decorator User
今回はフルネームを呼び出すメソッドを作っていきます。 last_nameとfirst_nameは、事前にUserモデルのカラムに追加してあります。
class UserDecorator < Draper::Decorator
delegate_all
def full_name
"#{object.last_name} #{object.first_name}"
end
end
③ 作ったメソッドをViewファイルで呼び出す。
現在ログインしているユーザー(current_user)をフルネームで表示します。
#メソッドを使いたいViewファイルにて <%= current_user.decorate.full_name %>
以上の手順でgem 'draper'を使って、decoratorを導入できました。 この流れでエラーが出てしまった場合は、参考資料など見ながら解決してみてください。
日本語対応のためのGem 'rails-i18n'の使い方
目的
Gem 'rails-i18n'を使って、日本語対応させること。 このGemを導入するときに詰まった部分をメモとして残す。
開発環境
参考資料
[I18n::InvalidLocaleData ロケールファイルを翻訳できない] (https://qiita.com/niwa1903/items/10154b8cbe1cd0416495)
導入手順
①gem 'rails-i18n'をインストールする。
gem 'rails-i18n', '~> 5.1'
$ bundle install
RailsのGemをインストールするときの、いつもの流れです。
②デフォルトの言語を日本語に設定する。そしてi18nの複数ロケールファイルが読み込まれるようpathを通す。
module App
class Application < Rails::Application
# Initialize configuration defaults for originally generated Rails version.
config.load_defaults 5.2
# 2行追記:デフォルトのlocaleを日本語(:ja)にする.
config.i18n.default_locale = :ja
config.i18n.load_path += Dir[Rails.root.join('config', 'locales', '**', '*.{rb,yml}').to_s]
end
end
モジュールの中に2行追記してください。この記述がないと、Gemをインストールしても日本語対応してくれないようです。
③localesフォルダの中にja.ymlファイルを作る
・modelの日本語対応
ja:
activerecord:
models:
user: 'ユーザー'
board: '掲示板'
attributes:
user:
email: 'メールアドレス'
password: 'パスワード'
password_confirmation: 'パスワード確認'
last_name: '姓'
first_name: '名'
model全体に対応させるときはmodelsの階層を作り、 カラム名を対応させるときはattributesの階層を作ります。
・view,controllerの日本語対応
ja:
users:
new:
title: 'ユーザー登録'
to_login_page: 'ログインページへ'
create:
success: 'ユーザー登録が完了しました'
fail: 'ユーザー登録に失敗しました'
view/ja.ymlに記述することで、controllerにも適応されます。 ただ、インデントをきっちり２つずつにして階層構造を作らないと、日本語適用されないよう。
ja.ymlの書き方については、以下のRailsガイドの記事が参考になります。 探索の「遅延」（lazy lookup）
④viewやcontrollerで、設定した日本語を表示させる
ja:
books:
index:
title: "ほげほげ"
上記のような階層構造になっていれば、以下のようにして、app/views/books/index.html.erbビューテンプレート内部でbooks.index.title値にアクセスできます。
<%= t '.title' %> または <%= t ('.title') %>
省略せずに書くと以下になります。
<%= t 'books.index.title' %>
これでGem 'rails-i18n'を使って、日本語対応できるはずです！
Githubにpushしても、contributionsに反映されない時の対処法
ローカル環境からGithubにcommit、pushできても、contributionsに反映されない。。。
いわゆる草が生えないっていうやつです。
自分もこの問題にぶち当たったので解決策を書いておきます。
参考資料 https://findy-code.io/engineer-lab/github-contributions-rule
ローカル環境でのgitに、GitHubアカウントでのメールアドレスが追加する必要がある
だいたいの人が、メールアドレスが追加されていなかったり、一致してなかったりして、contributionsに反映されないようです。メールを確認する方法は以下です。
＄ git config --global user.email
このコマンドでローカル環境でのgitに登録されているメールアドレスが確認できます。このとき、何も表示されていない場合はGitにメールアドレスが登録されていないです。
GitHubアカウントでのcommitから、メールを確認する方法
Githubのcommitからも、メールが登録されているか確認できます。
手順は ①リポジトリのコミットを確認できるページにアクセス。確認したいコミットをクリック。 ②その飛んだURLの一番後ろに「.patch」をつける ③ページ一番上の「From」の部分を確認します。設定できていればメールアドレスが表示されます。
ローカル環境でのgitに、GitHubアカウントでのメールアドレスが追加する方法
設定ができていない人はターミナルから下記のコマンドで設定ができます。
git config –-global user.email “email@example.com“
このコマンドでメールアドレスを追加後に、再度commit、pushして見てください。contributionsに反映されるはずです。また、リポジトリのコミットを確認できるページでもcommitしたアカウントが変更されているはずです。
以上参考になれば幸いです。
