はじめに

以前 Hack The Nikkei で紹介されたデータアナリストにフロントエンドのスキルを！ 作って学ぶアナリティクス Handsonの対象者を更に広げ「基本的な PC 操作は不自由なくできる人」を主な対象として「Web と計測を学ぶフロントエンドハンズオン第三回」が開催されました。複数の部署から合計 8 名参加しました。今回の記事では、その代表４名がフロントエンド技術を学ぶハンズオン研修について、意義・内容・前回開催からのアップデート・成果について紹介します。

この記事の対象者

日経のエンジニア組織には自己成長するための機会がたくさんあります。今回は社内の研修にスポットを当てました。 本記事を読んで、新しいチャレンジをしたいと思った方のエントリーをお待ちしております！

この記事のポイント

• 継続して社内研修を行っています。前回の記事を引用しつつ、今回の研修でアップデートした点を紹介します。
• 新しい領域へのチャレンジも応援します。研修で充実したサポートを行っています。
• いろんな部署の人が参加し、お互い協力して研修を終えられました。

自己紹介

中川

中川は 2017 年に入社して、モバイルアプリ開発、電子版のプロモーションに携わった後、現在の戦略コンテンツグループに異動しました。業務内容はビジュアルコンテンツを作成したり、業務を楽にできる仕組みを作ったりしています。

清水

2022 年 4 月からエンジニア組織の専任の採用担当をしています。それまでは、新聞のセールスプロモーション、管理系の仕事に携わってきました。エンジニアは未経験です。

鈴木

プラットフォーム推進室データインテリジェンスグループに所属するビジネスアナリストの鈴木です。Atlas のデータを用いて各事業・サービスにおける施策の効果検証や利用者理解のための分析に取り組んでいます。2023 年 1 月に入社しました。データ分析向けプログラミングの経験はありますが、エンジニアとしての経験はありません。

千﨑

2022 年 4 月に編集データビジュアルセンターに入社しました。ニュースをわかりやすくビジュアルに伝える日経ビジュアルデータを制作するエンジニアです。

フロントエンドハンズオンとは

ハンズオン研修の意義

日経が読者と接する場面はデジタルに転換しており、デジタルならではの双方向なコミュニケーションができるようになっています。新聞を印刷して配るだけの一方通行ではなく、誰がどのようなニーズで記事を読んだのか、あるいは、その人はどのようなバックグラウンドを持った人なのか、その人は記事を読んで何を解決したいのかなど、読者の情報がわかるようになってきました。

日経では内製しているプロダクトもあれば外注しているプロダクトもあります。プロダクトオーナーとしての日経が、一つ一つのデジタルサービスをより良いものにし、正しい相手に正しい価値を届ける責務があります。

これを実行するには、社員全員がデジタルの当たり前な知識・理解を備え、日々正しい意思決定ができなければなりません。そのために、まずは日経が最も多く運営する Web を起点に技術を理解することから始めることにしました。そして、サーバーやクライアントの役割を学び、フロントエンドを自分事化します。

ハンズオン研修の狙い

ハンズオン研修の狙いは、データアナリストがフロントエンド技術の理解を深め、

• 扱っているデータの性質を把握し、集計の効率を高める
• データを受け手に正しく説明できる
• 必要だが不足しているデータに気付き計測実装に関与できる

といったことを可能にするために実施しました。参加メンバーとしてはデータアナリストに限らず、興味がある人全員が参加できる研修です。社内 Qiita で参加を呼びかけました。

ハンズオン研修の内容と前回からのアップデート

内容は前回のデータアナリストにフロントエンドのスキルを！ 作って学ぶアナリティクス Handson同様、 Web の原理原則と Web サイトの計測にフォーカスしたもので、データドリブン意思決定プロセスの「準備・収集」を理解するものです。

今回は過去の開催に比べると参加メンバーの所属部署が多様化しました。編集局からも参加者がいたので、デジタル事業の現場の会というよりも社業と関わりの深いところにデジタルの知識経験が広がっていく実感を持ちました。

前回までは 、開発端末の Mac を持っているメンバーが CLI でシェルスクリプトを使うことを前提としていましたが、今回は PowerShell を使って Windows にも対応しました。加えて開発端末ではない業務端末で、CLI 操作をせずとも進められるように GitHub Actions を活用して CD パイプラインを組み立てておくようにしました。こうすることで練習で作成した HTML を Firebase にデプロイする作業を自動化しました。

また、コンテンツも参加者の前提知識に合わせて調整し、基礎を増やし応用を減らしました。 具体的には Web サイトの構築（電卓の課題など）や派生するテーマの議論（Cookie など）を控えめにし、ハンズオンにフォーカスしました。

ハンズオン研修の流れ

今回のハンズオン研修は合計７日間です。大きく分けて３部構成になっています。

• Day0 から Day1 は基礎の基礎を学び、Web の仕組みや情報の流れを理解しました。
• Day2 から Day4 は自分の Web サイトと擬似的でスモールな Atlas を構築しました。
• Day5 から Day6 は構築した Web サイトへのアクセスを計測しました。

前回に続き「取り残さない」方針で、全体の進み具合に応じて各回のテーマを調整しました。予習・復習・課題を前提とし、特に振り返り投稿と課題提出は必須です。

内容の紹介

今回で 3 回目の研修となります。

まずは Web サイトの基礎講習から始まり、Node.js が動く作業環境を構築しました。HTML、CSS を使って Web サイトを作りました。さらにクライアントサイドに JavaScript を書き、プログラミングとオブジェクト指向を学習しました。サーバーサイドのプログラミングを書き、クライアントとサーバーの違いを理解していきました。

Web サイトを公開し、Google Tag Manager を入れ、Atlas Tracking JS を導入し、サイトの計測をしました。何のデータが必要か、そのためにどこにタグを入れればよいかなど、実践的な内容です。

ハンズオンの良いところは途中で追いつかなくなっても、フォローしてもらって追いつけ、随時質問ができる点が、録画型のオンライン講座とは格段に違います。

研修参加後の振り返り

講師側の感想

一年を通じて複数の研修を開催していますが、フロントエンドハンズオンは手を動かすことから当然「手応え」を感じやすく、お互いのアウトプットが見られるので純粋に面白い研修でした。

今回はエンジニアリングのバックグラウンドが全く無い参加者もいたことで、前提知識のばらつきが大きかったのですが、Slack Huddle を活用するなどして参加者同士の互助が活発に行われていました。

個人的に「スキルの掛け合わせ」を重要だと考えていて、他の人とは異なる掛け合わせを持つことで得意なことを活かす機会が生まれたり、オンリーワンな存在になれる、それが仕事の楽しさや評価に繋がると思うのです。また「越境する」ことも最近の働き方として重要だと思います。自分の仕事ではないけれど、興味があるとか、サポートできるから、ということで部署や役割の垣根を越えていく… ハンズオンでは異なる部署の人同士で、お互いにやっていることを打ち明けながら協力していました。型にはまらず、共にチャレンジしていく、そういう機会になっていたら良いなと思います。

参加者側の感想

中川

一応エンジニアなので研修メンバーに何かしらのサポートはできるはず!と考え自分が学ぶための研修ではありますが、どうすれば研修がスムーズに進行できるのか、時間と手間を掛けて研修を主催していただいている講師をサポートできることを考えていました。少しでも質問へのハードルが下がったらいいなと思い、詰まって即座に止めたら「ナイス！質問！」「ナイス！ストップ！」の声掛けで盛り上げていました。質問しても丁寧にサポートしていただけたので濃密な研修時間を過ごすことができました。

清水

コードを書くこと自体が初めてなため、初めはかなり戸惑いましたが、受講メンバーのフォローもあり、途中で離脱ということもなく、最後まで完走できました。サイトを作る、動かす、計測する一連の流れがわかり、その計測データを分析して、改善へつなげていく、エンジニア、アナリストの仕事の一端が垣間見られたと自分では思っています。

鈴木

分析者の立場はデータの流れにおいて最も後ろの工程です。私の過去の経験では、多くの場合、出来上がったデータを受け取って、その範疇でデータをきれいにしたり、データが足りなくて出来ないことを諦めたりしていました。今回の研修を通じ、最も手前の工程であるデータの生まれる瞬間を自分で確認する方法があることやその使われている技術を知りました。実際の運用では、もっと複雑な状況ですが、データの流れ全体の視点を以て分析に取り組みたいです。

千﨑

エンジニアという立場ではありますが、Web に詳しいわけでもないため、参加前はついていくことができるのかとても不安でしたが、楽しく理解しながら研修を終えることができました。ハンズオンや予習 Udemy をやっていく中で、「もう少し早く知っていればよかった！」と思える内容ばかりでした。入社 1 年のタイミングでフロントエンドの技術を丁寧な解説やカリキュラムを通して体系立てて学習できたことはとても良い経験になりました。

まとめと今後の展望

充実した約 ２ カ月ほどの研修に取り組み、それぞれレベルアップができる研修を行うことができました。研修を終えた後のそれぞれの展望はこちらです。

中川

早速日経ビジュアルデータの計測の実装について自信をもって質問できるようになりました。研修で得た知見を業務に生かせることこそ知識が力になることだと考えています。お客様にとって役に立つ面白いコンテンツとは何か、そういう指針や反省を繰り返すサイクルを回し満足いただけるコンテンツ制作を行いたいと思っています。

清水

学んだ経験を、これからのエンジニア採用に活かしていきたいと思います。この講習の前後で、飛躍的に募集要項に記載されている技術スタックや応募書類の理解スピードが速まりました。いつか、開発の一翼を担えたらうれしいなと思っています。

鈴木

データ分析担当者に対し、データ取得の観点でのフロントエンド知識を実践的に教える会社は日本でも多くないと思います（あればぜひ教えてください）。またデータ分析担当者の入社後オンボーディングの課題の一つは、その会社特有のデータ構造の理解ですが、入社 3 カ月以内に研修の機会を得られることで、その後の実務に対する教育のレバレッジ効果が高いです。

千﨑

Web の計測について、「こうやっているんだ！」と学ぶ事ができました。ただ単に日経ビジュアルデータのコンテンツを作るのではなく、読者がどのように記事を読んでいるのかを知った上で、コンテンツを作るのでは大きく違ってくると思います。ここで学んだことを活かして、さらにパワーアップしたコンテンツを作っていきたいです。

おわりに

日経では全社員向けの研修（詳細はこちらから）、各事業部門内で必要なスキルを身に着けるための研修など多種多様な研修があります。また、Udemy Business も利用することができ、自己研鑽をしようとする人には良い環境にあると思います。

3 回目となった今回のハンズオン研修は根強い人気がある研修です。知識がなくても、意欲があれば Web について理解が深めることができるからです。エンジニア経験がなくても、コーディングの経験ができ、サイト構築までできるので、新しい世界が広がったと感じることができました。