tsujiprogram’s diary

共に学んで行きましょう‼️

git 初期設定

macの場合ターミナルから

git config --global:使用ユーザー

git config --system:システム上の全ユザーの全リポジトリ

git config --local:指定したリポジトリ

 

初期設定

git coufig --global user name :git上のユーザーネームを決める

git coufig --global user email :git上のメールアドレスを設定する。実際の自分のメール

               アドレス使用

CSS とは?

CSSとは?

 Webページのデザインやレイアウトなどの見栄えを変えていくための言語。

 スタイルシートと呼ばれる。

 

HTML→CSSを書く方法

1.CSSファイルを別に作成し読み込む

 

2.HTMLファイルにstyleタグを作成し書く

 <style>

    CSS

 </style>

→今回はこのパターンについて説明していく

 

3.HTMLタグの中に書き込む

 <p style="color=~"

  〜

 /p>

 

CSSタグ

 bodyタグ(body {~})

 →bodyタグ内にある全てのデザインを変更する意味

 

 

Git ブランチ マージの基本・処理 コンフリクト コマンド

ブランチ使用・理由

・gitを使用した開発ではブランチを必ず使用する。

・通常は最初にコミットでgitが自動的に生成するマスターブランチを利用する。→このブランチが標準のブランチとして機能している。

 

それでは、どのような時にブランチを使用するのか

→例えば、過去リリースしたコミット済みのある機能に対して、性能向上が期待できる

 ロジックが思いついたとします。本当に狙い通りいくかは実際に試すしかない。共有 

 リポジトリ反映させるのは検証が終わってからになる。

              ↓

 

 そのため、ブランチを使用し、マスターブランチの開発とは関係ない機能を試す場所として利用していく。

 

ポイント:ブランチは好きな名前を付けることが出来るため、何のためのブランチかを分かりやすくする名前を付ける!

 

 

開発の流れ(ブランチとマージ

1.サンプルシステム1.0がをリリース

 

2.新プロジェクト「サンプルシステム2.0」ブランチ始動

 →メンバーから1.0に対して開発段階で、何度もコミットとプッシュされていく

 

3.運用チームより1.0に重大な障害報告

 

4.一旦サンプルプロジェクト2.0についての開発を中断して、バグ対応開始する。

 

5.バグ対応のためのブランチ作成bugfix

 →これまで作業していた2.0から、ブランチbugfixに切り替える。

  (この切り替え作業は、ローカルの作業ディレクトリで実施する)

 

6.問題を修正し、マスターブランチにbugfixブランチをマージする。

 →マスターブランチに組み込まれる。

 

7.サンプルプロジェクト1.1をリリース

 →今回のマージは「fast foward(ファストフォワード)」という

 

8.「サンプルシステム2.0」ブランチに戻り、新プロジェクトの開発再開

 

 

マージの基本

マージを理解していないことにより、履歴の喪失などのリポジトリを破壊してしまうことがある。他にもgitでトラブルが発生し開発が停止してしまった。これらはリベース(rebase)コマンドを使った時に起こりやすい

→そのため、マージとリベースは特定の人のみにするなどの制限を設ける場合がある。

★マージは枝分かれしたブランチを一つに統合することを意味する。コミットされる度

 にブランチは1つずつ版を重ねていくことになる。コミットは1ファイルだけでなく 

 複数のファイルが含まれている。

 

そのためマージ処理とは・・・

1.同一ファイルに行われた変更を統合する

2.コミットに含まれるファイル全体を統合する

ことを意味する

 

 

マージ処理の方法(上記開発の流れを使用して説明する)

1.fast foward(ファストフォワード)=早送り

 マスターをチェックアウトしている状態で、bugfixをマージする

git merge bugfix

→マスターブランチにbugfixが組み込まれる!

 

 

2.ファストフォワードしないマージ

git merge 2.0

 このマージによって新しいコミットができる。ファーストフォワードと違い枝分かれした履歴を保持した状態で新規作成する

 同じコマンドを実行しても、ファーストフォワードとファストフォワードしない異なる動作をするが、gitは賢く動作する。

 

 

3.rebase(リベース)

 例えば、バグ対応版ブランチとサンプルプロジェクト2.0ブランチの開発を継続する。

2つが並行している中でバグ対応ブランチが1.0の元に変わる→これをrebase(リベース)という。

 

 2.0は複数のメンバーに共有されていることが多い。2つが並行している中でバグ対応ブランチが1.0の元に変わり1.1となる。そのためリベースすると、1.1は1.0から派生している。1.1と並行している2.0は、共有リポジトリへpushできなくなってしまう

 

→厳密に言えば、強制的に上書きはできるが、バージョン管理システムを利用している開発では、版の履歴が重要となってくる。

              ↓

対策として、共有リポジトリではリベースしないこと、ローカルのみに存在するブランチに対して操作することが上げられる。

 

 

コンフリクト(conflict)

マージを行うと、コンフリクト(conflict)衝突が発生する場合がある。

衝突とは、マージを実行した時に「同じファイルの同じ行に違う変更をしていたブランチとブランチがマージした場合を指す。

この場合gitはどちらを採用すればいいか分からない状態が生まれるため利用者の判断が必要となる。

pullでも起きる(プルはフェッチとマージを行っているため)

 

コンフリクトの対処

まず、コンフリクトが解決するまで処理を停止させる

gitがどこのソースコードで発生したか、詳細な情報を提示してくれるため、提示された内容のどちらを採用するかを判断する。→コンフリクト解消

 

git status

→マージが失敗したソースコードを確認できる

 

解決後修正したコードに対して、索引(index)に追加する必要があり、gitに修正したことを知らせる必要がある。

最後にコミットを実行してコンフリクトは解決する。

 

 

Gitコマンド

git branch ブランチ名新しいブランチを作成するコマンド

git branch -d[-D] ブランチ名ブランチの削除するコマンド(-Dは強制的に削除

                る)

 

 

git checkout[switch] ブランチ名別のブランチに切り替えるコマンド

git checkout[switch] -b[-c] ブランチ名新しいブランチを作成して切り替える

                      マンド

 

 

git diff   ファイル名:Gitリポジトリ内の変更を確認・比較するために使用するコマンド

 

 

git log :gitリポジトリの履歴を表示するコマンド

 

 

git stash:作業中の変更を一時的に保存し、作業ディレクトリを整理するコマンド

     →変更点を一時的に棚に上げて、綺麗にし他の作業が終わった後に再度戻っ

                        て作業を始められる

 →git stash listスタッシュした一覧を表示する。

  git stash apply[stash @{スタッシュ名}]最後にスタッシュしたもの[指定した

                      スタッシュ]作業ディレクトリ戻す

 

  git stash pop[drop stash @{スタッシュ名}]最後にスタッシュしたもの[指定し

                        たスタッシュ]削除する

 

  git stash clearすべてのスタッシュを削除する

Git 分散バージョン管理によりチーム開発の流れ

リポジトリの作成

git init    を実行することにより初期リポジトリが作成できる

 

 

クローン

共有リポジトリを利用して開発を進める場合は、クローンして作業ディレクトリをローカルに作成する

クローンはサーバーが保持しているデータをほぼ全てローカルにコピーする。

 

→プロジェクトの全ての履歴が手元にコピーされることを意味する

★他の開発者に影響を与えずにブランチを作成できる分散管理バージョンのメリット!

 

 

作業ディレクトリを作成するコマンド

git clone https://{username}@{domain}/{path}/{to}/{repository}

 

 

ファイルの追加

作業ディレクトリで変更したファイルを索引に追加する。(コミット準備、管理対象にする)

git add <filename>

または

git add *  #変更のあったファイルをすべて索引に追加する

 

 

変更内容をコミット

git commit -m "{初めてのコミット}"

→変更内容が索引からコミットされ、HEADに格納された。まだ共有リポジトリには反映されていない。

 

 

共有リポジトリにプッシュする

pushプッシュ):共有リポジトリに反映させる。反映されるために使用するコマンド

git push origin ブランチ名

→originは共有リポジトリを指す名前。

git push origin --deleteブランチ名:ブランチを削除するコマンド

 コマンド解釈:マスターブランチにコミットされたHEADの内容を共有リポジトリ

        送信するとなる。

 

 push後も開発を継続していくと、さらにコミットを繰り返すため、作業ディレクトリに変更が溜まっていく。

ローカルでリポジトリを作成した場合や、共有リポジトリからクローンしていない場合でも、後から共有リポジトリを登録することができる。

git remote add origin <server>

登録後に共有リポジトリにpushする

 

共有リポジトリから最新をpull(プル)・merge(マージ)

共有リポジトリは他の開発メンバーもコミットpull(プル)する。

 

pullプル:他のメンバーが追加した機能を修正したファイルを自分の作業ディレクトリに取り込むこむコマンド

fetchし(共有リポジトリの最新情報を取得

 git pull

 上記を作業ディレクトリで実行する。

        ↓

 merge(マージ)する。(自分の作業ディレクトリと統合

 

 

Gitとは 用語 作業の流れ

 Gitとは

 ソースコードなどを管理共有するために使う分散型バージョン管理システムである。仮に誰かがソースコード上書きしたとしても、簡単に元に戻すことが出来る。また、いつ・誰が・どのように変更したかといった変更履歴と共にファイ ルを保存できるため複数の共同開発で利用される。

通常は開発メンバーで一緒に開発を進めることが想定されている。

 

Gitでできること

新旧ファイルの一元管理

古いバージョンに戻す

編集履歴の共有

複数人の修正を1つに統合

 

 

Git用語

リポジトリファイルの貯蔵庫のこと、バージョン管理したいファイル群を格納してお

      く箱のこと

 

共有[中央]リポジトリ複数人でリポジトリ共有して開発を行う時、開発者全員が参

             照し、開発の元になるリポジトリ

 

作業ディレクト共有リポジトリから取得したローカル環境のリポジトリである。

         共有リポジトリ同じ構成ユーザー専用のファイル群である。

         由に追加・編集できる。Gitを使った開発ではこの作業ディレクト

         で開発を進める。

 

コミット:新規作成したファイルや編集したファイルを保存することを意味する。

     新しい機能を追加、バグの修正、作業ディレクトリ上で一区切りついた時に

     コミットしそれまでの作業を一時保存する。

     ファイルの変更後、ファイルを保存した上でコミットを行う。

 

索引(index):コミットするためにファイルを索引に追加し、コミット予定のファイル群

       を記録する。これを「ステージング」「コミット予定」「管理対象」という

 

ブランチ:1つのプロジェクトから履歴の流れを分岐して記録していくことを指す。

 

masterブランチ安定したバージョンを保持しておくブランチを指す。

 

HEAD:作業ディレクトリでコミットされた最後のコミットを指す。

 

ステージング:Gitを使用してコミットする前に、変更したいファイルを選択して準備す

       る作業のこと。→変更を明示的に行うことでコミットしたい内容のみス

       テージングできるようになる

 

インデックスステージングされる場所のこと

 

Gitを使用した作業の流れ

1.作業ディレクトリでファイルの追加修正を行なう

 

2.索引(index)する。

 

3. ステージングした内容をcommitする。
 git commitでコミットが作成される
→1〜3は全て作業ディレクトリで行う。この時点では共有リポジトリには反映されて 

 いない。


4. リモートリポジトリにpushする。
リモートリポジトリにも分岐を作成する。


5. リモートリポジトリに作成した分岐ブランチから、developなど分岐したブランチの 

 内容を反映させたいブランチへのPull Requestを作成する。


6. レビュー依頼する。


7. 修正があれば修正する。


8. マージされたらローカルリポジトリに戻り、developブランチに切り替え、上記内容

 をpullしてくる


9. developブランチから新しいブランチを作成し、機能開発を行う。


10. 1に戻る

CSS 文字の色の変更 文字を大きくする方法

idの場合

#任意の名前 {

   color: red;

}

で色が変わる

 

classの場合

.任意の名前 {

   color: red;

}

で色が変わる

 

.任意の名前{

   font-size:   文字のサイズ;

}

de

大きさが変わる

 

 

HTML 数値 パスワード メールアドレス 電話番号 URL レンジ入力欄 日時 隠し入力

<input type="">→の部分に入れることでできること!

 

<input type="number">:テキストボックス内の入力を数値のみに指定できる!

 

         注意:先頭が0から始まる場合は先頭の0が消されてしてしう。。。

 

       ポイントカード番号、口座番号、郵便番号にはtype="text"を使う!

 

 

<input type="password" value="〜">

 :パスワード管理ツールや、ブラウザ・端末のパスワード管理システムが「どこがパ

  スワード入力欄なのか」を検知し、自動補完できるようになる!

  表示される時は文字が『』等の文字に変換される!

 

 注意maxlengthを使わない→文字数の制限ができるが、意図しないところで切られ 

    てしまう場合がある!

    例:maxlength=”12”の場合12までしか打つことができない

      →コピペして15文字打ってしまうと12も区切られどこで間違えたかが不透

       明になる。

 

 

<input type="email" id="〜" >:見かけ上テキストボックスと一緒だが・・・ 

               エラーチェックが効く

             →メールアドレス形式以外を打ち込むとエラーが起こる

 

 

<input type="tel" placeholder="〜">:テキストボックスと見た目は同じ。

                  AndroidiOSのモバイル端末では通常の文字列

                  入力用キーボードが表示される

                  →エラーチェックはない

           ポイントpatternを使い許容できる文字を指定できる!

               → pattern="[\d\-]*":ローマ字とハイフンは許容でき

                るとの意味となる

 

<input type="url" id="〜" >:URLを書くためのテキストボックスが出てくる!(見た目

               はテキストボックスと一緒)

             →エラーチェックが効く

 

 

<input type="range" name="〜" min="〜" max="〜">

 :レンジ入力欄(数値を選べるスライダー)を設置するために使う。

  (ミニマムとマックスを指定する!)

 

 

<input type="date" name="〜">:日付の入力欄(フィールド)を作成するために使

                 う。「年」「月」「日」の3つの値を入力するフィール

                         ドが作られます。(年/月/日)

                 →valueを使うと初期の表示を指定できる。

                 →min,maxを使うと選択できる時間の範囲を指定で 

                 きる。

 

<input type="time" name="example">:時刻の入力欄(フィールド)を作成するため

                                                 に使う

                →valueを使うと初期の表示を指定できる。

                →min,maxを使うと選択できる時間の範囲を指定で 

                   きる。

 

 

<input type="hidden">:画面上には表示されない

           →ユーザー知る必要がなくサーバーには送りたい情報を格

            納するために使用。

   例)ブラウザからファイルをアップロードしたときのファイル名をサーバーに伝   

     えたいが、ファイル名はユーザーに見える必要がない

     →<input type="hidden">にセットしておく。