SlideShare a Scribd company logo
©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.naka
mura.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と人気ほぼ互角に | TechCrunch
http://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 do
root '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終了
©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 アプリケーションプログ
ラミング 山田 祥寛 (著)

More Related Content

PDF
僕の Serverless web application
PDF
コミュニティと自分
PDF
古き良きRailsプロジェクトに wepbackとvue.jsを導入した話
PDF
最近の気になるニュース
PDF
Cmsdou oosaka
PDF
How do you like knockout?
PDF
ASP.NET "NOW" and "NEXT"
PDF
どうなる?Visual Studioの クライアントサイド web開発の今後
僕の Serverless web application
コミュニティと自分
古き良きRailsプロジェクトに wepbackとvue.jsを導入した話
最近の気になるニュース
Cmsdou oosaka
How do you like knockout?
ASP.NET "NOW" and "NEXT"
どうなる?Visual Studioの クライアントサイド web開発の今後

What's hot (19)

PPTX
Rails5クイックスタート
PDF
テクニカルクリエイターの憂鬱
PDF
20141202 jaws ug
PDF
知っておきたいWordPress開発環境 2016年10月編
PDF
Yapc asia 2011
PPTX
JAWS-UG横浜紹介『我らが横浜!』
PDF
oEmbedで、色んなコンテンツをWordPressに組み込もう!
PDF
軽量ASP.NETフレームワークNancy
PDF
軽量フレームワークNancy
PDF
BootstrapとRailsで、 高速にWebサイトを作ってみた
PDF
MySQL+Docker
PDF
About SnapKit - Open source lab -
PDF
COD2013 Windows Azure Mobile Service を用いたiOS/Android開発
PDF
Web制作者が知っておきたいアクセシビリティ最新動向
PPTX
Web Assembly in action
PDF
Sinatra軽量Web開発 - LOUPE Study #1
PDF
VagrantでSymfony開発
PDF
20190917 bydstudy#1 teraoka
Rails5クイックスタート
テクニカルクリエイターの憂鬱
20141202 jaws ug
知っておきたいWordPress開発環境 2016年10月編
Yapc asia 2011
JAWS-UG横浜紹介『我らが横浜!』
oEmbedで、色んなコンテンツをWordPressに組み込もう!
軽量ASP.NETフレームワークNancy
軽量フレームワークNancy
BootstrapとRailsで、 高速にWebサイトを作ってみた
MySQL+Docker
About SnapKit - Open source lab -
COD2013 Windows Azure Mobile Service を用いたiOS/Android開発
Web制作者が知っておきたいアクセシビリティ最新動向
Web Assembly in action
Sinatra軽量Web開発 - LOUPE Study #1
VagrantでSymfony開発
20190917 bydstudy#1 teraoka
Ad

Similar to 【勉強会】 はじめてのRuby on Rails 4入門 (20)

PPTX
【テックリンク】平日の夜1時間で学ぶ!RubyonRails初心者ハンズオン
PDF
2014年を振り返る 今年の技術トレンドとDockerについて
PPTX
20180928 monaca UG #6
PDF
ヒカラボ「自社サービス開発会社で活躍し続けるために必要な○○とは?」開発エンジニア
PDF
ヒカラボ「自社サービス開発会社で活躍し続けるために必要な○○とは?」開発エンジニア
PPTX
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
PDF
Rancher で Docker 利用!
PDF
Nodeにしましょう
PPTX
Rancher meetuptokyo #4 Vagrant でつくる Rancher HA構成
PPTX
Aws発表資料(dac) 20160721
PPTX
Monacaハンズオン(三島ハッカソン用)
PDF
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
PDF
DeNAのゲーム開発を支える Game Backend as a Service
PPTX
PhoneGapユーザー会@大阪 講演資料
PPTX
まだまだ戦えるweb!mithril.js最初の1歩
PDF
Ruby実践
KEY
20120413 nestakabaneworkshop
PDF
HTML5ハイブリッド アプリ開発実践編
PDF
今から始めよう!WordPressで作る女子ウケ★スマホサイト
PDF
JavaScript使いならきっととっつきやすいNode-REDについて
【テックリンク】平日の夜1時間で学ぶ!RubyonRails初心者ハンズオン
2014年を振り返る 今年の技術トレンドとDockerについて
20180928 monaca UG #6
ヒカラボ「自社サービス開発会社で活躍し続けるために必要な○○とは?」開発エンジニア
ヒカラボ「自社サービス開発会社で活躍し続けるために必要な○○とは?」開発エンジニア
AITCシニア技術者勉強会 「今さら聞けないWebサイト開発」 vol1
Rancher で Docker 利用!
Nodeにしましょう
Rancher meetuptokyo #4 Vagrant でつくる Rancher HA構成
Aws発表資料(dac) 20160721
Monacaハンズオン(三島ハッカソン用)
サーバサイドエンジニアから見た MT構築のレガシーなノウハウ (入門編)
DeNAのゲーム開発を支える Game Backend as a Service
PhoneGapユーザー会@大阪 講演資料
まだまだ戦えるweb!mithril.js最初の1歩
Ruby実践
20120413 nestakabaneworkshop
HTML5ハイブリッド アプリ開発実践編
今から始めよう!WordPressで作る女子ウケ★スマホサイト
JavaScript使いならきっととっつきやすいNode-REDについて
Ad

【勉強会】 はじめてのRuby on Rails 4入門