【入門】3時間でアプリ公開！ゼロからのプログラミングRails講座

株式会社Dive into Code
代表取締役 Founder CEO　野呂浩良
Rails3認定ブロンズ技術者
【入門】3時間でアプリ公開！
ゼロからのプログラミングRails講座
- 受講生3,000名越えの登竜門 -

1Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
構成
1. Introduction ( 10分)
自己紹介、本日のゴール
2. 開発に必要な初期知識 ( 50分)
システム開発、開発作業、開発環境、開発言語、Ruby on Rails、作
業方法の基礎
3. 実践ワーク (110分)
お試しアプリケーションの開発、Gitでバージョン管理、Herokuでネッ
ト公開
4. スキルアップのコツ ( 10分)
エンジニアになる3つの方法
5. Appendix
お薦めの学習サイト、書籍、ツール等

私たちのミッション
すべての人が、テクノロジーを武器にして活躍できる社会を
つくる
対面講義
& ネット
Rails基礎
チーム開発
• Ruby(Rails)
• PostgreSQL
• HTML
• CSS(Bootstrap)
WEBエンジニア
経験ゼロ
デザイン基礎
SNS機能
受託開発
グループタスク機能

3Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved.
Introduction
野呂浩良
ゼロからのプログラミングを2回経験。
MBAエンジニア講師。リクルートやワークスアプリケーションズな
ど異業種・異職種への転職を4度経験。あらゆる時間を計測し、未
経験の職務でゼロから短期間に成果をあげる独自の生産性向上
手法を確立。
ワークスアプリケーションズの特待生制度「問題解決能力発掘プ
ログラム」の突破経験と1年間の独立起業過程でエンジニア人材
の不足を痛感した原体験から、実務経験を得てエンジニアになる
ためのプログラミングスクール「DIVE INTO CODE」を創業。

キャリア
10年以上、非エンジニア社会人。異業種・異職種での転職と
経営大学院を経て2015年4月に起業。
1980年誕生（松坂世代）
2003年株式会社すみや【接客販売】
2006年株式会社リクルート【法人営業】
2009年株式会社ワークスアプリケーションズ【運用保守】
2012年グロービス経営大学院大学 MBA
2015年株式会社Dive into Code（創業）

プログラミングとの出会い
①問題解決能力発掘プログラム(2009年10月~2010年3月)
・ネットなし
・レクチャー禁止
・文献なし
・呼び出し＆指導入り
本
ネット
COBOL
DELPHI
ORACLE DB(SQL)
エンジニア
経験ゼロ
独力
COBOL
COBOL
DELPHI
DELPHI

②リーンスタートアップ(2014年4月~2014年10月)
・アイデアソン X回
・ハッカソン X回
・Startup Weekend 3回
・もくもく会 X回
本
ネット
300
アイデア
3
プラン
1
プラン
エンジニアメンバー
ゼロ
独力開発
独力開発
エンジニアが・・・

Webアプリケーション「ホメる×タスク管理（グループタスク管
理）システム」を独力で開発。
※開発作業期間
2014年8月下旬〜10月末

2014年11月6日。「Rails3技術者認定ブロンズ」に一発合格！
Railsを本気で学びはじめて約2ヶ月半。

誰の？何の課題を？どう解決するのか？
プログラミング・スクールを開始
『自分ではカタチにできない』と思い込み、エンジニアを探す
という口実で前に進められずにいる非エンジニアの
まずカタチにすることでリーンスタートアップを行いたい・エン
ジニアとして働きたいという課題を
自力でプロトタイプを作成できるスキルを身につけることで解
決する。

本日のゴール
3つの状態に到達すること
1. 経験ゼロからの学習のコツを掴むことができている
2. Webアプリケーション開発の素養が身についている
3. モチベーションがグッと向上している

理想
Ruby/Ruby on Rails で開発されたサービス
できるようになること
● クックパッド https://cookpad.com/
● クラウドワークス https://crowdworks.jp/
● Misoca https://www.misoca.jp/
● AirBnb https://www.airbnb.jp/
● hulu http://www.hulu.jp/
● Github https://github.com/
等

クックパッド

クラウドワークス

Misoca

AirBnB

Hulu

GitHub

開発に必要な
初期知識

全体像
システム開発の流れ
開発作業の流れ
開発環境とは
開発言語とは
Ruby on Railsとは
作業方法の基礎
システム開発の流れから、実作業のやり方まで幅広い知識
が求められる。
システム開発開発作業開発環境開発言語作業方法

開発の流れ
開発の流れは、現実で実現したい仕組みをコンピュータの仕
組みに近づけて設計・開発作業・テストする。
何が必要か？
要件定義
全体の構成は？
基本設計
画面の内容は？
詳細設計
開発作業
部分ごとに検証
単体テスト
構造ごとに検証
結合テスト
できたもの検証
システムテスト
※リーンスタートアップではテ
ストは重視しない本講座
現実世界コンピュータ内

開発作業の内訳本講座で使用するもの
1.開発環境の構築
　※初回のみ
■Cloud9 ★
□PCにVagrant + CentOSをインストール
□PCに直接インストール等
2.開発言語で内部構造をつくる
　(コーディング)
■Ruby (Ruby on Rails) ★
□PHP (CakePHP)
□Java 等
3.データを入れる箱をつくる
■PostgreSQL ★
□MySQL
□MongoDB 等
4.ブラウザ上のUIを描く
■CSS
■HTML
□jQuery 等
5.開発したソースコードを管理 ■Git ★
　(チーム開発用) □Bitbucket
　(チーム開発用) □Github 等
6.インターネット上に公開 ■heroku ★
□レンタルサーバ契約等
開発作業は6つに分かれる。

2つのクラウドサービスを活用すれば、無料でインターネット
公開までできる。
開発環境の構築
コーディング
開発したソース
コードを管理
インターネット上に
公開
Cloud9
Git
Heroku
ソースコード

開発環境とは
開発作業に必要な場所と道具を用意すること。
開発言語

開発環境とは
従来は PC を用意して複雑なインストール作業が必要だった
が、今やボタンひとつで可能に。
従来本講座
・ボタン１つでOK
わずか1分で完了！
Cloud9
・インストールするPCを用意
↓
・開発言語をインストール
↓
・フレームワークをインストール
↓
・データベース管理システムをインストール
↓
・バージョン管理システムをインストール
等
初めての時は3日はかかる…。

開発環境とは
Cloud9内には言語やツールが用意されているため、ブラウ
ザで開いて使うだけ。
フォルダビューワファイルビューワ
ターミナル

開発言語とは
人間にもコンピュータにもわかるコトバで、プログラムを構築
しコンピュータを動かすことができるもの。
Ruby PHP

開発言語とは
開発言語は60年前に生まれ、時代の潮流と共に様々な言語
が生まれた。Rubyは1995年に誕生。
※出典：ひつじTOWN「C言語あれこれ」

開発言語とは
世界中にある開発言語のうち、Rubyが唯一の日本産の開発
言語。 ※開発者は、まつもとゆきひろ氏

Ruby on Rails
Rubyは開発言語。Ruby on RailsはRubyで開発する際の
「型」となるフレームワーク。

Ruby on Rails
Basecamp創業者 David HeinemeierHansson氏によって、無駄な
時間を減らすために作られた。
DRY (Don't repeat yourself) CoC (Convention over Configuration)
“ぼくがやろうとしていることは、自分の
時間を浪費する時間を減らそうっていう
こと。どうでもいいことに時間を費やす
のを減らす。”
「同じことを繰り返さない」「設定よりも規約」
※出典：HRナビ「「10倍プログラマ」の神話、Ruby on Railsの生みの親が語った高い生産性のカギとは!?」

Ruby on Rails
Ruby / Ruby on Rails を選んだ理由（主観）。
1. エンジニアからの評判が良い
ルールが明確。初心者でも扱えて生産性が高いと尊敬するエンジ
ニアが推奨。
2. 信頼感と実績がある
個人的に模範にしている「クックパッド」で使われている。
3. エンジニア転職市場が盛況
スキルの需要が高く、起業資金が枯渇しても「月収30万円以上で雇
われ修行」をすることが可能。

Ruby on Rails
2013年創業のWebサービス企業ではPHPからRubyにリプ
レースをしたケースがある。
“2013年の創業時は、 PHPの方がエンジニアが多く採用がスムーズになると判
断したんですが、実際には、ここ数ヶ月間のスタートアップの採用環境と、20代
のエンジニアを中心にRuby使いが浸透してきている肌感覚があり、採用の観
点からもリプレイスに意味が出つつある。(実際 Wantedlyで100名以上のエンジ
ニアにあったけどcake使いはあまりいなく、Rails使いの方が多かった )”
“Ruby使いのフレームワークがRailsに集中しているので社外のリソースを巻き
込むにも使いやすい( PHPではcake以外も意外と多い )”
“ここ数年でRailsの周辺サービスがかなり充実してきた。特にうちはチーム開
発のためにあるCIサービスを導入しようと考えているんだけど、 Git+Rails限定
のサービスが多く、愕然としました。”
言語は数年おきにリプレイス。エンジニアにとって新しい言語をキャッチ
アップするのは、人間が空気を吸うくらいに当たり前。
創業者CEO
医療系メディア運営会社

Ruby on Rails
Ruby on Rails で作られたWebサービスの例
「ストアカ」さん

Ruby on Rails
インターネット
ブラウザを通して通信が流れる。通信先のコンピュータから
処理結果が返る。ブラウザ上に画面が表示される。
http通信リクエスト
GET, PUT, DELETE …
レスポンス
HTML, images …
URL

Ruby on Rails
画面表示内部処理データ管理
HTTPServer
Controller
View
Model
データベース管
理システム内
Database
コンピュータがhttp通信を受け取り、役割に応じて処理が順
番に流れ、レスポンスとして返る。
リクエスト
GET
レスポンス
HTML
Router
URL
① ② ③ ④ ⑤
⑥⑦⑧⑨10

Ruby on Rails
各役割は所定のフォルダ内にファイルとして存在。その中に
開発言語 Ruby が書かれている。
httpServer
Controller
View
Model
データベース
管理システム
Router
役割別のフォルダ構造。
ファイル内に Ruby が書か
れている。
Cloud9内概念図

httpServer
def index
@blogs = Blog.all
end
<% @blogs.each do |blog| %>
<% end %>
class Blog <
ActiveRecord::Base
end
http通信とURLの組み合せから処理を流す先を判定。C→
(M→DB→M→C)→V→Cと通信が流れる。
/config
/routes.rb
URL
/blogs
http
GET
blogs#index
/controllers/blogs_c
ontroller.rb
/models/
blog.rb
PostgreSQL
blogsテーブル
/views/
blogs/index.html.erb
h1 {
}
/assets/stylesheets/
blogs.css.scss
“O/Rマッパー”
Blog.all
↓
RubyからSQLに変換
↓
SELECT * FROM blogs;
システム開発開発作業開発環境開発言語作業方法Ruby on Rails

httpServer
Copyright © 2015-2016 Dive into Code Corp. All Rights Reserved.
オモテは、HTML, CSS。ウラはRuby, SQL。Rails はhttpリク
エストからレスポンスまでの流れをつくる。
/config
/routes.rb
URL
/blogs
http
GET
blogs#inde
x
/controllers/blogs_c
ontroller.rb
/models/
blog.rb
PostgreSQL
blogsテーブル
/views/
blogs/index.html.erb
/assets/stylesheets/
blogs.css.scss
システム開発開発作業開発環境開発言語作業方法Ruby on Rails

Ruby on Rails
画面表示内部処理データ管理
HTTPServer
Controller
View
Model
データベース管
理システム内
Database
Rails を理解する第一歩は、http リクエストからレスポンスま
での流れを理解すること。
リクエスト
GET
レスポンス
HTML
Router
URL
① ② ③ ④ ⑤
⑥⑦⑧⑨10

キーボードを使いターミナルを操作する。ターミナルは、文字
でコンピュータを操作するための窓口。
ターミナル

ターミナルは、コンピュータに対して一行（プロンプト）につき
一回だけ命令ができる。
プロンプト
現在いるディレクトリ(=フォルダ)
コンピュータをキーボードで操作することに慣れましょう。

コマンドを入力してエンターで実行する。一度に複数の命令
はできず、一行ずつ進める。
コマンド「cd achieve」で、achieveフォルダ
に移動
※マウスで画面操作してフォルダを開くのと同様の意味合い

コマンド「cd ..」で、achieveフォルダの上の
階層のcodeフォルダに移動

元のcodeフォルダに戻った

ターミナル操作の2つの注意点。
注意点① 半角文字で操作する
注意点② どこのフォルダ上にいるかを把握する

マニュアルを見る。コマンドをコピーする。ターミナルに入力
する。エンターで実行する。
①マニュアルを見る ②コマンドを作成する ③ターミナルに入力する
コピー＆ペースト
編集してコマンドを完成
※メモ帳では半角”や’が全角に自動
変換されることがあるため使用禁止

実践ワーク

実践ワーク
https://diveintocode.jp/diver/

実践ワーク
3ステップで、Webアプリケーションをネット公開！
【STEP0】Cloud9で開発環境を構築
https://diveintocode.jp/diver/seminar_documents/rails00
【STEP1】お試しアプリケーションの開発
【STEP2】Gitでバージョン管理
【STEP3】Herokuでネット公開(初回)
① ② ③
1
2
3
0

実践ワーク
【図解】3ステップ
① ② ③
0 Cloud9
C
V
M
DB
HerokuHTTPServer
C
V
M
DB
Git内(ファイル)に記録
C
V
M
1
2
3
HTTPServer

実践ワーク
Cloud9で開発環境を構築
Cloud9を使う3つのメリット
1. 開発用コンピュータを無料で一台ゲットできる
2. 開発言語やツールのインストールが一瞬でできる
3. ネットがつながればどこからでも作業ができる
① ② ③
0

Cloud9で開発環境を構築
実践ワーク ① ② ③
0
Cloud9 1ワークスペース
インストール：Ruby, PostgreSQL, Git, Heroku Toolbelt …
ワークスペースの新規作成
アカウント登録
インストール：Ruby on Rails 5
PostgreSQLを起動

実践ワーク
Cloud9でお試しアプリケーションの開発
“Railsの魔法“を使いアッと言う間に開発する
・「rails new 名前」でアプリケーションの“骨組み”、”電気信号の流れ”を
一瞬でつくることができる
・「rails g scaffold 画面名」で指定のURLでアクセスできる画面一式を一
瞬でつくることができる
① ② ③
1

実践ワーク
Cloud9でお試しアプリケーションの開発
① ② ③
1
Cloud9
HTTP
Server
C
V
M
DB
rails new achieve -d postgresql
rails g scaffold Blog title:string content:text
rake db:create db:migrate
rails s -b $IP -p $PORT
cd achieve

実践ワーク
Cloud9でGitでバージョン管理
Gitを使う2つのメリット
1. フォルダやファイル、その内容を全て覚えさせることがで
きる
2. 覚えた内容をコマンドひとつでHerokuへ送信できる
① ② ③
2

Cloud9
実践ワーク
Cloud9でGitでバージョン管理
① ② ③
2
HTTPServer
C
V
M
DB
Git内(ファイル)に記録
フォルダ、ファイル
C
V
M
git add .
git commit –m “メッセージ”
git init
git config –global 〜
git loggit status

実践ワーク
Cloud9でHerokuでネット公開（初回）
Herokuを使う3つのメリット
1. アプリケーションをインターネット上に公開できる
2. いくつでも無料でアプリケーションを公開できる
3. インストール作業は一切不要
① ② ③
3

Cloud9
Git
Heroku 新規ユーザ登録
実践ワーク
Cloud9でHerokuでネット公開（初回）
① ② ③
3
heroku login
HTTP
Server
C
V
M
DB
C
V
M
1APP
Git
git push heroku master HTTP
Server
C
V
M
DB
C
V
M
heroku create
heroku run rake db:migrate RAILS_ENV=production

実践ワーク
着陸!!(完了)
① ② ③

本日のゴール
3つの状態に到達することができましたか。
1. 経験ゼロからの学習のコツを掴むことができている
2. Webアプリケーション開発の素養が身についている
3. モチベーションがグッと向上している

スキルアップ
のコツ

1. “習うより慣れる”
手を動かさないと絶対に身につかない。
2. “時間制限を設ける”
30分以上つまづいたら抱え込まずに質問する。
3. “守破離の守からはじめる”
書籍や教材の写経（しゃきょう）をする。
スキルアップのコツ
プログラミング学習の三原則

3つの方法
独学
エンジニアになるための3つの方法
通学転職

独学
孤独。もやもやしても、だれも教えてくれない。時
間ばかりが過ぎ去っていく。

しかし、お金は節約できる。時間よりもお金が大事なのか、はあなたの
価値観次第・・・。
独学

通学
お金がかかる。相場、10~30万円也。学ぶ「だけ」
なら高い買い物。

通学
しかし、聞ける相手がいるから早く進む。　聞ける相手
が教える専門家であれば良いが、はたして素人集団でないことを祈るばかり・・・。

転職
応募、筆記試験、面接・・・。受かる保証はない。
「あなた、実務経験あるの？」

Railsエンジニア求人
1,000社以上
確認済み

求人例（抜粋）

転職
「あなた、
実務経験あるの？」

【入門】3時間でアプリ公開！ゼロからのプログラミングRails講座

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a 【入門】3時間でアプリ公開！ゼロからのプログラミングRails講座

Similar a 【入門】3時間でアプリ公開！ゼロからのプログラミングRails講座 (20)

Más de DIVE INTO CODE Corp.

Más de DIVE INTO CODE Corp. (20)

Último

Último (7)

【入門】3時間でアプリ公開！ゼロからのプログラミングRails講座