SQL基礎は意外と難しい

SQL基礎Ⅰ(1Z0-017)

SQL基礎Ⅰ(1Z0-017)にやっと合格できたので記念にブログに残しておこうと思います。

12c SQLで撃沈

1Z0-017を受ける前は12cSQL(1Z0-061)を勉強していましたが、合格点65%中58%で落ちてしまったので1Z0-017に切り替えて受験しました。
12cでは、使った参考書と似た問題も多々ありましたが、応用問題が多かったです。

使った教材は


www.shoeisha.co.jp

徹底攻略 ORACLE MASTER Bronze 12c SQL基礎問題集[1Z0-061]対応 - インプレスブックス


この2冊です。
感想としては一冊目は解説と問題集が別々に取り外せるので、持ち運びしやすいです。 かばんがいつも重い私にはありがたかったです。
また、問題集に載っている問題と似た問題が本番で数問出題されました。
ですが、とにかく正誤表の量が多くて大変でした。
回答が間違っているところが沢山あったので、そのまま進むわけにもいかず一つ一つ見て直すのに時間がかかりました。

二冊目はJava Silverを受験した時にもお世話になった黒本です。
一冊目よりは応用の問題が多く、本番の試験により近かったかなと思います。
似た問題も数問出題されていました。

この二冊を通しで3周と、間違えた問題だけあと2周ほどしましたが、落ちてしまいました。
敗因として3点。

  • 複雑なネストの問題や副問い合わせをきちんと理解していなかった。応用力が足りませんでした。

  • 問題の意図や、言葉のニュアンスを読み解くのが難しい。

  • 制限時間内には十分終わるが、見直す時間が少なかった(120分で75問)。 私の場合20分ほど余って見直しましたが、最後まで見直すことができませんでした。

そこで金銭面の問題もあり、12cからSQL基礎Ⅰに切り替えました。

SQL基礎Ⅰで昇天

SQL基礎Ⅰの受験では、12cで使った参考書と同じものを使って、SQL基礎の範囲を勉強しました。
それに加えて、以下のサイトで勉強しました。

www.atmarkit.co.jp

試験は、12cで出題されたような複雑なネストの副問い合わせの問題は出題されず、SQLの基礎の問題が出題されました。
ですが、12cではさらっと触れたくらいだったビュー順序シノニムの問題がこれでもかというほど出題されて(運だと思います)撃沈しました。それ以外の問題の多くは、見てすぐわかるような問題でした。
90分で40問でしたが、1時間弱時間が余って、用心深い私は4周見直しました。
まあ、ビューや順序の問題は何回見直してもわからないものはわからなかったので、自信を失いました。
ビュー、順序、シノニムはしっかり復習します…。

最後に

勉強時間は一ヶ月ほどで、勉強する前はSQL嫌いでSELECT文や結合もままならないくらいの知識でした。
何回か心が折れそうになりましたが、合格できてよかったです。

次はDBAの勉強をして、余裕の合格を目指したいです。

コンフリクトの解決

前回のつづき...

コンフリクトとは

複数人で作業していた場合、同じ箇所を別々のブランチで、別々の変更しているのに、マージしてしまっていることがあります。
この場合、どちらの変更を取り込むか自動では判断できないのでエラーが発生します。
これをコンフリクト(衝突、競合)といいます。

  • 7ちゃんとむらちゃんの場合
    例えば7ちゃんとむらちゃんが同じ箇所に変更を加えたとします。

f:id:marikooota:20160605230525p:plain

この状態でマージするとコンフリクトが発生します。
7ちゃん側ではこのように表示されるので、手動で修正します(イメージ)。

f:id:marikooota:20160605232334p:plain

7ちゃんの変更が正しいので、むらちゃんの変更は反映せず7ちゃんの変更を残してコンフリクトを解決します。
修正してからコミットを行うことで変更を統合したコミットが作成されます。

<補足>
eclipseでコンフリクトを解決する場合、コンフリクトが起きたファイルの上で右クリックをし、Merge Toolを選びます。

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してローカルリポジトリに記録する。 f:id:marikooota:20160605140742p:plain

ブランチってなに

履歴の流れを分岐して記録しておくためのものです。
分岐したブランチは他のブランチの影響を受けないので、同じリポジトリで複数の変更を同時に進めていくことができます。 一つのプロジェクトから枝分かれさせて別の作業を行うことを「ブランチを切る」と言います。
また、分岐したブランチはマージ(合流)することで一つのブランチにまとめ直すことができます。

pushとpullとfetchとmerge

git push

ローカルリポジトリの内容をリモートリポジトリに送り込むコマンド

git fetch

リモートリポジトリの内容をローカルリポジトリに取り込むコマンド

git merge

リモートローカルのブランチを合流するコマンド

git pull

リモートリポジトリの内容をローカルリポジトリに取り込んだ後、現在のローカルのブランチに対して、それに対応するリモートのブランチをマージするコマンド

まとめるとこんな感じかな... f:id:marikooota:20160605192713p:plain

  • 7ちゃんマロくんむらちゃんの例
    7ちゃんの自己紹介ページを作るために、マロくんとむらちゃんも手伝うことになりました。

f:id:marikooota:20160605174407p:plain

三人は他のメンバーの作業の影響を受けないように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

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オブジェクトの各要素を対象として要素を絞り込む