テスト

先週のJUnitその1

先週のJUnitの復習

「最強のソフトフェアとは」小泉さん(説)

最強のソフトウェアとは変更に強いソフトウェアである。時代、人、場は変化してゆくものだが、それに対応できるソフトウェアこそ最強なのである。そして、変化できる事こそが、ソフトウェアのメリットなのである
では、変化できるソフトウェアとは具体的にどういうことなのだろうか。

それは、

変更した時にバグを出す事ができる事。

何どもテストを実施できたら最強のソフトウェアに近づく。そして、何どもテストを実施するためにテストを自動化するのである。
自動テストは、学習コストがかかっているので一概にコストがかからないとは言えない。なぜなら学習コストがかかったのにテストを一回きりしか行わないのではもったいないからである。しかし、最強のソフトウェアを作るためにテストを繰り返し行う場合、学習コストも無駄ではない。

私たちは最強のソフトウェアを作るために自動テストするのである

  • TDD(Test Driven Development)
    テストを行うことをベースに開発を進める。
    • Red(失敗)・・・まずはテストを書いて失敗させる
    • Green(成功)・・・Redだった箇所をGreenにすることを考えてガッと実装する
    • Refactor・・・リリースできる状態に改善する
  • BDD(Behavior Driven Development)

    ユーザーに対しての振る舞い

※自動テストだからといって全てを自動化できるわけではない。例えば、人間にしかわからない、「見栄え」や「操作感」などは人がテストするしかない。

JUnit

f:id:marikooota:20160515235025p:plain f:id:marikooota:20160515235016p:plain

  • 可読性の高いテストコード

プロダクションコードはメソッドの使い回しをするなど、重複する定義はまとめるべきだが、テストコードは重複したとしても、テストケースが独立していた方が可読性が高く実装しやすい。
つまり、何を前提として(Given)何を行い(When)何を期待しているのか(Then)が理解しやすいテストコードを書かなければいけない。
※When, Thenがない場合はGiven, Expect(事前準備ができているのか確認する)にする

テストケース・・・ある状態である入力(操作)をしたときにどのような結果を期待できるのかを記述したもの
SUT(System Under Test)・・・テスト対象となるクラスやオブジェクト。もし複数のSUTを一つのテストケースで扱った場合、そのテストケースで何のテストをしているのかが不明瞭になる。

  • アノテーションまとめ
    アノテーション 使い方
    @Test テストケースを定義したメソッドに付与する(テストメソッドの宣言)
    @Ignore 一時的にテストの実行を抑制したい場合に該当するメソッドをスキップできる
    @Before テストする前に実行してくれる(テストのブロックごとに)
    @After テストした後に実行してくれる(テストのブロックごとに)
    @BeforeClass 各テストで一回だけ、テストする前に実行される
    @AfterClass 各テストで一回だけ、テストした後に実行される

jQueryでサイドバー作り

アニメーションを使うpart2

jQuery最高の教科書」を読んで作りました。

作ってみたサイドバー
  • 通常時 f:id:marikooota:20160505150047p:plain

  • クリック時 f:id:marikooota:20160505150143p:plain

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:relativefixedを指定し、その中に子要素を入れて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最高の教科書」を読んで作りました。

作ってみたボタン
  • 通常時 f:id:marikooota:20160504210333p:plain
  • マウスオーバー時(ふわっと画像が変化します) f:id:marikooota:20160504210400p:plain
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を指定して画像を切り替えます。
    • マウスオーバー時は、kabuki1.pngのopacityを"0"にして、kabuki_green.pngのopacityを"1"にします。
    • マウスアウト時は、kabuki1.pngのopacityを"1"にして、kabuki_green.pngのopacityを"0"にします。

ボタンがふわっと変化するようなアニメーションを作るにはjQuery UIもインポートする。

参考書籍
jQuery最高の教科書 | 株式会社シフトブレイン著

jQuery

コードのメモ

  • HTMLの読み込みを最後まで待つコード

    HTMLを最後まで読み込んだ後に{ }の中の処理が実行される

$(function(){
  //HTMLを読み込んだ後に実行する処理
});

  • スタイルを変更するコード

    "セレクタ"に該当する要素のCSSの"プロパティ"を"値"に変更する処理

$('セレクタ') .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サーバーのセッション管理を行うものです。
セッション管理のしくみ f:id:marikooota:20160430114812p:plain セッション管理なしの場合、マロサーバは毎回の要求に対して独立にレスポンスを送るだけなので前回の要求内容を覚えていません。そのため、初回リクエスト時にマロサーバにリクエストを送っても、二回目以降のリクエストでは一回目のリクエスト内容を覚えていないので話がつながりません。7ちゃんブラウザは毎回初回リクエストのように全てを伝えなければなりません。 f:id:marikooota:20160430111609p:plain 一方セッション管理ありの場合、マロサーバは初回リクエストで発行したセッション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アプリケーションを構築できるようにしました。

アスペクト指向

今日のまとめ

AOPOOP

アスペクト指向(AOP)は、オブジェクト指向(OOP)の本質でない部分を抜き出したものです。簡単に言えば、AOPOOPではカバーできない箇所を補います。複数のオブジェクトで同じ操作が散在してしまうことを「横断的関心事」といいます。AOPでは、横断的関心事をアスペクトというモジュールに分離、管理をすることで、OOPよりも処理の保守性と再利用性のレベルを高めることができます。

AOP・・・Aspect Oriented Programming
Aspect・・・横断的関心事
モジュール・・・一連の機能がひとまとまりになる複数の機能

f:id:marikooota:20160428010214p:plain

  • ロギング

    ロギングとは、起こった出来事についての情報などを一定の形式で時系列に記録・蓄積すること。そのように記録されたデータのことを「ログ」(log)という。

  • Pointcut

    ジョインポイントの集合のこと。条件にあうジョインポイントだけを抜き出すことも可能。

  • Interceptor
    メソッドの呼び出しタイミングで、振る舞いを挿入すること。
    • LogInterceptor
      メソッドの実行時間を測る。どのメソッドに時間がかかっているのかを把握することができる。
  • Advice
    ジョインポイントに埋め込まれるアスペクトコードのこと。3つの種類がある。
    • Around Advice
      ジョインポイントの前後で実行される。
    • Before Advice
      ジョインポイントの前で実行される。
    • After Advice
      ジョインポイントの後に実行される。2つの種類がある。
      After returning Advice
      ジョインポイントでの処理が正常に終了した後に実行される。
      Throws Advice
      ジョインポイントでの処理で例外が発生した場合に実行される。
  • JoinPoints

    アスペクトコードが挿入できる位置を表したもの。例えば、メソッド呼び出しの前後などは、ジョインポイントになる。

  • Thymeleaf

    Javaのテンプレートエンジンライブラリ。テンプレートエンジンというのはデータとテンプレートを合体させ、文字列を作る仕組みのことです。XML/XHTML/HTML5で書かれたテンプレートを変換して、アプリケーションのデータやテキストを表示することができます。

<html xmlns:th="http://www.thymeleaf.org" lang="ja">
<p th:text="${hoge}">
MVC

Model View Controller

フロントコントローラー

f:id:marikooota:20160429214145j:plain

フルスタック
Gradle

Groovy製のビルドツール。 ビルド・・・ソースからアプリケーションを構築するまでの一連の流れ。
ビルドツール・・・ビルドに関わる各種処理を実行。

論理削除とrollbackの話

今日のまとめ

論理削除と物理削除

物理削除はDELETE文を使って物理的にデータを削除してしまうことです。データベースから完全にレコードを削除してしまって、簡単には復元することはできません。(バックアップデータから復元しなければいけない)
対して論理削除は、間違って消してしまっても簡単に復元できます。データベースにフラグとなるフィールドを用意しておいて、削除するときに削除フラグを立てることで、表示時にそのデータを見せなくする方法です。UPDATE文を使います。
こんなときに論理削除を使います。

  • ユーザーからはデータがないように見せたいけど、実際のデータは消したくないとき

  • "削除した"データを検索したい

  • 誤った操作をしたとき、すぐに元に戻したいとき

削除フラグ・・・「削除したものとして扱いますよ」というフラグ

rollback

トランザクションで行われた作業を元に戻すためのメソッドです。現在のトランザクションを終了して、保留中の変更をすべてデータベースにロールバックします。

7ちゃんの例 f:id:marikooota:20160426233521p:plain

7ちゃんがデータを更新して新しいデータに変更されるまで一連の流れをトランザクションといいます。
7ちゃんは"hachichan"というアカウント名に変更しようとしていますが、更新中にエラーが起きてしまいました。そのため、"hachichan"という更新途中のデータはトランザクションを開始したときの"nanachan"という更新前のデータに戻ってしまいます。

つまり、トランザクションを開始して、何らかの障害が更新途中の処理で起きてしまった場合、更新途中のデータでもトランザクション開始時の状態に戻してデータの整合性を保つ処理を行う必要があります。この処理のことをロールバックといいます。

ロールバック・・・データ更新などで障害が起こったときに、その前の状態にまで戻ることをいう。 後進復帰とも言う。


今日の復習!!

Spring Framework

Javaプラットフォーム向けのオープンソースアプリケーションフレームワーク・・・。

アプリケーションフレームワーク・・・アプリケーションを実装するために使われるクラスやライブラリの集まり

ReflectionUtils

例外処理するためのシンプルなユーティリティークラス。

Invoke

発動させるという意味。メソッドを発動(実行)させる。

@AutoWired

DIコンテナがその変数の型に代入できるクラスを@Componentの付いているクラスから探し出し、インジェクションしてくれる

DI・・・オブジェクト間で依存性のあるコードを実行時に注入するという設計思想
インジェクション・・・注入

pageContext

ページの情報を取ってくるオブジェクト

JSTL

JavaServer Pages Standard Tag Libraryの略。
JSPで利用される標準的なカスタムタグをまとめたもの。

参考サイト データベースの論理削除と物理削除
クロスイデアBlog「論理削除か物理削除か」
Oracle® Database SQL Reference
IT用語辞典 ロールバック
基本情報技術者講座