Web系エンジニア職とWebを支える技術の紹介

知識ゼロでも『完全に理解した』感を得られるように、下記のような方々を対象とする勉強会で使った資料
・Webエンジニア採用している人事向け
・Webエンジニアの転職エージェント（人材紹介事業者）向け

Transcript

1. Web系エンジニア職と Webを支える技術の紹介 1
2. 今日のゴール 1. 知らない（不安・恐怖・拒絶） 2. 聞いたことがある（親近感） 3. 知っている（興味が持てた） 4. 理解している（他人に説明できる） 5. 使える（それはエンジニアです！） 2 このラインを超えたらOK
3. 「◦◦エンジニア」 丸に入る言葉は？ 3
4. インターネットとは？ 4 インターネット
5. モノづくりとは？ 5
6. ◦◦って最近すごいらしいね？ あれいくらで作れる？ 6
7. ビジネス向けチャットを作ろう 7
8. 8 インターネット ユーザー
9. 9 インターネット Web サーバー データベース ユーザー Web サービスを動かす サーバーを作成しよう！
10. 10 インターネット Web サーバー データベース ユーザー Web ブラウザ デザインをもとに、 Web ブラウザで表示する 画面を作成します
11. 11 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ 入力したメッセージを 保存したり、ほかの人の発言を 読み込む処理を実装するぞ。
12. 12 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ チャットが動く様になりました！
13. 13 アプリは？ 外出が多いから、 スマホでも使いたい。
14. 14 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ iOS (iPhone /iPad) Android iPhoneアプリ作ります Android 対応します
15. 15 この間チャットでもらった話が 思い出せなくて... 検索はできないの？
16. 16 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ iOS (iPhone /iPad) Android 検索サーバー 検索するプログラムを 追加実装します データを検索する 専用サーバーを立てますね
17. 17 サーバーレス (Serverless) が 流行ってるって聞いたよ。 なんでサーバーが必要なの？
18. サーバーレスとは？ 18 インターネット プログラム ユーザー Web ブラウザ iOS (iPhone /iPad) Android !? 今まで書いたプログラムはどこに...
19. サーバーレスでも基本構成は変わりません 19 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ iOS (iPhone /iPad) Android クラウドだろうと、サーバーレスだろうと、サーバーは必要です！ （物理的に存在してます） 最近は、サーバー設定を一生懸命頑張るより、クラウドの機能を 活用する手法がトレンドになっています。サーバーレスはその一つ。
20. 20 テキストでのやり取りは面倒！ サクッと会話した方が効率的なので テレビ会議できる機能が欲しい！
21. 21 もはやチャットではない...
22. エンジニアは、 何人登場したでしょう？ 22
23. 23 バックエンドエンジニア アプリエンジニア フロントエンドエンジニア インフラエンジニア 5人
24. なぜ、そんなにエンジニアが必要なの？ エンジニアの中での分業化が加速しています。新しい技術が生まれて便利になる につれて、各要素技術の専門性が高まり、分業しないとやっていけません。別の 側面から見ると、各エンジニアの転向や複数の役割を兼任するのは大変です。 イメージとしては、眼科と耳鼻科くらいの差があります。眼科の先生とはいえ、 大学で様々な医学を勉強しているので、耳鼻科の知識はあるでしょう。でも、眼 科の先生に「耳の手術してくれ！」と言ったら　　ってなると思います。 24
25. インフラエンジニア まとめ：Web サービスの構成図 25 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ iOS (iPhone /iPad) Android フロントエンドエンジニア バックエンドエンジニア アプリエンジニア
26. モノづくりのプロセス 26
27. 開発プロセス 27 機能A 機能B 機能C 機能D ウォーターフォール開発 企画 設計 実装 テスト アジャイル開発 企画 設計 実装 テスト 機能A 企画 設計 実装 テスト 機能B 企画 設計 実装 テスト 機能C 企画 設計 実装 テスト 機能D リリース リリース リリース リリース リリース
28. 検証する ウォーターフォールのVモデル 28 受け入れテスト 単体テスト システムテスト 結合テスト 実装 詳細設計 機能設計 要件定義 （基本設計） 要求分析 検証する 検証する 検証する この辺りが 上流工程と呼ばれる 参考：Vモデル - 情報システム用語辞典
29. 29 検索はできないけれど、リリースしたことで ユーザーの本当に欲しかったものが 「チャットではなく、テレビ会議」だと 気がつけるかも チャット基本機能 検索機能 企画 設計 実装 テスト リリース 企画 設計 実装 テスト アジャイル開発のメリット ウォーターフォール開発 アジャイル開発 チャット基本機能 企画 設計 実装 テスト iOS アプリ 企画 設計 実装 テスト リリース 複数ルームを横断して検索ができるべきか？ 要件が決まらず遅延 実装時に想定外のトラブルが発生！ どこか一つの機能の遅延が 全体リリースの遅延に繋がる 当初計画の リリース時期
30. 【余談】『開発』を担うエンジニアのこれから 30 出典：Netflixにおけるフルサイクル開発者―開発したものが運用する モノづくりに必要な技術がたくさんある！！ 『専門家』に再利用可能なツールを作ってもらう （例えば、作業の単純化、プロセスの自動化など） 『開発』を担うエンジニアは、 専門家が作ったツールを活用して、 設計、開発、テスト、運用、サポートの すべてのプロセスに責任を持つ『多能工』
31. 技術とエンジニア 31
32. インフラエンジニア エンジニアの生息マップ 32 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ iOS (iPhone /iPad) Android フロントエンドエンジニア バックエンドエンジニア アプリエンジニア
33. 『技術』には向き不向きがある 33 Web サービスを作りたい Ruby iOS アプリを作りたい Android アプリを作りたい 機械学習を取り入れたい Python Swift Kotlin
34. 「何エンジニアか?」の特定は難しい 　「Ruby ならバックエンドエンジニア」と安直な判断はできません Ruby は、Ruby on Rails というフレームワークなどでバックエンドエンジニアに 使われることが多い言語ですが、インフラエンジニアも使います（例えば、サー バー設定を記述するChef, サーバー設定のテストServerspec はRuby を使いま す）。 また、一つの言語で作ったソフトウェアが様々な環境で動かせる『クロスプラッ トフォーム』という仕組みがあり、もはや何エンジニアかよくわかりません。 例えば、Kotlin, React Native (JavaScript), RubyMotion (Ruby) などは iOS ア プリとAndroid アプリのどちらも作ることができます。 34
35. フロントエンドエンジニア 35 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ iOS (iPhone /iPad) Android フロントエンドエンジニア JavaScript HTML CSS
36. フロントエンドエンジニア • ユーザーに見える部分を作る人 • フロントエンド（front-end）とは？ ◦ ユーザーの目に見えて、ユーザーが操作する部分を指します ◦ 別の表現では、Webブラウザ側（クライアント側）と呼ぶことも ◦ ユーザーが操作する部分を『ユーザーインターフェース (UI) 』と言います • おもな技術キーワード ◦ HTML, CSS, JavaScript, React, Vue.js, Nuxt, TypeScript, Angular, AngularJS ... 36
37. アプリエンジニア 37 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ iOS (iPhone /iPad) Android アプリエンジニア Swift Kotlin
38. アプリエンジニア • iOS/Android のアプリを作る人 ◦ それぞれ特有の作り方があるので、iOSエンジニアやAndroid エンジニアと呼ぶことが一般的 • おもな技術キーワード ◦ iOS の場合 : Swift, Objective-C ◦ Android の場合 : Kotlin, Java ◦ 両方に使える : React Native (JavaScript), Unity (ゲーム向け) • 補足 ◦ アプリは『アプリケーション』の略。 ▪ アプリケーションは特定の作業のためにつくられたソフトウェアのこと ▪ スマートフォンやPC 上で動くソフトウェアを指してアプリと呼ぶことが多い ◦ Windows / Mac などのPC 向けアプリもあります ▪ 例えば、 Slack やZoom などPC にインストールして利用するサービスがあります ◦ 提供サービスとしてiPhone もAndroid も対応して欲しい。でも、開発言語が違うので大変 ▪ Scadeは、Swiftを使用してAndroidアプリ開発を可能にすることを目指す 38
39. バックエンドエンジニア 39 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ iOS (iPhone /iPad) Android バックエンドエンジニア Ruby Python PHP Go
40. バックエンドエンジニア • サーバー上で動くソフトウェアを作る人 • バックエンド（back-end）とは？ ◦ ユーザーの操作に従いデータの保存や読み込む処理を指す ◦ 別の表現では、サーバーサイドと呼ぶことも • おもな技術キーワード ◦ Ruby on Rails (Ruby), Django (Python), Go, PHP … • 補足 ◦ プログラミング言語とフレームワークはセットで出現します ▪ ただし、めちゃくちゃたくさんあるので覚えなくて良い ◦ ネットで調べて言語が特定できれば十分です ▪ 「Ruby on Rails は、Ruby で書かれています」 ▪ 「Django は、Python で実装されたWeb アプリケーションフレームワーク」 ▪ 「Symfony は、PHP フレームワーク」 40
41. インフラエンジニア 41 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ iOS (iPhone /iPad) Android インフラエンジニア AWS Google Cloud Azure Docker Terraform
42. インフラエンジニア • サーバーの設定・構築や監視をする人 ◦ クラウドを利用することが一般的になり、物理的な機器を取り扱うことは少ない • おもな技術キーワード ◦ AWS, Google Cloud, Azure, Docker, Kubernetes, Terraform … • 補足 ◦ AWS (Amazon Web Services) ▪ Amazonが提供しているクラウドコンピューティングサービスの総称です ▪ サーバーやデータベースなど用途に合わせたコンピューターを提供しています ◦ SRE（Site Reliability Engineering） ▪ インフラエンジニアの部署やチームをSRE と呼ぶことがあります ▪ 『ユーザーがいつでも快適にサービスを利用できる状態（信頼性）』の維持を指す ▪ 具体的には、インフラ業務を自動化や大量のアクセスに耐えられる仕組みを作る 42
43. AWS が提供するサーバー機能 出典：Amazon Web Service (AWS) 43 約200個のサービス！
44. モノづくり 44
45. インターネットとは？ 45
46. 無線で繋がるクラウド 46 インターネット
47. ではなくて... 47
48. こんな仕組みです！ 48 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ iOS (iPhone /iPad) Android
49. そして、 複数のエンジニアと 様々な技術を組み合わせて 作られています 49
50. まとめ：Web サービスの構成図 50 インターネット Web サーバー データベース プログラム ユーザー Web ブラウザ iOS (iPhone /iPad) Android フロントエンドエンジニア アプリエンジニア インフラエンジニア バックエンドエンジニア Swift Ruby Python PHP AWS Google Cloud Azure JavaScript HTML CSS Go Kotlin Docker Terraform
51. 以上です！ 51
52. Appendix 52
53. ほかにもエンジニアがいっぱい！ • コーポレートエンジニア ◦ 社内SEや情シスなどに近い領域に、エンジニアが必要とされる様になってきています ◦ 業務ツールをクラウド利用 (SaaS) する場合が多く、関連業務の効率化/自動化が一般的に • RPAエンジニア ◦ 繰り返し発生する業務を自動化するRPA (Robotic Process Automation) の導入も盛ん ◦ プログラミングとは異なるが、『業務手順（シナリオ）』の定義はエンジニアの発想が必要 • テストエンジニア ◦ ソフトウェアの品質を担保する人で、『QA (Quality Assurance) エンジニア』とも呼びます ◦ Selenium などを使い『自動的にソフトウェアを操作してテストする』仕組みを作ります • セキュリティエンジニア ◦ 技術・システムを取り巻く様々な脅威に対して対策していくエンジニアです デジタルトランスフォーメーション (DX) の重要性が増す現代においては、 『エンジニア』が必要のない部署は存在しないと言っても過言ではありません 53 参考：どれ目指す？IT業界のエンジニア職19種類と仕事内容をまるっと解説 - paiza開発日誌
54. アジャイル開発したい 無自覚なPMがエンジニアに「価値の分解」を丸投げしちゃダメです！ 自覚はないかもしれませんが、あなたはPMとしての役割の一部もしくは全部を担っています。 あなたがアジャイルとはなんぞや？ を学んでから始めても遅くはないです （もしくはエンジニアと一緒に学びながらやりましょう）。 エンジニアだけでなく、PMとも面談させてもらいましょう。 どんな人がPMの役割を担っているかは重要です。 PMに「どうやって開発する機能を決めていますか？」「バグが発覚した際に、いま進んでいる機能開発 とどの様に折り合い（優先順位）を付けていますか？」など聞いてみると良いかも。 54 経営者「アジャイルで開発しよう」 エンジニア「アジャイル開発している会社に転職したい」