ぽかぽかコード日和

とっても暑い夏の日にプログラミングはじめました☀️

【Git】git commit コマンド

ギットのコミットに関するコマンドをまとめてみました。

commit とはステージングの後、ローカルディレクトリに保存するためのコマンドです。

1.記録

基本的なコミット

git commit

ステージングしたファイルを保存する。これを実行するとエディタが開きコミットメッセージを入力し保存するとコミットが実行される。

メッセージ付コミット

git commit -m "コミットメッセージ”

指定したコミットメッセージで、ステージングしたファイルを保存する。

全てのファイルをコミット

git commit -a

gitaddコマンドによって履歴に追加されたことがあり、修正のある全てのファイルを、ステージングして保存する。

2.修正

コミットの修正

git commit --amend

直前のコミットを修正する。

3.削除

コミットの取消

git reset --soft HEAD^

直前のコミット(ローカルリポジトりへの変更)を取り消す。

参考にしたサイト

【Git】でよく使う用語集

ギットについて

Gitとは、ファイルの分散型バージョン管理システムの一つで、複数人で開発をする際に便利なツールです。

  • 新旧ファイルの一元管理ができる。
  • ファイルの変更履歴を共有できる。
  • 簡単に過去のファイルに戻せる。
  • 複数人の修正を１つに統合できる
  • ネットワーク接続なしでも開発作業ができる。

ユーザーはローカルリポジトリで作業を行い、作業を終えたらリモートリポジトリに反映します。

用語

リポジトリ(repository)

ファイルや変更履歴を保存しておく保管場所のこと。
リモートリポジトリとローカルリポジトリの2種類がある。

・リモートリポジトリは、ネットワーク上に存在し、ファイルや変更履歴を共有する際に使う。
・ローカルリポジトリは、自分のコンピュータ上に存在し自分専用のリポジトリ。ここで作業を行う。

ブランチ(branch)

日本語で枝、分岐という意味。
開発の本流のブランチから分岐させることにより、他のブランチに影響を与えず開発を行える機能のこと。複数人が同時並行で作業できる。git branchコマンドによって実行される。

本流のブランチはmasterブランチと呼ばれ、プログラムの修正や機能の追加を行う際は、ブランチを追加しそれぞれブランチで作業をする。作業後は他のブランチに統合(merge）し、一つのブランチにまとめ直すことができる。

・統合ブランチとは、トピックブランチの分岐元として使用する本流のブランチ。通常、masterブランチを統合ブランチとして使用する。
・トピックブランチとは、作業を行うために追加したブランチのこと。通常、統合ブランチから分岐する形で作成する。

☀︎その他の用語☀︎

・「ブランチを切る」...ブランチを分岐・追加すること。

ステージング(staging)

ローカルリポジトリにコミットする前に、変更したファイルを選択して準備する作業のこと。git addコマンドによって実行される。別名コミット予定。

ワークツリーで作業したファイルをステージングして、その後ローカルリポジトリにコミットする。

  • コミットしたい特定の変更だけインデックスに追加できる。（一つのファイルの中の特定の行だけをステージングすることもできる。）

  • コミット前の最終確認や、システムやソフトウェアのテストや検証を行うためにも使える。

☀︎その他の用語☀︎
・ワークツリー(working tree)...作業中のファイルやフォルダのこと。別名作業ディレクトリ。
・インデックス(index）...コミットするためのファイルを登録するスペースのこと。別名ステージングエリア

コミット(commit)

新規作成したファイルや編集ファイルをローカルディレクトリに保存すること。実行するとファイルの編集内容・日時・作業者・コミットメッセージを記録したファイルが保存される。

git commitコマンドによって実行される。

☀︎関連☀︎
git tag...コミットに対しタグをつけられるコマンド

プッシュ(push)

ローカルディレクトリからリモートディレクトリにアップロードし保存すること。

git pushコマンドによって実行される。
プッシュ前にプルを行い競合(コンフリクト)を解決してからプッシュが推奨される。

プル(pull)

リモートディレクトリからローカルディレクトリにダウンロードし反映させること。

git pullコマンドによって実行される。

☀︎その他の用語☀︎
・フェッチ(fetch)..リモートリポジトリの最新の履歴の取得のみ行う。
・マージ(merge)...ブランチを統合する
・クローン(clone)...リモートリポジトリをまるまる複製する。
・リベース(rebase)...ブランチを統合する。コミット履歴を上書きする。

チェックアウト(checkout)

ブランチの切り替えやファイルの復元をする。

git checkoutコマンドによって実行される。

ディフ(diff)

指定した二つのファイルを比較してその違い(差分)を表示する。

git diffコマンドによって実行される。

ログ(log)

リポジトリのコミットの履歴を表示をする。

git logコマンドによって実行される。

スタッシュ(stash)

一時保存する

git stashコマンドによって実行される。

チェリーピック(cherry-pick )

必要なコミットだけをコピーできる。

git cherry-pickコマンドによって実行される。

参考にしたサイト

https://backlog.com/ja/git-tutorial/

https://git.command-ref.com/basic-word.html

コマンド

【Git】git add コマンド

ギットのaddに関するコマンドをまとめてみました。

add とはステージング(index)するためのコマンドです。

1.追加

指定したファイルを追加

git add <ファイル名>

指定したファイルをステージングエリアに追加する。

全てのファイルを追加

git add . (またはgit add -A)

その階層の全てのファイルをステージングエリアに追加する。

変更のあったファイルを追加

git add -u

ローカルリポジトリと比較して、変更のあったファイルのみステージングエリアに追加する。

変更のあった全てのファイルを追加

git add -A

git add.とgit add-uをまとめて行う

強制追加

git add -f (または --force)

.gitignore (トラッキングの対象外になる）で指定されたファイルも強制的に追加する。

部分ごとに選択して追加

git add -i

対話モード(インタラクティブモード）。ファイルの一部（ハンク）のみ選択してステージングできる。コミットする内容をより細かく制御できる

2.解除

ステージングを解除

git restore --staged <ファイル名>

指定したファイルのステージングを取り消す。
コミット前の最終確認に便利。
git reset HEAD <ファイル名>でも行えるがrestoreの方が安全っぽい

3.表示

追加ファイルをシュミレーションする

git add -n

dry-run(ドライラン)オプション。
ステージングエリアには追加せずに、どのファイルが追加されるかを確認できる。

参考にしたサイト

【Git】git branch コマンド

ギットのブランチに関するコマンドをまとめてみました。

「-d」「--oneline」などの記号はオプションと呼ばれ、オプションは組み合わせて使うこともできます 。

1.表示

ブランチの一覧表示

git branch

ローカルブランチの一覧を表示する。

リモートブランチの一覧表示

git branch -r　（--remotesでも可）

リモートリポジトリのブランチの一覧を表示する。

すべてのブランチの表示

git branch -a　（--allでも可）

ローカルリポジトリ・リモートリポジトリ全てのブランチを一覧表示する。

マージ済みのブランチを一覧表示

git branch --merged

HEADにマージ済みのブランチを一覧表示する。

マージされていないブランチを一覧表示する。

git branch --no-merged

HEADにマージされていないブランチを一覧表示します。

ブランチの詳細情報表示

git branch -v　（--verboseでも可）

各ブランチの最新コミットのIDとコミットメッセージを表示する。

2.操作

ブランチの新規作成

git branch <ブランチ名>

現在のHEADから、指定した名前で新しいブランチを作成する。新しく作成したブランチへの切り替えは行わない。切り替えは「git checkout <ブランチ名>」を使う。

新規作成と切り替えを同時に行うには、「git checkout -b <ブランチ名 >」を使う。

ブランチの削除

git branch -d <ブランチ名>　（--deleteでも可）

指定したブランチを削除する。
-rオプションを付けた場合は、リモートブランチを削除する。(マージ済みのみ）

ブランチの強制削除

git branch -D <ブランチ名>

マージの状態に関わらず、指定したブランチも強制的に削除する。

ブランチの名前変更

git branch -m <古いブランチ名>　<新しいブランチ名>

ブランチの名前変更をする。

参考にしたサイト

【HTML】目的別！タグの選び方

htmlで「どのタグを選んだら良いのかわからない！」ってときにみる、まとめページです。随時変更していきます。

改行をしたい！

  • <p>タグは段落を表す。テキストのまとまりを表現したいとき。

  • <br>タグは単なる改行を挿入する。特定の行間が必要なとき。使用例：住所

☆基本的には<p>を使用する。どうしても必要であれば<br>を使う。

太字にしたい！

  • <strong>タグはテキストに協調の意味を持たせるとき。太字になる。見出し<h1>

    には使用しない。

  • <b>タグは太字にして目立たせるとき。

  • HTMLの<head>で<style>タグ、またはタグ内で<style>属性、またはCSSで{font-weight: bold;}を指定する。

箇条書きにしたい！

  • <ul>タグは順序なしのリスト。「・」がつく。

  • <ol>タグは順序ありのリスト。「1. 」数字が順番につく。使用例：ランキング、手順

テキストの一部分だけデザインを変えたい！

  • <span>タグを使う。囲った部分のみをグループ化する。

上下付き文字(m²やX2)を表示したい！

  • 上付き文字は<sup>タグで囲む

  • 下付き文字は<sub>タグで囲む。

いろいろな入力欄を表示したい！

  • 一行の入力欄・・・<input type="text">

  • 複数行の入力欄・・・<textarea></textarea>

  • メール入力欄・・・<input type="email">

  • ラジオボタン・・・<input type="radio">

  • チェックボックス・・・<input type="checkbox">

  • ボタン・・・<input type="submit">

  • プルダウン・・・<select>に<option>を入れる

※<input>要素は終了タグは無し

リンクや画像を紐付けしたい！

  • リンク・・・<a href="リンク先のURL">テキスト</a>

  • 同じサイト内のページへのリンク・・・<a href="about.html”>About Us</a>

  • 外部サイトへのリンク・・・<a href="https:~">外部サイト</a>

  • 画像の挿入・・・<img src="画像のパス” alt="代替テキスト">

  • 画像にリンクを設定・・・<a href="URL"><img src="画像のパス” alt="代替テキスト”></a>

※<img>要素は終了タグは無し

グループ化したい！

  • <div>は特に意味はない。汎用のコンテナ

  • <section>関連するコンテンツをまとめるために使う。通常見出しを含む

参考にしたサイト

改行https://white-link.com/sem-plus/html-ptag/#3-3

太字https://white-link.com/sem-plus/html-strongtag/

箇条書きhttps://web-dev.tech/front-end/html/difference-ul-ol/

spanタグhttps://keywordmap.jp/academy/span/#span-2

上下付き文字https://irodori-design-web.com/blog/blog-2764/#google_vignette

リンクhttps://zero-plus.io/media/html_link_how_to/

初心者用☀︎よくわからなかった言葉集

IT超初心者が、まず疑問に思った言葉を検索しまとめてみました。 知らない言葉に出会ったり、勉強し解像度が上がるたびに修正・更新していきます。

用語

テキストエディタ

文章やコードをパソコンで作成するときの基盤となるツール。
「文字情報の入力・編集・保存を可能とするソフトウェア」
メリットは見やすくなる。入力補助機能をつけられる。

プログラムの命名規則

開発効率やメンテナンスのことを考えると、必ず守ったほうが良い名付けルール。 ローマ字でなく英単語で書く。クラス名は名詞にする。

よく使用されている命名規則

  • キャメルケース

    先頭を除く各単語の頭文字を大文字にする。(例:autoSpeedUp)

  • スネークケース

    各単語を_（アンダースコア）でつなぐ。（例:auto_speed_up）

  • ケバブケース

    各単語を-（ハイフン）でつなぐ。（例:auto-speed-up）

HTMLの仕様

要素と属性

  • 要素(element）の定義・・・見出しや段落などの部品
    　例：html head h1 p img

  • 属性(attribute) の定義・・・要素に情報を付加するもの
    　例：href scr id class

タグ

要素名。HTMLではテキストをタグで挟むことにより、見出しやリンクなどの意味を持たせることができる。 テキスト１つ１つ役割を作ることで、訪問者にとっては見やすく、検索エンジンにとっても内容を認識しやすくなる。

タグの中にタグが入ることを入れ子構造という。
開始タグの中に属性を書くこともある。
ブラウザでの表示は同じ見た目になっても、選ぶタグによって目的や役割が変わるので最適なものを選択する（セマンティック）

インライン要素とブロック要素

  • インライン要素・・・改行が入らない。要素を横並びにできる。
    　例：span a b strong button

  • ブロック要素・・・親要素が幅いっぱいに広がり前後に改行が入る。要素を横並びにできない。
    　例：div h1 p

    ☆CSSのdisplayプロパティで変更できる。両方あわせ持つinline-block要素にもできる。

CSSの仕様

詳細度(Specificity)とは

どのCSS プロパティが要素に適用されるかをブラウザーが決定する手段のこと。 詳細度が高くなると複雑になり使いづらくなる。

☀︎優先度の高い順番☀︎
0. !important
1. HTML上のstyle属性に書かれたプロパティ
2. IDセレクタ(#hoge)
3. クラスセレクタ(.hoge)、属性セレクタ([name="hoge"])、擬似セレクタ(:hover)
4. 要素型セレクタ(div)、擬似要素(::before)
5. CSSの記載順序がうしろのプロパティ
詳細度を低く保つ方法

参考にしたサイト