ビジネス職新卒向け Web基礎研修

ビジネス職新卒向け Web基礎研修
2019/04/25 株式会社リブセンス
Copyright © Livesense Inc.

 技術って聞くとやたら難しそうに感じる
 Web企業に入社したのにWebがわからない
 エンジニアが怖い生き物だと聞いている
こんなこと、心当たりがありませんか？
2
Web基礎研修では、みなさんがWeb企業で
この先生きのこっていくために
最初の心の準備をするための知識を伝えます。

 Webを支える技術について全体像を知る
 細かいところは興味があれば今後勉強しましょう
 エンジニアと一緒に働くイメージトレーニングをする
 =エンジニアが怖くないことを覚える
 質問があったらどんどん聞いてください
 ただし全部答えられるかはわかりません
この研修の目標
3

海野拓 (Taku Unno)
@boscoworks / エンジニア
 今のお仕事：
 {新卒,中途,業務委託}エンジニア採用
 技術広報
 自社リクルートサイト改善
 これまでの経歴：
 ヤフー(4年)→ドワンゴ(2年9ヶ月)
→リブセンス (4年3ヶ月)
自己紹介
4

 Chapter.1: コンピュータとネットワーク
 Chapter.2: Webサービスのなりたち
 Chapter.3: リブセンスのエンジニアの生態系
 Chapter.4: エンジニアとプロダクトを成長させる
 Extra: Any questions?
本日おはなしすること
5

Chapter.1 コンピュータとネットワーク

マッハバイトにアクセスしてみる
7
https://j-sen.jp/

このページが表示されるまでに何が起きたのか？
8
(1)ページにアクセスする
(2)マッハバイトに
データを欲しいと言う
(3)コンピュータが
ソフトウェアでデータを
加工する
(4)データを送り返す
(5)データを受け取って
ページを表示する

Chapter.1-1 コンピュータ

 コンピュータがなにを指すかは大体みんな知っている
コンピュータとは
10

 ハードウェア
 電子機器
 コンピュータと聞いて想像する画像は多分コレ
 ソフトウェア
 ハードウェアのなかで動くもの
 プログラムもソフトウェアのひとつ
コンピュータは何から出来ているか
11

 用途によって異なる形をしている
 ノートPC: 持ち運べる・高機能
 スマートフォン: 軽くて小さい
 タブレット: スマートフォンの操作性で大きな画面
 サーバ: 24時間つけっぱなしで特定の動作をさせる
ハードウェア
12

 ハードウェアは電子部品の集合体
 CPU: いろいろ計算できる
 ハードディスク: データを長期保存しておける
 メモリ: データを短期保存出来て読み書きがメチャ早い
ハードウェア
13

 いろんな種類・いろんな分け方がある
 よく聞くのはOSとかアプリとか
 リブセンスのエンジニアが作っているのもソフトウェア
ソフトウェア
14

● コンピュータの中は階層構造になっていて、
人間は常にアプリを介してコンピュータを動かす
ハードウェアとソフトウェアの関係(イメージ)
15
ハードウェア
OS
アプリ
ソフトウェア
コンピュータ

 ハードウェアを動かしたときに起動するもの
 人間がハードウェアを最低限動かすことが出来るように
 PC
 Windows / Mac OS
 スマートフォン
 Android / iOS
OS (Operating System)
16

 人間が特定の用途に使うためのソフトウェア
アプリケーション
17
検索したいとき
Google
音楽を聞きたいとき
iTunes
友達をつくりたいとき
Facebook
買い物したいとき
Amazon
つぶやきたいとき
Twitter
写真を自慢したいとき
Instagram
会話したいとき
LINE
ポケモンGETしたいとき
Pokemon GO

 リブセンスのエンジニアが作っているのもアプリケーション
アプリケーション
18

Chapter.1-2 ネットワーク

 ネットワークがなにを指すかは大体みんな知っている
ネットワークとは
20

 コンピュータとコンピュータをつなぐもの
 ケーブル (LANケーブル / 光ファイバーケーブル)
 無線 (Wi-Fi / 3G, 4G, 5G)
 コンピュータ同士のつながりを中継するもの
 ハブ
 アクセスポイント
ネットワークは何から出来ているか
21

Chapter.2 Webサービスはどのようにして動くのか

Chapter.2-1 リクエストとレスポンス

【再掲】マッハバイトが表示されるまでに何が起きたのか？
24
(1)ページにアクセスする
(2)マッハバイトに
データを欲しいと言う
(3)コンピュータが
ソフトウェアでデータを
加工する
(4)データを送り返す
(5)データを受け取って
ページを表示する

ネットワーク
マッハバイトが表示されるまでに何が起きたのか？ (復習)
25
コンピュータコンピュータ

マッハバイトが表示されるまでに何が起きたのか？ (くわしく)
26
クライアント
サーバ
リクエスト
(データの要求)
レスポンス
(データの返却)
24時間つけっぱなしで
特定の動作をさせる

ネイティブアプリも仕組みは同じ
27
クライアントサーバ
リクエスト
レスポンス

 クライアントから「こんなデータが欲しい」と依頼する
 送り先はサーバ
 例：
 リブセンスの求人一覧をください
 マッハバイトの営業アシスタントの求人情報をください
リクエストとは
28

 “サーバの住所” と “何を送り返してほしいか” を
人間が(比較的)読みやすいようにしたもの
 https://j-sen.jp/352249/y
URL
29

 サーバからデータを加工したものを送り返す
 送り先はクライアント
 例：
 リブセンスの求人一覧はIDが 352249, 928290, ...
 マッハバイトの営業アシスタントは時給1,300円で...
レスポンスとは
30

Chapter.2-2 クライアントとサーバ

【再掲】マッハバイトが表示されるまでに何が起きたのか？
32
クライアント
サーバ
リクエスト
レスポンス

 リクエストを送るアプリケーションもしくはコンピュータ
 Webブラウザ
 専用アプリ
 サーバからのレスポンスを受け取って表示する
クライアントとは
33

 Webサービスを使用するクライアントアプリケーション
 Chrome
 Firefox
 Safari
 Edge
Webブラウザ
34

 Webサービスをスマートフォンで使うための
専用アプリケーション
 スマートフォン用に
 見やすく
 つかいやすく
 PUSH通知が使える
 GPSが使える
アプリ
35

 リクエストを受信して、レスポンスを送信する
アプリケーションもしくはコンピュータ
 24時間ずっと起動していて、リクエストが来るのを待っている
 リクエストが来たらレスポンスを返す
サーバとは
36

 役割によって様々なサーバがある
 Webサーバ
 データベースサーバ
 バッチサーバ
 APIサーバ
 他にもたくさん種類があるが、今回は割愛
サーバの種類
37

 リクエストに対するレスポンス (Webページや画像)を返す
 受け取るのはクライアントの Webブラウザ
 リクエストによって内容が変化しない
 ランディングページ、画像など
 リクエストによって内容が変化する
 求人検索ページ、求人詳細ページなど
Webサーバ
38

 サービスに関わる情報が格納されている
 ユーザ情報
 求人情報
 企業情報など
 施策立案をするときに最も重要なもの
 データの組み合わせにより可能になる
 機能改善
 見せ方の変更
データベースサーバ
39

 大量のデータを格納するソフトウェア
 データは意味で分類してテーブルという単位で管理している
 ユーザ情報、求人情報、企業情報など...
 Excel をイメージするとわかりやすい
 Excel 1ファイルがデータベース
 シート1枚がテーブル
データベースとは？
40

テーブルのサンプル
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
クライアント
サーバ
リクエスト
レスポンス

マッハバイトは無限にWebページを保管しているわけではない
43
クライアント
Webサーバ
リクエスト
レスポンス

マッハバイトが表示されるまでに何が起きたのか？ (もっとくわしく)
44
クライアント
Webサーバ
(2)リクエスト
(6)レスポンス
データベース
(1)ページにアクセスする (3)求人ID: 352249
のデータを検索する
(4)求人ID: 352249
のデータを返却する
(5)Webページのデザインに
求人情報を当てはめる

 一度に同じような処理を大量に行うプログラムをバッチという
 クローラー
 求人データの一括更新
 メールマガジン配信など
バッチサーバ
45

 リクエストに対するレスポンス (特殊な形式の情報)を返す
 受け取るのはクライアントのネイティブアプリなど
 Webサーバと役割は似ているが、詳細は割愛
APIサーバ (Application Programming Interface)
46

Chapter.3 リブセンスエンジニアの生態系

Chapter.3-1 エンジニアの種類

 Webサービスを支える技術は数多く、網羅するのは非現実的
 役割分担することで支え合う。チーム開発
 社内でよく聞く種類のエンジニアを紹介
利用技術によって役割分担している
49

 リクエストを受け取ったサーバで動くアプリケーションを担当
 作るものイメージ：
 データベースから取得したデータをクライアントに返す
 Webブラウザで入力されたデータをデータベースにしまう
 主な利用技術：
 Ruby (Ruby on Rails), PHP (symfony) など
サーバサイドエンジニア
50

 レスポンスを受け取ったクライアントで動くアプリケーション
を担当
 Webページの見える部分そのもの
 JavaScript による動的な処理
 HTML, CSS, JavaScript(React, Vue.js) など
フロントエンドエンジニア
51

 レスポンスを受け取ったスマートフォンで動く
ネイティブアプリを担当
 Webサービスとは作り方が異なる
 Swift, Android Java など
ネイティブアプリエンジニア
52

 Web周辺技術の検証または開発
 新しい技術がリブセンスで使えるかテストする感じ
 サーバやネットワークの管理・監視・改善
 サーバは24時間ずっと動いているので突然壊れたりする
 壊れてもサービスが止まらないようにする仕組みを作る
インフラエンジニア
53

 蓄積されたデータを活用して、ユーザそれぞれに最適な
サービスを提供する
 求人レコメンドエンジン
 メールマーケティングシステム
 プログラムと同じくらい数学や統計学などの知識が必要
機械学習エンジニア
54

 社内で使われているコンピュータやネットワークを管理
 Confluence など社内で使われているWebサービスも面倒を
見てくれている
 社内の据え置き電話も実はコーポレートITが管理している
 困ったら助けてくれるひとたちだけど・・・
 まずは上司や同じチームのエンジニアに相談する
コーポレートITエンジニア
55

Chapter.3-2 リブセンスにおけるエンジニア

 LIVESENSE ENGINEER OVERVIEW
https://recruit.livesense.co.jp/lp/engineer/overview
リブセンスエンジニアの特徴
57

 エンジニアが自分らしいキャリアを描くための属性を自ら定義
 目標設定時にウェイトを自由に組み合わせてアレンジする
キャリアパスをイメージしたエンジニア属性
58
プロダクト・エンジニア事業の課題を技術で解決する
スペシャリスト利用技術の第一人者になる
テック・リード事業を改善する技術を選定し導入する
エンジニアリング・マネージャソフトウェアのように組織を改善する

 ビジネス職の方々にSQLやWeb知識を期待するのと同様に...
 エンジニアも職種を越えて協働することを大切にしている
 施策立案
 ユーザインタビュー
 社内での業務改善など
職種を越境していくモチベーション
59

Chapter.3-3 よくある開発の流れ

1. 施策立案・設計
2. プログラムを書く
3. テスト
4. 他の人にプログラムをレビューしてもらう
5. 動作確認する
6. リリースする
7. プログラムやサーバを監視する
開発シナリオ
61

 ロードマップやKPI達成のために必要な施策を考える
 数値分析
 開発に必要な技術の調査
 動いているプログラムがどう動いているか理解する
 仕様やシステムの設計を考える
 場合によってはレビューする
1. 施策立案・設計
62

 コーディング
 ソフトウェアは一人で作るわけではない
 誰でも読みやすいようなルールをチームごとに設けて守る
 ソフトウェアは作ったら終わりではない
 今後機能改善したいときのために変更しやすい仕組みにする
 開発する環境を開発環境と言う
 だいたい各自のノートPC
2. プログラムを書く
63

 テストプログラムを書く
 ユーザや条件によって処理結果が変わるプログラムが多い
 毎回手動でテストするのは非現実的
 テストもプログラムで実行する
3. テスト
64

 コードレビュー
 人間はミスをする。他の人にチェックしてもらう
 より良いプログラムをお互いに学びあえる
 ビジネスの仕組みを正しく実現できているかチェック
4. 他の人にプログラムをレビューしてもらう
65

 リリース前の最終確認
 エンジニアだけでなくディレクターやデザイナーも協力する
 仕様どおりかどうかチェック
 レイアウト崩れがないかチェック
 動作確認する環境をステージング環境と言う
 ユーザや企業が使うサーバとは別に用意されている
5. 動作確認する
66

 デプロイ
 ユーザや企業がリクエストを送るサーバにソフトウェアを
配置する
 ネイティブアプリの場合は「ストアに上げる」と言う
 数秒〜1,2分程度かかる
 ユーザや企業が使う環境を本番環境と言う
 エンジニアも本番環境ではめったに作業しない
6. リリースする
67

 モニタリング
 データの特徴や大量アクセスなどで想定外が起きることも
 設計時・コーディング時にすべてを想定するのは難しい
 ソフトウェアやサーバを24時間365日監視する
 監視もソフトウェアで出来る
 最終的な判断と対応はエンジニア
7. プログラムやサーバを監視する
68

Chapter.4 エンジニアとプロダクトを成長させる

 未確定な施策（仕様）で開発を進めることはできない
 未確定な状態で依頼をされるとエンジニアは困る
 わからないことがあれば相談することが大切
 相談してもらったほうが一緒に考えられる
 時間が短縮できる
 ソフトウェアで出来ること・出来ないことを伝えられる
心得1. 「相談」なのか「依頼」なのかハッキリする
70

 意外とプログラミングしなくても解決出来るものがある
 社内のオペレーションを改善する
 社外のWebサービスを使うなど
 システムだと絶対出来ない・出来るが時間がかかるものがある
 データが世の中に存在しないものを機能に盛り込む
 求人データを一瞬で全て書き換えるなど
 エンジニアと一緒に最適解を考えればよい
心得2. 仕様はすべて決めなくてよい
71

 企画から？調査から？それとも実装のみ？
 どこからやればいいかわからないとエンジニアは困ってしまう
 お見合い状態で時間がかかってしまうより一緒にやるほうがよい
 エンジニアにも得意・不得意がある
 すべてのエンジニアがすべての技術に精通しているわけではない
 エンジニア内でも作業分担すると早く出来るかも
心得3. どの作業からどのエンジニアに任せるか？
72

 作業時間を工数と言うこともある
 開発案件にどれくらいの工数がかかるか見積もることは困難
 エンジニアですら精度の高い見積もりは出来ない
 実装が難しい
 データが複雑で処理時間が長くなっちゃう
 ゴリ押しするとプロジェクトが炎上し帰宅できなくなる
 これをデスマーチといいます
心得4. 作業時間の見積もりはエンジニアとやる
73

 プロジェクトがうまくいっても、うまくいかなくても
プロジェクトに関係した全員でその結果になったのを忘れない
 エンジニアもユーザ数が減少すれば悲しい
 エンジニアも売上があがれば嬉しい
 技術的に困難な課題が解決したら一緒に盛り上がろう
 業界内で絶対優位に立つには、技術力は必要不可欠
心得5. 喜びも悲しみもエンジニアと共有する
74

Welcome to
Team-Livesense Engineering!
75

Extra. Any questions?

ビジネス職新卒向け Web基礎研修

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to ビジネス職新卒向け Web基礎研修

Similar to ビジネス職新卒向け Web基礎研修 (20)

More from Taku Unno

More from Taku Unno (6)

Recently uploaded

Recently uploaded (9)

ビジネス職新卒向け Web基礎研修