2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ディップ株式会社の26新卒内定者インターンシップに参加してきました

2
Posted at

はじめに

初めましての方も、そうでない方もこんにちは。
12月から2月にかけて、ディップ株式会社の内定者インターンシップに参加していました。

本記事では、インターン期間中に取り組んだ内容や、実際にどのような活動を行ったのか、そこから得られた学びについて紹介します。

少しでもインターンの雰囲気が伝われば嬉しいです。ぜひ最後までご覧ください。

内定者インターンで行ったこと

インターン期間中は主に以下の2つの取り組みを行いました。

  • 個人開発

    • 日報の質を高めるWebアプリの開発
  • テックブログのリニューアル

どちらも課題の発見、企画、設計、実装まで一通り経験することができました。

インターン開始から終了までのスケジュール

12月(初週)

まずはインターン開始にあたり、会社や業務への理解を深める時間が設けられていました。

  • 会社説明(ディップとはどんな会社か)
  • インターンで取り組む内容の説明
  • チームビルディング
  • 働く上での注意事項の共有

12月末まで

12月は主に企画や設計のフェーズが中心でした。
実際の開発に入る前に、課題の整理やプロダクトの方向性についてチームで議論しました。

  • 企画立案
  • 3C分析
  • 現行テックブログの仕様理解
  • 仕様駆動開発ワーク
  • AI-DLCについての学習
  • インセプションデッキの作成

プロダクトを開発する前段階として、ビジネスやユーザー視点からの整理を行いました。

1月

1月からは実際の開発に向けた設計と実装が始まりました。

  • 要件定義
  • Figmaを用いたUI/UX設計
  • MicroCMSのスキーマ定義
  • CTOとの壁打ち
  • 中間報告
  • 個人開発の開始
  • テックブログ改修の開発開始

2月

2月は開発の仕上げと成果発表の期間でした。

  • テックブログと個人開発の最終調整
  • 最終発表

個人開発について

個人開発のテーマは自由でした。
ただし、使用する技術には一定のルールがありました。

基本的な技術スタックは以下です。

  • Next.js
  • TypeScript

また、BaaSや外部APIなどの技術ツールを使用する場合は、原則として申請が必要でした。(例外あり)

そのため、普段よく使っているツールであっても利用できない場合があり、インターン環境の制約を考慮した技術選定が求められました。

個人開発で何を作ったのか

背景

私は日報作成支援ツールを開発しました。

ディップでは主に新卒向けに日報を書く文化があり、内定者も同様に日報を提出します。
しかし日報を書き続ける中で、ある違和感を抱くようになりました。

今回のインターンでは8人のメンバーと協力してテックブログの改善などを進めていましたが、日報の内容が「やったことのリスト」になっているケースが多いと感じたからです。

もちろん自分自身も例外ではありませんでした。
しかし客観的に読み返すと、「それだけで終わらせるのはもったいない」と感じる場面が多くありました。

例えば以下のような内容です。

  • チームで議論して得た学び
  • うまくいかなかった試行錯誤
  • 新しく気づいた知識や視点

こうした内容は、本来であれば日報の中で共有されると価値が高いものです。
しかし実際には十分に言語化されず、単なる作業記録として終わってしまうこともありました。

インターン開始時のキックオフでは、日報を書く重要性について丁寧に説明を受けていました。
それにもかかわらず、日報が次第に作業化してしまっている状況に課題を感じました。

もし「やったこと」を書くだけであれば、TODOリスト等に記録するだけでも十分であり、日報としての価値は小さくなってしまいます。

こうした背景から、学びや気づきを言語化しやすくする日報作成支援ツールを開発することにしました。

開発初期

開発を始めたのは、1月中頃の中間報告から1〜2週間後でした。
この時点で残り期間は約1か月しかなく、さらにテックブログのリニューアルも並行して進める必要がありました。

そのため、まずは課題・企画・設計を整理し、必要な機能を洗い出しました。
その後、実装難易度ごとに工数を見積もり、MVP(Minimum Viable Product)として実装する機能を絞り込むことに注力しました。

また、テックブログ開発の進行状況によってスケジュールが変わる可能性もあったため、ある程度バッファを持たせた計画にしました。

実装した機能

MVPとして絞り込んだ機能は以下の2つです。

  • 過去日報の参照・検索
  • AIによる振り返り質問生成

過去日報の参照・検索

日報を書くとき、「以前も似たような状況があった」と感じることがあっても、過去の日報をさかのぼって読み返すのは意外と手間がかかります。

そこで、過去に書いた日報をキーワードで検索・参照できる機能を実装しました。

過去の自分の記録を手軽に振り返れることで、「あのとき自分はどう考えていたか」を確認しながら今日の学びを言語化しやすくする、というコンセプトです。

AIによる振り返り質問生成

もう一つの機能が、AIを活用した振り返り質問の生成です。

「今日やったこと」を入力すると、AIがその内容をもとに

  • 「その判断をした理由は何ですか?」
  • 「うまくいかなかった点と、その原因は何だと思いますか?」

といった形で、思考を深めるための質問を自動生成します。

日報が「作業リスト」で終わってしまう原因の一つは、何を書けばいいかわからないという状態だと感じていました。
質問という形で問いを立てることで、言語化のきっかけを作ることを狙いました。

開発を通じて感じたこと

タイトなスケジュールの中でMVPを決め、実装まで進める経験は、これまでの個人開発とは異なる密度でした。

特に印象に残っているのは、制約があるほど設計の解像度が上がるという点です。

使えるツールや時間が限られているからこそ、「本当に必要な機能は何か」を真剣に考える必要がありました。
結果として機能を大きく削りながらも、コンセプトの明確なプロダクトになったと感じています。

テックブログのリニューアルについて

個人開発と並行して、チームでディップのテックブログのリニューアルにも取り組みました。

主な担当範囲は以下です。

  • MicroCMSのスキーマ設計
  • フロントエンド実装
  • レスポンシブ対応
  • OGP実装

MicroCMSのスキーマ設計では、記事データをどのような構造で管理するかをチームで議論しながら定義していきました。
CMSのスキーマやエンドポイントの命名など、細かい部分まで検討する必要があり、設計の重要性を実感しました。

フロントエンドの実装では、Figmaで設計されたデザインをNext.js + TypeScriptで再現しました。
レスポンシブ対応については、Figmaに定義されていない部分もあったため、チームで相談しながら調整しました。

また、OGPの実装では記事ごとに適切なタイトルやサムネイルがSNSで表示されるよう設定しました。

ステージング環境での動作確認ではいくつか技術的な課題もありましたが、チームで解決しながら最終的に公開まで進めることができました。

最終発表

2月末に行われた最終発表では、個人開発とテックブログリニューアルの成果をそれぞれ発表しました。

個人開発については、課題の発見から企画・設計・実装に至るまでのプロセスと、実際に動作するプロダクトのデモを紹介しました。

発表を通じて、自分が当たり前に行っていた設計判断について改めて言語化する機会になりました。

インターンを終えて

約3ヶ月のインターンを振り返ると、技術的なスキルの成長以上に、エンジニアとして働くとはどういうことかを実感できた期間だったと感じています。

特に印象に残っている学びは以下の3つです。

1. 課題起点でものを考える習慣

企画フェーズで3C分析やインセプションデッキを作成した経験を通して、「作りたいものを作る」のではなく、ユーザーにとって価値のあるものを考える視点を学びました。

2. 制約の中で意思決定する経験

技術選定の制約やスケジュールの制限の中で、優先順位をつけながら開発を進める経験ができました。

3. チーム開発の解像度

8人のチームで一つのプロダクトを作る中で、認識合わせやコミュニケーションの重要性を改めて実感しました。
個人開発では見えにくい部分を学ぶことができました。

4月からはいよいよ社会人としてのスタートです。
このインターンで得た経験と視点を活かし、エンジニアとして成長していきたいと思います。

おわりに

パフォーマンス改善について

開発中、ステージング環境でパフォーマンスに関する課題が発生しました。

主な原因の一つは、Next.jsのImageコンポーネントでfillを使用した際に適切なsize指定を行っていなかったことでした。
その結果、必要以上に大きな画像が配信されてしまい、表示パフォーマンスに影響が出ていました。

また、ページのレンダリング設定も見直しました。

export const dynamic = 'force-static';

この設定により、不要なSSRを避け静的生成に切り替えることで改善しました。

Next.jsではレンダリング方式や画像最適化の設定がパフォーマンスに影響するため、改めて重要なポイントだと感じました。

ここまで読んでいただきありがとうございました。
この記事が、これからインターンに参加する方やエンジニアを目指す方の参考になれば嬉しいです。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?