rails フロントエンド開発 メモ


## railsの基本


### slim上の表記

* `=`で書かれた行は、rubyの出力結果を表示します
* `-`で書かれた行は、rubyのコードを実行しますが、内容はファイルに主力されません
* each do |xxxx|
    * ループ処理、xxxxがループで出力される内容


## ディレクトリ

### ルートディレクトリ


* app
    * htmlファイルや、モデル層などの主要なプログラムが置かれる箇所
* misc
    * rails以外の設定ファイルなど
* public
    * 外からもアクセスできる公開ディレクトリ

```
.
├── Gemfile
├── Gemfile.lock
├── README.md
├── Rakefile
├── app
├── bin
├── config
├── config.ru
├── db
├── lib
├── log
├── misc
├── public
├── spec
├── tmp
├── vendor
└── wordpress

```

### app

* admin
    * 管理画面系
* assets
    * stylesheetやjavascript、画像など
* views
    * htmlファイルが置かれる

```
app
├── admin
├── assets
├── controllers
├── helpers
├── jobs
├── mailers
├── models
├── uploaders
└── views
```


### app/views

* layouts
    * headerやfooterなどのテンプレート的なhtmlが置かれる
* www
    * テンプレートに埋め込む、各ページの内容のhtml

```
views/
├── admin
├── api
├── devise
├── layouts
└── www
```

### app/views/layout


* application.html.slim
    * 大元になるhtmlファイルのテンプレート、scriptの呼び出しなどもここにまとめる

```
├── application.html.slim
├── application_smart_phone.html.slim
├── pc
│   ├── _footer.html.slim
│   ├── _header.html.slim
│   └── _sidebar.html.slim
└── smart_phone
    ├── _footer.html.slim
    ├── _header.html.slim
    └── _sidebar.html.slim
```

### app/views/www

* home
    * トップページ関連
* article
    * 記事詳細関連

```
views/www/
├── article
│   ├── show.html.slim
│   └── show_smart_phone.html.slim
└── home
    ├── index.html.slim
    └── index_smart_phone.html.slim
```


### pcとスマートフォンのファイル名について

pc用のファイル名に、`_smart_phone`というプレフィックスをつけてください。
同じディレクトリにファイルを格納してください

```
views/www/home/
├── index.html.slim
└── index_smart_phone.html.slim
```

## ファイルを分割する方法

下記のように、application.html内でヘッダーを呼び出したりと、ファイルを分割したい場合

```
application.html
_header.html.slim
```

### 呼び出したいファイル

ファイル名の前に`_（アンダーバー）`をつけてください
中身はそのまま書いて大丈夫です

下記は、`/www/home/`以下に作成した場合です

```
_header.html.slim
```

### 呼び出し側の動作

呼び出す際は、`_`は不要です
拡張子もいりません

```
= render('www/home/header') 
```

#### 変数を使用する場合

変数を使用するテンプレートを作成する場合は、渡邊に投げてください

#### 他と共通で使用するテンプレートの場合

例えば、article以外のページと共通で使用する分割するhtmlがあった場合（サイドバーなど）は、下記のディレクトリにいれてください

```
app/views/www/shared
```


# railsの問題になりやすい機能について


## sproketsについて

sproketsは主に以下の動作をする

* jsやcssを一つのファイルにまとめる
* jsやcssのminify化
* js, css, 画像のファイル名の後ろにdigestをつける


`app/assets/javascript/application.js`には以下のような指定がしてある
ここにファイルを追加していくと、sproketsの対象になり、ファイルが読み込まれる

```
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require www/pc/home
```

### digestについて

sproketsを利用するとファイル名が以下のようになる
`-30d67bb829a514ffd24d9dcdbabe7864`はsproketsによってつけられたdigest

```
image-30d67bb829a514ffd24d9dcdbabe7864.png
```

#### digestの必要性

現在は各ブラウザでキャッシュを持つのが大体の仕組みになっている
そのため、デプロイしてassets内のファイルを更新した際に、digestをつけないと、各ブラウザでファイルをキャッシュしているため、更新されない可能性がある

digestが付与されていると、デプロイのたびに毎回ファイル名が変更されるため、ブラウザでキャッシュされていても、新規に更新されるためユーザによって更新されない等の問題が発生しない

#### 注意点

digetstがつくというとは、ファイル名が変わるということである
image.pngで保存していて、`<img src="image.png">`ではdigestがつくので呼び出せないのである

そのため、下記のようなメソッドを利用する


##### html内の画像呼び出し

```
<img src="">
↓
image_tag( "画像のurl", alt: "alt属性", class: "クラス名", id: "id名")
or
img src="<%= asset_path "hoge.png" %>"
```

##### css内の画像呼び出し

またcss内で画像を呼び出す際などは下記のように行う

```html
<div style="background-image:url(#{asset_path("hoge.png")})" />
```

```css
.hoge {
  background-image: image-url("hoge.png");
}
```


##### 別の回避策

`public/`ディレクトリ以下は外部からもアクセスするようのディレクトリである
そのため、public以下に画像を置いて直接参照する方法もある
この場合は、digestが着かないので、そのままのurlで済む
ただ、画像が圧縮されなかったり、digestがつかないので、多少railsの恩恵を受けられないのが難点



## turbolinkについて

わかりやすいサイト
http://kray.jp/blog/must-know-about-turbolinks/

### turbolinksとは

ページ遷移をすべてajaxに置き換えて、jsやcssファイルの読み込みを省略することで高速化をしている機能

* aタグへのクリックだった場合にtrubolinksで遷移する
* ページ遷移した際に、jsやcssファイルが変わっていないとヘッダー部分の再読み込みはしない
* タイトルとbodyだけ、読み込みを差し替える


### 機能しないパターン

* リクエストがGETメソッド以外
* aタグのデフォルト動作が、別のイベントハンドラによってブロックされている場合
* target属性が付与されている


### 注意点

* readyイベントが発火しない場合がある
* windowオブジェクト、documentオブジェクト
    * 通常はwindowオブジェクトや、documentオブジェクトはページ遷移すると更新されるが、turbolinksを使用すると更新されない


#### documntオブジェクトのイベント登録について

先ほども書いたように、documentオブジェクトはturbolinksを使用していると更新がされない
そのため、そのままオブジェクトを格納した状態で次ページへ遷移する
なので下記のような問題が発生する場合がある

> documentオブジェクトは前のページから引き継がれるため、同じdocumentオブジェクトに２つ目のイベントハンドラが登録されてしまいます。


```
$(function(){

$(document).on('click', '.mySelector', myHandler);

});
```


## mysqlのデータが見たいとき

sequel proというのがお勧めです
http://www.sequelpro.com/