ゆめみのインターンに参加した

こんにちは、だいちです。

11/16(月)から 11/20(金)の 5 日間、ゆめみさんでフロントエンドエンジニアインターンをしてきました。

インターン中の課題

このインターンではベースとして、Figma のデザインカンプを元に画面を作成するという課題が与えられていました。ただそこまで厳密にやることが決まっていた訳ではなかったので、自分が学びたい・経験したいことを自由にやらせて頂きました。

やりたいと言ったこと

コンポーネントの切り出しと管理しやすい設計方法
フロントエンド開発でのツール周り（静的解析、自動テスト・デプロイ、その他実務で使用していること）
パフォーマンスを上げるための工夫
フロントエンドのテストの使い分け（どのようなものにテストを書くのか、または書かないのか）

このインターンでの自分の目標

このインターンでは以下の目標にしていました。

管理のしやすいコンポーネントの設計
フロントエンドでのテスト
パフォーマンスへの取り組み
CSS Framework を使わないで CSS にちょっと強くなる

完成したもの

Figma のデザインカンプに必要なコンポーネント
TOP ページ（レスポンシブ対応：PC、Tablet、Mobile）

期間内に全て完成しませんでしたが、その分開発手法やデザインの考え方を学ぶことができました。

以下に学んで良かったことを列挙します。

学んだこと

開発手法

今回は簡易的な git-flow を採用しました。feature、masterで管理し、PR をメンターの方にレビューして頂きました。

CSS

~~思ったところにいかない辛み~~
media query
flexbox：超便利！CSS ちょっとわかった気になる！
relative, absolute
object-fit：正方形画像をトリミングかリサイズするかの判断

設計

コンポーネントの切り出し

以下はシンプルなカードですが、フィードバックを元に正方形の画像や右側のコンテンツをコンポーネント化したり、タグとそれらをまとめたタググループのコンポーネントを作成しました。

ディレクトリ管理

共通の CSS プロパティを外部に外出ししました。
仕様変更の際は一箇所だけ変更すれば良いので、変化に強くなります。

media-query

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


export const size = (screenSize: string): string => {
  if (screenSize === "mobile") {
    return `@media (max-width: 767px)`;
  } else if (screenSize === "tablet") {
    return `@media (min-width: 768px) and (max-width: 1151px)`;
  } else if (screenSize === "mt") {
    return `@media (max-width: 1151px)`;
  } else if (screenSize === "pc") {
    return `@media (min-width: 1152px)`;
  }
};

export const mq = {
  mobile: size("mobile"),
  tablet: size("tablet"),
  mobileTablet: size("mt"),
  pc: size("pc"),
};

max-width

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


export const width = (size: string): string => {
  if (size === "pc") {
    return `max-width: 1152px;`;
  } else if (size === `tablet`) {
    return `max-width: 768px;`;
  } else if (size === `mobile`) {
    return `max-width: 375px;`;
  }
};

export const mw = {
  pc: width("pc"),
  tablet: width("tablet"),
  mobile: width("mobile"),
};

Template, Modules のようなまとまったコンポーネントを別のフォルダに管理しました。

静的解析

huskyで git hook を扱い、commit の前に ESLint と Prettier が動くように設定しました。

CI/CD

Jenkins, Circle CI, AWS CodePipLine

jenkince

AWS Amplify

テスト

現場でもフロントはテストを書くとのことでした。
- ユニットテスト：Jest（主流）, ava（並列処理が強み）
- E2E テスト：codecept.js（自動化）

パフォーマンス

一番大事なことはユーザーを操作をいかに妨げないか
- 例. リンクにホバーした時点でデータを取ってくる（dev to）
実務だと Lazy Loading、バンドルの分割が多い
画像はボトルネックになりやすい
おすすめの著書
- Web フロントエンドハイパフォーマンスチューニング
- 超速! Web ページ速度改善ガイド ── 使いやすさは「速さ」から始まる

感想

当初の目的であった設計周りの話を実務ベースで学べたのが良かったです。
自分の知らない技術に触れられて知見が溜まりました。
技術だけでなく、考え方（コンポーネントの切り方、拡張性の高いコンポーネント・スタイリング）を知り、次へつながるモチベーションになりました。

お礼

自分のやりたいことをどんどんやらせて頂きました。
レビューや質問などに丁寧に対応して頂いた桑原さん、人事の方、フロントエンドチームの方々に感謝します。ありがとうございました。