Rails – 色々やってみる

プロジェクト作っていきなりdb:migrateしたら、developement.sqlite3と、schema.rbが作成された。中身はからなはず。DataGrip使って見てみる。空だ。
とりあえず1つscaffoldする。

大量のものを作成している。
この状態で、rails sをすると下記エラーがでる。

Migrations are pending. To resolve this issue, run: bin/rails db:migrate RAILS_ENV=development

マイグレーションをDBに反映してないことが分かるようです。
マイグレーションファイルを見てみます。

ではSQLiteを見てみます。DataGrip便利だな。usersテーブルができていて、created_at、updated_atもあります。idというプライマリーキーもあります。
scaffoldするとjsonにも対応している。

とりあえずViewにBootstrapを適用してみる。その前に、cssとかの読み込み状態を確認してみる。

なんか激しい感じだ。cakephpと違ってAssetまで融合させようとしている感じがひしひしと伝わってくる。
app/assets/javascrptsとapp/assets/styleshetsの中にあるものが全部読み込まれている。

この設定を変えると変わるはず。Jsはjquery,jquery-uiとかも勝手にインストールされている。外す方法確認しないと。

下記のようにやると、assetが結合・圧縮されるらしい。処理内容は設定によるだろうけど。

app/assets/javascripts/application.jsと、app/assets/stylesheets/application.cssには、下記のような記述がありここを変更すると読み込む内容を変更できるらしい。

assetが便利だけど複雑だな。rails sをやり直さないとエラーのままになることあるな。

をやったら、確かにpublic/assetsに圧縮されたものが格納された。
js/css共に1つのファイルが出力された。あとはgzファイルもある。このコンパイルをしておけば、本場環境ではこれらを読み込むようになるはず。

Railsのコード短いなー。scaffoldだとバリデーションないので、モデルのバリデーション入れてみる。

入力画面で空状態で登録押すとエラーでる。cakephpみたいにformにまでvalidationが反映されるわけではないのかな。
英語のエラーだから日本語にしてみる。Djangoみたいに、設定ファイルで日本語ってやると日本語になるわけではないらしい。
やり方ここに書いてあった。

ja.ymlをconfig/locales/に追加
config/application.rbにconfig.i18n.default_locale = :jaを追加
サーバーを再起動
さらにモデルの属性名(nameなど)を日本語化する場合は、ja.ymlに次のように記載して下さい。

# config/locales/ja.yml
ja:
attributes:
name: 名前

3 error prohibited this user from being saved:というバリデーションエラーのメッセージは英語のままだな。

new.html.erbがすごい。3行しかない。でもrenderだからパーシャルを読み込んでるわけで、全自動でフォームが作られてるわけではない。

パーシャルは、下記のように書く。これは_form.html.erbを読み込む。アンダーバーがパーシャルのしるしらしい。

パーシャルの内容は下記。

エラーメッセージがベタ打ちだから英語のままだったんだな。

エラーメッセージの表示方法はアプリケーションごとに異なるため、Railsではこれらのメッセージを直接生成するビューヘルパーは含まれていません。 しかし、Railsでは一般的なバリデーションメソッドが多数提供されているので、カスタムのメソッドを作成するのは比較的簡単です。また、scaffoldを使用して生成を行なうと、そのモデルのエラーメッセージをすべて表示するERBがRailsによって一部の_form.html.erbファイルに追加されます

bootstrapに対応して、エラーを日本語にしてみた。

エラー発生フィールドはエラークラスのdivで囲われるから、それにスタイルつければ、エラーここだよ、というのが示せる。

次は、モデル(アクティブレコードと呼ぶらしい)のクエリ系のやつ覚えて、セッション、キャッシュとか確認して、認証のやり方確認して、セキュリティに関して確認したら大体何でもできそう。

Rails – cannot load such file — bcrypt_extというエラー

cannot load such file — bcrypt_extというエラーがでた。

環境

Windows10
$ ruby -v
ruby 2.3.3p222 (2016-11-21 revision 56859) [x64-mingw32]
$ rails -v
Rails 5.0.2

gemfileに下記を追加したらいいとここに書いてあった。

だめだった。

ここに書いてあった。

path to gems rootは、下記で調べられる。

makeをwindows10にインストールした

make: *** bcrypt_ext.o' に必要なターゲット /D/Ruby23-x64/include/ruby-2.3.0/ruby.h’ を make するルールがありません. 中止.

なんだこれは。。

ここに下記が書いてあった。
I solve it with uninstall all bcrypt gem versions with gem uninstall bcrypt and select option 3 (if exist) and uninstall all bcrypt-ruby gem versions with gem uninstall bcrypt-ruby and select option 3 (if exist) then install bcrypt using gem install bcrypt –platform=ruby then add this line gem ‘bcrypt’, platforms: :ruby to Gemfile, that is it :D.

ダメだ。なんだこれは。。。

やっぱmakeを成功させてみる。

ここに書いてあった。

make: *** ‘ossl_pkey_dh.o’ に必要なターゲット ‘/include/ruby.h’ を make するルールがありません. 中止.

Makefileにtop_srcdirの定義が記述されていない。
top_dir行の下に追加する。
top_srcdir = /home/wheezy/src/ruby-2.2.2

$ gedit Makefile
$ make clean
$ make

無理わからん(T_T)

WindowsのRubyは色々大変らしい。こんなこと頻繁にあったらたまったもんじゃないっす。VagrantかDocker使おう。

Rails – Gemfile

Gemfileは使いたいgem書くファイル。bundle installするとインストールされて、Gemfile.lockが作られる。Gemfile.lockがある場合、bundle installするとGemfile.lockの内容が使われる。Gemfile.lockの内容を変えたいときは、Gemfile.lockを消すか、変えたいgemに対して、bundle updateすればいい。

Rails5のAPIモードでAPIをつくってみる(2)

Rails5のAPIモードでAPIをつくってみる(1)のつづき

検索機能つけてみる。

アクションを作る。

下記の詳細は、ここに書いてあった。

ルーティング設定する。ルーティングの説明は、ここに超詳しく書いてある。便利だなあ。cakephpより分かりやすい。コントローラのフォルダわけとかもcakephpよりやりやすいと思った。あと、パス作成も簡単でいい。

モデルにsearch関数を書く。
modelクラスの中でのselfの使い方
Active Record クエリインターフェイス

これでとりあえずできた。sqlの見方調べよう。development.logに出力されてた。

1回のセレクト文になってるから大丈夫っぽい。

Rubyのempty, false, nilなど

empty, false, nilとrailsにはblankもあるらしいけど、これしっかり覚える。

nil? empty? blank? present? の使い分け

nil? すべてのオブジェクトに定義されている。nilのときのみtrueを返す。
empty? 文字列の長さが0のとき、または配列が空のときにTrueを返す。もちろん数値には定義されていない。
blank? railsの拡張。nil, “”, ” “, [], {} のいずれかでTrueを返す。
present?は、!blank?と同じ意味

結果

・0 false nilは別物
・nil?は、nilのときtrue。
(未定義の変数に使うとエラーになる。存在する配列の中の、存在しない要素だとエラーにならず、trueを返す)
・empty?は、文字列、配列に使えて、空文字列か配列が空のときtrue
・blank?は、nil, false, 空文字列, スペースだけの文字列, 配列が空のときtrue
 (未定義の変数に使うとエラーになる。存在する配列の中の、存在しない要素だとエラーにならず、trueを返す)
・present?は、!blank?
PHPよりわかり易いと思った。
・変数が定義済みかを確認するには、defined?を使える。

irbでやってみる。

定義してない変数にnil使ってもエラー。falseでも0でも定義さえしてたら、nilじゃない。

falseは0でもnilでもない。

emptyは文字列、配列に使える。数値には使えない。

rails consoleでやってみる。

falseの場合もblank?はtrueを返す。

あら未定義だとblankもpresentもエラーになる。
railsのコントローラ上で試してみてもエラーになった。
定義済みじゃないとエラーになるのか。色々PHPと違う。

上記をコントローラでやると、development.logに下記が表示される。

配列の要素に対しては、blankを使ってもエラーにならないらしい。

また、rails consoleでやってみる。

あとは一応クラスつくって試してみる。

変数が存在するか確認するには、definedが使えるらしい。

rails consoleで試してみる

未定義の変数に使ったらnilが返ってくる。存在する配列の存在しない要素に使うと、methodって返ってくる。存在するオブジェクトの値がnilのメンバ変数に使うと、methodって返ってくる。

Railsのデバッグ方法

ログ出力

オブジェクトをわかり易く表示

RubyMineのデバッグ機能を使う
RubyMineでPowを使いながらDebugする方法

byebugというgemを使う
byebugでやるのはめんどうだからRubyMineのがいいや。

RubyMineでデバッグしてみる

Run -> Debug… -> Debug Development: hogeを実行すると、デバッグ用のサーバが立ち上がる。localhost:3000にアクセスすると、ブレークポイントついてるところでとまって情報が表示される。便利。

APIの場合どうなるか?
Debug Development: hogeを実行し、デバッグ用サーバを立ち上げておき、ブレークポイントをつけて、postmanでアクセスしたら、ちゃんと止まった。うれしいっす。すごい楽だな。

Powというのは便利そうだから今度しらべよう。

Rails5のAPIモードでAPIをつくってみる(1)

プロジェクト作成

rails server立ち上げる

おーAPIモードになってる。
とりあえず、商品名と金額を登録・取得できる簡単なAPIをつくってみます。

商品テーブルのscaffoldとtableをつくる

エラーになった。intじゃだめっぽい。integerらしい。

とりあえずできた。http://localhost:3000/itemsにアクセスすると商品一覧がみられる。

get /items 商品一覧取得
post /items 商品登録
get /items/1 商品詳細
put|patch /items/1 更新
delete /items/1 削除

postmanで登録してみる

result

クロスドメインアクセスOKにする場合、下記が必要。
APIファーストでバックエンドとフロントエンドを別々に開発する時にハマるクロスドメインアクセス
cyu/rack-cors

Gemfileに下記を追加。既に書いてあってコメントアウトされてるので、コメントを外す。

bundle installする

config/application.rbに下記のような感じで書く。

ローカル環境だと、上記rack-corsの設定いらなかった。とりあえず、一覧、詳細、追加、修正、削除が全部できている。あとは、認証、認可、検索とか追加して本番環境で試したい。

参考:
Rails による API 専用アプリ

RailsでNoSQL使う – 参考サイト一覧

RailsでActiveRecordの代わりにMongoidを使う
Ruby On Rails で MongoDBを使ってみるよ
Railsを使ったMongoあれこれ。CRUDの基本操作で使い方を学ぼう!
Rails4 + Mongoidでデータ取得するあれこれ
mongodb/mongoid
Active Recordのその先へ ~RailsでMongoDBを使う~
CentOS6.2にMongoDBをインストールしてRailsで使う
Ruby での Cloud Datastore の使用
RubyでMySQL,MongoDB,Neo4jを共存させて用途に合わせて使い分ける。

RailsでAPIつくる – 参考サイト一覧

Rails5になってから、APIモードというのができたらしく余計なものをそぎ落としたAPIに特化したプロジェクトを作成できるらしい。

Rails5のAPIモードを超速で試す
Ruby on Rails 5のAPIモードと非APIモードのファイル差分
Rails5とAPIモードについての解説
Rails5 apiモード + JSONAPI ResourcesでAPIサーバを作る
Rails5 API + devise でユーザーの認証と追加機能を実装した API を作成する
webpack + React + Rails5 APIモードで環境構築
Rails 5.0.0.beta2 APIモードについて調べてみた
Rails5 APIではじめるSPA開発

Railsの人気gem

認証系

railsのマニュアルでも紹介されているのが下記2つ。
binarylogic/authlogic
plataformatec/devise

モデル系

モデルのコメントにテーブルの構造を表示してくれるらしい
ctran/annotate_models
検索機能
activerecord-hackery/ransack

View系

ページネーション
kaminari/kaminari

アップロード系

高機能で人気
carrierwaveuploader/carrierwavecarrierwaveuploader/carrierwave
シンプルで人気
thoughtbot/paperclip
carrierwaveの後継でより高機能らしー
refile/refile

管理画面系

activeadmin/activeadmin

ローカル開発系

ローカル開発時にメール送信をためせる
MailCatcher

その他

クローラー
chriskite/anemone
ABテスト
splitrb/split

その他たくさんあるな。cakephpとスターの量が違いすぎる。

参考;
Rails初心者におすすめなRubyGemsを7個厳選してみた
Ruby製サードパーティライブラリgemのトレンドを知るには「BestGems.org」がベスト
Railsアプリで実際に使用したオススメgem
Railsなプロジェクトで利用している便利なGem一覧
Railsやるなら知っておきたい便利Gem
Rubyを使うなら知っておきたいgemライブラリ10選

Railsの使い方(1)

チュートリアルやりながら、使い方まとめます。

railsコマンド

便利なコマンドが沢山ある。rails5になって変わったのも結構あるらしい。API用の軽量なやつをさくっと作れるとかもよさそう。

下記のように省略できる。

元に戻す

rails destroyで大体何でも戻る

マイグレーションは、rollback

プロジェクトの作成

Gemfileの編集

欲しいgem書く。groupをつくって環境を分ける。下記でインストールする。

インストール対象外にしたいグループがある場合、下記のようにする。

Scaffold作成

rails generate scaffoldで作成できる。モデル名のあとにフィールドを書く。

マイグレーション

ルーティング

config/routes.rbを編集する。
resources :テーブル名、とするだけで一通りの規定のアクションにアクセスできるようになる。
root ‘controller#action’、とすればルート画面の設定できる。

Model

下記のような感じで、テーブル同士の関係を書くことで勝手に紐づく。
models/user.rb

バリデーションは下記のような感じ。メッセージはどこに書くのかな。
model/micropost.rb

コントローラ

rails generate controllerで作れる。コントローラ名のあとアクションを書ける。

テスト

コントローラのテストはこんな感じで書く。

テスト実行

Railsの日本語ドキュメント

Ruby on Rails ガイド (5.0 対応)
電子書籍版もあってうれしい。
Ruby on Rails チュートリアル

チュートリアルからやる。

1-3 最初のアプリケーション

フォルダ構成はここに書いてある。

railsサーバを立ち上げる

http://localhost:3000でアクセスできる。

1-4 Hello, world!

rubyは何でもシンプルだな。
アクションは、下記のように書く。

ルーターは、config/routes.rbで、下記のように書く。

コントローラ#アクション

gitで管理する。

Herokuにデプロイしてみる
HerokuはPostgreSQLしか使えないので、Gemfileの本場用にpgを追加する。
まだ、他のgemfileを変更してないので、下記も追加した。

bundle installする

Heroku CLIをインストールする。

2 Toyアプリケーション

Railsのscaffoldは、rails generateスクリプトにscaffoldコマンドを渡すことで生成されます。 scaffoldコマンドの引数には、リソース名を単数形にしたもの (この場合はUser) を使用し、必要に応じてデータモデルの属性をオプションとしてパラメータに追加します

次はDBをマイグレートする。

何でもシンプルだなー。

@記号で始まる変数をRubyではインスタンス変数と呼び、Railsのコントローラ内で宣言したインスタンス変数はビューでも使えるようになります。

windows10でRuby on Railsを使う

ここからrubyのダウンロードする。Ruby 2.3.3 (x64)にした。インストールした。

$ ruby -v
ruby 2.3.3p222 (2016-11-21 revision 56859) [x64-mingw32]

エディタはRubyMine使う。

gemが使えない。

$ gem install rails
Please update your PATH to include build tools or download the DevKit
from ‘http://rubyinstaller.org/downloads’ and follow the instructions
at ‘http://github.com/oneclick/rubyinstaller/wiki/Development-Kit’

http://rubyinstaller.org/downloadsにあったからインストールした。

$ gem -v
2.5.2
$ gem update –system

できた。

$ gem -v
2.6.11

Ruby on Railsをインストール

$ gem install rails
$ rails -v
Rails 5.0.2

Railsのドキュメント見て勉強する。

webpack2でReactを使う

webpacke2でReactの開発環境を作る。

フォルダ・ファイルを作る

$ mkdir react1
$ cd react1
$ mkdir src
$ mkdir public
$ touch public/index.html
$ touch src/index.js
$ touch webpack.config.js
$ touch postcss.config.js

インストール

$ npm init -y
$ npm i -D webpack webpack-dev-server
$ npm i -D babel-loader babel-core babel-plugin-syntax-dynamic-import babel-preset-es2015 babel-preset-react
$ npm i -D extract-text-webpack-plugin
$ npm i -D style-loader css-loader postcss postcss-loader autoprefixer cssnano precss react-css-modules
$ npm i -D react react-dom

package.jsonは下記のようになった。

webpack.config.jsを作る

postcss.config.jsを作る

public/index.htmlを作る

src/index.jsを作る

webpackを実行する。実行後、public/bundle.jsが作成される。

$ webpack

webpack-dev-serverを実行する。実行後、http://localhost:8080にアクセスすると確認できる。

$ webpack-dev-server

PostCSS

PostCSSは、高速にCSSをごにょごにょできるツール。プラグインが沢山あって色々なことができる。

postcss/postcss
PostCSS とは何か by Yoshihide Jimbo
PostCSS まとめ
Webpack2でpostcssを使う
postcss/postcss-loader

プラグインは下記を使ってみることにした。
autoprefixer
cssnano
precss
react-css-modules

webpack2で使ってみる

$ npm install –save-dev postcss postcss-loader autoprefixer cssnano precss react-css-modules

postcss.coonfig.js

webpack.config.js

hoge.css

$ webpack

style.css