IT 未経験者をVue.js で開発できる IT コンサルタントに育てあげる秘訣/ Future's New Employee Training

Vue Fes Japan 2024 プラチナスポンサーセッションの登壇資料です。

Transcript

1. Public Copyright ©︎ 2024 by Future Architect, Inc. IT未経験者をVue.jsで開発できる ITコンサルタントに育てあげる秘訣 ～フューチャーの新人研修の取り組み～ Vue Fes Japan 2024 2024/10/19 Sat. フューチャーアーキテクト株式会社 Future Value Group シニアコンサルタント 永井優斗 @yut0naga1 Copyright ©︎ 2024 by Future Architect, Inc.
2. Public Copyright ©︎ 2024 by Future Architect, Inc. 自己紹介/Who Am I? 永井優斗(Yuto Nagai) 経歴 北海道大学経済学部経済学科卒、北海道大学公共政策大学院修了(文系) 2017年フューチャー新卒入社。 流通・小売（大手スーパー、アパレル）、ヘルスケア（医療機器・製薬会社等）の企業向けITコンサルティング、システム構築を実施。 2024年新人研修リーダーとして4月期の新卒向け新人研修の推進を担当。 好きな言語 もちろんVue.js TypeScript （なんだかんだJavaなども触ります。DB（SQL）触ることも多めかも。） 資格 中小企業診断士、日商簿記2級、基本情報技術者、剣道2段、BBQインストラクター、パエリア検定上級など Keywords(趣味など) #去年はボランティアスタッフ #アウトドア #ディベート部 #剣道部 #愛知県出身 #新日本プロレス #ロスインゴベルナブレスデハポン #プロレスリングFREEDOMS #葛西純選手 #TSKaigi運営委員 #鳥貴族 #リトルトゥース @yut0naga1 @yut0n @yut0naga1
3. Public Copyright ©︎ 2024 by Future Architect, Inc. 会社紹介/What is Future Architect? ◼ 日本初のITコンサルティングファーム（店頭公開時「ITコンサルティングサービス」で初の登録） 1989年のフューチャーシステムコンサルティング創業以来、様々な業種・業態のお客様をITで支援してきました
4. Public Copyright ©︎ 2024 by Future Architect, Inc. えっ？ITコンサルの会社？ Vue.js使ってるの？ そもそも社員が開発しているの？
5. Public Copyright ©︎ 2024 by Future Architect, Inc. 現在ではなく未来、部分最適ではなく全体最適、そして経営戦 略・業務改革・システム改革の三位一体の複合的な視点からコン サルティングを行い、システムを構築することで、お客様のビジネス変 革を実現し、企業価値の永続的向上に貢献します。 経営・業務・ITの三位一体改革の実現 主要事業であるフューチャーアーキテクト株式会社を中心に、 お客様の経営戦略からリアルタイムアーキテクチャをベースとした システムの実装、業務改革までを担うコンサルティングサービスを 提供しています。 経営とITをデザインする 会社紹介/What is Future Architect? フューチャーの強み/Future’s Strong Points
6. Public Copyright ©︎ 2024 by Future Architect, Inc. 豊富な業務ノウハウと技術力を強みに、グランドデザイン （基本構想、システム化計画）から要件定義、システム の設計、開発および導入支援までお客様と一体になって 一気通貫でプロジェクトを推進します。システム稼働後も 継続的な価値向上に貢献します。 戦略立案 システム構築 運用保守 トータルコスト・期間 一気通貫のプロジェクトマネジメント 常にお客様に寄り添い、最先端テクノロジーを駆使しながら IT投資の削減やIT活用による新しいビジネス・プロセスの創造に 貢献します。社外CIOのような中立的な立場で、お客様の企業 価値を最大化することが使命です。 中立的なポジションで技術力を発揮 会社紹介/What is Future Architect? フューチャーの強み/Future’s Strong Points
7. Public Copyright ©︎ 2024 by Future Architect, Inc. 社員が戦略・業務の検討から 文字通りの実装・開発も責任をもって担当。 真の一気通貫で仕事を進めています！
8. Public Copyright ©︎ 2024 by Future Architect, Inc. 会社紹介/What is Future Architect? フューチャーグループ/Future Group ◼ フューチャーグループとして最新テクノロジーをベースに、「ITコンサルティング&サービス事業」 「ビジネスイノベーション事業」の2軸で事業展開しています。 「ITコンサルティング＆サービス事業」は、 フューチャーアーキテクトを中心にグループ一丸となり、 IT戦略パートナーとして経営戦略から業務改革まで あらゆる課題に向き合い、お客様の未来に新たな価値を提供 します。 「ビジネスイノベーション事業」は、 これまでに培ってきた業務とテクノロジーのノウハウや知見を マーケティング、スポーツ、教育、ECなどの分野で実践し、 新しいサービスを展開することで、社会の発展に貢献します。
9. Public Copyright ©︎ 2024 by Future Architect, Inc. メディア × IT 教育 × IT 会社紹介/What is Future Architect? フューチャーグループ/Future Group スポーツ × IT ◼ グループで得られた知見を共有して新たな付加価値に転換し、 お客様に提供するというポジティブな循環をつくり出すことで、社会の変革に貢献しています。
10. Confidential Copyright ©︎ 2024 by Future Architect, Inc. Confidential Public Future Meets Vue.js フューチャーとVue.jsの出会い
11. Public Copyright ©︎ 2024 by Future Architect, Inc. フューチャーとVue.js ◼ 2017年ごろ新しい社内標準フレームワークの技術要素としてVue.jsを採用しました。 ◼ それに伴い2018年以降、Vue.jsを採択するプロジェクトが加速的に増加！ ◼ 多様な業種・業態の業務向けアプリケーション開発に利用しています。  Vue.js採用PJの顧客企業の業種・業態例： 新聞・スーパーマーケット・アパレル・銀行・製薬・医療機器・エネルギー・コンビニエンスストア 等
12. Public Copyright ©︎ 2024 by Future Architect, Inc. 「加速的な増加」= Vue.js開発経験者が足りない！ ※私自身も2020年に初めてVue.jsで開発をしました。
13. Public Copyright ©︎ 2024 by Future Architect, Inc. Vue.js開発者の確保・育成にどう対応するか ◼ 採用プロジェクトでの開発者体験を向上させる取り組みを実施しています。  eslint-plugin-vueメンテナーである当社太田（ota-meshi）による最強のLint環境  キャッチアップドキュメント、学習用動画コンテンツを社内に広く提供、・・・etc.  詳しくはVue Fes Japan 2022 Onlineでの当社 星・岸本による発表 「業務システムでVue.jsを活用するための取り組み」(YouTubeで公開中)をご覧ください。 ◼ 2022年より、新卒入社者向けの研修（新人研修）内でもVue.jsの取り扱いを 開始、2024年からはWEBアプリ開発のカリキュラムは完全にVue.jsに移行しました。  次スライドより、新人研修での取り組みについて説明します。 ◼ もちろん、経験者の採用も積極的に行っています。ぜひ一緒に働きましょう！
14. Public Copyright ©︎ 2024 by Future Architect, Inc. Future’s New Employee Training フューチャーの新人研修
15. Public Copyright ©︎ 2024 by Future Architect, Inc. フューチャーの新人研修 ◼ ITの原理原則、ITコンサルタント/社会人としての基礎を身につけるためのカリキュラム ◼ 新卒入社はIT経験は不問で採用のため、IT未経験者・経験者が混在しています。 そのため、2024年度より入社時のITスキルに合わせた2コースを用意しています。 ◼ 以下は未経験者向けコースの標準スケジュールです。  この後のスライドは本コースに沿って説明していきます。 IT基礎 1ヶ月 コンサル タント 基礎 カルチャ ー 情報処理技術者試験範囲のテスト（IT基礎知識の体系的な修得） ロジカルコミュニケーション IT 役員講義 ペア・ワーク（タスク完遂力の修得） WEBアプリの設計・開発・テスト ビジネスコンテスト 研修リーダーとの 1on1 各事業部講義 2ヶ月 3ヶ月 4ヶ月 5ヶ月 OJT
16. Public Copyright ©︎ 2024 by Future Architect, Inc. フューチャーの新人研修 ◼ ITの原理原則、ITコンサルタント/社会人としての基礎を身につけるためのカリキュラム ◼ 新卒入社はIT経験は不問で採用のため、IT未経験者・経験者が混在しています。 そのため、2024年度より入社時のITスキルに合わせた2コースを用意しています。 ◼ 以下は未経験者向けコースの標準スケジュールです。  この後のスライドは本コースに沿って説明していきます。 IT基礎 1ヶ月 コンサル タント 基礎 カルチャ ー 情報処理技術者試験範囲のテスト（IT基礎知識の体系的な修得） ロジカルコミュニケーション IT 役員講義 ペア・ワーク（タスク完遂力の修得） WEBアプリの設計・開発・テスト ビジネスコンテスト 研修リーダーとの 1on1 各事業部講義 2ヶ月 3ヶ月 4ヶ月 5ヶ月 OJT HTML/CSS・git・Java・SQL・JS・Vue.js といった各技術を身に着けるパート Vue.js＋Spring BootでWEBアプリを設計実 装・テストまで仮想PJを仕事として完遂するパート
17. Public Copyright ©︎ 2024 by Future Architect, Inc. 新人研修というと ◼ 手取り足取り、たくさんの講義を受講し続けて1日が終わるイメージがありますが、
18. Public Copyright ©︎ 2024 by Future Architect, Inc. 新人研修というと ◼ 手取り足取り、たくさんの講義を受講し続けて1日が終わるイメージがありますが、 フューチャーでは必要最低限のものに絞っています。
19. Public Copyright ©︎ 2024 by Future Architect, Inc. 新人研修は完全成果型 ◼ 自学自習をベースに、完全成果型＝新人のアウトプット（テスト・成果物）を確認して、 到達度を測るスタイルを導入しています。  学習の標準ラップ（期日）があり、そこまでに完了させることを目標に自分の力で進めます。  期日が来たから終わり、ではなく、合格しなければ完了しません（研修の延長・早期卒業が ありうる）。
20. Public Copyright ©︎ 2024 by Future Architect, Inc. 「教えない」時間 ＞「教える」時間 ◼ 下記は研修中の1週間のカレンダーのイメージです。 空いている時間は休みというわけではなく、自習・課題を取り組む試行錯誤の時間です。
21. Public Copyright ©︎ 2024 by Future Architect, Inc. Copyright ©︎ 2024 by Future Architect, Inc. Vue.js in New Employee Training 新人研修とVue.js
22. Public Copyright ©︎ 2024 by Future Architect, Inc. CodeCampとタッグで研修を運営 ◼ 前半のIT基礎パートではCodeCampを利用しています。 IT基礎 1ヶ月 コンサル タント 基礎 カルチャ ー 情報処理技術者試験範囲のテスト（IT基礎知識の体系的な修得） ロジカルコミュニケーション IT 役員講義 ペア・ワーク（タスク完遂力の修得） WEBアプリの設計・開発・テスト ビジネスコンテスト 研修リーダーとの 1on1 各事業部講義 2ヶ月 3ヶ月 4ヶ月 5ヶ月 OJT HTML/CSS・git・Java・SQL・JS・Vue.js といった各技術を身に着けるパート
23. Public Copyright ©︎ 2024 by Future Architect, Inc. CodeCampとタッグで研修を運営 ◼ 前半のIT基礎パートではCodeCampを利用しています。 ◼ CodeCampはオンライン・プログラミング教育事業を行っているフューチャーグループの 事業会社です。 IT基礎 1ヶ月 コンサル タント 基礎 カルチャ ー 情報処理技術者試験範囲のテスト（IT基礎知識の体系的な修得） ロジカルコミュニケーション IT 役員講義 ペア・ワーク（タスク完遂力の修得） WEBアプリの設計・開発・テスト ビジネスコンテスト 研修リーダーとの 1on1 各事業部講義 2ヶ月 3ヶ月 4ヶ月 5ヶ月 OJT
24. Public Copyright ©︎ 2024 by Future Architect, Inc. Vue.jsの教材はCodeCampで提供 ◼ オンライン上で確認できる教科書＋提出課題を提供しています。 ◼ 現役エンジニアであるCodeCampの講師にGoogle Meet（レッスン）やSlackで 質問できます。レッスンは質問対応だけでなくペアプロや課題のソースレビューも可能です。  実際に研修の様子を見ている印象値ですが、Vueについてはコンポーネントの親子関係/データの受け渡し （props down, event upやslot等）に関する質問が多かったです。 Code Camp教材 に沿って自学自習 オンライン上で講師に 相談・質問 受講者 講師（現役のVueエンジニア）
25. Public Copyright ©︎ 2024 by Future Architect, Inc. 提出課題で理解度を確認 ◼ 与えられた要件に沿ってコーディングする提出課題で理解度を確認  Vue.jsの課題は「Vue.jsを利用したブラウザ上で動くカウントダウンタイマー」 ◼ 単に動いたら合格というわけではなく、可読性等も考慮したソースコードレビューを実施し、 合否とともに受講者にフィードバック。不合格なら合格するまでチャレンジ。 受講者 講師 フィードバック例： 要件がXXXですが、YYYな実装になっています。 ZZZと操作した場合はエラーになりますね。 …はマジックナンバーを使わず定数にしましょう。 ～はメソッドに切り出しましょう。…etc.
26. Public Copyright ©︎ 2024 by Future Architect, Inc. 現場の先輩社員も巻き込んで研修を運営 ◼ 後半のペア・ワークパートは、プロジェクトにアサインされている先輩社員とやりとり （＝ペア・ワーク）しながら、最終的には設計から開発テストまで一気通貫でWebアプリ を完成させます。 IT基礎 1ヶ月 コンサル タント 基礎 カルチャ ー 情報処理技術者試験範囲のテスト（IT基礎知識の体系的な修得） ロジカルコミュニケーション IT 役員講義 ペア・ワーク（タスク完遂力の修得） WEBアプリの設計・開発・テスト ビジネスコンテスト 研修リーダーとの 1on1 各事業部講義 2ヶ月 3ヶ月 4ヶ月 5ヶ月 OJT Vue.js＋Spring BootでWEBアプリを設計実 装・テストまで仮想PJを仕事として完遂するパート
27. Public Copyright ©︎ 2024 by Future Architect, Inc. プロジェクトを模した開発課題 ◼ 顧客企業向け社員管理システム開発プロジェクトを題材に、エンハンスを実施します。  課題① 要件定義書と設計書をもとに、社員情報を表示・登録・編集する画面を開発・テスト  課題② 要件定義書をもとに、ログイン機能・ロール機能を設計から開発・テスト ◼ フロントエンドはもちろんVue 3を採用し、SPA（Single Page Application）を開発します。  なおサーバーサイドはJava（Spring Boot）、DBはPostgreSQLを採用しています。  もともとはJSP＋サーブレットを利用したアプリ開発でしたが、2022年より課題②を、2024年 から課題①を刷新し、完全にVue.js＋Spring Bootへ移行しました。
28. Public Copyright ©︎ 2024 by Future Architect, Inc. プロジェクトを模した開発課題 ◼ 顧客企業向け社員管理システム開発プロジェクトを題材に、エンハンスを実施します。  課題① 要件定義書と設計書をもとに、社員情報を表示・登録・編集する画面を開発・テスト  課題② 要件定義書をもとに、ログイン機能・ロール機能を設計から開発・テスト ◼ フロントエンドはもちろんVue.jsを採用し、SPA（Single Page Application）を開発します。  なおサーバーサイドはJava（Spring Boot）、DBはPostgreSQLを採用しています。  もともとはJSP＋サーブレットを利用したサーバーレンダリングなアプリ開発でしたが、2023年より 課題②を、2024年から課題①を刷新し、完全にVue.js＋Spring Bootへ移行しました。 ※実際に受講者が作ったWebアプリケーション、設計書の一部です。
29. Public Copyright ©︎ 2024 by Future Architect, Inc. 現場と同じ「仕事の進め方」を身に着ける ◼ 実際の業務と同じく、作業計画を立てるところからレビュアー（上長役）とのやりとりを 通して成果物を完成させます。レビューでOKが貰えなければ、もちろんやりなおし。  WEBアプリ構築の技術習得だけでなく、「仕事の進め方」を実践しながら身に着けることを 目的としています。 計画 設計 開発 単体テスト WBS作成 仕様書 作成 開発レビュー 開発実施 設計レビュー WBSレビュー 設計実施 仕様書 レビュー テスト 実施 エビデンス レビュー 仕様書 作成 仕様書 レビュー テスト 実施 結合テスト 仕様書 作成 仕様書 レビュー テスト 実施 エビデンス レビュー ※各レビューにはレビュー指摘による修正対応と再レビュー（の繰り返し）を含む 課題② 「要件定義書をもとに、ログイン機能・ロール機能を設計から開発・テスト」の場合 レビュアーはプロジェクトで働いている先輩社員。 各プロジェクトのご理解のもと、協力いただいています。 また、レビュアー活動は全社貢献として評価の対象としています。
30. Public Copyright ©︎ 2024 by Future Architect, Inc. 実装方法も自分で考えて相談して決める 社員マスタ 社員ID 社名 ロールID ・・・ テーブルにどのような形で ロールの情報持たせようか な？ 機能をまたいだ データの受け渡しはどう やろうかな？ Pinia使ってみよう。 認証・認可どうやろうかな？ Spring Securityというの があるらしいぞ ◼ あくまで要件定義書を満たす範囲でありますが、実装方法はレビュアーと相談しながら、 自分で考えて設計を行います。  足りない知識は、適宜提供した教材以外もキャッチアップ（社内外）しながら進める  もちろん考えるヒントは研修リーダーやレビュアーから与えられるがあくまでヒント 新人
31. Public Copyright ©︎ 2024 by Future Architect, Inc. 実装方法も自分で考えて相談して決める ◼ あくまで要件定義書を満たす範囲でありますが、実装方法はレビュアーと相談しながら、 自分で考えて設計を行います。  足りない知識は、適宜提供した教材以外もキャッチアップ（社内外）しながら進める  もちろん考えるヒントは研修リーダーやレビュアーから与えられるがあくまでヒント …という理由で、～～という方針で 実装したいと思っています。 ～～使うのか！いいね！ ---の箇所は***についても考慮し てみるとどうかな？ 新人 レビュアー
32. Public Copyright ©︎ 2024 by Future Architect, Inc. まとめ IT未経験者をVue.jsで開発できるITコンサルタントに育てあげる秘訣 ◼ 「教えない」、「完全成果型」で「現場と同じ」く、自分で手を動かして終わらせないと 修了しない厳しい研修 ◼ しかし、自ら考えて、行動できるようにするためのサポートは手厚くフォロー ◼ 全社＆グループ会社を挙げたカリキュラム＆研修体制 そんな研修のメインディッシュとしてVue.jsを取り扱っているからこそ、 Vue.jsで開発できるITコンサルタントに育ちます。
33. Public Copyright ©︎ 2024 by Future Architect, Inc. 今日話さなかったこと ◼ 今日はVue Fesという場なので新人研修運営の中でも、Vue.jsにあまり関わらない 部分は割愛しています。 （気になる方はぜひ懇親会や別の機会で話しましょう！） ◼ Vue.js以外のITカリキュラムの話  Java、SQL、経験者コースで実施している試験方法…etc. ◼ ITカリキュラム以外のカリキュラムの話  仕事の進め方、ビジネスのためのロジカル・コミュニケーション、カルチャー浸透…etc. ◼ 研修運営の話  なぜ人事じゃなくて現場のコンサルが担当しているの？…etc. ◼ そもそもヒトを育てる・成長支援とは？という話（研修期間一番考えてたこと）  そして、ヒトを育てるって難しいなあ…というぼやき
34. Public Copyright ©︎ 2024 by Future Architect, Inc. 未来報 フューチャーのオウンドメディアです。 人、カルチャー、仕事などが知れる！ https://note.future.co.jp/ 技術ブログ 最新の技術トピックから初心者向けのおすすめ記事まで 技術視点でFutureの魅力がわかる！ https://future-architect.github.io/ Tech Cast 社員が有志で運営しているラジオ放送です。 今話題になっていることから社員が語りたいことを ひたすら語る会まで様々なラインナップがございます！ https://open.spotify.com/show/6ntaBQ28GSDaOztBphH6oi About Future
35. フューチャー技術ブログ • 企業のブログの中では更新数が多いテックブログです • たまにバズる記事もちょくちょくでています • ぜひチェックしてもらえると嬉しいです 私も初心者向け記事を書いてます Vue.jsの記事も 増えてます Copyright ©︎ 2024 by Future Architect, Inc.
36. Public Copyright ©︎ 2024 by Future Architect, Inc. Thank you for listening. 本プレゼンに記載されている会社名又は製品名、技術要素名は，それぞれ各社又は各組織の商標又は登録商標です。 なお，本プレゼンでは，TM 及び ® を明記していません。