gakkie プログラミング 備忘録

tech::expert(現tech camp) 45期

jquery イベントメソッド:マウス編

f:id:shuzou555:20190923152207p:plain

今回のテーマ:jQueryイベントメソッドmouse〜を使ってみよう

  • マウスをクリックした時(click)
  • マウスが要素にかかった時(mouseover)
  • マウスがそこから離れた時(mouseout)
  • そしてマウスが動いた時(mousemove)
  • マウスボタンがはなされた時(mouseup)
  • マウスボタンが押下された時(mousedown)
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>
</head>
<body>
    <p>jQueryの練習</p>
    <div id="box" style="width:100px;height:100px;background:purple;"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            // click
            // mouseover, mouseout, mousemove
            $('#box').fadeOut(5000, function() {
                alert("hello");
            });
            $('#box')
                .mouseover(function() {
                    $(this).css('background', 'blue');
                })            
                .mouseout(function() {
                    $(this).css('background', 'yellow');
                })
                .mousemove(function(e) {
                    $(this).text(e.pageX);
                }); 
                /* .mouseup(function(){
                    $(this).css('background-color', 'Red');
                })*/
                //マウスボタンがはなされた時
                /* .mousedown(function(){
                    $(this).css('background-color', 'Blue');
               }) */
                //マウスボタンが押下された時
        });
    </script>
</body>
</html>

公式ドキュメント

api.jquery.com

jquery コールバック関数練習

f:id:shuzou555:20190923144616p:plain

今回のテーマ:コールバック関数

  • コールバックの練習
  • Q.そもそもコールバックとは?
  • A.何らかの処理が終わった後に何らかの処理をすること。

具体的な方法

まずはコールバック関数無しで。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>
</head>
<body>
    <p>jQueryの練習</p>
    <div id="box" style="width:100px;height:100px;background:blue;"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            $('#box').fadeOut(800);
        });
    </script>
</body>
</html>

単純に四角形が消えるだけ。
この後にアラートを表示したい。そこでコールバック関数が使える。

さあ、やってみよう!!

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>jQueryの練習</title>
</head>
<body>
    <p>jQueryの練習</p>
    <div id="box" style="width:100px;height:100px;background:blue;"></div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
        $(function() {
            $('#box').fadeOut(800, function() {
                alert("gone!");
            });
        });
    </script>
</body>
</html>
  • 第2引数にfunctionをとる。
  • その中で「alert("gone!");」とすると、
    この要素が fadeOut で消えたときこの処理を実行してくれる。

save時に実行するバリデーションを切り替えたい!

saveメソッドを呼び出してモデルのデータを保存するときに、
状況によって実行するバリデーションを切り替えたい場合がある。
そんな時は、validatesメソッドのonオプションが使える。

参考ページ

状況によってsave時に実行するバリデーションを切り替える - Qiita

メソッドのオーバーライドについて(Rubyの場合)

Q.なぜこの記事を書こうと思ったのか?

teacher.nagano-nct.ac.jp

A.オブジェクト指向を調べていた時、オーバーライドについて興味が湧いたから。

【結論】オーバーライドとは?

A. スーパクラスから継承されたサブクラスにおいて、メンバ関数を独自の機能で上書きすること

自分はスーパークラスのメソッドを「再定義」することと認識した。

まとめ

  • メソッドをオーバーライドする方法と、
    スーパークラスのメソッドを呼び出す方法を知れた。
  • superに()をつけないと引数がそのままスーパークラスのメソッドにわたされること
  • superに()を付けるとスーパークラスのメソッドが引数なしで呼び出されることがわかった。

www.buildinsider.net

実際に簡単なコードでメソッドをオーバーライド(メソッドの再定義)する。

1.Dogクラスを継承したLionクラスを作る

class Dog
  def wanwan
    return "わんわん"
  end
end

class Lion < Dog

end

animal = Lion.new
puts animal.wanwan

#クラスの継承を利用したプログラムを実行する
#出力結果
#irb(main):012:0> わんわん

2.Lionクラスでwanwanメソッドをオーバーライド(メソッドの再定義)する

class Dog
  def wanwan
    return "わんわん"
  end
end

class Lion < Dog
  def wanwan
    return "バウバウ"
  end
end

animal = Lion.new
puts animal.wanwan

#オーバーライドしたメソッドを利用する
#出力結果
#irb(main):028:0> バウバウ

3. スーパークラスのメソッドを呼び出す

class Dog
  def wanwan
    return "わんわん"
  end
end

class Lion < Dog
  def wanwan(test)
    if test
      return "バウバウ"
    else
      return super()
    end 
  end
end

animal = Lion.new
puts animal.wanwan(true)
puts animal.wanwan(false)

#スーパークラスのメソッドを呼び出す
#出力結果
#irb(main):018:0> バウバウ
#irb(main):019:0> わんわん


#試しにsuperの後の()を削除して実行する。
#その場合、サブクラスのwanwanメソッドに指定した引数が
#そのままスーパークラスのwanwanソッドに渡される。
#しかし、スーパークラスのwanwanメソッドは引数のないメソッドなのでエラーとなる

irb(main):018:0> バウバウ
=> nil
irb(main):019:0> Traceback (most recent call last):
        4: from /Users/USERNAME/.rbenv/versions/2.5.1/bin/irb:11:in `<main>'
        3: from (irb):19
        2: from (irb):12:in `wanwan'
        1: from (irb):2:in `wanwan'
ArgumentError (wrong number of arguments (given 1, expected 0))

4.オーバーライドしたメソッドで機能を追加する

class Dog
  def iam
    puts "犬です"
  end
end

class Lion < Dog
  def iam
    super
    puts "ライオンです"
  end
end

animal = Lion.new
animal.iam

#オーバーライドしたメソッドで機能を追加する例を実行する
#出力結果
#irb(main):037:0> 犬です
#ライオンです

キャッシュとクッキー、セッションについて

f:id:shuzou555:20190916115404p:plain

f:id:shuzou555:20190916120929p:plain

結論

  • キャッシュは動的ページを実現するためのものでは無く、
    画面表示の高速化を目的に画像やHTMLデータをブラウザに保持する。

  • セッションは「ログインしてからログアウトまで」のような一連の操作を言い、
    セッションデータはサーバー側に保持される。

  • クッキーはクライアントのパソコン(WEBブラウザ)でデータを管理しており、
    有効期限が切れるまで保持している。

[目次]

前提知識

HTTP通信について

HTTP通信とは?

通常WEBブラウザでWEBサイトを閲覧する場合にはHTTPという通信手段を用いて
サーバーとクライアント間を通信する。

そのHTTP通信は、HTML文書の通信を目的に作られており、
1つのURLに対し同じページを返すことしか出ません。(これを静的と言います。)

しかし、ショッピングサイトのカートや、ログインしたら見れるようなサイトなどは、
ユーザーの状態によって表示する内容が変化します。(これを動的と言う。)

こういったHTTPの弱点とも言える部分を解決したものがクッキーやセッションである。
クッキーやセッションは状態を持ちまわることで、何度画面遷移をしても、数日後にサイトを再度開いても、現在の状態の操作が行えるようになる。

ではクッキーとセッションは何が違うのか?また、キャッシュとは何なのでしょうか?

キャッシュとは?

  • 閲覧したサイトのデータの一時保存のこと
  • 一度見たwebサイトのデータをパソコンの中に一時的に保存しておく機能のことを言う
  • 再度アクセスした時にその保存したデータを表示させることで、より早くスムーズに処理がされる
  • 画像やHTMLのデータなどをクライアント(インターネットを閲覧する人)側のブラウザに保存することにより表示速度を向上させるもの
  • 同じページを何度も開いた場合に、同じ画像やHTML,CSS,javascriptなどのデータを何度もダウンロードする必要は無いため、ブラウザに自動的に保存されるというものです。
  • 使用者はクライアント

セッションとは?

  • セッションは一連の操作のこと。Cookieを使用してセッションIDの管理が行われている。
  • セッションのデータは「セッションID=ログイン情報」としての役割がある。
  • セッションはログイン情報を保持する役割がある。

クッキーとは?

f:id:shuzou555:20190916120459p:plain

  • クッキーとは、Webサイトを表示したブラウザのデータを保存しておく仕組みのことです。
  • ユーザーの購買履歴や、利用している地域などがわかる会員証のようなものとよく例えられます。
  • 2回目以降同じサイトに訪れる際は、初めてレスポンスを受けとる際に付与されたクッキー(会員証)を元にサーバーがブラウザを特定します。
    それによりユーザーに合ったコンテンツを効率的に表示できる機能です。

主な用途

  • ECサイトなどでの購入履歴やカートのデータの保存
  • ログイン時のIDやパスワードの保存
  • ユーザーのアクセス履歴にマッチした広告などを表示

クッキーのメリット

ユーザーサイド

企業サイド

  • ユーザーに合わせた情報を提供できる
  • サイト内でのユーザーの行動を管理できる
  • マーケティングに活用できる

クッキーのデメリット

ユーザーサイド

  • 情報が漏洩する可能性がある
  • データが蓄積されすぎるとブラウザの動作が遅くなることがある

企業サイド

  • ラッキングクッキーなどはユーザーに不快な印象を与える場合がある

mysqldumpの設定で詰まった話

dumpファイルの作り方

学ぶ目的

  • 毎回データを作るのは面倒。再利用したい。
  • 作業改善のため
$ mysqldump -h localhost [DB名] [テーブル名] -u root -p > simple.dump 

$ mysql -h localhost [DB名] -u root -p < simple.dump

とすべきコード、2つ目を

$ mysqldump -h localhost [DB名] -u root -p < simple.dump

dumpを間違えてつけてしまった。 割とよくあるミスらしい。

    今日の学び
  • dumpファイルの作り方がわかった。

(&:odd?)について

 > a, = (1..5).partition(&:odd?)
 => [[1, 3, 5], [2, 4]] 
 > a = (1..5).partition(&:odd?)
 => [[1, 3, 5], [2, 4]] 
 > a, b = (1..5).partition(&:odd?)                                                                            
 => [[1, 3, 5], [2, 4]] 
 > b
 => [2, 4] 
 > a, = (1..5).partition(&:odd?)

↑なぜaの後ろに「,」が入っていたのか不思議だったが下記のコードで納得

 > a, b = (1..5).partition(&:odd?)                                                                            
 => [[1, 3, 5], [2, 4]] 
 > b
 => [2, 4] 
a, = (1..5).partition { |num|  num.odd? }