JavaScript：Anglar勉強整理メモ - 各設定ファイルの役割と概要 -

最近、Angularの勉強を下記本で勉強しているので、頭の整理がてらメモを投稿してみる。

Angularアプリケーションプログラミング

今回は、Angularで使われる設定ファイルの役割と概要についてです。

基本ライブラリの挙動を宣言する

設定ファイル

設定が必要となるファイル

設定ファイル	概要
pakage.json	Angular及びnode.jsで使用するライブラリを管理
tsconfig.json	TypeScriptのコンパイラの動作を定義
systemjs.config.js	モジュールローダー(SystemJS)の設定情報

pakage.json

Node.jsの設定ファイル、現在のアプリ及び使用しているライブラリを管理する。
npm install実行時に当該ファイルに記載されているライブラリをインストールする。

# ライブラリを追加でインストールする
npm install module_name --save

# save:dependenciesパラメーターへに記録
# 参考:勉強メモ/npmの使い方(node.js=v0.11.16, npm=2.3.0, 2015-03時点)
# https://qiita.com/msakamoto_sf/items/a1ae46979a42d6948ebd

tsconfig.json

TypeScriptをコンパイルする際の挙動を管理する。

{
  "compilerOptions": {
    "target": "es5",                // 生成するJavaScriptのバージョン 
    "module": "commonjs",           // 生成するJavascriptのモジュール形式
    "moduleResolution": "node",     // モジュールの解決方法
    "sourceMap": true,              // ソースマップを生成するかどうか
    "emitDecoratorMetadata": true,  // デコレーターのためのメタデータを出力するかどうか
    "experimentalDecorators": true, // デコレーターを有効にするかどうか
    "lib": [ "es2015", "dom" ],     // コンパイル時にインクルードされるライブラリ
    "noImplicitAny": true,          // 暗黙的なAny型への変換を行うかどうか
    "suppressImplicitAnyIndexErrors": true // インデックスアクセス時のnolmplicitAnyエラーを抑制
  }
}

systemjs.config.js

SystemJSとは、JavaScriptのモジュールを動的にロードするためのライブラリ。
各ライブラリへのエイリアスやデフォルトでロードするファイル等を定義する。

(function (global) {
  System.config({
    paths: {
      // パスのエイリアス設定
      'npm:': 'node_modules/'
    },
    // モジュールの短縮名を定義
    map: {
      // our app is within the app folder
      'app': 'app',

      // Angler標準モジュール
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      /* 省略 */
    },
    // モジュールのロード方法s
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

以上

JavaScript：Anglar勉強整理メモ - サンプルアプリの実行と概要について -

最近、Angularの勉強を下記本で勉強しているので、頭の整理がてらメモを投稿してみる。

Angularアプリケーションプログラミング

今回は、Angularの基本についてです。

---

Angularの基本

Angular利用するための準備

サンプルプログラムのクローン

rem サンプルプログラムのクローン
$ git clone https://github.com/angular/quickstart

Angularアプリの基本構造

# Quickstartプロジェクトのフォルダ構成
# ★：最低限必要なファイル
quickstart
├src･･･････････････････････････････アプリ本体を格納するフォルダ
│├index.html･･････････････････････トップページ★
│├main.ts･････････････････････････スタートアップファイル★
│├style.css･･･････････････････････標準のスタイルシート
│├system.config.js････････････････System.jsの設定ファイル★
│├tsconfig.js･････････････････････TypeScriptコンパイラの設定情報
│└app･････････････････････････････Angularアプリ関連のコード一式
│  ├app.cmnponent.ts･･････････････ルートコンポーネント★
│  ├app.component.spec.ts･････････コンポーネントのテストスクリプト
│  └app.module.ts･････････････････ルートモジュール★
├e2e･･･････････････････････････････E2Eテスト関連のスクリプト
│├app.e2e.spec.ts･････････････････E2Eテストスクリプト
│└ts.config.json･･････････････････TypeScriptコンパイラの設定情報
├karma.conf.js･････････････････････karma設定ファイル
├package.json･･････････････････････パッケージ情報ファイル
├protractor.config.js･･････････････Protractor設定ファイル
└tslint.json･･･････････････････････tslint設定情報

Angularアプリの実行

rem ライブラリのインストール
$ npm install
rem サーバーを起動
$ npm start

実行画面

Angularの基本構文の確認

モジュール

モジュールとは？：ソースコードの集合体

種類	概要
ルートモジュール	アプリ起動時に実行されるモジュール
サブモジュール	アプリの特定機能単位に実行されるモジュール
Anglerモジュール	Angularがフレームワークとして提供するモジュール

ルートモジュールapp.module.tsを例に概要を説明

// Angularモジュールのインポート
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// アプリを構成するコンポーネントのインポート
import { AppComponent }  from './app.component';

/* モジュール構成の定義
   この定義によりAngular上でモジュールとして扱えるようになる。
   ・imports:現在のモジュールで使用する他のモジュール
   ・declarations:現在のモジュールに属するコンポーネントなど
   ・bootstrap:アプリで最初に起動すべきルートコンポーネント
*/
@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ]
})

// モジュールクラスの定義
// export:他モジュールから参照可能
export class AppModule { }

コンポーネント

コンポーネント：UI部品
ルートコンポーネント：最初に呼ばれるコンポーネント

ルートコンポーネントapp.component.tsを例に説明

// コンポーネントを定義するために必要なオブジェクトのインポート
import { Component } from '@angular/core';

/* コンポーネントの構成情報を定義
   この定義によりAngular上コンポーネントとして扱えるようになる。
   ・selector:コンポーネントを適用すべき要素
   ・template:コンポーネントに適用するView
   例)<my-app></my-app>に<h1>Hello Angular</h1>を反映する
*/
@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})

// コンポーネントクラスの定義
// プロパティとしてnameを宣言し'Angular'を代入
export class AppComponent  { name = 'Angular'; }

テンプレートへ変数を埋め込む Interpolation(補完)

Interpolation(補完)構文{{...}}を用いることで、コンポーネントクラスのプロパティをテンプレートに代入することが可能。

---

メインページ

アプリが動作するメインページindex.html

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <!-- 必要なモジュールのインポート -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    
    <!-- システム情報設定をインポート -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('main.js').catch(function(err){ console.error(err); });
    </script>

  </head>

  <body>
    <!-- ルートコンポーネントの表示領域 -->
    <my-app>Loading AppComponent content here ...</my-app>
  </body>
</html>

以上

HTML+CSS+JavaScriptでネイティブアプリが作れる - ionic入門 -

最近、ionicを使ってみているので日本語のドキュメント少ないし、頭の整理も兼ねて入門記事を書いてみるφ(..)

ionicとは

ionicとは、HTML+CSS+JavascriptといったWebの技術を使ってネイティブアプリが開発出来るオープンソースのフレームワークです。

Know how to build websites? Then you already know how to build mobile apps. Ionic Framework offers the best web and native app components for building highly interactive native and progressive web apps. https://ionicframework.com/より引用
ウェブサイトを構築する方法を知っていますか？次に、モバイルアプリを構築する方法を既に知っています。 Ionic Frameworkは、高度にインタラクティブなネイティブおよびプログレッシブなWebアプリケーションを構築するための、最高のWebおよびネイティブアプリコンポーネントを提供します。(Google翻訳)

ionicframework.com

ionicにはネイティブアプリの部品やアクションを再現した各種コンポーネントやアイコンが揃っていて、それらをHTMLの要素として配置しCSSでデザインを整えたり、JavaScript(TypeScirpt + AngularJS)で処理を実装することでネイティブアプリを開発することが出来ます！・ω・

↓ちなみにこんな感じのが作れます。

サンプルアプリを動かしてみる

Ionicをお手軽に試せるようにionicの公式ホームページにチュートリアルが記載されているので、それを元に環境構築をして、サンプルアプリを動かしてみようと思います！

ionicframework.com

ionicを動かす環境をつくる

node.jsのインストール

まずは、下記サイトでインストーラーを取得し、node.jsをインストールします。

Node.js

node.jsのバージョン管理等を行いたい人は、下記記事が参考になるかと思います。

qiita.com

ionicのインストール

node.jsがインストール出来たら、いよいよ下記コマンドを実行しionicをインストールします。

$ npm install -g cordova ionic

下記コマンド実行し、バージョン情報が返ってくれば完了です。

$ ionic -v
3.10.1

サンプルアプリを動かしてみる

サンプルアプリの作成

任意のフォルダで下記コマンドを実行し、Ionicのチュートリアル用のアプリケーションを作成します。

$ ionic start MyIonicProject tutorial

MyIonicProjectにアプリケーション名を指定しています。
また上記コマンドのtutorialの部分を変更するとことで色々なベースを元に作成することが出来ます。

tabs : a simple 3 tab layout
sidemenu: a layout with a swipable menu on the side
blank: a bare starter with a single page
super: starter project with over 14 ready to use page designs
tutorial: a guided starter project

サンプルアプリの実行

作成したアプリを実行するには作成したプロジェクトファイルに移動し、ionic serveを実行します。

rem プロジェクトフォルダに移動
$ cd MyIonicProject/
rem ionicのアプリケーションを実行
$ ionic serve

下記のような画面が表示されたら成功です！

※ionicで作成したアプリケーションの表示を確認する場合は、デベロッパーツールを表示し、toggle devise toolbarを使用すると便利です。

developers.google.com

サンプルアプリにページを追加してみる

サンプルページが上手く動いたところで、新規にページを追加しionicの実装イメージを掴みます。

ページの生成

ionicにページを追加する場合は、下記コマンドを実行します。

rem ionic generate [<type>] [<name>]
$ ionic generate page PageIndex 
[OK] Generated a page named PageIndex!

app/src/pages配下にフォルダが作成されていればOKです。

作成ページの構成概要

先程のコマンドを実行すると下記のようなフォルダ・ファイルが生成されます。

page-index
 ├page-index.html
 ├page-index.module.ts
 ├page-index.scss
 └page-index.ts

この中でも主に編集するのは、page-index.html、page-index.scss、page-index.tsの3つです。

ファイル	説明
page-index.html	コーポネントの配置及びjs側で保持している値の紐付けを行います。
page-index.scss	アプリのデザインに関わる部分をSCSS(≒CSS)で記載します。
page-index.ts	クリック時や画面表示後等で実行される処理をTypeScript+AngularJSで記載します。

ページ遷移処理の実装

それでは、新規ページへ遷移する処理を記載していきます。

ページの登録

まずは、追加したページをアプリに登録します。

app.module.ts

/* 省略 */
import { PageIndexPage } from '../pages/page-index/page-index';

@NgModule({
  declarations: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    PageIndexPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HelloIonicPage,
    ItemDetailsPage,
    ListPage,
    PageIndexPage,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
/* 省略 */

追加したページをルートに設定してみる

ルートページの設定は、app.components.jsで行うことが出来ます。
ルートページに設定したページがアプリ起動時に表示されるようになります。

app.components.js

/* 省略 */
import { PageIndexPage } from '../pages/page-index/page-index';
/* 省略 */
export class MyApp {
  // 新規追加ページを代入
  rootPage = PageIndexPage;
 /* 省略 */
　openPage(){
   this.menu.close();
   // ルートページに遷移
   this.nav.setRoot(page.component);
 }
}

遷移したページに値を受け渡してみる

一覧画面から詳細画面に遷移するような処理を行うためには、下記のような手順が必要です。

1. html側でクリックイベントを発火
2. クリックされた要素の情報を引数にページ遷移のメソッドを呼び出す
3. 引数をパラメーターに設定し、ページ遷移を行う
4. 遷移先でパラメーターを受領する

具体的な実装

page-index.html

<button ion-button color="primary" (click)="gotoPageShowPage(page)">

page-index.ts

  // 遷移先ページをインポート
　　import { PageShowPage } from '../page-show/page-show';
　　/* 省略 */
  gotoPageShowPage(page) {
    // 引数をパラメーターに設定し、ページ遷移を行う。
    this.navCtrl.push(PageShowPage, {
      page: page
    }); 
  

page-show.ts

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    // パラメーターを取得
    this.page = navParams.get('page');
  }

おわりに

ionicを使えばHTML+CSS+JSといったWebの技術を使ってiosやAndroidのアプリをつくることが出来ます。
私もまだまだ勉強中ですが、これからもなにかあれば投稿してみようと思います！φ(..)「

Ruby:作成したRubyプログラムを指定したコマンドで実行する

最近Rubyでコンソールアプリケーションを作成したので、指定したコマンドで作成したRubyプログラムを実行する方法をメモφ(..)

github.com

Rubyプログラムを任意のコマンドで実行方法

手順

やりかたとしては、作成したRubyプログラムへの絶対パスへのエイリアスを~/.bash_profileに追記します。

# cmd_nameでrubyプログラムが実行出来るようにエイリアスを設定
$ echo alias cmd_name="ruby Rubyプログラムへの絶対パス" >> ~/.bash_profile
# 環境変数の反映 
source ~/.bash_profile

コマンド実行

スクリプトファイルで同一フォルダ内にあるRubyプログラムへのエイリアスを貼ってみました。

# 現在のパスを取得
SCRIPT_DIR=$(cd $(dirname $0) && pwd)
# homeでrubyプログラムが実行出来るようにエイリアスを設定
echo alias homehome="'ruby ${SCRIPT_DIR}/HomeRuby.rb'" >> ~/.bash_profile
# 環境変数の反映 
source ~/.bash_profile

実行例

こんな感じで指定したコマンドでスクリプトが実行出来ました！　　

ionicでWebサイトへのリンクを貼る。

ionicでWebサイトへのリンクを貼る方法をメモφ(..)

↓こんな感じ  

手順

.htmlファイルにリンクを置く

.htmlファイル内に通常のWebアプリケーションと同様に<a>...</a>を配置します。
配置したリンクには(click)でクリックイベントを定義し、.tsで定義したopenWebSite()メソッドを呼び出します。

<a href="#" (click)="openWebSite(page.url)">{{page.title}}</a>

.tsでWebサイトを開く処理を実装する。

.ts内にメソッドを定義し、window.open()メソッドに引数としてURLを渡します。
urlと合わせて_system及びlocation=yesを引数として渡していますが、_systemはシステムのブラウザでリンクを開くことを表し、location=yesはアドレスバーの有無を意味します。

export class PageIndexPage {
  /* 省略 */
  openWebSite(url) {
    window.open(url, '_system', 'location=yes');
    return false;
  }
  
}

以上のやり方でWebサイトへのリンクを貼ることが出来ました・ω・

参考

window.open - Apache Cordova

www.thepolyglotdeveloper.com

RubyonRails:kaminariを使ってページャーを簡単に実装する

開発中のサービス「いつもの更新、いつでも確認 | Moook」でページャーを実装する際に使用したgemkaminariの使い方をメモφ(..)

github.com

使い方

gemのインストール

kaminariを使うには、gemファイルに追加しbundle installを実行します。

Gemfile

gem 'kaminari'

実装

ページャーを作るために必要な箇所はControllerとViewのみです・ω・ 処理の概要を説明すると下記のような感じです。

Source	実装内容
Controller	リクエストパラメーターから渡されたページ番号を使って、検索結果取得範囲を制御する。
View	ページャーを生成し、設置する

具体的なプログラムも下記に記載しておきますφ(..)

Controller

  def index
    @pages = Page.favorited_pages(current_user).page(params[:page]).per(9)
  end

取得結果に.page(params[:page])及び.per(1ページ辺りの件数)追記することで、ページ番号を指定した検索結果の制御が行えます。
検索結果の制御は、引数のページ番号とクエリメソッドのlimitとoffsetを使って実現されていますφ(..)
※offsetとlimitの詳細は、下記記事にまとめたので知りたい人がいれば見てみてください。

madogiwa0124.hatenablog.com

View

ページャーの設置を行う前に、ページャーのviewを生成します。
下記コマンドを実行すると、app/views/kaminari配下にページャーのviewファイルが作成されます。

$ rails g kaminari:views default

その後、Controllerで取得したインスタンス変数をpagenateに引数として渡してあげれば、ページャーが生成されます。

<%= paginate(@pages) %>

また、bootstrapをページャーに反映させるのも下記からファイルを取得してapp/views/kaminari配下のファイルを差し替えてあげれば簡単に出来ます！

github.com

↓こんな感じ

ローカライズ

先程の画像では、ページャーの日本語化が行われていました。
これは、kaminariのページャーの表示をconfig/locales/ja.ymlに追記することで設定できます。 これをやらないと翻訳を失敗した際に上手く表示されません・・・。
※私が導入した際もtruncateが翻訳に失敗し、Truncateと表示されてしまいました(´・ω・`)

ja.yml

  views:
    pagination:
      first: "最初"
      last: "最後"
      previous: "前"
      next: "次"
      truncate: "..."

※applicaiton.rbがconfig.i18n.default_locale=:jaとなっていることが前提です。

おわりに

kaminariを使えば、簡単にページャーを設定することが出来ます！
ページャーを用いることで、取得レコード数が制限され表示のパフォーマンスも良くなると思いますので、皆さんも自分が作っているRailsアプリケーションに導入してみてはいかがでしょうか？ヽ(´ｴ`)ﾉ

RubyonRails:Rails5で使えるデータ検索関連のメソッドをまとめてみた

現在、Railsブロンズ試験を受験してみようと思い、RubyonRails5アプリケーションプログラミングという本で勉強中なので、頭の整理も兼ねて学んだことをまとめてみるφ(..)

Ruby on Rails 5アプリケーションプログラミング

今回はモデルの検索について主要なメソッドをまとめてみました・ω・

モデルの検索処理まとめ

主キーによる検索：findメソッド

findメソッドは、主キーによるレコードの検索を行います。
取得結果は主キー指定の場合はモデルのインスタンス、複数の主キーを指定した場合は、モデルのインスタンスの配列が返却されます。

# 主キーによる検索
Model.find(1)
#=> SELECT  "models".* FROM "models" WHERE "models"."id" = ? LIMIT ?  [["id", 1], ["LIMIT", 1]]

# 複数の主キーによる検索
Model.find([1, 2, 3])
#=> LECT "models".* FROM "models" WHERE "models"."id" IN (1, 2, 3)

任意キーによる検索：find_byメソッド

find_byメソッドは、任意の項目をキーとして検索を行います。
取得結果として検索条件に合致した最初の一件を返却します。
また複数の検索キーが引数に設定された場合は、複数の検索キー(AND条件)で結果を取得します。

# タイトルをキーとして検索
Model.find_by(title: "hoge")
#=> SELECT  "models".* FROM "models" WHERE "models"."title" = ? LIMIT ?  [["title", "hoge"], ["LIMIT", 1]]

# タイトルと内容をキーとして検索
Model.find_by(title: "hoge").find_by(content: "fuga")
#=> SELECT  "models".* FROM "models" WHERE "models"."title" = ? AND "models"."content" = ? LIMIT ?  [["title", "hoge"], ["content", "fuga"], ["LIMIT", 1]]

基本的な条件式を設定する：whereメソッド

whereメソッドは、引数に条件を設定し、与えられた条件に合致するレコードを返却します。
find_byメソッドと一見似ていますが、whereメソッドは、条件に合致する全てのレコードを返却します。
また、プレースホルダー?を使い任意の値を条件式に埋め込むことが出来ます。
※取得結果が1件だったとしてもActiveRecord::Relationで返却されるため注意が必要です。

madogiwa0124.hatenablog.com

# タイトルがhogeかつ本文がfugaのレコードを検索
# hashで複数条件を与えた場合はfind_byメソッドと同様にAND条件となる。
Model.where(title: "hoge", content: "fuga")
#=> SELECT  "models".* FROM "models" WHERE "models"."title" = ? AND "models"."content" = ? LIMIT ?  [["title", "hoge"], ["content", "fuga"], ["LIMIT", 11]]

# 金額が1000以上のレコードを検索
Model.where('price >= ?', 1000)
#=> SLECT  "models".* FROM "models" WHERE (price >= 1000) LIMIT ?  [["LIMIT", 11]]

条件に合致しないレコードを検索する：notメソッド

notメソッドを使うことで、whereメソッドで指定した条件に合致しないレコードを取得することが出来ます。

# タイトルがhogeじゃないレコードを検索
Model.where.not(title: "hoge")
#=> SELECT  "models".* FROM "models" WHERE "models"."title" != ? LIMIT ?  [["title", "hoge"], ["LIMIT", 11]]

OR条件で複数条件を設定する：orメソッド

orメソッドは与えられた条件式をOR条件(または)として加えることが出来ます。
ただし、加えられるのは同一モデルに対するwhereメソッドのみです。

# タイトルがhogeまたは本文がfugaのレコードを検索
Model.where(title: "hoge").or(Model.where(content: "fuga"))
#=> SELECT  "models".* FROM "models" WHERE ("models"."title" = ? OR "models"."content" = ?) LIMIT ?  [["title", "hoge"], ["content", "fuga"], ["LIMIT", 11]]

取得結果を並び変える：orderメソッド

orderメソッドに項目とソート順を与えることで取得結果の並び替えることが出来ます。
項目とソート順は複数与え、複数項目での並び替えを行うことも可能です。

# タイトルの昇順で並び変える
Model.order(title: :asc)
#=> SELECT  "models".* FROM "models" ORDER BY "models"."title" ASC LIMIT ?  [["LIMIT", 11]]

# タイトルの降順で並び変える
Model.order(title: :desc)
#=> SELECT  "models".* FROM "models" ORDER BY "models"."title" DESC LIMIT ?  [["LIMIT", 11]]

# 価格の降順、タイトルの昇順で並び変える
Model.order(price: :desc, title: :asc)
# => LECT  "models".* FROM "models" ORDER BY "models"."price" DESC, "models"."title" ASC LIMIT ?  [["LIMIT", 11]]

取得する項目を指定する：selectメソッド

selectメソッドを用いることで特定の項目のみを取得することが出来ます。
引数を複数与えることで、複数の項目を指定することも可能です。

# 全てのモデルのタイトルを取得する
Model.select(:title)
#=> SELECT  "models"."title" FROM "models" LIMIT ?  [["LIMIT", 11]]

# 全てのモデルのタイトルと価格を取得する
Model.select(:title, :price)
#=> SELECT  "models"."title", "models"."price" FROM "models" LIMIT ?  [["LIMIT", 11]]

重複したレコードを削除する：distinctメソッド

distinctメソッドを使うことで取得結果から重複したレコードを削除することが出来ます。

# モデルに設定されているジャンルの一覧を重複なしで取得
Model.select(:genre).distinct
#=> SELECT  DISTINCT "models"."genre" FROM "models" LIMIT ?  [["LIMIT", 11]]

レコードの取得件数を制御する：limitメソッド・offsetメソッド

limitメソッドを使用することで最大取得件数を制限することが出来ます。
また、offsetメソッドを使用することで、取得開始位置を指定することが出来ます。

# モデルを最大3件取得する
Model.limit(3)
# => SELECT  "models".* FROM "models" LIMIT ?  [["LIMIT", 3]]

# モデルを10件目から10件取得する
# offsetを指定する際は先頭行が0となるため注意
Model.offset(10).limit(10)
# => SELECT  "models".* FROM "models" LIMIT ? OFFSET ?  [["LIMIT", 10], ["OFFSET", 10]]

データの集計を行う：groupメソッド

groupメソッドを使用することで特定のキーで結果をグルーピングし、データの集計を行うことが出来ます。

# ジャンル別の最大価格を取得する
Model.select('genre, MAX(price) AS max_price').group(:genre)
# => SELECT genre, MAX(price) as max_price FROM "models" GROUP BY "models"."genre"

集計後の結果に検索条件を設定する：havingメソッド

havingメソッドは、集計後の結果に対して条件を設定し絞込を行うことが出来ます。

# ジャンル別の最大価格が10000以上のものだけを取得する
Model.select('genre, MAX(price) AS max_price').group(:genre).having('MAX(price) >= ?', 10000)
# => SELECT  genre, MAX(price) as max_price FROM "models" GROUP BY "models"."genre" HAVING (MAX(price) >= 10000) LIMIT ?  [["LIMIT", 11]]

特定項目の平均値・最小値・最大値・合計値を取得する：averageメソッド・minimumメソッド・maximumメソッド・sumメソッド

平均・最小・最大・合計といった集計でよく使いそうなものは、メソッドとして定義されています。
これらのメソッドはwhereメソッドに続けて記述することによって、検索結果に適用することも出来ます。

# 価格の平均値を取得
Model.average(:price)
# => SELECT AVG("models"."price") FROM "models"

# 価格の最小値を取得
Model.minimum(:price)
# => SELECT MIN("models"."price") FROM "models"

# 価格の最大値を取得
Model.maximum(:price)
# => SELECT MAX("models"."price") FROM "models"

# 価格の合計値を取得
Model.sum(:price)
# => SELECT SUM("models"."price") FROM "models"

# 特定ジャンルの平均価格を取得
Model.where(genre: "hoge").average(:price)
# => SELECT AVG("models"."price") FROM "models" WHERE "models"."genre" = ?  [["genre", "hoge"]]

生のSQLを使って検索を行う：find_by_sqlメソッド

どうしても生のSQLで検索を行いたい場合は、find_by_sqlメソッドを使用します。
※SQLの構文はDBMSに依存するためDBMS変更時に不具合を誘発する可能性があるため注意してください。

# 特定ジャンルのレコードを取得
Model.find_by_sql(['SELECT * FROM models WHERE genre = ?', 'hoge'])
# => SELECT * FROM models WHERE genre = 'hoge'

以上です！
また何かあれば追記しようと思いますφ(..)