Gitまとめ
リモートリポジトリとローカルリポジトリ
リポジトリとは、ファイルやディレクトリの情報や変更履歴をまとめて記録しておく場所です。
複数人の開発者が参加するプログラミング環境において、ソースコードや仕様に関する情報をまとめて保管してくれます。
Gitのリポジトリにはリモートリポジトリとローカルリポジトリの2種類があります。
初期化コマンド
git init
Gitリポジトリを新たに作成するコマンド。
バージョン管理を行っていない既存のプロジェクトを変更する場合や、空の新規リポジトリを作成して初期化したい場合に使用します。
git initを実行すると、カレントディレクトリに".git"フォルダが作成され、プロジェクトのバージョンの管理を開始できます。
addする
作業ディレクトリ(ワークツリー)の変更をステージングエリアに追加するための操作。
個々のファイルのアップデート内容を次回コミットの対象とすることをGitに指示します。
git addコマンドだけでは実際にはリポジトリに影響は与えないので、git commitコマンドを実行して変更を記録しなければいけません。
ーaddコマンドの種類ー
ワークツリーに新規登録もしくは変更されたファイルをaddする
(rmコマンドなどで削除されたファイルはaddされない)
git add .
一つ前と最新のステージを比較して、変更があった部分のみをaddする
(新規作成されたファイルはaddされない)
git add -u
変更されたファイル、削除されたファイル、新規作成されたファイル、全てをaddする (git add .とgit add -u の両方実行したのと同じ感じ)
git add -A
なんでaddしなければいけないの?
一度にたくさんのファイルをcommitしたい場合に、新規作成や変更したファイルをステージングエリアにaddしておくことで一回のcommitで済むから。
git addしてステージングエリアという場所に新規作成や変更したファイルたちをひとまとめにして置いておくと、それらを一気にcommitすることができるので、一回一回差分をチェック(git diffコマンド)してcommitするという手間を省くことができる!ステージングエリア
ステージエリアやインデックスとも呼ばれます。
ステージングエリアの中身は .git ディレクトリの中にある"index"というバイナリファイルです。
ステージングエリアはコミットしたいファイルをひとまとめにしてとりあえず置いておくのに使います。
commitする
ファイルやディレクトリの変更や追加を記録するための操作。
コミットを実行すると、リポジトリ内では前回コミットされた時からの差分を記録したリビジョンが記録されます。
最新のコミットから辿ることで過去の変更履歴やその内容を知ることができます。
コミットするときにはコミットメッセージの入力が求められます。あとから見てわかりやすいコメントを書くように心がけましょう。(適当に書いたらダメ!具体的かつ簡潔に)
git commit -m "コメント"
ー応用編ー
直前のコミットの内容を修正する
git commit --amend
コミットメッセージの書き方
提言: コミットメッセージの一行目には要求仕様を書け - Qiita
Gitのコミットメッセージの書き方 - Qiita
ここまでのまとめ
ワークツリーで作業していたファイルを新規登録したり変更した時にaddしてステージングエリアにひとまとめにしておく。
ステージングエリアにひとまとめにされたファイルたちをcommitしてローカルリポジトリに記録する。
ブランチってなに
履歴の流れを分岐して記録しておくためのものです。
分岐したブランチは他のブランチの影響を受けないので、同じリポジトリで複数の変更を同時に進めていくことができます。
一つのプロジェクトから枝分かれさせて別の作業を行うことを「ブランチを切る」と言います。
また、分岐したブランチはマージ(合流)することで一つのブランチにまとめ直すことができます。
pushとpullとfetchとmerge
git push
ローカルリポジトリの内容をリモートリポジトリに送り込むコマンド
git fetch
リモートリポジトリの内容をローカルリポジトリに取り込むコマンド
git merge
リモートローカルのブランチを合流するコマンド
git pull
リモートリポジトリの内容をローカルリポジトリに取り込んだ後、現在のローカルのブランチに対して、それに対応するリモートのブランチをマージするコマンド
まとめるとこんな感じかな...
- 7ちゃんマロくんむらちゃんの例
7ちゃんの自己紹介ページを作るために、マロくんとむらちゃんも手伝うことになりました。
三人は他のメンバーの作業の影響を受けないようにmasterから自分のブランチに切り替えて作業を行います。
- むらちゃんの場合
git checkout #6680
swich to branch '#6680'と結果が返ってきたらOK!
写真ギャラリーの機能を追加し終わったむらちゃんはmasterに自分のブランチの変更を反映させます。
git add . git commit -m "写真ギャラリー追加" git push
このようにしたいところですが、masterに7ちゃんが先にpushしているので、むらちゃんは7ちゃんの変更をpullしてからpushします。
この例のようにブランチを切り替えながら作業を行うことで他のメンバーの作業による影響を受けることなく、自分の作業に取り組むことができます。
また、作業単位で履歴を残すことで、問題が発生した場合に原因となる変更箇所の調査や対策を行うことが容易になります。
では、
7ちゃんとむらちゃんが同じ箇所を変更していた場合、どうなるのでしょう?????
次回に続く...
今回のまとめ
Gitコマンド一覧
コマンド | 説明 |
---|---|
git init | Gitリポジトリを新たに作成するコマンド |
git add | 作業ディレクトリの変更をステージングエリアに追加するコマンド |
git commit | ファイルやディレクトリの変更や追加を記録するコマンド |
git pull | リモートリポジトリの変更内容を取り込むコマンド |
git push | ローカルリポジトリの変更内容をリモートリポジトリに反映させるコマンド |
git merge | リモートローカルのブランチを合流するコマンド |
git fetch | リモートリポジトリの内容をローカルリポジトリに取り込むコマンド |
git clone | 既存のリポジトリのコピーを取得するコマンド |
git status | 現在の状態を見るコマンド |
git diff | 差分を見るコマンド |
git log | コミットのログを見るコマンド |
git grep | リポジトリで管理されているファイルを検索するコマンド |
git rm | ファイルを削除するコマンド |
参考サイト
サルでもわかるGit入門 〜バージョン管理を使いこなそう〜 | どこでもプロジェクト管理バックログ
git add -A と git add . と git add -u の違い - Qiita
Git チュートリアルとトレーニング| Atlassian
git push の反対は git pull ではない - Qiita
テスト
先週のJUnitその1
先週のJUnitの復習
「最強のソフトフェアとは」小泉さん(説)
最強のソフトウェアとは変更に強いソフトウェアである。時代、人、場は変化してゆくものだが、それに対応できるソフトウェアこそ最強なのである。そして、変化できる事こそが、ソフトウェアのメリットなのである
では、変化できるソフトウェアとは具体的にどういうことなのだろうか。
それは、
変更した時にバグを出す事ができる事。
何どもテストを実施できたら最強のソフトウェアに近づく。そして、何どもテストを実施するためにテストを自動化するのである。
自動テストは、学習コストがかかっているので一概にコストがかからないとは言えない。なぜなら学習コストがかかったのにテストを一回きりしか行わないのではもったいないからである。しかし、最強のソフトウェアを作るためにテストを繰り返し行う場合、学習コストも無駄ではない。
私たちは最強のソフトウェアを作るために自動テストするのである
TDD(Test Driven Development)
テストを行うことをベースに開発を進める。- Red(失敗)・・・まずはテストを書いて失敗させる
- Green(成功)・・・Redだった箇所をGreenにすることを考えてガッと実装する
- Refactor・・・リリースできる状態に改善する
BDD(Behavior Driven Development)
ユーザーに対しての振る舞い
※自動テストだからといって全てを自動化できるわけではない。例えば、人間にしかわからない、「見栄え」や「操作感」などは人がテストするしかない。
JUnit
可読性の高いテストコード
プロダクションコードはメソッドの使い回しをするなど、重複する定義はまとめるべきだが、テストコードは重複したとしても、テストケースが独立していた方が可読性が高く実装しやすい。
つまり、何を前提として(Given)、何を行い(When)、何を期待しているのか(Then)が理解しやすいテストコードを書かなければいけない。
※When, Thenがない場合はGiven, Expect(事前準備ができているのか確認する)にする
テストケース・・・ある状態である入力(操作)をしたときにどのような結果を期待できるのかを記述したもの
SUT(System Under Test)・・・テスト対象となるクラスやオブジェクト。もし複数のSUTを一つのテストケースで扱った場合、そのテストケースで何のテストをしているのかが不明瞭になる。
jQueryでサイドバー作り
アニメーションを使うpart2
「jQuery最高の教科書」を読んで作りました。
作ってみたサイドバー
通常時
クリック時
HTMLのコード(サイドバー部分)
<aside> <ul> <li><a href="#"><img id="kabuki_side" src="kabuki_side1.png"></a></li> <li><a href="#"><img id="kabuki_side" src="kabuki_side2.png"></a></li> <li><a href="#"><img id="kabuki_side" src="kabuki_side3.png"></a></li> </ul> <button><img id="kabuki_open" src="open.png"></button> </aside>
- asideタグで囲んで、画像を縦並びのリスト表示にします。
CSSのコード(サイドバー部分)
.page-main > aside { background-color: rgba(0,0,0,0.8); width: 350px; height: 100%; top: 0; left: -350px; position: fixed; } .page-main > aside ul { margin: 0; padding: 0; top: 50px; left: 114px; position: absolute; } .page-main > aside li { margin: 0 0 20px; list-style: none; } .page-main > aside button { background-color: rgba(0,0,0,0.8); display: block; position: absolute; top: 150px; left: 350px; width: 52px; height: 132px; margin: 0; padding: 0; border: none; }
- サイドバーのwidthを350pxにして、leftを-350pxにすることでサイドバーを隠しておくことができる。
- サイドバーについている開け閉めボタンにはleftを350pxにすることでサイドバーにくっつける。
display:block, inline, inline-blockの違い(考え中)
display:block
対象の要素をブロックとして扱うことができる。
display:inline
対象の要素をインライン要素として扱うことができるので、他の要素と横並びに表示することができる。
display:inline-block
対象の要素をインラインのように横並びに表示し、さらにそれぞれの要素に高さや横幅も指定することができる。
position:absolute, relative, fixed, static
position:absolute
ボックス要素を絶対位置へ配置。position:absoluteが指定された要素は他の要素との関係は切り離されて全くの別物になる。
position:absoluteには必ず親要素がいることに注意。
親にしたい要素にposition:relativeかfixedを指定し、その中に子要素を入れてposition:absoluteを指定する。 br>top,bottom, left, rightは親要素との距離で、親要素を指定しなかった場合は勝手にブラウザが親要素になる。position:relative
相対位置での配置。本来表示されるべき位置からずらして表示できる。
position:fixed
固定位置での配置。
画面の一部を固定させ、それ以外の部分のみスクロールするように作ることが出来る。position:static
初期値。上記三つの設定を解除したいときに使う。
Java Scriptのコード(サイドバー部分)
var $aside = $('.page-main > aside'); var $asidButton = $aside.find('button') .on('click', function(){ $aside.toggleClass('open'); if($aside.hasClass('open')){ $aside.stop(true).animate({left: '-90px'}, duration, 'easeOutBack'); //❶ $asidButton.find('img').attr('src', 'close.png');//❷ }else{ $aside.stop(true).animate({left: '-350px'}, duration, 'easeInBack'); $asidButton.find('img').attr('src', 'open.png'); }; });
- CSSで指定したサイドバーのleftを操作することでサイドバーの開け閉めをする。(❶)
toggleClass()・・・このメソッドは引数に指定されたクラス名(文字列)が、jQueryオブジェクト内の要素のclass属性に指定されているかを確認し、指定されていない場合は追加し、すでに指定されている場合は削除する。
hasClass()・・・このメソッドは引数に渡したクラス名(文字列)が、対象要素のclass属性に含まれていればtrueを返し、含まれていなければfalseを返す。
attr()・・・要素の属性値の取得または属性値の設定を行うメソッド。
attr(属性名); //jQueryオブジェクトは返らない attr(属性名, 値); //jQueryオブジェクトが返る
animateメソッドで開いた状態までアニメーションさせた後、attr('src', 'close.png');を実行することで閉めるボタンに変更している。(❷)
filter()メソッドとfind()メソッドの違い
参考サイトfilter()とfind()の違い
参考サイト一覧
display:inline, block, inline-blockの使い方とサンプル
jQuery最高の教科書 | 株式会社シフトブレイン 著
jQueryでボタン作り
アニメーションをつかう
「jQuery最高の教科書」を読んで作りました。
作ってみたボタン
- 通常時
- マウスオーバー時(ふわっと画像が変化します)
HTMLのコード(ボタン部分)
<div class="page-main" role="main"> <div id="button"> <div class="inner"> <button> <span> <img src="kabuki1.png"> <img src="kabuki_green.png"> </span> </button> </div> </div> </div>
- 全体を#buttonで囲んで二つの画像を重ねる。
- imgタグで指定しているkabuki1.pngは通常時に表示する画像、kabuki_green.pngはマウスオーバー時に表示する画像。
- この二つの画像はJava ScriptからCSSの'opacity(不透明度)'を操作する事で切り替えます。
CSSのコード(ボタン部分)
#button button img:first-child { position: absolute; } #button button img:nth-child(2) { opacity: 0; }
- ここのコードは初期状態なので、通常時の画像を絶対配置にし、マウスオーバー時は非表示にします。
- buttonタグの最初の子要素にあたる"kabuki1.png"に対してimg:first-childを指定することで、特定の要素(この場合"kabuki1.png")を対象にスタイルを適用させることができます。
- :first-childは:nth-child(1)を指定した時と同じ動作。
- :nth-child(2)を指定するとbuttonタグの2番目の要素にスタイルを適用させることができます。
Java Scriptのコード(ボタンの部分)
$(function() { var duration = 300; $('#button button') .on('mouseover', function(){ var $btn = $(this).stop(true).animate({ backgroundColor: '#5fb751' //ボタンの背景を緑に }, duration); $btn.find('img:first-child').stop(true).animate({opacity: 0}, duration); $btn.find('img:nth-child(2)').stop(true).animate({opacity: 1}, duration); }) .on('mouseout', function(){ var $btn = $(this).stop(true).animate({ backgroundColor: '#fff' }, duration); $btn.find('img:first-child').stop(true).animate({opacity: 1}, duration); $btn.find('img:nth-child(2)').stop(true).animate({opacity: 0}, duration); }) });
- durationはアニメーションにかける時間を指定しています。
- buttonそれぞれにopacityを指定して画像を切り替えます。
ボタンがふわっと変化するようなアニメーションを作るにはjQuery UIもインポートする。
参考書籍
jQuery最高の教科書 | 株式会社シフトブレイン著
jQuery
コードのメモ
HTMLの読み込みを最後まで待つコード
HTMLを最後まで読み込んだ後に{ }の中の処理が実行される
$(function(){
//HTMLを読み込んだ後に実行する処理
});
$('セレクタ') .css('プロパティ', '値');
css( );・・・jQueryメソッド、その中身は引数。CSSプロパティと値を入れる。
$('セレクタ')・・・HTMLに指定されている、「id = 'セレクタ名' 」に対して命令している
$( )・・・「HTML要素を元にしてjQuery独自の要素を生成する」機能を持った関数。
この関数によってjQuery形式に変換された要素のことをjQueryオブジェクトという
つまり、「HTML要素を$( )関数によってjQueryオブジェクトに変換し、css( );メソッドでそのオブジェクトに変更を加えている」
<補足>(考え中)
$()にidを指定するとjQueryオブジェクトを取得できる(1行目)。Java ScriptのDOMのgetElementByIdで取得できるのは、Elementオブジェクトそのもの。(2行目)
以下は同じ
console.log($('#id')) console.log(document.getElementById('id'))
もし、jQueryでDOMと同等のものを取得したい場合は以下のように書く
$('#id').get(0)
実行タイミングをコントロールするコード
マウスオーバーした時とか、マウスアウトした時のタイミングで動きを加える
$('セレクタ') .on('イベントタイプ', イベントハンドラ);
on( );・・・特定のタイミングに実行したい命令の設定をするメソッド
- イベントタイプ
イベントタイプ | 該当するタイミング |
---|---|
mouseover | 要素にマウスが乗った時 |
mouseout | 要素がマウスから離れた時 |
mousedown | 要素上でクリックボタンが押された時 |
mouseup | 要素上でクリックボタンが離れた時 |
mousemove | 要素上でマウスが動かされた時 |
click | 要素がクリックされた時 |
dblclick | 要素がダブルクリックされた時 |
keydown | 要素にフォーカスした状態で、キーボードのキーが押された時 |
keyup | 要素にフォーカスした状態で、キーボードのキーが離された時 |
focus | 要素にフォーカスが当たった時(フォーカスできる要素のみ) |
blur | 要素からフォーカスが外れた時(フォーカスできる要素のみ) |
change | 入力内容が変更された時(textarea要素、input要素、select要素など) |
resize | 要素がリサイズされた時 |
scroll | 要素がスクロールされた時 |
function(){
//任意の処理
}
イベントハンドラの中には、イベントタイプで指定したタイミングで実行して欲しい処理の内容を記述する
アニメーション
$('セレクタ').animate({ 'CSSプロパティ': '値', 'CSSプロパティ': '値' }, アニメーション時間 );
animate( );・・・処理対象をアニメーション化するメソッド
animateメソッドの一つ目の引数にはアニメーション完了時の見た目を表現するCSSプロパティと値を指定する。二つ目の引数にはどのくらい時間をかけてアニメーションさせるかを指定する。時間の単位はミリ秒。1500の場合1.5秒かかる。
- もっとアニメーション
$('セレクタ').animate({ 'CSSプロパティ': '値', 'CSSプロパティ': '値' }, アニメーション時間, 'イージングの種類', function(){ //アニメーション終了時に実行する処理 } );
- CSSプロパティの種類
CSSプロパティ | 説明 |
---|---|
opacity | 要素の不透明度 |
- イージングの種類
イージングの種類 | 説明 |
---|---|
linear | 一定のスピードでアニメーションする |
swing | アニメーションの変化する速度が変わる |
- アニメーション終了時に実行する処理
アニメーションが完了した後に画面を元に戻したい場合などはfunction(){}の中に処理を書く
- アニメーションの途中でも次のアニメーションに移りたい場合
stop( true | false )
stop()・・・要素のアニメーションを停止するメソッド
引数 | 説明 |
---|---|
true | アニメーションをストップする |
false | アニメーションをストップさせない |
コードの書き方
$('セレクタ').stop(true).animate({ });
その他メソッド一覧
メソッド名 | 使い方 |
---|---|
find() | jQueryオブジェクトの各要素の子孫要素を対象として要素を絞り込む |
filter() | jQueryオブジェクトの各要素を対象として要素を絞り込む |
セッション管理とSpring Bootの話
セッション管理(Servlet)
Webアクセスに使うHTTPにはセッションの概念がなく,そのままでは複数のWebページをまたがった一連の通信をセッションとして認識できません。そこでWebサーバーがクライアントとの間のセッションを認識し,処理の進行状態を把握するセッション管理のしくみが必要になります。このセッション管理を実現する一般的な方法に、Webサーバーが発行するセッションIDを利用するものがあります。これは、クライアントがWebサーバーにログインした際、セッションIDを発行し、以後、その情報をもとにクライアントとWebサーバーのセッション管理を行うものです。
セッション管理のしくみ
セッション管理なしの場合、マロサーバは毎回の要求に対して独立にレスポンスを送るだけなので前回の要求内容を覚えていません。そのため、初回リクエスト時にマロサーバにリクエストを送っても、二回目以降のリクエストでは一回目のリクエスト内容を覚えていないので話がつながりません。7ちゃんブラウザは毎回初回リクエストのように全てを伝えなければなりません。
一方セッション管理ありの場合、マロサーバは初回リクエストで発行したセッションIDをもとに二回目以降の処理を行うので、7ちゃんブラウザが伝えたことは引き継がれていきます。
ショッピングサイトで買い物カゴに入れられた商品が注文を確定するまでそのまま引き継がれていくのもセッション管理を行っているおかげです。
セッション管理のソースコード
HttpSession session = request.getSession(); //getSession();でセッションを開始 Users user = (Users) session.getAttribute("users"); if (user == null) { String error = "セッションがタイムアウトしました"; request.setAttribute("error", error); request.getRequestDispatcher("/views/index.jsp").forward(request, response); } else { //セッションを保持していた場合の処理 }
Spring Boot
「効率的に必要最低限の作業でSpring MVCを使ったWebアプリケーションを構築できるようにしよう」という考え方から生まれたのがSpring Bootです。
Webアプリケーション用のフレームワークとしてはSpring MVCが用意されています。しかし、Spring MVCを利用するためには、必要となるフレームワークやライブラリを正確に組み込まなければなりません。また、処理を構築するにはMVCの各コードを作成しなければいけません。これではプログラミングに取り掛かるまでの作業がかなり大変です。
そこでSpring Bootは従来のXMLによる設定ファイルだらけのJava EE開発から、@アノテーションによる設定ファイルを使わない開発へシフトし、効率的にWebアプリケーションを構築できるようにしました。
アスペクト指向
今日のまとめ
AOPとOOP
アスペクト指向(AOP)は、オブジェクト指向(OOP)の本質でない部分を抜き出したものです。簡単に言えば、AOPはOOPではカバーできない箇所を補います。複数のオブジェクトで同じ操作が散在してしまうことを「横断的関心事」といいます。AOPでは、横断的関心事をアスペクトというモジュールに分離、管理をすることで、OOPよりも処理の保守性と再利用性のレベルを高めることができます。
AOP・・・Aspect Oriented Programming
Aspect・・・横断的関心事
モジュール・・・一連の機能がひとまとまりになる複数の機能
ロギング
ロギングとは、起こった出来事についての情報などを一定の形式で時系列に記録・蓄積すること。そのように記録されたデータのことを「ログ」(log)という。
Pointcut
ジョインポイントの集合のこと。条件にあうジョインポイントだけを抜き出すことも可能。
Interceptor
メソッドの呼び出しタイミングで、振る舞いを挿入すること。Advice
ジョインポイントに埋め込まれるアスペクトコードのこと。3つの種類がある。- Around Advice
ジョインポイントの前後で実行される。 - Before Advice
ジョインポイントの前で実行される。 - After Advice
ジョインポイントの後に実行される。2つの種類がある。
After returning Advice
ジョインポイントでの処理が正常に終了した後に実行される。
Throws Advice
ジョインポイントでの処理で例外が発生した場合に実行される。
- Around Advice
JoinPoints
アスペクトコードが挿入できる位置を表したもの。例えば、メソッド呼び出しの前後などは、ジョインポイントになる。
Thymeleaf
Javaのテンプレートエンジンライブラリ。テンプレートエンジンというのはデータとテンプレートを合体させ、文字列を作る仕組みのことです。XML/XHTML/HTML5で書かれたテンプレートを変換して、アプリケーションのデータやテキストを表示することができます。
<html xmlns:th="http://www.thymeleaf.org" lang="ja">
<p th:text="${hoge}">
MVC
Model View Controller
フロントコントローラー
フルスタック
Gradle
Groovy製のビルドツール。
ビルド・・・ソースからアプリケーションを構築するまでの一連の流れ。
ビルドツール・・・ビルドに関わる各種処理を実行。