Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

株式会社リブセンスのビジネス職新卒向けWeb基礎研修の説明資料です。

  • Be the first to comment

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

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

×