正規表現、オブジェクト、変数、定数

ruby で文字列を処理するときには正規表現(Regular Expression)というものが使われる。

正規表現を使うと

  • 文字列とパターンの一致(マッチング)
  • パターンを使った文字列の切り出し

を簡単に行える。

 

正規表現と文字列のマッチングを行うには

/パターン/ = ~マッチングしたい文字列

 

f:id:snsn19910803:20151111134557p:plain

 

マッチングが成功したときはマッチした部分の位置を返します。文字の位置は配列のインデックスと同様に0から数えます。つまり、先頭の文字の位置は0と表される。

失敗したときはnilが返される。

 ーーーーーーーーーーーーーーーーーーーーーー

 

別のファイルを取り込む

 

ライブラリを読むこむためにはrequireメソッドを使用

require 使いたいファイル名

require "hello.rb"

 

と記述(.rbは省略可能)

 ーーーーーーーーーーーーーーーーーーーーーーー

オブジェクト(インスタンス)

rubyのデータを表現する基本的な単位のこと

 

数値オブジェクト:  1, -10, 3.14.15

文字列オブ: ”こんにちは”、"hello"

配列、ハッシュオブジェクト:複数のデータをまとめるためのオブジェクト

 

あやふやだったので概念をしっかり定着させなくては!

第4章 ruby 文法

 以前の記事にも4章の文法について記しましたが、今回は未だにあやふやなとこをまとめます。

  

まずメソッド定義について

f:id:snsn19910803:20151109152147p:plain

rubyの関数には暗黙の戻り値がある」、関数内で最後に評価された式の値が自動的に返されることの意味。(関数で戻り値を明示的に指定しなかった場合)

 

使えそうなメソッド

f:id:snsn19910803:20151109155700p:plain

 

splitの反対  .join メソッド

f:id:snsn19910803:20151109162307p:plain

 これも便利そう!

f:id:snsn19910803:20151109160326p:plain

 

ブロック => rubyの極めて強力な機能

do ~ endで終わるもの

f:id:snsn19910803:20151109163317p:plain

ブロックは奥が深いらしく、十分に理解するには経験が必要。mapメソッド(与えられたブロックを配列や範囲オブジェクトの各要素に対して適用し結果を返してくれるもの)を用いた例文

f:id:snsn19910803:20151109163821p:plain

 

f:id:snsn19910803:20151109165047p:plain

  

シンボル =>「余分なものをそぎ落とした軽量な文字列」

"name" == :name  #ここ超重要!!

user["name"] == user[:name]

f:id:snsn19910803:20151109171630p:plain

 

シンボルやっとモヤモヤがとけましたあああああ!

 

コード読みやすくなること間違いなし!!

この勢いでどんどん突き進む!

 

f:id:snsn19910803:20151109185115p:plain

以上!

8割は理解したはず!!

bootstrap  使い方 レシピ集 まとめ!かなり長いです。。。

 最近はクソアプリが形になってきたのですが今の時代、人に使ってもらうためにはデザインの方がむしろ重要なのではと思い、とりあえずbootstrapを学んでいきます。

getbootstrap.com

 

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

↑これらをapplication.html.erbのhead内にコピーする


<%= yield %>を <div class ="container">で囲む!
container 内に<%= render 'layouts/header' %>記述

例)_header.html.erbにnavbarを埋め込む方法

<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>
</div>
</div>
</nav>

railsではこんな感じで使う!=>いろんなパターンがあるらしいので調べてみる

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
各単語の意味

<div class="container">
<div class="row">
<div class="col-sm-3" style = "background:gray;">side1</div>
<div class="col-sm-6 col-xs-6" style = "background:green;">main</div>
<div class="col-sm-3 col-xs-6" style ="background:gray;">side2</div>
</div>
</div>
gridといわれるもので
デバイスに対応したレスポンシブな表示が可能
12分割で表す
スペースで複数指定できる
真ん中のsmやxsっていうのは各デバイスの基準のようなもの EX))スマホでレスポンシブ表示したいならxsを用いるなど。。=>詳細は

CSS · Bootstrap  grid optionsを参照

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

テーブルを簡単に作れる編

 

 f:id:snsn19910803:20151020130935p:plain

<div class = "container" style ="padding: 20px 0">

<table class = "table table-striped table-bordered table-hover table-condensed">
<caption>table title and/or explanatory text</caption>
<thead>
<tr>
<th>id</th><th>score</th>
</tr>
</thead>
<tbody>
<tr class = "warning">
<td >@gorira</td><td>100</td>
</tr>

<tr>
<td>@rakko</td><td>60</td>
</tr>
<tr>
<td>@koara</td><td>70</td>
</tr>

</tbody>
</table>
</div>

赤文字のとこに注目

classに使いたいものを連ねて記述するだけ!!

ちょーーーーべんり!!!!!

今までの苦労はなんだ!!

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

form関連

<div class="container" style ="padding:20px 0">

<form class ="form-horizonal" style = "margin-bottom:15px;">
<div class="form-group" >
<label class ="sr-only-control-label" for = "email">email</label>
<input type ="text" id = "email" class ="form-control" placeholder ="email">
<span class ="help-block">error!!</span>
</div>
<div class="form-group">
<input type ="submit" value ="submit" class ="btn btn-primary">
</div>
</form>
</div>

-----------------------------------------------------------------------------------------------

 

glyphiconアイコンの使いかた

f:id:snsn19910803:20151020125716p:plain

<div class="container" style ="padding:20px 0">
<p><i class = "glyphicon glyphicon-book"></i>book</p>
<button class="btn btn-primary">push me!</button>
<button class="btn btn-success"><i class = "glyphicon glyphicon-book"></i>bookpush me!</button>
<button class="btn btn-danger">push me!</button>
<button class="btn btn-warning">push me!</button>


</div>

-----------------------------------------------------------------------------------------------

 

ドロップダウンメニューの使い方

f:id:snsn19910803:20151020130147p:plain


<div class="container" style ="padding:20px 0">
<div class ="btn-group">
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
action <span class ="caret"></span> <--右の逆三角形

</button>

<ul class ="dropdown-menu">
<li><a href="">action</a></li>
<li><a href="">action</a></li>
<li class ="divider"></li>  <---ドロップダウンメニューないで横線をつける
<li><a href="">action</a></li>

</ul>
</div>
</div>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
ナビゲーション関連
最上部 breadcrumb
真ん中 pagination
最下部 pager

f:id:snsn19910803:20151020133212p:plain

 

最上部
<div class ="container" style = "padding:20px 0">
<ul class = "breadcrumb">
<li><a href="">home</a></li>
<li><a href="">users</a></li>
<li class = "active">@nanami</li>
</ul>

真ん中
<ul class ="pagination">
<li class ="disabled"><a href ="">&laquo;</a></li>
<li class ="active"><a href ="">1</a></li>
<li><a href ="">2</a></li>
<li><a href ="">3</a></li>
<li><a href ="">&raquo;</a></li>
</ul>

最下

 

<ul class ="pager">
<li class ="previous"><a href ="">前へ</a></li>
<li class="next"><a href ="">次へ</a></li>
</ul>

</div>

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
navbar



f:id:snsn19910803:20151020142255p:plain

横に縮小させていくと。。。

f:id:snsn19910803:20151020142302p:plain

スマホ対応になる!べんり!


<nav class ="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".target">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class ="navbar-brand" href ="">sample</a>
</div>
<div class ="collapse navbar-collapse target">
<ul class =" nav navbar-nav">
<li class ="active"><a href ="">link1</a></li>
<li><a href ="">link2</a></li>
</ul>
<ul class =" nav navbar-nav navbar-right">
<li><a href ="">link3</a></li>
</ul>
</div>
</nav>

navbar-fixed-topでheaderをスクロールしていっても上部に固定できる

activeは今いるとこを示してくれる

navbar-brandはかっこいいスタイルになる

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

alert系各種
 

f:id:snsn19910803:20151020152725p:plain

 

 

<div class ="container" style = "padding:20px 0">
<p>product<span class ="label label-primary" >new!</span></p>
<p>inbox<span class ="badge">5</span></p>
<p>inbox<span class ="badge"></span></p>
<div class="alert alert-info">
<button class ="close" data-dismiss="alert">&times;</button> お知らせ</div>

<div class="panel panel-primary ">
<div class="panel-heading">
お知らせ


</div>
<div class="panel-body">
至急お急ぎ

</div>
</div>
</div>

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー



続きましてprogressbar

f:id:snsn19910803:20151020153639p:plain

<div class ="container" style = "padding:20px 0">
<div class ="progress">
<div class ="progress-bar progress-bar-primary" style ="width:60%"></div>
</div>


<div class ="progress progress-striped active">
<div class ="progress-bar progress-bar-info" style ="width:40%"></div>
<div class ="progress-bar progress-bar-primary" style ="width:30%"></div>
<div class ="progress-bar progress-bar-warning" style ="width:20%"></div>
</div>
</div>

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


modal=>これは頻繁に使いそう!!

f:id:snsn19910803:20151020154615p:plain

押すと。。。

f:id:snsn19910803:20151020154622p:plain

このように表示される!


<div class ="container" style = "padding:20px 0">
<a data-toggle="modal" href ="#mymodal" class ="btn btn-primary">show me!</a>

<div class="modal fade" id ="mymodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class ="close" data-dismiss ="modal">&times;</button>
<h4 class ="modal-title">my-modal</h4>
</div>
<div class="modal-body"> こんにちは!
</div>
<div class="modal-footer">
<button class="btn btn-primary">ok!!</button>
</div>
</div>
</div>
</div>
</div>

なかなかclassが多かったりするけど使えそう!
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


tabの切り替え

f:id:snsn19910803:20151020155809p:plain

<div class ="container" style = "padding:20px 0">

<ul class ="nav nav-tabs" style ="margin-bottom:15px;">
<li class ="active"><a href ="#home" data-toggle ="tab">home</a></li>
<li><a href ="#about" data-toggle ="tab">about</a></li>
</ul>

<div class="tab-content">
<div class="tab-pane active" id ="home">homeだよおお</div>
<div class="tab-pane" id ="about">aboutだよおお</div>
</div>
</div>

 

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

tooltipとpopover機能
今回はjsも触ります!

f:id:snsn19910803:20151020171621p:plain

 <div class ="container" style = "padding:20px 0">
<p><a href ="#" data-toggle ="tooltip" title ="説明">this</a>and<a href ="#" data-toggle="popover" title ="説明" data-content ="さらに説明" >that</a>.</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function() {
$("[data-toggle=tooltip]").tooltip({placement: 'bottom'});
$("[data-toggle=popover]").popover();
});
</script>


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー



ラスト!!!画像切り替え!

f:id:snsn19910803:20151020173102p:plain

f:id:snsn19910803:20151020173109p:plain

よくありますよねスライドぽくなります。

かなり長いのですが、bootstrap内のcarouselにテンプレがあるのでそちらも参照すると良いです。

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" style="width:500px">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>

<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/151020-0001.png" alt="photo1">
<div class="carousel-caption">
写真1
</div>
</div>
<div class="item">
<img src="img/151020-0003.png" alt="photo2">
<div class="carousel-caption">
写真2
</div>
</div>
<div class="item">
<img src="img/151020-0001.png" alt="photo3">
<div class="carousel-caption">
写真3
</div>
</div> <div class="item">
<img src="img/151020-0013.png" alt="photo4">
<div class="carousel-caption">
写真4
</div>
</div>
</div>

<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>


これも簡単にできます!

以上です!!!!

勉強会メモ 

今回もまとまりのない自分のための備忘録ですw

 

rails _4.2.3_ new sample_app (バージョン指定)

       ↓

モデル作成(単数形!!!!!!!!!!!!!!!!!!

  ↓

コントローラー(複数

 ---------------------------------------------------------------------------------------------------  

 command + / で一瞬コメントアウト
<%# コメントの仕方,周りに見られないパターン %>

rake notes でコマンド上でメモが一覧表示される。

 --------------------------------------------------------------------------------------------------- 

ctrl + a コマンド上で先頭の文字にカーソルが当たる

ctrl + e   コマンド上で最後の文字にカーソルが当たる

 ---------------------------------------------------------------------------------------------------  

Active record についてまとめ

Active Recordとは、MVCで言うところのM、つまりモデルに相当するものであり、ビジネスデータとビジネスロジックを表すシステムの階層です。Active Recordは、データベースに恒久的に保存される必要のあるビジネスオブジェクトの作成と利用を円滑に行なえるようにします。

----------------------------------------------------------------------------------------------------

出力方法まとめ 手打ちなので入力ミスあるかもです。。。

```rb

post.all
Post.first # 一番目

Post.last #最後

Post.last.title # 最後のPostのタイトル
Post.find(3) #idが3のデータ
Post.find_by_title("title2")#ダイナミックファインダー=>フィールドで探せる。この例だとtitle("title2")


Post.find_by_title_and_id("title2",2) #titleとidが一致しない場合はnilが返ってくる!

 

Post.order("RANDOM()").limit(3) #ランダムに3つ取得

```

----------------------------------------------------------------------------------------------------

 

where句

p Post.where(:title => "title1", :id => 1)  # ピンポイントで指定

p Post.where("title = ? and id = ?", "title1" , 1)  #プレイスホルダー
p Post.where("id > ?". 2)  #idが2より大きいもの
p Post.where("body like ?", "hello%" )  #部分文字列で指定
p Post.where(:id => 1..3)  #範囲指定

p Post.where(:id => [1.3])  #飛びとびで指定

p Post.order("id desc").limit(3)  #新しいものを3件表示

----------------------------------------------------------------------------------------------------

⚠️要チェックscope!!

 

class Post < ActiveRecord::Base

scope :top3, order("created_at").limit(3)#検索条件を定義できるscopeメソッド
end
p Post.top3 =>top3というメソッドを使えるようになる!!

----------------------------------------------------------------------------------------------------

 

loggerが便利みたいです=>ターミナル上でどのような検索指定をしてるか見やすくなる!

使用例赤字が適用箇所

require 'active_record'
require 'logger'  #便利ツール
ActiveRecord::Base.establish_connection("adapter"=>"sqlite3","database"=> "./blog.db")
ActiveRecord::Base.logger = Logger.new(STDOUT)  #便利ツール

class Post < ActiveRecord::Base
scope :top3, order("created_at").limit(3)   #検索条件を定義できるscopeメソッド
end
p Post.top3

 

-----------------------------------------------------------------------------------------------------

 

Post.where(:title => "title5").first_or_create   #無かったら新規で作ってくれる

又は

Post.where(:title => "title6").first_or_create do |p|
p.body = "hello6"
end


p Post.all

----------------------------------------------------------------------------------------------------

 更新方法

post = Post.find(1)

post.update_attributes(:title => "ggg", :body => "ok?")
p Post.first

 

複数更新

Post.where(:id => 1..3).update_all(:title => "hogehoge",:body => "okok!")

p Post.all

----------------------------------------------------------------------------------------------------

 

削除

delete 単体recordを消す 処理がdestroyより早い

Post.where(:id => 1..2).delete_all

destroy  関連するオブジェクト、関連データまで消す

Post.find(3).destroy
p Post.all

----------------------------------------------------------------------------------------------------

 

バリデーション

 

validates :title, :presence => true  #titleが空欄だとエラー

validates :body, :length => {:minimum => 5} #5文字以下だとエラー

 

----------------------------------------------------------------------------------------------------

⚠️アソシエーション  関連付け 

class Post < ActiveRecord::Base

has_many :comments    #postは複数のcommentsを持っている

end

 

class Comment < ActiveRecord::Base

belongs_to :post    #commentsは一つのpostに紐づく

end

 

post = Post.find(1)

post.comments.each do |comment|  ##紐付いたおかげでこのようなシンプルな記述が可能!

p coment.body

end

 

以上です。しっかり DB勉強せねば。。。