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

株式会社DIVE INTO CODE 教育メンター斉藤一起【入門】3時間でアプリ公開！ゼロからのプログラミングRails講座 - Cloud9
版 -

1 Copyright © 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 24歳で初めてプログラミングを経験。それまでは留学やカフェで働くなど、PCを使用する事はほとんどなかった。 • 1993年誕生 • 2011年高校卒業 • 2012年留学 • 2015年帰国 • 飲食店勤務 • 2017年 DIVE INTO CODE入社

Introduction DIVE INTO CODE は、「プロのエンジニアになるために挑戦する人が、チャンスをつかめる場をつくる」。就業研究リモートワーク政府永続勉強会本気で学習初体験

講師として日本全国、ベトナムやルワンダでも英語で開催。プログラミングを学びたい人は世界中にいる。 Introduction

本日のゴール Webアプリケーションをゼロから開発してネット公開までを体験し、自力で学ぶキッカケを手に入れること。 http://dive-into-code.herokuapp.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」と「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ブラウザは、HTMLとCSS、JavaScriptを読み込みページを表示する。サーバは、計算やデータの格納を行う。システム開発開発作業開発環境開発言語作業方法 HTML（骨組み） + CSS（装飾） + JavaScript（動き）レスポンスリクエスト ①Webブラウザ ②HTTP通信 ③サーバ Ruby on Rails Ruby 　 + 　PostgreSQL

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

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

Ruby on Rails Ruby on Rails Ruby on Rails を理解する第一歩は、http リクエストからレスポンスまでの流れを理解すること。 HTTP Server Controller View Model データベース管理システム内 Database リクエストレスポンス Router URL ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ ⑨ 10 システム開発開発作業開発環境開発言語作業方法

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

Ruby on Rails 処理の流れを具体的に読み解くことができるようになると、自力で開発ができるようになる。 http Server 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等を実装する。 http Server /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 システム開発開発作業開発環境開発言語作業方法

作業方法の基礎キーボードを使いターミナルを操作する。ターミナルは、文字でコンピュータを操作するための窓口。ターミナルシステム開発開発作業開発環境開発言語作業方法

作業方法の基礎ターミナルは、コンピュータに対して一行（プロンプト）につき一回だけ命令ができる。プロンプト現在いるディレクトリ(=フォルダ) コンピュータをキーボードで操作することに慣れましょう。システム開発開発作業開発環境開発言語作業方法

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

作業方法の基礎コマンドを入力してエンターで実行する。一度に複数の命令はできず、一行ずつ進める。コマンド「cd ..」で、achieveフォルダの上の階層のcodeフォルダに移動 ※マウスで画面操作してフォルダを開くのと同様の意味合いシステム開発開発作業開発環境開発言語作業方法

作業方法の基礎コマンドを入力してエンターで実行する。一度に複数の命令はできず、一行ずつ進める。元のcodeフォルダに戻った ※マウスで画面操作してフォルダを開くのと同様の意味合いシステム開発開発作業開発環境開発言語作業方法

作業方法の基礎ターミナル操作の2つの注意点。注意点① 半角文字で操作する注意点② どこのフォルダ上にいるかを把握するシステム開発開発作業開発環境開発言語作業方法

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

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

実践ワーク 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

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

実践ワーク 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 HTTP Server C V M DB Git内(ファイル)に記録フォルダ、ファイル C V M git add . git commit –m “メッセージ” git init git config –global 〜 git log git 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

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

本日のゴール自力で学ぶキッカケとなる体験になりましたか？ http://dive-into-code.herokuapp.com/

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

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

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

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

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

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

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

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

求人例（抜粋）

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

就職運良くポテンシャル採用されても・・・それ、ググった！？

3つの方法質問お金実務経験独学 × △ × 通学 ◦ × × 就職 △ ◦ ◦

たったひとつのカギ独学通学就職実務経験

たったひとつのカギ DIVE INTO CODE は、つくりました。質問お金模擬経験理想 ◦ ◦ △ すべてを得る道を

DIVE INTO CODE は、プロのエンジニアになるために挑戦する人が、チャンスをつかめる場をつくる。フルタイム就業正社員 / フリーランス実課題を元にした研究リモートワークでアルバイト / 副業政府と組み地方＆海外IT人材育成卒業後も学び続ける永続勉強会スクールで本気で学習プログラミング初体験エンジニアになるならDIVE INTO CODE プロのスタートラインに立つ https://diveintocode.jp/

オススメの学習教材はじめるなら Progate。腕試しなら Railsチュートリアル。 Progate Railsチュートリアル https://prog-8.com/languages/ruby https://prog-8.com/languages/rails5 https://railstutorial.jp/

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

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

Other Decks in Programming

Featured

Transcript