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

Slide 1

Slide 1 text

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.

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Public Copyright ©︎ 2024 by Future Architect, Inc. 現在ではなく未来、部分最適ではなく全体最適、そして経営戦略・業務改革・システム改革の三位一体の複合的な視点からコンサルティングを行い、システムを構築することで、お客様のビジネス変革を実現し、企業価値の永続的向上に貢献します。経営・業務・ITの三位一体改革の実現主要事業であるフューチャーアーキテクト株式会社を中心に、お客様の経営戦略からリアルタイムアーキテクチャをベースとしたシステムの実装、業務改革までを担うコンサルティングサービスを提供しています。経営とITをデザインする会社紹介/What is Future Architect? フューチャーの強み/Future’s Strong Points

Slide 6

Slide 6 text

Public Copyright ©︎ 2024 by Future Architect, Inc. 豊富な業務ノウハウと技術力を強みに、グランドデザイン（基本構想、システム化計画）から要件定義、システムの設計、開発および導入支援までお客様と一体になって一気通貫でプロジェクトを推進します。システム稼働後も継続的な価値向上に貢献します。戦略立案システム構築運用保守トータルコスト・期間一気通貫のプロジェクトマネジメント常にお客様に寄り添い、最先端テクノロジーを駆使しながら IT投資の削減やIT活用による新しいビジネス・プロセスの創造に貢献します。社外CIOのような中立的な立場で、お客様の企業価値を最大化することが使命です。中立的なポジションで技術力を発揮会社紹介/What is Future Architect? フューチャーの強み/Future’s Strong Points

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Public Copyright ©︎ 2024 by Future Architect, Inc. 会社紹介/What is Future Architect? フューチャーグループ/Future Group ◼ フューチャーグループとして最新テクノロジーをベースに、「ITコンサルティング&サービス事業」「ビジネスイノベーション事業」の2軸で事業展開しています。「ITコンサルティング＆サービス事業」は、フューチャーアーキテクトを中心にグループ一丸となり、 IT戦略パートナーとして経営戦略から業務改革まであらゆる課題に向き合い、お客様の未来に新たな価値を提供します。「ビジネスイノベーション事業」は、これまでに培ってきた業務とテクノロジーのノウハウや知見をマーケティング、スポーツ、教育、ECなどの分野で実践し、新しいサービスを展開することで、社会の発展に貢献します。

Slide 9

Slide 9 text

Public Copyright ©︎ 2024 by Future Architect, Inc. メディア × IT 教育 × IT 会社紹介/What is Future Architect? フューチャーグループ/Future Group スポーツ × IT ◼ グループで得られた知見を共有して新たな付加価値に転換し、お客様に提供するというポジティブな循環をつくり出すことで、社会の変革に貢献しています。

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Public Copyright ©︎ 2024 by Future Architect, Inc. フューチャーとVue.js ◼ 2017年ごろ新しい社内標準フレームワークの技術要素としてVue.jsを採用しました。 ◼ それに伴い2018年以降、Vue.jsを採択するプロジェクトが加速的に増加！ ◼ 多様な業種・業態の業務向けアプリケーション開発に利用しています。  Vue.js採用PJの顧客企業の業種・業態例：新聞・スーパーマーケット・アパレル・銀行・製薬・医療機器・エネルギー・コンビニエンスストア等

Slide 12

Slide 12 text

Slide 13

Slide 13 text

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に移行しました。  次スライドより、新人研修での取り組みについて説明します。 ◼ もちろん、経験者の採用も積極的に行っています。ぜひ一緒に働きましょう！

Slide 14

Slide 14 text

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Public Copyright ©︎ 2024 by Future Architect, Inc. 新人研修は完全成果型 ◼ 自学自習をベースに、完全成果型＝新人のアウトプット（テスト・成果物）を確認して、到達度を測るスタイルを導入しています。  学習の標準ラップ（期日）があり、そこまでに完了させることを目標に自分の力で進めます。  期日が来たから終わり、ではなく、合格しなければ完了しません（研修の延長・早期卒業がありうる）。

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

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 といった各技術を身に着けるパート

Slide 23

Slide 23 text

Public Copyright ©︎ 2024 by Future Architect, Inc. CodeCampとタッグで研修を運営 ◼ 前半のIT基礎パートではCodeCampを利用しています。 ◼ CodeCampはオンライン・プログラミング教育事業を行っているフューチャーグループの事業会社です。 IT基礎 1ヶ月コンサルタント基礎カルチャー情報処理技術者試験範囲のテスト（IT基礎知識の体系的な修得）ロジカルコミュニケーション IT 役員講義ペア・ワーク（タスク完遂力の修得） WEBアプリの設計・開発・テストビジネスコンテスト研修リーダーとの 1on1 各事業部講義 2ヶ月 3ヶ月 4ヶ月 5ヶ月 OJT

Slide 24

Slide 24 text

Public Copyright ©︎ 2024 by Future Architect, Inc. Vue.jsの教材はCodeCampで提供 ◼ オンライン上で確認できる教科書＋提出課題を提供しています。 ◼ 現役エンジニアであるCodeCampの講師にGoogle Meet（レッスン）やSlackで質問できます。レッスンは質問対応だけでなくペアプロや課題のソースレビューも可能です。  実際に研修の様子を見ている印象値ですが、Vueについてはコンポーネントの親子関係/データの受け渡し（props down, event upやslot等）に関する質問が多かったです。 Code Camp教材に沿って自学自習オンライン上で講師に相談・質問受講者講師（現役のVueエンジニア）

Slide 25

Slide 25 text

Public Copyright ©︎ 2024 by Future Architect, Inc. 提出課題で理解度を確認 ◼ 与えられた要件に沿ってコーディングする提出課題で理解度を確認  Vue.jsの課題は「Vue.jsを利用したブラウザ上で動くカウントダウンタイマー」 ◼ 単に動いたら合格というわけではなく、可読性等も考慮したソースコードレビューを実施し、合否とともに受講者にフィードバック。不合格なら合格するまでチャレンジ。受講者講師フィードバック例：要件がXXXですが、YYYな実装になっています。 ZZZと操作した場合はエラーになりますね。 …はマジックナンバーを使わず定数にしましょう。～はメソッドに切り出しましょう。…etc.

Slide 26

Slide 26 text

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を仕事として完遂するパート

Slide 27

Slide 27 text

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へ移行しました。

Slide 28

Slide 28 text

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アプリケーション、設計書の一部です。

Slide 29

Slide 29 text

Public Copyright ©︎ 2024 by Future Architect, Inc. 現場と同じ「仕事の進め方」を身に着ける ◼ 実際の業務と同じく、作業計画を立てるところからレビュアー（上長役）とのやりとりを通して成果物を完成させます。レビューでOKが貰えなければ、もちろんやりなおし。  WEBアプリ構築の技術習得だけでなく、「仕事の進め方」を実践しながら身に着けることを目的としています。計画設計開発単体テスト WBS作成仕様書作成開発レビュー開発実施設計レビュー WBSレビュー設計実施仕様書レビューテスト実施エビデンスレビュー仕様書作成仕様書レビューテスト実施結合テスト仕様書作成仕様書レビューテスト実施エビデンスレビュー ※各レビューにはレビュー指摘による修正対応と再レビュー（の繰り返し）を含む課題② 「要件定義書をもとに、ログイン機能・ロール機能を設計から開発・テスト」の場合レビュアーはプロジェクトで働いている先輩社員。各プロジェクトのご理解のもと、協力いただいています。また、レビュアー活動は全社貢献として評価の対象としています。

Slide 30

Slide 30 text

Public Copyright ©︎ 2024 by Future Architect, Inc. 実装方法も自分で考えて相談して決める社員マスタ社員ID 社名ロールID ・・・テーブルにどのような形でロールの情報持たせようかな？機能をまたいだデータの受け渡しはどうやろうかな？ Pinia使ってみよう。認証・認可どうやろうかな？ Spring Securityというのがあるらしいぞ ◼ あくまで要件定義書を満たす範囲でありますが、実装方法はレビュアーと相談しながら、自分で考えて設計を行います。  足りない知識は、適宜提供した教材以外もキャッチアップ（社内外）しながら進める  もちろん考えるヒントは研修リーダーやレビュアーから与えられるがあくまでヒント新人

Slide 31

Slide 31 text

Public Copyright ©︎ 2024 by Future Architect, Inc. 実装方法も自分で考えて相談して決める ◼ あくまで要件定義書を満たす範囲でありますが、実装方法はレビュアーと相談しながら、自分で考えて設計を行います。  足りない知識は、適宜提供した教材以外もキャッチアップ（社内外）しながら進める  もちろん考えるヒントは研修リーダーやレビュアーから与えられるがあくまでヒント …という理由で、～～という方針で実装したいと思っています。～～使うのか！いいね！ ---の箇所は***についても考慮してみるとどうかな？新人レビュアー

Slide 32

Slide 32 text

Public Copyright ©︎ 2024 by Future Architect, Inc. まとめ IT未経験者をVue.jsで開発できるITコンサルタントに育てあげる秘訣 ◼ 「教えない」、「完全成果型」で「現場と同じ」く、自分で手を動かして終わらせないと修了しない厳しい研修 ◼ しかし、自ら考えて、行動できるようにするためのサポートは手厚くフォロー ◼ 全社＆グループ会社を挙げたカリキュラム＆研修体制そんな研修のメインディッシュとしてVue.jsを取り扱っているからこそ、 Vue.jsで開発できるITコンサルタントに育ちます。

Slide 33

Slide 33 text

Public Copyright ©︎ 2024 by Future Architect, Inc. 今日話さなかったこと ◼ 今日はVue Fesという場なので新人研修運営の中でも、Vue.jsにあまり関わらない部分は割愛しています。（気になる方はぜひ懇親会や別の機会で話しましょう！） ◼ Vue.js以外のITカリキュラムの話  Java、SQL、経験者コースで実施している試験方法…etc. ◼ ITカリキュラム以外のカリキュラムの話  仕事の進め方、ビジネスのためのロジカル・コミュニケーション、カルチャー浸透…etc. ◼ 研修運営の話  なぜ人事じゃなくて現場のコンサルが担当しているの？…etc. ◼ そもそもヒトを育てる・成長支援とは？という話（研修期間一番考えてたこと）  そして、ヒトを育てるって難しいなあ…というぼやき

Slide 34

Slide 34 text

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