はじめまして。慶應義塾大学環境情報学部3年の佐藤心紀です。
私は、8月18日〜10月8日の8週間、インターンシップとして社内向けサービスのリニューアルに伴う開発に参加いたしました。
この記事では、インターンシップで取り組んだ業務内容をご紹介いたします。
インターンシップの概要
私がアサインされたタスクは、社内向け Chrome 拡張ストアの追加機能に関する仕様検討およびその設計・実装で、メンター社員の方や企画チームの方からフィードバックをいただきながら、最終的に新バージョンのリリースまで行いました。
社内向け Chrome 拡張ストアとは
LINEヤフーでは、社内のエンジニアによって作成された便利な Chrome 拡張機能が幅広く利用されています。しかしながら、それらは GitHub Enterprise （GHE）で配布されており、非エンジニアの社員は利用しにくい状況にありました。また、提供される拡張機能をまとめて検索するプラットフォームが存在しないという課題もあり、それらを解決するため、社内向け Chrome 拡張ストアが作られました。この Chrome 拡張ストアは、そもそも需要があるかを調査するための検証用として作られ、機能は最小限のものとなっていました。
検証の結果、Chrome 拡張ストアは一定のアクセス数を獲得し、今後もアップデートを行うことが決定しました。インターンシップのタスクとして割り当てられることとなりました。
追加した機能
-
詳細ページの作成
従来の Chrome 拡張ストアは、すべての拡張機能の並ぶ一覧ページのみでした。そのレイアウトでは各拡張機能に操作説明などの追加情報を付加することが難しかったほか、URLが分かれていないため、他のユーザーに1つの拡張機能を共有することが難しい（検索クエリの含まれる URL を共有する必要がある）という課題がありました。
そこで TOP ページより各カードをクリックすることで遷移する詳細ページを作成し、拡張性を高めるとともに、共有を容易にすることができました。
-
ダウンロード数の表示と月間ダウンロード数ランキング
各詳細ページにはその拡張機能の累計ダウンロード数が表示され、TOP ページでは先月のダウンロード数ランキングが表示されます。ランキングは1か月ごとの更新となるので、ランクインすると長い期間ページのトップに表示されることが期待でき、拡張機能開発者のモチベーションとなるほか、ダウンロードユーザーにとっても人気の拡張機能を把握しやすくなりました。
-
README の表示
以前の拡張ス トアには README 情報がなく、README の内容を確認するには GHE にアクセスする必要があるため、非エンジニアに不便な仕様になっていました。そこで、詳細ページに GHE から取得した README の内容を表示し、Chrome 拡張ストアのみで内容を確認できるようになりました。
-
追加情報の付与
従来は拡張機能の作成者に対して問い合わせを行う手段として、メールアドレスのみが提供されていましたが、Slack の連絡先を追加することで、より問い合わせが容易となりました。また、スクリーンショットを追加可能にするなど、詳細ページの作成により、さまざまな情報を提供することが可能になりました。
このほかにもさまざまな機能が検討されましたが、工数の関係からインターン期間中には実装できませんでした。
技術スタック
- Vue.js
- Express.js
- MySQL (Prisma ORM)
- TypeScript
MySQL は今回の機能追加で必要となり追加されたものです。
インフラ周りや一部バックエンドの開発は工数の関係から社員の方にお任せしました。
難しかった点
仕様・実装方法の検討
社内の企画チームが作成したワイヤーフレームを基に、各機能の意図や要件についてコミュニケーションを重ね、仕様の決定を行いました。
いくつかの仕様について、こちらからも提案し、コメントをいただいたのですが、企画チームの方は自分にはなかった視点で評価をしており、エンジニアとは視野の違う世界があることを知りました。今回の機能追加は拡張機能を公開するエンジニアと、新規ユーザーとしてリーチしていく非エンジニアの双方へアプローチを行う施策だったのですが、事前に利用状況の調査を行った上でニーズを発見し、根拠のある提案をされていて、専門チームの存在意義が強く感じられました。
データベース（DB）設計
考慮する要素が多く、個人的には最も苦戦した部分です。
自分なりに設計を行い、それに対してメンターの方からフィードバックをいただいたのですが、必要な修正点について、DB設計の原則に基づいたご指摘をいただき、大変勉強になりました。設計を行う際には、実際のユースケースやクエリ数を想定しながらなるべくパフォーマンスが良くなるような構成を目指しました。また、設計をしている段階で、提案されている機能の一部はインターンシップの期間中に実装が間に合わないことがわかっており、今後の開発でカラムの追加などが行われることを想定した外部キーの設定をしています。
新規フレームワークの習得
私は Next.js を使用した開発の経験があったものの、Vue.js + Express.js という構成のプロジェクトには触れたことがなく、その習得から行う必要がありました。
フレームワークの学習をするだけという時間をできる限り少なくしたかったので、ある程度の理解ができた段階でプロジェクト本体のコードを読み、出てきたメソッドに関してドキュメントを読むようにするなど、フレームワークの習得とプロジェクトの把握を同時に行うよう努めていました。
デザイン
今回のプロジェクトにはデザイナーが参加しておらず、フロン トの実装とデザインを並行して私が行いました。
デザインに関しては全く経験がなく、タスクの説明を受けた際には狼狽していました。単に見た目の話ではない UI をデザインするため、企画チームの方やメンターの方からコメントをいただきながら、工数とクオリティのバランスがとれたデザインを目指しました。
感想
今回、8週間というインターンシップとしては長めの期間、業務に参加させていただいたのですが、LINEヤフーという企業について感じたことが2つあります。
1つ目は分割による専門性の獲得です。今回の業務で関わりのあった企画チームをはじめとし、私が参加させていただいた社内向けインフラを提供するチームや、アクセシビリティを専門とするチームなど、プロダクト単位ではない独自のミッションを持ったチームが社内にいくつも存在します。個人開発であれば1人で担当しているような内容を、それぞれの専門チームによって精査していることが、LINEヤフーのプロダクト品質の高さに貢献しているのだなと感じました。
2つ目が新規プロジェクトの始めやすさです。実際の人事や予算割当については存じ上げないのですが、開発を始める環境についてはとても整備されています。Web アプリケーションの開発に必要な CSS フレームワークやアイコンセット、RDB サーバー、デプロイ環境などのすべてが社内向けに内製されていて、今回のプロジェクトでもこれらの社内向けツールを活用しています。選定の手間やコストが省けるということがハードルを下げるとともに、品質が担保され、デモの段階でも十分に高いクオリティで作成することができるだろう と思いました。
このインターンシップでは仕様決定 → デザイン → 実装 → テスト → リリース という開発業務の一通りに触れる機会をいただきました。行った内容はどれも Web アプリケーションとして極めて基本的な内容であったように思います。しかしながら、各フレームワークの機能を組み合わせた実装であるなど、ただプログラミングの学習を行うだけでは難しいものです。つい最近エンジニアとしての第一歩を踏み出した私にとっては、次のステップとしてとても良い経験となり、今後どのような場所で開発を行うとしても活かせるスキルを身につけられたと思います。
メンターからの一言
佐藤さんのメンターを務めた、吉澤峻行です。
私が1、2日で試験的に作成した社内Chrome拡張ストアを見事にリニューアルしてくれて非常にうれしいです。佐藤さんは非常に優秀な人で一緒に取り組んでいて私自身もとても楽しむことができました。初めて取り組む内容の仕事も多い中、自力で必要な情報を把握しながら必要に応じて質問をしてくださったので協業はかなりやりやすかったです。その手際のよさに、メンバー全員が感服していました。
約2カ月という短い期間で、お伝えできた情報はわずかだったと思います。今回のインターンが何かの役に立ってくだされば幸いです。ありがとうございました。
