はじめに

エキサイト株式会社で一ヶ月間、就業型インターンシップ Booost!!!に参加した浅野です。
インターンシップで、取り組んだことや学んだことをまとめていきます。

info.excite.co.jp

自己紹介

私は、修士1年の大学院生です。
GPTを用いてエージェントを発話させ、雑談するエージェント集団の形成理解や文化進化の研究をしており、研究ではPythonを使用しています。また、大学2年生の頃からUnityを使用してゲーム開発もしています。
Web開発はフロントエンドも含め、今回が初めての経験でした。

やったこと

1ヶ月の期間に、BB.excite事業部で、大きく3つの業務に携わらせていただきました。

BB.exciteオプション「ひかりＴＶ for BB.excite」「eset」のページをBEAR.SaturdayからNext.jsにリプレイス
既存ページの文言修正と本番環境へのアップ
BB.exciteオプション一覧ページをデザインを元に作成

学んだこと

3つの業務を通じて学んだことを4点まとめます。

設計の大切さ

今回ページを作成する際にコンポーネントを作成してみて特に感じたことは、最初の段階での設計の大切さです。
今回は作成したコンポーネントについて随時メンターの方にアドバイスを貰いながら修正することができ、時間を大きくロスすることなく作成することができましたが、始めにどこからどこの内容をコンポーネント化するのかや、子コンポーネントの使用など、ページ全体の構成を細かく想定をした上で、可読性も保守性も高いものをスムーズに作成できるようになりたいと思いました。

Tailwind CSS

Tailwind CSSとは、ユーティリティークラスを活用したCSS フレームワークです。
私が今回Tailwind CSSを使用して一番便利だと感じた点は、クラス名を考えることなく、直接スタイルを指定できる点です。
これにより、これまでCSSを書く際に、時間が勿体ないと感じつつも手が止まってしまっていたHTML側でCSSファイルで呼び出すための適切なクラス名を考えるのを無くすことができます。　　
さらに、そのHTMLにどんなスタイルが当たっているのかを一目で確認できます。
同様の内容も毎回スタイル指定する必要があるため、コンポーネント化しない場合には、指定量も増えて面倒に感じますが、コンポーネントも併せて活用することで、簡単で分かりやすくスタイル指定ができるフレームワークだと思いました。

ブルーグリーンデプロイメント

リリースする際には、2つの本番環境を用いる「ブルーグリーンデプロイメント」の方式がとられていることを知りました。現在の本番環境をブルーに、新しい機能が追加されたものをグリーンに構築し、新しいものが正常に動くことが確認されたら、本番環境の切り替えと現行のものを廃棄するというシステムをほとんど止めることなくリリースできる方法です。
個人開発ではなかなか知ることができない、大勢の人に使ってもらっているサービスだからこその安定してサービスを提供するデプロイ方法を知ることができました。

色々な便利機能

インターンシップ期間中にはメンターの方から開発効率を上げるツールをたくさん教えていただきました。
例えば、VSCodeの拡張機能で、自動でインデントを調整してくれるPrettierや、無料のランチャーツールRayCastは、任意のショートカットキーを指定して、クリップボードの履歴を確認し再度使用できる機能や、左右のウィンドウへの表示を簡単にさせる機能などがあります。
使いこなすまでは慣れも必要ですが、日頃から使用したり、新しい便利ツールへのアンテナも張ったりして、開発する上で効率化できる所は積極的に取り入れたいと思いました。

最後に

メンターの方には、初めてのフロントエンド開発で分からないことだらけでたくさんご迷惑をおかけしましたが、丁寧にサポートして頂き、最後までやり切ることができました。また、BB.excite事業部の方々をはじめ、新卒の他事業部のエンジニアの方や人事の方など多くの方々と話すことができ、今後自分がどのような社会人になっていきたいかを考える視野が広がりました。
あっという間の充実した1ヶ月間を過ごすことができました。本当にありがとうございました🤗