こんにちは！エンジニアインターン生の寺岡です。

私はインターンを始めてからの約1年間、フロントエンドに関する業務を中心に担ってきました。

今回は、クランチタイマーにおけるフロントエンドエンジニアインターンの業務内容についてを紹介したいと思います。

クランチタイマーについて気になっている方、フロントエンドエンジニアの業務内容について気になっている方の参考にしていただければ幸いです！

フロントエンドのタスク

プロジェクトや状況にもよりますが、業務のほとんどは開発をしています。

基本的にはプロジェクトのリーダーからタスクをいただき、それを解消していくという流れです。

フロントエンドのタスクの例としては以下のようなものがあります。

• ログイン画面の実装
• ユーザ一覧データの取得処理実装
• 検索のテストコード追加
• 検索バグの原因調査・解消

スキルや希望次第では、上記の開発以外の業務を任せていただける場合もあります。

実際に、技術調査や設計、スケジュール作成や見積もり、マネジメントまでを全てインターン生が担っていたプロジェクトもあります。

裁量権が大きく、責任ある仕事を経験できるのはクランチタイマーでインターンをするメリットのひとつだと考えています。

プロジェクト紹介

実際に関わったプロジェクトについても少しご紹介します。

私はこれまでの約1年間だけでも、下記のような様々な種類のプロジェクトに関わりました。

• Webアプリ新規開発
• Webアプリ共同開発
• Webサイトリニューアル
• 既存アプリの機能変更・バグ改修
• 新規事業

使用技術としては、React・Vue.js・Next.js・TypeScript・TailwindCSS・Styled Componentsなどです。

このうち今回は「Webサイトリニューアル」のプロジェクトについて簡単にご紹介します。

リニューアルの目的

目的はWordPressで作られたWebサイトのユーザ体験を向上させることです。

具体的には、デザインやサイト構成の変更・表示速度等のパフォーマンス向上などが考えられます。

技術選定・設計・環境構築

ありがたいことに、このプロジェクトでは開発だけでなく調査・技術選定・設計・環境構築なども任せていただきました。

このプロジェクトは今までのプロジェクトや個人での開発と異なり、「既存のデータ・機能・SEO等を引き継ぎながらパフォーマンスを大幅に向上させる」というリニューアルならではの条件があり、調査や技術選定は慎重に行いました。

しかし、調査の結果、この条件はベースの技術をアップグレードするだけでも十分達成できると判断したため、「保守性や開発体験も併せて向上させる」という目標を独自に設定しました。

保守性・可読性の低いコードはバグだけでなく無駄なコードや処理も生み、結果的にサイトのパフォーマンスを低下させる原因にもなりうるため、当初の目的であったパフォーマンス向上にも間接的に影響すると考えたためです。

具体的な取り組みとして、まず、変数名やディレクトリ構造・コンポーネント設計方針などのルールを作成し、新しいメンバーもルールに則って開発を行えるようドキュメントの作成を行いました。

また、ヒューマンエラーを可能な限り減少させるため、チームでの開発体験向上のためにCI/CD、自動テスト、自動型生成なども取り入れました。

開発

開発フェーズでは、コードレビューの際のチェック項目を設定しておくことで手戻りを防ぎつつ、ミーティングによるコーディング規約等の確認、変数名やコンポーネント設計等のコードレビューにより保守性・可読性の向上を図りました。

Jamstack呼ばれる構成を採用したため、フロントエンドのタスクとしてはデータの取得とページの実装がほとんどでした。

開発の難易度はあまり高くありませんでしたが、変数名やコンポーネント設計についてメンバーとの認識がズレており、中々進捗が出ないときもありました。

Jamstackについては以前こちらにまとめたのでぜひご覧ください。

https://www.crunchtimer.jp/blog/2289

プロジェクトを通して

今回技術選定や設計の段階から任せていただけたことで、大きく成長できたと感じています。

一方で、自分が決めたルールや得た知識をどうやってチームに共有するか、期限が決まっている中でどこまで保守性・可読性を優先するか、など難しい課題も見えてきました。

さいごに

ボタンを作り、クリック時の動きを作り、ページを作る、というようにユーザーが直接触れる部分に関わることができるというのがフロントエンドエンジニアの魅力の一つだと思います。

ですが、本記事で紹介したように、パフォーマンス向上や保守性・可読性・開発体験向上・データの管理方法など見た目以外の部分についても非常に奥が深いです。
（むしろここが、フロントエンドエンジニアの腕が試される部分だと個人的には考えています）

この記事を読んだ人に、フロントエンドエンジニアやクランチタイマーの魅力が伝わっていれば嬉しいです！