©2016 Y.Nakamura

【勉強会】はじめての Ruby on rails 4

入門

2016/11中村祐太

©2016 Y.Nakamura

アジェンダ

1. 自己紹介2. はじめに3. Ruby on Rails について4. 開発環境セットアップ ( クラウド IDE)5. HelloWorld!6. はじめての ToDo アプリ開発！

©2016 Y.Nakamura

自己紹介

• 中村 祐太 （なかむら ゆうた）• 経歴：受託開発会社、インターネット広告事

業会社、イベント EC 事業会社の新規サービス開発等。

• 趣味：旅行、ドライブ、勉強会参加・開催。• Twitter: @ynakayu• FB:

https://www.facebook.com/yuta.nakamura.599

©2016 Y.Nakamura

はじめに

• ハンズオンの想定ターゲット– PHP 等の MVC framework の開発経験がある。– Ruby on Rails を初めて勉強する。

• ハンズオンの進め方–プロジェクタに講師 PC の操作を投影しなが

ら、各自 PC を操作して学習を進めます。–スライドと完成版ソースコードは共有します。

©2016 Y.Nakamura

Ruby on Rails について 1/2

• 少ないコード量で効率的に開発ができる人気のフレームワーク。

• 2011 年以降に創業しているスタートアップ企業の使用言語は PHP と Ruby がほぼ半分。※ 1出典：※ 1 日本のスタートアップは Ruby がお好き？　 PHP と人気ほぼ互角に | TechCrunchhttp://jp.techcrunch.com/2014/08/25/jp20140825wantedly/

©2016 Y.Nakamura

Ruby on Rails について 2/2

出典：※ 2 プログラマー年収ランキング 2016 ！| みんなのスタンバイ https://jp.stanby.com/media/programming_ranking/

3 位

©2016 Y.Nakamura

開発環境構築

• 時間削減のため、クラウド IDE codeanywhere の無料プランを使用。

• https://codeanywhere.com

参考（同様のサービス）• Cloud9 : フリープランでもクレジットカー

ド必須のため、今回は選択肢から外しました。

©2016 Y.Nakamura

Codeanywhere トップhttps://codeanywhere.com

©2016 Y.Nakamura

Codeanywhere 価格

©2016 Y.Nakamura

Codeanywhere ユーザー登録

入力：Emailパスワード

クリック

チェック

©2016 Y.Nakamura

Codeanywhere アカウント作成完了

エディタへ

©2016 Y.Nakamura

コンテナの作成

①②

③

④

※ ③ ・・・ Ruby / Centos 6.5 を選択

©2016 Y.Nakamura

セットアップ完了

©2016 Y.Nakamura

HelloWorld!• Hello World! とブラウザに表示するアプ

リを開発します。

©2016 Y.Nakamura

Hello World PJ の作成

• PJ hello を新規作成$ rails new hello

• hello ディレクトリに移動$ cd hello

©2016 Y.Nakamura

動作確認

• rails サーバを起動する$ rails s –b 0.0.0.0

• ブラウザで下記 URL を開く• http://xxxxx.codeanyapp.com:3000

• ※ xxxxx の部分は各自異なる。– IED の Project 名を右クリック > info から確認。

• ※ port 3000 を指定。 (:3000) 。

©2016 Y.Nakamura

この画面が出れば PJ の作成成功 .

©2016 Y.Nakamura

フォルダ構成

• <IDE を見ながらフォルダ構成を説明 >

• 参考 URL「 Rails の基礎知識 | Rails ドキュメント」http://railsdoc.com/rails_base※ フォルダ構造の項を参照。

©2016 Y.Nakamura

HelloWorld! 手順

1. コントローラに HelloWord! と出力するメソッドを記載

2. ルーティングを記載3. (Rails サーバ起動 )4. ブラウザで動作確認

©2016 Y.Nakamura

HelloWord コントローラー編集ファイル：app/controllers/application_controller.rb

class ApplicationController < ActionController::Base # Prevent CSRF attacks by raising an exception. # For APIs, you may want to use :null_session instead. protect_from_forgery with: :exception def hello render text: "Hello World!" end

end

©2016 Y.Nakamura

Hello World ルーティング設定

URL と実行するべきアクションを設定する仕組み。

編集ファイル： app/config/routes.rb

Rails.application.routes.draw doroot 'application#hello’〜略〜

©2016 Y.Nakamura

Hello World 動作確認

• rails サーバを起動する$ rails s –b 0.0.0.0

• ブラウザで下記 URL を開く• http://xxxxx.codeanyapp.com:3000

• ※ xxxxx の部分は各自異なる。– Project 名を右クリック > info から確認。

• ※ port 3000 を指定。 (:3000) 。

©2016 Y.Nakamura

HelloWorld• Hello World! とブラウザに表示されれば

OK! あなたも rails エンジニアの仲間入りです！

©2016 Y.Nakamura

ToDo 管理アプリ• ToDo を管理するアプリを作成します。Rails 入門する上の、エッセンスがつまっています。

– ToDo 一覧– 新規追加– 編集– 削除– 完了 / 未完了設定 (Ajax)

– DB には sqlite を使用

©2016 Y.Nakamura

ToDo 管理アプリ開発について

• < プロジェクターに PC の操作画面を写しながら、開発手順を説明します >

• 必要になるコマンドは、次ページ以降に、資料として記載。

• 完成版ソースコード共有します。https://github.com/ynakayu/todoapp

©2016 Y.Nakamura

資料 : PJ 作成 ■ workspace ディレクトリへ移動$ cd ~/workspace/

■ PJを新規作成$ rails new todoapp

■ 作成されたディレクトリ移動$ cd todoapp/

■ therubyracer有効にする。 ※ 参考： http://d.hatena.ne.jp/suu-g/20121222/1356189597 Gemfile 編集# gem 'therubyracer',  platforms: :ruby  ↓ gem 'therubyracer',  platforms: :ruby

// 必要なGemをインストール

$ bundle install

©2016 Y.Nakamura

資料：動作確認

• rails サーバを起動する$ rails s –b 0.0.0.0

• ブラウザで下記 URL を開く• http://xxxxx.codeanyapp.com:3000

• ※ xxxxx の部分は各自異なる。– Project 名を右クリック > info から確認。

• ※ port 3000 を指定。 (:3000) 。

©2016 Y.Nakamura

資料： Task コントローラー作成 コマンド

// コントローラー作成$ rails g controller Tasks

// モデル作成$ rails g model Task title:string done:boolean 

©2016 Y.Nakamura

資料：マイグレーションファイル編集

migrations.doneのデフォルト値、default falseを追加。 編集ファイル等 app/db/migrate/xxxx_create_tasks.rb

class CreateTasks < ActiveRecord::Migration   def change     create_table :tasks do |t|       t.string :title       t.boolean :done, default: false       t.timestamps     end   end end

©2016 Y.Nakamura

資料： DB マイグレーション実行

$ rake db:migrate 

■ 参考文献マイグレーション | Rails ドキュメントhttp://railsdoc.com/migration

                        

©2016 Y.Nakamura

資料： DB スキーマ確認

$ rails db  sqlite> .schema                                                                                   ■rails db を終了 sqlite> .exit

©2016 Y.Nakamura

資料： DB 初期データ追加

$ rails console                                                                                             2.1.2 :001 > Task.create(title: “task1")                                                                                                                              2.1.2 :002 > Task.create(title: ”task2")                                                     

■ 確認2.1.2 :002 > Task.all

■rails console終了時 2.1.2 :003 > quit    

©2016 Y.Nakamura

資料：ルーティングの確認

$ rake routes Prefix Verb URI Pattern Controller#Action tasks GET /tasks(.:format) tasks#index POST /tasks(.:format) tasks#create new_task GET /tasks/new(.:format) tasks#new edit_task GET /tasks/:id/edit(.:format) tasks#edit task GET /tasks/:id(.:format) tasks#show PATCH /tasks/:id(.:format) tasks#update PUT /tasks/:id(.:format) tasks#update DELETE /tasks/:id(.:format) tasks#destroy root GET / tasks#index POST /tasks/:id/toggle(.:format) tasks#toggle

©2016 Y.Nakamura

資料 : 学習の参考サイト等

• Rails ドキュメント– http://railsdoc.com/

• Rails ガイド– http://railsguides.jp/

• Ruby on Rails チュートリアル– http://railstutorial.jp/

• Ruby on Rails 4 アプリケーションプログラミング 山田 祥寛 ( 著 )