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製のビルドツール。
ビルド・・・ソースからアプリケーションを構築するまでの一連の流れ。
ビルドツール・・・ビルドに関わる各種処理を実行。
論理削除とrollbackの話
今日のまとめ
論理削除と物理削除
物理削除はDELETE文を使って物理的にデータを削除してしまうことです。データベースから完全にレコードを削除してしまって、簡単には復元することはできません。(バックアップデータから復元しなければいけない)
対して論理削除は、間違って消してしまっても簡単に復元できます。データベースにフラグとなるフィールドを用意しておいて、削除するときに削除フラグを立てることで、表示時にそのデータを見せなくする方法です。UPDATE文を使います。
こんなときに論理削除を使います。
ユーザーからはデータがないように見せたいけど、実際のデータは消したくないとき
"削除した"データを検索したい
誤った操作をしたとき、すぐに元に戻したいとき
削除フラグ・・・「削除したものとして扱いますよ」というフラグ
rollback
トランザクションで行われた作業を元に戻すためのメソッドです。現在のトランザクションを終了して、保留中の変更をすべてデータベースにロールバックします。
7ちゃんの例
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用語辞典 ロールバック
基本情報技術者講座
楽観ロックと悲観ロック
今日のまとめ
楽観ロック
あるデータをAさんが更新処理をしている間にBさんも処理が可能です。 でも、更新処理をAさんが先に完了してしまうと、Bさんの更新処理は失敗してしまいます。
7ちゃんとマロくんの例
楽観ロックの場合、複数のユーザーが同時にデータを見ることができます。この例の場合、7ちゃんが更新中にマロくんはデータを見ることはできますが、7ちゃんが更新処理を先に完了してしまうと、マロくんは更新することはできずにエラーになってしまいます。また、更新したことは告げられないので、現在マロくんが見ているデータが最新のものであるかはわかりません。
悲観ロック
あるデータをAさんが処理していた場合、BさんはAさんの処理が終わるまで、そのデータに触ることはできません。悲観ロックはデータを読み込んだ時点から始まります。
7ちゃんとマロくんの例
悲観ロックはユーザーが読み込みや更新処理を行っているときは、他のユーザーはそれらの処理を行えません。この例の場合、7ちゃんがデータ更新中に、マロくんはデータに触ることができません。7ちゃんの更新が終わってロックが解除されたタイミングで、マロくんはデータに触ることができます。悲観ロックであれば、今見ているデータは最新であると言うことが保証されますが、次に処理したい人は、前の人の処理が終わるまで待たなければいけません。
排他制御(ロック)
あるトランザクションが実行中のときに、そのトランザクションが対象としているデータを制御(ロック)し、他のトランザクションのアクセスを禁止することで、データの整合性を確保しようとする仕組みのこと。
トランザクション・・・一連の処理
整合性・・・ずれがなく揃うこと
今日の復習!!
三項演算子の書き方
条件式 ? 式1 : 式2
条件式の値がtrueだった場合、式1が処理され、falseだった場合、式2が処理されます。
if文の代わりに使える。
isEmptyメソッド
isEmptyは文字列がnullか"空文字"かをチェックします。
StringUtils.isEmpty(null); // true StringUtils.isEmpty(""); // true StringUtils.isEmpty(" "); // false StringUtils.isEmpty("meow"); // false StringUtils.isEmpty(" meow "); // false
isBlankメソッド(こんなメソッドもある!!)
isBlankは文字列が"空文字"かをチェックします
StringUtils.isBlank(null); // true StringUtils.isBlank(""); // true StringUtils.isBlank(" "); // true StringUtils.isBlank("meow"); // false StringUtils.isBlank(" meow "); // false
isValidメソッド
戻り値boolean型
isValid();は、SQL例外がスローされた後でも接続が有効かどうかをチェックするために使用されます。
接続が有効な場合は true です。接続が有効でないか、タイムアウトするまでに接続の有効性を特定できない場合は、false です。
public boolean isValid(int timeout)
コンスタントプールの図(大石さんに教えてもらいました)