フューチャー技術ブログ

初めての長期インターンでWebアプリ開発を経験しました!

はじめに

こんにちは!フューチャーのサマーインターン2022 Engineer Campに参加いたしました、山岸涼です。

大学では、情報系の学科に所属しており、プログラミングやコンピュータサイエンスを学んでいます。課外活動では、サッカーサークルと、企業が運営している大学生プログラミングコミュニティに所属しています。

プログラミングでは、コミュニティで提供された課題に対し、2ヶ月間のチーム開発やハッカソン経験をしてきました。しかし、業務的な経験がないため、長期で体験できるインターンを経験したいと思いました。その中で、現場での作業の進め方やコミュニケーションの取り方などを体験したいと考えました。IT業界を中心に就職を考えている私にとって、業務をイメージできる良い経験になると考え応募しました。

この記事では、インターンで学んだことをまとめていきます!

参加前のスキル・経験

  • 独学やコミュニティで習得
    • HTML, CSS, JavaScript, PHP, Git
  • 大学の授業で習得(基本文法は書ける程度)
    • C, C++, Python, Java
  • チーム開発経験あり
  • 技術系アルバイトやインターンの経験なし
  • 資格 なし

大学からプログラミングを学び始めました。

最初はC言語から学びましたが、print文が理解するのに3日かかったレベルでした。プログラムはある程度書けるが、実践経験のない、典型的な大学生のスキルセットだと思います。

インターンの概要

私はサブスクサービスのWebアプリ開発 に参加しました。

サブスクリプション型サービスにおけるチーム開発を経験します。フロントエンド開発経験(HTML CSS JavaScriptなど)がある前提で、VueやGit、Slackを使った経験(なくてもOK)があれば大丈夫です。

業務内容はメディア業界向けクラウドサービスの業務システムの移行です。こののクラウドサービスはHTML, CSS, JavaScriptで作られており、これをすべてVue.jsに移行していきます。

従来のシステムでは、保守性が低いことや、案件者からの要望に沿ったカスタマイズが容易ではないことから、システムを刷新し、保守性の確保することが急務でした。そのため、古いコードをVueで作り直す必要がありました。

なぜVueなのかについては、プロジェクト自体が中規模の開発であること、システムの保守性の確保、カスタムの柔軟性、学習コストが低い、コンポーネントの再利用が可能というメリットがあるためです。

具体的にやったこと

インターンでは、メンター2名、インターン生2名のチームで開発を行いました。

基本はリモートワークで、初日や最終日、同じ配属先の社員との交流会がある日は出社しました。

  • 環境構築とVueの基礎理解
  • 開発
  • フィードバックと修正
  • テスト

環境構築とVueの基礎理解

初週はPCのプロキシ周りの設定と環境構築を行います。PCセットアップのマニュアルが準備されており、メンターの方のサポートを受けつつ行います。次はVueの環境構築です。Node.jsで仮想DOMを構築し、プロジェクトのフォルダをローカルに落とし込みます。

環境構築が終わると、業務内容やクラウドサービスの概要についての理解に時間をあてます。

私はVueが未経験でしたので、Vueの基礎知識や社内ライブラリの概要がまとまったリファレンスを活用して、基礎知識を学んでいきました。

開発

ここからがインターンの本題です。
業務で用いた技術は下記の通りです。

  • 言語 : HTML, CSS, JavaScript, Vue.js
  • その他 : GitLab, Slack
  • エディタ : VsCode

メンターからタスクを渡され、独自の作業ブランチを作成し、開発に取り掛かります。

社内のライブラリを用いて、コンポーネントを組み合わせながら、ダイアログや、モーダルなどの機能を開発していきました。

質問や業務内容の説明などのやりとりはSlackで行いました。開発が一番楽しいです!

フィードバックと修正

一通り開発が終わると、実装したファイルを追加し、リモート上に反映させます。プルリクエストを作成し、メンターの方からGitLab上でフィードバックをいただきます。
細かな修正箇所や、ミスを指摘されるので、修正を重ねていき、完成に近づけていきます。

テスト

最終チェックで、見た目や動作がおかしくないかのテストを行い、問題がなければメンターが親ブランチにマージして終了です。

そして次のタスクが渡され、これを繰り返していきます。

やることは大きく変わらないので、だんだんと作業スピードがだんだんと上がっていき、少し難しいタスクにも挑戦しました!

インターン中の1日

10:00~ 開始

まず最初に「今日の予定、今日の目標、やること」をSlackで社員に報告し、やるべきことを整理します。

12:00~13:00 休憩

基本どのタイミングでとってもOKです。

私は、仕事の区切りがいいところで休憩をし、昼食や昼寝をしていました。

出社した場合は、社員の方とランチにいきました。

13:00~17:00 業務再開

ひたすら開発です。

17:00~17:30 日次報告

今日取り組んだこと、目標が達成できたかをメンターと共有します。

その他の業務連絡や、雑談などをします。業務外での話で盛り上がることがありました笑

〜19:00 終了

日報と勤務時間を登録して、勤務終了です。

まとめ

Vueを使ってクラウドサービスの業務システムの移行を行いました。社内独自のライブラリを扱ったため、コードやリファレンスなどからVueの扱い方を理解することが大変でしたが、Slackを通じてメンターの方がサポートしてくださり、または社内勉強会に参加して理解を深めることができました。

開発では、コードを見ただけで伝わる書き方や、厳格な命名規則が求められることを教わりました。他の社員が書いたコードを見ても、明示的な関数名や、コメントでコードの動きの説明がなされており、今後身に付けるべき力だと感じました。

また、エンジニアに必要なマインドセットとして、開発に携わる際に、そこで使われる技術の仕組みを理解しようとするマインドをもつことが大切であることを教わりました。

そのマインドを持って開発に取り組むことで、違うプロジェクトで異なる技術を使う機会があったとしても、技術のインプットが早く、応用が効くことを学びました。

インターン後も、身につけたVueの知識を自分のものにしていきます。仕組みの部分や、動きを学ぶという意識を持って勉強していこうと思います。他にもフロントエンド周りの言語やフレームワーク(React, Firebase)を詳しく学び、技術の選定や言語比較ができるレベルまで取り組んでいきます!

最後に

1ヶ月という長期インターンで不安な気持ちでいっぱいでしたが、業務だけでなく、同年代のメンバーとの交流会や先輩社員からの講義、ランチやディナーなどのイベントがたくさん詰め込まれており、存分にフューチャーを体感でき、刺激と満足感で心がお腹いっぱいでした。

このような素晴らしい経験をさせていただいたメンターの吉田さん、中村さんをはじめ、HRの方々、同じインターン生の森さんには大変お世話になりました。

本当にありがとうございました!