Web系エンジニアなんて簡単
-
Upload
kazuki-takahashi -
Category
Engineering
-
view
194 -
download
3
Transcript of Web系エンジニアなんて簡単
![Page 1: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/1.jpg)
Web系エンジニアなんて簡単2015年5月25日(月) ビタミンの会
高橋 和樹
• 1章 webアプリケーションとは
• 2章 エンジニアの思考法
• 総括
![Page 2: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/2.jpg)
テモナ株式会社 テクニカル リーダー
高橋 和樹
社会人4年目 25歳
ITの世界で働きたくてインターン(PHP) 自分でサービスを作りたい 現職テモナ株式会社ではrailsに没頭 ⇒踊れるエンジニア
Facebook : https://www.facebook.com/kazukiiin
![Page 3: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/3.jpg)
1章 webアプリケーションとは
• htmlとCSS
• rubyってなに?
• DBってなに?
• ruby on railsってなに?
• まとめ
![Page 4: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/4.jpg)
htmlとCSS
![Page 5: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/5.jpg)
htmlは場所、CSSは装飾
![Page 6: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/6.jpg)
rubyってなに?
![Page 7: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/7.jpg)
コンピューターの分かる言葉で指示を出す。
![Page 8: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/8.jpg)
例えば注文を検索
![Page 9: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/9.jpg)
Order.find(1)
![Page 10: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/10.jpg)
検索した注文が存在しているかの確認
![Page 11: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/11.jpg)
order = Order.find(1) order.blank? => true or false
![Page 12: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/12.jpg)
存在していたら、削除する
![Page 13: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/13.jpg)
order = Order.find(1) unless order.blank? order.destroy end
![Page 14: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/14.jpg)
DBってなに?
![Page 15: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/15.jpg)
データを保存する ⇒データベースに関しては、2章で勉強
しましょう!
![Page 16: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/16.jpg)
ruby on railsってなに?
![Page 17: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/17.jpg)
フレームワーク! マーケティングの3Cや4Pと一緒。
![Page 18: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/18.jpg)
1章 Webアプリケーションとは まとめ
![Page 19: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/19.jpg)
サービスを提供するには、サーバーとかもっと色々な知識が必要になるけれど、、、
![Page 20: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/20.jpg)
『webページを表示する技術』に限った時に
要するにこれだけ!!
html,CSS,ruby,DB, ruby on rails
![Page 21: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/21.jpg)
2章 エンジニアの思考法 ~データベースを理解する~• why?
• リレーショナル・データベースとは?
• DB設計を一緒にやってみる。
• まとめ
![Page 22: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/22.jpg)
why?
• データベース設計は、すべての機能のベースになる!
• 少しでも理解があると、非エンジニアでも要件定義が出来る!(・・・・はず!)
![Page 23: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/23.jpg)
リレーショナル・データベースとは?
![Page 24: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/24.jpg)
関係データベース(かんけいデータベース、リレーショナルデータベース、英: relational database)は関係モデル(リレーショナルデータモデル)にもとづいて設計、開発されるデータベースである。
⇒関係モデルってなんだろう?
引用: http://ja.wikipedia.org/wiki/関係データベース
![Page 25: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/25.jpg)
DB設計を一緒にやってみる。
![Page 26: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/26.jpg)
お客様情報を定義する
![Page 27: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/27.jpg)
id 名前 電話番号 住所
1 田中 “09099999999” 東京
2 高橋 “09088888888” 北海道
3 鈴木 “09077777777" 福岡
4 佐藤 “09066666666" 大阪
users
![Page 28: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/28.jpg)
注文情報を定義する
![Page 29: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/29.jpg)
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系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/30.jpg)
誰が入れた注文?
![Page 31: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/31.jpg)
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系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/32.jpg)
何を買ったの?
![Page 33: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/33.jpg)
id 商品名 金額
1 レッドブル 200
2 菓子パン 150
3 コーヒー 100
4 牛乳 110
line_items
![Page 34: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/34.jpg)
どの注文?
![Page 35: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/35.jpg)
id order_id 商品名 金額
1 1 レッドブル 200
2 2 菓子パン 150
3 2 コーヒー 100
4 3 牛乳 110
line_items
![Page 36: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/36.jpg)
全体で見る
![Page 37: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/37.jpg)
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系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/38.jpg)
2章 エンジニアの思考法 まとめ
![Page 39: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/39.jpg)
リレーショナル・データベースに関して駆け足で説明しました。
関連性を〇〇_id で定義する。
理解出来ましたでしょうか?
![Page 40: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/40.jpg)
総括
• htmlとCSSでデザインを組む。
• ruby でPCに指示を出す(直感的!!)
• ruby on rails は、マーケティングフレームワークと一緒。
• リレーショナル・データベースは、Excelをちょっ難しくしたくらい!
![Page 41: Web系エンジニアなんて簡単](https://reader034.fdocuments.net/reader034/viewer/2022042701/55c4a678bb61eb6c1f8b45da/html5/thumbnails/41.jpg)
要するに Web系エンジニアなんて簡単??
END