Web系エンジニアなんて簡単

41
Web系エンジニアなん て簡単 2015525() ビタミンの会 高橋 和樹 1webアプリケーションとは 2エンジニアの思考法 総括

Transcript of Web系エンジニアなんて簡単

Page 1: Web系エンジニアなんて簡単

Web系エンジニアなんて簡単2015年5月25日(月) ビタミンの会

高橋 和樹

• 1章 webアプリケーションとは

• 2章 エンジニアの思考法

• 総括

Page 2: Web系エンジニアなんて簡単

テモナ株式会社 テクニカル リーダー

高橋 和樹

社会人4年目 25歳

ITの世界で働きたくてインターン(PHP) 自分でサービスを作りたい 現職テモナ株式会社ではrailsに没頭 ⇒踊れるエンジニア

Facebook : https://www.facebook.com/kazukiiin

Page 3: Web系エンジニアなんて簡単

1章 webアプリケーションとは

• htmlとCSS

• rubyってなに?

• DBってなに?

• ruby on railsってなに?

• まとめ

Page 4: Web系エンジニアなんて簡単

htmlとCSS

Page 5: Web系エンジニアなんて簡単

htmlは場所、CSSは装飾

Page 6: Web系エンジニアなんて簡単

rubyってなに?

Page 7: Web系エンジニアなんて簡単

コンピューターの分かる言葉で指示を出す。

Page 8: Web系エンジニアなんて簡単

例えば注文を検索

Page 9: Web系エンジニアなんて簡単

Order.find(1)

Page 10: Web系エンジニアなんて簡単

検索した注文が存在しているかの確認

Page 11: Web系エンジニアなんて簡単

order = Order.find(1) order.blank? => true or false

Page 12: Web系エンジニアなんて簡単

存在していたら、削除する

Page 13: Web系エンジニアなんて簡単

order = Order.find(1) unless order.blank? order.destroy end

Page 14: Web系エンジニアなんて簡単

DBってなに?

Page 15: Web系エンジニアなんて簡単

データを保存する ⇒データベースに関しては、2章で勉強

しましょう!

Page 16: Web系エンジニアなんて簡単

ruby on railsってなに?

Page 17: Web系エンジニアなんて簡単

フレームワーク! マーケティングの3Cや4Pと一緒。

Page 18: Web系エンジニアなんて簡単

1章 Webアプリケーションとは まとめ

Page 19: Web系エンジニアなんて簡単

サービスを提供するには、サーバーとかもっと色々な知識が必要になるけれど、、、

Page 20: Web系エンジニアなんて簡単

『webページを表示する技術』に限った時に

要するにこれだけ!!

html,CSS,ruby,DB, ruby on rails

Page 21: Web系エンジニアなんて簡単

2章 エンジニアの思考法 ~データベースを理解する~• why?

• リレーショナル・データベースとは?

• DB設計を一緒にやってみる。

• まとめ

Page 22: Web系エンジニアなんて簡単

why?

• データベース設計は、すべての機能のベースになる!

• 少しでも理解があると、非エンジニアでも要件定義が出来る!(・・・・はず!)

Page 23: Web系エンジニアなんて簡単

リレーショナル・データベースとは?

Page 24: Web系エンジニアなんて簡単

関係データベース(かんけいデータベース、リレーショナルデータベース、英: relational database)は関係モデル(リレーショナルデータモデル)にもとづいて設計、開発されるデータベースである。

⇒関係モデルってなんだろう?

引用: http://ja.wikipedia.org/wiki/関係データベース

Page 25: Web系エンジニアなんて簡単

DB設計を一緒にやってみる。

Page 26: Web系エンジニアなんて簡単

お客様情報を定義する

Page 27: Web系エンジニアなんて簡単

id 名前 電話番号 住所

1 田中 “09099999999” 東京

2 高橋 “09088888888” 北海道

3 鈴木 “09077777777" 福岡

4 佐藤 “09066666666" 大阪

users

Page 28: Web系エンジニアなんて簡単

注文情報を定義する

Page 29: Web系エンジニアなんて簡単

id 注文番号 注文日 お支払い方法

1 E1201503110 2015-05-24 代引き

2 E1201504080 2015-05-25 クレジットカード

3 E1201504160 2015-05-23 NP後払い

4 E1201505190 2015-05-23 代引き

orders

Page 30: Web系エンジニアなんて簡単

誰が入れた注文?

Page 31: Web系エンジニアなんて簡単

id user_id 注文番号 注文日 お支払い方法

1 1E12015031

10 2015-05-24 代引き

2 2 E1201504080

2015-05-25 クレジットカード

3 1 E1201504160

2015-05-23 NP後払い

4 1 E1201505190

2015-05-23 代引き

orders

Page 32: Web系エンジニアなんて簡単

何を買ったの?

Page 33: Web系エンジニアなんて簡単

id 商品名 金額

1 レッドブル 200

2 菓子パン 150

3 コーヒー 100

4 牛乳 110

line_items

Page 34: Web系エンジニアなんて簡単

どの注文?

Page 35: Web系エンジニアなんて簡単

id order_id 商品名 金額

1 1 レッドブル 200

2 2 菓子パン 150

3 2 コーヒー 100

4 3 牛乳 110

line_items

Page 36: Web系エンジニアなんて簡単

全体で見る

Page 37: Web系エンジニアなんて簡単

id order_id 商品名 金額1 1 レッドブル 2002 2 菓子パン 1503 2 コーヒー 1004 3 牛乳 110

id user_id 注文番号 注文日 お支払い方法1 1 E120150311 2015-05-24 代引き2 2 E120150408 2015-05-25 クレジットカ3 1 E120150416 2015-05-23 NP後払い4 1 E120150519 2015-05-23 代引き

id 名前 電話番号 住所1 田中 “09099999999” 東京2 高橋 “09088888888” 北海道3 鈴木 “09077777777" 福岡4 佐藤 “09066666666" 大阪

id 名前 電話番号 住所1 田中 “09099999999” 東京2 高橋 “09088888888” 北海道3 鈴木 “09077777777" 福岡4 佐藤 “09066666666" 大阪

id user_id 注文番号 注文日 お支払い方法1 1 E120150311 2015-05-24 代引き2 2 E120150408 2015-05-25 クレジットカ3 1 E120150416 2015-05-23 NP後払い4 1 E120150519 2015-05-23 代引き

id order_id 商品名 金額1 1 レッドブル 2002 2 菓子パン 1503 2 コーヒー 1004 3 牛乳 110

users

orders

line_items

Page 38: Web系エンジニアなんて簡単

2章 エンジニアの思考法 まとめ

Page 39: Web系エンジニアなんて簡単

リレーショナル・データベースに関して駆け足で説明しました。

関連性を〇〇_id で定義する。

理解出来ましたでしょうか?

Page 40: Web系エンジニアなんて簡単

総括

• htmlとCSSでデザインを組む。

• ruby でPCに指示を出す(直感的!!)

• ruby on rails は、マーケティングフレームワークと一緒。

• リレーショナル・データベースは、Excelをちょっ難しくしたくらい!

Page 41: Web系エンジニアなんて簡単

要するに Web系エンジニアなんて簡単??

END