アイデアを形にする ③3時間でアプリ公開！ゼロからのプログラミング講座

株式会社Dive into Code
代表取締役創始者 CEO 野呂浩良
Tel 03-5459-1808
info@diveintocode.jp
https://diveintocode.jp/
アイデアを形にする
- ③3時間でアプリ公開！ゼロからのプログラミング講座 -
スタートアップスキルカレッジ第３弾

2Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
この講座を受けると出来ること
アイデアを形にするためのプロダクトの開発の体験ができ、開発
するイメージや独学習得の道に踏み出せるようになる。

● 自己紹介
● 開発に必要な初期知識
● 実践ワーク
● 処理の流れ
● まとめ
● 質疑応答
● Appendix
構成

自己紹介
野呂浩良（のろ　ひろよし） MBAエンジニア講師。元非エンジニ
ア。29歳ではじめてプログラミングを経験。
1980年誕生
2003年東京農業大学農学部農学科（学士）卒業
「昆虫生態学研究室」
2003年株式会社すみや「接客販売」
2006年株式会社リクルート「法人営業」
2009年株式会社ワークスアプリケーションズ「コンサル」
2013年株式会社プロスタンダード「研修講師」
2014年グロービス経営大学院大学経営管理科（修士）卒業
2015年株式会社Dive into Code　創業
キャリアの軸は、未経験分野への挑戦

自己紹介
就職に強いプログラミングスクール DIVE INTO CODE。ビジョン
「テクノロジー教育のエコシステムを構築する」
フルタイム就業
正社員 / フリーランス
実課題を元にした研究
リモートワークで
アルバイト / 副業
政府と組み
地方＆海外IT人材育成
卒業後も学び続ける
永続勉強会
スクールで本気で学習
プログラミング初体験

日本全国 3,000人 + 海外（ベトナム、ルワンダ）でセミナー開催。
RubyWorld Conference 2016 登壇。
自己紹介
Ruby経験ゼロから 3年で 3,000人に直接講義

自己紹介
エンジニア育成事業だけでなく、起業家や新規事業担当者がテク
ノロジーを駆使出来るようになるための支援も行う。
https://hodai.globis.co.jp/courses/57a7e865

お一人 3分ほどでご紹介ください
1. お名前
2. お仕事内容
3. この講座に参加した目的
4. 形にしたいビジネスアイデア
自己紹介
同じテーマに興味をもつ人たちとの出会いはその後もご縁が続く
ことが多い。お互いに自己紹介をしませんか？

できるようになること
クックパッド

クラウドワークス

Misoca

AirBnB

Hulu

GitHub

簡易なブログ Webアプリケーションを開発できる。
http://dive-into-code.herokuapp.com/
できるようになること（本講座）

16Copyright © 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サーバデータベース管
理システム
バージョン管理
ツール
Puma
or
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通信をサーバが受け取り役割に
応じて処理が順番に流れ、レスポンスが返る。
HTTPServer
Controller
View
Model
データベース管
理システム内
Database
リクエスト
レスポンス
Router
URL
① ② ③ ④ ⑤
⑥⑦⑧⑨10

店舗オフィス
経験したことに例えて理解する。Railsの処理の流れは、銀行のオ
ペレーションの流れと一緒。
特別な場所
自動ドア
窓口担当
通帳
明細
出納係
金庫
入る
出る
案内役
○○銀行
××支店

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

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

Ruby on Rails
処理の流れを具体的に読み解くことができるようになると、自力で
開発ができるようになる。
httpServer
def index
@blogs = Blog.all
end
<% @blogs.each do |blog| %>
<% end %>
class Blog <
ActiveRecord::Base
end
/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;

Railsの処理の流れ
Ruby on Railsはリクエストからレスポンスまでの流れをつくる。そ
の中にHTML、CSS、JavaScript、Ruby等を実装する。
httpServer
/config
/routes.rb
URL
/blogs
http
GET
blogs#inde
x
ontroller.rb
/models/
blog.rb
PostgreSQL
blogsテーブル
/views/
blogs.css.scss

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

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

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

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

元のcodeフォルダに戻った

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

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

44Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved.
実践ワーク

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

実践ワーク
3ステップで、Webアプリケーションをネット公開！
【STEP0】Cloud9で開発環境を構築
https://diver.diveintocode.jp/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

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

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

Ruby on Rails
Webブラウザから送られたHTTP通信をサーバが受け取り役割に
応じて処理が順番に流れ、レスポンスが返る。
処理の流れ
HTTPServer
Controller
View
Model
理システム内
Database
リクエスト
レスポンス
Router
URL
① ② ③ ④ ⑤
⑥⑦⑧⑨10

処理の流れ
処理の流れを具体的に読み解くことができるようになると、自力で
開発ができるようになる。
httpServer
def index
@blogs = Blog.all
end
<% @blogs.each do |blog| %>
<% end %>
/views/
class Blog <
ActiveRecord::Base
end
/config
/routes.rb
URL
/blogs
http
GET
blogs#index
ontroller.rb
/models/
blog.rb
PostgreSQL
blogsテーブル
h1 {
}
blogs.css.scss
“O/Rマッパー”
Blog.all
↓
RubyからSQLに変換
↓
SELECT * FROM blogs;

処理の流れ
処理の流れを読み解くために必要な 6つの目を手に入れよう。
HTTPServer
Controller
View
Model
Database
Router
URL
検証ソースを表示 rake routes rails c rails db
① ② ③ ④ ⑤ ⑥
rails s
ログ

①ソースを表示
Webブラウザ上に表示されているHTMLソースコードを見る
処理の流れ

処理の流れ
②要素の検証>Networkタブ
Webブラウザ上のHTMLから発生したHTTP通信を見る

③rails s ログ
送受信しているHTTP通信をすべて見る
処理の流れ

処理の流れ
④rake routes
Railsアプリケーションのルーティング設定を見る

⑤rails c
RailsアプリケーションにRuby実行モードで接続する
処理の流れ
Rubyの実行が可能

処理の流れ
⑥rails db
RailsアプリケーションにSQL実行モードで接続する
SQLの実行が可能

処理の流れ
処理の流れを読み解くために必要な 6つの目を手に入れよう。
HTTPServer
Controller
View
Model
Database
Router
URL
検証ソースを表示 rake routes rails c rails db
① ② ③ ④ ⑤ ⑥
rails s
ログ

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

質疑応答
なんでもご質問ください。 ^ ^

Appendix
「ゼロから稼げるエンジニアになる3つのステップ」
RubyWorld Conference 2016 講演資料と動画を公開中！
https://youtu.be/bZ4Y1lNbI1o
http://2016.rubyworld-conf.org/files/program/B-3.pdf資料
動画

Appendix
サイモンシネック: 優れたリーダーはどうやって行動を促すか。
Golden Circle「Why? How? What? 」
https://www.ted.com/talks/simon_sinek_how_great_leaders_inspire_action?language=ja

アイデアを形にする ③3時間でアプリ公開！ゼロからのプログラミング講座

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a アイデアを形にする ③3時間でアプリ公開！ゼロからのプログラミング講座

Similar a アイデアを形にする ③3時間でアプリ公開！ゼロからのプログラミング講座 (20)

Más de DIVE INTO CODE Corp.

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

Último

Último (20)

アイデアを形にする ③3時間でアプリ公開！ゼロからのプログラミング講座