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

代表講師野呂浩良 Tel 03-5459-1808 【入門】3時間でアプリ公開！ゼロからのプログラミングRails講座 - Codeanywhere 版
-

1 Copyright © DIVE INTO CODE Corp. All Rights Reserved.
構成 1. 自己紹介 2. 開発に必要な初期知識システム開発、開発作業、開発環境、開発言語、Ruby on Rails、作業方法の基礎 3. 実践ワークお試しアプリケーションの開発、Gitでバージョン管理、Herokuでネット公開 4. スキルアップのコツエンジニアになる3つの方法 5. Appendix オススメの学習教材

自己紹介 29歳ではじめてプログラミングを経験。現在、Web/機械学習エンジニアを輩出するプログラミングスクールの代表講師。 1980年誕生 22歳東京農業大学農学部農学科（学士）卒業「昆虫生態学研究室」 22歳すみや「接客販売」 25歳リクルート「法人営業」 29歳ワークスアプリケーションズ「ITコンサル」 33歳プロスタンダード「研修講師」 34歳グロービス経営大学院大学経営管理科（修士）卒業 35歳 DIVE INTO CODE　創業キャリアの軸は、未経験分野への挑戦

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

Webエンジニア講師として日本全国、ベトナムやルワンダでも英語で開催。プログラミングを学びたい人は世界中にいる。自己紹介誰でも過去に関係なく挑戦できる社会をつくりたい

本日のゴール Webアプリケーションをゼロから開発してネット公開までを体験し、自力で学ぶキッカケを手に入れること。 http://dive-into-code.herokuapp.com/

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

できるようになることクラウドワークス

できるようになること Misoca

できるようになること AirBnB

できるようになること Hulu

できるようになること GitHub

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

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

開発作業の流れ開発作業の内訳本講座で使用するもの 1.開発環境の構築　※初回のみ ▪Codeanywhere ★ □Cloud9 □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つのクラウドサービス「Codeanywhere」と「Heroku」を活用すれば、無料でインターネット公開までできる。開発環境の構築コーディング開発したソースコードを管理インターネット上に公開 Codeanywhere Git Heroku ソースコード開発作業の流れシステム開発開発作業開発環境開発言語作業方法

開発環境とはシステム開発開発作業開発環境開発言語作業方法開発環境とは、開発作業に必要な場所と道具のこと。開発言語フレームワーク Webサーバデータベース管理システムバージョン管理ツール Puma

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

開発環境とは Codeanywhere内には言語やツールが用意されているため、ブラウザで開いて使うだけ。システム開発開発作業開発環境開発言語作業方法 folder viewer file viewer terminal

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

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

開発言語とは世界中にある開発言語のうち、Rubyが唯一の日本産の開発言語。 ※開発者は、まつもとゆきひろ氏システム開発開発作業開発環境開発言語作業方法

Ruby on Rails システム開発開発作業開発環境開発言語作業方法 Rubyは開発言語。Ruby on RailsはRubyで開発する際の「型」となるフレームワーク。

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

Ruby on Rails で開発されたWebサービスの例「Airbnb」 Ruby on Rails システム開発開発作業開発環境開発言語作業方法

インターネットブラウザを通して通信が流れる。通信先のコンピュータから処理結果が返る。ブラウザ上に画面が表示される。リクエスト GET, POST … レスポンス HTML, images … URL Webブラウザ HTTP通信サーバ Ruby on Rails システム開発開発作業開発環境開発言語作業方法

Webブラウザは、HTMLとCSS、JavaScriptを読み込みページを表示する。サーバは、計算やデータの格納を行う。 HTML（骨組み） + CSS（装飾） + JavaScript（動き）レスポンスリクエスト ①Webブラウザ ②HTTP通信 ③サーバ Ruby on Rails Ruby 　 + 　PostgreSQL Ruby on Rails システム開発開発作業開発環境開発言語作業方法

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 が書かれている。 Codeanywhere内概念図システム開発開発作業開発環境開発言語作業方法

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 システム開発開発作業開発環境開発言語作業方法

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

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

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

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

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

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

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

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

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

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

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

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

Codeanywhere 実践ワーク Gitでバージョン管理 ① ② ③ 2 HTTP Server C V M DB Git内(ファイル)に記録フォルダ、ファイル C V M git add . git commit –m “ ” git config 〜 git log git status

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

Codeanywhere Git Heroku 新規ユーザ登録実践ワーク 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 rails 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人材育成卒業後も学び続ける永続勉強会スクールで本気で学習プログラミング初体験 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講座

More Decks by Hiroyoshi NORO

Other Decks in Technology

Featured

Transcript