Weitere ähnliche Inhalte
Ähnlich wie ビジネス職新卒向け Web基礎研修 (20)
Kürzlich hochgeladen (11)
ビジネス職新卒向け Web基礎研修
- 2. Copyright © Livesense Inc.
技術って聞くとやたら難しそうに感じる
Web企業に入社したのにWebがわからない
エンジニアが怖い生き物だと聞いている
こんなこと、心当たりがありませんか?
2
Web基礎研修では、みなさんがWeb企業で
この先生きのこっていくために
最初の心の準備をするための知識を伝えます。
- 3. Copyright © Livesense Inc.
Webを支える技術について全体像を知る
細かいところは興味があれば今後勉強しましょう
エンジニアと一緒に働くイメージトレーニングをする
=エンジニアが怖くないことを覚える
質問があったらどんどん聞いてください
ただし全部答えられるかはわかりません
この研修の目標
3
- 4. 海野 拓 (Taku Unno)
@boscoworks / エンジニア
今のお仕事:
{新卒,中途,業務委託}エンジニア採用
技術広報
自社リクルートサイト改善
これまでの経歴:
ヤフー(4年)→ドワンゴ(2年9ヶ月)
→リブセンス (4年3ヶ月)
Copyright © Livesense Inc.
自己紹介
4
- 5. Copyright © Livesense Inc.
Chapter.1: コンピュータとネットワーク
Chapter.2: Webサービスのなりたち
Chapter.3: リブセンスのエンジニアの生態系
Chapter.4: エンジニアとプロダクトを成長させる
Extra: Any questions?
本日おはなしすること
5
- 8. Copyright © Livesense Inc.
このページが表示されるまでに何が起きたのか?
8
(1)ページにアクセスする
(2)マッハバイトに
データを欲しいと言う
(3)コンピュータが
ソフトウェアでデータを
加工する
(4)データを送り返す
(5)データを受け取って
ページを表示する
- 11. Copyright © Livesense Inc.
ハードウェア
電子機器
コンピュータと聞いて想像する画像は多分コレ
ソフトウェア
ハードウェアのなかで動くもの
プログラムもソフトウェアのひとつ
コンピュータは何から出来ているか
11
- 12. Copyright © Livesense Inc.
用途によって異なる形をしている
ノートPC: 持ち運べる・高機能
スマートフォン: 軽くて小さい
タブレット: スマートフォンの操作性で大きな画面
サーバ: 24時間つけっぱなしで特定の動作をさせる
ハードウェア
12
- 13. Copyright © Livesense Inc.
ハードウェアは電子部品の集合体
CPU: いろいろ計算できる
ハードディスク: データを長期保存しておける
メモリ: データを短期保存出来て読み書きがメチャ早い
ハードウェア
13
- 14. Copyright © Livesense Inc.
いろんな種類・いろんな分け方がある
よく聞くのはOSとかアプリとか
リブセンスのエンジニアが作っているのもソフトウェア
ソフトウェア
14
- 15. Copyright © Livesense Inc.
● コンピュータの中は階層構造になっていて、
人間は常にアプリを介してコンピュータを動かす
ハードウェアとソフトウェアの関係(イメージ)
15
ハードウェア
OS
アプリ
ソフトウェア
コンピュータ
- 16. Copyright © Livesense Inc.
ハードウェアを動かしたときに起動するもの
人間がハードウェアを最低限動かすことが出来るように
PC
Windows / Mac OS
スマートフォン
Android / iOS
OS (Operating System)
16
- 17. Copyright © Livesense Inc.
人間が特定の用途に使うためのソフトウェア
アプリケーション
17
検索したいとき
Google
音楽を聞きたいとき
iTunes
友達をつくりたいとき
Facebook
買い物したいとき
Amazon
つぶやきたいとき
Twitter
写真を自慢したいとき
Instagram
会話したいとき
LINE
ポケモンGETしたいとき
Pokemon GO
- 21. Copyright © Livesense Inc.
コンピュータとコンピュータをつなぐもの
ケーブル (LANケーブル / 光ファイバーケーブル)
無線 (Wi-Fi / 3G, 4G, 5G)
コンピュータ同士のつながりを中継するもの
ハブ
アクセスポイント
ネットワークは何から出来ているか
21
- 24. Copyright © Livesense Inc.
【再掲】マッハバイトが表示されるまでに何が起きたのか?
24
(1)ページにアクセスする
(2)マッハバイトに
データを欲しいと言う
(3)コンピュータが
ソフトウェアでデータを
加工する
(4)データを送り返す
(5)データを受け取って
ページを表示する
- 26. Copyright © Livesense Inc.
マッハバイトが表示されるまでに何が起きたのか? (くわしく)
26
クライアント
サーバ
リクエスト
(データの要求)
レスポンス
(データの返却)
24時間つけっぱなしで
特定の動作をさせる
- 28. Copyright © Livesense Inc.
クライアントから「こんなデータが欲しい」と依頼する
送り先はサーバ
例:
リブセンスの求人一覧をください
マッハバイトの営業アシスタントの求人情報をください
リクエストとは
28
- 29. Copyright © Livesense Inc.
“サーバの住所” と “何を送り返してほしいか” を
人間が(比較的)読みやすいようにしたもの
https://j-sen.jp/352249/y
URL
29
- 30. Copyright © Livesense Inc.
サーバからデータを加工したものを送り返す
送り先はクライアント
例:
リブセンスの求人一覧はIDが 352249, 928290, ...
マッハバイトの営業アシスタントは時給1,300円で...
レスポンスとは
30
- 32. Copyright © Livesense Inc.
【再掲】マッハバイトが表示されるまでに何が起きたのか?
32
クライアント
サーバ
リクエスト
(データの要求)
レスポンス
(データの返却)
24時間つけっぱなしで
特定の動作をさせる
- 33. Copyright © Livesense Inc.
リクエストを送るアプリケーションもしくはコンピュータ
Webブラウザ
専用アプリ
サーバからのレスポンスを受け取って表示する
クライアントとは
33
- 34. Copyright © Livesense Inc.
Webサービスを使用するクライアントアプリケーション
Chrome
Firefox
Safari
Edge
Webブラウザ
34
- 35. Copyright © Livesense Inc.
Webサービスをスマートフォンで使うための
専用アプリケーション
スマートフォン用に
見やすく
つかいやすく
PUSH通知が使える
GPSが使える
アプリ
35
- 36. Copyright © Livesense Inc.
リクエストを受信して、レスポンスを送信する
アプリケーションもしくはコンピュータ
24時間ずっと起動していて、リクエストが来るのを待っている
リクエストが来たらレスポンスを返す
サーバとは
36
- 37. Copyright © Livesense Inc.
役割によって様々なサーバがある
Webサーバ
データベースサーバ
バッチサーバ
APIサーバ
他にもたくさん種類があるが、今回は割愛
サーバの種類
37
- 38. Copyright © Livesense Inc.
リクエストに対するレスポンス (Webページや画像)を返す
受け取るのはクライアントの Webブラウザ
リクエストによって内容が変化しない
ランディングページ、画像 など
リクエストによって内容が変化する
求人検索ページ、求人詳細ページ など
Webサーバ
38
- 39. Copyright © Livesense Inc.
サービスに関わる情報が格納されている
ユーザ情報
求人情報
企業情報 など
施策立案をするときに最も重要なもの
データの組み合わせにより可能になる
機能改善
見せ方の変更
データベースサーバ
39
- 40. Copyright © Livesense Inc.
大量のデータを格納するソフトウェア
データは意味で分類してテーブルという単位で管理している
ユーザ情報、求人情報、企業情報 など...
Excel をイメージするとわかりやすい
Excel 1ファイルがデータベース
シート1枚がテーブル
データベースとは?
40
- 41. Copyright © Livesense Inc.
テーブルのサンプル
41
ID name email gender birthday
1 鈴木太郎 taro.suzuki@example.com male 1995-01-01
2 山本花子 hanako.yamamoto@example.com famale 1996-03-21
3 田中修二 shuji.tanaka@example.com male 1994-08-08
テーブル
ユーザの情報という意味で分類したかたまり
レコード:
データの最小単位
の1行
カラム:
分類を更に細分化
した要素
- 42. Copyright © Livesense Inc.
【再々掲】マッハバイトが表示されるまでに何が起きたのか?
42
クライアント
サーバ
リクエスト
(データの要求)
レスポンス
(データの返却)
24時間つけっぱなしで
特定の動作をさせる
- 44. Copyright © Livesense Inc.
マッハバイトが表示されるまでに何が起きたのか? (もっとくわしく)
44
クライアント
Webサーバ
(2)リクエスト
(6)レスポンス
データベース
(1)ページにアクセスする (3)求人ID: 352249
のデータを検索する
(4)求人ID: 352249
のデータを返却する
(5)Webページのデザインに
求人情報を当てはめる
- 45. Copyright © Livesense Inc.
一度に同じような処理を大量に行うプログラムをバッチという
クローラー
求人データの一括更新
メールマガジン配信 など
バッチサーバ
45
- 46. Copyright © Livesense Inc.
リクエストに対するレスポンス (特殊な形式の情報)を返す
受け取るのはクライアントの ネイティブアプリ など
Webサーバと役割は似ているが、詳細は割愛
APIサーバ (Application Programming Interface)
46
- 49. Copyright © Livesense Inc.
Webサービスを支える技術は数多く、網羅するのは非現実的
役割分担することで支え合う。チーム開発
社内でよく聞く種類のエンジニアを紹介
利用技術によって役割分担している
49
- 50. Copyright © Livesense Inc.
リクエストを受け取ったサーバで動くアプリケーションを担当
作るものイメージ:
データベースから取得したデータをクライアントに返す
Webブラウザで入力されたデータをデータベースにしまう
主な利用技術:
Ruby (Ruby on Rails), PHP (symfony) など
サーバサイドエンジニア
50
- 51. Copyright © Livesense Inc.
レスポンスを受け取ったクライアントで動くアプリケーション
を担当
作るものイメージ:
Webページの見える部分そのもの
JavaScript による動的な処理
主な利用技術:
HTML, CSS, JavaScript(React, Vue.js) など
フロントエンドエンジニア
51
- 52. Copyright © Livesense Inc.
レスポンスを受け取ったスマートフォンで動く
ネイティブアプリを担当
Webサービスとは作り方が異なる
主な利用技術:
Swift, Android Java など
ネイティブアプリエンジニア
52
- 53. Copyright © Livesense Inc.
Web周辺技術の検証または開発
新しい技術がリブセンスで使えるかテストする感じ
サーバやネットワークの管理・監視・改善
サーバは24時間ずっと動いているので突然壊れたりする
壊れてもサービスが止まらないようにする仕組みを作る
インフラエンジニア
53
- 54. Copyright © Livesense Inc.
蓄積されたデータを活用して、ユーザそれぞれに最適な
サービスを提供する
作るものイメージ:
求人レコメンドエンジン
メールマーケティングシステム
プログラムと同じくらい数学や統計学などの知識が必要
機械学習エンジニア
54
- 55. Copyright © Livesense Inc.
社内で使われているコンピュータやネットワークを管理
Confluence など社内で使われているWebサービスも面倒を
見てくれている
社内の据え置き電話も実はコーポレートITが管理している
困ったら助けてくれるひとたちだけど・・・
まずは上司や同じチームのエンジニアに相談する
コーポレートITエンジニア
55
- 57. Copyright © Livesense Inc.
LIVESENSE ENGINEER OVERVIEW
https://recruit.livesense.co.jp/lp/engineer/overview
リブセンスエンジニアの特徴
57
- 58. Copyright © Livesense Inc.
エンジニアが自分らしいキャリアを描くための属性を自ら定義
目標設定時にウェイトを自由に組み合わせてアレンジする
キャリアパスをイメージしたエンジニア属性
58
プロダクト・エンジニア 事業の課題を技術で解決する
スペシャリスト 利用技術の第一人者になる
テック・リード 事業を改善する技術を選定し導入する
エンジニアリング・マネージャ ソフトウェアのように組織を改善する
- 59. Copyright © Livesense Inc.
ビジネス職の方々にSQLやWeb知識を期待するのと同様に...
エンジニアも職種を越えて協働することを大切にしている
施策立案
ユーザインタビュー
社内での業務改善 など
職種を越境していくモチベーション
59
- 61. Copyright © Livesense Inc.
1. 施策立案・設計
2. プログラムを書く
3. テスト
4. 他の人にプログラムをレビューしてもらう
5. 動作確認する
6. リリースする
7. プログラムやサーバを監視する
開発シナリオ
61
- 62. Copyright © Livesense Inc.
ロードマップやKPI達成のために必要な施策を考える
数値分析
開発に必要な技術の調査
動いているプログラムがどう動いているか理解する
仕様やシステムの設計を考える
場合によってはレビューする
1. 施策立案・設計
62
- 63. Copyright © Livesense Inc.
コーディング
ソフトウェアは一人で作るわけではない
誰でも読みやすいようなルールをチームごとに設けて守る
ソフトウェアは作ったら終わりではない
今後機能改善したいときのために変更しやすい仕組みにする
開発する環境を開発環境と言う
だいたい各自のノートPC
2. プログラムを書く
63
- 64. Copyright © Livesense Inc.
テストプログラムを書く
ユーザや条件によって処理結果が変わるプログラムが多い
毎回手動でテストするのは非現実的
テストもプログラムで実行する
3. テスト
64
- 65. Copyright © Livesense Inc.
コードレビュー
人間はミスをする。他の人にチェックしてもらう
より良いプログラムをお互いに学びあえる
ビジネスの仕組みを正しく実現できているかチェック
4. 他の人にプログラムをレビューしてもらう
65
- 66. Copyright © Livesense Inc.
リリース前の最終確認
エンジニアだけでなくディレクターやデザイナーも協力する
仕様どおりかどうかチェック
レイアウト崩れがないかチェック
動作確認する環境をステージング環境と言う
ユーザや企業が使うサーバとは別に用意されている
5. 動作確認する
66
- 67. Copyright © Livesense Inc.
デプロイ
ユーザや企業がリクエストを送るサーバにソフトウェアを
配置する
ネイティブアプリの場合は「ストアに上げる」と言う
数秒〜1,2分程度かかる
ユーザや企業が使う環境を本番環境と言う
エンジニアも本番環境ではめったに作業しない
6. リリースする
67
- 68. Copyright © Livesense Inc.
モニタリング
データの特徴や大量アクセスなどで想定外が起きることも
設計時・コーディング時にすべてを想定するのは難しい
ソフトウェアやサーバを24時間365日監視する
監視もソフトウェアで出来る
最終的な判断と対応はエンジニア
7. プログラムやサーバを監視する
68
- 70. Copyright © Livesense Inc.
未確定な施策(仕様)で開発を進めることはできない
未確定な状態で依頼をされるとエンジニアは困る
わからないことがあれば相談することが大切
相談してもらったほうが一緒に考えられる
時間が短縮できる
ソフトウェアで出来ること・出来ないことを伝えられる
心得1. 「相談」なのか「依頼」なのかハッキリする
70
- 71. Copyright © Livesense Inc.
意外とプログラミングしなくても解決出来るものがある
社内のオペレーションを改善する
社外のWebサービスを使う など
システムだと絶対出来ない・出来るが時間がかかるものがある
データが世の中に存在しないものを機能に盛り込む
求人データを一瞬で全て書き換える など
エンジニアと一緒に最適解を考えればよい
心得2. 仕様はすべて決めなくてよい
71
- 72. Copyright © Livesense Inc.
企画から? 調査から? それとも実装のみ?
どこからやればいいかわからないとエンジニアは困ってしまう
お見合い状態で時間がかかってしまうより一緒にやるほうがよい
エンジニアにも得意・不得意がある
すべてのエンジニアがすべての技術に精通しているわけではない
エンジニア内でも作業分担すると早く出来るかも
心得3. どの作業からどのエンジニアに任せるか?
72
- 73. Copyright © Livesense Inc.
作業時間を工数と言うこともある
開発案件にどれくらいの工数がかかるか見積もることは困難
エンジニアですら精度の高い見積もりは出来ない
実装が難しい
データが複雑で処理時間が長くなっちゃう
ゴリ押しするとプロジェクトが炎上し帰宅できなくなる
これをデスマーチといいます
心得4. 作業時間の見積もりはエンジニアとやる
73
- 74. Copyright © Livesense Inc.
プロジェクトがうまくいっても、うまくいかなくても
プロジェクトに関係した全員でその結果になったのを忘れない
エンジニアもユーザ数が減少すれば悲しい
エンジニアも売上があがれば嬉しい
技術的に困難な課題が解決したら一緒に盛り上がろう
業界内で絶対優位に立つには、技術力は必要不可欠
心得5. 喜びも悲しみもエンジニアと共有する
74