【サマリー版】Dive into Code DAY1「3時間でネット公開！Ruby on Railsキャッチアップ勉強会」

株式会社Dive into Code代表取締役 Founder CEO　野呂浩良

Rails3認定ブロンズ技術者

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

- Cloud9 版 -

1Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.

構成

1. Introduction ( 5分)

2. 開発に必要な初期知識 ( 50分)システム開発、開発作業、開発環境、開発言語、Ruby on Rails、作業方法の基礎

3. 実践ワーク (110分)お試しアプリケーションの開発、Gitでバージョン管理、Herokuでネット公開

4. スキルアップのコツ ( 10分)エンジニアになる3つの方法

5. Appendixお薦めの学習サイト、書籍、ツール等


Introduction

野呂浩良（のろ　ひろよし） MBAエンジニア講師。元非エンジニア。29歳ではじめてプログラミングを経験。

1980年誕生2003年東京農業大学農学部農学科（学士）卒業

「昆虫生態学研究室」

2003年株式会社すみや「接客販売」2006年株式会社リクルート「法人営業」2009年株式会社ワークスアプリケーションズ「コンサル」2013年株式会社プロスタンダード「研修講師」2014年グロービス経営大学院大学経営管理科（修士）卒業2015年株式会社Dive into Code　創業

キャリアの軸は、未経験分野への挑戦


Introduction

就職に強いプログラミングスクール DIVE INTO CODE。ビジョン「テクノロジー教育のエコシステムを構築する」

就業研究リモートワーク

政府

永続勉強会

本気で学習

初体験


日本全国 3,000人 + 海外（ベトナム、ルワンダ）でセミナー開催。RubyWorld Conference 2016 登壇。

Introduction

Ruby経験ゼロから 3年で 3,000人に直接講義


本日のゴール

3つの状態に到達すること

1. 経験ゼロからの学習のコツを掴むことができている

2. Webアプリケーション開発の素養が身についている

3. モチベーションがグッと向上している


できるようになること

クックパッド



クラウドワークス



Misoca



AirBnB



Hulu



GitHub

12Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved.

開発に必要な初期知識


全体像

システム開発の流れ

開発作業の流れ

開発環境とは

開発言語とは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」と「Heroku」を活用すれば、無料でインターネット公開までできる。

開発環境の構築コーディング

開発したソースコードを管理

インターネット上に公開

Cloud9

Git

Heroku


ソースコード


開発環境とは

開発環境とは、開発作業に必要な場所と道具のこと。


開発言語フレームワークWebサーバデータベース管理システム

バージョン管理ツール

Pumaor

Webrick


開発環境とは

従来は 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 on Rails で作られたWebサービスの例

「AirBnB」



インターネット

ブラウザを通して通信が流れる。通信先のコンピュータから処理結果が返る。ブラウザ上に画面が表示される。

リクエストGET, POST …

レスポンスHTML, images …

URL

Webブラウザ HTTP通信サーバ

Ruby on Rails システム開発開発作業開発環境開発言語作業方法


Ruby on Rails

Webブラウザから送られたHTTP通信をサーバが受け取り役割に応じて処理が順番に流れ、レスポンスが返る。

HTTP

Serve

r

Contro

ller

Vie

w

Mode

l

デー

タベ

ース

管理

シス

テム

内

Database

リクエスト

レスポンス

RouterURL

① ② ③ ④ ⑤

⑥⑦⑧⑨10



店舗オフィス

経験したことに例えて理解する。Railsの処理の流れは、銀行のオペレーションの流れと一緒。

特別な場所

自動

ドア

窓口

担当

通帳

明細

出納

係

金庫

入る

出る

案内

役

○○銀行××支店



Ruby on Rails

Ruby on Rails

Ruby on Rails を理解する第一歩は、http リクエストからレスポンスまでの流れを理解すること。

HTTP

Serve

r

Contro

ller

Vie

w

Mode

l

デー

タベ

ース

管理

シス

テム

内

Database

リクエスト

レスポンス

RouterURL

① ② ③ ④ ⑤

⑥⑦⑧⑨10



Ruby on Rails

各役割は所定のフォルダ内にファイルとして存在。その中に開発言語 Ruby が書かれている。

http Server

Controller

View

Model

デー

タベ

ース

管理

シス

テム

Router

役割別のフォルダ構造。ファイル内に Ruby が書かれている。

Codeanywhere内概念図



Ruby on Rails

処理の流れを具体的に読み解くことができるようになると、自力で開発ができるようになる。

http S

erve

r

def index

@blogs = Blog.all

end

<% @blogs.each do |blog| %><% end %>

class Blog < ActiveRecord::Baseend

/config

/ro

ute

s.rbURL/blogs

httpGET

blogs#

inde

x

/controllers/blogs_controller.rb

/models/blog.rb

PostgreSQLblogsテーブル

/views/blogs/index.html.erb

h1 {}

/assets/stylesheets/blogs.css.scss

“O/Rマッパー”Blog.all↓RubyからSQLに変換↓SELECT * FROM blogs;



Railsの処理の流れ

Ruby on Railsはリクエストからレスポンスまでの流れをつくる。そ

の中にHTML、CSS、JavaScript、Ruby等を実装する。

http S

erve

r

/config

/ro

ute

s.rbURL/blogs

httpGET

blogs#index

/controllers/blogs_controller.rb

/models/blog.rb

PostgreSQLblogsテーブル

/views/blogs/index.html.erb

/assets/stylesheets/blogs.css.scss




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

ターミナル




ターミナルは、コンピュータに対して一行（プロンプト）につき一回だけ命令ができる。

プロンプト

現在いるディレクトリ(=フォルダ)

コンピュータをキーボードで操作することに慣れましょう。




コマンドを入力してエンターで実行する。一度に複数の命令はできず、一行ずつ進める。

コマンド「cd achieve」で、achieveフォルダに移動

※マウスで画面操作してフォルダを開くのと同様の意味合い





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






元のcodeフォルダに戻った





ターミナル操作の2つの注意点。

注意点① 半角文字で操作する

注意点② どこのフォルダ上にいるかを把握する




マニュアルを見る。コマンドをコピーする。ターミナルに入力する。エンターで実行する。

①マニュアルを見る ②コマンドを作成する ③ターミナルに入力する

コピー＆ペースト

編集してコマンドを完成

※メモ帳では半角”や’が全角に自動変換されることがあるため使用禁止



実践ワーク


実践ワーク

https://diver.diveintocode.jp/

https://diver.diveintocode.jp/


実践ワーク

3ステップで、Webアプリケーションをネット公開！

【STEP0】Cloud9で開発環境を構築https://diver.diveintocode.jp/seminar_documents/rails00

【STEP1】お試しアプリケーションの開発https://diver.diveintocode.jp/seminar_documents/rails01

【STEP2】Gitでバージョン管理https://diver.diveintocode.jp/seminar_documents/rails02

【STEP3】Herokuでネット公開(初回)https://diver.diveintocode.jp/seminar_documents/rails03

① ② ③

1

2

3

0

https://diver.diveintocode.jp/seminar_documents/rails00





実践ワーク

【図解】3ステップ

① ② ③

0 Cloud9

C

V

M DB

Heroku

HTTP

Server

CV

M DB

Git内(ファイル)に記録

C

V

M

1

2

3

HTTP

Serve

r


実践ワーク

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

Serve

r

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

HTTP

Server

CV

M DB

Git内(ファイル)に記録フォルダ、ファイル

CV

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

S

erver

CV

M DB

CV

M

1APP

Git

git push heroku master

HTTP

S

erver

CV

M DB

CV

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つの方法

質問お金実務経験

独学 × ○ ×

通学 ○ × ×

転職 △ ○ ○


Appendix(付録)


教育メンターを募集中！

https://diveintocode.recruitment.jp/

長期インターンシップ、副業アルバイト大歓迎

https://diveintocode.recruitment.jp/


Appendix

「ゼロから稼げるエンジニアになる3つのステップ」RubyWorld Conference 2016 講演資料と動画を公開中！

https://youtu.be/bZ4Y1lNbI1o

http://2016.rubyworld-conf.org/files/program/B-3.pdf資料

動画

https://youtu.be/bZ4Y1lNbI1o

http://2016.rubyworld-conf.org/files/program/B-3.pdf


Appendix

Rails技術者認定試験対策合格への最短経路http://www.slideshare.net/norotime/rails-72567149

推薦学習コンテンツ Ruby/Ruby on Rails編http://www.slideshare.net/norotime/rubyruby-on-rails

社内勉強会・イベント共同開催のご案内https://www.slideshare.net/norotime/dive-into-code-65227224

DIVE INTO CODE会社概要と実績のご紹介https://www.slideshare.net/norotime/dive-into-code

受講体験記 Vol.1https://www.slideshare.net/norotime/dive-into-code-vol1

http://www.slideshare.net/norotime/rails-72567149

http://www.slideshare.net/norotime/rubyruby-on-rails

https://www.slideshare.net/norotime/dive-into-code-65227224

https://www.slideshare.net/norotime/dive-into-code

https://www.slideshare.net/norotime/dive-into-code-vol1

Education

【サマリー版】Dive into Code DAY1「3時間でネット公開！Ruby on Railsキャッチアップ勉強会」