Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
株式会社Dive into Code
代表取締役 Founder CEO 野呂 浩良
Rails3認定ブロンズ技術者
【入門】3時間でアプリ公開!
ゼロからのプログラミングRails講座
- Cloud9 版 -
1Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
構成
1. Introduction ( 5分)
2. 開発に必要な初期知識 ( 50分)
システム開発、開発作業...
2Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Introduction
野呂 浩良(のろ ひろよし) MBAエンジニア講師。元 非エンジニ
ア。29歳ではじめて...
3Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Introduction
就職に強いプログラミングスクール DIVE INTO CODE。 ビジョン
「テクノロジ...
4Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
日本全国 3,000人 + 海外(ベトナム、ルワンダ)でセミナー開催。
RubyWorld Conference ...
5Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
本日のゴール
3つの状態に到達すること
1. 経験ゼロからの学習のコツを掴むことができている
2. Webアプリケ...
6Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
できるようになること
クックパッド
7Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
できるようになること
クラウドワークス
8Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
できるようになること
Misoca
9Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
できるようになること
AirBnB
10Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
できるようになること
Hulu
11Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
できるようになること
GitHub
12Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved.
開発に...
13Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
全体像
システム開発の流れ
開発作業の流れ
開発環境とは
開発言語とは
Ruby on Railsとは
作業方法...
14Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
開発の流れ
開発の流れは、現実で実現したい仕組みをコンピュータの仕組み
に近づけて設計・開発作業・テストする。
...
15Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
開発作業の流れ
開発作業の内訳 本講座で使用するもの
1.開発環境の構築
 ※初回のみ
■Cloud9 ★
□P...
16Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
開発作業の流れ
2つのクラウドサービス「Cloud9」と「Heroku」を活用すれば、無料で
インターネット公開...
17Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
開発環境とは
開発環境とは、開発作業に必要な場所と道具のこと。
システム開発 開発作業 開発環境 開発言語 作業...
18Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
開発環境とは
従来は PC を用意して複雑なインストール作業が必要だった
が、今やボタンひとつで可能に。
従来 ...
19Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
開発環境とは
Cloud9内には言語やツールが用意されているため、ブラウ
ザで開いて使うだけ。
フォルダビューワ...
20Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
開発言語とは
人間にもコンピュータにもわかるコトバで、プログラムを構築
しコンピュータを動かすことができるもの。...
21Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
開発言語とは
開発言語は60年前に生まれ、時代の潮流と共に様々な言語
が生まれた。Rubyは1995年に誕生。
...
22Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
開発言語とは
世界中にある開発言語のうち、Rubyが唯一の日本産の開発
言語。 ※開発者は、まつもとゆきひろ氏
...
23Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Ruby on Rails
Rubyは開発言語。Ruby on RailsはRubyで開発する際の「型」とな
る...
24Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Ruby on Rails
Basecamp創業者 David HeinemeierHansson氏によって、無...
25Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Ruby on Rails
Ruby on Rails で作られたWebサービスの例
「AirBnB」
システム...
26Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
インターネット
ブラウザを通して通信が流れる。通信先のコンピュータから処理結
果が返る。ブラウザ上に画面が表示さ...
27Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Ruby on Rails
Webブラウザから送られたHTTP通信をサーバが受け取り役割に
応じて処理が順番に流...
28Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
店舗オフィス
経験したことに例えて理解する。Railsの処理の流れは、銀行のオ
ペレーションの流れと一緒。
特別...
29Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Ruby on Rails
Ruby on Rails
Ruby on Rails を理解する第一歩は、http...
30Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Ruby on Rails
各役割は所定のフォルダ内にファイルとして存在。その中に開発
言語 Ruby が書かれ...
31Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Ruby on Rails
処理の流れを具体的に読み解くことができるようになると、自力で
開発ができるようになる...
32Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Railsの処理の流れ
Ruby on Railsはリクエストからレスポンスまでの流れをつくる。そ
の中にHTM...
33Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
作業方法の基礎
キーボードを使いターミナルを操作する。ターミナルは、文字でコ
ンピュータを操作するための窓口。
...
34Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
作業方法の基礎
ターミナルは、コンピュータに対して一行(プロンプト)につき一回だ
け命令ができる。
プロンプト
...
35Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
作業方法の基礎
コマンドを入力してエンターで実行する。一度に複数の命令
はできず、一行ずつ進める。
コマンド「c...
36Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
作業方法の基礎
コマンドを入力してエンターで実行する。一度に複数の命令
はできず、一行ずつ進める。
コマンド「c...
37Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
作業方法の基礎
コマンドを入力してエンターで実行する。一度に複数の命令
はできず、一行ずつ進める。
元のcode...
38Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
作業方法の基礎
ターミナル操作の2つの注意点。
注意点① 半角文字で操作する
注意点② どこのフォルダ上にいるか...
39Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
作業方法の基礎
マニュアルを見る。コマンドをコピーする。ターミナルに入力
する。エンターで実行する。
①マニュア...
40Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved.
実践ワ...
41Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
実践ワーク
https://diver.diveintocode.jp/
42Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
実践ワーク
3ステップで、Webアプリケーションをネット公開!
【STEP0】Cloud9で開発環境を構築
ht...
43Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
実践ワーク
【図解】3ステップ
① ② ③
0 Cloud9
C
V
M
DB
HerokuHTTPServer...
44Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
実践ワーク
Cloud9で開発環境を構築
Cloud9を使う3つのメリット
1. 開発用コンピュータを無料で一台...
45Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Cloud9で開発環境を構築
実践ワーク ① ② ③
0
Cloud9 1ワークスペース
インストール:Ruby...
46Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
実践ワーク
Cloud9でお試しアプリケーションの開発
“Railsの魔法“を使いアッと言う間に開発する
・「r...
47Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
実践ワーク
Cloud9でお試しアプリケーションの開発
① ② ③
1
Cloud9
HTTP
Server
C...
48Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
実践ワーク
Cloud9でGitでバージョン管理
Gitを使う2つのメリット
1. フォルダやファイル、その内容...
49Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Cloud9
実践ワーク
Cloud9でGitでバージョン管理
① ② ③
2
HTTPServer
C
V
M...
50Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
実践ワーク
Cloud9でHerokuでネット公開(初回)
Herokuを使う3つのメリット
1. アプリケーシ...
51Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Cloud9
Git
Heroku 新規ユーザ登録
実践ワーク
Cloud9でHerokuでネット公開(初回)
...
52Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
実践ワーク
着陸!!(完了)
① ② ③
53Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
本日のゴール
3つの状態に到達することができましたか。
1. 経験ゼロからの学習のコツを掴むことができている
2...
54Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved.
スキル...
55Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved.
たった...
56Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
1. “習うより慣れる”
手を動かさないと絶対に身につかない。
2. “時間制限を設ける”
30分以上つまづいた...
57Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
3つの方法
独学
エンジニアになるための3つの方法
通学 転職
58Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
独学
孤独。もやもやしても、だれも教えてくれない。時
間ばかりが過ぎ去っていく。
59Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
しかし、お金は節約できる。 時間よりもお金が大事なのか、はあなたの
価値観次第・・・。
独学
60Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
通学
お金がかかる。相場、10~30万円也。学ぶ「だけ」
なら高い買い物。
61Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
通学
しかし、聞ける相手がいるから早く進む。 聞ける相手
が教える専門家であれば良いが、はたして素人集団でないこ...
62Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
転職
応募、筆記試験、面接・・・。受かる保証はない。
「あなた、実務経験あるの?」
63Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Railsエンジニア求人
1,000社以上
確認済み
64Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
求人例(抜粋)
65Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
転職
「あなた、
実務経験あるの?」
66Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
転職
運良くポテンシャル採用されても・・・
それ、ググった!?
67Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
3つの方法
質問 お金 実務経験
独学 × ○ ×
通学 ○ × ×
転職 △ ○ ○
68Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved.
App...
69Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
教育メンターを募集中!
https://diveintocode.recruitment.jp/
長期インターン...
70Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Appendix
「ゼロから稼げるエンジニアになる3つのステップ」
RubyWorld Conference 2...
71Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.
Appendix
Rails技術者認定試験対策 合格への最短経路
http://www.slideshare.n...
Upcoming SlideShare
Loading in …5
×

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

64,202 views

Published on

3,000名が受講したRailsの登竜門講座。経験ゼロでもインターネット上に自作のWebアプリケーションを公開することができます!

本セミナーの講義動画と手順は、どなたでもご覧いただけます。

講義動画
https://www.facebook.com/diveintocode.jp/videos/861168880688236/

手順
https://diveintocode.jp/diver/seminar_documents


就活に強いプログラミングスクール「DIVE INTO CODE(ダイブ・イントゥ・コード)」

★ホームページ : https://diveintocode.jp/
★電話番号 : 03-5459-1808 10:00-22:00まで営業中!!(木曜休業)

人材紹介会社と連携した、本気のカリキュラムと手厚いサポートで、わずか6ヶ月でRailsエンジニアに転職することをご支援しております。

ご入校の無料説明会を開催しております。お気軽にお電話ください。

Published in: Education
  • Be the first to comment

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

  1. 1. 株式会社Dive into Code 代表取締役 Founder CEO 野呂 浩良 Rails3認定ブロンズ技術者 【入門】3時間でアプリ公開! ゼロからのプログラミングRails講座 - Cloud9 版 -
  2. 2. 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 お薦めの学習サイト、書籍、ツール等
  3. 3. 2Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. Introduction 野呂 浩良(のろ ひろよし) MBAエンジニア講師。元 非エンジニ ア。29歳ではじめてプログラミングを経験。 1980年 誕生 2003年 東京農業大学 農学部農学科(学士)卒業 「昆虫生態学研究室」 2003年 株式会社すみや 「接客販売」 2006年 株式会社リクルート 「法人営業」 2009年 株式会社ワークスアプリケーションズ 「コンサル」 2013年 株式会社プロスタンダード 「研修講師」 2014年 グロービス経営大学院大学 経営管理科(修士)卒業 2015年 株式会社Dive into Code 創業 キャリアの軸は、未経験分野への挑戦
  4. 4. 3Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. Introduction 就職に強いプログラミングスクール DIVE INTO CODE。 ビジョン 「テクノロジー教育のエコシステムを構築する」 就業 研究リモートワーク 政府 永続 勉強会 本気で学習 初体験
  5. 5. 4Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 日本全国 3,000人 + 海外(ベトナム、ルワンダ)でセミナー開催。 RubyWorld Conference 2016 登壇。 Introduction Ruby経験ゼロから 3年で 3,000人 に直接講義
  6. 6. 5Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 本日のゴール 3つの状態に到達すること 1. 経験ゼロからの学習のコツを掴むことができている 2. Webアプリケーション開発の素養が身についている 3. モチベーションがグッと向上している
  7. 7. 6Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. できるようになること クックパッド
  8. 8. 7Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. できるようになること クラウドワークス
  9. 9. 8Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. できるようになること Misoca
  10. 10. 9Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. できるようになること AirBnB
  11. 11. 10Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. できるようになること Hulu
  12. 12. 11Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. できるようになること GitHub
  13. 13. 12Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved. 開発に必要な 初期知識
  14. 14. 13Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 全体像 システム開発の流れ 開発作業の流れ 開発環境とは 開発言語とは Ruby on Railsとは 作業方法の基礎 システム開発の流れから、実作業のやり方まで幅広い知識が求 められる。 システム開発 開発作業 開発環境 開発言語 作業方法
  15. 15. 14Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 開発の流れ 開発の流れは、現実で実現したい仕組みをコンピュータの仕組み に近づけて設計・開発作業・テストする。 何が必要か? 要件定義 全体の構成は? 基本設計 画面の内容は? 詳細設計 開発作業 部分ごとに検証 単体テスト 構造ごとに検証 結合テスト できたもの検証 システムテスト ※リーンスタートアップではテ ストは重視しない本講座 現実世界コンピュータ内 システム開発 開発作業 開発環境 開発言語 作業方法
  16. 16. 15Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 開発作業の流れ 開発作業の内訳 本講座で使用するもの 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つに分かれる。 システム開発 開発作業 開発環境 開発言語 作業方法
  17. 17. 16Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 開発作業の流れ 2つのクラウドサービス「Cloud9」と「Heroku」を活用すれば、無料で インターネット公開までできる。 開発環境の構築 コーディング 開発したソース コードを管理 インターネット上に 公開 Cloud9 Git Heroku システム開発 開発作業 開発環境 開発言語 作業方法 ソースコード
  18. 18. 17Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 開発環境とは 開発環境とは、開発作業に必要な場所と道具のこと。 システム開発 開発作業 開発環境 開発言語 作業方法 開発言語フレームワークWebサーバ データベース管 理システム バージョン管理 ツール Puma or Webrick
  19. 19. 18Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 開発環境とは 従来は PC を用意して複雑なインストール作業が必要だった が、今やボタンひとつで可能に。 従来 本講座 ・ボタン1つでOK わずか1分で完了! システム開発 開発作業 開発環境 開発言語 作業方法 Cloud9 ・インストールするPCを用意 ↓ ・開発言語をインストール ↓ ・フレームワークをインストール ↓ ・データベース管理システムをインストール ↓ ・バージョン管理システムをインストール 等 初めての時は3日はかかる…。
  20. 20. 19Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 開発環境とは Cloud9内には言語やツールが用意されているため、ブラウ ザで開いて使うだけ。 フォルダビューワ ファイルビューワ ターミナル システム開発 開発作業 開発環境 開発言語 作業方法
  21. 21. 20Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 開発言語とは 人間にもコンピュータにもわかるコトバで、プログラムを構築 しコンピュータを動かすことができるもの。 Ruby PHP システム開発 開発作業 開発環境 開発言語 作業方法
  22. 22. 21Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 開発言語とは 開発言語は60年前に生まれ、時代の潮流と共に様々な言語 が生まれた。Rubyは1995年に誕生。 ※出典:ひつじTOWN「C言語あれこれ」 システム開発 開発作業 開発環境 開発言語 作業方法
  23. 23. 22Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 開発言語とは 世界中にある開発言語のうち、Rubyが唯一の日本産の開発 言語。 ※開発者は、まつもとゆきひろ氏 システム開発 開発作業 開発環境 開発言語 作業方法
  24. 24. 23Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. Ruby on Rails Rubyは開発言語。Ruby on RailsはRubyで開発する際の「型」とな るフレームワーク。 システム開発 開発作業 開発環境 開発言語 作業方法
  25. 25. 24Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. Ruby on Rails Basecamp創業者 David HeinemeierHansson氏によって、無駄な 時間を減らすために作られた。 DRY (Don't repeat yourself) CoC (Convention over Configuration) “ぼくがやろうとしていることは、自分の 時間を浪費する時間を減らそうっていう こと。どうでもいいことに時間を費やす のを減らす。” 「同じことを繰り返さない」 「設定よりも規約」 ※出典:HRナビ「「10倍プログラマ」の神話、Ruby on Railsの生みの親が語った高い生産性のカギとは!?」 システム開発 開発作業 開発環境 開発言語 作業方法
  26. 26. 25Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. Ruby on Rails Ruby on Rails で作られたWebサービスの例 「AirBnB」 システム開発 開発作業 開発環境 開発言語 作業方法
  27. 27. 26Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. インターネット ブラウザを通して通信が流れる。通信先のコンピュータから処理結 果が返る。ブラウザ上に画面が表示される。 リクエスト GET, POST … レスポンス HTML, images … URL Webブラウザ HTTP通信 サーバ Ruby on Rails システム開発 開発作業 開発環境 開発言語 作業方法
  28. 28. 27Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. Ruby on Rails Webブラウザから送られたHTTP通信をサーバが受け取り役割に 応じて処理が順番に流れ、レスポンスが返る。 HTTPServer Controller View Model データベース管 理システム内 Database リクエスト レスポンス Router URL ① ② ③ ④ ⑤ ⑥⑦⑧⑨10 Ruby on Rails システム開発 開発作業 開発環境 開発言語 作業方法
  29. 29. 28Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 店舗オフィス 経験したことに例えて理解する。Railsの処理の流れは、銀行のオ ペレーションの流れと一緒。 特別な場所 自動ドア 窓口担当 通帳 明細 出納係 金庫 入る 出る 案内役 ○○銀行 ××支店 Ruby on Rails システム開発 開発作業 開発環境 開発言語 作業方法
  30. 30. 29Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. Ruby on Rails Ruby on Rails Ruby on Rails を理解する第一歩は、http リクエストからレスポン スまでの流れを理解すること。 HTTPServer Controller View Model データベース管 理システム内 Database リクエスト レスポンス Router URL ① ② ③ ④ ⑤ ⑥⑦⑧⑨10 システム開発 開発作業 開発環境 開発言語 作業方法
  31. 31. 30Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. Ruby on Rails 各役割は所定のフォルダ内にファイルとして存在。その中に開発 言語 Ruby が書かれている。 httpServer Controller View Model データベース 管理システム Router 役割別のフォルダ構造。 ファイル内に Ruby が書か れている。 Codeanywhere内概念図 システム開発 開発作業 開発環境 開発言語 作業方法
  32. 32. 31Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 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; システム開発 開発作業 開発環境 開発言語 作業方法
  33. 33. 32Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. Railsの処理の流れ Ruby on Railsはリクエストからレスポンスまでの流れをつくる。そ の中にHTML、CSS、JavaScript、Ruby等を実装する。 httpServer /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 システム開発 開発作業 開発環境 開発言語 作業方法
  34. 34. 33Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 作業方法の基礎 キーボードを使いターミナルを操作する。ターミナルは、文字でコ ンピュータを操作するための窓口。 ターミナル システム開発 開発作業 開発環境 開発言語 作業方法
  35. 35. 34Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 作業方法の基礎 ターミナルは、コンピュータに対して一行(プロンプト)につき一回だ け命令ができる。 プロンプト 現在いるディレクトリ(=フォルダ) コンピュータをキーボードで操作することに慣れましょう。 システム開発 開発作業 開発環境 開発言語 作業方法
  36. 36. 35Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 作業方法の基礎 コマンドを入力してエンターで実行する。一度に複数の命令 はできず、一行ずつ進める。 コマンド「cd achieve」で、achieveフォルダ に移動 ※マウスで画面操作してフォルダを開くのと同様の意味合い システム開発 開発作業 開発環境 開発言語 作業方法
  37. 37. 36Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 作業方法の基礎 コマンドを入力してエンターで実行する。一度に複数の命令 はできず、一行ずつ進める。 コマンド「cd ..」で、achieveフォルダの上の 階層のcodeフォルダに移動 ※マウスで画面操作してフォルダを開くのと同様の意味合い システム開発 開発作業 開発環境 開発言語 作業方法
  38. 38. 37Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 作業方法の基礎 コマンドを入力してエンターで実行する。一度に複数の命令 はできず、一行ずつ進める。 元のcodeフォルダに戻った ※マウスで画面操作してフォルダを開くのと同様の意味合い システム開発 開発作業 開発環境 開発言語 作業方法
  39. 39. 38Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 作業方法の基礎 ターミナル操作の2つの注意点。 注意点① 半角文字で操作する 注意点② どこのフォルダ上にいるかを把握する システム開発 開発作業 開発環境 開発言語 作業方法
  40. 40. 39Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 作業方法の基礎 マニュアルを見る。コマンドをコピーする。ターミナルに入力 する。エンターで実行する。 ①マニュアルを見る ②コマンドを作成する ③ターミナルに入力する コピー&ペースト 編集してコマンドを完成 ※メモ帳では半角”や’が全角に自動 変換されることがあるため 使用禁止 システム開発 開発作業 開発環境 開発言語 作業方法
  41. 41. 40Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved. 実践ワーク
  42. 42. 41Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 実践ワーク https://diver.diveintocode.jp/
  43. 43. 42Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 実践ワーク 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
  44. 44. 43Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 実践ワーク 【図解】3ステップ ① ② ③ 0 Cloud9 C V M DB HerokuHTTPServer C V M DB Git内(ファイル)に記録 C V M 1 2 3 HTTPServer
  45. 45. 44Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 実践ワーク Cloud9で開発環境を構築 Cloud9を使う3つのメリット 1. 開発用コンピュータを無料で一台ゲットできる 2. 開発言語やツールのインストールが一瞬でできる 3. ネットがつながればどこからでも作業ができる ① ② ③ 0
  46. 46. 45Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. Cloud9で開発環境を構築 実践ワーク ① ② ③ 0 Cloud9 1ワークスペース インストール:Ruby, PostgreSQL, Git, Heroku Toolbelt … ワークスペースの新規作成 アカウント登録 インストール:Ruby on Rails 5 PostgreSQLを起動
  47. 47. 46Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 実践ワーク Cloud9でお試しアプリケーションの開発 “Railsの魔法“を使いアッと言う間に開発する ・「rails new 名前」でアプリケーションの“骨組み”、”電気信号の流れ”を 一瞬でつくることができる ・「rails g scaffold 画面名」で指定のURLでアクセスできる画面一式を一 瞬でつくることができる ① ② ③ 1
  48. 48. 47Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 実践ワーク 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
  49. 49. 48Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 実践ワーク Cloud9でGitでバージョン管理 Gitを使う2つのメリット 1. フォルダやファイル、その内容を全て覚えさせることがで きる 2. 覚えた内容をコマンドひとつでHerokuへ送信できる ① ② ③ 2
  50. 50. 49Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 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
  51. 51. 50Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 実践ワーク Cloud9でHerokuでネット公開(初回) Herokuを使う3つのメリット 1. アプリケーションをインターネット上に公開できる 2. いくつでも無料でアプリケーションを公開できる 3. インストール作業は一切不要 ① ② ③ 3
  52. 52. 51Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 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
  53. 53. 52Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 実践ワーク 着陸!!(完了) ① ② ③
  54. 54. 53Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 本日のゴール 3つの状態に到達することができましたか。 1. 経験ゼロからの学習のコツを掴むことができている 2. Webアプリケーション開発の素養が身についている 3. モチベーションがグッと向上している
  55. 55. 54Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved. スキルアップ のコツ
  56. 56. 55Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved. たったひとつの カギ
  57. 57. 56Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 1. “習うより慣れる” 手を動かさないと絶対に身につかない。 2. “時間制限を設ける” 30分以上つまづいたら抱え込まずに質問する。 3. “守破離の守からはじめる” 書籍や教材の写経(しゃきょう)をする。 スキルアップのコツ プログラミング学習の三原則
  58. 58. 57Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 3つの方法 独学 エンジニアになるための3つの方法 通学 転職
  59. 59. 58Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 独学 孤独。もやもやしても、だれも教えてくれない。時 間ばかりが過ぎ去っていく。
  60. 60. 59Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. しかし、お金は節約できる。 時間よりもお金が大事なのか、はあなたの 価値観次第・・・。 独学
  61. 61. 60Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 通学 お金がかかる。相場、10~30万円也。学ぶ「だけ」 なら高い買い物。
  62. 62. 61Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 通学 しかし、聞ける相手がいるから早く進む。 聞ける相手 が教える専門家であれば良いが、はたして素人集団でないことを祈るばかり・・・。
  63. 63. 62Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 転職 応募、筆記試験、面接・・・。受かる保証はない。 「あなた、実務経験あるの?」
  64. 64. 63Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. Railsエンジニア求人 1,000社以上 確認済み
  65. 65. 64Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 求人例(抜粋)
  66. 66. 65Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 転職 「あなた、 実務経験あるの?」
  67. 67. 66Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 転職 運良くポテンシャル採用されても・・・ それ、ググった!?
  68. 68. 67Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 3つの方法 質問 お金 実務経験 独学 × ○ × 通学 ○ × × 転職 △ ○ ○
  69. 69. 68Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved.Copyright © 2015 TimeShift Corp. All Rights Reserved. Appendix (付録)
  70. 70. 69Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 教育メンターを募集中! https://diveintocode.recruitment.jp/ 長期インターンシップ、副業アルバイト大歓迎
  71. 71. 70Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. Appendix 「ゼロから稼げるエンジニアになる3つのステップ」 RubyWorld Conference 2016 講演資料と動画を公開中! https://youtu.be/bZ4Y1lNbI1o http://2016.rubyworld-conf.org/files/program/B-3.pdf資料 動画
  72. 72. 71Copyright © 2015-2017 Dive into Code Corp. All Rights Reserved. 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.1 https://www.slideshare.net/norotime/dive-into-code-vol1

×