レッスン 7 · 日常の仕事
ファイル全体ではなく、選択したハンクをコミットします
見出しとより広いヒーローを準備し、後で使用するために別のカード半径の編集を残します。ファイル、ハンク、行の選択を慎重に使用して、正確に準備され、残っている CSS を証明します。
- レベル: 中級者
- 5 分で読みました
- 4 分の動画
- 更新されました
- このレッスンの前に: 変更を判断する前に比較を読んでください
このブラウザに進行状況が保存されました。
再生すると、YouTube からビデオが読み込まれます (プライバシー強化モード)。
何を学ぶか
- 特定のコミットのファイル、ハンク、または行スコープを選択します。
- 置き換えるには、削除/追加された両方の行を選択します。
- インデックスと作業内容を独立して読み取ります。
- レッスン 8 では、コミットされていない半径編集を保持します。
始める前に
レッスン 6 が終了したところから開始します。元のメインには 2 つのコミット、実行可能なレッスン 6 の入力があり、リモートはありません。動作中/インデックスはクリーンです。無視された dist が存在する可能性があります。動画は、Ubuntu 24.04 の Git 2.52.0 と GitTree 2.0 を使用して録画されました。両方の編集は GitTree 独自のエディターに保存され、ハンクと行がステージングされ、アプリ内でコミットが行われ、アプリが作成したものまたは別のコピーに対してターミナル チェックが実行されました。ハンクとラインのコントロールは実際に操作されました。ネイティブ パッチ ルートは別のコピーで実行されました。 macOS または Windows では何も実行されず、記録された Linux システムは Ubuntu だけです。 GitTree のソース Git の最小値は 2.39.0 です。サインインすると、ローカル作業は無料プランで行われます。
コンセプト
A file can contain several independent decisions.ハンクはテキスト変更の近くをグループ化しますが、必ずしも 1 つのビジネス上の意図があるとは限りません。置換を選択するには、削除された古い行 and 追加された新しい行が必要です。 choosing only the addition can create a different patch.
The index describes a full next tree, even when you select only a few changed lines. Here HEAD has CSS-01, index becomes CSS-02-INDEX, and working CSS stays CSS-02-WORKING.編集内容を保存すると、作業バイトが変更されます。 Stage Lines はインデックスを変更します。 the normal commit moves main but does not overwrite the remaining radius.リモート参照の変更はありません。 Native partial staging and patch application use the same content distinctions.
完全な編集およびターゲットボディ
index.html を HTML-02-HEADLINE に置き換え、workingstyles.css を CSS-02-WORKING に置き換えます。以下の CSS-02-INDEX は target index であり、作業ファイルを上書きする本体ではありません。
Index.html — HTML-02-ヘッドライン
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GitTree Features — course demo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="site-header">
<a href="#main">GitTree Features</a>
</header>
<main id="main">
<section class="hero" aria-labelledby="hero-title">
<p class="eyebrow">GitTree Learn demo project</p>
<h1 id="hero-title">See your work clearly.</h1>
<p id="hero-copy">Choose one change, then check what Git saved.</p>
</section>
<section class="features" aria-labelledby="features-title">
<h2 id="features-title">Follow your work</h2>
<div class="cards">
<article class="feature-card">
<h3>History</h3>
<p>Read commits and branches together.</p>
</article>
<article class="feature-card">
<h3>Changes</h3>
<p>Review the exact content selected for a commit.</p>
</article>
<article class="feature-card">
<h3>Recovery</h3>
<p>Inspect the scope of a recovery point before using it.</p>
</article>
</div>
</section>
</main>
<footer><p>Built by a fictional team for GitTree Learn.</p></footer>
<script type="module" src="site.js"></script>
</body>
</html>style.css — CSS-02-INDEX
:root {
color-scheme: light;
--page: #f7f8fa;
--surface: #ffffff;
--text: #17212e;
--link: #154ab5;
--line: #bac4d0;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--page);
color: var(--text);
font: 1rem/1.6 system-ui, sans-serif;
}
a {
color: var(--link);
}
.site-header,
main,
footer {
width: min(68rem, 100% - 2rem);
margin-inline: auto;
}
.site-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
padding-block: 1rem;
}
.hero {
max-width: 48rem;
padding-block: 3rem;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.2;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 1rem;
}
.feature-card {
padding: 1rem;
border: 1px solid var(--line);
border-radius: 0.5rem;
background: var(--surface);
}
section {
margin-block-end: 2rem;
}
button,
input {
font: inherit;
}
button,
input {
padding: 0.5rem 0.75rem;
}
:focus-visible {
outline: 3px solid var(--link);
outline-offset: 3px;
}
form {
display: grid;
max-width: 28rem;
gap: 0.5rem;
}style.css — CSS-02-WORKING
:root {
color-scheme: light;
--page: #f7f8fa;
--surface: #ffffff;
--text: #17212e;
--link: #154ab5;
--line: #bac4d0;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--page);
color: var(--text);
font: 1rem/1.6 system-ui, sans-serif;
}
a {
color: var(--link);
}
.site-header,
main,
footer {
width: min(68rem, 100% - 2rem);
margin-inline: auto;
}
.site-header {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 1rem;
padding-block: 1rem;
}
.hero {
max-width: 48rem;
padding-block: 3rem;
}
h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.2;
}
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
gap: 1rem;
}
.feature-card {
padding: 1rem;
border: 1px solid var(--line);
border-radius: 0.75rem;
background: var(--surface);
}
section {
margin-block-end: 2rem;
}
button,
input {
font: inherit;
}
button,
input {
padding: 0.5rem 0.75rem;
}
:focus-visible {
outline: 3px solid var(--link);
outline-offset: 3px;
}
form {
display: grid;
max-width: 28rem;
gap: 0.5rem;
}GitTreeで
- Show Files (Command/Ctrl+Shift+E) で、既存の各ファイルにフォーカスを合わせて Enter キーを押します。 paste its stated working body, then Save or Command/Ctrl+S.インデックス ターゲットを作業中の CSS の上に貼り付けないでください。
- Back to Graph → Command Palette… (Command/Ctrl+Shift+P) → Show Working Changes. Unstaged Filesの下にあるindex.htmlをクリックします。
- 差分ビュー (パレット Show Diff as Hunks) で Hunk を選択します。見出しの置換で Stage Hunk を選択します。ステージングされたファイルでは見出しが完全に変更されることだけを期待してください。ファイル全体 Stage File は、この HTML に他に編集がないという理由だけで同等になります。
- 「ステージングされていないファイル」の下にある「styles.css」をクリックします。 Ignore whitespace をオフにしておいてください。 41 行目で最大幅の置換を見つけます:
44rem→48rem。 - 削除された
max-width: 44rem;行と追加されたmax-width: 48rem;行のチェックボックスをオンにします。アクセシブルな名前には、記号、行番号、テキストが含まれます。選択ツールバーで Stage Lines をアクティブにします。 59 行目の半径ペアは選択しないでください。 - 別のリプレイでの代替案: 最大幅のハンクのみの Stage Hunk は、ここで同じターゲットを与えます。 Split/palette Show Diff Side by Side は、削除/追加されたセルを適切な古い/新しい面に配置します。どちらも独自のピックコントロールを持っています。メインテイクはハンクに戻ります。
- ステージングされたstyles.cssをクリックします: max-widthのみが変更されます。 unstagedstyles.css をクリックします。半径のみが残ります。コンテンツを破棄するのではなく、選択をクリアするには Clear を使用します。ステージングが多すぎる場合は、関連するステージングされたハンクと Unstage Hunk を選択するか、ステージングされた置換行と Unstage Lines の両方を選択して、再確認してください。
- 概要
feat: refine the hero and card spacing、通常のオプションはすべてオフ、Commit Changes to 2 Files (または Command/Ctrl+Enter を 1 回) を入力します。部分的なコミットを確認し、ステージングされていない半径を保持します。 - Stage All Changes を使用したり、破棄したり、クリーンアップ コミットを作成したりしないでください。レッスン 8 では、意図的に radius コミットを所有します。
古い選択は差分フィンガープリントにバインドされます。外部編集後に古いバイト用のパッチを適用するのではなく、リロードします。空白を非表示にすることで行選択の資格が失われる場合は、選択が起こったかのように振る舞うのではなく、理由を読んで完全な差分を復元してください。
ターミナル内
両方の編集を保存した後、次のようにします。
git diff -- styles.css完全に観察された動作差分:
diff --git a/styles.css b/styles.css
index d443c7e..6382365 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ footer {
}
.hero {
- max-width: 44rem;
+ max-width: 48rem;
padding-block: 3rem;
}
@@ -56,7 +56,7 @@ h1 {
.feature-card {
padding: 1rem;
border: 1px solid var(--line);
- border-radius: 0.5rem;
+ border-radius: 0.75rem;
background: var(--surface);
}
ネイティブ インタラクティブ ルート: git add -p -- index.html はヘッドライン ハンクを選択します。 git add -p -- styles.css は最初のハンクを受け入れ、半径のハンクを拒否できます。プロンプトは Git バージョンによって異なります。記憶された y/n シーケンスではなく、答える前に内容を調べてください。
決定的なネイティブ同等の方法は、次の完全なパッチ outside をプロジェクトに <selection.patch> として保存し、インデックスのみに適用することです。
diff --git a/styles.css b/styles.css
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@
}
.hero {
- max-width: 44rem;
+ max-width: 48rem;
padding-block: 3rem;
}
git add -- index.html
git apply --cached --check "<selection.patch>"
git apply --cached "<selection.patch>"
git diff --cached -- styles.cssチェック/適用はどちらもフィクスチャ内でサイレントに成功しました。最終的なクエリは次のように出力されました。
diff --git a/styles.css b/styles.css
index d443c7e..4dc8369 100644
--- a/styles.css
+++ b/styles.css
@@ -38,7 +38,7 @@ footer {
}
.hero {
- max-width: 44rem;
+ max-width: 48rem;
padding-block: 3rem;
}
git show :styles.css must equal the complete CSS-02-INDEX above.作業ファイルは完全な CSS-02-WORKING と等しくなければなりません。 Neither --cached patch command writes working CSS.
アプリが成功した後の繰り返しではなく、ネイティブ コミットの代替:
git commit --quiet -m "feat: refine the hero and card spacing"
git status --short
git diff -- styles.css静かなコミット: 0 を終了、出力なし。ステータス:
M styles.css残りの完全な作業差分:
diff --git a/styles.css b/styles.css
index 4dc8369..6382365 100644
--- a/styles.css
+++ b/styles.css
@@ -56,7 +56,7 @@ h1 {
.feature-card {
padding: 1rem;
border: 1px solid var(--line);
- border-radius: 0.5rem;
+ border-radius: 0.75rem;
background: var(--surface);
}
結果
At the end of this lesson: three commits on main. HEAD/インデックスには新しい見出しとより広いヒーローが含まれていますが、半径は依然として 0.5rem です。作業半径は0.75remです。ステージングされていない変更があるのは、styles.css のみです。リモート、マージ、リベースはありません。オプションのノートブック/クリーンな代替品は、このチェックポイントに代わるものではありません。
よくある間違い
- 置換の追加された半分のみを選択します。必ずしも意図したパッチであるとは限りません。
- CSS ファイル全体のステージング: 半径も含まれます。
- target-index CSS を作業中の CSS の上に貼り付けると、意図的に個別に編集した内容が失われます。
- 今すぐクリーンアップコミットを行う: レッスン 8 の開始タスクと矛盾します。
何か問題が発生した場合
Use cached/working comparisons to diagnose an index mismatch.コミットする前に、ライン/ハンクのステージングを解除すると、作業中の編集を破棄せずに選択内容を変更できます。 Git が不正なパッチまたは古いパッチを拒否した場合は、停止します。無理強いしないでください。現在のファイルを再度読み取り、正確な内容を再選択します。失敗したコミット/フックにはフックをスキップする権限がありません。
理解度を確認してください
各質問に答えてから、その理由を読みましょう。 「必須」とマークされた質問は、レッスンの完了にカウントされます。
6 個中 0 個が正解です
必須の質問に正しく答えると、レッスンを完了できます。
このブラウザで確認しました。
練習する
ファイル全体を使用して、3 つの異なる半径/幅の状態を説明します。入力の変更: RADIUS ペアもステージングすると、次のコミットには両方の CSS 変更が含まれ、CSS の違いは残りません。別のリプレイでのみテストしてください。レッスン 8 の正規半径編集を維持します。
あなた自身の確認: サイトはあなたのコンピュータを認識できません。
レッスンを完了するには、必須の質問に正しく答え、実践的な演習を確認してください。
要約
- 意図した変更に一致するスコープを選択します。
- 準備された完全なファイルと残っている作業差分を確認します。
- 独立して有用な作業を、破棄せずに分離して保管します。
関連している
用語集の用語の紹介
ハンク — كتلة;選択された行 — 選択された行ステージ — تجهيز;アンステージ — إلغاء التجهيز;パッチ — ขعة;インデックス — 番号。
ビデオトランスクリプト
ビデオのナレーションが次々と流れます。
トランスクリプトを表示する
- その間、変更を 1 つ準備します 次のものを保存します。
- 近くの編集を属することができます さまざまな意図に。
- 見出しと両方の CSS を保存します コミットを選択する前に編集してください。
- どちらかを選択する前に、両方の変更内容を読んでください。
- 孤立したものから始める 見出しの差し替え。
- この見出しの塊を演出し、 無関係なファイル変更ではありません。
- 完全な差分を表示したままにする ライン選択用。
- 交換品には以下が含まれます 行を削除および追加しました。
- 幅ペアをステージングしながら、 半径を外側に残します。
- 用意した内容を確認し、 残りのコンテンツは別途お読みください。
- アンステージング修復の選択 作業中のテキストを破棄せずに。
- ハンク全体の選択は同等です まさにこのハンクに対してのみ。
- チェックボックスをオフにしても、 コンテンツのステージを解除または削除します。
- ネイティブ パッチにより更新されます。 作業ファイルではなくインデックスです。
- 選択した内容が完了していることを確認します 単なるハイライトではなく、ファイル。
- どの半径に属するか 準備されたスナップショット?
- 見出しと幅をコミットし、 半径は後で残しておきます。
- 残りのCSS編集 意図した結果です。
- 次回のレッスンで録画します 独立した半径編集。
- 半径も選択すると、 CSS diff には何も残りません。
- 変更された差分には新しい差分が必要です 強制的に適用するのではなく、選択してください。
- 役に立つ仕事を捨てないでください 段階的な選択を修正します。
- 準備されたものと残っているものに名前を付けます 続行する前に編集してください。
- 半径編集を維持します 次の明示的なコミット。