東京ガス内製開発チーム Tech Blog

東京ガス内製開発チームのTech Blogです!

26年卒ソフトウェアエンジニアのインターンシップを開催しました!

みなさん、こんにちは!中嶋です。 昨年度に引き続き、2024年8月26日(月)から30日(金)までの五日間で、26年卒ソフトウェアエンジニアのインターンシップを開催しました。 本記事では、インターンシップでの取り組みや、今回参加してくれた学生にまとめて頂いたレポートなどをご紹介できたらと思います!

インターンシップの概要

今回のインターンシップは、Next.js / React を利用した myTOKYOGAS フロントエンドのコンポーネント設計と開発に取り組んで頂きました。myTOKYOGAS フロントエンド開発チームでは、スクラムによるアジャイル開発を行っています。実際に手を動かす開発業務だけに取り組んでもらうのではなく、プランニングやレトロスペクティブなどの各スクラムイベントを擬似的に体験してもらいながら、スプリントの進め方やタスクの取り組み方についても学んで頂きました。また、業務を遂行していく中でデザイナーとコミュニケーションをとって連携しながら開発に取り組んで頂きました。今回のインターンシップで開発して頂いた成果物は、実際にmyTOKYOGASの本番環境にもリリースされます。改めて、短い期間でしたが取り組んで頂きありがとうございました!

参加者: 久永さんからの寄稿

それでは、今回のインターシップに参加して頂いた久永さんからのレポートをご紹介します!


はじめまして、兵庫県立大学工学部 電気電子情報工学科の久永竜琉です。 実務型のインターンシップに参加するのは今回が初めてです。よろしくお願いします。

インターンシップに応募した理由

関西で育ち、正直東京ガスは馴染みのない企業でした。

そんな中、逆求人形式のイベントで中島さんと出会い、個別のカジュアル面談で中島さんが楽しそうにmyTOKYOGAS フロントエンド内製開発チームでのご経験や取り組みについて話しており、「これはただ事ではない」と思いました。

具体的には、開発を外注・委託している大企業も多い中、東京ガスという長い歴史と顧客を持つ大きな企業が自社サービスの内製化に積極的に取り組む姿勢や、中島さんという強い熱意とオーナーシップをもつエンジニアの存在に驚きました。

私自身、高校時代からITやDXを通じた社会貢献ができるエンジニアを志しており、myTOKYOGAS フロントエンド内製開発チームの取り組みや風土と自分自身の親和性が高いのではないかと感じて選考を受けたところ、ありがたく選考を通して頂き参加することになりました。

開発タスクの概要

今回のインターンシップでは、myTOKYOGAS フロントエンドの画面UIを改修しました。 具体的な業務内容としては、ButtonLinkコンポーネントリファクタリングを行いました。

ButtonLinkコンポーネント
ButtonLinkコンポーネント

背景として、Figma上でデザインされているButtonLinkコンポーネントについてデザイナーの意図とエンジニアの実装にいくつか乖離が存在していました。そのため、従来のButtonLinkコンポーネントを利用すると、デザイナーとの認識齟齬が発生する可能性があったり、コンポーネントの再利用性が低く円滑にプロジェクトを進める上で悪影響を及ぼす可能性がありました。

今回のコンポーネント改修により、

  1. デザイナーとエンジニアの認識を一致させる
  2. より使いやすいコンポーネントに改修することで、myTOKYOGASの品質を維持・向上させる

といった2点の達成につながります。

具体的な取り組みについて

1. 既存コンポーネントの実装確認(テーブル表の作成)

まず最初にやったことは、myTOKYOGASの全ページに対して該当するButtonLinkコンポーネントがどこで、どのように使われているのかをテーブル表にまとめました。これにより、コンポーネントを改修する上で要件に考慮漏れがないかを事前に確認することができました。

既存コンポーネントの実装確認
既存コンポーネントの実装確認

この取り組みによって、本来の用途であるリンク機能だけではなく、モーダルを表示するためにButtonLinkコンポーネントが使われていた箇所が存在することに気づきました。そのため改めてコンポーネントの用途や機能についてデザイナーとコミュニケーションしながら認識齟齬がないように取り組むことができました。

2. タスクの進め方を議論

既存コンポーネントの実装を確認したら、メンターを務めてくださっているエンジニアと実際にどのような変更(リファクタリング)を行うべきか議論しました。この過程を経ることで、この後の業務でやるべきことの解像度が上がり、他のエンジニアとより協働的に開発できる実感が湧きました。

タスクを分割してチケット作成
タスクを分割してチケット作成

3. コンポーネント開発

先の議論で決定した実装方針をもとに、ソースコードの改修を行います。今回はButtonLinkコンポーネントをMoleculesからAtomsへ移行し、中身のDOM構造をリファクタリングすることで、より直感的にコンポーネントを利用できるように修正しました。

ButtonLinkコンポーネントの改修その2
ButtonLinkコンポーネントの改修

4. Storybookの作成

Figma上で用意されているデザインパターンや新たに追加したpropsのパターンを網羅して、Storybookを通じてデザイナーとエンジニアが連携しながらコンポーネントが実装できるようになりました。

Storybookの作成
Storybookの作成

5. ソースコードの反映と振り返り

ソースコードを改修して変更内容をpushすると、静的型チェック、Lintやフォーマットの確認、単体テスト、E2Eテスト、スナップショットテストなどが自動的に実行されます(実際かなりの量のテストコードがありました!)。今回のインターンシップを通して、サービスのリリース速度と品質の両方を担保する上で、テスト自動化がいかに重要であるかを体感することができました。

レビューのコメントに対する修正が完了したら、開発用のブランチをマージします。開発過程の中でも達成感の高い瞬間でした。

振り返り
振り返り

その他やったこと

1. 各スクラムイベントへの参加・見学

スタンドアップ、プランニング、レトロスペクティブなどのスクラムイベントに参加、見学させていただきました。現場の実態を間近で見ることで、就職後の業務イメージがより鮮明になりました。また、スクラムという開発手法に対する自分自身の理解の甘さ、成長の伸び代などもより明確になり、スクラムの実践意欲、学習意欲が高まりました。

レトロスペクティブ
レトロスペクティブ

2. 懇親会への参加

インターン初日の夜にmyTOKYOGAS フロントエンド内製開発チームの皆さんが懇親会を開いてくださりました。人柄の良い方が本当に多く、チームの強い仲間意識と心理的安全性の高さを肌で感じ、初日ながらにチームの皆さんに打ち解けることができました。こうしたチームビルティングの重要性を理解し、実践している組織は本当に素晴らしいと思います。

3. 1 on 1

5日間の間に3名の方(エンジニアメンバーの杉山さん、迫田さん、中島さん)に約30分の1 on 1をしていただきました。1 on 1ではキャリアの歩みや価値観、面白いご経験などを気さくにお話しいただき、学びももちろん非常に楽しい時間でした。

4. さまざまな社員の方々とランチ

プロダクトオーナーやデザイナー、GM、部長、プロパー社員の方など、エンジニアメンバーのみならず毎日多くの方々とのランチ会を組んでいただきました。みなさん本当に人柄の良い方ばかりで、温厚で親しみやすく、東京ガスという組織の温かさを感じました。部長やGMなど上長にあたる役職の方々も私に対して非常にフラットに接してくださる温厚な方ばかりで、リーダーシップを持つ方々が良い人柄であるからこそ、組織全体の健全性や心理的安全性が担保されているのだと実感しました。

5. 最終日の成果発表

最終日の成果発表では、多くの方から質問や感想をいただき、貴重な経験となりました。話しやすくなるよういろんな方が配慮してくださっているのが印象的でした。

最終日の成果発表
最終日の成果発表

インターン全体を通して

参加前の期待以上であり、非常に充実した楽しい5日間でした。 初めての実務経験や多様なバックグラウンドを持つ社員の方々との交流は、就職活動にとどまらず、人生全体における大きな糧になったと感じています。この文章はインターン最終日に書いていますが、この感覚は時間が経ってより実感するようになると思います。

このインターンで得た学びを時間をかけて咀嚼し、自分自身の成長と社会貢献に繋げていきたいです。

また、ガスや電気がどのように供給されているのかなど、インフラ事業の仕組みにも興味が湧きました。自分がすでに知っている業界に限らず、様々な企業や仕事にも目を向けていきたいと感じています。

おわりに

改めて、インターンシップにご参加いただいた久永さん、お疲れさまでした!また、今回のインターシップの準備やメンターを中心となって進めてくれた北沢さん、また諸々のサポートをして頂いた方々には、この場を借りて、改めて御礼申し上げます。

まだまだ至らない点も多かったかと思いますが、少しでも学生にとって学びとなれば幸いです!

自分自身も今回のインターンシップを通してたくさんの刺激をもらったので頑張ろうと思います!

では、また次回の投稿でお会いしましょう〜