こんにちは！ 22新卒で開発の保護者機能チームに所属している尾沼です。この記事では22新卒エンジニアの尾沼、山家さん、船越さんの3名が行った非エンジニア新卒向け開発基礎研修についてご紹介します。
はじめに
非エンジニア新卒向け開発基礎研修とは、22新卒エンジニアが同じ新卒のビジネスサイドメンバーに向けて行ったIT研修のことです。
エンジニア新卒研修で培ったことをアウトプットする場でもあり、丸一日時間をお借りして研修を行いました。研修の目的や内容はすべて22新卒エンジニアがゼロから設定しました。
そんな研修の全体についてまるっとご紹介します！
研修の概要
まずは研修の目的を設定するところからスタートです。
新卒エンジニア内で話し合った結果、目的は以下の二つになりました。
- Web業界で活躍するために、汎用的なWebの知識を少しでも身につける
- 開発の業務を体験し、楽しさを感じる
Webサービスであるコドモンの理解を深めるためには、前提としてWebの仕組みについて理解している必要があると考えました。今後のキャリアも視野に入れ、様々なWebサービスに共通する汎用的な知識を身につけることを目指します。
また、「開発の仕事って難しそうでよくわからない」という声も耳にしたので、「開発の仕事ってちょっと楽しそう」と思えるようになることも目指しました。
そして目的を達成している状態とは、以下の2つの条件を満たしていることと定義しました。
Webサービスがブラウザに表示されるまでの仕組みをざっくり説明できるようになること
Webサイトを楽しく開発してみること
研修内容としては、午前中にWebサービスがブラウザに表示されるまでの仕組みについて説明し、午後はハンズオンとしてWebサイト開発体験を行う方針になりました。
研修準備
研修準備はエンジニア新卒研修の隙間時間を活用し、分担してスライドやWebサイト開発体験で使用するソースコードを作成しました。スライドのデザインや内容に統一性を持たせるため、使用するアイコンを統一したり、レビューをこまめに出したりとルールを設けました。
一通り研修資料が完成したら21新卒エンジニアにレビューを依頼し、内容に誤りがないか確認してもらいました。
なんとか前日までに研修資料が完成し、リハーサルを行って準備万端の状態で当日を迎えます。
最終的に研修スケジュールは以下の通りになりました。
研修当日
いよいよ研修本番です。
3人ともあまり緊張せず、むしろ久しぶりに同期と会えることを楽しみにしている様子でした。Google Meetで社内に中継するため、午前中はなんと宮崎オフィスのメンバーもオンラインで参加してもらいました🎉
早速研修の概要を説明するところからスタートです！
Webの仕組みを知ろう(前半)
山家さん担当のWebの仕組みを知ろう(前半)のゴールは、Webサイトがブラウザに表示されるまでの流れをイメージできるようになることでした。
ざっくりWebサイトが表示されるまで
URLをクリックしてブラウザにWebサイトが表示されるまでの流れを「クライアント」「サーバー」「リクエスト」「レスポンス」の4つのキーワードを用いて説明していました。
ビジネスサイドメンバーからは、一番サーバーに関する質問が多かったです。クライアントはブラウザなど具体例が身近にあるのですが、クラウドにおけるサーバーは見えないので、具体像をイメージすることが難しいようでした。
そこで一度コンピューターから離れて、ウォーターサーバーやレストランのウェイターに例えてイメージを掴んでもらう工夫をしていました。
しっかりWebサイトが表示されるまで
ここではWebサイトがブラウザに表示されるまでに登場する、よく耳にするけど理解しにくそうな概念を紹介しました。今回取り上げたのは「URL」「IPアドレス」「HTTPS」「DNS」「ロードバランサー」の5つの概念です。
IPアドレスはビジネスサイドの業務でもよく登場するため、ぜひこの場で理解してもらいたいという思いが強かったです。よくインターネット上の住所に例えられますが、ここでは電話番号に例えてわかりやすく説明していました。
Webの仕組みを知ろう(後半)
Webの仕組みを知ろう(後半)のゴールは、WebサイトとWebアプリケーションの違いを説明できるようになることでした。
発表者が私に変わり、まずは前半の復習を行うところからスタートです。
静的と動的について
WebサイトとWebアプリケーションの違いを説明するにあたり、静的と動的という概念を説明しました。ここでいう静的と動的とは、同じURLにアクセスしてもデータベースの情報などをもとに、表示されるページの内容が人によって異なるかどうかです。
この場では静的なサイトをWebサイト、動的なサイトをWebアプリケーションと区別し、それらをまとめてWebサービスと表現しました。
WebサイトとWebアプリケーションの例をそれぞれ出し合ってもらい、二つの違いをイメージできるようにしました。
Webアプリケーションの仕組み
Webアプリケーションの仕組みについて「Webサーバー」「APサーバー」「DBサーバー」の3つの概念を用いて説明しました。ここでは例として、ECサイトの商品一覧ページがブラウザに表示されるまでの経路を、処理の流れに沿って説明しました。
複数のサーバーが登場し、ビジネスサイドメンバーの表情が一瞬曇ったことを覚えています(笑)。
一旦各種サーバーの役割は置いておき、ページが表示されるまでにこのような経路を辿っているんだな、くらいの理解にとどめてもらいました。
各種サーバーの役割について
船越さんにバトンタッチし、改めてECサイトの商品一覧ページがブラウザに表示されるまでの経路を復習しました。一連の流れがわかったところで3つサーバーの役割について、それぞれ噛み砕いた表現で説明していました。
特にAPサーバーがDBサーバーと疎通する部分で、やりとりする内容を人間の会話に例えて説明しているところがわかりやすかったです。
最後に全体を通しての質疑応答やまとめをして、午前中の研修は終わりました🎉
Webサイト開発にチャレンジ
お昼休憩を挟んで午後のWebサイト開発体験がスタートしました。ここでのゴールはWebサイトを楽しく開発してみることです。
お題は「開発途中のサイトを完成サイトのように修正する」でした。
コドモンでは開発手法にペアプロやモブプロを取り入れているので、より開発チームの働き方をイメージできるようにペアプロまたはモブプロで開発してもらいました。
最初にブラウザの検証ツールの使い方やHTML、CSSの基礎を学んでもらい、その後に課題を進めてもらいました。私の担当していたグループは自分たちで修正方針を決めたり、わからないところを教え合ったりしていたので、私がいなくても課題をクリアできていたと思います(笑)。
全グループ無事課題をクリアすることができたため、このままグループごとにQ&Aコーナーを受けてもらいました。
Q&Aコーナー
時間が余った際に調整枠として設けていたコーナーです。事前にビジネスサイドメンバーから質問をもらい、一問一答形式でお答えしました。
必要に応じて他の開発メンバーや他部署のメンバーに協力してもらい、様々な視点からの回答をスライドにまとめています。もらった質問に個性が出ていて、名前を隠しても誰からの質問かなんとなくわかる気がしました。
改めて全体を通しての質問に回答し、1日の研修が終わりました。みなさん疲れている表情をしつつも、達成感に溢れた様子で通常業務に戻っていきました。
最後ビジネスサイドメンバーから、自分でもプログラミングを本やYouTubeなどで学んでみたいという声をもらい、研修を行った甲斐があったなと嬉しく思います。
研修を終えて
想定よりもスムーズに研修を行うことができ、目的も無事達成できたと思います。
研修を通して一番大変だったことは、抽象的な概念を短い時間で理解できるように説明することです。私は今回の研修で抽象的な概念1つにつき、必ず具体例や身近なものに例えることを心がけました。
しかしながら抽象的な概念は状況によって指し示す意味に幅があり、例を考える際には気をつける必要があります。
これから新卒メンバーも研修を担うことが増えると思いますが、抽象的な概念を説明するときには必ず例を提示することを自分のなかでルール化していきたいと思います。
