gakkie プログラミング 備忘録

tech::expert(現tech camp) 45期

form練習

form練習

その1

ユーザー名:

パスワード:

好きな果物:りんごぶどう

性別:malefemale
コメント:
見えない入力欄:

ユーザー名:<input type="text" name="username" placeholder = "username"><br><br>
パスワード:<input type="password" name="password" placeholder = "password"><br><br>
好きな果物:<input type="checkbox" name="fruits[]" checked>りんご<input type="checkbox" name="fruits[]" >ぶどう<br><br>
性別:<input type="radio" name="sex" checked>male<input type="radio" name="sex">female<br>
コメント:<textarea name="comments", placeholder = "sample"></textarea><br>
見えない入力欄:<input type="hidden" name="token"><br>
<input type="submit" value="送信">

その2

<form method="post"><label>メール(type="email"):<input type="email" name="email"></label><input type="submit" value="送信"></form>
<form method="post"><label>URL(type="url"):<input type="url" name="url"></label><input type="submit" value="送信"></form>
<form method="post"><label>検索(type="search"):<input type="search" name="search"></label><input type="submit" value="送信"></form>
<form method="post"><label>電話(type="telephone"):<input type="tel" name="tel"></label><input type="submit" value="送信"></form>
<form method="post"><label>数値(type="number"):<input type="number" name="number"></label><input type="submit" value="送信"></form>
<form method="post"><label>日付(type="date"):<input type="date" name="date"></label><input type="submit" value="送信"></form>
<form method="post"><label>日時(type="datetime"):<input type="datetime" name="datetime"></label><input type="submit" value="送信"></form>
<form method="post"><label>ローカル日時(type="datetime-local"):<input type="datetime-local" name="datetime-local"></label><input type="submit" value="送信"></form>
<form method="post"><label>月(type="month"):<input type="month" name="month"></label><input type="submit" value="送信"></form>
<form method="post"><label>週(type="week"):<input type="week" name="week"></label><input type="submit" value="送信"></form>
<form method="post"><label>時間(type="time"):<input type="time" name="time"></label><input type="submit" value="送信"></form>
<form method="post"><label>レンジ(type="range"):<input type="range" name="range"></label><input type="submit" value="送信"></form>
<form method="post"><label>色(type="color"):<input type="color" name="color"></label><input type="submit" value="送信"></form>

エラー "You must use Bundler 2 or greater with this lockfile. (Bundler::LockfileError)"

190419 18:24:22 udemyのカリキュラムを学習中 詰まったところ、解決方法をかく

  • 開発環境cloud9
  • rubyのversion2.6.0

ruby のversion 違いでエラー

$ ruby -v

$ rvm install 2.4.0
$ rvm --default use 2.4.0

これで再起動した時もversion が変化しない。

irb をしようとした時に

エラー You must use Bundler 2 or greater with this lockfile. (Bundler::LockfileError)

どうやら bundlerのversionエラーのようだ

解決方法 gemfile.lock内の

BUNDLE WITH
2.0.1→1.17.3

に変えたらエラーが解決した。

追記:191003 23:27:22

$ bundle exec をつけたところ無事解決した。

stackoverflow.com

SQL 4つの構文

f:id:shuzou555:20190923170359j:plain

今回のテーマ:SQLで主に扱う4つの構文について

  • 書いた理由:SELECT, UPDATE, INSERT, DELETE など学習していく中でそれぞれの書き方を整理するため。
  • SQLで主に扱う4構文についての備忘録

[目次]

[本題]

取得

SELECT カラムA, カラムB
FROM テーブル名;

挿入

INSERT INTO テーブル名 (カラムA, カラムB...)
VALUES (値1, 値2...);

更新

UPDATE テーブル名
SET カラムA = 値1, カラムB = 値2
WHERE 条件;

削除

DELETE FROM テーブル名
WHERE 条件;

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> 犬です
#ライオンです